/* =====================================================================
 * Sphere — Site Template Sphere Mesh 1.0 (template spheremesh2)
 * Skin di spheremesh.com. Carica DOPO sp-site-layout-2.0, sp-site-template-basic-2.0,
 * sp-site-template-basicpro-1.0 e sp-animations-2.0 (loadingOrder 16).
 * Prefissi: sp-tplsm-* (specifici di questo skin), --sp-tplsm-* (token statici derivati).
 *
 * @placeholders: #0d1421
 * Tutti gli altri colori arrivano come --sp-* dal :root di sp-site-layout-2.0 (sempre letti
 * con fallback). Nessun placeholder nuovo, nessun !important.
 *
 * FONDO SCURO GLOBALE (decisione di Davide, 23/9). basic-2.0 e' disegnato per fondi chiari e
 * cabla inchiostri e superfici attraverso i suoi token --sp-tpl-*: qui quei token vengono
 * RIMAPPATI (§1) e i selettori che usano il bianco come superficie tornano scuri (§2). E' la
 * via "strato per strato nel foglio del template": il core e basic-2.0 non si toccano.
 *
 * LEGGIBILE A RIPOSO (§3): tutto e' visibile senza JS. Le entrate animate partono solo sotto
 * html.sp-js-motion, che jSite-2.0 mette solo se il movimento non e' ridotto.
 *
 * 2026-09-23 — piano: claudio/proposte/spheremesh-template-piano.md
 * ===================================================================== */

/* =====================================================================
 * §0 Token
 * ===================================================================== */
:root {
  --sp-contrast-dark: #0d1421;

  --sp-tplsm-bg:        var(--sp-background, #070b12);
  --sp-tplsm-surface:   var(--sp-contrast-dark, #0d1421);
  --sp-tplsm-surface-2: color-mix(in srgb, var(--sp-contrast-dark, #0d1421) 92%, var(--sp-default, #e9eef4));
  --sp-tplsm-deep:      color-mix(in srgb, var(--sp-background, #070b12) 70%, var(--sp-footer, #04070c));
  --sp-tplsm-glass:     color-mix(in srgb, var(--sp-background, #070b12) 74%, transparent);
  --sp-tplsm-text:      var(--sp-default, #e9eef4);
  --sp-tplsm-text-2:    color-mix(in srgb, var(--sp-default, #e9eef4) 76%, var(--sp-background, #070b12));
  --sp-tplsm-muted:     var(--sp-muted, #8493a6);
  --sp-tplsm-line:      color-mix(in srgb, var(--sp-default, #e9eef4) 11%, transparent);
  --sp-tplsm-line-soft: color-mix(in srgb, var(--sp-default, #e9eef4) 6%, transparent);
  --sp-tplsm-p-dim:     color-mix(in srgb, var(--sp-primary, #0abab5) 13%, transparent);
  --sp-tplsm-p-line:    color-mix(in srgb, var(--sp-primary, #0abab5) 36%, transparent);
  --sp-tplsm-p-glow:    color-mix(in srgb, var(--sp-primary, #0abab5) 32%, transparent);
  --sp-tplsm-a-dim:     color-mix(in srgb, var(--sp-tertiary, #d4a35a) 14%, transparent);
  --sp-tplsm-a-line:    color-mix(in srgb, var(--sp-tertiary, #d4a35a) 40%, transparent);
  /* testo sul bottone teal: il fondo scuro, non il bianco (contrasto AA) */
  --sp-tplsm-on-primary: color-mix(in srgb, var(--sp-background, #070b12) 88%, var(--sp-primary, #0abab5));
  --sp-tplsm-ease: cubic-bezier(.19, 1, .22, 1);
  --sp-tplsm-radius: 16px;
  --sp-tplsm-radius-xl: 24px;
  --sp-tplsm-section: clamp(56px, 6vw, 96px);
  /* RITMO VERTICALE, SCALA OTTICA L/M/S (216, Davide 1/10): gli spazi come li vede l'occhio, da fondo visibile a cima visibile (linea di
     base, cima delle maiuscole, bordo di card e fasce: i testi dei blocchi sono tagliati con text-box, vedi "COMPENSAZIONE OTTICA").
     I tre livelli scalano insieme dalla base P qui sopra (stesso clamp, rapporto 4 : 2 : 1), cosi' la gerarchia resta anche a 390:
     L = fra sezioni (tutti i confini fra slot, anche corpo <-> corpo) e dentro le fasce; M = testa di una sezione -> suo contenuto;
     S = titolo -> sottotitolo, e fra righe d'uscita consecutive */
  --sp-tplsm-ritmo-l: calc(var(--sp-tplsm-section) * 1.25);
  --sp-tplsm-ritmo-m: calc(var(--sp-tplsm-ritmo-l) / 2);
  --sp-tplsm-ritmo-s: calc(var(--sp-tplsm-ritmo-l) / 4);
  /* i confini per ruolo (215): tutti uguali a L, per scelta di Davide */
  --sp-tplsm-gap-testata: var(--sp-tplsm-ritmo-l);
  --sp-tplsm-gap-intro: var(--sp-tplsm-ritmo-l);
  --sp-tplsm-gap-corpo: var(--sp-tplsm-ritmo-l);
  --sp-tplsm-gap-chiusura: var(--sp-tplsm-ritmo-l);
  --sp-tplsm-gap-footer: var(--sp-tplsm-ritmo-l);
  /* UN solo sistema bottone per tutto il sito (Davide: "i pulsanti tutti uguali") */
  --sp-tplsm-btn-h: 48px;
  --sp-tplsm-btn-px: 24px;
  --sp-tplsm-btn-r: 10px;
  --sp-tplsm-btn-fs: .95rem;
  --sp-tplsm-top: calc(var(--sp-tpl-topbar-h, 38px) + var(--sp-tpl-header-h, 72px));

  /* colori della sfera (letti dal modulo [data-sp-sphere] di jSite-2.0) */
  --sp-sphere-node:  var(--sp-primary, #0abab5);
  --sp-sphere-pulse: var(--sp-secondary, #3ff0e8);
  --sp-sphere-hub:   var(--sp-tertiary, #d4a35a);

  /* §1 remap dei token di basic-2.0 (disegnati per fondo chiaro) */
  --sp-tpl-navy-0:    var(--sp-tplsm-text, #e9eef4);       /* 44 usi come testo, 20 come fondo: i fondi in §2 */
  --sp-tpl-navy-1:    var(--sp-tplsm-surface-2, #19202b);
  --sp-tpl-navy-deep: var(--sp-tplsm-deep, #06090f);
  --sp-tpl-ink-0:     var(--sp-tplsm-text, #e9eef4);
  --sp-tpl-ink-1:     var(--sp-tplsm-text-2, #b6bdc7);
  --sp-tpl-ink-2:     var(--sp-tplsm-muted, #8493a6);
  --sp-tpl-line:      var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  --sp-tpl-line-dark: var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06));
  --sp-tpl-bg-soft:   var(--sp-tplsm-surface, #0d1421);
  --sp-tpl-shadow-1:  0 1px 2px rgba(0, 0, 0, .45);
  --sp-tpl-shadow-2:  0 18px 50px rgba(0, 0, 0, .5);
}
/* LA BARRA DI SCORRIMENTO (dev0 5/10): senza, Firefox e Chrome su KDE disegnano quella chiara di sistema sul fondo scuro. Solo i colori
   (niente color-scheme, che cambierebbe i controlli nativi dei moduli). Si eredita: vale anche per i contenitori interni che scorrono */
html { scrollbar-color: color-mix(in srgb, var(--sp-primary, #0abab5) 32%, var(--sp-tplsm-surface, #0d1421)) var(--sp-tplsm-bg, #070b12); }

/* =====================================================================
 * §2 Fondo scuro: gli strati ereditati da basic-2.0
 * ===================================================================== */
body { background: var(--sp-tplsm-bg, #070b12); color: var(--sp-tplsm-text, #e9eef4); }

/* barra alta: il gradiente primary→secondary con testo bianco non regge sul teal */
.sp-tpl-topbar {
  background: var(--sp-tplsm-deep, #06090f);
  color: var(--sp-tplsm-text-2, #b6bdc7);
  border-bottom: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06));
}
.sp-tpl-topbar a { color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tpl-topbar a:hover { color: var(--sp-primary, #0abab5); opacity: 1; }

.sp-tpl-header {
  background: var(--sp-tplsm-glass, rgba(7, 11, 18, .74));
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06));
}

/* superfici che basic-2.0 dipinge di bianco (#ffffff o #fff) */
.sp-tpl-section, .sp-tpl-content { background: transparent; }
.sp-tpl-value-card, .sp-tpl-news-card, .sp-tpl-product-card, .sp-tpl-login-card,
.sp-tpl-review-card, .sp-tpl-faq, .sp-tpl-bento-card, .sp-tpl-case-card,
.sp-tpl-account-sidebar, .sp-tpl-tab.active, .sp-tpl-tabpane, .sp-tpl-flip-face,
.sp-tpl-content-card, .sp-tpl-reserved-card, .sp-tpl-info-card, .sp-tpl-dash-card,
.sp-tpl-sec-totp-secret {
  background: var(--sp-tplsm-surface, #0d1421);
}
.sp-tpl-search-box input, .sp-tpl-news-search input, .sp-tpl-login-form input,
.sp-tpl-login-form input:focus {
  background: var(--sp-tplsm-deep, #06090f);
  color: var(--sp-tplsm-text, #e9eef4);
}
.sp-tpl-slide-dot.is-active { background: var(--sp-primary, #0abab5); }
/* il QR del TOTP deve restare su bianco per essere letto: resta com'e' */

/* fondi che basic-2.0 costruisce con --sp-tpl-navy-* (qui navy-0 e' diventato chiaro) */
.sp-tpl-lang-panel, .sp-tpl-section--dark, .sp-tpl-news-thumb, .sp-tpl-product-thumb,
.sp-tpl-guide, .sp-tpl-guide-panel, .sp-tpl-reserved--hero, .sp-tpl-reserved--mesh,
.sp-tpl-slideshow, .sp-tpl-hero, .sp-tpl-hero-bg, .sp-tpl-metrics, .sp-tpl-cta-card {
  background: var(--sp-tplsm-deep, #06090f);
}
.sp-tpl-guide-step.is-current { background: var(--sp-tplsm-surface-2, #19202b); }
.sp-tpl-pagination button.is-active { background: var(--sp-primary, #0abab5); color: var(--sp-tplsm-on-primary, #071215); }
.sp-tpl-btn--dark { background: var(--sp-tplsm-surface-2, #19202b); color: var(--sp-tplsm-text, #e9eef4); }
.sp-tpl-btn--dark:hover { background: var(--sp-tplsm-surface, #0d1421); color: var(--sp-tplsm-text, #e9eef4); }

/* BOTTONI — un sistema, tre varianti: primary (teal pieno), ghost (bordato), testo.
   Stessa altezza, padding, raggio, peso e spaziatura ovunque: hero, cta, pagine, banner cookie.
   I .sp-button legacy scritti nei contenuti (SphereDesk, /cookie-settings) seguono le regole del
   banner: ghost, primary solo "accetta". Il peso (0,2,0) supera .sp-tpl-info-card-body a di basic-2.0,
   che li colorava col primary sul primary. */
.sp-tpl-btn, .sp-cookie-banner .sp-button, .sp-main-content .sp-button,
.sp-tpl-flip-back .disable-selection .sp-button, :where(.sphere-dialog) .sp-button:where([data-control]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--sp-tplsm-btn-h, 48px);
  padding: 0 var(--sp-tplsm-btn-px, 24px);
  border-radius: var(--sp-tplsm-btn-r, 10px);
  border: 1px solid transparent;
  font-family: inherit; font-size: var(--sp-tplsm-btn-fs, .95rem); font-weight: 500;
  letter-spacing: .01em; line-height: 1.2; text-transform: none; white-space: nowrap;
  transition: background var(--sp-tr, .25s), border-color var(--sp-tr, .25s), color var(--sp-tr, .25s), transform var(--sp-tr, .25s);
}
.sp-tpl-btn:hover, .sp-cookie-banner .sp-button:hover, .sp-main-content .sp-button:hover,
.sp-tpl-flip-back .disable-selection .sp-button:hover, :where(.sphere-dialog) .sp-button:where([data-control]):hover { transform: translateY(-1px); text-decoration: none; }
/* il CSS condiviso disegna in hover due linee orizzontali sui .sp-button (::before sopra, ::after sotto, 0 → 100%): volute
   nel template vecchio, non qui. Spente in questo tema per tutti i bottoni, pieni e bordati (dialog, banner, contenuto) */
.sp-button::before, .sp-button::after, .sp-tpl-btn::before, .sp-tpl-btn::after { content: none; }
.sp-tpl-btn--ghost, .sp-tpl-btn--outline, .sp-cookie-banner .sp-button, .sp-main-content .sp-button {
  background: transparent; border-color: var(--sp-tplsm-line, rgba(233, 238, 244, .11)); color: var(--sp-tplsm-text, #e9eef4);
}
.sp-tpl-btn--ghost:hover, .sp-tpl-btn--outline:hover, .sp-cookie-banner .sp-button:hover, .sp-main-content .sp-button:hover {
  border-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); color: var(--sp-primary, #0abab5);
}
.sp-tpl-btn--primary, .sp-cookie-banner .sp-button[data-control="closeCookieBanner"], .sp-main-content .sp-button[data-control="closeCookieBanner"],
.sp-tpl-flip-back .disable-selection .sp-button[data-bind], :where(.sphere-dialog) .sp-button:where([data-control]) {
  background: var(--sp-primary, #0abab5); border-color: var(--sp-primary, #0abab5);
  color: var(--sp-tplsm-on-primary, #071215);
  box-shadow: 0 10px 30px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32));
}
.sp-tpl-btn--primary:hover, .sp-cookie-banner .sp-button[data-control="closeCookieBanner"]:hover, .sp-main-content .sp-button[data-control="closeCookieBanner"]:hover,
.sp-tpl-flip-back .disable-selection .sp-button[data-bind]:hover, :where(.sphere-dialog) .sp-button:where([data-control]):hover {
  background: var(--sp-secondary, #3ff0e8); border-color: var(--sp-secondary, #3ff0e8); color: var(--sp-tplsm-on-primary, #071215);
}
/* SECONDARIO (Davide 15/10, profilo): contorno teal, fondo trasparente, stesso raggio, alone attenuato. Variante generale del sistema;
   la chiusura dei form nelle flip card (voce del desBar con data-control, accanto all'invio) la prende per ruolo, come il banner cookie.
   0,4,0 come basic-2.0 3629 (Annulla bianco del tema chiaro): vince l'ordine, niente !important */
.sp-tpl-btn--secondary, .sp-tpl-flip-back .disable-selection .sp-button[data-control] {
  background: transparent; border-color: color-mix(in srgb, var(--sp-primary, #0abab5) 60%, transparent); color: var(--sp-primary, #0abab5);
  box-shadow: 0 6px 18px var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13));
}
.sp-tpl-btn--secondary:hover, .sp-tpl-flip-back .disable-selection .sp-button[data-control]:hover {
  background: var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13)); border-color: var(--sp-primary, #0abab5); color: var(--sp-secondary, #3ff0e8);
}
.sp-tpl-btn--text { background: transparent; border-color: transparent; padding-inline: 4px; color: var(--sp-primary, #0abab5); }
/* il layout 2.0 stila i bottoni del banner con #sp-cookie-banner .sp-button (peso id): lo stesso
   sistema qui, con lo stesso peso, cosi' riposo/hover/focus sono identici agli altri bottoni */
#sp-cookie-banner .sp-button {
  min-height: var(--sp-tplsm-btn-h, 48px); padding: 0 var(--sp-tplsm-btn-px, 24px);
  border-radius: var(--sp-tplsm-btn-r, 10px); font-size: var(--sp-tplsm-btn-fs, .95rem); font-weight: 500; letter-spacing: .01em;
  background: transparent; border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); color: var(--sp-tplsm-text, #e9eef4);
}
#sp-cookie-banner .sp-button:hover { border-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); color: var(--sp-primary, #0abab5); transform: translateY(-1px); }
#sp-cookie-banner .sp-button[data-control="closeCookieBanner"] {
  background: var(--sp-primary, #0abab5); border-color: var(--sp-primary, #0abab5); color: var(--sp-tplsm-on-primary, #071215);
}
#sp-cookie-banner .sp-button[data-control="closeCookieBanner"]:hover { background: var(--sp-secondary, #3ff0e8); border-color: var(--sp-secondary, #3ff0e8); color: var(--sp-tplsm-on-primary, #071215); }
#sp-cookie-banner .sp-button:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
/* banner v1 (con cookieData): usa .sp-tpl-btn, ma il layout 2.0 lo ridimensiona con
   .sp-cookie-banner .sp-tpl-btn (font .82rem, padding 8/14): stesso peso, misure del sistema */
.sp-cookie-banner .sp-tpl-btn {
  min-height: var(--sp-tplsm-btn-h, 48px); padding: 0 var(--sp-tplsm-btn-px, 24px);
  font-size: var(--sp-tplsm-btn-fs, .95rem); letter-spacing: .01em;
}
.sp-cookie-banner .sp-tpl-btn--outline { background: transparent; border-color: var(--sp-tplsm-line, rgba(233, 238, 244, .11)); color: var(--sp-tplsm-text, #e9eef4); }
.sp-cookie-banner .sp-tpl-btn--outline:hover { border-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); color: var(--sp-primary, #0abab5); background: transparent; }
.sp-tpl-btn:focus-visible, .sp-cookie-banner .sp-button:focus-visible, .sp-main-content .sp-button:focus-visible,
.sp-tpl-flip-back .disable-selection .sp-button:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
/* /cookie-settings e modal (publicDesBar): il layout 2.0 li stila con .sp-des-page .sp-public-desbar > .sp-button
   in colori da tema chiaro (#1a1a1a, testo navy): stesso selettore e stesso peso, misure e colori del sistema.
   Quali sono primary lo decide il layout (closeCookieBanner, cookieDes): qui cambia solo l'aspetto. */
.sp-des-page .sp-public-desbar > .sp-button {
  justify-content: center;
  min-height: var(--sp-tplsm-btn-h, 48px); padding: 0 var(--sp-tplsm-btn-px, 24px);
  border-radius: var(--sp-tplsm-btn-r, 10px); font-size: var(--sp-tplsm-btn-fs, .95rem); line-height: 1.2;
  background: transparent; border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); color: var(--sp-tplsm-text, #e9eef4);
}
.sp-des-page .sp-public-desbar > .sp-button:hover,
.sp-des-page .sp-public-desbar > .sp-button:active {
  background: transparent; border-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); color: var(--sp-primary, #0abab5);
}
.sp-des-page .sp-public-desbar > .sp-button[data-control="cookieDes"],
.sp-des-page .sp-public-desbar > .sp-button[data-control="closeCookieBanner"] {
  background: var(--sp-primary, #0abab5); border-color: var(--sp-primary, #0abab5); color: var(--sp-tplsm-on-primary, #071215);
}
.sp-des-page .sp-public-desbar > .sp-button[data-control="cookieDes"]:hover,
.sp-des-page .sp-public-desbar > .sp-button[data-control="closeCookieBanner"]:hover {
  background: var(--sp-secondary, #3ff0e8); border-color: var(--sp-secondary, #3ff0e8); color: var(--sp-tplsm-on-primary, #071215);
}
.sp-des-page .sp-public-desbar > .sp-button:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
/* /cookie-settings su telefono stretto (25/9): .sp-des-page e' un figlio flex di main con min-width auto, quindi si
   allargava al contenuto minimo (45 + 262 + 45 = 352 px) e la pagina sbordava di 32 px a 320. Si puo' stringere,
   padding laterale 20 px, e il bottone piu' lungo ("Conferma le mie scelte") va a capo solo se non ci sta */
@media (max-width: 400px) {
  .sp-des-page { min-width: 0; padding-inline: 20px; }
  .sp-des-page .sp-public-desbar > .sp-button { white-space: normal; max-width: 100%; }
}

/* testata delle pagine interne */
.sp-tpl-page-hero { background: var(--sp-tplsm-deep, #06090f); }
/* ALONE Tiffany dietro la sfera: una regola sola per la testata delle pagine interne e per la sfera della home (13).
   Ogni elemento ne regola colore, forma, centro e intensita' (-c -w -h -y -k) e la coda (-a1/-a2: quanto resta a 25% e
   45% del raggio); -f e' il fattore che il JS dedicato abbassa nel volo, nel ritorno e nello scoppio. Con i valori di
   base e' il radiale di sempre della testata (coda lineare). */
.sp-tpl-page-hero-bg, .sp-tplsm-open-stage::before {
  --sp-tplsm-halo-a: calc(var(--sp-tplsm-halo-k, 100%) * var(--sp-tplsm-halo-f, 1));
  --sp-tplsm-halo: radial-gradient(ellipse var(--sp-tplsm-halo-w, 55%) var(--sp-tplsm-halo-h, 60%) at 50% var(--sp-tplsm-halo-y, 35%),
    color-mix(in srgb, var(--sp-tplsm-halo-c, var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13))) var(--sp-tplsm-halo-a), transparent),
    color-mix(in srgb, var(--sp-tplsm-halo-c, var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13))) calc(var(--sp-tplsm-halo-a) * var(--sp-tplsm-halo-a1, .6154)), transparent) 25%,
    color-mix(in srgb, var(--sp-tplsm-halo-c, var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13))) calc(var(--sp-tplsm-halo-a) * var(--sp-tplsm-halo-a2, .3077)), transparent) 45%,
    transparent 65%);
}
.sp-tpl-page-hero-bg {
  background:
    var(--sp-tplsm-halo),
    linear-gradient(180deg, var(--sp-tplsm-deep, #06090f) 0%, var(--sp-tplsm-bg, #070b12) 100%);
}
/* sezioni "soft" di basic-2.0: fondo pagina, niente fasce chiare */
.sp-tpl-intro, .sp-tpl-cta, .sp-tpl-reviews, .sp-tpl-logos, .sp-tpl-bento, .sp-tpl-case,
.sp-tpl-reserved, .sp-tpl-section--soft {
  background: transparent;
}

/* =====================================================================
 * §3 Motion — leggibile a riposo
 * ===================================================================== */
/* sp-animations-2.0 nasconde .sp-anim-reveal finche' il JS non aggiunge .is-in: qui la
   nascondiamo SOLO se il JS e' partito davvero (html.sp-js-motion). */
html:not(.sp-js-motion) .sp-anim-reveal { opacity: 1; transform: none; }
/* (196) Indietro alla stessa altezza (jspheresite, html[data-sp-scroll-restore]): durante il ripristino (.sp-restoring, ~0,6 s) i
   blocchi d'entrata gia' in vista compaiono subito, senza rifare la salita; piu' giu' la salita resta */
.sp-restoring .sp-anim-reveal { transition: none; }

/* solo transform: letter-spacing cambierebbe il layout e conterebbe come layout shift (CLS) */
@keyframes sp-tplsm-settle { from { transform: translateY(.25em); } to { transform: none; } }
@keyframes sp-tplsm-kb { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
/* (dev0 30/9, Davide: "il nodino spara fuori") la salita e' al massimo fin dove comincia la linea: min(--sp-tplsm-rise, altezza
   della lista - 51 px; la pallina parte 35 px sopra il fondo e la linea comincia a 16 px dall'alto). Si anima bottom (le sue % sono
   l'altezza della lista), perche' le % di translateY sono la pallina stessa: nelle pile corte (3 strati) saliva di 380 px su 320 */
@keyframes sp-tplsm-rise {
  0% { bottom: calc(30.5px - var(--sp-tplsm-t, 26px) * var(--sp-tplsm-u, 1)); opacity: 0; }
  12% { opacity: 1; } 88% { opacity: 1; }
  100% { bottom: calc(30.5px - var(--sp-tplsm-t, 26px) * var(--sp-tplsm-u, 1) + min(var(--sp-tplsm-rise, 420px), 100% - 51px)); opacity: 0; }
}
@keyframes sp-tplsm-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* =====================================================================
 * §4 Testi di scena
 * ===================================================================== */
.sp-tplsm-display {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.035em;           /* compensazione: display grandi sembrano sparsi */
  color: var(--sp-tplsm-text, #e9eef4);
  max-width: 18ch;
}
.sp-tplsm-accent {
  font-style: normal;
  font-weight: 300;
  color: var(--sp-secondary, #3ff0e8);
  text-shadow: 0 0 40px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32));
}
.sp-tplsm-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--sp-tplsm-p-line, rgba(10, 186, 181, .36));
  background: var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13));
  color: var(--sp-tplsm-text-2, #b6bdc7);
  font-size: .9rem; font-weight: 500;
}
.sp-tplsm-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sp-primary, #0abab5);
  box-shadow: 0 0 0 4px var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13));
}
.sp-tplsm-section { padding-block: var(--sp-tplsm-section, clamp(72px, 10vw, 150px)); position: relative; }

/* =====================================================================
 * §5 Hero stage
 * ===================================================================== */
.sp-tpl-hero.sp-tplsm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: clamp(700px, 100svh, 1100px);   /* niente 100vh (§13.15): svh con tetto */
  padding: calc(var(--sp-tplsm-top, 110px) + 24px) 0 clamp(64px, 8vw, 116px);
  background: var(--sp-tplsm-deep, #06090f);
  text-align: center;
}
.sp-tplsm-hero-stage { position: absolute; inset: 0; z-index: -1; }
/* canvas a TUTTA LARGHEZZA della scena: niente scatola dietro la sfera. La sfera si posiziona
   dentro il canvas (data-sp-sphere-cx/-cy) e il suo alone sfuma a zero prima dei bordi.
   Il contenitore delle etichette ha la stessa scatola del canvas (coordinate condivise). */
.sp-tplsm-sphere--hero,
.sp-tplsm-hero .sp-tplsm-sphere-labels {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: transparent;
}
.sp-tplsm-sphere { display: block; }
/* le sfere dentro card e testate sfumano verso i bordi del loro canvas: niente taglio netto */
.sp-tplsm-sphere--page, .sp-tplsm-sphere--bento, .sp-tplsm-sphere--cta {
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}
.sp-tplsm-sphere-labels { pointer-events: none; }
/* targhette della sfera: il nodo e' il pallino (28/9, authPromoter; il bundle jSite-2.0 v4 legge --sp-label-node-on) */
.sp-sphere-label {
  --sp-label-node-on: 1; --sp-label-slot: 12px;
  position: absolute; left: 0; top: 0; opacity: 0;
  display: inline-flex; align-items: center;
  padding: 4px 11px 4px 5px; border-radius: 999px; white-space: nowrap;
  font-size: .78rem; font-weight: 500; letter-spacing: .02em;
  color: var(--sp-tplsm-text, #e9eef4);
  background: var(--sp-tplsm-glass, rgba(7, 11, 18, .74));
  border: 1px solid var(--sp-tplsm-a-line, rgba(212, 163, 90, .4));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  will-change: transform, opacity;
}
.sp-sphere-label::before {
  content: ""; flex: none; width: var(--sp-label-slot); height: var(--sp-label-slot); border-radius: 50%;
  background: var(--sp-sphere-hub, var(--sp-tertiary, #d4a35a)); margin-inline-end: 7px;
  transform: scale(var(--sp-label-node-k, .5));
}
.sp-tplsm-stage-images, .sp-tplsm-stage-video, .sp-tplsm-stage-mesh { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-tplsm-stage-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1));
}
.sp-tplsm-stage-img.is-active { opacity: .5; }
.sp-js-motion .sp-tplsm-stage-img.is-kb { animation: sp-tplsm-kb 9s var(--sp-ease-out, ease-out) both; }
.sp-tplsm-stage-video { object-fit: cover; opacity: .45; }
.sp-tplsm-stage-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, transparent 35%, var(--sp-tplsm-deep, #06090f) 100%),
    linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--sp-tplsm-deep, #06090f) 92%, transparent) 88%);
}
.sp-tplsm-hero-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vw, 28px);
  max-width: 1000px;
}
.sp-tplsm-slides { display: grid; width: 100%; }
.sp-tplsm-slide { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2vw, 24px); }
.sp-tplsm-hero.is-staged .sp-tplsm-slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .9s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), transform .9s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), visibility 0s linear .9s;
}
.sp-tplsm-hero.is-staged .sp-tplsm-slide.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .9s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), transform .9s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), visibility 0s;
}
.sp-tplsm-hero h1.sp-tplsm-title, .sp-tplsm-hero h2.sp-tplsm-title {
  margin: 0;
  font-size: clamp(2.7rem, 6.8vw, 6rem);
  font-weight: 300; line-height: 1; letter-spacing: -.04em;   /* compensazione display */
  color: var(--sp-tplsm-text, #e9eef4);
  text-shadow: 0 2px 30px color-mix(in srgb, var(--sp-tplsm-deep, #06090f) 70%, transparent);
  max-width: 15ch;
}
.sp-js-motion .sp-tplsm-slide.is-active .sp-tplsm-title { animation: sp-tplsm-settle 1.4s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)) both; }
.sp-tplsm-hero p.sp-tplsm-lead {
  margin: 0; max-width: 56ch;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem); line-height: 1.6;
  color: var(--sp-tplsm-text-2, #b6bdc7);
}
.sp-tplsm-claims { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; }
.sp-tplsm-claim { font-size: 1.05rem; font-weight: 400; color: var(--sp-tertiary, #d4a35a); }
.sp-tplsm-claims.is-rotating .sp-tplsm-claim {
  grid-area: 1 / 1; opacity: 0; transform: translateY(8px);
  transition: opacity .6s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), transform .6s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1));
}
.sp-tplsm-claims.is-rotating .sp-tplsm-claim.is-active { opacity: 1; transform: none; }
.sp-tplsm-hero .sp-tpl-hero-actions { justify-content: center; }
.sp-tplsm-stage-dots { display: flex; gap: 8px; }
.sp-tplsm-stage-dots button {
  width: 28px; height: 4px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  transition: background var(--sp-tr, .25s), width var(--sp-tr, .25s);
}
.sp-tplsm-stage-dots button.is-active { width: 44px; background: var(--sp-primary, #0abab5); }
.sp-tplsm-stage-dots button:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
.sp-tplsm-scroll-cue { display: none; }   /* sembrava un difetto: via */

/* =====================================================================
 * §6 Settori (marquee di basicpro, dati di logosStrip)
 * ===================================================================== */
.sp-tplsm-logos { background: transparent; border-block: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06)); }
.sp-tplsm-logos .sp-anim-marquee-track { display: flex; width: max-content; gap: 0; }
/* passo unico fra le voci: gap dentro il gruppo = padding in coda al gruppo (loop senza salto) */
.sp-tplsm-logos-set { display: flex; flex: none; gap: 64px; padding-inline-end: 64px; }
.sp-tplsm-logos .sp-tplpro-logo { margin: 0; }
/* nastro guidato dal JS dedicato (25/9): niente animazione CSS, trasla di --sp-tplsm-mq-x; si prende col dito o col mouse
   (il verticale resta lo scroll della pagina); focus visibile per le frecce */
.sp-tplsm-logos .sp-anim-marquee.is-js { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.sp-tplsm-logos .sp-anim-marquee.is-js.is-dragging { cursor: grabbing; }
.sp-tplsm-logos .sp-anim-marquee.is-js .sp-anim-marquee-track { animation: none; transform: translate3d(var(--sp-tplsm-mq-x, 0px), 0, 0); will-change: transform; }
.sp-tplsm-logos .sp-anim-marquee.is-js:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 6px; border-radius: 8px; }
.sp-tplsm-logos .sp-tplpro-logos-label { color: var(--sp-tplsm-muted, #8493a6); letter-spacing: .04em; text-transform: none; font-size: .95rem; }
.sp-tplsm-logos .sp-tplpro-logo { color: var(--sp-tplsm-text-2, #b6bdc7); white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; }
/* il simbolo del logo al posto del quadratino grigio di basicpro */
.sp-tplsm-logos .sp-tplpro-logo-mark {
  width: 18px; height: 18px; border-radius: 0; opacity: .85;
  background: var(--sp-primary, #0abab5);
  -webkit-mask: var(--sp-tplsm-logo, none) center / contain no-repeat;
          mask: var(--sp-tplsm-logo, none) center / contain no-repeat;   /* la sfera del logo, statica */
}

/* =====================================================================
 * §7 Manifesto (introGrid.sp-tplsm-manifesto)
 * ===================================================================== */
/* (spazi 1/10, Davide: variante c) il testo di destra al CENTRO VERO del titolo: titolo e testo non hanno margini, quindi il centro
   della cella e' il centro del blocco (prima era end: il testo cadeva sul fondo del box del titolo e "galleggiava") */
.sp-tplsm-manifesto-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.sp-tplsm-manifesto-lead { color: var(--sp-tplsm-text-2, #b6bdc7); font-size: 1.1rem; line-height: 1.7; max-width: 60ch; }
/* (211, smsiter + dev0 1/10) intro centrata della pagina 2.0 (sp-tplsm-intro--center, da renderSpherePage): titolo e testo in una
   colonna, al centro; lo stacco come le altre teste titolo+testo (stack-head, cta-inner). Le due colonne restano il default */
.sp-tplsm-intro--center .sp-tplsm-manifesto-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--sp-tplsm-ritmo-s); }   /* titolo -> testo = S (216) */
/* (211, Davide "ok a" 1/10) righe bilanciate: il titolo delle teste di intro/manifesto e l'occhiello della testata non lasciano una
   parola sola sull'ultima riga ("Tre strade, / una squadra"; l'occhiello di /privacy a 390). Stesse righe, solo divise meglio: su una
   riga non cambia niente; dove il browser non lo conosce resta il wrap di sempre */
.sp-tplsm-manifesto-head .sp-tplsm-display, .sp-tpl-page-hero .sp-tpl-eyebrow { text-wrap: balance; }
.sp-tplsm-steps {
  list-style: none; margin: 0; padding: clamp(48px, 7vw, 88px) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px);
}
.sp-tplsm-step { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); }
.sp-tplsm-step-n {
  font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 300; line-height: 1;
  color: var(--sp-tertiary, #d4a35a); font-variant-numeric: tabular-nums;
}
.sp-tplsm-step h3 { margin: 0; font-size: 1.3rem; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-step p { margin: 0; color: var(--sp-tplsm-muted, #8493a6); line-height: 1.65; }
/* la riga in evidenza della voce (pacchetto 70, Davide 29/9): a capo sotto il testo, nel colore d'accento dei titoli (.sp-tplsm-accent) */
.sp-tplsm-step p.sp-tplsm-step-accent { color: var(--sp-secondary, #3ff0e8); font-weight: 400; }
/* (225) step oro con la parola d'oro al posto del numero (Chi siamo): stessa tinta e stesso peso del numero, misura da parola */
.sp-tplsm-step-n.sp-tplsm-step-mark { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.01em; font-variant-numeric: normal; }
/* (225) testa di sezione (non display): il titolo di un blocco operativo, es. "Scarica Sphere Desk" sotto gli step */
.sp-tplsm-sec-title { margin: 0 0 12px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 400; color: var(--sp-tplsm-text, #e9eef4); }
/* TARGHETTA (pacchetto 87, Davide 29/9; dal 92 senza il pallino a sinistra, padding simmetrico): la riga in evidenza in un
   rettangolo dagli angoli arrotondati, bordo teal sottile e PIENO (e' l'unico elemento a bordo pieno del manifesto: i nodi sul bordo
   di dev0 accendono solo lei), una luce interna appena accennata. Testo in accento. (92) In fondo alla colonna: le tre targhette alla stessa quota
   su desktop anche con testi di lunghezza diversa (le colonne della griglia sono alte uguali); sul telefono non cambia niente (solo sopra gli 880 px, dove la griglia ha 3 colonne). */
.sp-tplsm-step p.sp-tplsm-step-accent {
  margin-top: 6px; padding: 12px 16px; line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--sp-primary, #0abab5) 55%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--sp-primary, #0abab5) 5%, transparent);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--sp-primary, #0abab5) 10%, transparent);
}
@media (min-width: 881px) { .sp-tplsm-step p.sp-tplsm-step-accent { margin-top: auto; } }   /* 3 colonne (sotto gli 880 px una sola: invariato) */

/* =====================================================================
 * §8 Stack esploso (introGrid.sp-tplsm-stack + [data-sp-scroll-progress])
 * --sp-scroll-p arriva dal JS (0 entra dal basso, 1 esce dall'alto). Senza JS o col movimento
 * ridotto vale 0.5: gli strati stanno quasi aperti, leggibili.
 * ===================================================================== */
.sp-tplsm-stack {
  background: var(--sp-tplsm-surface, #0d1421);
  border-block: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06));
  --sp-tplsm-open: clamp(0, calc((var(--sp-scroll-p, .5) - .12) * 2.6), 1);
}
.sp-tplsm-stack-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sp-tplsm-stack-head { display: flex; flex-direction: column; gap: 22px; }
.sp-tplsm-stack-lead { color: var(--sp-tplsm-text-2, #b6bdc7); font-size: 1.08rem; line-height: 1.7; max-width: 54ch; }
.sp-tplsm-layers {
  list-style: none; margin: 0; padding: 0 0 0 30px; position: relative;
  display: flex; flex-direction: column;
  gap: calc(4px + var(--sp-tplsm-open, .84) * 14px);
  perspective: 1400px;
  --sp-tplsm-rise: 380px;
}
.sp-tplsm-layers::before {
  content: ""; position: absolute; left: 8px; top: 16px; bottom: 16px; width: 1px;
  background: linear-gradient(to top, var(--sp-tplsm-a-line, rgba(212, 163, 90, .4)), var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)));
}
/* la luce della linea e' una PALLINA con SCIA (Davide 24/9). Senza JS e col movimento ridotto: pallina ferma in cima
   alla linea, glow fermo. Col movimento: sale nel suo giro con una scia sotto; guidata dal JS la scia sta dal lato
   opposto al moto e si allunga con la velocita' (--sp-tplsm-trail, --sp-tplsm-trail-up 1 = sale, 0 = scende). */
.sp-tplsm-layers::after {
  content: ""; position: absolute; left: 4px; top: 11.5px; width: 9px; height: 9px; border-radius: 999px;
  background: var(--sp-secondary, #3ff0e8);
  box-shadow: 0 0 10px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32));
}
.sp-js-motion .sp-tplsm-layers::after {
  --sp-tplsm-t: var(--sp-tplsm-trail, 26px); --sp-tplsm-u: var(--sp-tplsm-trail-up, 1);
  top: auto; bottom: calc(30.5px - var(--sp-tplsm-t) * var(--sp-tplsm-u));   /* centro della pallina dove stava il centro della luce di prima */
  height: calc(9px + var(--sp-tplsm-t));
  background:
    radial-gradient(circle at 50% calc((1 - var(--sp-tplsm-u)) * (100% - 9px) + 4.5px), var(--sp-secondary, #3ff0e8) 0 3.2px, color-mix(in srgb, var(--sp-secondary, #3ff0e8) 40%, transparent) 4.5px, transparent 4.6px) 0 0 / 100% 100% no-repeat,
    linear-gradient(calc((1 - var(--sp-tplsm-u)) * 180deg), transparent 0, color-mix(in srgb, var(--sp-secondary, #3ff0e8) 55%, transparent) calc(100% - 4.5px), transparent calc(100% - 4.5px)) 50% 0 / 3px 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 5px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32)));
  animation: sp-tplsm-rise 3.8s var(--sp-ease, ease) infinite;
}
.sp-tplsm-layer {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 18px 22px;
  border-radius: var(--sp-tplsm-radius, 16px);
  border: 1px solid color-mix(in srgb, var(--sp-primary, #0abab5) calc(var(--sp-tplsm-open, .84) * 30%), var(--sp-tplsm-line, rgba(233, 238, 244, .11)));
  background: linear-gradient(180deg, var(--sp-tplsm-surface-2, #19202b), var(--sp-tplsm-surface, #0d1421));
  box-shadow: 0 calc(10px + var(--sp-tplsm-open, .84) * 16px) 40px rgba(0, 0, 0, .35);
  transform-origin: 50% 100%;
  transform:
    translateY(calc((1 - var(--sp-tplsm-open, .84)) * var(--sp-tplsm-layer, 0) * 22px + var(--sp-tplsm-kick-y, 0px)))
    rotateX(calc((1 - var(--sp-tplsm-open, .84)) * 58deg + var(--sp-tplsm-kick, 0deg)))
    rotateY(var(--sp-tplsm-kick-ry, 0deg));   /* kick: inerzia dal JS dedicato; ry: la rotella del flick su telefono */
  transition: border-color var(--sp-tr, .25s);
}
/* la luce della linea guidata dal JS dedicato (8-bis): posizione e opacita' seguono il puntatore dolcemente, senza giro */
.sp-js-motion .sp-tplsm-layers.is-driven::after {
  animation: none;
  transform: translateY(calc(-1 * var(--sp-tplsm-light-y, 0px)));
  opacity: var(--sp-tplsm-light-o, 1);
}
/* ferma sulla card il glow respira */
.sp-js-motion .sp-tplsm-layers.is-driven.is-still::after { animation: sp-tplsm-ball-breathe 2.4s ease-in-out infinite; }
@keyframes sp-tplsm-ball-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32))); }
  50%      { filter: drop-shadow(0 0 7px var(--sp-secondary, #3ff0e8)) drop-shadow(0 0 14px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32))); }
}
.sp-tplsm-layer.is-lit { border-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); }   /* segue la card piu' vicina, con la transizione del bordo */
.sp-tplsm-layer-idx {
  display: inline-grid; place-items: center; width: 48px; height: 32px; border-radius: 999px;
  font-size: .82rem; font-weight: 500; letter-spacing: .04em;
  color: var(--sp-tertiary, #d4a35a); background: var(--sp-tplsm-a-dim, rgba(212, 163, 90, .14)); border: 1px solid var(--sp-tplsm-a-line, rgba(212, 163, 90, .4));
}
.sp-tplsm-layer-body h3 { margin: 0 0 4px; font-size: 1.18rem; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-layer-body p { margin: 0; font-size: .95rem; color: var(--sp-tplsm-muted, #8493a6); line-height: 1.55; }

/* =====================================================================
 * §9 Bento con la card sfera
 * ===================================================================== */
.sp-tplsm-bento { padding-block: var(--sp-tplsm-section, clamp(56px, 6vw, 96px)); }
/* il sottotitolo di basic2 (.sp-tpl-intro-body) e' centrato: il titolo lo segue */
.sp-tplsm-bento .sp-tpl-container > .sp-tplsm-display,
.sp-tplsm-metrics .sp-tpl-container > .sp-tplsm-display { margin-inline: auto; text-align: center; }
.sp-tplsm-bento .sp-tpl-bento-card { border-radius: var(--sp-tplsm-radius, 16px); }
/* (§22-bis hover uniformi) tolta: bordo e ombra della card Sfera della home: ora la regola comune (le altre bento, non link, non avevano hover da CSS) */
.sp-tplsm-bento .sp-tpl-ico {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px;
  border-radius: 50%; border: 1px solid var(--sp-tplsm-p-line, rgba(10, 186, 181, .36));
  background: var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13));
  color: var(--sp-primary, #0abab5); font-size: 1.2rem;
}
.sp-tpl-bento-card.sp-tplsm-bento--sphere {
  grid-column: span 2; grid-row: span 2;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px;
  background:
    radial-gradient(ellipse 70% 80% at 78% 30%, var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13)), transparent 62%),
    var(--sp-tplsm-surface, #0d1421);
}
.sp-tplsm-sphere--bento { position: absolute; z-index: -1; right: -12%; top: -12%; width: 78%; aspect-ratio: 1; }
.sp-tplsm-bento--sphere h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.sp-tplsm-bento--sphere p { max-width: 44ch; }

/* =====================================================================
 * §10 Metriche (niente gradienti: numero pieno e leggero)
 * ===================================================================== */
.sp-tpl-metrics.sp-tplsm-metrics {
  background: transparent; text-align: left;
  border-block: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06));
}
.sp-tplsm-metrics .sp-tpl-metrics-grid { gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-tplsm-metrics .sp-tpl-metric { min-width: 0; padding: 12px 24px; border-inline-start: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); }
.sp-tplsm-metrics .sp-tpl-metric:first-child { border-inline-start: 0; }
.sp-tplsm-metrics .sp-tpl-metric-value {
  /* Il contatore del bundle riscrive il testo da 0 al valore finale: senza riserva la cifra
     cresce, va a capo e fa saltare la pagina (CLS). Qui la cella ha larghezza e altezza del
     valore finale dall'inizio: cifre a larghezza fissa, mai a capo, riserva di 8 caratteri. */
  display: block; font-size: clamp(1.9rem, 2.6vw, 2.9rem); font-weight: 300; letter-spacing: -.03em;
  white-space: nowrap; min-width: 8ch;
  color: var(--sp-tplsm-text, #e9eef4); font-variant-numeric: tabular-nums;
}
.sp-tplsm-metrics .sp-tpl-metric-label { color: var(--sp-tplsm-muted, #8493a6); }

/* =====================================================================
 * §11 Case study
 * ===================================================================== */
.sp-tplsm-case-title { margin: 0 0 clamp(24px, 3vw, 40px); font-size: 1rem; font-weight: 400; letter-spacing: .02em; color: var(--sp-primary, #0abab5); }
.sp-tplsm-case-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.sp-tplsm-quote {
  margin: 0; position: relative; padding-top: 56px;
  font-size: clamp(1.45rem, 2.6vw, 2.2rem); font-weight: 400; line-height: 1.38; letter-spacing: -.005em;
  color: var(--sp-tplsm-text, #e9eef4);
}
.sp-tplsm-quote::before {
  content: "\201C"; position: absolute; top: -10px; left: -4px;
  font-size: 6rem; line-height: 1; font-weight: 300; color: var(--sp-tertiary, #d4a35a);
}
.sp-tplsm-case-points { margin: 0; display: flex; flex-direction: column; gap: 22px; padding-inline-start: 28px; border-inline-start: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); }
.sp-tplsm-case-points dt { font-size: 2.2rem; font-weight: 300; letter-spacing: -.03em; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-case-points dd { margin: 4px 0 0; color: var(--sp-tplsm-muted, #8493a6); }
/* NUMERI DAL MONDO REALE (pacchetto 72; dall'82 la sezione e' .sp-tplsm-numbers): un fatto alla volta. Tutti i fatti nella stessa cella della griglia:
   l'altezza e' quella del piu' alto, quindi girando non si muove niente sotto. Il numero grande come le metriche, il fatto come
   la citazione di prima; le virgolette dorate SOLO sulle frasi vere dei clienti (.is-quote). Senza JS: il primo fatto. */
.sp-tplsm-facts-stage { display: grid; }
.sp-tplsm-fact { margin: 0; max-width: 62rem; }
/* (pacchetto 82) sovrapposti e nascosti solo nella scena della rotazione: nei box affiancati si vedono tutti */
.sp-tplsm-facts-stage > .sp-tplsm-fact { grid-area: 1 / 1; transition: opacity .9s var(--sp-ease, ease), visibility 0s linear .9s; }
.sp-tplsm-facts-stage > .sp-tplsm-fact:not(.is-active) { opacity: 0; visibility: hidden; }
.sp-tplsm-facts-stage > .sp-tplsm-fact.is-active { transition-delay: 0s; }
.sp-tplsm-fact-num { margin: 0 0 clamp(14px, 2vw, 22px); display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .6em; }
.sp-tplsm-fact-value { font-size: clamp(3rem, 7vw, 5.4rem); font-weight: 300; line-height: 1; letter-spacing: -.035em; color: var(--sp-tplsm-text, #e9eef4); font-variant-numeric: tabular-nums; }
.sp-tplsm-fact-label { font-size: 1.05rem; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-fact-text { margin: 0; position: relative; }
.sp-tplsm-fact-text p { margin: 0; font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.4; letter-spacing: -.005em; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-fact-text.is-quote { padding-top: 56px; }
.sp-tplsm-fact-text.is-quote::before {
  content: "\201C"; position: absolute; top: -10px; left: -4px;
  font-size: 6rem; line-height: 1; font-weight: 300; color: var(--sp-tertiary, #d4a35a);
}
.sp-tplsm-fact-sign { margin-top: clamp(16px, 2vw, 24px); display: flex; flex-wrap: wrap; gap: .3em .7em; font-size: .95rem; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-fact-sector { color: var(--sp-primary, #0abab5); }
.sp-tplsm-fact-who + .sp-tplsm-fact-sector::before { content: "\00B7"; margin-inline-end: .7em; color: var(--sp-tplsm-muted, #8493a6); }
/* (pacchetto 81, Davide dal telefono) il separatore non finisce mai a inizio riga: sotto i 600 px (la soglia della riga dei fatti
   dell'hero) firma e settore su due righe per scelta, senza punto */
@media (max-width: 599px) {
  .sp-tplsm-fact-sign { flex-direction: column; gap: 4px; }
  .sp-tplsm-fact-who + .sp-tplsm-fact-sector::before { content: none; }
}
.sp-tplsm-facts-dots { display: flex; gap: 10px; margin-top: clamp(24px, 3vw, 36px); }
.sp-tplsm-facts-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 26%, transparent); transition: background-color .35s, transform .35s;
}
.sp-tplsm-facts-dots button.is-active { background: var(--sp-primary, #0abab5); transform: scale(1.25); }
.sp-tplsm-facts-dots button:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sp-tplsm-facts-stage > .sp-tplsm-fact, .sp-tplsm-facts-dots button { transition: none; }
}
/* BOX AFFIANCATI (pacchetto 82, Davide 29/9: con 2 o piu' voci attive). Desktop in riga: 2 colonne, 3 se sono esattamente 3 (sopra i
   1100 px); sotto i 700 px uno sotto l'altro. Stessa altezza per riga (la griglia stira i box), la firma in fondo al box. Il numero
   e il fatto un passo piu' piccoli che da soli. Niente rotazione e niente pallini (li stampa solo la modalita' --rotate). */
.sp-tplsm-numbers-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.2vw, 28px); }
@media (min-width: 700px) { .sp-tplsm-numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sp-tplsm-numbers-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-tplsm-numbers-grid > .sp-tplsm-fact {
  display: flex; flex-direction: column; max-width: none; padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); border-radius: var(--sp-tplsm-radius, 16px);
  background: linear-gradient(180deg, var(--sp-tplsm-surface-2, #19202b), var(--sp-tplsm-surface, #0d1421));
}
.sp-tplsm-numbers-grid .sp-tplsm-fact-value { font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
.sp-tplsm-numbers-grid .sp-tplsm-fact-text p { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.sp-tplsm-numbers-grid .sp-tplsm-fact-text.is-quote { padding-top: 44px; }
.sp-tplsm-numbers-grid .sp-tplsm-fact-text.is-quote::before { font-size: 4.6rem; }
.sp-tplsm-numbers-grid .sp-tplsm-fact-sign { margin-top: auto; padding-top: clamp(16px, 2vw, 24px); }

/* =====================================================================
 * §12 CTA con la sfera
 * ===================================================================== */
.sp-tpl-cta.sp-tplsm-cta { background: transparent; padding-block: 0 var(--sp-tplsm-section, clamp(72px, 10vw, 150px)); }
.sp-tplsm-cta-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; justify-content: center; text-align: center;
  padding: clamp(64px, 9vw, 130px) clamp(20px, 4vw, 48px);
  border-radius: var(--sp-tplsm-radius-xl, 24px);
  border: 1px solid var(--sp-tplsm-p-line, rgba(10, 186, 181, .36));
  background: radial-gradient(ellipse 60% 70% at 50% 0%, var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13)), transparent 62%), var(--sp-tplsm-surface, #0d1421);
}
.sp-tplsm-sphere--cta { position: absolute; z-index: -2; left: 50%; top: 50%; width: min(820px, 130%); aspect-ratio: 1; translate: -50% -50%; opacity: .6; }
.sp-tplsm-cta-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 50% 55% at 50% 50%, transparent 25%, var(--sp-tplsm-surface, #0d1421) 92%);
}
.sp-tplsm-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sp-tplsm-cta-inner .sp-tplsm-display { margin: 0 auto; }
.sp-tplsm-cta-inner p { margin: 0; color: var(--sp-tplsm-text-2, #b6bdc7); max-width: 48ch; font-size: 1.08rem; }

/* =====================================================================
 * §13 Soluzioni e feature (introGrid.sp-tplsm-solutions) — impianto del mockup di giugno
 * ===================================================================== */
.sp-tplsm-solutions-lead { color: var(--sp-tplsm-text-2, #b6bdc7); max-width: 60ch; margin-top: 18px; }
.sp-tplsm-solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* esattamente 4 passi (es. Chi siamo): 4 colonne invece di 3+1; sotto gli 880px 1 colonna (§15) */
.sp-tplsm-steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
/* esattamente 4 voci (es. Applicazioni di Stampa 3D): 4 colonne invece di 3+1 orfana; sotto i 1024px le 2 colonne di §15 */
.sp-tplsm-solutions-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.sp-tplsm-solutions .sp-tplsm-display + .sp-tplsm-solutions-grid,
.sp-tplsm-solutions-lead + .sp-tplsm-solutions-grid { margin-top: clamp(40px, 5vw, 64px); }
.sp-tplsm-solution {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 30px 28px 34px;
  border-radius: var(--sp-tplsm-radius, 16px);
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  background: linear-gradient(180deg, var(--sp-tplsm-surface-2, #19202b), var(--sp-tplsm-surface, #0d1421));
  color: var(--sp-tplsm-text, #e9eef4);
  text-decoration: none;
  transition: transform .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), border-color var(--sp-tr, .25s), box-shadow .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1));
}
/* (§22-bis hover uniformi) tolta: sollevamento -5 px e ombra delle card V1: ora la regola comune, senza sollevamento */
a.sp-tplsm-solution:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
.sp-tplsm-solution-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sp-tplsm-solution-ico {
  position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); background: var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13));
  color: var(--sp-primary, #0abab5); font-size: 1.15rem;
}
.sp-tplsm-solution-n { font-size: .9rem; font-weight: 400; color: var(--sp-tplsm-muted, #8493a6); font-variant-numeric: tabular-nums; }
.sp-tplsm-solution h3 { margin: 0; font-size: 1.22rem; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-solution p { margin: 0; color: var(--sp-tplsm-muted, #8493a6); font-size: .96rem; line-height: 1.6; }
.sp-tplsm-solution-go {
  position: absolute; right: 26px; bottom: 26px; color: var(--sp-primary, #0abab5);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--sp-tr, .25s), transform .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1));
}
a.sp-tplsm-solution:hover .sp-tplsm-solution-go,
a.sp-tplsm-solution:focus-visible .sp-tplsm-solution-go { opacity: 1; transform: none; }
.sp-tplsm-features .sp-tplsm-solution-n { display: none; }

/* =====================================================================
 * §13c CARD (Davide 24/9, dai mockup votati). Si scelgono con una classe del launcher, sulla sezione:
 *   sp-tplsm-cards-nodes = V2 LISTA A NODI (bento della home, Soluzioni): niente box, una linea verticale per voce con
 *     l'icona come nodo tondo; hover, focus o tap accendono il nodo e la luce della linea ci corre (JS dedicato, come
 *     la luce della pila). Desktop 2 colonne, mobile una lista. La card grande della sfera del bento resta com'e'.
 *   sp-tplsm-cards-ghost = V1 ICONA FANTASMA (blocchi piccoli): l'icona grande, tenue, a destra e tagliata dal bordo;
 *     titolo e testo a tutta larghezza, fermi prima dell'icona.
 * ===================================================================== */
.sp-tplsm-cards-nodes .sp-tpl-bento-grid,
.sp-tplsm-cards-nodes .sp-tplsm-solutions-grid,
.sp-tplsm-cards-nodes .sp-tplsm-solutions-grid:has(> :nth-child(4):last-child) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; }
.sp-tplsm-cards-nodes .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere),
.sp-tplsm-cards-nodes .sp-tplsm-solution {
  position: relative; display: block; min-height: 0; padding: 18px 0 26px 64px;
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
}
.sp-tplsm-cards-nodes .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere):hover,
.sp-tplsm-cards-nodes a.sp-tplsm-solution:hover { background: none; border: 0; box-shadow: none; transform: none; }
/* la linea: un tratto per voce, cosi' regge anche su 2 colonne */
.sp-tplsm-cards-nodes .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere)::before,
.sp-tplsm-cards-nodes .sp-tplsm-solution::before {
  content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--sp-primary, #0abab5) 30%, transparent), color-mix(in srgb, var(--sp-primary, #0abab5) 12%, transparent));
}
.sp-tplsm-cards-nodes .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere) .sp-tpl-ico,
.sp-tplsm-cards-nodes .sp-tplsm-solution .sp-tplsm-solution-ico {
  position: absolute; left: 0; top: 16px; z-index: 1; width: 44px; height: 44px; margin: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--sp-background, #070b12); border: 1.5px solid color-mix(in srgb, var(--sp-primary, #0abab5) 45%, transparent);
  color: var(--sp-primary, #0abab5); font-size: 1.05rem;
  box-shadow: 0 0 0 5px var(--sp-background, #070b12);
  transition: box-shadow .35s, border-color .35s, color .35s, background .35s;
}
.sp-tplsm-cards-nodes .is-lit .sp-tpl-ico,
.sp-tplsm-cards-nodes .is-lit .sp-tplsm-solution-ico {
  background: var(--sp-primary, #0abab5); color: var(--sp-tplsm-on-primary, #071215); border-color: var(--sp-primary, #0abab5);
  box-shadow: 0 0 0 5px var(--sp-background, #070b12), 0 0 26px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .5));
}
.sp-tplsm-cards-nodes .sp-tplsm-solution .sp-tplsm-solution-top { display: contents; }
.sp-tplsm-cards-nodes .sp-tplsm-solution .sp-tplsm-solution-n { display: none; }
.sp-tplsm-cards-nodes .sp-tplsm-solution .sp-tplsm-solution-go { position: static; display: inline-block; margin-top: 8px; opacity: .6; transform: none; }
.sp-tplsm-cards-nodes a.sp-tplsm-solution:hover .sp-tplsm-solution-go,
.sp-tplsm-cards-nodes a.sp-tplsm-solution:focus-visible .sp-tplsm-solution-go { opacity: 1; }
.sp-tplsm-cards-nodes .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere) h3,
.sp-tplsm-cards-nodes .sp-tplsm-solution h3 { margin: 8px 0 6px; font-size: 1.2rem; transition: color .35s; }
.sp-tplsm-cards-nodes .is-lit h3 { color: color-mix(in srgb, var(--sp-primary, #0abab5) 45%, var(--sp-tplsm-text, #e9eef4)); }
.sp-tplsm-cards-nodes .sp-tplsm-solution:focus-visible,
.sp-tplsm-cards-nodes a.sp-tpl-bento-card:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 4px; border-radius: 8px; }
/* la luce che corre sulla linea fino al nodo acceso: la posiziona il JS dedicato (stesso inseguimento della pila) */
/* link fra le colonne (20): un segmento della mesh, disegnato al volo mentre la luce passa; sfuma dopo l'arrivo */
.sp-tplsm-node-mesh-link { fill: none; stroke: color-mix(in srgb, var(--sp-primary, #0abab5) 55%, transparent); stroke-width: 1.2; stroke-linejoin: miter; stroke-linecap: round; transition: opacity .6s var(--sp-ease, ease); }
.sp-tplsm-node-mesh-link.is-gone { opacity: 0; }
.sp-tplsm-node-light {
  position: absolute; left: 0; top: 0; z-index: 2; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  background: var(--sp-secondary, #3ff0e8); box-shadow: 0 0 18px 4px var(--sp-tplsm-p-glow, rgba(63, 240, 232, .6));
  transform: translate(var(--sp-tplsm-nl-x, 17px), var(--sp-tplsm-nl-y, 0px)); opacity: var(--sp-tplsm-nl-o, 0);
}
@media (min-width: 900px) {
  .sp-tplsm-cards-nodes .sp-tpl-bento-grid,
  .sp-tplsm-cards-nodes .sp-tplsm-solutions-grid,
  .sp-tplsm-cards-nodes .sp-tplsm-solutions-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .sp-tplsm-cards-nodes .sp-tpl-bento-card.sp-tplsm-bento--sphere { grid-column: 1 / -1; grid-row: auto; margin-bottom: 28px; }
}
@media (max-width: 899px) {
  .sp-tplsm-cards-nodes .sp-tpl-bento-card.sp-tplsm-bento--sphere { margin-bottom: 24px; }
}

/* V2 giro B (Davide/Raffaele 24/9). SPEZZATA con nodi al posto della linea retta: un SVG che il JS costruisce dalle
   posizioni reali delle card (per colonna, spigoli netti, nodi secondari, deriva lenta); la luce la percorre.
   La linea retta di prima resta solo senza JS. */
.sp-tplsm-node-mesh { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
/* come gli spigoli della sfera dell'hero: tratto 1.2 px, primary al ~55%; nodi pieni con il loro alone, diagonali corte */
.sp-tplsm-node-mesh-line { fill: none; stroke: color-mix(in srgb, var(--sp-primary, #0abab5) 55%, transparent); stroke-width: 1.2; stroke-linejoin: miter; stroke-linecap: round; }
.sp-tplsm-node-mesh-spur { stroke: color-mix(in srgb, var(--sp-primary, #0abab5) 30%, transparent); stroke-width: 1; stroke-linecap: round; }
.sp-tplsm-node-mesh-dot { fill: var(--sp-primary, #0abab5); }
.sp-tplsm-node-mesh-dot.is-spur { fill: color-mix(in srgb, var(--sp-primary, #0abab5) 60%, transparent); }
.sp-tplsm-node-mesh-halo { fill: color-mix(in srgb, var(--sp-secondary, #3ff0e8) 14%, transparent); }
.sp-tplsm-cards-nodes .has-mesh > .sp-tplsm-solution::before,
.sp-tplsm-cards-nodes .has-mesh > .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere)::before { content: none; }
/* (dev0 30/9, Davide: "la spezzata passa SOTTO il cerchio") con la spezzata (.has-mesh) il fossato di 5 px del colore di fondo attorno
   all'icona (box-shadow 0 0 0 5px, serviva a staccare la linea retta del CSS) copre gli ultimi 5 px di ogni tratto: dove l'ultimo
   vertice e' vicino al cerchio la linea sembra fermarsi sul vertice e passare sotto. Qui niente fossato: ogni tratto arriva al bordo
   del cerchio (sfondo pieno, sopra la spezzata). Acceso: resta solo il bagliore */
.sp-tplsm-cards-nodes .has-mesh > .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere) .sp-tpl-ico,
.sp-tplsm-cards-nodes .has-mesh > .sp-tplsm-solution .sp-tplsm-solution-ico { box-shadow: none; }
.sp-tplsm-cards-nodes .has-mesh > .sp-tpl-bento-card.is-lit:not(.sp-tplsm-bento--sphere) .sp-tpl-ico,
.sp-tplsm-cards-nodes .has-mesh > .sp-tplsm-solution.is-lit .sp-tplsm-solution-ico { box-shadow: 0 0 26px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .5)); }
/* HOVER del testo (Davide 24/9): il titolo scorre di 5 px e va al bianco, la descrizione si schiarisce, la freccia si
   DISEGNA (tratto che si srotola). */
.sp-tplsm-cards-nodes .sp-tplsm-solution h3,
.sp-tplsm-cards-nodes .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere) h3 { transition: transform .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), color .35s; }
.sp-tplsm-cards-nodes .sp-tplsm-solution p,
.sp-tplsm-cards-nodes .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere) p { transition: color .35s; }
.sp-tplsm-cards-nodes .is-lit h3 { color: #fff; transform: translateX(5px); }
.sp-tplsm-cards-nodes .is-lit p { color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tplsm-cards-nodes .sp-tplsm-solution .sp-tplsm-solution-go { opacity: .55; transition: opacity .35s, transform .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), filter .35s; }
.sp-tplsm-cards-nodes .sp-tplsm-solution .sp-tplsm-solution-go path { stroke-dasharray: 34; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)); }
.sp-tplsm-cards-nodes .sp-tplsm-solution:not(.is-lit) .sp-tplsm-solution-go path { stroke-dashoffset: 22; }   /* a riposo si vede solo l'inizio del tratto */
.sp-tplsm-cards-nodes .sp-tplsm-solution.is-lit .sp-tplsm-solution-go { opacity: 1; transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .sp-tplsm-cards-nodes .is-lit h3, .sp-tplsm-cards-nodes .sp-tplsm-solution.is-lit .sp-tplsm-solution-go { transform: none; }
  .sp-tplsm-cards-nodes .sp-tplsm-solution .sp-tplsm-solution-go path { transition: none; }
}
/* HOVER DELLE VOCI DEL BENTO DELLA HOME (pacchetto 70, Davide con Raffaele 29/9), rifinito rispetto a /servizi. Solo nel bento
   (.sp-tplsm-bento): la lista di /servizi (.sp-tplsm-solutions) resta com'e'. Lo stato e' .is-lit (lo mette il JS dei nodi con
   hover, focus o tap), cosi' mouse e tap si vedono uguali.
   - niente rettangolo: la regola comune §22-bis (bordo e glow delle card link) qui non vale, la voce e' una lista senza box;
   - il nodo dell'icona si accende solo sul contorno (bordo primary e glow fuori), senza riempimento: l'icona resta leggibile;
   - il titolo va al teal (lo stesso inchiostro della regola comune) e rientra di 5 px con la transizione morbida: la regola
     comune del titolo cambia solo il colore, e qui si tiene anche il transform (lo scatto veniva da li');
   - la freccia sotto il testo (la stampa il template per le voci link) compare e scorre in avanti, col tratto che si disegna;
   - la luce che corre sulla spezzata, ferma sulla voce accesa (.is-home dal JS), diventa oro.
   Specificita' da (0,6,1) in su con :root: sopra la §22-bis senza regole forzate. Movimento ridotto: nessun transform. */
:root .sp-tplsm-bento.sp-tplsm-cards-nodes a.sp-tpl-bento-card:not(.sp-tplsm-bento--sphere):is(:hover, :focus-visible) { border-color: transparent; box-shadow: none; }
:root .sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card:not(.sp-tplsm-bento--sphere) h3 { transition: transform .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), color .35s; }
:root .sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card.is-lit:not(.sp-tplsm-bento--sphere) h3 { color: var(--sp-tplsm-hover-ink); transform: translateX(5px); }
:root .sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card.is-lit:not(.sp-tplsm-bento--sphere) .sp-tpl-ico {
  background: var(--sp-background, #070b12); color: var(--sp-primary, #0abab5); border-color: var(--sp-primary, #0abab5);
  box-shadow: 0 0 0 5px var(--sp-background, #070b12), 0 0 0 6px color-mix(in srgb, var(--sp-primary, #0abab5) 35%, transparent), 0 0 22px 4px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32));
}
.sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card .sp-tplsm-solution-go {
  position: static; display: block; margin-top: 10px; color: var(--sp-primary, #0abab5); opacity: 0; transform: translateX(-6px);
  transition: opacity .35s, transform .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1));
}
.sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card .sp-tplsm-solution-go path { stroke-dasharray: 34; stroke-dashoffset: 22; transition: stroke-dashoffset .6s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)); }
.sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card.is-lit .sp-tplsm-solution-go { opacity: 1; transform: translateX(5px); }
.sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card.is-lit .sp-tplsm-solution-go path { stroke-dashoffset: 0; }
/* arrivata, la luce non si posa sull'icona (la coprirebbe): lascia il centro e diventa un anello d'oro stretto sul contorno del
   nodo (10 px di luce + 17 di distacco = il raggio del nodo, 22 px), col suo alone */
.sp-tplsm-bento .sp-tplsm-node-light {
  outline: 1.5px solid transparent; outline-offset: 0;
  transition: background-color .35s, box-shadow .35s, outline-color .35s, outline-offset .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), filter .35s;
}
.sp-tplsm-bento .sp-tplsm-node-light.is-home {
  background: transparent; box-shadow: none; outline-color: var(--sp-tertiary, #d4a35a); outline-offset: 17px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sp-tertiary, #d4a35a) 70%, transparent));
}
/* l'ancora della sezione (classe sp-tplsm-id--<slug> del launcher, pacchetto 70): il salto si ferma sotto l'header vero, col
   respiro dello Scorri (--sp-tplsm-head lo misura il JS dell'apertura; senza JS 110 px) */
.sp-tplsm-bento[id] { scroll-margin-top: var(--sp-tplsm-head, 110px); }
/* (225) il download (#download) e' un'ancora: il link "qui sotto" degli step ci porta, e la sua testa resta sotto l'header, come il bento */
.sp-tplsm-download[id] { scroll-margin-top: var(--sp-tplsm-head, 110px); }
/* (244) anche un manifesto con l'ancora: lo "Scorri" dello sferone di /sfera porta all'intro (#intro), che e' un manifesto */
.sp-tplsm-manifesto[id] { scroll-margin-top: var(--sp-tplsm-head, 110px); }
@media (prefers-reduced-motion: reduce) {
  :root .sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card.is-lit:not(.sp-tplsm-bento--sphere) h3,
  .sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card .sp-tplsm-solution-go,
  .sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card.is-lit .sp-tplsm-solution-go { transform: none; }
  .sp-tplsm-bento.sp-tplsm-cards-nodes .sp-tpl-bento-card .sp-tplsm-solution-go path { transition: none; }
  .sp-tplsm-bento .sp-tplsm-node-light { transition: none; }
}
/* Sphere Desk: il download del sistema riconosciuto prende un GLOW vero che respira piano (Raffaele); gli altri no;
   sistema ignoto = nessuna card is-primary = nessun glow. Movimento ridotto: glow fermo. */
.sp-tplsm-dl-item.is-primary {
  border-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp-primary, #0abab5) 22%, transparent), 0 0 26px color-mix(in srgb, var(--sp-secondary, #3ff0e8) 16%, transparent);
  animation: sp-tplsm-os-glow 3.6s ease-in-out infinite;
}
@keyframes sp-tplsm-os-glow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp-primary, #0abab5) 22%, transparent), 0 0 20px color-mix(in srgb, var(--sp-secondary, #3ff0e8) 12%, transparent); }
  50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp-primary, #0abab5) 34%, transparent), 0 0 38px color-mix(in srgb, var(--sp-secondary, #3ff0e8) 24%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .sp-tplsm-dl-item.is-primary { animation: none; } }

.sp-tplsm-cards-ghost .sp-tplsm-solution { overflow: hidden; isolation: isolate; }
.sp-tplsm-cards-ghost .sp-tplsm-solution .sp-tplsm-solution-top { min-height: 0; margin-bottom: 0; }
.sp-tplsm-cards-ghost .sp-tplsm-solution .sp-tplsm-solution-ico {
  position: absolute; z-index: -1; right: -6%; top: 50%; transform: translateY(-50%);
  width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: clamp(6.5rem, 10vw, 9rem); line-height: 1; color: var(--sp-primary, #0abab5); opacity: .09;
  transition: opacity .4s, transform .6s var(--sp-ease, ease); pointer-events: none;
}
.sp-tplsm-cards-ghost .sp-tplsm-solution:hover .sp-tplsm-solution-ico { opacity: .16; transform: translateY(-50%) rotate(-6deg) scale(1.04); }
.sp-tplsm-cards-ghost .sp-tplsm-solution h3 { font-size: clamp(1.22rem, 1.7vw, 1.45rem); letter-spacing: -.01em; max-width: 18ch; padding-right: 12%; }
.sp-tplsm-cards-ghost .sp-tplsm-solution p { max-width: 36ch; padding-right: 18%; }
.sp-tplsm-cards-ghost .sp-tplsm-solution .sp-tplsm-solution-n { position: absolute; top: 20px; right: 22px; }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-cards-ghost .sp-tplsm-solution:hover .sp-tplsm-solution-ico { transform: translateY(-50%); } }
/* (V5 di /sfera, Davide 5/10: "piu' simili alla card Sfera della home") LE CARD A VETRO CON LA SFERA VERA, con la grammatica della card Sfera
   della home: la sfera GRANDE in alto a destra, piena, che esce dal bordo, sul bagliore teal; il testo in basso a sinistra; la card piu' alta.
   La voce con sp-tplsm-sfera-mini (template di smsiter) ha la sfera (canvas data-sp-sphere, contesto card) al posto dell'icona fantasma */
.sp-tplsm-cards-ghost .sp-tplsm-solution:has(.sp-tplsm-solution-sfera) {
  justify-content: flex-end; min-height: clamp(320px, 27vw, 380px); padding-block: 28px 30px;
  background: radial-gradient(ellipse 70% 80% at 78% 26%, var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13)), transparent 62%), linear-gradient(180deg, var(--sp-tplsm-surface-2, #19202b), var(--sp-tplsm-surface, #0d1421));
}
.sp-tplsm-cards-ghost .sp-tplsm-solution .sp-tplsm-solution-ico.sp-tplsm-solution-sfera { top: -18%; right: -18%; width: 100%; aspect-ratio: 1; height: auto; font-size: 0; opacity: 1; transform: none; }
.sp-tplsm-cards-ghost .sp-tplsm-solution:hover .sp-tplsm-solution-ico.sp-tplsm-solution-sfera { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .sp-tplsm-cards-ghost .sp-tplsm-solution:has(.sp-tplsm-solution-sfera) { min-height: 0; padding-block: 30px 28px; }
  .sp-tplsm-cards-ghost .sp-tplsm-solution .sp-tplsm-solution-ico.sp-tplsm-solution-sfera { width: 96%; top: 50%; right: -30%; transform: translateY(-50%); }
  .sp-tplsm-cards-ghost .sp-tplsm-solution:hover .sp-tplsm-solution-ico.sp-tplsm-solution-sfera { transform: translateY(-50%); }
}   /* (V6, Davide 6/10, Fold chiuso) sul telefono il testo SOPRA la sfera, come la card della home: la sfera dietro, a destra e centrata in altezza; l'altezza la da' il testo, niente vuoto in alto */
/* (V6, Davide 6/10) IL TITOLO COME LE PAROLE D'ORO DEI PASSI ("Dall'idea al progetto vero", Chi siamo): light come i numeri, l'oro in gradiente
   con la luce morbida della parola accesa (.sp-tplsm-step-n.is-oro); niente filo sopra (Davide 6/10: "toglierei la riga sopra il testo"). Solo CSS: la luce
   e' --oro-lc (registrata; nome suo, i passi usano --oro-lx dal JS) e passa quando la card entra in vista (is-in) e a ogni hover o tocco. Senza
   @property: oro fermo. Movimento ridotto: oro acceso, niente passaggio */
@property --oro-lc { syntax: '<percentage>'; inherits: true; initial-value: -40%; }
.sp-tplsm-solution:has(.sp-tplsm-solution-sfera) h3 {
  position: relative; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 300; letter-spacing: -.01em; line-height: 1.15;
  color: transparent;
  background-image:
    radial-gradient(ellipse 44% 170% at var(--oro-lc, -40%) 45%, #fffaf0, #fffaf0 22%, color-mix(in srgb, #fff3d6 70%, transparent) 46%, color-mix(in srgb, #fff3d6 22%, transparent) 68%, transparent 86%),
    linear-gradient(100deg, var(--sp-tertiary, #d4a35a), color-mix(in srgb, var(--sp-tertiary, #d4a35a) 62%, #fff3d6) 55%, var(--sp-tertiary, #d4a35a));
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0 22px color-mix(in srgb, var(--sp-tertiary, #d4a35a) 18%, transparent);
  transition: --oro-lc 0s;
}
.sp-tplsm-solution:has(.sp-tplsm-solution-sfera):is(:hover, :focus-within, :active) h3 { --oro-lc: 140%; transition: --oro-lc .9s cubic-bezier(.45, .05, .35, 1); }
@keyframes sp-tplsm-oro-corsa { from { --oro-lc: -50%; } to { --oro-lc: 140%; } }
.sp-tplsm-solution.is-in:has(.sp-tplsm-solution-sfera) h3 { animation: sp-tplsm-oro-corsa .95s cubic-bezier(.45, .05, .35, 1) .35s 1 backwards; }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-solution:has(.sp-tplsm-solution-sfera) h3 { transition: none; animation: none; } }
/* (V6, Davide 6/10) il testo puo' stare sopra la sfera, come nella card della home: dietro le righe una sfumatura dal basso (sopra la sfera, sotto il
   testo: ::after viene dopo l'icona, stesso z-index) */
.sp-tplsm-cards-ghost .sp-tplsm-solution:has(.sp-tplsm-solution-sfera)::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 88%, transparent) 0%, color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 55%, transparent) 30%, transparent 58%); }
/* (V6) NIENTE CARD ORFANE: le tre card con la sfera in 3 colonne finche' ci stanno (da 860px, Fold aperto compreso); sotto, fino al telefono, due
   colonne e la terza a tutta larghezza come la card Sfera della home; sul telefono una colonna (come prima) */
@media (min-width: 860px) and (max-width: 1024px) { .sp-tplsm-solutions-grid:has(.sp-tplsm-solution-sfera) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 561px) and (max-width: calc(860px - 1px)) { .sp-tplsm-solutions-grid:has(.sp-tplsm-solution-sfera) > :nth-child(3):last-child { grid-column: 1 / -1; } }
.sp-tplsm-sphere--card { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }

/* =====================================================================
 * §13b Download (introGrid.sp-tplsm-download) e riga crediti (introGrid.sp-tplsm-credits) — Sphere Desk
 * ===================================================================== */
.sp-tplsm-download .sp-tplsm-display + .sp-tplsm-dl-grid,
.sp-tplsm-download .sp-tplsm-solutions-lead + .sp-tplsm-dl-grid { margin-top: clamp(32px, 4vw, 52px); }
/* griglia a 12 colonne senza orfani (Davide 24/9): 3 + 2 (le ultime due piu' larghe), anche col download del sistema
   riconosciuto, che va per primo con lo stesso stile delle altre. 5 in fila non ci stanno: il contenitore e' 1180 px al
   massimo e i testi andrebbero a capo. Sotto i 900px a due a due (l'ultima dispari a tutta riga), poi una */
.sp-tplsm-dl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.sp-tplsm-dl-grid > .sp-tplsm-dl-item { grid-column: 1 / -1; }
@media (min-width: 561px) {
  .sp-tplsm-dl-grid > .sp-tplsm-dl-item { grid-column: span 6; }
  .sp-tplsm-dl-grid > .sp-tplsm-dl-item:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (min-width: 901px) {
  .sp-tplsm-dl-grid > .sp-tplsm-dl-item,
  .sp-tplsm-dl-grid > .sp-tplsm-dl-item:nth-child(odd):last-child { grid-column: span 4; }
  .sp-tplsm-dl-grid > .sp-tplsm-dl-item:nth-child(3n + 1):nth-last-child(2),
  .sp-tplsm-dl-grid > .sp-tplsm-dl-item:nth-child(3n + 2):last-child { grid-column: span 6; }
  .sp-tplsm-dl-grid > .sp-tplsm-dl-item:nth-child(3n + 1):last-child { grid-column: 1 / -1; }
}
.sp-tplsm-dl-item, .sp-tplsm-dl-note, .sp-tpl-contact-info > a.sp-tpl-info-card {   /* card azione: download e contatti sono un solo componente (Davide 25/9) */
  display: flex; align-items: center; gap: 16px; min-width: 0;
  padding: 20px 22px; border-radius: var(--sp-tpl-r-md, 14px);
  background: var(--sp-tplsm-surface, #0d1421); border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  color: var(--sp-tplsm-text, #e9eef4); text-decoration: none;
  transition: border-color var(--sp-tr, .25s), background var(--sp-tr, .25s), transform var(--sp-tr, .25s);
}
/* (§22-bis hover uniformi) tolta: sollevamento -2 px dei download: ora la regola comune */
.sp-tplsm-dl-item:focus-visible, .sp-tplsm-dl-note:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
.sp-tplsm-dl-ico {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--sp-primary, #0abab5) 12%, transparent); color: var(--sp-primary, #0abab5); font-size: 1.3rem;
}
.sp-tplsm-dl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sp-tplsm-dl-name { font-weight: 400; font-size: 1.02rem; }
.sp-tplsm-dl-desc { color: var(--sp-tplsm-muted, #8493a6); font-size: .88rem; line-height: 1.4; }
.sp-tplsm-dl-go { flex: none; color: var(--sp-tplsm-muted, #8493a6); transition: color var(--sp-tr, .25s); }
.sp-tplsm-dl-item:hover .sp-tplsm-dl-go { color: var(--sp-primary, #0abab5); }
/* il download del sistema riconosciuto (JS dedicato): va per primo, stessi colori delle altre; si accendono un poco solo
   titolo e bordo, a meta' strada tra riposo e hover. In hover, lo stato hover pieno come le altre (Davide 24/9) */
.sp-tplsm-dl-item { --sp-tplsm-dl-on: 0; }
.sp-tplsm-dl-item.is-primary { --sp-tplsm-dl-on: .5; border-color: color-mix(in srgb, var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)) 55%, var(--sp-tplsm-line, rgba(233, 238, 244, .11))); }
.sp-tplsm-dl-item:hover, .sp-tplsm-dl-item:focus-visible { --sp-tplsm-dl-on: 1; }
.sp-tplsm-dl-item .sp-tplsm-dl-name { color: color-mix(in srgb, var(--sp-primary, #0abab5) calc(var(--sp-tplsm-dl-on) * 55%), var(--sp-tplsm-text, #e9eef4)); transition: color var(--sp-tr, .25s); }
/* VARIANTE 1 "icona fantasma" per le card di download: l'icona esce dal flusso, grande, solo contorno e semitrasparente,
   a destra e tagliata dal bordo; titolo e testo prendono tutta la larghezza, la freccia resta sopra e leggibile */
.sp-tplsm-dl-item, .sp-tpl-contact-info > a.sp-tpl-info-card { position: relative; overflow: hidden; isolation: isolate; }
.sp-tplsm-dl-item .sp-tplsm-dl-ico, .sp-tpl-contact-info > a.sp-tpl-info-card .sp-tpl-info-card-icon {
  position: absolute; z-index: -1; right: -14px; top: 50%; transform: translateY(-50%);
  width: auto; height: auto; border-radius: 0; background: none; font-size: 5.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.3px color-mix(in srgb, var(--sp-primary, #0abab5) 32%, transparent);
  opacity: .9; pointer-events: none; transition: -webkit-text-stroke-color var(--sp-tr, .25s);
}
.sp-tplsm-dl-item:hover .sp-tplsm-dl-ico, .sp-tpl-contact-info > a.sp-tpl-info-card:is(:hover, :focus-visible) .sp-tpl-info-card-icon { -webkit-text-stroke-color: color-mix(in srgb, var(--sp-primary, #0abab5) 70%, transparent); }
.sp-tplsm-dl-item .sp-tplsm-dl-go {   /* pastiglia del colore della card: leggibile anche sopra i contorni dell'icona */
  position: relative; box-sizing: content-box; padding: 7px; border-radius: 999px;
  background: var(--sp-tplsm-surface, #0d1421); box-shadow: 0 0 0 4px var(--sp-tplsm-surface, #0d1421);
}
.sp-tplsm-dl-item.is-primary .sp-tplsm-dl-go { color: var(--sp-primary, #0abab5); }
/* il testo si ferma prima dell'icona fantasma (visibile ~76 px dal bordo destro, freccia compresa) */
.sp-tplsm-dl-item .sp-tplsm-dl-text, .sp-tpl-contact-info > a.sp-tpl-info-card .sp-tpl-info-card-body { margin-inline-end: 14px; }
/* footer 2.0: il blocco dati della colonna brand e' un link che apre il dialog "Dati societari". In hover niente teal:
   "Sphere" passa al bianco come nel logo dell'header, senza grassetto; il resto del testo resta com'e' */
.sp-tpl-footer-col--brand a.sp-tpl-footer-item { color: inherit; text-decoration: none; cursor: pointer; }
.sp-tpl-footer-col--brand a.sp-tpl-footer-item:hover,
.sp-tpl-footer-col--brand a.sp-tpl-footer-item:focus-visible { color: inherit; }
.sp-tpl-footer-col--brand a.sp-tpl-footer-item .sp-tplsm-footer-lead { font-weight: inherit; transition: color var(--sp-tr, .25s); }
.sp-tpl-footer-col--brand a.sp-tpl-footer-item:hover .sp-tplsm-footer-lead,
.sp-tpl-footer-col--brand a.sp-tpl-footer-item:focus-visible .sp-tplsm-footer-lead { color: var(--sp-tplsm-text, #e9eef4); }
.sp-tpl-footer-col--brand a.sp-tpl-footer-item:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 4px; border-radius: 4px; }
/* footer su telefono (Davide 24/9): ogni riga del blocco dati resta INTERA, con un font che scala (min 11 px); se sotto
   i ~340 px non ci sta nemmeno al minimo, ellissi su quella riga. Il dato completo e' nel dialog "Dati societari" */
@media (max-width: 600px) {
  .sp-tpl-footer-col--brand a.sp-tpl-footer-item > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(11px, 3.4vw, 14px); }
}
/* DIALOG 2.0 nello stile del sito (9-dati-bis): niente barra piena col gradiente, niente grip di ridimensionamento;
   etichette leggere (400, muted), valori a peso normale e non in corsivo; le azioni (es. "Copia dati") come i bottoni pieni */
.sphere-dialog { resize: none; border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); border-radius: var(--sp-tplsm-radius, 16px); background: var(--sp-tplsm-surface, #0d1421); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.sphere-dialog .sp-dialog-header {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 8px 8px 15px;   /* 15 + il bordo = le etichette del corpo */
  background: none; color: var(--sp-tplsm-text, #e9eef4); border-bottom: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06));
}
.sphere-dialog .sp-dialog-header .sphere-dialog-icon:empty { display: none; }
.sphere-dialog .sp-dialog-header .sphere-dialog-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem; font-weight: 400; }
.sphere-dialog .sp-dialog-header .sp-dialog-actions { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }   /* la X sempre a destra, qualunque sia l'ordine nel DOM */
.sphere-dialog .sp-dialog-header [data-dialog] {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  color: var(--sp-tplsm-muted, #8493a6); cursor: pointer; transition: color var(--sp-tr, .25s), background var(--sp-tr, .25s);
}
.sphere-dialog .sp-dialog-header [data-dialog]:hover { color: var(--sp-tplsm-text, #e9eef4); background: rgba(233, 238, 244, .06); }
.sphere-dialog .sp-dialog-header [data-dialog]:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 1px; color: var(--sp-tplsm-text, #e9eef4); }
.sphere-dialog .fen-view-label { color: var(--sp-tplsm-muted, #8493a6); font-weight: 400; font-size: .86rem; letter-spacing: .02em; }
.sphere-dialog .fen-view-val { color: var(--sp-tplsm-text, #e9eef4); font-style: normal; font-weight: 400; }
/* (235-3, dev0 2/10) Dati societari a pagina intera (/site/dati-societari): come nel dialog (regole .sphere-dialog .fen-view-*, sopra,
   invariate). Senza, valevano layout-2.0 (etichetta teal grassetto 1,1rem) e i valori in corsivo spento (.sp-text-muted .sp-text-italic) */
#sp-main-content .fen-view-label { color: var(--sp-tplsm-muted, #8493a6); font-weight: 400; font-size: .86rem; letter-spacing: .02em; }
#sp-main-content .fen-view-val { color: var(--sp-tplsm-text, #e9eef4); font-style: normal; font-weight: 400; }
/* le azioni del dialog (es. "Copia dati") sono bottoni pieni del sito PER RUOLO (§3.15, 23/10): :where(.sphere-dialog) .sp-button:where([data-control])
   sta nelle liste di .sp-tpl-btn e .sp-tpl-btn--primary (sopra), senza classi messe dal JS; vale per il <button> del core e per il div
   di prima. :where() tiene il peso a 0,1,0, come la classe che metteva il JS: vincono le stesse regole di prima (es. il 600 della
   publicDesBar del layout). .sp-button perche' la X del guscio (button.sp-dialog-close[data-control="close"]) resta com'e'.
   Qui solo cio' che il core aggiunge e che i bottoni del sito non hanno (niente scala del core, niente uscita dal dialog) */
.sphere-dialog .sp-button[data-control] { max-width: 100%; }
.sphere-dialog .sp-button[data-control].sp-scale:hover { transform: translateY(-1px); }   /* come gli altri bottoni: niente scala del core */
.sphere-dialog .sp-button[data-control]:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
/* il <button> perde l'aspetto di serie del browser; forma, misure e colori sono quelli del bottone pieno */
.sphere-dialog button.sp-button[data-control] { -webkit-appearance: none; appearance: none; margin: 0; cursor: pointer; text-align: center; }
/* la guida (voce senza data-os): nota in evidenza sotto la griglia */
.sp-tplsm-dl-notes { display: grid; gap: 14px; margin-top: 18px; }
.sp-tplsm-dl-note { border-style: dashed; background: transparent; }
/* nota-download subito dopo una pagina di testo (guida Mac): nella colonna di lettura, senza il vuoto della sezione */
.sp-tpl-content + .sp-tplsm-download:not(:has(.sp-tplsm-display)) { padding-top: 0; }   /* solo la nota: Sphere Desk (col titolo) non cambia */
.sp-tpl-content + .sp-tplsm-download:not(:has(.sp-tplsm-display)) .sp-tplsm-dl-notes { max-width: var(--sp-tplsm-read-w, 880px); margin-inline: auto; margin-top: 0; }
/* griglia solutions senza numeri (es. sicurezza) */
.sp-tplsm-nonum .sp-tplsm-solution-n { display: none; }
/* riga crediti */
.sp-tplsm-section.sp-tplsm-credits { padding-block: 28px 56px; }
.sp-tplsm-credits-line {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px;
  font-size: .9rem; color: var(--sp-tplsm-muted, #8493a6); text-align: center;
}
.sp-tplsm-credits-link { color: var(--sp-tplsm-text-2, #b6bdc7); text-decoration: underline; text-decoration-color: var(--sp-tplsm-line, rgba(233, 238, 244, .11)); text-underline-offset: 3px; }
.sp-tplsm-credits-link:hover { color: var(--sp-primary, #0abab5); text-decoration-color: currentColor; }
.sp-tplsm-credits-link:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
/* (dev0 30/9, Davide: "scrivici" "con qualcosa di fico graficamente, sempre in tema") targhetta CTA: con sp-tplsm-cta-plate sul
   launcher (nel dato) il link e' una targhetta come quella del breadcrumb (vetro, bordo d'oro sottile, pallino d'oro, stesso
   raggio) e l'etichetta prima e' un nodo teal. Il legame fra i due lo disegna il blocco del breadcrumb (crumbs-archi): con
   .has-arcs il nodo del CSS si spegne (lo disegna il canvas). La targhetta sta sopra il canvas (z-index 2): il legame entra
   sotto il vetro fino al pallino. Tutta la targhetta e' il link slave del dato. Fino a 480 px: nodo sopra, targhetta sotto */
.sp-tplsm-cta-plate .sp-tplsm-credits-line { align-items: center; column-gap: calc(clamp(18px, 2.6vw, 34px) + 16px); row-gap: 14px; }
.sp-tplsm-cta-plate .sp-tplsm-credits-line > span { display: inline-flex; align-items: center; gap: 8px; }
.sp-tplsm-cta-plate .sp-tplsm-credits-line > span::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--sp-primary, #0abab5) 60%, transparent); background: var(--sp-background, #070b12);
}
.sp-tplsm-cta-plate .has-arcs > span::before { background: transparent; border-color: transparent; }
.sp-tplsm-cta-plate .sp-tplsm-credits-link {
  --sp-label-slot: 12px;
  display: inline-flex; align-items: center; padding: 4px 11px 4px 5px; border-radius: 999px;
  font-weight: 500; color: var(--sp-tplsm-text, #e9eef4); text-decoration: none;
  background: var(--sp-tplsm-glass, rgba(7, 11, 18, .74));
  border: 1px solid var(--sp-tplsm-a-line, rgba(212, 163, 90, .4));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color var(--sp-tr, .25s), color var(--sp-tr, .25s);
}
.sp-tplsm-cta-plate .sp-tplsm-credits-link::before {
  content: ""; flex: none; width: var(--sp-label-slot); height: var(--sp-label-slot); margin-inline-end: 7px; border-radius: 50%;
  background: var(--sp-sphere-hub, var(--sp-tertiary, #d4a35a));
  transform: scale(var(--sp-label-node-k, .5)); transition: transform var(--sp-tr, .25s), box-shadow var(--sp-tr, .25s);
}
.sp-tplsm-cta-plate .sp-tplsm-credits-link:hover,
.sp-tplsm-cta-plate .sp-tplsm-credits-link:focus-visible { color: var(--sp-tplsm-text, #e9eef4); border-color: color-mix(in srgb, var(--sp-tertiary, #d4a35a) 75%, transparent); }
.sp-tplsm-cta-plate .sp-tplsm-credits-link:hover::before,
.sp-tplsm-cta-plate .sp-tplsm-credits-link:focus-visible::before { transform: scale(.66); box-shadow: 0 0 12px color-mix(in srgb, var(--sp-tertiary, #d4a35a) 70%, transparent); }
/* anello del focus da tastiera sottile e d'oro, come il bordo della targhetta (Davide 30/9: non quello teal spesso delle altre); anche
   l'alone del focus della piattaforma (:focus-visible, box-shadow var(--sp-focus), 3 px teal) qui non c'e' */
.sp-tplsm-cta-plate .sp-tplsm-credits-link:focus-visible { outline: 1px solid color-mix(in srgb, var(--sp-tertiary, #d4a35a) 85%, transparent); outline-offset: 3px; box-shadow: none; }
/* (dev0 30/9, Davide: "il segmento che arriva al pallino d'oro non si vede") la targhetta non sta piu' sopra il canvas
   (niente z-index): il legame la attraversa fino al pallino e la parte dentro la capsula la attenua il blocco (crumbs-archi,
   vetro disegnato al 60%, niente scintille sopra il testo). Il vetro col blur non lo lasciava passare in modo affidabile.
   Clic e focus restano del link: il canvas ha pointer-events: none */
/* (dev0 30/9, Davide) targhetta con icona = AZIONE: a destra una mini icona sottile (aereo) che riempie lo spazio della
   variante B, a filo del testo (0,8em). Il padding destro torna 11 e l'icona con il suo spazio porta il lato destro a circa
   quanto il sinistro (5 + 12 pallino + 7). A hover/focus si sposta di 2 px, insieme all'impulso della spezzata; movimento ridotto: ferma */
.sp-tplsm-cta-plate .sp-tplsm-credits-link::after {
  content: ""; flex: none; width: .8em; height: .8em; margin-inline-start: 8px; background: var(--sp-primary, #0abab5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 3 10.5l7 2.5 2.5 7L21 3z'/%3E%3Cpath d='M21 3 10 13'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 3 10.5l7 2.5 2.5 7L21 3z'/%3E%3Cpath d='M21 3 10 13'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--sp-tr, .25s) var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1));
}
.sp-tplsm-cta-plate .sp-tplsm-credits-link:hover::after,
.sp-tplsm-cta-plate .sp-tplsm-credits-link:focus-visible::after { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-cta-plate .sp-tplsm-credits-link::after { transition: none; transform: none; } }
@media (max-width: 480px) {
  .sp-tplsm-cta-plate .sp-tplsm-credits-line { flex-direction: column; }
}

/* (dev0 30/9, Davide) LINK SECONDARI A NODO: nei launcher con sp-tplsm-link-nodes (nel dato) i link dentro i testi (non le CTA, che
   hanno la targhetta) hanno un piccolo cerchio come quelli della lista a nodi (::before) e, sotto, invece di una riga ferma un NODO
   Tiffany che la disegna da sinistra a destra con una luce morbida (::after), arriva, resta un attimo, poi la linea sparisce da
   sinistra verso il nodo (la coda lo segue), il nodo sfuma e si riparte. Solo CSS,
   niente JS e niente testi. Il nodo e' uno strato ancorato al bordo destro del ::after, che si allunga (width): e' sempre in testa
   alla linea. Si animano solo proprieta' normali: su un <a> con href Chrome non propaga ai var() i valori animati di @property.
   Nella card della guida (dl-note, che ha gia' la sua icona tonda) solo la linea sotto il titolo. Movimento ridotto: linea ferma,
   niente nodo. La linea parte sfumata (trasparente -> 30% in min(16px, 30%) della sua lunghezza): lo strato della linea si accorcia
   mentre viene mangiata, quindi la sfumatura segue la coda (Davide 30/9: "quando mangia, sfuma"); il nodo e' un altro strato, non si tocca */
.sp-tplsm-link-nodes :is(p, li) a:not(.sp-tplsm-cta-plate *),
.sp-tplsm-link-nodes .sp-tplsm-dl-note .sp-tplsm-dl-name { position: relative; text-decoration: none; }
.sp-tplsm-link-nodes .sp-tplsm-dl-note .sp-tplsm-dl-name { width: fit-content; }   /* il titolo e' un blocco: la linea sta sotto il testo, non sotto tutta la card */
.sp-tplsm-link-nodes :is(p, li) a:not(.sp-tplsm-cta-plate *)::after,
.sp-tplsm-link-nodes .sp-tplsm-dl-note .sp-tplsm-dl-name::after {
  --sp-tplsm-ln-o: 0px;   /* dove parte la linea: 0, o dopo il cerchio nei link in linea */
  content: ""; position: absolute; left: calc(var(--sp-tplsm-ln-o) - 7px); bottom: -7px; width: calc(100% - var(--sp-tplsm-ln-o) + 14px); height: 14px; pointer-events: none;
  /* come la pallina della PILA (.sp-tplsm-layers::after) in piccolo, 0,7x: nucleo secondario, anello al 40% col bordo netto, alone
     p-glow (la' e' un drop-shadow di 5 px; qui uno strato, cosi' la linea non si illumina) e SCIA a cometa dietro il nodo mentre
     corre (trasparente -> secondario 55%, 2 x 18 px, finisce al centro del nodo); da fermo niente scia, come la pila */
  background:
    radial-gradient(circle, var(--sp-secondary, #3ff0e8) 0 2.3px, color-mix(in srgb, var(--sp-secondary, #3ff0e8) 40%, transparent) 3.2px, transparent 3.3px) 100% 50% / 14px 14px no-repeat,
    radial-gradient(circle, var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32)) 0, transparent 7px) 100% 50% / 14px 14px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--sp-secondary, #3ff0e8) 55%, transparent)) calc(100% - 7px) 50% / 0px 2px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--sp-primary, #0abab5) 30%, transparent) min(16px, 30%), color-mix(in srgb, var(--sp-primary, #0abab5) 60%, transparent) max(60%, calc(100% - 14px)), color-mix(in srgb, var(--sp-secondary, #3ff0e8) 80%, transparent)) 7px 50% / calc(100% - 14px) 1px no-repeat;
  animation: sp-tplsm-ln-draw 6s cubic-bezier(.45, .05, .35, 1) infinite;
}
.sp-tplsm-link-nodes :is(p, li) a:not(.sp-tplsm-cta-plate *)::after { --sp-tplsm-ln-o: 1.02em; }   /* sotto il TESTO: dopo il cerchio (.62em + .4em), il nodo non nasce sotto il cerchio */
/* (235-2, dev0 2/10, 223-bis) i link a nodo DENTRO il testo: la linea (::after, centrata sul fondo del box del link) stava sul fondo del box
   in linea, cioe' linea di base + discesa del font (.25em), dove arrivano le discendenti (.20em): la toccava. La si porta sul fondo della
   riga, come nelle righe d'uscita (223) e nelle note dei download: + meta' dell'interlinea, (1lh - 1,25em) / 2 = .5lh - .625em.
   Le righe d'uscita restano alla loro regola (223, specificita' piu' alta) */
.sp-tplsm-link-nodes :is(p, li) a:not(.sp-tplsm-cta-plate *)::after { bottom: calc(-7px - max(0px, .5lh - .625em)); }
.sp-tplsm-link-nodes :is(p, li) a:not(.sp-tplsm-cta-plate *) + a:not(.sp-tplsm-cta-plate *)::after { animation-delay: -2.4s; }   /* due link di fila: sfalsati */
@keyframes sp-tplsm-ln-draw {   /* nasce sulla linea, disegna (con la scia mentre corre), resta, poi la coda la mangia da sinistra fino al nodo (il bordo destro sta fermo: left e width insieme), il nodo sfuma */
  0% { left: calc(var(--sp-tplsm-ln-o) - 7px); width: 14px; opacity: 0; background-size: 14px 14px, 14px 14px, 0px 2px, calc(100% - 14px) 1px; }
  8% { left: calc(var(--sp-tplsm-ln-o) - 7px); width: 14px; opacity: 1; background-size: 14px 14px, 14px 14px, 0px 2px, calc(100% - 14px) 1px; }
  16% { background-size: 14px 14px, 14px 14px, 18px 2px, calc(100% - 14px) 1px; }
  44% { background-size: 14px 14px, 14px 14px, 18px 2px, calc(100% - 14px) 1px; }
  50% { left: calc(var(--sp-tplsm-ln-o) - 7px); width: calc(100% - var(--sp-tplsm-ln-o) + 14px); opacity: 1; background-size: 14px 14px, 14px 14px, 0px 2px, calc(100% - 14px) 1px; }
  62% { left: calc(var(--sp-tplsm-ln-o) - 7px); width: calc(100% - var(--sp-tplsm-ln-o) + 14px); opacity: 1; }
  92% { left: calc(100% - 7px); width: 14px; opacity: 1; }
  100% { left: calc(100% - 7px); width: 14px; opacity: 0; }
}
/* il cerchio: anello teal sottile, fondo della pagina, nodo al centro (le icone della lista a nodi, in piccolo) */
.sp-tplsm-link-nodes :is(p, li) a:not(.sp-tplsm-cta-plate *)::before {
  content: ""; display: inline-block; width: .62em; height: .62em; margin-inline-end: .4em; vertical-align: -.02em; border-radius: 50%; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--sp-primary, #0abab5) 55%, transparent);
  background: radial-gradient(circle, var(--sp-primary, #0abab5) 0 1.1px, transparent 1.6px), var(--sp-background, #070b12);
  transition: border-color var(--sp-tr, .25s), box-shadow var(--sp-tr, .25s);
}
.sp-tplsm-link-nodes :is(p, li) a:not(.sp-tplsm-cta-plate *):is(:hover, :focus-visible)::before { border-color: var(--sp-primary, #0abab5); box-shadow: 0 0 8px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32)); }
@media (prefers-reduced-motion: reduce) {
  .sp-tplsm-link-nodes :is(p, li) a:not(.sp-tplsm-cta-plate *)::after,
  .sp-tplsm-link-nodes .sp-tplsm-dl-note .sp-tplsm-dl-name::after {
    animation: none;
    background: linear-gradient(color-mix(in srgb, var(--sp-primary, #0abab5) 45%, transparent), color-mix(in srgb, var(--sp-primary, #0abab5) 45%, transparent)) 7px 50% / calc(100% - 14px) 1px no-repeat;
  }
}

/* =====================================================================
 * §13c Galleria foto (sphereMethod introGridMedia): "In laboratorio", "A bordo"
 * ===================================================================== */
.sp-tplsm-media .sp-tplsm-display + .sp-tplsm-media-grid,
.sp-tplsm-media .sp-tplsm-solutions-lead + .sp-tplsm-media-grid { margin-top: clamp(32px, 4vw, 52px); }
.sp-tplsm-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-tplsm-media-item { display: block; min-width: 0; color: inherit; text-decoration: none; }
.sp-tplsm-media-fig {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--sp-tpl-r-md, 14px); border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  background: var(--sp-tplsm-surface, #0d1421);
  aspect-ratio: 4 / 3;   /* spazio riservato: niente salto quando la foto arriva */
}
.sp-tplsm-media-fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--sp-tr-slow, .5s) var(--sp-ease, ease); }
.sp-tplsm-media-item:hover .sp-tplsm-media-fig img { transform: scale(1.04); }
.sp-tplsm-media-fig figcaption {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(to top, color-mix(in srgb, var(--sp-background, #070b12) 88%, transparent), transparent);
}
.sp-tplsm-media-name { font-weight: 400; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-media-desc { font-size: .88rem; color: var(--sp-tplsm-text-2, #b6bdc7); }
a.sp-tplsm-media-item:focus-visible .sp-tplsm-media-fig { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
@media (max-width: 720px) {
  .sp-tplsm-media-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
 * §14 Testata delle pagine interne con la sfera piccola
 * ===================================================================== */
.sp-tplsm-sphere--page {
  position: absolute; left: 50%; top: 50%;
  width: min(560px, 90vw); aspect-ratio: 1; translate: -50% -50%;
  opacity: .55;
}

/* =====================================================================
 * §14b Banner cookie (markup legacy: .sp-cookie-banner + bottoni .sp-button della 1.x)
 * ===================================================================== */
.sp-cookie-banner {
  background: var(--sp-tplsm-glass, rgba(7, 11, 18, .74));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  border-radius: var(--sp-tplsm-radius, 16px);
  color: var(--sp-tplsm-text-2, #b6bdc7);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.sp-cookie-banner__msg { font-size: .92rem; line-height: 1.6; }
.sp-cookie-banner__actions .sp-flex { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* i bottoni del banner usano il sistema unico (§2) */

/* =====================================================================
 * §14c Logo — DUE VARIANTI, UNA VARIABILE (template: logo() e footerMenu() stampano entrambi)
 *   --sp-tplsm-logo-mode: 0  →  A  esagono di snap (SVG di basic2, colori da basic-2.0)
 *   --sp-tplsm-logo-mode: 1  →  B  sfera di nodi del mockup v1 (PNG 128px, maschera teal)
 * Il simbolo spento resta nel markup con larghezza e margine zero: e' decorativo (aria-hidden).
 * ===================================================================== */
:root {
  --sp-tplsm-logo-mode: 1;   /* sondaggio 23/9: vince B, la sfera (viva col JS dedicato) */
  --sp-tplsm-logo: url("data:image/png;base64,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");
}
.sp-tplsm-logo { display: inline-flex; align-items: center; gap: 0; }
.sp-tplsm-logo .sp-tpl-logo-svg,
.sp-tpl-footer-brand .sp-tpl-footer-logo-svg {
  flex: none;
  width:  calc((1 - var(--sp-tplsm-logo-mode, 0)) * 32px);
  height: 32px;
  margin-inline-end: calc((1 - var(--sp-tplsm-logo-mode, 0)) * 12px);
}
.sp-tpl-footer-brand .sp-tpl-footer-logo-svg { width: calc((1 - var(--sp-tplsm-logo-mode, 0)) * 40px); height: 40px; }
.sp-tplsm-logo-mark {
  display: inline-block; flex: none;
  width:  calc(var(--sp-tplsm-logo-mode, 0) * 36px);
  height: 36px;
  margin-inline-end: calc(var(--sp-tplsm-logo-mode, 0) * 12px);
  background: linear-gradient(135deg, var(--sp-primary, #0abab5), var(--sp-secondary, #3ff0e8));
  -webkit-mask: var(--sp-tplsm-logo, none) center / contain no-repeat;
          mask: var(--sp-tplsm-logo, none) center / contain no-repeat;
}
.sp-tplsm-logo-mark--footer { width: calc(var(--sp-tplsm-logo-mode, 0) * 44px); height: 44px; }
/* logo dell'header un filo piu' grande (Davide 24/9, +17%: simbolo 36 → 42, nome 16,8 → 19,7 px); l'header non cresce */
.sp-tpl-header .sp-tplsm-logo-mark { width: calc(var(--sp-tplsm-logo-mode, 0) * 42px); height: 42px; margin-inline-end: calc(var(--sp-tplsm-logo-mode, 0) * 14px); }
.sp-tpl-header .sp-tplsm-logo .sp-tpl-logo-brand { font-size: 1.23rem; }
/* logo VIVO: il JS dedicato (sp-site-template-spheremesh-1.0.js) disegna la mini-sfera in un
   canvas dentro il simbolo e mette .is-live; senza JS resta la maschera statica qui sopra */
.sp-tplsm-logo-mark.is-live {
  position: relative; background: none;
  -webkit-mask: none; mask: none;
  transition: filter var(--sp-tr-slow, .5s) var(--sp-ease, ease);
}
.sp-tplsm-logo-mark.is-live .sp-tplsm-logo-canvas { display: block; }
.sp-tplsm-logo-mark.is-busy { filter: drop-shadow(0 0 6px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32))); }
.sp-tplsm-logo .sp-tpl-logo-brand { color: var(--sp-tplsm-text, #e9eef4); font-weight: 600; letter-spacing: -.01em; }
/* wordmark come nel mockup: "Sphere" 700, "Mesh" 400 in colore secondario */
.sp-tplsm-word-lead { font-weight: 500; }   /* variante B (Davide 25/9: il 700 della v3 "troppo cicciotto") */
.sp-tplsm-word-rest { font-weight: 300; }
.sp-tplsm-word-lead + .sp-tplsm-word-rest { color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tpl-footer-brand { gap: 16px; }
.sp-tpl-footer-brand .sp-tpl-footer-brand-name { font-size: 1.3rem; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tpl-footer-brand .sp-tpl-footer-brand-legal { font-size: .9rem; color: var(--sp-tplsm-muted, #8493a6); }
/* basic-2.0 sotto i 640px centra la scritta in assoluto (header a 3 zone): qui simbolo e
   nome restano insieme a sinistra, come nel mockup */
@media (max-width: 640px) {
  .sp-tplsm-logo .sp-tpl-logo-brand { position: static; transform: none; }
}

/* =====================================================================
 * §14e Menu: la voce-bottone (classes sp-tplsm-nav-cta) e il drawer mobile
 * ===================================================================== */
.sp-tpl-nav { align-items: center; }
/* basic-2.0 stila ogni ".sp-tpl-nav a" (maiuscolo, padding 10/16, colore primary in hover): la
   voce-bottone torna al sistema bottoni con peso (0,2,1) e (0,3,1) per l'hover */
.sp-tpl-nav a.sp-tplsm-nav-cta {
  margin-inline-start: 18px; flex: none;
  padding: 0 var(--sp-tplsm-btn-px, 24px); border-radius: var(--sp-tplsm-btn-r, 10px);
  font-size: var(--sp-tplsm-btn-fs, .95rem); font-weight: 500; letter-spacing: .01em; text-transform: none;
  color: var(--sp-tplsm-on-primary, #071215);
}
.sp-tpl-nav a.sp-tplsm-nav-cta:hover,
.sp-tpl-nav a.sp-tplsm-nav-cta:focus-visible { color: var(--sp-tplsm-on-primary, #071215); }
/* nel drawer: dopo le voci, a tutta larghezza */
.sp-tpl-drawer-nav .sp-tplsm-drawer-cta { width: 100%; margin-top: 14px; }
/* il nome in fondo al drawer: wordmark come l'header (Sphere 700 / Mesh 400) al posto del teal
   spaziato di basic-2.0, col simbolo statico (la maschera del logo, senza canvas) */
.sp-tpl-drawer-brand.sp-tplsm-drawer-brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1.1rem; font-weight: 400; letter-spacing: -.01em;
  color: var(--sp-tplsm-text, #e9eef4); opacity: 1;
}
.sp-tplsm-logo-static {
  display: inline-block; flex: none;
  width: calc(var(--sp-tplsm-logo-mode, 0) * 28px); height: 28px;
  background: linear-gradient(135deg, var(--sp-primary, #0abab5), var(--sp-secondary, #3ff0e8));
  -webkit-mask: var(--sp-tplsm-logo, none) center / contain no-repeat;
          mask: var(--sp-tplsm-logo, none) center / contain no-repeat;
}

/* =====================================================================
 * §14g Loader (come dev.aimo): il bundle jspheresite-2.0 accende .splwrapper con is-on
 * (+ is-blocking) sul bus jsphere:loading-start e ci mette dentro la sfera (sphere.loaderSfera:
 * canvas .sp-sfera-canvas 224px, classe has-sfera). Il layout 2.0 non stila la sfera: senza queste
 * regole il canvas finiva nell'angolo in alto a sinistra e lo spinner vecchio restava al centro.
 *   non bloccante → barra sottile in cima;  bloccante → velo scuro + sfera al centro del viewport.
 * ===================================================================== */
.splwrapper { transition: opacity .16s; }
.sp-sfera-canvas { display: none; }
.splwrapper.is-on {
  inset: 0 0 auto; height: 3px; width: 100%;
  background: transparent; pointer-events: none; z-index: 9999;
}
.splwrapper.is-on .sploader {
  top: 0; left: 0; transform: none;
  width: 40%; height: 3px; border: 0; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--sp-primary, #0abab5), var(--sp-secondary, #3ff0e8));
  animation: sp-tplsm-bar 1.1s ease-in-out infinite;
}
@keyframes sp-tplsm-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.splwrapper.is-on.is-blocking {
  inset: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sp-background, #070b12) 72%, transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
}
/* bloccante senza sfera (canvas non supportato): lo spinner del layout, al centro, nei colori del sito */
.splwrapper.is-on.is-blocking .sploader {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; box-sizing: border-box; background: none;
  border: 3px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); border-top-color: var(--sp-primary, #0abab5);
  border-radius: 50%; animation: spin .8s linear infinite;
}
.splwrapper.is-on.is-blocking .sp-sfera-canvas {
  display: block; width: var(--sp-tplsm-loader, 112px); height: var(--sp-tplsm-loader, 112px);   /* variante piu' grande: --sp-tplsm-loader: 160px */
  filter: drop-shadow(0 0 18px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32)));
}
.splwrapper.has-sfera.is-on.is-blocking .sploader { display: none; }

/* =====================================================================
 * §14f Pagine di testo (renderPage: note legali, cookie policy, privacy, chi siamo)
 * ===================================================================== */
/* basic-2.0: colonna 720px e tutto centrato, anche paragrafi, titoli e liste (inline-block).
   Qui una colonna piu' larga (Davide: "allargherei lo spazio per i testi"), centrata come blocco;
   il testo va a sinistra. Occhiello e titolo della testata restano centrati (sono nel page-hero). */
.sp-tpl-content-head { max-width: var(--sp-tplsm-read-w, 880px); }
.sp-tpl-content-body { text-align: left; font-size: 1.05rem; line-height: 1.75; color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tpl-content-body h2, .sp-tpl-content-body h3 { color: var(--sp-tplsm-text, #e9eef4); line-height: 1.3; letter-spacing: -.01em; }
.sp-tpl-content-body h3 { font-size: 1.2rem; margin-top: 40px; margin-bottom: 4px; }
.sp-tpl-content-body > h3:first-child { margin-top: 0; }
.sp-tpl-content-body ul, .sp-tpl-content-body ol { display: block; padding-left: 1.3em; }
.sp-tpl-content-body li::marker { color: var(--sp-primary, #0abab5); }
.sp-tpl-content-body strong { color: var(--sp-tplsm-text, #e9eef4); font-weight: 600; }
.sp-tpl-content-body a { color: var(--sp-primary, #0abab5); text-decoration: underline; text-decoration-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); text-underline-offset: 3px; }
.sp-tpl-content-body a:hover { text-decoration-color: currentColor; }
.sp-tpl-content-body a:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; border-radius: 2px; }
/* tabella (cookie policy): table.sp-table nel contenuto, senza il wrapper .sp-table del layout */
.sp-tpl-content-body table.sp-table {
  width: 100%; margin: 22px 0 6px; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); border-radius: var(--sp-tpl-r-md, 14px); overflow: hidden;
  font-size: .95rem; line-height: 1.5;
}
.sp-tpl-content-body table.sp-table th,
.sp-tpl-content-body table.sp-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); }
.sp-tpl-content-body table.sp-table th {
  background: var(--sp-tplsm-surface-2, #19202b); color: var(--sp-tplsm-text, #e9eef4);
  font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.sp-tpl-content-body table.sp-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--sp-default, #e9eef4) 3%, transparent); }
.sp-tpl-content-body table.sp-table tbody tr:last-child td { border-bottom: 0; }
/* la prima colonna sono i nomi dei cookie */
.sp-tpl-content-body table.sp-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; color: var(--sp-tplsm-text, #e9eef4); white-space: nowrap; }
@media (max-width: 720px) {
  .sp-tpl-content-body { font-size: 1rem; line-height: 1.7; }
  /* la tabella scorre dentro la sua riga: la pagina non si allarga */
  .sp-tpl-content-body table.sp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sp-tpl-content-body table.sp-table th, .sp-tpl-content-body table.sp-table td { padding: 10px 12px; min-width: 9em; }
}

/* =====================================================================
 * §14d Contatti (contactsData + renderMaps: card a sinistra, mappa a destra)
 * ===================================================================== */
/* basic-2.0 usa 1fr 1.4fr: il minimo di 1fr e' il contenuto (email, indirizzo), che sotto i 400px
   sfonda la colonna a destra. minmax(0, …) la tiene nel contenitore; il testo va a capo. */
.sp-tpl-contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; align-items: stretch; }
.sp-tpl-contact-info { min-width: 0; gap: 14px; }
/* le card si dividono l'altezza della riga: la colonna finisce dove finisce la mappa */
.sp-tpl-contact-info .sp-tpl-info-card { flex: 1 1 0; align-items: center; min-width: 0; }
.sp-tpl-info-card-body p { overflow-wrap: anywhere; }
/* il valore delle card (email, telefono) e' un div dentro il p: il parser chiude il p prima del div, quindi la regola
   sopra non lo tocca. Corpo della card che si puo' stringere (figlio flex) e valore che va a capo solo se proprio
   non ci sta; su telefono prima scala (come il footer), cosi' l'email resta su una riga (25/9, overflow a 320) */
.sp-tpl-info-card-body { min-width: 0; }
/* card dei contatti cliccabili (18): come le card cliccabili di Soluzioni, si alzano di poco col bordo primary; focus visibile */
a.sp-tpl-info-card.is-link { color: inherit; text-decoration: none; transition: transform var(--sp-tr, .25s), border-color var(--sp-tr, .25s), box-shadow var(--sp-tr, .25s); }
/* (§22-bis hover uniformi) tolta: sollevamento -3 px e ombra delle card contatti: ora la regola comune */
a.sp-tpl-info-card.is-link:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
/* (§22-bis hover uniformi) tolta: non serve piu': nessun sollevamento */
.sp-tpl-info-card-body > div { overflow-wrap: anywhere; }
.sp-tplsm-map-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sp-tpl-contact-map.sp-tplsm-map {
  flex: 1 1 auto; min-height: 420px;
  border-radius: var(--sp-tpl-r-md, 14px); border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  background: var(--sp-tplsm-surface, #0d1421);
}
/* l'iframe arriva con height="500" dal dato: qui prende l'altezza della colonna */
.sp-tplsm-map iframe {
  height: auto; min-height: 0;
  /* mappa chiara di Google resa scura: invert + hue-rotate lascia i colori al loro posto
     (il pin resta rosso, i parchi verdi), saturazione e contrasto la calmano sul fondo del sito */
  filter: invert(90%) hue-rotate(180deg) saturate(.7) brightness(.92) contrast(.9);
}
.sp-tplsm-map-open { align-self: flex-end; }
@media (max-width: 1024px) {
  /* una colonna (basic-2.0): a tablet e Fold aperto le 4 card stanno 2 per riga, la mappa sotto */
  .sp-tpl-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-tpl-contact-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-tpl-contact-map.sp-tplsm-map { min-height: 380px; }
}
@media (max-width: 720px) {
  .sp-tpl-contact-grid { gap: 20px; }
  .sp-tpl-contact-info { display: flex; }
  .sp-tpl-contact-info .sp-tpl-info-card { padding: 18px; gap: 14px; }
  .sp-tpl-contact-map.sp-tplsm-map { min-height: 320px; }
  .sp-tplsm-map-open { align-self: stretch; }
}
/* card dei contatti su telefono stretto (25/9): vedi il valore delle card sopra */
@media (max-width: 400px) {
  .sp-tpl-contact-info .sp-tpl-info-card { padding: 16px 14px; gap: 10px; }
  .sp-tpl-contact-info .sp-tpl-info-card-icon { width: 34px; height: 34px; flex: 0 0 34px; }
  .sp-tpl-info-card-body > div { font-size: clamp(12px, 4.1vw, 1em); }
}

/* =====================================================================
 * §16 Apertura della home a tutto viewport (hero data.visual = "open", variante A)
 *   sezione 100svh sotto topbar+header (fixed): sfera al centro, wordmark ENORME davanti, capsula "scorri";
 *   il volo (sfera -> logo vivo, wordmark -> nome dell'header) lo muove il JS dedicato con variabili e transform.
 * ===================================================================== */
.sp-tplsm-open {
  position: relative; display: grid; place-items: center; box-sizing: border-box; overflow-x: clip;
  padding-top: var(--sp-tplsm-head, 110px);
  height: 100vh; height: 100svh;   /* svh: sempre intera anche con la barra del browser mobile */
}
.sp-tplsm-open-stage {
  position: fixed; left: 0; right: 0; top: var(--sp-tplsm-head, 110px);
  height: calc(100vh - var(--sp-tplsm-head, 110px)); height: calc(100svh - var(--sp-tplsm-head, 110px));
  z-index: 0;   /* in cima sotto topbar e header (fixed, z 55); appena si scorre il JS la porta davanti (56) */
  pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity;
}
/* l'alone della sfera della home (Davide 24/9: "manca un po' di alone Tiffany che da' profondita'"): piu' tenue, scuro e
   largo di quello delle testate, dietro il canvas e dentro lo stage, quindi vola, rimpicciolisce e sfuma con la sfera */
/* Davide: "delicata, non un faro alogeno": teal scuro (primary nel fondo), alfa .10 al centro, raggio ampio, coda lunga */
.sp-tplsm-open-stage {
  --sp-tplsm-halo-c: color-mix(in srgb, var(--sp-primary, #0abab5) 60%, var(--sp-tplsm-deep, #06090f));
  --sp-tplsm-halo-k: 10%; --sp-tplsm-halo-a1: .78; --sp-tplsm-halo-a2: .4;
  --sp-tplsm-halo-w: 58%; --sp-tplsm-halo-h: 88%; --sp-tplsm-halo-y: 50%;
}
.sp-tplsm-open-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--sp-tplsm-halo);
}
/* dithering dell'alone: grana finissima (rumore SVG inline, zero richieste) solo dentro la forma dell'alone, sotto il
   canvas: sul telefono il radiale a bassa intensita' si vedrebbe a gradini (8 bit) */
.sp-tplsm-open-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .94 0 0 0 0 .91 1.4 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: calc(.1 * var(--sp-tplsm-halo-f, 1));
  -webkit-mask-image: radial-gradient(ellipse var(--sp-tplsm-halo-w) var(--sp-tplsm-halo-h) at 50% var(--sp-tplsm-halo-y), #000 40%, transparent 72%);
          mask-image: radial-gradient(ellipse var(--sp-tplsm-halo-w) var(--sp-tplsm-halo-h) at 50% var(--sp-tplsm-halo-y), #000 40%, transparent 72%);
}
/* respira piano, come una luce (Davide 24/9: live di base); senza JS e col movimento ridotto resta fermo */
.sp-js-motion .sp-tplsm-open-stage::before { animation: sp-tplsm-halo-breathe 6s ease-in-out infinite; }
@keyframes sp-tplsm-halo-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.sp-tplsm-open-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; cursor: grab; }
.sp-tplsm-open-stage canvas:active { cursor: grabbing; }
.sp-tplsm-open.is-scrolled .sp-tplsm-open-stage canvas { pointer-events: none; }
.sp-tplsm-open-stage [data-sp-sphere-labels-host] { pointer-events: none; transition: opacity .35s; }
.sp-tplsm-open.is-scrolled .sp-tplsm-open-stage [data-sp-sphere-labels-host] { opacity: 0; }   /* etichette solo a tutto schermo */
.sp-tplsm-open .sp-tplsm-sphere--open { --sp-sphere-cy: .5; }   /* il template sposta in alto la sfera dell'hero sotto gli 880px */
.sp-tplsm-open-title {
  position: relative; z-index: 2; margin: 0; padding-inline: 20px; text-align: center; white-space: nowrap;
  /* stesse proporzioni del wordmark dell'header (peso 500/300, spaziatura -.01em): a fine volo coincide al pixel */
  /* DIMENSIONE LEGATA ALLA SFERA (Davide 25/9: la scritta sbordava dalla sfera a ~1000 px e oltre). La misura esatta la mette il JS
     dedicato (--sp-tplsm-open-fs: la scritta sottile al massimo --sp-tplsm-open-fill del diametro vero, mai piu' grande del clamp).
     Prima del JS: la stessa regola in CSS, col diametro dello stage da scrivania (0,40 x il lato minore sotto l'header)
     .1115 = .80 x 2 x .40 / 5,742 (larghezza di "Sphere Mesh" per em, peso 300, misurata): niente salto quando arriva il JS */
  --sp-tplsm-open-fill: .8; --sp-tplsm-open-max: clamp(3.2rem, 13vw, 11rem);   /* max = la misura di prima: il JS non la supera */
  font-size: var(--sp-tplsm-open-fs, min(var(--sp-tplsm-open-max), calc(min(100vw, 100svh - var(--sp-tplsm-head, 110px)) * .1115)));
  font-weight: 700; letter-spacing: -.01em; line-height: .95;
  color: var(--sp-tplsm-text, #e9eef4); pointer-events: none; transform-origin: 0 0; will-change: opacity, transform;
}
.sp-tplsm-open-title .sp-tplsm-word-lead { font-weight: 500; }   /* = header: il volo allinea la parola in grassetto */
.sp-tplsm-open-title .sp-tplsm-word-rest { font-weight: 300; color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tplsm-open-title::before {   /* velo radiale morbido dietro al nome, niente riquadro */
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 130%; height: 260%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-background, #070b12) 78%, transparent), transparent);
}
/* invito allo scroll come nel mockup v1 (Davide 24/9): linea verticale di 1px che si disegna dall'alto e sfuma, in loop,
   e sotto la parola del dato (data.cue) in maiuscolo spaziato. Cliccabile (porta alla prima sezione, JS dedicato),
   distanza fissa dal fondo con safe-area; sparisce appena parte il volo; movimento ridotto: linea ferma */
.sp-tplsm-open-cue {
  position: absolute; z-index: 2; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 10px; text-decoration: none;
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sp-tplsm-muted, #8493a6); transition: color .25s;
}
.sp-tplsm-open-cue:hover { color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-open-cue:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 4px; border-radius: 6px; }
.sp-tplsm-open-cue-line {
  display: block; width: 1px; height: 38px; transform-origin: top;
  background: linear-gradient(var(--sp-primary, #0abab5), transparent); animation: sp-tplsm-opencue 2.2s var(--sp-ease, ease) infinite;
}
.sp-tplsm-open-cue-text { padding-inline-start: .28em; }   /* compensa la spaziatura dopo l'ultima lettera: centrata sotto la linea */
@keyframes sp-tplsm-opencue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-open-cue-line { animation: none; } }
/* il contenuto sotto passa sopra la sfera che se ne va */
.sp-tplsm-open ~ * { position: relative; z-index: 1; }
.sp-tplsm-first { padding-block: clamp(64px, 9vw, 120px); }
.sp-tplsm-first-title { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.08; max-width: 18ch; margin: 0; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-first-lead { max-width: 58ch; margin: 22px 0 0; font-size: 1.1rem; line-height: 1.65; color: var(--sp-tplsm-text-2, #b6bdc7); }
/* (home, voce 459, Davide 5/10) il lead con l'accento: piu' grande e a colore pieno; la frase "ti risponde chi l'ha fatto" in oro, dritta */
.sp-tplsm-first-lead--accento { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.45; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-lead-oro { font-style: normal; color: var(--sp-tertiary, #d4a35a); }
.sp-tplsm-first .sp-tpl-hero-actions { margin-top: 32px; }
/* "Scorri" (Davide 26/9, dal telefono: il titolo finiva mezzo sotto l'header). Il titolo della prima sezione si ferma sotto
   l'header vero (--sp-tplsm-head, lo misura il JS dell'apertura) con un respiro: vale per il salto all'ancora anche senza JS,
   e il JS ne fa sia il punto d'arrivo dello Scorri sia la fine del volo (cosi' li' il logo e' gia' agganciato) */
.sp-tplsm-first-title {
  --sp-tplsm-scroll-gap: clamp(40px, 6svh, 60px);
  scroll-margin-top: calc(var(--sp-tplsm-head, 110px) + var(--sp-tplsm-scroll-gap));
}
/* SOLO mentre il JS dedicato guida l'apertura (html.sp-tplsm-open-on, la mette e la toglie lui, anche nella navigazione AJAX):
   all'inizio l'header mostra solo il menu; simbolo e nome compaiono quando sfera e wordmark ci atterrano. Senza JS, se il JS
   non parte o con movimento ridotto: sempre visibili. */
/* passaggio di consegne PER ELEMENTO: il nome si accende quando il wordmark in volo lo raggiunge, il simbolo quando lo raggiunge la sfera */
html.sp-tplsm-open-on .sp-tpl-header .sp-tpl-logo-brand { opacity: var(--sp-tplsm-hand-brand, 0); }
html.sp-tplsm-open-on .sp-tpl-header .sp-tplsm-logo-mark { opacity: var(--sp-tplsm-hand-mark, 0); }
/* menu centrato finche' l'header e' senza logo: lo sposta il JS (--sp-tplsm-nav-shift), solo transform. Sotto il breakpoint il nav e' nascosto */
html.sp-tplsm-open-on .sp-tpl-header .sp-tpl-nav { transform: translateX(var(--sp-tplsm-nav-shift, 0px)); }
html.sp-tplsm-open-on .sp-tpl-header a.sp-tpl-logo.is-off { pointer-events: none; }   /* logo ancora invisibile: niente clic (il JS toglie anche il focus) */
/* entrata/uscita dalla home in AJAX (JS dedicato, ~650 ms): menu e logo si muovono piano invece di scattare */
html.sp-tplsm-open-trans .sp-tpl-header .sp-tpl-nav { transition: transform .62s var(--sp-ease-out, cubic-bezier(.19, 1, .22, 1)); }
html.sp-tplsm-open-trans .sp-tpl-header .sp-tpl-logo-brand,
html.sp-tplsm-open-trans .sp-tpl-header .sp-tplsm-logo-mark { transition: opacity .62s var(--sp-ease, ease); }
/* etichette dei nodi: si spengono appena si scorre; tornando in cima (sfera di nuovo intera) ricompaiono UNA ALLA VOLTA.
   filter/scale sono proprieta' separate da opacity/transform, che jSite scrive a ogni fotogramma */
html.sp-tplsm-open-on .sp-tplsm-open [data-sp-sphere-labels-host] .sp-sphere-label { transition: filter .5s ease, scale .5s var(--sp-ease-out, ease-out); }
html.sp-tplsm-open-on .sp-tplsm-open.is-scrolled [data-sp-sphere-labels-host] .sp-sphere-label { filter: opacity(0); scale: .7; transition-duration: .2s; transition-delay: 0s; }
html.sp-tplsm-open-on .sp-tplsm-open:not(.is-scrolled) [data-sp-sphere-labels-host] .sp-sphere-label:nth-child(2) { transition-delay: .18s; }
html.sp-tplsm-open-on .sp-tplsm-open:not(.is-scrolled) [data-sp-sphere-labels-host] .sp-sphere-label:nth-child(3) { transition-delay: .36s; }
html.sp-tplsm-open-on .sp-tplsm-open:not(.is-scrolled) [data-sp-sphere-labels-host] .sp-sphere-label:nth-child(4) { transition-delay: .54s; }
html.sp-tplsm-open-on .sp-tplsm-open:not(.is-scrolled) [data-sp-sphere-labels-host] .sp-sphere-label:nth-child(5) { transition-delay: .72s; }
html.sp-tplsm-open-on .sp-tplsm-open:not(.is-scrolled) [data-sp-sphere-labels-host] .sp-sphere-label:nth-child(n + 6) { transition-delay: .9s; }
/* wordmark grande SOTTILE e tinto (livello aria-hidden creato dal JS); si dissolve nel grassetto che atterra (--sp-tplsm-wt 0..1).
   Senza JS resta il grassetto; con movimento ridotto il sottile */
.sp-tplsm-open-light {
  position: absolute; inset: 0; padding-inline: inherit; font-weight: 300; transform-origin: 50% 50%;
  opacity: calc(1 - var(--sp-tplsm-wt, 0)); pointer-events: none;
}
.sp-tplsm-open-light > span { color: color-mix(in srgb, var(--sp-secondary, #3ff0e8) 42%, var(--sp-tplsm-text, #e9eef4)); }
/* una span per lettera (dal JS): gradiente su ogni lettera, largo quanto la parola e spostato sulla sua posizione
   (--sp-tplsm-gw / --sp-tplsm-gx), quindi a occhio e' un gradiente solo; resta in linea (crenatura intatta) */
.sp-tplsm-open-ch {
  position: relative;
  background: linear-gradient(100deg, color-mix(in srgb, var(--sp-secondary, #3ff0e8) 42%, var(--sp-tplsm-text, #e9eef4)), color-mix(in srgb, var(--sp-primary, #0abab5) 62%, var(--sp-tplsm-text, #e9eef4)));
  background-size: var(--sp-tplsm-gw, 100%) 100%; background-position: var(--sp-tplsm-gx, 0) 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sp-tplsm-open-title.has-light > .sp-tplsm-word-lead,
.sp-tplsm-open-title.has-light > .sp-tplsm-word-rest { opacity: var(--sp-tplsm-wt, 0); }
/* LUCE SUL NOME (Davide 27/9: "molto fica ma molto ferma"; la sensazione della schermata di accesso di Sfera: una luce che
   passa sulla scritta e quasi non si percepisce). Una macchia di luce morbida, sulla parola intera come il gradiente, che il JS
   dell'apertura sposta (--sp-tplsm-lx) e accende (--sp-tplsm-la, 0..1) solo con la scritta a tutto schermo. Qui il disegno:
   colore (--sp-tplsm-lc), larghezza (--sp-tplsm-lr, quota della parola) e forza massima (--sp-tplsm-lmax). Senza JS e col
   movimento ridotto --sp-tplsm-la resta 0: la macchia e' trasparente e la scritta e' quella di prima, al pixel */
.sp-tplsm-open-light > span {
  --sp-tplsm-lx: 50%; --sp-tplsm-la: 0;
  --sp-tplsm-lc: var(--sp-tplsm-text, #e9eef4); --sp-tplsm-lr: 24%; --sp-tplsm-lmax: 58%;
}
.sp-tplsm-open-ch {
  background-image:
    radial-gradient(ellipse var(--sp-tplsm-lr) 140% at var(--sp-tplsm-lx) 42%,
      color-mix(in srgb, var(--sp-tplsm-lc) calc(var(--sp-tplsm-la) * var(--sp-tplsm-lmax)), transparent),
      color-mix(in srgb, var(--sp-tplsm-lc) calc(var(--sp-tplsm-la) * var(--sp-tplsm-lmax) * .38), transparent) 45%,
      transparent),
    linear-gradient(100deg, color-mix(in srgb, var(--sp-secondary, #3ff0e8) 42%, var(--sp-tplsm-text, #e9eef4)), color-mix(in srgb, var(--sp-primary, #0abab5) 62%, var(--sp-tplsm-text, #e9eef4)));
}
@media (max-width: 560px) {
  /* telefono: la scritta sta gia' dentro la sfera (0,86 del diametro, misurato a 390) e resta com'e': stesso clamp di prima,
     e per il JS lo stesso rapporto come tetto (niente salto, niente discontinuita' allargando la finestra) */
  .sp-tplsm-open-title { white-space: normal; line-height: .92; --sp-tplsm-open-fill: .86; font-size: var(--sp-tplsm-open-fs, var(--sp-tplsm-open-max)); }
}
/* layout a hamburger: lo stage prende tutta l'altezza (sotto l'header trasparente) e sotto gli 880 px il raggio e' .44.
   Solo per il primo fotogramma prima del JS (il JS misura il diametro vero); .1226 = .80 x 2 x .44 / 5,742 */
@media (min-width: 561px) and (max-width: 1024px) {
  .sp-tplsm-open-title { font-size: var(--sp-tplsm-open-fs, min(var(--sp-tplsm-open-max), calc(min(100vw, 100svh) * .1115))); }
}
@media (min-width: 561px) and (max-width: 880px) {
  .sp-tplsm-open-title { font-size: var(--sp-tplsm-open-fs, min(var(--sp-tplsm-open-max), calc(min(100vw, 100svh) * .1226))); }
}
@media (max-width: 880px) {
  /* telefono e Fold: centro OTTICO un filo sopra quello geometrico dello spazio sotto l'header (sfera e nome insieme) */
  .sp-tplsm-open .sp-tplsm-sphere--open { --sp-sphere-radius: .44; --sp-sphere-cy: .46; }
  .sp-tplsm-open-stage { --sp-tplsm-halo-w: 105%; --sp-tplsm-halo-h: 60%; --sp-tplsm-halo-y: 46%; }   /* stesso centro della sfera */
  .sp-tplsm-open { padding-bottom: calc((100svh - var(--sp-tplsm-head, 110px)) * .08); }
}

/* =====================================================================
 * §15 Responsive
 * ===================================================================== */
@media (max-width: 1024px) {
  .sp-tpl-bento-card.sp-tplsm-bento--sphere { grid-column: 1 / -1; grid-row: auto; min-height: 360px; }
  .sp-tplsm-solutions-grid,
  .sp-tplsm-solutions-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
/* testate con la sfera su telefono (Davide 24/9, dal Fold): fra il sottotitolo e il primo contenuto c'era lo spazio del
   desktop (70 + 56 px). Sotto i 900 px si stringe a 24 + 40; la sfera resta dietro il testo */
@media (max-width: 899px) {
  .sp-tpl-page-hero { padding-bottom: 24px; }
}
@media (max-width: 880px) {
  /* telefono e tablet stretti: la sfera sale sopra il testo e occupa la larghezza */
  .sp-tplsm-sphere--hero { --sp-sphere-cy: .3; --sp-sphere-radius: .44; }
  .sp-tplsm-stack-grid, .sp-tplsm-case-grid { grid-template-columns: 1fr; }
  .sp-tplsm-steps,
  .sp-tplsm-steps:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
  .sp-tplsm-case-points { flex-direction: row; flex-wrap: wrap; padding-inline-start: 0; border-inline-start: 0; padding-top: 22px; border-top: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); }
  .sp-tplsm-metrics .sp-tpl-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .sp-tplsm-metrics .sp-tpl-metric:nth-child(odd) { border-inline-start: 0; }
}
@media (max-width: 560px) {
  .sp-tplsm-solutions-grid,
  .sp-tplsm-solutions-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
  .sp-tplsm-layer { grid-template-columns: 44px minmax(0, 1fr); padding: 14px 16px; }
  .sp-tplsm-layers { padding-left: 22px; }
  .sp-tplsm-hero .sp-tpl-hero-actions .sp-tpl-btn { flex: 1 1 100%; justify-content: center; }
  .sp-tplsm-scroll-cue { display: none; }
  /* sp-site-layout-2.0 fa di __actions una griglia a 2 colonne: il blocco legacy e' UN figlio,
     quindi deve prendere tutta la riga, e dentro diventa lui la griglia dei bottoni */
  .sp-cookie-banner__actions .sp-flex { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; justify-content: stretch; width: 100%; padding: 0; }
  /* un foglio del sito mette #sp-cookie-banner .sp-button { width: 50% } sotto i 600px: stesso
     peso (id + classi) per vincere senza !important */
  #sp-cookie-banner .sp-cookie-banner__actions .sp-flex > .sp-button { width: 100%; max-width: none; justify-self: stretch; box-sizing: border-box; white-space: normal; text-align: center; }
  .sp-cookie-banner .sp-button[data-control="closeCookieBanner"] { grid-column: 1 / -1; }
  .sp-tplsm-metrics .sp-tpl-metric { padding-inline: 14px; }
  .sp-tplsm-metrics .sp-tpl-metric-value { font-size: clamp(1.5rem, 7.5vw, 2.4rem); }
}

/* =====================================================================
 * §17 Tipografia SENZA grassetto (Davide 24/9, strada 1): stesso font, gerarchia con dimensione, spazio e colore.
 * Titoli grandi 300 (sottili), h3 e titoli dei box 400, eyebrow e bottoni 500. Quicksand qui ha solo 300/400/700:
 * il 500 si vede come 400 (il browser prende la faccia piu' vicina sotto), resta 500 se un giorno arriva la faccia.
 * Restano come prima: il wordmark del logo ("Sphere" 700) e i numeri delle metriche.
 * Le regole del template sopra sono gia' a questi pesi; qui quelle del layout 2.0, stessa specificita', vince l'ordine.
 * ===================================================================== */
h1, h2, h3, h4 { font-weight: 400; }
.sp-tpl-page-hero-title, .sp-tpl-intro-title, .sp-tplsm-bento--sphere h3 { font-weight: 300; letter-spacing: -.015em; }
.sp-tpl-eyebrow { font-weight: 500; }
/* eccezione (Davide 24/9, scelta 1): i bottoni PIENI restano 700, il 400 su teal ha il tratto troppo esile; ghost e outline 500 */
.sp-tpl-btn--primary, .sp-tpl-nav a.sp-tplsm-nav-cta, .sp-tpl-flip-back .disable-selection .sp-button[data-bind],
:where(.sphere-dialog) .sp-button:where([data-control]) { font-weight: 700; }
.sp-tpl-drawer-link, .sp-tpl-faq-item summary, .sp-tplpro-logo, .sp-cookie-banner__title,
.sp-tpl-info-card h4, .sp-tpl-info-card-body h4 { font-weight: 400; }

/* =====================================================================
 * §19 Apertura della home su telefono (pacchetto 19, variante A di Davide)
 * Layout a hamburger (<= 1024 px). Topbar: le voci stanno nel drawer (JS dedicato, stesse voci del dato), la barra
 * sparisce e l'header sale in cima, su tutte le pagine. Home (html.sp-tplsm-m-open, lo mette il JS dell'apertura):
 * a p=0 header trasparente, solo l'hamburger in una capsula di vetro che galleggia appena; la sfera a tutto schermo.
 * Il volo costruisce l'header (--sp-tplsm-hand-head 0 → 1) e la capsula ci si fonde.
 * ===================================================================== */
.sp-tplsm-drawer-utils { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06)); position: relative; z-index: 1; }
.sp-tplsm-drawer-util { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--sp-tplsm-text-2, #b6bdc7); font-size: .95rem; text-decoration: none; }
.sp-tplsm-drawer-util i { width: 20px; text-align: center; color: var(--sp-primary, #0abab5); }
.sp-tplsm-drawer-util .sp-tpl-topbar-label { display: inline; }   /* il core le nasconde sotto i 720 px (topbar) */
.sp-tplsm-drawer-util:hover { color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-drawer-util:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 1024px) {
  .sp-tpl-hamburger { width: 44px; height: 44px; place-items: center; }   /* area di tocco 44 px */
  .sp-tpl-hamburger:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
  html.sp-tplsm-m-open .sp-tplsm-open-stage { top: 0; height: 100vh; height: 100svh; }
  html.sp-tplsm-m-open .sp-tplsm-open { padding-top: 0; }
  html.sp-tplsm-m-open .sp-tpl-header {
    background: color-mix(in srgb, var(--sp-tplsm-glass, rgba(7, 11, 18, .74)) calc(var(--sp-tplsm-hand-head, 1) * 100%), transparent);
    border-bottom-color: color-mix(in srgb, var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06)) calc(var(--sp-tplsm-hand-head, 1) * 100%), transparent);
    -webkit-backdrop-filter: saturate(150%) blur(calc(16px * var(--sp-tplsm-hand-head, 1)));
            backdrop-filter: saturate(150%) blur(calc(16px * var(--sp-tplsm-hand-head, 1)));
  }
  html.sp-tplsm-m-open .sp-tpl-hamburger {
    --sp-tplsm-cap: calc(1 - var(--sp-tplsm-hand-head, 1));
    position: relative; isolation: isolate; border-radius: 14px;
    transition: scale .15s var(--sp-ease, ease);
  }
  html.sp-tplsm-m-open .sp-tpl-hamburger::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: color-mix(in srgb, var(--sp-tplsm-deep, #06090f) 55%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--sp-primary, #0abab5) 26%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .04);
    opacity: var(--sp-tplsm-cap);
  }
  html.sp-tplsm-m-open .sp-tpl-hamburger:active { scale: .94; }   /* tocco: un filo di pressione */
  html.sp-tplsm-m-open.sp-js-motion .sp-tpl-hamburger { animation: sp-tplsm-levitate 6s ease-in-out infinite; }   /* come il respiro dell'alone */
}
@keyframes sp-tplsm-levitate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--sp-tplsm-cap, 1) * -1.5px)); } }

/* =====================================================================
 * §21 Modal legacy del core (.sp-modal) — pacchetto 21a (Davide 25/9: "piscio di cane")
 * Il form del consenso (e ogni pagina des) aperto dalle voci con callback "modal" finiva su un riquadro bianco
 * (regola del core .sp-modal-content > .sp-des-page { background: var(--sp-contrast) }) con le etichette chiare del tema:
 * illeggibile. Qui il modal prende il tema: velo del fondo del sito, superficie scura col bordo del tema, X leggibile.
 * Specificita' (0,3,0) sopra le regole del core (0,2,0), senza regole forzate.
 * ===================================================================== */
.sp-modal { background: color-mix(in srgb, var(--sp-tplsm-deep, #06090f) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* il contenitore del core e' flex in colonna CON wrap e alto quanto la finestra: testata, testo e form andavano a capo in
   colonne affiancate e il form usciva a destra. Qui una colonna sola che scorre, centrata, larga al massimo 940 px */
.sp-modal .sp-modal-content { flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding: 72px 0 32px; box-sizing: border-box; }
.sp-modal .sp-modal-content > * { flex: none; width: min(940px, calc(100% - 32px)); max-width: 100%; box-sizing: border-box; }
.sp-modal .sp-modal-content > .sp-des-page,
.sp-modal .sp-modal-content > .sp-main-content-content {
  background: linear-gradient(180deg, var(--sp-tplsm-surface-2, #19202b), var(--sp-tplsm-surface, #0d1421));
  color: var(--sp-tplsm-text, #e9eef4);
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); border-radius: var(--sp-tplsm-radius-xl, 24px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  width: min(940px, calc(100% - 32px)); margin: 0 auto 48px; padding: clamp(16px, 3vw, 28px);
  box-sizing: border-box;
}
.sp-modal .sp-modal-content > .sp-tpl-page-hero { width: min(940px, calc(100% - 32px)); margin-inline: auto; border-radius: var(--sp-tplsm-radius-xl, 24px) var(--sp-tplsm-radius-xl, 24px) 0 0; overflow: hidden; }
.sp-modal .sp-modal-close {
  top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; box-sizing: border-box;
  color: var(--sp-tplsm-text-2, #b6bdc7); border-radius: 14px; z-index: 2;
  background: color-mix(in srgb, var(--sp-tplsm-deep, #06090f) 60%, transparent);
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  transition: color var(--sp-tr, .25s), border-color var(--sp-tr, .25s), background var(--sp-tr, .25s);
}
.sp-modal .sp-modal-close:hover { color: var(--sp-tplsm-text, #e9eef4); border-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); }
.sp-modal .sp-modal-close:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }

/* =====================================================================
 * DEMO CRM — innesto (dev0, 25/9). Lo stile del blocco sta in sp-site-demo-crm-1.0.css, caricato al primo clic.
 * Sorgente: claudio/proposte/spheremesh2/demo-crm/sito/demo-crm-sfera.css
 * ===================================================================== */
/* =====================================================================
 * DEMO CRM — innesto (pagina /servizi/software-su-misura, solo dev). Qui SOLO cio' che serve prima del clic o anche se
 * il blocco non si carica: i tasti (le card della sezione introGrid.sp-tplsm-democrm diventano pillole), il campo in cui
 * si scrive la richiesta, il messaggio d'errore, la cornice del dialog. Il blocco .sdc sta in sp-site-demo-crm-1.0.css,
 * caricato al primo clic.
 * ===================================================================== */
.sp-tplsm-democrm .sp-tplsm-democrm-field { max-width: 720px; margin-top: clamp(28px, 4vw, 44px); }
.sp-tplsm-democrm .sp-tplsm-democrm-field + .sp-tplsm-solutions-grid,
.sp-tplsm-democrm .sp-tplsm-solutions-lead + .sp-tplsm-solutions-grid { margin-top: 14px; }
.sp-tplsm-democrm-input {
  display: flex; align-items: center; min-height: 54px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); background: var(--sp-tplsm-surface, #0d1421);
  color: var(--sp-tplsm-text, #e9eef4); font-size: 1.05rem; line-height: 1.35;
  transition: border-color .4s var(--sp-ease, ease), box-shadow .4s var(--sp-ease, ease);
}
.sp-tplsm-democrm-input.is-empty .sp-tplsm-democrm-text { color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-democrm-input.is-typing { border-color: color-mix(in srgb, var(--sp-primary, #0abab5) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--sp-secondary, #3ff0e8) 10%, transparent); }
.sp-tplsm-democrm-input.is-typing .sp-tplsm-democrm-text::after {
  content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px;
  background: var(--sp-secondary, #3ff0e8); animation: sp-tplsm-democrm-blink 1s steps(1) infinite;
}
@keyframes sp-tplsm-democrm-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-democrm-input.is-typing .sp-tplsm-democrm-text::after { animation: none; } }
.sp-tplsm-democrm .sp-tplsm-solutions-grid,
.sp-tplsm-democrm .sp-tplsm-solutions-grid:has(> :nth-child(4):last-child) { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-tplsm-democrm .sp-tplsm-solution {
  flex-direction: row; align-items: center; gap: 0;
  padding: 9px 17px; border-radius: 999px;
  background: transparent; border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
}
.sp-tplsm-democrm .sp-tplsm-solution h3 { font-size: .95rem; font-weight: 400; line-height: 1.4; }
/* la richiesta (p) e' il testo che si scrive nel campo: sul tasto non si vede; niente icona, numero, freccia */
.sp-tplsm-democrm .sp-tplsm-solution p,
.sp-tplsm-democrm .sp-tplsm-solution-top,
.sp-tplsm-democrm .sp-tplsm-solution-go { display: none; }
/* (§22-bis hover uniformi) tolta: i tasti della demo prendono la regola comune */
.sp-tplsm-democrm .sp-tplsm-solution.is-picked { border-color: var(--sp-secondary, #3ff0e8); background: color-mix(in srgb, var(--sp-primary, #0abab5) 16%, transparent); }
.sp-tplsm-democrm.is-busy .sp-tplsm-solution:not(.is-picked) { opacity: .45; pointer-events: none; }

/* il blocco non si e' caricato: il messaggio (testo dal dato della voce) nel corpo del dialog */
.sp-tplsm-democrm-error { margin: 0; padding: 22px 24px; color: var(--sp-tplsm-text-2, #b6bdc7); font-size: 1rem; line-height: 1.6; }

/* il dialog della demo (classe messa dall'innesto a blocco caricato): la finestra e' fissa, scorre il contenuto */
.sphere-dialog.sp-tplsm-democrm-dlg { display: flex; flex-direction: column; resize: none; }
.sphere-dialog.sp-tplsm-democrm-dlg .sp-dialog-header { flex: none; }
.sphere-dialog.sp-tplsm-democrm-dlg .sphere-dialog-content { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; }
/* il corpo arriva da renderPage (section > container > head > body): nessun margine o misura di testo attorno allo strumento */
.sphere-dialog .sp-tpl-content:has(.sdc-mount),
.sphere-dialog .sp-tpl-content:has(.sdc-mount) .sp-tpl-container,
.sphere-dialog .sp-tpl-content:has(.sdc-mount) .sp-tpl-content-head,
.sphere-dialog .sp-tpl-content:has(.sdc-mount) .sp-tpl-content-body { padding: 0; margin: 0; max-width: none; width: auto; text-align: left; }

/* =====================================================================
 * QUICKSAND v3 — misure di testo indipendenti dal font (dev0, 25/9). Le larghezze in ch dipendono dalla cifra "0" del
 * font: nella Quicksand 1.002 era 0,710 em, nella v3 e' 0,588 (300) / 0,595 (400) / 0,614 (700), mentre il testo corrente
 * si stringe solo del 3-10%. Con la v3 i riquadri in ch si stringevano PIU' del testo e andavano a capo prima (misurato:
 * "Una mesh, infiniti progetti." 1→2 righe, lead della home 2→3, lead della CTA 1→2). Qui ogni ch diventa em con la
 * larghezza di prima (N × 0,70996 em, cioe' 1454/2048: la "0" del 1.002): stessi riquadri di oggi, qualunque sia il font. Le ultime tre regole sono di
 * sp-site-template-basic-2.0.css (condiviso, non si tocca): qui solo sovrascritte per questo sito.
 * ===================================================================== */
.sp-tplsm-display { max-width: 12.779em; }   /* era 18ch */
.sp-tplsm-hero h1.sp-tplsm-title, .sp-tplsm-hero h2.sp-tplsm-title { max-width: 10.649em; }   /* era 15ch */
.sp-tplsm-hero p.sp-tplsm-lead { max-width: 39.758em; }   /* era 56ch */
.sp-tplsm-manifesto-lead { max-width: 42.598em; }   /* era 60ch */
.sp-tplsm-stack-lead { max-width: 38.338em; }   /* era 54ch */
.sp-tplsm-bento--sphere p { max-width: 31.238em; }   /* era 44ch */
.sp-tplsm-metrics .sp-tpl-metric-value { min-width: 5.68em; }   /* era 8ch */
.sp-tplsm-cta-inner p { max-width: 34.078em; }   /* era 48ch */
.sp-tplsm-solutions-lead { max-width: 42.598em; }   /* era 60ch */
.sp-tplsm-cards-ghost .sp-tplsm-solution h3 { max-width: 12.779em; }   /* era 18ch */
.sp-tplsm-cards-ghost .sp-tplsm-solution p { max-width: 25.559em; }   /* era 36ch */
.sp-tplsm-first-title { max-width: 12.779em; }   /* era 18ch */
.sp-tplsm-first-lead { max-width: 41.178em; }   /* era 58ch */
.sp-tpl-hero p { max-width: 41.178em; }   /* era 58ch */
.sp-tpl-page-hero-teaser { max-width: 39.758em; }   /* era 56ch */
.sp-tpl-guide-body { max-width: 48.277em; }   /* era 68ch */

/* =====================================================================
 * §22 Alone della home senza tagli (pacchetto 22; Davide a ~1560: "si vede una linea"). Il radiale arrivava al bordo
 * del box dello stage con un'alfa non nulla: durante il volo lo stage si sposta e si rimpicciolisce, e il suo bordo
 * superiore diventava una linea orizzontale (a 1560 circa il 13% del picco, a 390 il 40%). Una maschera a ellisse
 * closest-side, centrata come l'alone, lo porta a zero PRIMA di ogni bordo (in alto, in basso, ai lati), in qualunque
 * posa del volo, del ritorno e dello scoppio. Vale anche per la grana del dithering.
 * ===================================================================== */
.sp-tplsm-open-stage::before,
.sp-tplsm-open-stage::after {
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% var(--sp-tplsm-halo-y, 50%), #000 35%, rgba(0, 0, 0, .6) 62%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% var(--sp-tplsm-halo-y, 50%), #000 35%, rgba(0, 0, 0, .6) 62%, transparent 100%);
}

/* 23 — i NODI del link fra le colonne (Davide): pallino + alone come quelli della spezzata, sul vertice e sugli
   attacchi. Nascono in fila lungo il link (il ritardo lo mette il JS) e sfumano col link (il gruppo prende .is-gone). */
.sp-tplsm-node-mesh-link-g { transition: opacity .6s var(--sp-ease, ease); }
.sp-tplsm-node-mesh-link-g.is-gone { opacity: 0; }
.sp-tplsm-node-mesh-link-g circle.is-link { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), opacity .3s; }
.sp-tplsm-node-mesh-link-g.is-new circle.is-link { transform: scale(0); opacity: 0; }

/* TOPBAR NEL DRAWER (pulizia della finestra dialog, 25/9/2026). Sotto i 1024 px le voci della topbar le stampa il template
   nel drawer (spheremesh2::header -> basic2::drawerUtils): la topbar si nasconde con la sola media query, senza la classe
   html.sp-tplsm-topbar-in-drawer che metteva il JS (initTopbarDrawer, tolto). */
@media (max-width: 1024px) {
  html:root { --sp-tpl-topbar-h: 0px; }
  html .sp-tpl-topbar { display: none; }
  html .sp-tpl-header { top: env(safe-area-inset-top, 0px); }
}

/* 24 — CAMPO DI MESH dietro le card delle soluzioni (/servizi): canvas del JS, a tutta larghezza, sotto spezzate e
   testo; sfuma in alto e in basso, cosi' non ha bordi e non sale sul titolo della sezione. */
.sp-tplsm-node-field {
  position: absolute; z-index: 0; pointer-events: none; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60px, #000 calc(100% - 90px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 60px, #000 calc(100% - 90px), transparent);
}

/* =====================================================================
 * §22-bis HOVER UNIFORMI DELLE CARD CLICCABILI (Davide 25/9: "cio' che sembra cliccabile deve esserlo"). UNA regola per tutte le
 * card che sono link, modello: il download di Sphere Desk. Bordo primary acceso, glow morbido (quello del download del sistema
 * riconosciuto), titolo e icona al primary, fondo invariato, nessun sollevamento, cursore a mano; il focus da tastiera come
 * l'hover, piu' l'anello. Colori e tempi dalle variabili del tema. Le V2 a nodi (lista senza box) tengono forma ed extra.
 * Le card NON cliccabili tengono le loro reazioni (Davide: "mi piace che reagiscano i non cliccabili, ma devono essere blocchi
 * DIVERSI: sara' la forma a far capire la differenza"), senza cursore a mano: la forma cambia dopo, con la pagina di esempio.
 * Specificita' (0,4,1) con :root :is(): sopra le regole per tipo del core (basic-2.0) senza regole forzate. Nessun movimento.
 * ===================================================================== */
:root {
  --sp-tplsm-hover-line: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36));
  --sp-tplsm-hover-glow: 0 0 0 1px color-mix(in srgb, var(--sp-primary, #0abab5) 22%, transparent), 0 0 26px color-mix(in srgb, var(--sp-secondary, #3ff0e8) 16%, transparent);
  --sp-tplsm-hover-ink: color-mix(in srgb, var(--sp-primary, #0abab5) 55%, var(--sp-tplsm-text, #e9eef4));
  --sp-tplsm-hover-t: var(--sp-tr, .25s);
}
:root :is(a.sp-tplsm-solution:not(.sp-tplsm-cards-nodes *), a.sp-tpl-bento-card, a.sp-tpl-info-card, a.sp-tplsm-dl-item, a.sp-tplsm-dl-note) {
  cursor: pointer;
  transition: border-color var(--sp-tplsm-hover-t), box-shadow var(--sp-tplsm-hover-t), color var(--sp-tplsm-hover-t);
}
:root :is(a.sp-tplsm-solution:not(.sp-tplsm-cards-nodes *), a.sp-tpl-bento-card, a.sp-tpl-info-card, a.sp-tplsm-dl-item, a.sp-tplsm-dl-note):is(:hover, :focus-visible) {
  border-color: var(--sp-tplsm-hover-line); box-shadow: var(--sp-tplsm-hover-glow); transform: none;
}
:root :is(a.sp-tplsm-solution:not(.sp-tplsm-cards-nodes *), a.sp-tpl-bento-card, a.sp-tpl-info-card, a.sp-tplsm-dl-item, a.sp-tplsm-dl-note):focus-visible {
  outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px;
}
:root :is(a.sp-tplsm-solution:not(.sp-tplsm-cards-nodes *), a.sp-tpl-bento-card, a.sp-tpl-info-card, a.sp-tplsm-dl-item, a.sp-tplsm-dl-note) :is(h3, h4, .sp-tplsm-dl-name) { transition: color var(--sp-tplsm-hover-t); }
:root :is(a.sp-tplsm-solution:not(.sp-tplsm-cards-nodes *), a.sp-tpl-bento-card, a.sp-tpl-info-card, a.sp-tplsm-dl-item, a.sp-tplsm-dl-note):is(:hover, :focus-visible) :is(h3, h4, .sp-tplsm-dl-name) { color: var(--sp-tplsm-hover-ink); }
:root :is(a.sp-tplsm-solution:not(.sp-tplsm-cards-nodes *), a.sp-tpl-bento-card, a.sp-tpl-info-card, a.sp-tplsm-dl-item, a.sp-tplsm-dl-note):is(:hover, :focus-visible) :is(.sp-tplsm-solution-ico, .sp-tpl-ico, .sp-tpl-info-card-icon, .sp-tplsm-solution-go, .sp-tplsm-dl-go) { color: var(--sp-primary, #0abab5); }
/* il core (basic-2.0) schiarisce il fondo della card contatti in hover: il fondo resta quello a riposo */
:root a.sp-tpl-info-card:is(:hover, :focus-visible) { background: var(--sp-tplsm-surface, #0d1421); }

/* =====================================================================
 * FOOTER A COLONNE (Davide 25/9, "proviamo!"). Sopra i 900 px, a destra del blocco brand, le colonne di link che la classe
 * del sito aggiunge dai launcher dell'ancora "Menu 2.0" (Soluzioni, Azienda, Supporto): le stampa basic2::footerMenu come
 * .sp-tpl-footer-col senza modificatore. Titoli piccoli in maiuscoletto (la spaziatura delle etichette del sito), link a 300
 * nel testo attenuato, hover teal (sono link: il colore della regola comune, niente sollevamento), focus da tastiera.
 * Nella riga dei link legali, a sinistra, la firma: una voce senza pagina, segnata dal dato (data-firma; fino al 28/9 data-alt, col testo dell'hover)
 * TUTTO sopra i 900 px: sotto, colonne e firma non si vedono e il footer del telefono resta identico a oggi (il core da'
 * al footer la colonna sotto i 1024 px: fra 900 e 1024 qui torna in riga).
 * ===================================================================== */
@media (min-width: 900px) {
  .sp-tpl-footer-top { flex-direction: row; align-items: flex-start; column-gap: clamp(40px, 5vw, 80px); }
  .sp-tpl-footer-top > .sp-tpl-footer-col--brand { margin-inline-end: auto; }   /* le colonne di link si raccolgono a destra */
  .sp-tpl-footer-top > .sp-tpl-footer-col:not(.sp-tpl-footer-col--brand) { min-width: 0; gap: 16px; }
  .sp-tpl-footer-top > .sp-tpl-footer-col:not(.sp-tpl-footer-col--brand) .sp-tpl-footer-title {
    font-size: .72rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-tplsm-muted, #8493a6);
  }
  .sp-tpl-footer-top > .sp-tpl-footer-col:not(.sp-tpl-footer-col--brand) .sp-tpl-footer-items { gap: 10px; }
  .sp-tpl-footer-top > .sp-tpl-footer-col:not(.sp-tpl-footer-col--brand) .sp-tpl-footer-item {
    font-size: .9rem; font-weight: 300; color: var(--sp-tplsm-text-2, #b6bdc7); text-decoration: none; width: fit-content;
    transition: color var(--sp-tplsm-hover-t, var(--sp-tr, .25s));
  }
  .sp-tpl-footer-top > .sp-tpl-footer-col:not(.sp-tpl-footer-col--brand) a.sp-tpl-footer-item:is(:hover, :focus-visible) {
    color: var(--sp-tplsm-hover-ink, color-mix(in srgb, var(--sp-primary, #0abab5) 55%, var(--sp-tplsm-text, #e9eef4)));
  }
  .sp-tpl-footer-top > .sp-tpl-footer-col:not(.sp-tpl-footer-col--brand) a.sp-tpl-footer-item:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; border-radius: 3px; }
  /* la firma: la riga legale si allarga, la firma a sinistra, i link a destra. 28/9 sera (Davide): niente piu' testo in hover; il
   * segno della firma e' data-firma (dal dato della voce 607), non piu' data-alt */
  .sp-tpl-footer-legal:has(> [data-firma]) { flex: 1 1 auto; }
  .sp-tpl-footer-bottom:has(.sp-tpl-footer-legal > [data-firma]) > .sp-tpl-footer-copyright:empty { display: none; }   /* il copyright vuoto (niente ©) prendeva il gap: la firma si allinea al blocco brand */
  .sp-tpl-footer-legal > .sp-tpl-footer-legal-link[data-firma] { margin-inline-end: auto; color: var(--sp-tplsm-muted, #8493a6); cursor: default; }
  .sp-tpl-footer-legal > .sp-tpl-footer-legal-link[data-firma]:hover { color: var(--sp-tplsm-muted, #8493a6); }
}
@media (max-width: 899px) {
  .sp-tpl-footer-top > .sp-tpl-footer-col:not(.sp-tpl-footer-col--brand),
  .sp-tpl-footer-legal > .sp-tpl-footer-legal-link[data-firma] { display: none; }
}

/* =====================================================================
 * CARD AZIONE DEI CONTATTI (Davide 25/9). Email, Sede e Assistenza sono cliccabili ma non portano a pagine: sono AZIONI e
 * prendono la forma del download di Sphere Desk (regole condivise sopra: layout, icona fantasma a destra, hover dell'icona).
 * Qui solo cio' che la card contatti ha in piu': l'indicazione dell'azione, DAL DATO della voce (data.link["data-action"] →
 * attributo data-action sul link). Sta a SINISTRA, sotto il valore, piccola e allineata al testo, come la seconda riga del
 * download ("Windows 64 bit · versione 1.1"): l'icona fantasma resta pulita (Davide: "eviterei la scrittina sull'icona ghost").
 * ===================================================================== */
.sp-tpl-contact-info > a.sp-tpl-info-card { flex-wrap: wrap; align-content: center; row-gap: 6px; }
.sp-tpl-contact-info > a.sp-tpl-info-card .sp-tpl-info-card-body { flex: 1 1 100%; margin-inline-end: 76px; }   /* come il testo del download: si ferma prima dell'icona fantasma (anche l'indirizzo, a telefono) */
.sp-tpl-contact-info > a.sp-tpl-info-card[data-action]::after {
  content: attr(data-action); flex: 0 0 auto; margin-inline-end: 76px;   /* come il testo del download: si ferma prima dell'icona fantasma */
  color: var(--sp-tplsm-muted, #8493a6); font-size: .88rem; line-height: 1.4; transition: color var(--sp-tplsm-hover-t, var(--sp-tr, .25s));
}
.sp-tpl-contact-info > a.sp-tpl-info-card[data-action]:is(:hover, :focus-visible)::after { color: var(--sp-primary, #0abab5); }
/* la regola comune dei cliccabili colora l'icona al primary: qui l'icona e' il fantasma a contorno (come nel download) */
:root .sp-tpl-contact-info > a.sp-tpl-info-card:is(:hover, :focus-visible) .sp-tpl-info-card-icon { color: transparent; }
/* sotto i 1024 px le card non stanno accanto alla mappa: prendono l'altezza del loro contenuto. Col flex: 1 1 0 del §14d la
   colonna senza altezza fissa le schiacciava, e l'overflow nascosto (serve all'icona fantasma) tagliava il testo */
@media (max-width: 1024px) { .sp-tpl-contact-info > a.sp-tpl-info-card { flex: 0 0 auto; } }
/* telefono: icona fantasma piu' piccola e spazio riservato in proporzione, cosi' l'email resta su una riga senza passarle sopra */
@media (max-width: 600px) {
  .sp-tpl-contact-info > a.sp-tpl-info-card .sp-tpl-info-card-icon { font-size: 3.6rem; right: -10px; }
  .sp-tpl-contact-info > a.sp-tpl-info-card .sp-tpl-info-card-body,
  .sp-tpl-contact-info > a.sp-tpl-info-card[data-action]::after { margin-inline-end: 44px; }
}

/* =====================================================================
 * §HERO-FATTI (26/9, Davide: variante b): la riga dei fatti sotto il titolo della home (voci del launcher dell'hero con
 * classe sp-tplsm-hero-fact, stampate da spheremesh2::heroOpen). Testo coi puntini teal come separatori; sotto i 600 px
 * una colonna col puntino davanti a ogni fatto (andando a capo il separatore finirebbe a inizio riga).
 * ===================================================================== */
/* (pacchetto 81) solo la LISTA ul: .sp-tplsm-facts e' anche la sezione dei numeri del 72, che prendeva margini, padding e flex di qui */
ul.sp-tplsm-facts { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 4px; font-size: 1.02rem; letter-spacing: .01em; color: var(--sp-tplsm-text, #e9eef4); }
ul.sp-tplsm-facts li + li::before { content: "·"; margin: 0 .55em; color: var(--sp-primary, #0abab5); font-weight: 700; }
@media (max-width: 599px) {
  ul.sp-tplsm-facts { flex-direction: column; row-gap: 6px; }
  ul.sp-tplsm-facts li::before, ul.sp-tplsm-facts li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sp-primary, #0abab5); margin: 0 10px 0 0; vertical-align: 3px; font-weight: 400; }
}
/* 28/9 (testi di Davide): un fatto solo e' una frase, non una lista. Il template (heroOpen) la stampa come <p class=
 * "sp-tplsm-facts-lead"> invece di ul/li: stesso aspetto della riga dei fatti (margine, corpo, spaziatura, colore), larga
 * quanto la didascalia sotto (41.178em a 1.1rem = 44.4em a 1.02rem, ~725 px), interlinea da testo, niente puntino.
 * Con 2+ fatti resta la lista, invariata. */
.sp-tplsm-facts-lead { margin: 20px 0 0; font-size: 1.02rem; letter-spacing: .01em; line-height: 1.55; max-width: 44.4em; color: var(--sp-tplsm-text, #e9eef4); }

/* =====================================================================
 * §SFERA-TESTO: /sfera, il BLOCCO DI TESTO fra la testata e le card (28/9, Davide): titolo e lead del launcher dell'anatomia (dato, stampati da
 * solutionsSection come h2.sp-tplsm-display + .sp-tplsm-solutions-lead). Su desktop grande e largo, con aria sopra e sotto:
 * occupa buona parte dello schermo e porta le card sotto la piega, cosi' ogni finestra nasce quando la sua card entra. Sul
 * telefono piu' basso, come l'intestazione di una sezione. Nel CSS del sito (in testa alla pagina) e non in quello del blocco
 * (pigro): cosi' la griglia non salta giu' quando il blocco arriva.
 * ===================================================================== */
.sp-tplsm-sfera-frammenti > .sp-tpl-container > .sp-tplsm-display { margin: 0; letter-spacing: -.01em; }
.sp-tplsm-sfera-frammenti > .sp-tpl-container > .sp-tplsm-solutions-lead { margin: 18px 0 30px; font-size: 1.05rem; line-height: 1.6; }
@media (min-width: 900px) {
  .sp-tplsm-sfera-frammenti > .sp-tpl-container > .sp-tplsm-display { padding-top: 6vh; max-width: 18ch; font-size: clamp(2.6rem, 3.6vw, 4.6rem); line-height: 1.08; }
  .sp-tplsm-sfera-frammenti > .sp-tpl-container > .sp-tplsm-solutions-lead { max-width: min(100%, 62rem); margin: 3.2vh 0 0; padding-bottom: 26vh; font-size: clamp(1.3rem, 1.55vw, 1.95rem); line-height: 1.5; }
}

/* =====================================================================
 * §BANNER Il messaggio a comparsa del core (sphere.banner: "Nome utente non valido" sul login e ogni altro banner) — Davide
 * 28/9: riquadro bianco con testo quasi bianco, illeggibile. Il blocco "BANNER TOAST" di sp-site-template-basic-2.0.css ha lo
 * sfondo fisso #ffffff e il testo da --sp-tpl-ink-0, che nel tema scuro e' chiaro (contrasto 1,17). Qui solo lo sfondo, dalla
 * superficie rialzata del tema; testo, bordo, ombra e bordo di stato (teal / rosso / verde) restano quelli del core, che li
 * prende gia' dai token del tema. Stessi selettori del core: questo foglio viene dopo basic-2.0, niente !important.
 * ===================================================================== */
.sp-banner.sp-banner--primary,
.sp-banner.sp-banner--alert,
.sp-banner.sp-banner--success,
.sp-banner { background: var(--sp-tplsm-surface-2, #121a27); }

/* =====================================================================
 * §TOPBAR-TRANSITION (28/9, Davide: "bello, ma scatticchia"): le voci della topbar al passaggio del mouse cambiano colore e
 * si ingrandiscono (.sp-scale del layout), ma .sp-tpl-topbar a (CSS critico e basic 2.0, piu' specifico) teneva la sola
 * transition dell'opacita': colore e scala andavano di scatto. Qui colore, trasformazione e opacita', anche dell'icona, con
 * durata e curva del tema, in entrata e in uscita. Il bottone "Parliamone" del menu (sfondo e sollevamento di 1 px) aveva
 * lo stesso scatto: stessa cura. Le voci del menu hanno gia' color .2s: invariate. Movimento ridotto: solo il colore.
 * ===================================================================== */
.sp-tpl-topbar a {
  transition: color var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1)), transform var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1)), opacity var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1));
}
.sp-tpl-topbar a i, .sp-tpl-topbar a svg {
  transition: color var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1)), opacity var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1));
}
.sp-tpl-nav a.sp-tplsm-nav-cta {
  transition: color var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1)), background-color var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1)), transform var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1)), box-shadow var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1));
}
@media (prefers-reduced-motion: reduce) {
  .sp-tpl-topbar a, .sp-tpl-nav a.sp-tplsm-nav-cta { transition: color var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1)), background-color var(--sp-tr, .25s) var(--sp-ease, cubic-bezier(.2,.7,.2,1)); }
  .sp-tpl-topbar a:hover, .sp-tpl-nav a.sp-tplsm-nav-cta:hover, .sp-tpl-nav a.sp-tplsm-nav-cta:focus-visible { transform: none; }
}

/* =====================================================================
 * §HERO-CENTRATA (28/9, Davide: prova centrata): titolo, frase, didascalia e bottoni della prima sezione della home centrati;
 * frase e didascalia a 48ch (~45-50 caratteri per riga), il titolo resta a 2 righe (larghezza di sempre, solo centrato).
 * Variante a: centrata da 900 px in su, sul telefono resta a sinistra.
 * ===================================================================== */
@media (min-width: 900px) {
  .sp-tplsm-first .sp-tpl-container { text-align: center; }
  .sp-tplsm-first-title { margin-inline: auto; max-width: none; }   /* titolo su una riga */
  .sp-tplsm-facts-lead, .sp-tplsm-first-lead { margin-inline: auto; max-width: 72ch; }   /* 28/9 sera: piu' spazio al testo (era 48ch) */
  .sp-tplsm-facts-lead { margin-top: 24px; }
  .sp-tplsm-first-lead { margin-top: 26px; }
  ul.sp-tplsm-facts { justify-content: center; }
  .sp-tplsm-first .sp-tpl-hero-actions { justify-content: center; margin-top: 38px; }
}

/* =====================================================================
 * §MANIFESTO-ACAPO (28/9, Davide): il testo della testata del manifesto della HOME va a capo dove il dato ha l'a capo ("\n"
 * fra le due frasi), senza <br> nel dato e senza toccare il template (manifestoSection lo stampa com'e'). Solo questa testata:
 * #sp-tplsm-first c'e' solo sulla home, e il manifesto della home e' un suo fratello; gli altri manifesti (Stampa 3D, Nautica,
 * Chi siamo) non sono toccati. pre-line: l'a capo del dato vale, gli spazi restano compressi come prima.
 * ===================================================================== */
#sp-tplsm-first ~ .sp-tplsm-manifesto .sp-tplsm-manifesto-lead { white-space: pre-line; }

/* =====================================================================
 * BREADCRUMB A NODI (pacchetto 77-B, Davide 29/9; dall'84 in coda alla testata, sotto occhiello, titolo e sottotitolo). Il percorso
 * gerarchico: ogni livello e' un nodo della mesh, la linea lo lega al successivo; quelli prima sono link, il corrente e' acceso.
 * Centrato come la testata. Sotto i 600 px solo gli ultimi due nodi (la linea parte dal primo visibile). Nessuna animazione.
 * ===================================================================== */
/* (84) sotto il blocco introduttivo: lo spazio sta sopra (dal sottotitolo), non sotto */
.sp-tplsm-crumbs { margin: clamp(22px, 3vw, 36px) 0 0; }
/* (93, Davide 29/9) il breadcrumb scende verso il fondo della testata, staccato dal blocco testuale: lo spazio passa dal padding
   sotto la testata al margine sopra il breadcrumb, quindi la testata resta alta uguale e il testo non si muove. Solo le testate
   col breadcrumb. Desktop: 40 px dal fondo (era 70; 28 col 93, 40 dal 96, "un pizzico piu' in alto"); sotto i 900 px 20 px (era 24; 16 col 93) */
.sp-tpl-page-hero:has(.sp-tplsm-crumbs) { padding-bottom: 40px; }
.sp-tpl-page-hero .sp-tplsm-crumbs { margin-top: calc(clamp(22px, 3vw, 36px) + 30px); }
@media (max-width: 899px) {
  .sp-tpl-page-hero:has(.sp-tplsm-crumbs) { padding-bottom: 20px; }
  .sp-tpl-page-hero .sp-tplsm-crumbs { margin-top: calc(clamp(22px, 3vw, 36px) + 4px); }
}
.sp-tplsm-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 6px; font-size: .86rem; letter-spacing: .02em; }
.sp-tplsm-crumbs li { display: flex; align-items: center; min-width: 0; }
.sp-tplsm-crumbs li + li::before {
  content: ""; flex: none; width: clamp(18px, 2.6vw, 34px); height: 1.2px; margin-inline: 8px;
  background: color-mix(in srgb, var(--sp-primary, #0abab5) 45%, transparent);
}
.sp-tplsm-crumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding-block: 4px; color: var(--sp-tplsm-muted, #8493a6); text-decoration: none; transition: color var(--sp-tr, .25s); }
.sp-tplsm-crumb::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--sp-primary, #0abab5) 60%, transparent); background: var(--sp-background, #070b12);
}
a.sp-tplsm-crumb:hover { color: var(--sp-tplsm-text-2, #b6bdc7); }
a.sp-tplsm-crumb:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; border-radius: 4px; }
.sp-tplsm-crumbs .is-current .sp-tplsm-crumb { color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-crumbs .is-current .sp-tplsm-crumb::before { background: var(--sp-primary, #0abab5); border-color: var(--sp-primary, #0abab5); box-shadow: 0 0 10px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32)); }
/* (87, per il breadcrumb ad archi di dev0) con .has-arcs gli archi prendono il posto di linee e nodi disegnati dal CSS: trasparenti.
   Specificita' sopra .sp-tplsm-crumbs .is-current .sp-tplsm-crumb::before (0,3,1), senza forzature. Senza .has-arcs non cambia niente */
.sp-tplsm-crumbs.has-arcs li + li::before { background: transparent; }
/* (dev0 30/9, Davide: "centrato tipo albero di natale") con .has-arcs il trattino fra i crumb non serve piu' (lo disegnano gli archi):
   lo spazio passa dal ::before del crumb dopo al column-gap della lista, uguale (trattino + 2 x 8 px), cosi' su una riga non cambia
   niente e quando va a capo nessuna riga si porta dietro lo spazio del trattino: ogni riga e' centrata, la targhetta in fondo */
.sp-tplsm-crumbs.has-arcs ol { column-gap: calc(clamp(18px, 2.6vw, 34px) + 16px); row-gap: 12px; }
.sp-tplsm-crumbs.has-arcs li + li::before { content: none; }
.sp-tplsm-crumbs.has-arcs li .sp-tplsm-crumb::before { background: transparent; border-color: transparent; box-shadow: none; }
/* (98, proposta di dev0 43688122) con .has-arcs il crumb corrente e' una targhetta come quelle della sfera dell'hero (pallino = nodo):
   stessi token di .sp-sphere-label, ma nel flusso. Specificita' (0,4,1) e (0,4,2), sopra le due regole qui sopra, senza forzature.
   Il blocco degli archi trova il pallino dal ::before e dal padding. Senza .has-arcs non cambia niente */
.sp-tplsm-crumbs.has-arcs li.is-current .sp-tplsm-crumb {
  --sp-label-slot: 12px;
  gap: 0; padding: 4px 11px 4px 5px; border-radius: 999px;
  font-weight: 500; color: var(--sp-tplsm-text, #e9eef4);
  background: var(--sp-tplsm-glass, rgba(7, 11, 18, .74));
  border: 1px solid var(--sp-tplsm-a-line, rgba(212, 163, 90, .4));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sp-tplsm-crumbs.has-arcs li.is-current .sp-tplsm-crumb::before {
  width: var(--sp-label-slot); height: var(--sp-label-slot); margin-inline-end: 7px; border: 0; box-shadow: none;
  background: var(--sp-sphere-hub, var(--sp-tertiary, #d4a35a));
  transform: scale(var(--sp-label-node-k, .5));
}
@media (max-width: 599px) {
  .sp-tplsm-crumbs li:nth-last-child(n + 3) { display: none; }
  .sp-tplsm-crumbs li:nth-last-child(2)::before { content: none; }
}
/* ---------- (90-B2) biblioteca delle FAQ di /supporto: lo stile di base, anche senza JS (il blocco degli effetti aggiunge solo il
   movimento). Stesso linguaggio della chat di /sfera: pannello scuro, bolle, pills; campo del core (data-search) come barra in basso */
/* (dev0 1/10, Davide) LA CHAT DELLE FAQ SULLA TARGHETTA. Dietro, la mesh del core (canvas data-sp-mesh, classe sp-tplsm-faq-field)
   a tutta sezione, sotto il contenitore. La finestra e' la targhetta della CTA (sp-tplsm-cta-card, edge-nodes, la sfera a nodi) senza
   la sua impaginazione centrata; i tre pezzi del pannello (log, domande collegate, campo) senza fondi e bordi propri: il vetro e' la
   card. La sfera della chat (sp-tplsm-sphere--library) e' grande quanto la card su telefono; da 900 px sta a destra, dove entrano le
   domande (variante B). Solo decorazione: aria-hidden, nessun clic */
.sp-tplsm-faq-library { position: relative; }
.sp-tplsm-faq-library > .sp-tpl-container { position: relative; z-index: 1; }
.sp-tplsm-faq-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.sp-tplsm-cta-card.sp-tplsm-library-panel { display: block; padding: 0; text-align: left; }
.sp-tplsm-cta-card.sp-tplsm-library-panel::after { opacity: .55; }   /* la vignetta della CTA piu' leggera: l'onda corre anche verso il bordo */
.sp-tplsm-library-panel .sp-tplsm-sphere--library { width: min(1000px, 130%); opacity: .62; }
@media (min-width: 900px) {
  .sp-tplsm-library-panel .sp-tplsm-sphere--library { left: 74%; width: 560px; opacity: .7; }
}
.sp-tplsm-library-panel .sp-tplsm-library-log { border: 0; border-radius: 0; background: none; }
.sp-tplsm-library-panel .sp-tplsm-library-pills, .sp-tplsm-library-panel .sp-tplsm-library-pager { border-inline: 0; background: none; }
.sp-tplsm-faq-library .sp-tplsm-library-panel .sp-tplsm-library-search { border: 0; border-top: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06)); border-radius: 0; background: rgba(7, 11, 18, .35); }
/* la cronologia (blocco della chat): gli scambi prima, compatti, sopra quello corrente; con la cronologia la chat scorre dentro il log.
   "Ricomincia" (launcher item del dato) si vede solo quando c'e' cronologia */
.sp-tplsm-library-past { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06)); }
.sp-tplsm-library-past-q { align-self: flex-end; max-width: min(520px, 80%); font-size: .9rem; line-height: 1.45; padding: 6px 12px; border-radius: 14px 14px 4px 14px; border: 1px solid color-mix(in srgb, var(--sp-primary, #0abab5) 22%, transparent); background: color-mix(in srgb, var(--sp-primary, #0abab5) 7%, transparent); color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tplsm-library-past-q p { margin: 0; }
.sp-tplsm-library-past-a { align-self: flex-start; position: relative; max-width: min(640px, 88%); padding-left: 22px; font-size: .9rem; line-height: 1.45; color: var(--sp-tplsm-muted, #8493a6); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-tplsm-library-past-a::before { content: ""; position: absolute; left: 2px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-primary, #0abab5); opacity: .55; }
.sp-tplsm-library-past-a:hover, .sp-tplsm-library-past-a:focus-visible { color: var(--sp-tplsm-hover-ink, #6fd6d2); }
.sp-tplsm-library-past-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 22px; }
.sp-tplsm-library-past-pill { font-size: .8rem; line-height: 1.3; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); color: var(--sp-tplsm-text-2, #b6bdc7); text-decoration: none; }
.sp-tplsm-library-past-pill:hover, .sp-tplsm-library-past-pill:focus-visible { border-color: var(--sp-tplsm-hover-line, rgba(10, 186, 181, .36)); color: var(--sp-tplsm-hover-ink, #6fd6d2); }
.sp-tplsm-faq-library.has-past .sp-tplsm-library-log { max-height: min(62vh, 560px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sp-primary, #0abab5) 35%, transparent) transparent; }
.sp-tplsm-library-restart { display: none; }
.sp-tplsm-faq-library.has-past .sp-tplsm-library-restart { display: block; width: fit-content; margin: 0 clamp(16px, 2.6vw, 22px) 10px auto; font-size: .82rem; color: var(--sp-tplsm-muted, #8493a6); text-decoration: underline dotted; text-underline-offset: 3px; }
.sp-tplsm-faq-library.has-past .sp-tplsm-library-restart:hover, .sp-tplsm-faq-library.has-past .sp-tplsm-library-restart:focus-visible { color: var(--sp-tplsm-hover-ink, #6fd6d2); }
.sp-tplsm-faq-library .sp-tpl-content { max-width: 920px; margin-inline: auto; text-align: left; padding: 0 var(--sp-unit-l, 24px); background: none; }   /* sp-tpl-content (ancora dello scroll della ruota di jSite) in basic-2.0 ha padding 90px 0 e fondo bianco: qui il container resta un container */
.sp-tplsm-library-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(16px, 2.6vw, 24px); }
.sp-tplsm-library-cat, .sp-tplsm-library-pill, .sp-tplsm-library-pager a {
  display: inline-flex; align-items: center; font-size: .92rem; line-height: 1.35; color: var(--sp-tplsm-text, #e9eef4); text-decoration: none;
  background: rgba(233, 238, 244, .04); border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); border-radius: 999px; padding: 8px 14px;
  transition: border-color var(--sp-tplsm-hover-t, .25s), box-shadow var(--sp-tplsm-hover-t, .25s), color var(--sp-tplsm-hover-t, .25s);
}
.sp-tplsm-library-cat:hover, .sp-tplsm-library-cat:focus-visible, .sp-tplsm-library-pill:hover, .sp-tplsm-library-pill:focus-visible,
.sp-tplsm-library-pager a:hover, .sp-tplsm-library-pager a:focus-visible {
  border-color: var(--sp-tplsm-hover-line, rgba(10, 186, 181, .36)); box-shadow: var(--sp-tplsm-hover-glow, 0 0 26px rgba(63, 240, 232, .16));
  color: var(--sp-tplsm-hover-ink, #6fd6d2); outline: none;
}
.sp-tplsm-library-cat:focus-visible, .sp-tplsm-library-pill:focus-visible, .sp-tplsm-library-pager a:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
.sp-tplsm-library-cat.is-active { border-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); background: var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13)); color: var(--sp-secondary, #3ff0e8); }
.sp-tplsm-library-log {
  display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 3vw, 26px) clamp(16px, 2.6vw, 22px);
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); border-bottom: 0; border-radius: var(--sp-tplsm-radius-xl, 24px) var(--sp-tplsm-radius-xl, 24px) 0 0;
  background: radial-gradient(ellipse 80% 60% at 85% 0%, var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13)), transparent 60%), linear-gradient(180deg, var(--sp-tplsm-surface-2, #19202b), var(--sp-tplsm-surface, #0d1421));
}
.sp-tplsm-library-msg { max-width: min(640px, 88%); font-size: 1rem; line-height: 1.6; }
.sp-tplsm-library-msg p { margin: 0; }
.sp-tplsm-library-msg.is-me {
  align-self: flex-end; background: var(--sp-tplsm-p-dim, rgba(10, 186, 181, .13)); border: 1px solid var(--sp-tplsm-p-line, rgba(10, 186, 181, .36));
  border-radius: 18px 18px 4px 18px; padding: 10px 16px;
}
.sp-tplsm-library-msg.is-sfera { align-self: flex-start; position: relative; padding-left: 22px; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-library-msg.is-sfera::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sp-primary, #0abab5); box-shadow: 0 0 10px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32));
}
.sp-tplsm-library-msg a { color: var(--sp-secondary, #3ff0e8); }
.sp-tplsm-library-link { align-self: flex-start; margin-left: 22px; font-size: .86rem; color: var(--sp-tplsm-muted, #8493a6); text-decoration: underline dotted; text-underline-offset: 3px; }
.sp-tplsm-library-link:hover, .sp-tplsm-library-link:focus-visible { color: var(--sp-tplsm-hover-ink, #6fd6d2); }
.sp-tplsm-library-link.is-copied { color: var(--sp-secondary, #3ff0e8); text-decoration: none; }
.sp-tplsm-library-pills, .sp-tplsm-library-pager {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 clamp(16px, 2.6vw, 22px) 16px 38px;
  border-inline: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); background: var(--sp-tplsm-surface, #0d1421);
}
.sp-tplsm-library-pager { justify-content: space-between; padding-left: clamp(16px, 2.6vw, 22px); }
.sp-tplsm-faq-library .sp-tplsm-library-search {
  max-width: none; min-width: 0; padding: 12px 14px; border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  border-top-color: var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06)); border-radius: 0 0 var(--sp-tplsm-radius-xl, 24px) var(--sp-tplsm-radius-xl, 24px); background: rgba(7, 11, 18, .5);
}
.sp-tplsm-faq-library .sp-tplsm-library-search input { padding: 13px 48px 13px 16px; border-radius: 14px; font-size: 1rem; }
.sp-tplsm-faq-library .sp-tplsm-library-search .sp-tpl-news-search-clear { right: 26px; }
/* (dev0 1/10) il campo del core ha gia' la sua x (sp-tpl-news-search-clear): niente x nativa del type=search, che faceva due x */
.sp-tpl-news-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
@media (max-width: 599px) {
  .sp-tplsm-library-msg { max-width: 94%; }
  .sp-tplsm-library-pills { padding-left: clamp(16px, 2.6vw, 22px); }
}

/* §148 (Davide 30/9) card V1 "icona fantasma": il testo sta in mezzo alla card, con la stessa aria sopra e sotto, anche quando
 * le card di una fila sono alte uguali. La riga di testa ha solo l'icona e il numero, tutti e due fuori dal flusso: esce dal
 * flusso anche lei, cosi' il gap non aggiunge aria sopra il titolo. */
.sp-tplsm-cards-ghost .sp-tplsm-solution { justify-content: center; padding-block: 32px; }
.sp-tplsm-cards-ghost .sp-tplsm-solution .sp-tplsm-solution-top { display: contents; }

/* =====================================================================
 * §151 Download per sistema (spheremesh2::downloadCards, pagina Sphere Desk): una card per sistema, righe per variante, due bottoni
 * per riga (con il tuo ok = principale, non presidiata = secondario; senza file: etichetta spenta), "Quale mi serve?" in fondo.
 * Il JS mette in testa la card del sistema (.is-mine, a tutta riga) sotto l'etichetta .is-mine; le altre dopo .is-others.
 * ===================================================================== */
.sp-tplsm-download .sp-tplsm-display + .sp-tplsm-dl-sys,
.sp-tplsm-download .sp-tplsm-solutions-lead + .sp-tplsm-dl-sys { margin-top: clamp(32px, 4vw, 52px); }
.sp-tplsm-dl-sys { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (min-width: 880px) {
  .sp-tplsm-dl-sys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-tplsm-dl-sys[data-sp-os] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-tplsm-dl-sys > .sp-tplsm-dl-label, .sp-tplsm-dl-sys > .sp-tplsm-dl-card.is-mine { grid-column: 1 / -1; }
}
.sp-tplsm-dl-label { margin: 10px 0 -4px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-dl-label.is-mine { margin-top: 0; color: var(--sp-primary, #0abab5); }
.sp-tplsm-dl-card {
  display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--sp-tplsm-radius, 16px); border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  background: linear-gradient(180deg, var(--sp-tplsm-surface-2, #19202b), var(--sp-tplsm-surface, #0d1421));
}
.sp-tplsm-dl-card.is-mine { border-color: color-mix(in srgb, var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)) 55%, var(--sp-tplsm-line, rgba(233, 238, 244, .11))); }
/* (222) la casella di /contatti scelta dall'hash (#assistenza): lo stesso bordo della card del sistema e un solo glow all'arrivo;
   col movimento ridotto resta il bordo, senza animazione */
.sp-tpl-contact-info > .sp-tpl-info-card.is-mine { border-color: color-mix(in srgb, var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)) 55%, var(--sp-tplsm-line, rgba(233, 238, 244, .11))); }
.sp-js-motion .sp-tpl-contact-info > .sp-tpl-info-card.is-mine { animation: sp-tplsm-contact-glow 1.6s ease-out 1; }
@keyframes sp-tplsm-contact-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  35%      { box-shadow: 0 0 28px var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32)); }
}
@media (prefers-reduced-motion: reduce) { .sp-tpl-contact-info > .sp-tpl-info-card.is-mine { animation: none; } }
/* (222-D) le etichette delle caselle di /contatti sono domande ("Hai un'idea?"): senza maiuscolo, che viene da basic-2.0 (:872, :2471).
   Solo qui (0,2,1 contro 0,1,1); l'occhiello della testata (.sp-tpl-eyebrow) resta in maiuscolo */
.sp-tpl-contact-info .sp-tpl-info-card-body h4 { text-transform: none; letter-spacing: normal; }
/* (235-1, dev0 2/10) /contatti: le etichette delle caselle (domande, senza maiuscolo dalla 222-D) alla taglia del testo della casella
   (.96rem, il valore sotto: basic-2.0 :2481) e nel grigio secondario dello skin. Erano .78rem nel grigio spento */
.sp-tpl-contact-info .sp-tpl-info-card-body h4 { font-size: .96rem; color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tplsm-dl-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; }
.sp-tplsm-dl-card-name { margin: 0; font-size: 1.25rem; font-weight: 400; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-dl-card-desc { grid-column: 2; margin: 0; color: var(--sp-tplsm-muted, #8493a6); font-size: .9rem; line-height: 1.45; }
.sp-tplsm-dl-var { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06)); }
.sp-tplsm-dl-var-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-tplsm-dl-var-name { font-size: 1rem; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-dl-var-desc { font-size: .86rem; line-height: 1.45; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-dl-var.is-mine .sp-tplsm-dl-var-name { color: var(--sp-primary, #0abab5); }
.sp-tplsm-dl-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-tplsm-dl-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1 1 190px; min-width: 0; min-height: 52px; padding: 10px 16px;
  border-radius: 12px; border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); color: var(--sp-tplsm-text, #e9eef4); text-decoration: none;
  transition: border-color var(--sp-tr, .25s), background var(--sp-tr, .25s), filter var(--sp-tr, .25s);
}
.sp-tplsm-dl-btn-name { font-size: .95rem; line-height: 1.3; }
.sp-tplsm-dl-btn-info { font-size: .78rem; line-height: 1.3; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-dl-btn.is-presidiato { background: var(--sp-primary, #0abab5); border-color: transparent; color: var(--sp-contrast-dark, #0d1421); }
.sp-tplsm-dl-btn.is-presidiato .sp-tplsm-dl-btn-info { color: color-mix(in srgb, var(--sp-contrast-dark, #0d1421) 72%, transparent); }
a.sp-tplsm-dl-btn.is-presidiato:is(:hover, :focus-visible) { filter: brightness(1.08); }
.sp-tplsm-dl-btn.is-nonpresidiato { background: transparent; }
a.sp-tplsm-dl-btn.is-nonpresidiato:is(:hover, :focus-visible) { border-color: var(--sp-tplsm-hover-line, rgba(10, 186, 181, .5)); }
a.sp-tplsm-dl-btn:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
.sp-tplsm-dl-btn.is-soon { border-style: dashed; opacity: .6; cursor: default; }
.sp-tplsm-dl-card .sp-tplsm-dl-note { padding: 14px 16px; }
.sp-tplsm-dl-help { margin-top: auto; padding-top: 4px; font-size: .86rem; }
.sp-tplsm-dl-help summary { width: fit-content; cursor: pointer; list-style: none; color: var(--sp-tplsm-muted, #8493a6); text-decoration: underline dotted; text-underline-offset: 3px; }
.sp-tplsm-dl-help summary::-webkit-details-marker { display: none; }
.sp-tplsm-dl-help summary:is(:hover, :focus-visible) { color: var(--sp-tplsm-hover-ink, #6fd6d2); }
.sp-tplsm-dl-help dl { margin: 10px 0 0; }
.sp-tplsm-dl-help dt { color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-dl-help dd { margin: 2px 0 10px; color: var(--sp-tplsm-muted, #8493a6); line-height: 1.5; }
/* (dev0 30/9, Davide) DETTAGLI MORBIDI: i <details> con sp-tplsm-details-fx si aprono e si chiudono in altezza (il blocco crumbs-archi,
   WAAPI) e qui gli effetti, della famiglia dei link a nodo: aprendo, un NODO teal disegna la linea sotto la domanda (a riposo la
   sottolineatura puntinata di prima), la freccia sottile gira, il contenuto sale di poco e si accende; chiudendo la linea torna
   indietro. Solo proprieta' normali (width, opacity, transform: niente @property animate su link). Movimento ridotto: tutto fermo,
   si apre di scatto come prima */
/* (192, Davide 1/10) chiuso: niente sottolineatura, solo testo e freccia in Tiffany (contrasto AA sul fondo delle card); a hover e
   focus un filo piu' chiaro; aperto uguale, piu' il nodo che disegna la linea. Focus da tastiera: l'anello sottile d'oro delle
   targhette, senza l'alone teal della piattaforma (box-shadow di :focus-visible) */
.sp-tplsm-details-fx > summary { position: relative; display: flex; align-items: center; gap: .45em; padding-bottom: 4px; text-decoration: none; color: var(--sp-primary, #0abab5); transition: color var(--sp-tr, .25s); }
.sp-tplsm-details-fx[open] > summary { color: var(--sp-primary, #0abab5); }
.sp-tplsm-details-fx > summary:is(:hover, :focus-visible) { color: var(--sp-tplsm-hover-ink, #6fd6d2); }
.sp-tplsm-details-fx > summary:focus-visible { outline: 1px solid color-mix(in srgb, var(--sp-tertiary, #d4a35a) 85%, transparent); outline-offset: 3px; border-radius: 4px; box-shadow: none; }
.sp-tplsm-details-fx > summary::after {
  content: ""; flex: none; width: .8em; height: .8em; background: var(--sp-primary, #0abab5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .42s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1));
}
.sp-tplsm-details-fx[open] > summary::after { transform: rotate(180deg); }
.sp-tplsm-details-fx > summary:is(:hover, :focus-visible)::after { background: var(--sp-tplsm-hover-ink, #6fd6d2); }
.sp-tplsm-details-fx > summary::before {
  content: ""; position: absolute; left: -7px; bottom: -7px; width: 14px; height: 14px; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle, var(--sp-secondary, #3ff0e8) 0 2.3px, color-mix(in srgb, var(--sp-secondary, #3ff0e8) 40%, transparent) 3.2px, transparent 3.3px) 100% 50% / 14px 14px no-repeat,
    radial-gradient(circle, var(--sp-tplsm-p-glow, rgba(10, 186, 181, .32)) 0, transparent 7px) 100% 50% / 14px 14px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--sp-primary, #0abab5) 45%, transparent) min(16px, 30%), color-mix(in srgb, var(--sp-secondary, #3ff0e8) 80%, transparent)) 7px 50% / calc(100% - 14px) 1px no-repeat;
  transition: width .55s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)), opacity .2s linear .35s;
}
.sp-tplsm-details-fx[open] > summary::before { width: calc(100% + 14px); opacity: 1; transition: width .55s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)) .05s, opacity .15s linear; }
.sp-tplsm-details-fx[open] > :not(summary) { animation: sp-tplsm-details-in .45s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)) .06s both; }
@keyframes sp-tplsm-details-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sp-tplsm-details-fx > summary, .sp-tplsm-details-fx > summary::after, .sp-tplsm-details-fx > summary::before { transition: none; }
  .sp-tplsm-details-fx[open] > :not(summary) { animation: none; }
}
.sp-tplsm-dl-btns > .sp-tplsm-dl-btn:only-child { flex: 0 1 calc(50% - 5px); }   /* una riga con un solo bottone (Portable: nessun client non presidiato): largo come gli altri */
@media (max-width: 599px) { .sp-tplsm-dl-btns > .sp-tplsm-dl-btn:only-child { flex: 1 1 100%; } }

/* §188 (Davide 30/9 sera) download per sistema: ogni card a tutta riga, anche su desktop ("ognuno a capo come il primo"). "Quale mi
 * serve?" con il testo del suo sistema (spheremesh2::downloadCards): <details class="sp-tplsm-dl-help" data-os>, summary
 * .sp-tplsm-dl-help-summary, testo .sp-tplsm-dl-help-text, link .sp-tplsm-dl-help-link. L'animazione la fa dev0 su queste classi. */
.sp-tplsm-dl-sys, .sp-tplsm-dl-sys[data-sp-os] { grid-template-columns: minmax(0, 1fr); }
.sp-tplsm-dl-help-text { margin: 10px 0 0; max-width: 72ch; color: var(--sp-tplsm-muted, #8493a6); line-height: 1.6; }
.sp-tplsm-dl-help-link { color: var(--sp-secondary, #3ff0e8); }
.sp-tplsm-dl-help-link:is(:hover, :focus-visible) { color: var(--sp-tplsm-hover-ink, #6fd6d2); }
/* (188, Davide) la nota della guida per Mac dentro la card: l'icona e' un'icona FANTASMA come nelle card V1 (.sp-tplsm-cards-ghost:
 * tenue, a destra e appena tagliata dal bordo, stessa opacita', posizione e rotazione; piu' piccola, perche' la nota e' bassa), cosi' il testo prende tutta la larghezza su
 * desktop e sul telefono. Senza freccia (il template non la stampa piu'); il box intero resta il link alla guida. */
/* (191, Davide) anche il box "Torna ai download" della guida Mac (.sp-tplsm-dl-notes): la stessa icona fantasma della nota */
:is(.sp-tplsm-dl-card, .sp-tplsm-dl-notes) .sp-tplsm-dl-note { position: relative; overflow: hidden; isolation: isolate; }
:is(.sp-tplsm-dl-card, .sp-tplsm-dl-notes) .sp-tplsm-dl-note .sp-tplsm-dl-ico {
  position: absolute; z-index: -1; right: -18px; top: 50%; transform: translateY(-50%);   /* fisso: -6% su una nota larga 1100 px la porterebbe fuori */
  width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: clamp(4.5rem, 6vw, 5.5rem); line-height: 1; color: var(--sp-primary, #0abab5); opacity: .09;   /* piu' piccola del V1: la nota e' bassa, la "i" si legge intera */
  transition: opacity .4s, transform .6s var(--sp-ease, ease); pointer-events: none;
}
:is(.sp-tplsm-dl-card, .sp-tplsm-dl-notes) .sp-tplsm-dl-note:is(:hover, :focus-visible) .sp-tplsm-dl-ico { opacity: .16; transform: translateY(-50%) rotate(-6deg) scale(1.04); }
:is(.sp-tplsm-dl-card, .sp-tplsm-dl-notes) .sp-tplsm-dl-note .sp-tplsm-dl-text { padding-right: 18%; }
@media (prefers-reduced-motion: reduce) { :is(.sp-tplsm-dl-card, .sp-tplsm-dl-notes) .sp-tplsm-dl-note:is(:hover, :focus-visible) .sp-tplsm-dl-ico { transform: translateY(-50%); } }

/* §193 (Davide 1/10) "Quale mi serve?" a righe (spheremesh2::downloadCards): ul.sp-tplsm-dl-help-list > li.sp-tplsm-dl-help-row, icona
 * Font Awesome (light, teal) in una colonna stretta, etichetta e riga breve una sotto l'altra; le righe comuni (.is-common) in fondo, dopo una
 * linea. La stessa griglia sul telefono: l'icona non stringe il testo. L'entrata a cascata delle righe la fa dev0 su .sp-tplsm-dl-help-row. */
.sp-tplsm-dl-help-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.sp-tplsm-dl-help-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); column-gap: 12px; align-items: start; }
.sp-tplsm-dl-help-ico { color: var(--sp-primary, #0abab5); font-size: 1.1rem; line-height: 1.35; text-align: center; }
.sp-tplsm-dl-help-label { display: block; font-weight: 500; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-dl-help-line { display: block; color: var(--sp-tplsm-muted, #8493a6); line-height: 1.5; }
.sp-tplsm-dl-help-row:not(.is-common) + .sp-tplsm-dl-help-row.is-common { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06)); }
.sp-tplsm-dl-help-row:not(.is-common) + .sp-tplsm-dl-help-row.is-common .sp-tplsm-dl-help-ico { padding-top: 0; }
/* (dev0 1/10) ENTRATA A CASCATA delle righe all'apertura del details: la stessa salita del contenuto (sp-tplsm-details-in, opacita'
   e 6 px), una riga ogni 50 ms; la lista intera non sale piu' (le righe salgono da sole, la linea delle comuni con la sua riga).
   Solo CSS: l'opacita' 0 c'e' soltanto durante l'attesa di un'apertura, a riposo le righe sono visibili. Movimento ridotto: niente */
details.sp-tplsm-details-fx[open] > .sp-tplsm-dl-help-list { animation: none; }
details.sp-tplsm-details-fx[open] li.sp-tplsm-dl-help-row { animation: sp-tplsm-details-in .42s var(--sp-tplsm-ease, cubic-bezier(.19, 1, .22, 1)) 60ms both; }
details.sp-tplsm-details-fx[open] li.sp-tplsm-dl-help-row:nth-child(2) { animation-delay: 110ms; }
details.sp-tplsm-details-fx[open] li.sp-tplsm-dl-help-row:nth-child(3) { animation-delay: 160ms; }
details.sp-tplsm-details-fx[open] li.sp-tplsm-dl-help-row:nth-child(4) { animation-delay: 210ms; }
details.sp-tplsm-details-fx[open] li.sp-tplsm-dl-help-row:nth-child(5) { animation-delay: 260ms; }
details.sp-tplsm-details-fx[open] li.sp-tplsm-dl-help-row:nth-child(6) { animation-delay: 310ms; }
details.sp-tplsm-details-fx[open] li.sp-tplsm-dl-help-row:nth-child(7) { animation-delay: 360ms; }
details.sp-tplsm-details-fx[open] li.sp-tplsm-dl-help-row:nth-child(8) { animation-delay: 410ms; }
@media (prefers-reduced-motion: reduce) { details.sp-tplsm-details-fx[open] li.sp-tplsm-dl-help-row { animation: none; } }
/* (dev0 1/10, 198) telefono: icona e titolo sulla stessa riga, la riga breve (anche il link "Scrivici" con la sua linea) sotto, a
   tutta larghezza dal bordo sinistro della lista. Il corpo della riga (span senza ruolo) diventa display: contents, cosi' titolo e
   riga breve sono celle della griglia della riga: nessun cambio al template. Sopra i 560 px non cambia niente */
@media (max-width: 559.98px) {
  .sp-tplsm-dl-help-row { row-gap: 0; align-items: center; }
  .sp-tplsm-dl-help-body { display: contents; }
  .sp-tplsm-dl-help-line { grid-column: 1 / -1; }
}

/* =====================================================================
 * §194 Il nome in fondo al drawer e' il link alla home (come il logo dell'header). basic-2.0 lo fa largo
 * quanto il drawer e senza puntatore: qui largo quanto il nome, centrato, cliccabile. Focus col filo oro del 192.
 * ===================================================================== */
a.sp-tpl-drawer-brand.sp-tplsm-drawer-brand {
  width: max-content; max-width: calc(100% - 32px); margin-inline: auto; padding: 6px 10px;
  pointer-events: auto; text-decoration: none; border-radius: 8px;
}
a.sp-tpl-drawer-brand.sp-tplsm-drawer-brand:focus-visible { outline: 1px solid color-mix(in srgb, var(--sp-tertiary, #d4a35a) 85%, transparent); outline-offset: 3px; box-shadow: none; }

/* =====================================================================
 * RITMO OTTICO L/M/S (216, dev0 1/10, Davide via claude-78; sostituisce il ritmo per slot del 215). I token sono su :root.
 * ===================================================================== */
/* COMPENSAZIONE OTTICA: i testi delle teste e dei blocchi sono tagliati alla cima delle maiuscole e alla linea di base (text-box), cosi'
   il box del testo e' quello che vede l'occhio e i padding/margini qui sotto sono gli spazi veri, senza l'interlinea dei titoli grandi
   (sul display a 70 px erano ~20 px in piu' sopra e sotto). Dove il browser non conosce text-box resta l'interlinea: spazi un po' piu'
   larghi, nessun errore */
.sp-tplsm-display, .sp-tplsm-manifesto-lead, .sp-tplsm-stack-lead, .sp-tplsm-solutions-lead, .sp-tplsm-bento .sp-tpl-intro-body,
.sp-tplsm-dl-label, .sp-tplsm-logos .sp-tplpro-logos-label, .sp-tplsm-case-title, .sp-tpl-content-body { text-box: trim-both cap alphabetic; }
/* le righe d'uscita sono flex (text-box non vale sul contenitore flex): si tagliano le loro voci di testo; la targhetta (cta-plate) e'
   un box e conta il suo bordo, quindi resta com'e' */
.sp-tplsm-link-nodes .sp-tplsm-credits-line > * { text-box: trim-both cap alphabetic; }
/* (223, dev0 2/10) le righe d'uscita sono tagliate alla linea di base (text-box qui sopra): la linea dei link a nodo (::after, centrata
   sul fondo del box) finiva sulla linea di base e tagliava le lettere che scendono (q, p, g). Qui la si porta dove sta il fondo del box del
   testo NON tagliato, come nelle note dei download: discesa del font + meta' dell'interlinea sotto la linea di base. Quicksand, misurata
   (canvas): sopra 1em, discesa .25em (le discendenti arrivano a .20em); box del testo 1,25em, quindi .25em + (1lh - 1,25em) / 2 =
   .5lh - .375em. A 14,4 px su 22,32: 5,76 px sotto la base, 2,76 px sotto la punta delle discendenti. Solo dove la voce e' tagliata */
.sp-tplsm-link-nodes p.sp-tplsm-credits-line > a:not(.sp-tplsm-cta-plate *)::after { bottom: calc(-7px - (.5lh - .375em)); }
/* i numeri della fascia e i nomi che scorrono nella fascia dei loghi: stesse ragioni (voci flex) */
.sp-tplsm-metrics .sp-tpl-metric > * { text-box: trim-both cap alphabetic; }
/* il bento: l'ultima riga di una card finisce sulla sua linea di base (le card non hanno bordo, e' il testo che si vede) */
.sp-tplsm-bento .sp-tpl-bento-card p { text-box: trim-end cap alphabetic; }

/* LE SEZIONI (L): ogni sezione tiene meta' di L sopra e meta' sotto, quindi fra due sezioni c'e' L, da fondo visibile a cima visibile.
   Vale per tutte le pagine del sito (slot o no). Restano fuori l'apertura della home (sp-tplsm-open e la cima di sp-tplsm-first) e la
   cima della testata: la testata tiene sotto meta' di L (dalla pillola del breadcrumb). L'id del contenuto vince sui padding dei
   singoli blocchi (sp-tplsm-section, bento, credits, cta, sp-tpl-content/faq/contact del core) senza forzature */
#sp-main-content > section:not(.sp-tplsm-open) { padding-bottom: calc(var(--sp-tplsm-ritmo-l) / 2); }
#sp-main-content > section:not(.sp-tpl-page-hero, .sp-tplsm-open, .sp-tplsm-first) { padding-top: calc(var(--sp-tplsm-ritmo-l) / 2); }
/* le FASCE (fondo o bordi loro: la pila, la biblioteca delle FAQ, i loghi, i numeri): L dentro sopra e sotto, e L fuori fino al vicino */
#sp-main-content > section:is(.sp-tplsm-stack, .sp-tpl-faq, .sp-tplsm-logos, .sp-tpl-metrics) { padding-block: var(--sp-tplsm-ritmo-l); }
#sp-main-content > section:has(+ section:is(.sp-tplsm-stack, .sp-tpl-faq, .sp-tplsm-logos, .sp-tpl-metrics)) { padding-bottom: var(--sp-tplsm-ritmo-l); }
#sp-main-content > section:is(.sp-tplsm-stack, .sp-tpl-faq, .sp-tplsm-logos, .sp-tpl-metrics) + section { padding-top: var(--sp-tplsm-ritmo-l); }
/* la fascia dei numeri: i divisori verticali dei numeri hanno 12 px loro sopra e sotto il testo (.sp-tpl-metric padding 12): la fascia li
   toglie dal suo L, cosi' dal bordo al numero resta L */
#sp-main-content > section.sp-tpl-metrics { padding-block: calc(var(--sp-tplsm-ritmo-l) - 12px); }
#sp-main-content > section.sp-tplsm-logos { padding-bottom: calc(var(--sp-tplsm-ritmo-l) - 8px); }   /* l'interlinea dei nomi, vedi i loghi sotto */
.sp-tplsm-metrics .sp-tpl-metrics-grid:first-child { margin-top: 0; }   /* senza titolo sopra: niente stacco della testa (core 32-44) */
/* il bento: le card non hanno bordo, quindi l'ultima riga finisce col testo; sotto restano vuoti il padding della card (26) e il posto
   della freccia che compare al passaggio (10 + 20): la griglia li recupera, cosi' dal testo alla sezione dopo resta L */
.sp-tplsm-bento .sp-tpl-bento-grid { margin-bottom: calc(-26px - 10px - 20px); }
/* la chiusura in coppia (sphere-desk): la seconda riga (i crediti di RustDesk) e' una nota agganciata alla riga d'uscita, a S */
#sp-main-content > .sp-tplsm-credits:has(+ .sp-tplsm-credits) { padding-bottom: 0; }
#sp-main-content > .sp-tplsm-credits + .sp-tplsm-credits { padding-top: var(--sp-tplsm-ritmo-s); }
/* l'ultima sezione -> il footer: L */
#sp-main-content > section:last-child { padding-bottom: var(--sp-tplsm-ritmo-l); }
/* il testo legale: l'ultimo blocco del contenuto non aggiunge il suo margine sotto (era +56 prima del footer) */
#sp-main-content > section .sp-tpl-content-head:last-child { margin-bottom: 0; }

/* LA TESTATA: dal fondo dell'header alla cima delle maiuscole dell'occhiello = L, lo stesso respiro che c'e' sotto la testata (dalla pillola
   del breadcrumb all'intro); dentro, occhiello -> titolo -> sottotitolo a S e sottotitolo -> breadcrumb a M (sul telefono +4 per gli archi,
   sul desktop +30 come prima: gli archi del breadcrumb salgono sopra le pillole). I testi della testata tagliati come le altre teste.
   La modale ha la sua testata compatta (regola piu' specifica, sotto) */
.sp-tpl-page-hero :is(.sp-tpl-eyebrow, .sp-tpl-page-hero-title, .sp-tpl-page-hero-teaser) { text-box: trim-both cap alphabetic; }
#sp-main-content > .sp-tpl-page-hero { padding-top: calc(var(--sp-tpl-topbar-h, 0px) + var(--sp-tpl-header-h, 72px) + var(--sp-tplsm-ritmo-l)); }
/* l'occhiello e' un inline-block: starebbe sulla linea di base della riga del contenitore (interlinea 24.8), 9 px sotto il padding; come blocco
   (non ha un fondo suo, il testo e' gia' centrato) parte dal padding */
.sp-tpl-page-hero .sp-tpl-eyebrow { display: block; margin-bottom: var(--sp-tplsm-ritmo-s); }
.sp-tpl-page-hero .sp-tpl-page-hero-title { margin-bottom: var(--sp-tplsm-ritmo-s); }
.sp-tpl-page-hero .sp-tplsm-crumbs { margin-top: calc(var(--sp-tplsm-ritmo-m) + 30px); }
@media (max-width: 899px) {
  .sp-tpl-page-hero .sp-tplsm-crumbs { margin-top: calc(var(--sp-tplsm-ritmo-m) + 4px); }
}
/* IL TITOLO DISPLAY SUL TELEFONO (sotto i 480): legato al titolo della testata (stessa funzione del core, clamp(1.8rem, 3.5vw, 2.6rem)) per
   un rapporto fisso, 1,1: a 390 da 35 a 32 px, appena sopra il titolo della testata, come la gerarchia del desktop ma piu' contenuta */
@media (max-width: 479px) {
  .sp-tplsm-display { font-size: calc(clamp(1.8rem, 3.5vw, 2.6rem) * 1.1); }
}

/* DENTRO LE SEZIONI (M e S), regole dei componenti: stessa specificita' delle regole di oggi, piu' avanti nel foglio */
/* S: titolo -> sottotitolo (testa a due colonne quando va a capo, testa della pila, sottotitolo delle sezioni e del bento) */
.sp-tplsm-manifesto-head { row-gap: var(--sp-tplsm-ritmo-s); }
.sp-tplsm-stack-head { gap: var(--sp-tplsm-ritmo-s); }
.sp-tplsm-solutions-lead { margin-top: var(--sp-tplsm-ritmo-s); }
.sp-tplsm-bento .sp-tpl-intro-body { margin-top: var(--sp-tplsm-ritmo-s); }
/* M: la testa della sezione (titolo, sottotitolo, etichetta) -> il suo contenuto (card, griglie, passi, media, campo della demo) */
.sp-tplsm-solutions .sp-tplsm-display + .sp-tplsm-solutions-grid,
.sp-tplsm-solutions-lead + .sp-tplsm-solutions-grid { margin-top: var(--sp-tplsm-ritmo-m); }
.sp-tplsm-media .sp-tplsm-display + .sp-tplsm-media-grid,
.sp-tplsm-media .sp-tplsm-solutions-lead + .sp-tplsm-media-grid { margin-top: var(--sp-tplsm-ritmo-m); }
.sp-tplsm-download .sp-tplsm-display + .sp-tplsm-dl-grid,
.sp-tplsm-download .sp-tplsm-solutions-lead + .sp-tplsm-dl-grid { margin-top: var(--sp-tplsm-ritmo-m); }
.sp-tplsm-steps { padding-top: var(--sp-tplsm-ritmo-m); }   /* fino alla riga sopra i passi (il bordo dei passi) */
/* senza testa (manifesto senza titolo, bento senza titolo: /stampa, /chi-siamo, /servizi) il contenuto parte dalla cima della sezione */
.sp-tplsm-steps:first-child, .sp-tplsm-manifesto-head:not(:has(> *)) + .sp-tplsm-steps { padding-top: 0; }
.sp-tplsm-democrm .sp-tplsm-democrm-field { margin-top: var(--sp-tplsm-ritmo-m); }
.sp-tplsm-bento .sp-tpl-bento-grid { margin-top: var(--sp-tplsm-ritmo-m); }   /* era 56 dal core */
.sp-tplsm-bento .sp-tpl-bento-grid:first-child { margin-top: 0; }
/* i loghi: il nome del settore e' testo dentro una voce flex (pallino + nome), dove text-box non arriva: l'etichetta e la fascia tolgono
   l'interlinea del nome, 8 px a quella misura, cosi' etichetta -> nomi resta M e nomi -> bordo della fascia resta L */
.sp-tplsm-logos .sp-tplpro-logos-label { margin-bottom: calc(var(--sp-tplsm-ritmo-m) - 8px); }   /* era 32 dal core */
.sp-tplsm-case-title { margin-bottom: var(--sp-tplsm-ritmo-m); }
/* il download: l'etichetta ("PER IL TUO COMPUTER") fa parte della testa, quindi sottotitolo -> etichetta = S e etichetta -> card = M.
   Le card stanno in una griglia con gap 16: l'etichetta compensa quel gap (M - 16) sopra e sotto */
.sp-tplsm-download .sp-tplsm-display + .sp-tplsm-dl-sys,
.sp-tplsm-download .sp-tplsm-solutions-lead + .sp-tplsm-dl-sys { margin-top: var(--sp-tplsm-ritmo-s); }
.sp-tplsm-dl-label { margin: calc(var(--sp-tplsm-ritmo-m) - 16px) 0 calc(var(--sp-tplsm-ritmo-m) - 16px); }
.sp-tplsm-dl-label.is-mine { margin-top: 0; }

/* il Fold aperto e i tablet (768-880): la testa a due colonne resta a due; sotto i 768 una colonna */
@media (max-width: 767px) {
  .sp-tplsm-manifesto-head { grid-template-columns: 1fr; }
}
/* la testata dentro la modale (.sp-modal, es. Impostazioni cookie): compatta, niente spazio dell'header della pagina sopra il titolo */
.sp-modal .sp-modal-content > .sp-tpl-page-hero { padding-block: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px); }
.sp-modal .sp-modal-content > .sp-tpl-page-hero + .sp-tpl-content { padding-top: clamp(20px, 2.5vw, 32px); }

/* =====================================================================
 * §230 Lo SFERONE di /sfera (218-218-E, dev0 2/10; Davide via claude-78). Tutto sotto classi che stampa solo /sfera
 * (.sp-tplsm-sferone-*, .sp-tplsm-sferone-pagina): senza quel markup nessuna regola trova niente.
 * /sfera usa l'impaginazione dell'apertura della home (.sp-tplsm-open, stage, .sp-tplsm-open-title col nome vivo) SENZA data-sp-open:
 * niente volo verso la testata, il logo resta. Il JS e' nello skin (sferone, nome vivo, volo dal logo).
 * ===================================================================== */
/* fuori dalla home lo stage non e' fisso: scorre con la pagina (nella home lo fissa il §16 perche' vola nel logo) */
.sp-tplsm-sferone-pagina > .sp-tplsm-open-stage { position: absolute; }
/* lo stage dell'apertura e' pointer-events none (i figli lo ereditano) e da' pointer-events auto a ogni canvas: il canvas dell'effetto
   non prende i gesti (sono del canvas del motore, che si trascina), finestra e voci si toccano */
.sp-tplsm-open-stage .sp-tplsm-sferone-fx { pointer-events: none; z-index: 4; }
.sp-tplsm-open-stage .sp-tplsm-sferone-finestra, .sp-tplsm-sferone-voci a { pointer-events: auto; }
/* targhette launcher: is-sopra (mouse sopra) e is-acceso (invito luminoso); compaiono dopo il volo dal logo */
.sp-tplsm-sphere-labels.is-launcher { transition: opacity .45s ease; }
.sp-tplsm-sphere-labels.is-launcher .sp-sphere-label { transition: border-color .35s, box-shadow .35s; }
.sp-tplsm-sphere-labels.is-launcher .sp-sphere-label.is-sopra,
.sp-tplsm-sphere-labels.is-launcher .sp-sphere-label.is-acceso { border-color: var(--sp-secondary, #3ff0e8); box-shadow: 0 0 18px color-mix(in srgb, var(--sp-secondary, #3ff0e8) 25%, transparent); }
/* a finestra aperta lo scrittone e l'invito non ci sono (stanno sopra lo stage) */
.sp-tplsm-open.is-sferone-finestra > .sp-tplsm-open-title, .sp-tplsm-open.is-sferone-finestra > .sp-tplsm-sferone-invito { visibility: hidden; }
/* il volo dal logo: scrittone e invito compaiono quando la Sfera si e' posata */
.sp-tplsm-sferone-pagina > .sp-tplsm-open-title, .sp-tplsm-sferone-pagina > .sp-tplsm-sferone-invito { transition: opacity .45s ease; }
.sp-tplsm-sferone-pagina.is-sferone-volo > .sp-tplsm-open-title, .sp-tplsm-sferone-pagina.is-sferone-volo > .sp-tplsm-sferone-invito { opacity: 0; transition-duration: 0s; }
/* l'invito: al posto della capsula "Scorri" della home, stessa distanza dal fondo; testo del launcher (publicResourceDescription) */
.sp-tplsm-sferone-invito { position: absolute; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 2; margin: 0 auto; padding: 0 20px; max-width: 46ch; text-align: center; color: var(--sp-tplsm-text-2, #b6bdc7); font-size: .95rem; line-height: 1.5; pointer-events: none; }
/* i launcher veri, per tastiera e lettori di schermo: fuori vista finche' non hanno il focus */
.sp-tplsm-sferone-voci { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; z-index: 4; }
.sp-tplsm-sferone-voci a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp-tplsm-sferone-voci a:focus-visible { position: static; width: auto; height: auto; clip-path: none; padding: 6px 12px; border-radius: 999px; background: var(--sp-tplsm-glass, rgba(7, 11, 18, .74)); border: 1px solid var(--sp-tertiary, #d4a35a); color: var(--sp-tplsm-text, #e9eef4); text-decoration: none; font-size: .85rem; }
/* la finestra DOM: la riempie la callback; compare quando i nodi sono sul suo contorno. Il bordo lo fa il blocco nodi-bordo
   (la finestra e' .sp-tplsm-edge-nodes) */
.sp-tplsm-sferone-finestra { position: absolute; left: 50%; top: 50%; width: min(560px, calc(100% - 40px)); transform: translate(-50%, -50%) scale(.96); opacity: 0; z-index: 3;
  padding: clamp(24px, 4vw, 40px); border-radius: 24px; color: var(--sp-tplsm-text, #e9eef4);
  border: 1px solid color-mix(in srgb, var(--sp-primary, #0abab5) 36%, transparent);
  background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--sp-primary, #0abab5) 13%, transparent), transparent 62%), color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .35s ease, transform .5s cubic-bezier(.19, 1, .22, 1); }
.sp-tplsm-sferone-finestra.is-su { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* (prova 3 del Gate, r-vi; j-edi 3917/3921, nome di r-jinx 3922) la finestra SENZA CORNICE, generale: la mette lo Sferone quando pannelli()
   prende i pannelli dal content (e lo Store insieme a is-store); la toglie alla chiusura. Fa SOLO questo: niente bordo, fondo, blur,
   padding ne' raggio. Senza bordo la finestra (marcata edge-nodes) non e' una card per nodi-bordo, che scende e da' i nodi ai pannelli
   del content. Posizione e X restano quelle della finestra. La larghezza sale a 820 px (prova 4, Davide via j-edi 4093: «tre in fila da desktop sì»):
   senza cornice la finestra e' uno spazio, non un pannello, e tre schede da 250 ci stanno in fila. Lo Store prende is-nuda con is-store, che viene
   DOPO nel file con la stessa specificita' e tiene la sua larghezza (100%). */
.sp-tplsm-sferone-finestra.is-nuda { width: min(820px, calc(100% - 40px)); padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* (prova 3, r-jinx 3929) lo sferone visto DA DENTRO (classe del launcher --dentro): i token che la parola entra legge sul canvas della Sfera.
   Lo spin con cui si resta dentro (0,12, la «sferona che gira», Davide 3881) e l'onda di luce mentre si entra (1 = si). Senza la classe
   i token non ci sono ed entra resta quella di prima. */
.sp-tplsm-sferone--dentro { --sp-sfera-spin-dentro: .12; --sp-sfera-luce-entra: 1; }
.sp-tplsm-sferone-finestra h2 { margin: 0; padding-inline-end: 34px; font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; }
.sp-tplsm-sferone-finestra p { margin: 14px 0 0; color: var(--sp-tplsm-text-2, #b6bdc7); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-finestra { transition: none; } }
/* la X, come quella del dialog 2.0 (in alto a destra, box fisso 34x34 in flex centrato). Il nome per i lettori di schermo viene da una
   voce del launcher (aria-label dal template), il segno e' un SVG del template */
.sp-tplsm-sferone-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--sp-tplsm-text-2, #b6bdc7); cursor: pointer; transition: color .2s, background-color .2s; }
.sp-tplsm-sferone-x:hover { color: var(--sp-tplsm-text, #e9eef4); background: color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 8%, transparent); }
.sp-tplsm-sferone-x:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }

/* (238, dal 229, Davide 2/10) LE PAROLE D'ORO dei passi: sulle sezioni con la classe sp-tplsm-oro (dal dato, classes della voce). Senza la
   classe, o senza JS, i passi sono quelli di sempre. Col JS (.is-oro-js sulla sezione): un nodo corre sul filo sopra il passo, da destra,
   lo disegna e accende la parola quando le passa sopra, con una luce che la attraversa (--oro-lx); al passaggio del mouse (o al tocco) il
   nodo ripercorre il filo e la luce ripassa. Movimento ridotto: parole gia' accese, filo fermo, niente nodo.
   (244, Davide 3/10) anche gli step CON NUMERO (01, 02...): le regole stanno su .sp-tplsm-step-n, che la parola d'oro ha anch'essa */
.sp-tplsm-oro.is-oro-js .sp-tplsm-step { position: relative; }
.sp-tplsm-oro.is-oro-js .sp-tplsm-step-n { position: relative; align-self: flex-start; color: color-mix(in srgb, var(--sp-tertiary, #d4a35a) 38%, var(--sp-tplsm-muted, #8493a6)); transition: color .5s ease; }
/* la parola accesa: oro in gradiente con una luce morbida sopra (background-clip: text); nucleo quasi bianco caldo, stretto e alto */
.sp-tplsm-oro.is-oro-js .sp-tplsm-step-n.is-oro {
  color: transparent;
  background-image:
    radial-gradient(ellipse 44% 170% at var(--oro-lx, -40%) 45%, #fffaf0, #fffaf0 22%, color-mix(in srgb, #fff3d6 70%, transparent) 46%, color-mix(in srgb, #fff3d6 22%, transparent) 68%, transparent 86%),
    linear-gradient(100deg, var(--sp-tertiary, #d4a35a), color-mix(in srgb, var(--sp-tertiary, #d4a35a) 62%, #fff3d6) 55%, var(--sp-tertiary, #d4a35a));
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0 22px color-mix(in srgb, var(--sp-tertiary, #d4a35a) 18%, transparent);
}
/* il filo: il bordo del passo resta senza JS; col JS lo copre un filo disegnato, che parte vuoto */
.sp-tplsm-oro.is-oro-js .sp-tplsm-step { border-top-color: transparent; }
.sp-tplsm-oro-filo { position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; transform-origin: 100% 50%;
  background: linear-gradient(90deg, var(--sp-tplsm-line, rgba(233, 238, 244, .11)), color-mix(in srgb, var(--sp-tertiary, #d4a35a) 30%, var(--sp-tplsm-line, rgba(233, 238, 244, .11)))); }
.sp-tplsm-oro-nodo { position: absolute; top: -1px; left: 0; width: 0; height: 0; pointer-events: none; }
.sp-tplsm-oro-nodo::before { content: ""; position: absolute; left: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: #fff3d6;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sp-tertiary, #d4a35a) 45%, transparent), 0 0 14px 4px color-mix(in srgb, var(--sp-tertiary, #d4a35a) 55%, transparent); }
/* la scia dietro al nodo (verso destra: il nodo corre da destra a sinistra) */
.sp-tplsm-oro-nodo::after { content: ""; position: absolute; left: 0; top: -.5px; width: 46px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--sp-tertiary, #d4a35a) 80%, transparent), transparent); }
@media (prefers-reduced-motion: reduce) {
  .sp-tplsm-oro.is-oro-js .sp-tplsm-step-n { transition: none; }
}

/* =====================================================================
 * (244, dev0 3/10) /sfera COMPLETA (243 di smsiter). Ogni regola trova solo il markup della 243: senza, niente cambia.
 * ===================================================================== */
/* 1. I SEGNI DELLE PAGINE INTERNE NELLA SCENA (variante A, classe sp-tplsm-sferone--segni sul launcher: il template stampa l'occhiello e il
   breadcrumb solo con quella). Lo scrittone resta al centro della Sfera: la scena diventa una griglia a tre righe (1fr auto 1fr) con lo
   scrittone nella riga di mezzo, quindi esattamente dov'era; l'occhiello sta in fondo alla riga di sopra, appena sopra lo scrittone,
   come nelle testate (occhiello, titolo, testo, breadcrumb). Il breadcrumb in basso nella scena, l'invito sale sopra di lui: lo stesso
   ordine delle testate. Fuori dal flusso: non spinge niente. Con la finestra aperta e nel volo spariscono come lo scrittone */
.sp-tplsm-sferone-pagina:has(> .sp-tplsm-sferone-occhiello) { grid-template-rows: 1fr auto 1fr; grid-template-columns: 100%; }
.sp-tplsm-sferone-pagina:has(> .sp-tplsm-sferone-occhiello) > .sp-tplsm-open-title { grid-row: 2; }
.sp-tplsm-sferone-occhiello {
  grid-row: 1; align-self: end; position: relative; z-index: 2; margin: 0 0 clamp(10px, 1.3vw, 16px); padding-inline: 20px; text-align: center; pointer-events: none;
  font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.55; color: var(--sp-primary, #0abab5);
  text-shadow: 0 0 14px var(--sp-tplsm-deep, #06090f), 0 0 4px var(--sp-tplsm-deep, #06090f);   /* leggibile sopra le linee della Sfera */
}
.sp-tplsm-sferone-crumbs { position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 2; padding-inline: 20px; }
.sp-tplsm-sferone-crumbs .sp-tplsm-crumbs { margin: 0; }
.sp-tplsm-sferone-pagina:has(> .sp-tplsm-sferone-crumbs) > .sp-tplsm-sferone-invito { bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 2.6rem); }
.sp-tplsm-sferone-pagina > :is(.sp-tplsm-sferone-occhiello, .sp-tplsm-sferone-crumbs) { transition: opacity .45s ease; }
.sp-tplsm-open.is-sferone-finestra > :is(.sp-tplsm-sferone-occhiello, .sp-tplsm-sferone-crumbs) { visibility: hidden; }
.sp-tplsm-sferone-pagina.is-sferone-volo > :is(.sp-tplsm-sferone-occhiello, .sp-tplsm-sferone-crumbs) { opacity: 0; transition-duration: 0s; }
.sp-tplsm-sferone-pagina:has(> .sp-tplsm-sferone-crumbs) > .sp-tplsm-sferone-invito { text-shadow: 0 0 14px var(--sp-tplsm-deep, #06090f), 0 0 4px var(--sp-tplsm-deep, #06090f); }   /* sale sul bordo della Sfera */
/* 2. VARIANTE B (classe sp-tplsm-sferone--testata sul launcher): la testata standard e, dentro la sua sezione, lo sferone RIDOTTO
   (.sp-tplsm-sferone--ridotto): una scena a misura sotto il breadcrumb, non a tutto schermo; lo stage la riempie da cima a fondo (niente
   spazio per l'header: l'header sta sopra la testata). Lo scrittone e l'invito non ci sono (sono h1 e sottotitolo della testata).
   La finestra della targhetta si apre nella scena ridotta: la scena e' alta abbastanza per il suo contenuto (titolo, testo, bottone) */
.sp-tplsm-sferone--ridotto { height: clamp(420px, 64svh, 640px); padding: 0; margin: clamp(4px, 1.2vw, 16px) auto 0; }
.sp-tplsm-sferone--ridotto > .sp-tplsm-open-stage { top: 0; height: 100%; }
.sp-tpl-page-hero:has(> .sp-tplsm-sferone--ridotto), .sp-tpl-page-hero:has(.sp-tplsm-sferone--ridotto) { padding-bottom: 0; }
@media (max-width: 560px) {
  .sp-tplsm-sferone--ridotto { height: clamp(380px, 56svh, 470px); }
  .sp-tplsm-sferone--ridotto .sp-tplsm-sphere--open { --sp-sphere-cy: .5; }   /* nella scena ridotta la Sfera al centro (nessuno scrittone sotto) */
}
/* 3. IL PASSAGGIO ALL'INTRO ("Scorri" come in home): se il template stampa nella scena la capsula della home (.sp-tplsm-open-cue, testo
   dal dato), sta in fondo come in home, l'invito sopra di lei come lo scrittone della home, e il breadcrumb sale in cima alla scena
   (sotto l'header): in fondo non c'e' posto per tre righe senza coprire la Sfera. Senza capsula: le regole del punto 1 */
.sp-tplsm-sferone-pagina:has(> .sp-tplsm-open-cue) > .sp-tplsm-sferone-crumbs { bottom: auto; top: calc(var(--sp-tplsm-head, 110px) + clamp(14px, 2vw, 24px)); }
.sp-tplsm-sferone-pagina:has(> .sp-tplsm-open-cue) > .sp-tplsm-sferone-invito { bottom: calc(26px + env(safe-area-inset-bottom, 0px) + 72px); }
.sp-tplsm-sferone-pagina > .sp-tplsm-open-cue { transition: opacity .45s ease; }
.sp-tplsm-open.is-sferone-finestra > .sp-tplsm-open-cue { visibility: hidden; }
/* coi segni nella scena, da scrivania la Sfera un filo piu' piccola (raggio .36 invece di .40): sopra e sotto restano l'aria per breadcrumb
   e invito senza coprirla. Lo scrittone la segue (il JS lo misura sul diametro vero). Telefono e Fold: come oggi (raggio .44, c'e' posto) */
@media (min-width: 881px) {
  .sp-tplsm-sferone-pagina:has(> .sp-tplsm-sferone-crumbs) .sp-tplsm-sphere--open { --sp-sphere-radius: .36; }
}
/* 4. LA FASCIA DI TESTO (classe sp-tplsm-fascia sul launcher di un manifesto senza voci: "rivelazione" e "adesso" di /sfera). Una fascia
   a tutta larghezza fra due fili, con una luce Tiffany morbida che scende dall'alto (il mockup della rivelazione); titolo e testo al
   centro, una colonna: e' una frase da leggere, non una testa di sezione. Margini e spazi fra le sezioni restano quelli della pagina */
.sp-tplsm-fascia {
  border-block: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  background: radial-gradient(ellipse 70% 120% at 50% 0%, color-mix(in srgb, var(--sp-primary, #0abab5) 8%, transparent), transparent 70%), var(--sp-tplsm-deep, #06090f);
  padding-block: clamp(64px, 9vw, 120px);
}
.sp-tplsm-fascia .sp-tplsm-manifesto-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: var(--sp-tplsm-ritmo-s); }
.sp-tplsm-fascia .sp-tplsm-display { max-width: 16em; }
.sp-tplsm-fascia .sp-tplsm-manifesto-lead { max-width: 36em; }
/* 7. LE COSTELLAZIONI LONTANE (canvas del JS dello sferone, dietro la Sfera): a tutta scena, non prendono i gesti (lo stage da' pointer-events
   ai canvas: qui no) */
.sp-tplsm-open-stage .sp-tplsm-sferone-lontane { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; cursor: auto; }

/* (247-B, dev0 3/10) IL CIELO SOPRA SFERA (easter egg dello sferone, JS nello skin). Col cielo acceso la finestra si riduce alla sua X in
   alto a destra della scena (stesso bottone, stesso nome dal dato: X ed Esc chiudono come sempre), il resto della finestra e i nodi del suo
   bordo non si vedono; in basso la didascalia e la riga dei crediti (testi dal dato, li mette il JS) */
.sp-tplsm-sferone-finestra.is-cielo {
  left: auto; right: clamp(12px, 2vw, 24px); top: clamp(12px, 2vw, 24px); width: 34px; height: 34px; padding: 0; transform: none;
  border-color: transparent; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity .35s ease;
}
.sp-tplsm-sferone-finestra.is-cielo > :not(.sp-tplsm-sferone-x) { display: none; }
.sp-tplsm-sferone-finestra.is-cielo > .sp-tplsm-sferone-x { top: 0; right: 0; background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 70%, transparent); }
.sp-tplsm-sferone-cielo {
  position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 5; margin: 0; padding-inline: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; pointer-events: none;
  animation: sp-tplsm-cielo-in 1.2s ease 1.6s both;
}
.sp-tplsm-sferone-cielo-titolo { font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-tertiary, #d4a35a); }
.sp-tplsm-sferone-cielo-crediti { max-width: 62ch; font-size: .68rem; line-height: 1.5; color: var(--sp-tplsm-muted, #8493a6); }
@keyframes sp-tplsm-cielo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-cielo { animation: none; } }
/* (247-B, bug di Davide 3/10 al telefono) con la finestra aperta il breadcrumb della scena spariva solo a meta': gli archi (linea, nodo e
   alone fra Home e Sfera) li disegna il blocco degli archi su un canvas suo in fondo al <body> (.sp-tplsm-crumbs-canvas), che la visibilita'
   del breadcrumb non tocca. Mentre la finestra della scena e' aperta (e nel volo d'uscita) sparisce anche lui; alla chiusura torna intero.
   Solo con il breadcrumb nella scena (variante A): il breadcrumb della testata (variante B, altre pagine) non si tocca */
body:has(.sp-tplsm-sferone-pagina.is-sferone-finestra > .sp-tplsm-sferone-crumbs) > .sp-tplsm-crumbs-canvas { visibility: hidden; }
body:has(.sp-tplsm-sferone-pagina.is-sferone-volo > .sp-tplsm-sferone-crumbs) > .sp-tplsm-crumbs-canvas { opacity: 0; }
.sp-tplsm-sferone-pagina.is-sferone-volo > .sp-tplsm-open-cue { opacity: 0; transition-duration: 0s; }   /* anche lo "Scorri", come gli altri segni */
/* (247-C) il cielo navigabile: i bottoni + - e vista intera (icone; nome dal dato), sotto la X, nello stesso disegno */
.sp-tplsm-sferone-cielo-zoom { position: absolute; right: clamp(12px, 2vw, 24px); top: calc(clamp(12px, 2vw, 24px) + 44px); z-index: 5; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }   /* lo stage e' pointer-events none: i bottoni si toccano */
.sp-tplsm-sferone-cielo-zoom button {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 70%, transparent); color: var(--sp-tplsm-text-2, #b6bdc7); transition: color .2s, background .2s;
}
.sp-tplsm-sferone-cielo-zoom button:hover { color: var(--sp-tplsm-text, #e9eef4); background: color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 8%, transparent); }
.sp-tplsm-sferone-cielo-zoom button:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
/* (5/10) i bottoni che adesso non farebbero niente (+ al massimo, - e vista intera a cielo intero) sono spenti e lo dicono */
.sp-tplsm-sferone-cielo-zoom button:disabled { opacity: .35; cursor: default; }
.sp-tplsm-sferone-cielo-zoom button:disabled:hover { color: var(--sp-tplsm-text-2, #b6bdc7); background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 70%, transparent); }
/* (dove sei, 5/10) il bottone della posizione sotto il campo di ricerca, con la riga della privacy (o "posizione non disponibile") */
.sp-tplsm-sferone-cielo-dove { position: absolute; left: clamp(12px, 2vw, 24px); top: calc(clamp(12px, 2vw, 24px) + 50px); z-index: 6; max-width: min(380px, calc(100% - 24px - 58px)); pointer-events: auto; transition: opacity .25s; }
.sp-tplsm-sferone-cielo-dove-bottone {
  height: 34px; margin: 0; padding: 0 14px; border-radius: 999px; font: inherit; font-size: .84rem; cursor: pointer; color: var(--sp-tplsm-text, #e9eef4);
  border: 1px solid color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 16%, transparent); background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .2s, color .2s;
}
.sp-tplsm-sferone-cielo-dove-bottone:hover { border-color: var(--sp-tplsm-p-line, rgba(10, 186, 181, .36)); }
.sp-tplsm-sferone-cielo-dove-bottone:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
.sp-tplsm-sferone-cielo-dove-bottone.is-attivo { border-color: var(--sp-tplsm-a-line, rgba(212, 163, 90, .4)); color: var(--sp-tertiary, #d4a35a); }
.sp-tplsm-sferone-cielo-dove-bottone:disabled { opacity: .6; cursor: default; }
/* (Davide 12/10) «Torna alla luce vera» nella scheda in vista libera: un tasto vero, col sistema bottoni del sito (raggio e peso dei bottoni,
   colore primario), non la pillola scura del «dove» che sembrava un campo. Il testo resta la voce di launcher sp-tplsm-skydome-nav3d */
.sp-tplsm-sferone-cielo-dove-bottone.sp-tplsm-sferone-cielo-scheda-stanotte {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: var(--sp-tplsm-btn-r, 10px);
  font-size: .9rem; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .2s, border-color .2s, color .2s;
  border: 1px solid var(--sp-primary, #0abab5); background: transparent; color: var(--sp-primary, #0abab5); font-weight: 500;
}
.sp-tplsm-sferone-cielo-dove-bottone.sp-tplsm-sferone-cielo-scheda-stanotte:is(:hover, :focus-visible) { background: var(--sp-primary, #0abab5); color: var(--sp-tplsm-on-primary, #071215); }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-cielo-dove-bottone.sp-tplsm-sferone-cielo-scheda-stanotte { transition: none; } }
.sp-tplsm-sferone-cielo-dove-nota { margin: 6px 2px 0; max-width: 34ch; font-size: .72rem; line-height: 1.45; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-sferone.is-oggetto .sp-tplsm-sferone-cielo-dove { opacity: .38; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-cielo-dove, .sp-tplsm-sferone-cielo-dove-bottone { transition: none; } }
/* (Fold, 5/10) col cielo acceso il palco parte da sotto l'header: senza topbar (<= 1024 px) i 38 px della riserva restavano vuoti. Il cielo si
   rifa' da solo sulla misura nuova (il ResizeObserver della 258). La home e /sfera chiusa non cambiano */
.sp-tplsm-sferone-pagina:not(.sp-tplsm-sferone--ridotto):has(.sp-tplsm-sferone-finestra.is-cielo) > .sp-tplsm-open-stage { top: var(--sp-tplsm-top, 110px); height: calc(100% - var(--sp-tplsm-top, 110px)); }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-cielo-zoom button { transition: none; } }
/* (MODALITA' OGGETTO, Davide 5/10) con la scheda di un oggetto aperta la navigazione del cielo e' ferma: i bottoni + - intera spariscono
   (sfumano), il campo di ricerca resta visibile ma spento (disabled dal JS); si torna a navigare uscendo (X, Esc). Ridotto: subito */
.sp-tplsm-sferone-cielo-zoom { transition: opacity .25s, visibility .25s; }
.sp-tplsm-sferone.is-oggetto .sp-tplsm-sferone-cielo-zoom { opacity: 0; visibility: hidden; pointer-events: none; }
.sp-tplsm-sferone-cielo-cerca { transition: opacity .25s; }
.sp-tplsm-sferone.is-oggetto .sp-tplsm-sferone-cielo-cerca { opacity: .38; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-cielo-zoom, .sp-tplsm-sferone-cielo-cerca { transition: none; } }

/* =====================================================================
 * (248-C, dev0 4/10) LE SCHEDE "PER CHI" (section[data-sp-schede], template schedeSection; proposta di dev0, ok di Davide 3/10).
 * Senza JS: le schede una sotto l'altra, ognuna con l'etichetta (oro, piccola), il titolo e il testo. Col JS (.is-schede-js, lo mette lo
 * skin): sopra la fila delle schede come le pill della biblioteca (a capo sul telefono), la scelta col bordo oro tenue; sotto un pannello
 * alla volta (l'etichetta dentro il pannello non serve piu': e' la scheda). L'azione "Mandala al tuo capo" come un'azione: pill col
 * segno della freccia, la conferma (testo dal dato) per ~2 s. Movimento ridotto: niente dissolvenza.
 * ===================================================================== */
.sp-tplsm-schede[id] { scroll-margin-top: var(--sp-tplsm-head, 110px); }
.sp-tplsm-schede-head { display: grid; justify-items: center; text-align: center; row-gap: var(--sp-tplsm-ritmo-s); }
.sp-tplsm-schede-head .sp-tplsm-display { max-width: 18em; text-wrap: balance; }
.sp-tplsm-schede-lead { max-width: 42em; color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tplsm-schede-list { display: grid; gap: clamp(28px, 4vw, 44px); max-width: 760px; margin: clamp(32px, 5vw, 56px) auto 0; }
.sp-tplsm-scheda { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); }
.sp-tplsm-scheda-tab { margin: 0; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-tertiary, #d4a35a); }
.sp-tplsm-scheda h3 { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 300; line-height: 1.15; color: var(--sp-tplsm-text, #e9eef4); text-wrap: balance; }
.sp-tplsm-scheda p:not(.sp-tplsm-scheda-tab) { margin: 0; max-width: 60ch; color: var(--sp-tplsm-text-2, #b6bdc7); line-height: 1.7; }
.sp-tplsm-scheda-share {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sp-tertiary, #d4a35a) 45%, transparent); color: var(--sp-tplsm-text, #e9eef4); text-decoration: none; font-size: .95rem;
  transition: border-color .25s, box-shadow .25s, color .25s;
}
.sp-tplsm-scheda-share::after {   /* la freccia (segno, non testo) */
  content: ""; width: 14px; height: 14px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sp-tplsm-scheda-share:hover, .sp-tplsm-scheda-share:focus-visible { border-color: var(--sp-tertiary, #d4a35a); box-shadow: 0 0 22px color-mix(in srgb, var(--sp-tertiary, #d4a35a) 18%, transparent); }
.sp-tplsm-scheda-share:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
.sp-tplsm-scheda-share.is-copiato { color: var(--sp-secondary, #3ff0e8); border-color: color-mix(in srgb, var(--sp-secondary, #3ff0e8) 45%, transparent); }
.sp-tplsm-scheda-share.is-copiato::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
/* col JS: la fila delle schede e un pannello alla volta */
.sp-tplsm-schede-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(24px, 3.5vw, 36px); }
.sp-tplsm-schede-tabs button {
  font: inherit; font-size: .92rem; line-height: 1.35; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  color: var(--sp-tplsm-muted, #8493a6); background: rgba(233, 238, 244, .04); border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  transition: color .25s, border-color .25s, background-color .25s;
}
.sp-tplsm-schede-tabs button:hover { color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-schede-tabs button[aria-selected="true"] { color: var(--sp-tplsm-text, #e9eef4); border-color: color-mix(in srgb, var(--sp-tertiary, #d4a35a) 50%, transparent); background: color-mix(in srgb, var(--sp-tertiary, #d4a35a) 8%, transparent); }
.sp-tplsm-schede-tabs button:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
.is-schede-js .sp-tplsm-schede-list { margin-top: clamp(28px, 4vw, 44px); }
.is-schede-js .sp-tplsm-scheda { border-top: 0; padding-top: 0; text-align: center; justify-items: center; }
.is-schede-js .sp-tplsm-scheda-share { justify-self: center; }
.is-schede-js .sp-tplsm-scheda-tab { display: none; }
.is-schede-js .sp-tplsm-scheda[hidden] { display: none; }
.is-schede-js .sp-tplsm-scheda.is-entra { animation: sp-tplsm-scheda-in .3s ease both; }
@keyframes sp-tplsm-scheda-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .is-schede-js .sp-tplsm-scheda.is-entra { animation: none; }
  .sp-tplsm-schede-tabs button, .sp-tplsm-scheda-share { transition: none; }
}

/* (SkyDome, dev0 4/10) la scheda dell'oggetto del cielo (tocco su un oggetto: nome, tipo, testo, immagine con crediti, dal dato) e la riga
   "se fosse visibile" sotto la didascalia quando e' chiaro (data-sp-cielo-giorno). La scheda: in basso a sinistra (telefono: in basso, larga),
   lo stesso disegno della finestra dello sferone in piccolo; la X col nome della X dello sferone */
.sp-tplsm-sferone-cielo-scheda {
  position: absolute; left: clamp(12px, 2vw, 24px); bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 64px); z-index: 6; width: min(340px, calc(100% - 24px));
  max-height: calc(100% - 140px); overflow: auto; padding: 18px 20px 20px; border-radius: 18px; color: var(--sp-tplsm-text, #e9eef4); pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--sp-tertiary, #d4a35a) 36%, transparent);
  background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: sp-tplsm-cielo-in .35s ease both;
}
.sp-tplsm-sferone-cielo-scheda h3 { margin: 0; padding-inline-end: 30px; font-size: 1.25rem; font-weight: 400; line-height: 1.2; }
.sp-tplsm-sferone-cielo-scheda-tipo { margin: 4px 0 0; font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-tertiary, #d4a35a); }
.sp-tplsm-sferone-cielo-scheda-testo { margin: 12px 0 0; font-size: .92rem; line-height: 1.6; color: var(--sp-tplsm-text-2, #b6bdc7); }
/* (Davide 6/10, dopo la 271-B) lo spazio della foto e' NERO pieno: le foto astronomiche hanno il fondo nero e si fondono col riquadro (prima:
   bande grigie sopra e sotto quando il rapporto della foto e' diverso da quello del riquadro). Nero anche mentre la foto carica */
.sp-tplsm-sferone-cielo-scheda img { display: block; width: 100%; height: auto; margin-top: 12px; border-radius: 10px; background: #000; }
/* senza le misure nel dato: un riquadro 3:2 riservato subito (niente salto mentre carica), la foto intera dentro (contain: niente tagli) */
.sp-tplsm-sferone-cielo-scheda img:not([width]) { aspect-ratio: 3 / 2; object-fit: contain; object-position: center; }
.sp-tplsm-sferone-cielo-scheda-crediti { margin: 6px 0 0; font-size: .68rem; line-height: 1.5; color: var(--sp-tplsm-muted, #8493a6); }
/* (Sole) l'avviso del dato (warning): un blocco a se' prima del testo, ben visibile (bordo e fondo ambra, testo pieno); il link dei crediti
   (creditsUrl) sottolineato sottile; il teaser (voce di servizio) sotto i crediti, sommesso */
.sp-tplsm-sferone-cielo-scheda-avviso {
  margin: 12px 0 0; padding: 9px 12px; border-left: 3px solid var(--sp-tertiary, #d4a35a); border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--sp-tertiary, #d4a35a) 14%, transparent); font-size: .9rem; font-weight: 500; line-height: 1.5; color: var(--sp-tplsm-text, #e9eef4);
}
.sp-tplsm-sferone-cielo-scheda-crediti a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.sp-tplsm-sferone-cielo-scheda-crediti a:hover { color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tplsm-sferone-cielo-scheda-crediti a:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; border-radius: 2px; }
.sp-tplsm-sferone-cielo-scheda-teaser { margin: 10px 0 0; font-size: .78rem; font-style: italic; line-height: 1.5; color: var(--sp-tplsm-text-2, #b6bdc7); }
/* (ammassi, Davide 6/10) la riga delle stelle che si accendono (ui.card.brightest): piccola, in oro come le stelle accese */
.sp-tplsm-sferone-cielo-scheda-stelle { margin: 10px 0 0; font-size: .8rem; line-height: 1.5; letter-spacing: .01em; color: var(--sp-tertiary, #d4a35a); }
/* (Luna e pianeti, 6/10) la riga della fase o della magnitudine (ui.card.moonPhase, planetMag), sotto il testo */
.sp-tplsm-sferone-cielo-scheda-fase { margin: 10px 0 0; font-size: .82rem; line-height: 1.5; letter-spacing: .01em; color: var(--sp-tplsm-text, #e9eef4); font-variant-numeric: tabular-nums; }
.sp-tplsm-sferone-cielo-scheda-x {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: 8px; background: transparent; color: var(--sp-tplsm-text-2, #b6bdc7); cursor: pointer;
}
.sp-tplsm-sferone-cielo-scheda-x:hover { color: var(--sp-tplsm-text, #e9eef4); background: color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 8%, transparent); }
.sp-tplsm-sferone-cielo-scheda-x:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
/* (Davide 4/10) con la scheda aperta la didascalia del cielo (titolo, riga del giorno, crediti) si toglie: niente testi sovrapposti in
   trasparenza; torna alla chiusura (visibility: l'opacita' e' dell'animazione d'entrata, che non si rilancia) */
.sp-tplsm-sferone-cielo.is-coperta { visibility: hidden; }
/* (6/10, Davide dal telefono) lo scrittone ha il suo spazio: finche' c'e', la didascalia si fa da parte e lui scende al suo posto (mai sopra altro testo) */
.sp-tplsm-sferone.is-scrittone .sp-tplsm-sferone-cielo { visibility: hidden; }
.sp-tplsm-sferone.is-scrittone .sp-tplsm-sferone-cielo-scrittone { bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
/* (HD, dev0 5/10) la scheda comprimibile (solo con la figura HD): la maniglia accanto alla X (una freccia, ruota da ridotta); il titolo si tocca;
   ridotta: nome e tipo, il resto via */
.sp-tplsm-sferone-cielo-scheda.has-riduci h3 { padding-inline-end: 64px; }
.sp-tplsm-sferone-cielo-scheda h3.is-attivo { cursor: pointer; }
.sp-tplsm-sferone-cielo-scheda-riduci {
  position: absolute; top: 10px; right: 44px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sp-tplsm-text-2, #b6bdc7); cursor: pointer;
}
.sp-tplsm-sferone-cielo-scheda-riduci::before {
  content: ""; display: block; width: 9px; height: 9px; margin: 8px auto 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s ease;
}
.sp-tplsm-sferone-cielo-scheda.is-ridotta .sp-tplsm-sferone-cielo-scheda-riduci::before { transform: translateY(4px) rotate(-135deg); }
.sp-tplsm-sferone-cielo-scheda-riduci:hover { color: var(--sp-tplsm-text, #e9eef4); background: color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 8%, transparent); }
.sp-tplsm-sferone-cielo-scheda-riduci:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
.sp-tplsm-sferone-cielo-scheda.is-ridotta { padding-block: 12px; }
.sp-tplsm-sferone-cielo-scheda.is-ridotta h3 { font-size: 1.05rem; }
.sp-tplsm-sferone-cielo-scheda.is-ridotta > :not(h3):not(.sp-tplsm-sferone-cielo-scheda-tipo):not(button) { display: none; }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-cielo-scheda-riduci::before { transition: none; } }
/* (ricerca, dev0 4/10) il campo nel cielo, in alto a sinistra (telefono: largo, a sinistra dei bottoni + - intera); la lista sotto, a gruppi.
   16 px nel campo: niente zoom automatico di iOS. Le righe sotto l'orizzonte (is-sotto) si leggono ma non si scelgono */
.sp-tplsm-sferone-cielo-cerca { position: absolute; left: clamp(12px, 2vw, 24px); top: clamp(12px, 2vw, 24px); z-index: 7; width: min(380px, calc(100% - 24px - 58px)); pointer-events: auto; }
.sp-tplsm-sferone-cielo-cerca-campo {
  box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 16px; color: var(--sp-tplsm-text, #e9eef4);
  border: 1px solid color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 16%, transparent);
  background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sp-tplsm-sferone-cielo-cerca-campo::placeholder { color: var(--sp-tplsm-muted, #8493a6); opacity: 1; }
/* (F9-ter) il "cancella" dentro il bordo del campo, a destra: un cerchio piccolo con una x sottile (la X del cielo e' un quadrato da 34 px
   fuori dal campo); la x nativa di type=search si spegne solo quando c'e' la nostra (has-cancella: il JS nuovo e la chiave nel dato), cosi'
   non sono mai due e mai zero (CSS nuovo + JS di prima, o senza ui.search.clear: resta la nativa di oggi) */
.sp-tplsm-sferone-cielo-cerca.has-cancella .sp-tplsm-sferone-cielo-cerca-campo { padding-inline-end: 42px; }
.sp-tplsm-sferone-cielo-cerca.has-cancella .sp-tplsm-sferone-cielo-cerca-campo::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.sp-tplsm-sferone-cielo-cerca-cancella {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 14%, transparent); color: var(--sp-tplsm-text-2, #b6bdc7);
}
.sp-tplsm-sferone-cielo-cerca-cancella[hidden] { display: none; }
.sp-tplsm-sferone-cielo-cerca-cancella::before, .sp-tplsm-sferone-cielo-cerca-cancella::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg);
}
.sp-tplsm-sferone-cielo-cerca-cancella::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sp-tplsm-sferone-cielo-cerca-cancella::after, .sp-tplsm-sferone-cielo-cerca-cancella::before { pointer-events: none; }
.sp-tplsm-sferone-cielo-cerca-cancella:hover { color: var(--sp-tplsm-text, #e9eef4); background: color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 22%, transparent); }
.sp-tplsm-sferone-cielo-cerca-cancella:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 1px; }
/* col dito: un po' piu' grande (28 px) e la x un filo piu' lunga */
@media (pointer: coarse) { .sp-tplsm-sferone-cielo-cerca-cancella { top: 6px; right: 6px; width: 28px; height: 28px; } .sp-tplsm-sferone-cielo-cerca-cancella::before, .sp-tplsm-sferone-cielo-cerca-cancella::after { width: 11px; } }
.sp-tplsm-sferone-cielo-cerca-campo:focus { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 1px; }
.sp-tplsm-sferone-cielo-cerca-lista {
  box-sizing: border-box; margin-top: 6px; max-height: min(360px, 55vh); overflow: auto; padding: 6px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sp-tertiary, #d4a35a) 30%, transparent);
  background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sp-tplsm-sferone-cielo-cerca-lista[hidden] { display: none; }
.sp-tplsm-sferone-cielo-cerca-gruppo { padding: 8px 10px 4px; font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-tertiary, #d4a35a); }
.sp-tplsm-sferone-cielo-cerca-voce { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.sp-tplsm-sferone-cielo-cerca-voce:hover, .sp-tplsm-sferone-cielo-cerca-voce[aria-selected="true"] { background: color-mix(in srgb, var(--sp-tplsm-text, #e9eef4) 9%, transparent); }
.sp-tplsm-sferone-cielo-cerca-voce.is-sotto { cursor: default; }
.sp-tplsm-sferone-cielo-cerca-nome { font-size: .92rem; color: var(--sp-tplsm-text, #e9eef4); }
.sp-tplsm-sferone-cielo-cerca-voce.is-sotto .sp-tplsm-sferone-cielo-cerca-nome { color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tplsm-sferone-cielo-cerca-nota, .sp-tplsm-sferone-cielo-cerca-vuoto { font-size: .76rem; line-height: 1.4; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-sferone-cielo-cerca-vuoto { padding: 8px 10px; }
/* (scrittone, dev0 4/10) "Sfera ha generato il tuo cielo…": l'oro dei passi (238) su una riga sopra la didascalia; la luce (--oro-lx) la muove
   il JS una volta; compare (is-su) e sfuma (is-via). Ridotto: senza transizioni */
.sp-tplsm-sferone-cielo-scrittone {
  position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 70px); z-index: 6; width: min(760px, calc(100% - 32px)); margin: 0; transform: translateX(-50%);
  text-align: center; font-size: clamp(1.05rem, 2.1vw, 1.45rem); font-weight: 500; line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  color: transparent;
  background-image:
    radial-gradient(ellipse 44% 170% at var(--oro-lx, -40%) 45%, #fffaf0, #fffaf0 22%, color-mix(in srgb, #fff3d6 70%, transparent) 46%, color-mix(in srgb, #fff3d6 22%, transparent) 68%, transparent 86%),
    linear-gradient(100deg, var(--sp-tertiary, #d4a35a), color-mix(in srgb, var(--sp-tertiary, #d4a35a) 62%, #fff3d6) 55%, var(--sp-tertiary, #d4a35a));
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0 22px color-mix(in srgb, var(--sp-tertiary, #d4a35a) 18%, transparent);
}
.sp-tplsm-sferone-cielo-scrittone.is-su { opacity: 1; }
.sp-tplsm-sferone-cielo-scrittone.is-via { opacity: 0; transition-duration: 1.5s; }   /* (5/10) dissolvenza lenta: resta fino all'interazione, al massimo 15 s */
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-cielo-scrittone { transition: none; } }
.sp-tplsm-sferone-cielo-giorno { max-width: 56ch; font-size: .78rem; line-height: 1.5; color: var(--sp-tplsm-text-2, #b6bdc7); }
@media (max-width: 560px) {
  .sp-tplsm-sferone-cielo-scheda { left: 12px; right: 12px; width: auto; bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 84px); }
  .sp-tplsm-sferone.is-oggetto .sp-tplsm-sferone-cielo-scheda { bottom: max(14px, env(safe-area-inset-bottom, 0px)); }   /* (Fold) in modalita' oggetto la didascalia non c'e': la riserva va alla figura */
}
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-cielo-scheda { animation: none; } }

/* (273, dev0 6/10, Davide via claude-78) TELEFONO IN ORIZZONTALE, palco basso (altezza < 450: Fold chiuso 900x400, 844x390). La scheda in basso a
   sinistra saliva fino alla colonna in alto (ricerca, "dove sei" con la nota della privacy) e la copriva. Qui: con la scheda aperta (is-oggetto) la
   colonna "dove sei" sparisce (il bottone e' gia' spento in modalita' oggetto, la nota non serve) e la scheda parte dove partiva lei, sotto la
   ricerca (stessa distanza: 50 px dalla cima della ricerca), alta al massimo fino al fondo del palco, con lo scorrimento dentro */
@media (orientation: landscape) and (max-height: 449px) {
  .sp-tplsm-sferone.is-oggetto .sp-tplsm-sferone-cielo-dove { opacity: 0; visibility: hidden; }
  .sp-tplsm-sferone-cielo-scheda { top: calc(clamp(12px, 2vw, 24px) + 50px); bottom: auto; max-height: calc(100% - clamp(12px, 2vw, 24px) - 50px - max(14px, env(safe-area-inset-bottom, 0px))); }
}
/* (punta, dev0 7/10) PUNTA IL TELEFONO: la riga sotto "dove sei", nella stessa colonna; i bottoni e la nota hanno le classi di "dove sei"
   (stesso aspetto, stesso is-attivo, stessa modalita' oggetto). Il secondo bottone (Calibra / Smetti) tiene il posto anche nascosto */
.sp-tplsm-sferone-cielo-punta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
/* la nota (Roma, calibra, bussola) sta SOTTO la riga ma fuori dal flusso: la colonna non cambia altezza quando compare, e il disco (geom, che
   misura la colonna a ogni ricalcolo) non si sposta. Sul cielo, con l'ombra del testo per leggerla sulle stelle */
.sp-tplsm-sferone-cielo-punta > .sp-tplsm-sferone-cielo-dove-nota { position: absolute; top: 100%; left: 0; margin-top: 6px; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); pointer-events: none; }
/* (punta, fase 2) LA FOTOCAMERA DIETRO IL CIELO: il video copre il palco sotto il canvas del cielo (fx z 4) e la finestra (z 3); il palco e'
   trasparente, il fondo scuro e' della sezione e resta sotto il video. Le costellazioni lontane (decoro) si tolgono, la didascalia prende
   un'ombra per leggersi sull'immagine. L'icona accesa ha il colore di "attivo" */
.sp-tplsm-sferone-ar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; background: #000; }
.sp-tplsm-sferone.is-ar .sp-tplsm-sferone-lontane { visibility: hidden; }
.sp-tplsm-sferone.is-ar .sp-tplsm-sferone-cielo { text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.sp-tplsm-sferone-cielo-zoom button.sp-tplsm-sferone-cielo-ar.is-attivo { color: var(--sp-tertiary, #d4a35a); }
/* (punta, fase 2) LA NOTTE ROSSA: il tasto dedicato in alto a destra (stile dei bottoni della colonna + -, che scende di una riga), sopra la
   scheda e la modalita' oggetto; acceso: pieno di rosso. Il velo: nel <body>, fisso sopra tutta la pagina (testata compresa, Davide 7/10), rosso
   scuro in moltiplica (resta solo il canale rosso a 150/255: stelle e testi in rosso, il blu nero, la fotocamera in rosso scuro). Solo col cielo
   aperto e la notte accesa (classe sp-tplsm-notte su <html>, messa e tolta dallo skin) */
.sp-tplsm-sferone-cielo-notte {
  position: absolute; right: clamp(12px, 2vw, 24px); top: calc(clamp(12px, 2vw, 24px) + 44px); z-index: 7; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid transparent; border-radius: 10px; cursor: pointer; pointer-events: auto;
  background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 70%, transparent); color: var(--sp-tplsm-text-2, #b6bdc7); transition: color .2s, background .2s;
}
.sp-tplsm-sferone-cielo-notte:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
.sp-tplsm-sferone.has-notte .sp-tplsm-sferone-cielo-zoom { top: calc(clamp(12px, 2vw, 24px) + 44px + 40px); }
.sp-tplsm-sferone.is-notte .sp-tplsm-sferone-cielo-notte { background: #ff2a2a; color: #000; border-color: #ff2a2a; }
.sp-tplsm-sferone-notte-velo { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background: rgb(150, 0, 0); mix-blend-mode: multiply; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
html.sp-tplsm-notte .sp-tplsm-sferone-notte-velo { opacity: 1; visibility: visible; }   /* accesa e spenta in dissolvenza (anche quando il giorno la spegne da sola) */
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-notte-velo { transition: none; } }
/* (punta, fase 2) IL NOME AL CENTRO DEL MIRINO: sotto il mirino, centrato; con la scheda (ref) e' un bottone, senza e' solo testo. Entra sfumando */
.sp-tplsm-sferone-cielo-mira {
  position: absolute; z-index: 6; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: min(320px, calc(100% - 32px));
  padding: 6px 12px; border: 1px solid transparent; border-radius: 12px; background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 62%, transparent);
  color: var(--sp-tplsm-text, #e9eef4); font: inherit; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s;
}
.sp-tplsm-sferone-cielo-mira.is-su { opacity: 1; visibility: visible; }
.sp-tplsm-sferone-cielo-mira.is-su:not(:disabled) { pointer-events: auto; cursor: pointer; border-color: var(--sp-tplsm-a-line, rgba(212, 163, 90, .4)); }
.sp-tplsm-sferone-cielo-mira:disabled { cursor: default; }
.sp-tplsm-sferone-cielo-mira:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 2px; }
.sp-tplsm-sferone-cielo-mira-nome { font-size: .9rem; font-weight: 500; line-height: 1.25; }
.sp-tplsm-sferone-cielo-mira-riga { font-size: .7rem; line-height: 1.35; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-sferone-cielo-mira.is-nuovo > span { animation: sp-tplsm-mira-in .22s ease both; }
@keyframes sp-tplsm-mira-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-sferone-cielo-mira, .sp-tplsm-sferone-cielo-notte { transition: none; } .sp-tplsm-sferone-cielo-mira.is-nuovo > span { animation: none; } }
/* (fase 3a) L'IMMERSIVO: il palco fisso a tutta la viewport (100dvh, sopra la testata e la pagina, sotto il velo della notte), fondo suo (la sezione
   non c'e' piu' sotto), la pagina non scorre; dentro restano la X, i bottoni del puntamento e la colonna + - (la ricerca, "dove sei" e la didascalia
   escono). Margini sulle aree sicure. In piu', dove c'e', il fullscreen vero (lo chiede lo skin nel gesto) */
html.sp-tplsm-immersivo { overflow: hidden; }
.sp-tplsm-sferone-pagina > .sp-tplsm-open-stage.is-immersivo, .sp-tplsm-open-stage.sp-tplsm-sferone.is-immersivo {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 2147482000; transform: none; background: var(--sp-tplsm-deep, #06090f);
}
.sp-tplsm-sferone.is-immersivo .sp-tplsm-sferone-cielo-cerca,
.sp-tplsm-sferone.is-immersivo .sp-tplsm-sferone-cielo-dove > .sp-tplsm-sferone-cielo-dove-bottone,
.sp-tplsm-sferone.is-immersivo .sp-tplsm-sferone-cielo-dove > .sp-tplsm-sferone-cielo-dove-nota,
.sp-tplsm-sferone.is-immersivo .sp-tplsm-sferone-cielo { display: none; }
.sp-tplsm-sferone.is-immersivo .sp-tplsm-sferone-cielo-dove { top: calc(env(safe-area-inset-top, 0px) + clamp(12px, 2vw, 24px)); left: calc(env(safe-area-inset-left, 0px) + clamp(12px, 2vw, 24px)); }
.sp-tplsm-sferone.is-immersivo .sp-tplsm-sferone-cielo-dove > .sp-tplsm-sferone-cielo-punta { margin-top: 0; }
/* (fase 3b) il livello WebGL delle stelle: sotto il canvas 2D (z 2) e sopra il video della fotocamera (z 1, prima nel palco) */
.sp-tplsm-sferone-strato { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
/* (dev0 8/10) lo sferone di /sfera: la zona appena FUORI dal bordo destro del palco, nell'avoid della Sfera (template spheremesh2, contesto
   'sferone'). Le etichette dei nodi stanno a destra del nodo: vicino al bordo uscirebbero tagliate (390 px); toccando questa zona si nascondono
   e tornano quando la Sfera gira. Invisibile, non prende i gesti */
.sp-tplsm-sferone > .sp-tplsm-sferone-fuori { position: absolute; top: 0; bottom: 0; left: 100%; width: 240px; pointer-events: none; }

/* ---- LO STORE ONLINE (busta kind "store", 10/10, smsiter): il negozio a nodi sopra la pagina (Negozio, nello skin JS). Colori e misure dai
   token dello skin; i disegni dei prodotti coi colori della Sfera (--sp-sphere-*). html.is-sp-store blocca lo scorrimento della pagina */
html.is-sp-store { overflow: hidden; }
.sp-tplsm-store-root, .sp-tplsm-store-root * { box-sizing: border-box; }
.sp-tplsm-store-root { font-family: var(--sp-font, Quicksand), system-ui, sans-serif; color: var(--sp-tplsm-text); }
/* font e colore ereditati; i bottoni sp-tplsm-store-btn hanno la loro specificita' (root + classe), sopra questa regola */
.sp-tplsm-store-root button, .sp-tplsm-store-root input { font: inherit; color: inherit; }
.sp-tplsm-store-volo { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1003; }
.sp-tplsm-store { position: fixed; inset: 0; z-index: 1000; background: var(--sp-tplsm-bg); display: none; flex-direction: column; overflow: auto; overscroll-behavior: contain; }
.sp-tplsm-store.is-aperto { display: flex; }
.sp-tplsm-store-testa { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 16px clamp(16px, 6vw, 130px);
  background: var(--sp-tplsm-glass); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sp-tplsm-line); }
.sp-tplsm-store-titolo { display: flex; flex-direction: column; gap: 2px; }
.sp-tplsm-store-titolo h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 400; }
/* (S7 punto 8) il badge oro e' generale: lo Store tiene la sua classe, la card del login usa sp-tplsm-badge-oro (sp-tplsm-badge e' gia' la pillola teal dell'eroe, r. 307) */
:is(.sp-tplsm-badge-oro, .sp-tplsm-store-badge) { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-tertiary, #d4a35a); }
:is(.sp-tplsm-badge-oro, .sp-tplsm-store-badge)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-tertiary, #d4a35a); }
.sp-tplsm-store-azioni { display: flex; gap: 8px; align-items: center; }
.sp-tplsm-store-icobtn { height: 44px; min-width: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--sp-tplsm-line); background: var(--sp-tplsm-surface); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sp-tplsm-store-icobtn:is(:hover, :focus-visible) { border-color: var(--sp-tplsm-p-line); outline: none; }
.sp-tplsm-store-icobtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sp-tplsm-store-icobtn svg { flex: none; }   /* (350-bis) nella testata stretta non si restringe */
.sp-tplsm-store-conta { min-width: 22px; height: 22px; border-radius: 11px; background: var(--sp-primary, #0abab5); color: var(--sp-tplsm-on-primary); font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; padding: 0 6px; }
.sp-tplsm-store-conta[data-n="0"] { background: var(--sp-tplsm-surface-2); color: var(--sp-tplsm-muted); }
.sp-tplsm-store-chiudi svg { width: 22px; height: 22px; stroke-width: 1.8; }
@media (max-width: 520px) { .sp-tplsm-store-icobtn .sp-tplsm-store-etic { display: none; } }
.sp-tplsm-store-scaffali { padding: clamp(20px, 4vw, 48px) clamp(16px, 6vw, 130px) 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
@media (max-width: 1000px) { .sp-tplsm-store-scaffali { grid-template-columns: repeat(2, 1fr); } .sp-tplsm-store-mensola { display: none; } }
@media (max-width: 520px) { :is(.sp-tplsm-tessera, .sp-tplsm-store-card) :is(.sp-tplsm-tessera-riga, .sp-tplsm-store-riga) { flex-direction: column; align-items: flex-start; gap: 2px; } }
.sp-tplsm-store-intro { grid-column: 1 / -1; color: var(--sp-tplsm-text-2); margin: 0 0 4px; max-width: 62ch; line-height: 1.6; }
/* (S7 punto 8, r-vi; j-edi 3597, 3615) LA TESSERA: la card dello Store diventata generale, una copia sola. Le regole valgono per
   sp-tplsm-tessera (le porte del login) e per sp-tplsm-store-card, che resta com'e' nel markup dello Store (template e skin JS: 0 righe).
   Dentro: -disegno (4:3 con l'alone), -riga, -nome (nello Store: store-disegno, store-riga, h3). Gli stati sono quelli delle card
   cliccabili (§22-bis; GRAMMATICA-VISIVA §4.3): alone, nome al primary e anello al fuoco, NESSUN sollevamento (prima lo Store saliva di 3 px).
   Il fondo e' un token: dentro un vetro si schiarisce in trasparenza (GRAMMATICA §4.1, niente vetro pieno nel vetro). */
:is(.sp-tplsm-tessera, .sp-tplsm-store-card) { position: relative; border: 1px solid var(--sp-tplsm-line); border-radius: var(--sp-tplsm-radius-xl);
  background: var(--sp-tplsm-tessera-fondo, linear-gradient(180deg, var(--sp-tplsm-surface), color-mix(in srgb, var(--sp-tplsm-surface) 60%, var(--sp-tplsm-bg))));
  padding: clamp(12px, 1.6vw, 20px); display: flex; flex-direction: column; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--sp-tplsm-hover-t, .25s), box-shadow var(--sp-tplsm-hover-t, .25s); }
:is(.sp-tplsm-tessera, .sp-tplsm-store-card):is(:hover, :focus-visible) { border-color: var(--sp-tplsm-hover-line); box-shadow: var(--sp-tplsm-hover-glow); transform: none; }
:is(.sp-tplsm-tessera, .sp-tplsm-store-card):focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
:is(.sp-tplsm-tessera, .sp-tplsm-store-card) :is(.sp-tplsm-tessera-disegno, .sp-tplsm-store-disegno) { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--sp-tplsm-radius); background: radial-gradient(circle at 50% 45%, var(--sp-tplsm-p-dim), transparent 70%); }
:is(.sp-tplsm-tessera, .sp-tplsm-store-card) :is(.sp-tplsm-tessera-nome, h3) { margin: 0; font-size: clamp(.95rem, 1.3vw, 1.1rem); font-weight: 500; transition: color var(--sp-tplsm-hover-t, .25s); }
:is(.sp-tplsm-tessera, .sp-tplsm-store-card):is(:hover, :focus-visible) :is(.sp-tplsm-tessera-nome, h3) { color: var(--sp-tplsm-hover-ink); }
:is(.sp-tplsm-tessera, .sp-tplsm-store-card) :is(.sp-tplsm-tessera-riga, .sp-tplsm-store-riga) { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
/* solo dello Store: la sua transizione e' quella della tessera piu' l'opacita' del volo (is-in-volo) */
.sp-tplsm-store-card { transition: border-color var(--sp-tplsm-hover-t, .25s), box-shadow var(--sp-tplsm-hover-t, .25s), opacity .6s .35s; }
.sp-tplsm-store-prezzo { color: var(--sp-secondary, #3ff0e8); font-weight: 500; }
.sp-tplsm-store-prezzo--grande { font-size: 1.4rem; }
.sp-tplsm-store-mensola { grid-column: 1 / -1; height: 1px; background: linear-gradient(90deg, transparent, var(--sp-tplsm-p-line), transparent); margin: -6px 0; }
.sp-tplsm-store-disegno { display: grid; }
svg.sp-tplsm-store-prodotto { width: 100%; height: 100%; display: block; }
svg.sp-tplsm-store-prodotto line { stroke: var(--sp-sphere-node, #0abab5); stroke-width: 1.1; stroke-linecap: round; opacity: .75; vector-effect: non-scaling-stroke; }
svg.sp-tplsm-store-prodotto circle { fill: var(--sp-sphere-pulse, #3ff0e8); }
svg.sp-tplsm-store-prodotto circle.sp-tplsm-store-hub { fill: var(--sp-sphere-hub, #d4a35a); }
/* (dev0 11/10) il prodotto a nodi 3D (Neg3D): fermo nelle card e nel carrello, vivo nella scheda (si trascina, data-vivo) */
canvas.sp-tplsm-store-modello { width: 100%; height: 100%; display: block; border-radius: inherit; outline: none; }
canvas.sp-tplsm-store-modello[data-vivo] { cursor: grab; }
canvas.sp-tplsm-store-modello[data-vivo]:active { cursor: grabbing; }
canvas.sp-tplsm-store-modello:focus-visible { box-shadow: 0 0 0 2px var(--sp-primary, #0abab5); }
.sp-tplsm-store-aiuto { margin: 8px 0 0; text-align: center; color: var(--sp-tplsm-muted); font-size: .78rem; }
/* durante il volo i disegni li fanno i nodi della Sfera: le card restano vuote finche' non arrivano */
.sp-tplsm-store-card .sp-tplsm-store-disegno svg { transition: opacity .25s; }
.sp-tplsm-store.is-in-volo .sp-tplsm-store-card { opacity: 0; }
.sp-tplsm-store.is-in-volo .sp-tplsm-store-card .sp-tplsm-store-disegno svg { opacity: 0; }
.sp-tplsm-store-card .sp-tplsm-store-disegno canvas { transition: opacity .25s; }
.sp-tplsm-store.is-in-volo .sp-tplsm-store-card .sp-tplsm-store-disegno canvas { opacity: 0; }
/* i pannelli: scheda, carrello, checkout, conferma, ordini */
.sp-tplsm-store-velo { position: fixed; inset: 0; z-index: 1001; background: color-mix(in srgb, var(--sp-tplsm-deep) 62%, transparent); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; padding: 16px; }
.sp-tplsm-store-velo.is-aperto { display: flex; }
.sp-tplsm-store-pannello { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--sp-tplsm-p-line); border-radius: var(--sp-tplsm-radius-xl);
  background: var(--sp-tplsm-surface); padding: clamp(18px, 3vw, 32px); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.sp-tplsm-store-pannello h3 { margin: 0 0 8px; font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 1.9rem); padding-right: 48px; }
.sp-tplsm-store-pannello .sp-tplsm-store-x { position: absolute; top: 12px; right: 12px; }
.sp-tplsm-store-scheda { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); align-items: center; }
@media (max-width: 700px) { .sp-tplsm-store-scheda { grid-template-columns: 1fr; } }
.sp-tplsm-store-scheda .sp-tplsm-store-disegno { aspect-ratio: 1 / 1; border-radius: var(--sp-tplsm-radius); background: radial-gradient(circle at 50% 45%, var(--sp-tplsm-p-dim), transparent 70%); }
.sp-tplsm-store-descr { color: var(--sp-tplsm-text-2); line-height: 1.6; }
.sp-tplsm-store-qty { display: inline-flex; align-items: center; border: 1px solid var(--sp-tplsm-line); border-radius: 12px; overflow: hidden; }
.sp-tplsm-store-qty button { width: 44px; height: 44px; border: 0; background: var(--sp-tplsm-surface-2); cursor: pointer; }
.sp-tplsm-store-qty output { min-width: 44px; text-align: center; }
.sp-tplsm-store-root .sp-tplsm-store-btn { height: var(--sp-tplsm-btn-h); padding: 0 var(--sp-tplsm-btn-px); border-radius: var(--sp-tplsm-btn-r); border: 0; background: var(--sp-primary, #0abab5); color: var(--sp-tplsm-on-primary); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 0 24px var(--sp-tplsm-p-dim); text-decoration: none; }
.sp-tplsm-store-root .sp-tplsm-store-btn:is(:hover, :focus-visible) { background: var(--sp-secondary, #3ff0e8); outline: none; }
.sp-tplsm-store-root .sp-tplsm-store-btn--sec { background: transparent; color: var(--sp-tplsm-text); border: 1px solid var(--sp-tplsm-line); box-shadow: none; }
.sp-tplsm-store-root .sp-tplsm-store-btn--sec:is(:hover, :focus-visible) { border-color: var(--sp-tplsm-p-line); background: transparent; }
.sp-tplsm-store-root .sp-tplsm-store-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sp-tplsm-store-riga-azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.sp-tplsm-store-elenco { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-tplsm-store-voce { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--sp-tplsm-line); border-radius: 14px; }
.sp-tplsm-store-voce svg { width: 56px; height: 56px; }
.sp-tplsm-store-voce canvas { width: 56px; height: 56px; }
.sp-tplsm-store-nome { font-weight: 500; }
.sp-tplsm-store-sub { color: var(--sp-tplsm-muted); font-size: .85rem; }
.sp-tplsm-store-voce .sp-tplsm-store-qty button { width: 34px; height: 34px; }
.sp-tplsm-store-voce .sp-tplsm-store-qty output { min-width: 30px; }
.sp-tplsm-store-root .sp-tplsm-store-togli { background: none; border: 0; color: var(--sp-tplsm-muted); cursor: pointer; font-size: .85rem; text-decoration: underline; }
.sp-tplsm-store-totale { display: flex; justify-content: space-between; font-size: 1.1rem; padding-top: 10px; border-top: 1px solid var(--sp-tplsm-line); }
.sp-tplsm-store-vuoto { color: var(--sp-tplsm-muted); padding: 12px 0; }
form.sp-tplsm-store-checkout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { form.sp-tplsm-store-checkout { grid-template-columns: 1fr; } }
.sp-tplsm-store-campo { display: flex; flex-direction: column; gap: 6px; }
.sp-tplsm-store-largo { grid-column: 1 / -1; }
.sp-tplsm-store-campo label { font-size: .85rem; color: var(--sp-tplsm-text-2); }
.sp-tplsm-store-campo input { height: 46px; border-radius: 10px; border: 1px solid var(--sp-tplsm-line); background: var(--sp-tplsm-bg); padding: 0 12px; }
.sp-tplsm-store-campo input:focus { outline: none; border-color: var(--sp-primary, #0abab5); }
.sp-tplsm-store-err { color: var(--sp-danger, #e8746c); font-size: .8rem; min-height: 1em; }
.sp-tplsm-store-campo.is-errore input { border-color: var(--sp-danger, #e8746c); }
.sp-tplsm-store-pagamento { grid-column: 1 / -1; border: 1px dashed var(--sp-tplsm-a-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-tplsm-store-nota { color: var(--sp-tertiary, #d4a35a); font-size: .9rem; }
.sp-tplsm-store-conferma { text-align: center; padding: 12px 0; }
.sp-tplsm-store-conferma h3 { padding-right: 0; }
.sp-tplsm-store-conferma .sp-tplsm-store-riga-azioni { justify-content: center; }
.sp-tplsm-store-gioco { margin: 22px auto 0; max-width: 46ch; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.5; }
.sp-tplsm-store-numero { color: var(--sp-tplsm-muted); font-size: .9rem; }
.sp-tplsm-store-ordine { border: 1px solid var(--sp-tplsm-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sp-tplsm-store-ordine-testa { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sp-tplsm-store-stato { color: var(--sp-secondary, #3ff0e8); font-size: .85rem; }
.sp-tplsm-store-avviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1004; background: var(--sp-tplsm-surface-2); border: 1px solid var(--sp-tplsm-p-line); border-radius: 12px; padding: 12px 18px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.sp-tplsm-store-avviso.is-on { opacity: 1; }
.sp-tplsm-store-piede { margin-top: auto; padding: 18px clamp(16px, 6vw, 130px); color: var(--sp-tplsm-muted); font-size: .8rem; border-top: 1px solid var(--sp-tplsm-line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .sp-tplsm-store-root * { transition: none !important; animation: none !important; } }

/* AREA RISERVATA 2.0 dopo il blocco S (dev0 11/10, Davide sugli scatti a 390): il minimo. Solo l'area loggata (.sp-tpl-reserved--app),
   il login e le altre pagine non cambiano */
/* 1) l'header fisso: lo compensava la testata della pagina (#55, spenta col blocco S). Senza testata l'area e' la prima sezione e aveva solo
   meta' ritmo sopra (la regola delle sezioni, sopra): sotto l'header finivano il bordo e mezzo avatar. Topbar + header + meta' ritmo, come
   la testata */
#sp-main-content > .sp-tpl-reserved--app:first-child { padding-top: calc(var(--sp-tplsm-top) + var(--sp-tplsm-ritmo-l) / 2); }
/* 2) il menu a tendina del telefono: si apre toccando il riquadro utente, ma la freccina che lo dice non si vedeva mai (basic-2.0 la accende
   nella media query e poi la rispegne con una regola uguale scritta dopo). Qui con una classe in piu' */
@media (max-width: 768px) {
  .sp-tpl-account-sidebar .sp-tpl-account-user-caret { display: block; border-top-color: var(--sp-tplsm-muted, #8493a6); }
}
/* 3) «Il mio account» sul telefono: righe etichetta | valore invece di etichetta sopra e valore sotto, valori a misura di testo */
@media (max-width: 520px) {
  .sp-tpl-dash-account-grid { gap: 0; }
  .sp-tpl-dash-account-item { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--sp-unit); padding: 10px 0; border-top: 1px solid var(--sp-tplsm-line-soft, rgba(233, 238, 244, .06)); }
  .sp-tpl-dash-account-item:first-child { border-top: 0; padding-top: 0; }
  .sp-tpl-dash-account-item:last-child { padding-bottom: 0; }
  .sp-tpl-dash-account-label { flex: 0 0 auto; font-size: .8rem; }
  .sp-tpl-dash-account-value { min-width: 0; font-size: .92rem; text-align: right; overflow-wrap: anywhere; }
  .sp-tpl-dash-completion-foot { margin-top: 10px; }
}

/* IL TESSERACT, primo pezzo (dev0 11/10): l'area riservata su /gate (spheremesh2::reservedArea). Tutto sotto .sp-tplsm-tess, che esce SOLO
   da reservedArea: il ponte /area-riservata (reservedHome) e le pagine pubbliche non hanno questa classe e non cambiano.
   La Sfera dietro e' il canvas del motore (contesto 'page'); sopra i widget del ponte (dash-grid); i nodoni sono le voci dei launcher;
   le voci si aprono nel DIALOG 2.0 del core (345-bis): qui nessuna regola per il dialog */
.sp-tplsm-tess { position: relative; min-height: calc(100dvh - var(--sp-tplsm-top)); overflow: hidden; }
.sp-tplsm-tess::after { display: none; }
.sp-tplsm-tess-palco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sp-tplsm-tess-palco .sp-tplsm-sphere--tess { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.sp-tplsm-tess > .sp-tpl-container { position: relative; z-index: 1; display: grid; gap: var(--sp-tplsm-ritmo-m); max-width: 1180px; }
.sp-tplsm-tess-testa .sp-tpl-dash-header { margin: 0; }
/* i nodoni: una costellazione a capo, ognuno con il suo nucleo che dice lo stato */
.sp-tplsm-tess-nodi { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.sp-tplsm-tess-nodo { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; min-width: 210px; max-width: 100%;
  padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--sp-secondary, #3ff0e8) 22%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--sp-tplsm-text, #e9eef4); font: inherit; text-align: left; cursor: pointer; text-decoration: none;
  transition: border-color .25s var(--sp-tplsm-ease, ease), box-shadow .25s var(--sp-tplsm-ease, ease), transform .25s var(--sp-tplsm-ease, ease); }
.sp-tplsm-tess-nodo:hover { border-color: color-mix(in srgb, var(--sp-secondary, #3ff0e8) 60%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--sp-secondary, #3ff0e8) 22%, transparent); }
.sp-tplsm-tess-nodo:hover { transform: translateY(-1px); }
.sp-tplsm-tess-nodo:focus-visible { outline: 2px solid var(--sp-primary, #0abab5); outline-offset: 3px; }
.sp-tplsm-tess-nucleo { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--sp-secondary, #3ff0e8); box-shadow: 0 0 10px var(--sp-secondary, #3ff0e8); }
.sp-tplsm-tess-nodo.has-badge .sp-tplsm-tess-nucleo { background: #f0a23f; box-shadow: 0 0 12px #f0a23f; }
.sp-tplsm-tess-icona { display: none; }
.sp-tplsm-tess-nome { font-weight: 600; font-size: .98rem; }
.sp-tplsm-tess-sotto { grid-column: 2; font-size: .8rem; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tplsm-tess-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #f0a23f; color: #06090f; font-size: .72rem; font-weight: 700; text-align: center; }
/* i widget del ponte (account, completamento, sicurezza) sopra i nodoni: la loro griglia, su vetro */
.sp-tplsm-tess-stato > .sp-tpl-dash-card { background: color-mix(in srgb, var(--sp-tplsm-surface, #0d1421) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 520px) {
  .sp-tplsm-tess-nodi { gap: 10px; }
  .sp-tplsm-tess-nodo { flex: 1 1 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-tplsm-tess-nodo { transition: none; }
  .sp-tplsm-tess-nodo:hover { transform: none; }
}

/* =====================================================================
 * (passo 1, dev0 11/10; KB targhette-sferone.md §0) LO STORE NELLO SPAZIO DEL DIALOG DELLO SFERONE. La finestra dello sferone (.is-store)
 * diventa lo spazio: a tutto stage, senza cornice ne' fondo; lo Store ci sta dentro, non modale; testata, breadcrumb e sito restano.
 * Le card di oggi sono i pannelli (gli sparkles li mette il blocco nodi-bordo: la finestra e' marcata); il titolo sotto il breadcrumb a
 * sinistra, i bottoni fluttuanti sulla stessa riga a destra; carrello, ordini, scheda e checkout sono pannelli nello stesso spazio. Misure dal JS:
 * --sp-store-top (sotto il breadcrumb), --sp-store-tit, --sp-store-cols, --sp-store-cw, --sp-store-gap
 * ===================================================================== */
/* (prova 3) la cornice la toglie is-nuda, che lo Store prende insieme a is-store (skin dalla 514); qui resta lo SPAZIO dello Store */
.sp-tplsm-sferone-finestra.is-store { left: 0; top: 0; width: 100%; height: 100%; transform: none; opacity: 1; transition: none; pointer-events: none; }
.sp-tplsm-sferone-finestra.is-store > .sp-tplsm-sferone-x { display: none; }
.sp-tplsm-sferone-finestra.is-store > .sp-tplsm-sferone-contenuto { position: absolute; inset: 0; }
.sp-tplsm-open.is-sferone-store > :is(.sp-tplsm-open-title, .sp-tplsm-sferone-invito, .sp-tplsm-sferone-occhiello, .sp-tplsm-open-cue) { visibility: hidden; }
.sp-tplsm-store-root.is-nello-spazio { position: absolute; inset: 0; }
/* (passo 1-bis) lo Store non e' un riquadro: sono parti nella pagina, sotto il breadcrumb, in un flex a righe: il titolo, la barra Ordini/Carrello/X,
   le card. Se non ci stanno, la sezione dello sferone si allunga (is-store-lungo, --sp-store-alto dal JS) e scorre la pagina: nessuno scorrimento
   interno. La testa non fa scatola (contents): titolo e barra sono figli dello Store, cosi' la barra puo' restare appiccicata (sticky) in tutto lo Store */
.is-nello-spazio .sp-tplsm-store { position: absolute; inset: var(--sp-store-top, 24px) 0 0; z-index: 1; background: none; flex-flow: row wrap; align-content: flex-start; align-items: flex-start;
  overflow: visible; overscroll-behavior: auto; padding: 0 0 max(16px, env(safe-area-inset-bottom, 0px)); }
.sp-tplsm-open.is-sferone-store.is-store-lungo { min-height: var(--sp-store-alto); }
.is-nello-spazio .sp-tplsm-store-testa { display: contents; }
.is-nello-spazio .sp-tplsm-store-titolo { flex: 1 1 auto; min-width: 0; margin: 0 0 12px; padding-left: clamp(16px, 4vw, 48px); pointer-events: auto; }
/* la barra: nel flusso, a destra; appiccicata in alto (sotto la testata del sito) mentre la pagina scorre, dentro lo Store */
.is-nello-spazio .sp-tplsm-store-azioni { position: sticky; top: calc(var(--sp-tplsm-head, 72px) + 8px); flex: none; margin: 0 clamp(12px, 3vw, 40px) 12px 0; z-index: 4; pointer-events: auto;
  padding: 5px; gap: 4px; border-radius: 16px; border: 1px solid var(--sp-tplsm-p-line); background: color-mix(in srgb, var(--sp-tplsm-surface) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* (passo 1-bis) LA BARRA, variante A (Davide 12/10): icone a 24 px con la scritta sotto (dal dato: ui.ordini, ui.carrello), il numero del carrello
   e' un pallino sull'icona (solo da 1 in su, con l'onda quando si aggiunge), la X senza scritta, centrata, dopo un filo verticale. Zone >= 44x44 */
.is-nello-spazio .sp-tplsm-store-azioni { padding: 6px; gap: 0; border-radius: 22px; align-items: stretch; }
.is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-icobtn { position: relative; border-color: transparent; background: transparent; flex-direction: column; justify-content: center; gap: 3px;
  height: auto; min-height: 50px; min-width: 64px; padding: 4px 8px; border-radius: 16px; font-size: 12.5px; line-height: 1.1; }
.is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-icobtn:is(:hover, :focus-visible) { border-color: var(--sp-tplsm-p-line); }
.is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-icobtn svg { width: 24px; height: 24px; }
.is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-etic { display: block; }
.is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-chiudi { min-width: 52px; margin-left: 9px; }
.is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-chiudi::before { content: ""; position: absolute; left: -5px; top: 4px; bottom: 4px; width: 1px; background: var(--sp-tplsm-p-line); }
.is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-conta { position: absolute; top: 2px; left: calc(50% + 3px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; }
.is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-conta[data-n="0"] { display: none; }
.is-nello-spazio .sp-tplsm-store-conta.is-onda { animation: sp-tplsm-store-onda .7s cubic-bezier(.19, 1, .22, 1); }
@keyframes sp-tplsm-store-onda { from { transform: scale(1.35); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-primary, #0abab5) 75%, transparent); } to { transform: none; box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .is-nello-spazio .sp-tplsm-store-conta.is-onda { animation: none; } }
/* sul telefono (2 colonne) il titolo e la barra stanno sulla colonna delle card: il titolo su una riga sua, la barra sotto, a destra */
@media (max-width: 699px) {
  .is-nello-spazio .sp-tplsm-store { --sp-store-rientro: max(12px, calc((100% - (var(--sp-store-cols, 2) * (var(--sp-store-cw, 150px) + var(--sp-store-gap, 12px)) - var(--sp-store-gap, 12px))) / 2)); }
  .is-nello-spazio .sp-tplsm-store-titolo { flex: 0 0 100%; box-sizing: border-box; margin-bottom: 8px; padding-inline: var(--sp-store-rientro); }
  .is-nello-spazio .sp-tplsm-store-azioni { margin: 0 var(--sp-store-rientro) 12px auto; }
  .is-nello-spazio .sp-tplsm-store-card .sp-tplsm-store-riga { flex-direction: column; align-items: flex-start; gap: 2px; } }   /* nome e prezzo uno sotto l'altro (a 673 il prezzo usciva dalla card) */
.is-nello-spazio .sp-tplsm-store-scaffali { position: static; flex: 0 0 100%; box-sizing: border-box; margin: var(--sp-store-aria, 0px) 0 0;   /* (passo 1-bis) una riga intera; centrate in verticale se c'e' spazio (--sp-store-aria dal JS) */
  padding: 0 clamp(12px, 3vw, 40px); grid-template-columns: repeat(var(--sp-store-cols, 3), var(--sp-store-cw, 1fr)); gap: var(--sp-store-gap, 20px); justify-content: center; align-content: start; transition: opacity .3s; }
.is-nello-spazio .sp-tplsm-store-card { pointer-events: auto; }
/* i canvas dello Store nello stage: la regola dello stage (.sp-tplsm-open-stage canvas: assoluto a tutto riquadro, pointer-events auto, grab)
   non li deve prendere. Il volo resta sopra la pagina e non tocca; i modelli stanno nel loro riquadro; solo quello vivo della scheda si afferra */
.is-nello-spazio canvas.sp-tplsm-store-volo { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; cursor: auto; }
.is-nello-spazio .sp-tplsm-store-disegno { position: relative; }
.is-nello-spazio canvas.sp-tplsm-store-modello { position: static; inset: auto; pointer-events: none; cursor: auto; }   /* la miniatura del carrello resta nel flusso (56 px) */
.is-nello-spazio .sp-tplsm-store-disegno > canvas.sp-tplsm-store-modello { position: absolute; inset: 0; width: 100%; height: 100%; }   /* card e scheda: dentro il loro riquadro */
.is-nello-spazio canvas.sp-tplsm-store-modello[data-vivo] { pointer-events: auto; cursor: grab; }
.is-nello-spazio canvas.sp-tplsm-store-modello[data-vivo]:active { cursor: grabbing; }
.is-nello-spazio .sp-tplsm-store-mensola { display: none; }
.is-nello-spazio .sp-tplsm-store-intro { justify-self: center; text-align: center; font-size: .9rem; margin: 0; }
@media (max-width: 699px) { .is-nello-spazio .sp-tplsm-store-intro { display: none; } }
.is-nello-spazio .sp-tplsm-store > .sp-tplsm-store-piede { display: none; }
.is-nello-spazio .sp-tplsm-store-piede { margin: 18px 0 0; padding: 14px 0 0; }
.sp-tplsm-store-root.is-pannello .sp-tplsm-store-scaffali, .sp-tplsm-store-root.is-pannello .sp-tplsm-store-titolo > * { opacity: .25; }
.is-nello-spazio .sp-tplsm-store-velo { position: absolute; inset: calc(var(--sp-store-top, 24px) + var(--sp-store-tit, 0px)) 0 0;
  top: var(--sp-store-velo-top, calc(var(--sp-store-top, 24px) + var(--sp-store-tit, 0px))); bottom: auto; height: var(--sp-store-velo-h, auto);   /* (passo 1-bis) la parte che si vede */ z-index: 3; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 12px 16px; pointer-events: auto; }
.is-nello-spazio .sp-tplsm-store-velo.is-via { display: flex; pointer-events: none; }
.is-nello-spazio .sp-tplsm-store-pannello { max-height: 100%; opacity: 0; transform: scale(.96); transition: opacity .3s ease, transform .45s cubic-bezier(.19, 1, .22, 1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.is-nello-spazio .sp-tplsm-store-pannello.is-su { opacity: 1; transform: none; }
.is-nello-spazio .sp-tplsm-store-pannello .sp-tplsm-store-x { z-index: 2; }   /* sopra il modello della scheda (il riquadro ora e' posizionato) */
.is-nello-spazio .sp-tplsm-store-velo.is-via .sp-tplsm-store-pannello { transition-duration: .2s; }

/* (passo 1-ter, Davide 12/10 «mi piace molto») sul telefono, finche' le card stanno su 2 colonne (lo Store nello spazio sotto 700 px, come la
   regola del JS cols = 2): margine laterale 16 px e la barra a tutta larghezza della griglia, con Ordini e Carrello a parti uguali e la X a
   misura fissa dopo il filo. Le card prendono la larghezza che resta (2 colonne uguali); se cosi' non stanno in altezza, la sezione si allunga
   e scorre la pagina, come gia' fa il JS (misura la griglia vera). Al computer niente cambia. */
@media (max-width: 699px) {
  .is-nello-spazio .sp-tplsm-store { --sp-store-rientro: 16px; }
  .is-nello-spazio .sp-tplsm-store-scaffali { padding-inline: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-nello-spazio .sp-tplsm-store-azioni { flex: 0 0 calc(100% - 32px); box-sizing: border-box; margin: 0 16px 12px; }
  .is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-icobtn { flex: 1 1 0; min-width: 0; }
  .is-nello-spazio .sp-tplsm-store-azioni .sp-tplsm-store-chiudi { flex: 0 0 56px; } }

/* (orizzontale V1, j-miranda 14/10, Davide 12/10; dal mockup oriz-v1.css 8e1f3675 di prometeo/j-liara, senza forzature di priorità) IL CIELO SUL TELEFONO
   IN ORIZZONTALE BASSO (altezza < 450), solo col cielo aperto: testata ridotta a una barra di 36 px; i comandi tutti presenti su una riga in
   basso a destra (+ − centra schermo foto, occhio), la X resta in alto staccata; la targhetta su una riga (nome e tipo) e alta fino al fondo;
   la didascalia del cielo ridotta ai soli crediti (proposta). In fondo al file: a pari specificita' vince l'ordine (dopo il blocco 273 ci sono
   ancora regole dei comandi, per esempio .has-notte). Il resto del sito, il verticale e gli schermi grandi non cambiano */
@media (orientation: landscape) and (max-height: 449px) {
  html:has(.sp-tplsm-sferone-finestra.is-cielo) { --sp-tpl-header-h: 36px; --sp-tpl-topbar-h: 0px; --sp-tplsm-oriz-top: 36px; }
  html:has(.sp-tplsm-sferone-finestra.is-cielo) .sp-tpl-header { height: 36px; overflow: hidden; }
  html:has(.sp-tplsm-sferone-finestra.is-cielo) .sp-tpl-header > * { height: 36px; min-height: 0; }
  html:has(.sp-tplsm-sferone-finestra.is-cielo) .sp-tpl-header .sp-tplsm-logo-mark { width: calc(var(--sp-tplsm-logo-mode, 0) * 24px); height: 24px; margin-inline-end: calc(var(--sp-tplsm-logo-mode, 0) * 8px); }
  html:has(.sp-tplsm-sferone-finestra.is-cielo) .sp-tpl-header .sp-tpl-logo-brand { font-size: .95rem; }
  /* i comandi: su una riga in basso a destra; anche in modalita' oggetto (+ e − li porta sulla lente lo skin) */
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-zoom, .sp-tplsm-sferone.has-notte .sp-tplsm-sferone-cielo-zoom { top: auto; bottom: max(10px, env(safe-area-inset-bottom, 0px)); right: calc(12px + 34px + 14px + 34px + 6px); flex-direction: row; }
  .sp-tplsm-sferone.is-oggetto .sp-tplsm-sferone-cielo-zoom { opacity: 1; visibility: visible; pointer-events: auto; }
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-notte { top: auto; bottom: max(10px, env(safe-area-inset-bottom, 0px)); right: calc(12px + 34px + 14px); }
  /* la didascalia nella colonna di sinistra, fino alla riga dei comandi: in orizzontale basso solo i CREDITI (proposta; titolo e giorno tornano in verticale) */
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo { left: 12px; right: 310px; width: auto; bottom: max(10px, env(safe-area-inset-bottom, 0px)); padding-inline: 4px; align-items: flex-start; text-align: left; }
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo > :not(.sp-tplsm-sferone-cielo-crediti) { display: none; }
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-crediti { max-width: none; font-size: .62rem; line-height: 1.4; }
  /* la targhetta: nome e tipo sulla stessa riga; alta fino al fondo dello SCHERMO (il 100% di oggi e' quello di un contenitore piu' basso del palco) */
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-scheda { padding: 10px 14px 12px; top: calc(12px + 50px); bottom: auto; height: auto; width: min(340px, 44vw);
    --sp-tplsm-scheda-max: calc(100dvh - var(--sp-tplsm-oriz-top, 0px) - 12px - 50px - max(10px, env(safe-area-inset-bottom, 0px)));   /* letta dallo stile in linea dello skin */
    display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-scheda > * { grid-column: 1 / -1; }
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-scheda > h3 { grid-column: 1; font-size: 1.05rem; padding-inline-end: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-scheda > .sp-tplsm-sferone-cielo-scheda-tipo { grid-column: 2; margin: 0 70px 0 0; font-size: .68rem; white-space: nowrap; }
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-scheda > :is(button.sp-tplsm-sferone-cielo-scheda-x, button.sp-tplsm-sferone-cielo-scheda-riduci) { grid-column: auto; }
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-scheda > :nth-child(n+3):not(button) { margin-top: 8px; }
  .sp-tplsm-sferone .sp-tplsm-sferone-cielo-scheda-x, .sp-tplsm-sferone .sp-tplsm-sferone-cielo-scheda-riduci { top: 6px; }
}
/* (orizzontale V1) Fold aperto e tablet in orizzontale, touch: testata e colonna di oggi, ma i comandi restano anche con la scheda aperta */
@media (orientation: landscape) and (min-height: 450px) and (hover: none) {
  .sp-tplsm-sferone.is-oggetto .sp-tplsm-sferone-cielo-zoom { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* =====================================================================
 * AREA RISERVATA come i pannelli della Sfera (C1 del Gate; r-jayce, CANDIDATO a secco). v4, 18/10: la grammatica visiva 0.2
 * (projects/spheremesh/GRAMMATICA-VISIVA.md 41974367) e le decisioni di j-edi 3001 (D1 riquadro nella foglia, D2 titolo 300 grande,
 * D3 teal sulla card solo coi nodi del bordo).
 * v4.1, 18/10 (j-edi 3013): al punto 6 le 4 regole del palco della D1-bis (j-tali, banco foto-v4), cosi' il CSS dell'APERTURA e' uno solo.
 * v5, 18/10 (j-edi 3008/3011): al punto 7 l'etichetta che si riscrive (sphere.labelRewrite del bundle, accesa dallo skin JS).
 * v5.1, 18/10 (j-edi 3040 B): al punto 8 le card nascoste sotto il segno «dentro» del palco, con la rete solo CSS di 3 s.
 * Login (card .sp-tpl-reserved-card.sp-login-box, le porte della D1-bis v5) e area loggata (pannello dei tab, sidebar, card della
 * dashboard) sono VETRO SOSPESO: fondo --sp-tplsm-glass, bordo NEUTRO --sp-tplsm-line, ombra --sp-tpl-shadow-2 (grammatica §4.1).
 * Il teal dice solo «attivo/cliccabile adesso» (§2, §11.3): sulle porte all'alone, nei campi al fuoco; sulla card lo accendono i nodi
 * del bordo (sp-site-nodi-bordo), non il CSS (D3). I nodi sul bordo li disegna sp-site-nodi-bordo sugli elementi .sp-tplsm-edge-nodes
 * col bordo vero sui quattro lati (le classi le mette il template, D1-bis). Nessun !important, colori solo dai token dello skin.
 * Movimento ridotto: nessuna transizione oltre --sp-moto-sfuma.
 * ===================================================================== */

/* 0) i token del movimento (00-CONTRATTI §3, M1) e la palette del varco. I --sp-moto-* generali vanno nel layout comune (decisione 2486):
      restano qui solo finche' non ci sono (M1 ha i suoi ripieghi). La palette del varco e' di spheremesh e resta nello skin. */
:root {
  --sp-moto-breve: 250ms; --sp-moto-testoEsce: 220ms; --sp-moto-testoEntra: 300ms; --sp-moto-sfuma: 450ms;
  --sp-moto-medio: 900ms; --sp-moto-lungo: 1700ms; --sp-moto-rallenta: 1500ms; --sp-moto-entra: 3200ms; --sp-moto-esce: 2800ms;
  --sp-moto-rincorsa: 900ms; --sp-moto-varco: 1900ms; --sp-moto-fuori: 560ms; --sp-moto-pausa: 220ms;
  --sp-varco-scia: var(--sp-secondary, #3ff0e8); --sp-varco-lampo: #d8fffb; --sp-varco-fondo: #02050a;
}

/* 1) i pannelli dell'area: vetro sospeso (§4.1). Bordo neutro a riposo; nessun riflesso teal (§11.3). I grandi hanno il raggio 24 (§4.2). */
.sp-tpl-reserved .sp-tpl-reserved-card,
.sp-tpl-reserved--app .sp-tpl-tabpane,
.sp-tpl-reserved--app .sp-tpl-account-sidebar,
.sp-tpl-reserved--app .sp-tpl-dash-card {
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11));
  border-radius: var(--sp-tplsm-radius-xl, 24px);
  background: var(--sp-tplsm-glass, rgba(7, 11, 18, .74));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--sp-tpl-shadow-2, 0 18px 50px rgba(0, 0, 0, .5));
}
.sp-tpl-reserved .sp-tpl-reserved-card:hover { transform: none; box-shadow: var(--sp-tpl-shadow-2, 0 18px 50px rgba(0, 0, 0, .5)); }

/* la pagina del login: sotto l'header fisso, come l'area loggata, e la card a misura di lettura (§8) */
#sp-main-content > .sp-tpl-reserved:not(.sp-tpl-reserved--app):first-child { padding-top: calc(var(--sp-tplsm-top) + var(--sp-tplsm-ritmo-l) / 2); }
.sp-tpl-reserved .sp-tpl-reserved-card { max-width: 460px; min-height: 0; padding: clamp(24px, 4vw, 36px); text-align: left; }

/* (D2) il titolo e' un TITOLO, leggero e grande (§3: 300, niente maiuscolo, text-wrap balance); la descrizione e' testo 2 */
.sp-tpl-reserved .sp-tpl-reserved-card .sp-tpl-login-title {
  margin: 0 0 8px; text-align: left; color: var(--sp-tplsm-text, #e9eef4);
  font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 300; letter-spacing: 0; line-height: 1.15; text-transform: none; text-wrap: balance;
}
.sp-tpl-reserved .sp-tpl-reserved-card .sp-tpl-login-desc { margin: 0 0 22px; text-align: left; font-size: .95rem; color: var(--sp-tplsm-text-2, #b6bdc7); }
.sp-tpl-reserved .sp-tpl-reserved-card .sp-tpl-login-title + .sp-tpl-login-form { margin-top: 18px; }
.sp-tpl-reserved .sp-tpl-reserved-card .sp-tpl-login-link { color: var(--sp-tplsm-text-2, #b6bdc7); text-align: left; font-size: .88rem; -webkit-tap-highlight-color: transparent; }
.sp-tpl-reserved .sp-tpl-reserved-card .sp-tpl-login-link:hover { color: var(--sp-primary, #0abab5); }

/* 2) i campi di ogni descrittore dell'area (§7). L'ETICHETTA CHE SALE resta quella del layout 2.0 com'e' oggi (j-edi 3001): qui solo
      la posizione sul campo rientrato e i colori sul fondo scuro (muta a riposo, teal al fuoco, --sp-danger in errore), niente maiuscolo.
      Il campo e' un PIANO (--sp-tplsm-surface-2 in trasparenza), raggio 10 sui quattro angoli, con un RIQUADRO di 1 px (D1 strada a):
      il layout blocca border, box-shadow e outline del .fen-field con !important (r. 903-926), quindi il riquadro lo disegna .fen::before,
      alto quanto il campo (padding 8 + riga 24 + 8 = 40 px, i valori del layout), senza toccare il campo. La riga sotto del layout e la
      .fen-bar si spengono: il fuoco e l'errore li dice il riquadro (bordo + anello, §7).
      RIPIEGO DICHIARATO (Davide via j-edi 3002, «poi fixiamo bene però»): il riquadro sul .fen::before sta qui solo finche' il layout comune
      blocca il bordo del campo. DEBITO in lista: togliere i !important del layout comune sui campi (core, firma di Davide), poi il bordo vero
      sul .fen-field e via questo ::before. */
.sp-tpl-reserved .des .fen { position: relative; --c1-campo-h: 40px; margin-top: 1.5rem; }
.sp-tpl-reserved .des .fen .fen-field {
  --sp-tpl-line: transparent;
  box-sizing: border-box; text-indent: 14px; border-radius: var(--sp-tplsm-btn-r, 10px);
  background: color-mix(in srgb, var(--sp-tplsm-surface-2, #19202b) 55%, transparent); color: var(--sp-tplsm-text, #e9eef4);
  font: inherit; font-size: .95rem;
}
.sp-tpl-reserved .des .fen:has(> .fen-field:not(textarea))::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--c1-campo-h); box-sizing: border-box; pointer-events: none; z-index: 0;
  border: 1px solid var(--sp-tplsm-line, rgba(233, 238, 244, .11)); border-radius: var(--sp-tplsm-btn-r, 10px);
  transition: border-color var(--sp-moto-breve, 250ms), box-shadow var(--sp-moto-breve, 250ms);
}
.sp-tpl-reserved .des .fen:has(> .fen-field:focus)::before {
  border-color: var(--sp-primary, #0abab5);
  box-shadow: var(--sp-focus, 0 0 0 3px color-mix(in srgb, var(--sp-primary, #0abab5) 35%, transparent));
}
.sp-tpl-reserved .des .fen .fen-bar { display: none; }
.sp-tpl-reserved .des .fen .fen-label { left: 14px; top: calc(var(--c1-campo-h) / 2); color: var(--sp-tplsm-muted, #8493a6); }
.sp-tpl-reserved .des .fen .fen-field:focus ~ .fen-label { color: var(--sp-primary, #0abab5); }
/* quando sale (fuoco o valore), l'etichetta va TUTTA sopra il riquadro, senza attraversarne la riga: lo spazio glielo da' il margin-top del .fen */
.sp-tpl-reserved .des .fen .fen-field:focus ~ .fen-label,
.sp-tpl-reserved .des .fen .fen-field:not(:placeholder-shown) ~ .fen-label { top: -4px; left: 2px; transform: translateY(-100%) scale(.85); }
/* i campi a scelta (desSelect: la X «svuota» <i class="sp-sel-drop"> sta PRIMA del campo): il layout li accorcia per l'icona (r. 1021);
   qui il campo resta pieno e l'icona va dentro, a destra, a meta' del campo */
.sp-tpl-reserved .des .fen > i ~ .fen-field { width: 100%; }
.sp-tpl-reserved .des .fen > i.sp-sel-drop { position: absolute; right: 12px; top: calc(var(--c1-campo-h) / 2); transform: translateY(-50%); z-index: 1; }
.sp-tpl-reserved .des .fen .fen-helper { margin-top: 6px; font-size: .8rem; color: var(--sp-tplsm-muted, #8493a6); }
.sp-tpl-reserved .des .fen .fen-helper:empty { display: none; }
/* errore di campo (B1/B3): il bundle segna il campo con aria-invalid e lo spegne al primo input; il riquadro e l'etichetta prendono
   --sp-danger (ripiego dello skin servito, #e8746c), il messaggio resta b.invalid nel .desError sotto il campo (§7). */
.sp-tpl-reserved .des .desError .invalid { color: var(--sp-danger, #e8746c); font-weight: 500; }
.sp-tpl-reserved .des .fen:has(> .fen-field[aria-invalid="true"])::before { border-color: var(--sp-danger, #e8746c); }
.sp-tpl-reserved .des .fen:has(> .fen-field[aria-invalid="true"]:focus)::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-danger, #e8746c) 35%, transparent);
}
.sp-tpl-reserved .des .fen .fen-field[aria-invalid="true"] ~ .fen-label { color: var(--sp-danger, #e8746c); }

/* l'errore di un passo (S3): il pannello porta data-sp-passo="errore" per la ricomposizione rossa; il bordo prende il colore di pericolo
   e torna da solo quando l'attributo se ne va. E' la scena dell'errore, non una cornice. */
[data-sp-passo="errore"] {
  border-color: color-mix(in srgb, var(--sp-danger, #e8746c) 75%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp-danger, #e8746c) 35%, transparent), var(--sp-tpl-shadow-2, 0 18px 50px rgba(0, 0, 0, .5));
  transition: border-color var(--sp-moto-breve, 250ms), box-shadow var(--sp-moto-breve, 250ms);
}

/* 5) IL PASSO ZERO del login, dal S7 (punto 8: Davide via j-edi 3650, 3652, 3655, 3672; il riferimento e' il mockup sphere-gate-v2,
   png/1440-strade e 390-intro): la FRASE dentro la Sfera e le porte come SCHEDE SEPARATE. Dal mockup l'impaginazione, dalla grammatica
   il materiale (la tessera: vetro surface, bordo neutro, alone e anello, raggio 24; niente box squadrato, niente grassetto §11.5).
   - Il contenitore (.sp-tpl-reserved-card, marcato sp-tplsm-edge-nodes, unico [data-sp-pannello] per la nascita) non si vede: niente
     bordo, vetro, ombra ne' padding. Senza bordo nodi-bordo scende e da' i nodi a ogni scheda, come la finestra dello Store (r-jinx 3653);
     le schede nascono dai cloni dei nodi (punto 6). Dal passo email la card torna il pannello del punto 1: le regole valgono solo finche'
     dentro ci sono le porte.
   - La frase e' il titolo e la descrizione del DATO (h1 e p di basic2, j-tali 3661): grande e leggera, centrata, la seconda riga in
     testo 2. VA IN LINEA INSIEME AI TESTI NUOVI del launcher (decide Davide): col dato di oggi direbbe «Accedi».
   - Ogni scheda: il nome in maiuscoletto spaziato a 500 e sotto la riga (span.sp-tplsm-porta-riga, dal dato), centrati; niente icona
     (j-tali toglie il disegno). In fila e centrate al computer, in colonna a tutta larghezza al telefono. */
.sp-tpl-reserved .sp-tpl-reserved-card:has(> .sp-tplsm-porte-lista),
.sp-tpl-reserved .sp-tpl-reserved-card:has(> .sp-tplsm-porte-lista):hover {
  max-width: 820px; padding: 0; border-width: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; flex-direction: column; align-items: stretch; text-align: center;
  width: auto;   /* (516) .sp-login-box del foglio comune dei moduli ha width: 45%: nella finestra nuda da 820 la card restava 369 px e le porte una per riga */
}
.sp-tpl-reserved .sp-tpl-reserved-card:has(> .sp-tplsm-porte-lista) > .sp-tpl-login-title {
  margin: 0 0 10px; text-align: center; font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 300; line-height: 1.12;
}
.sp-tpl-reserved .sp-tpl-reserved-card:has(> .sp-tplsm-porte-lista) > .sp-tpl-login-desc {
  margin: 0 auto clamp(22px, 3vw, 34px); text-align: center; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.5;
}
.sp-tplsm-porte-lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 250px)); justify-content: center; gap: clamp(14px, 1.6vw, 18px); margin: 0;
}
/* la scheda: la porta e' un link o un bottone (niente sottolineatura, il font della pagina); dentro solo la riga, in colonna e centrata */
.sp-tplsm-porta { box-sizing: border-box; min-height: 128px; justify-content: center; padding: clamp(18px, 2vw, 26px) 20px;
  font: inherit; color: var(--sp-tplsm-text, #e9eef4); text-decoration: none; text-align: center; }
.sp-tplsm-porta .sp-tplsm-tessera-riga { flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.sp-tplsm-porta .sp-tplsm-tessera-nome { font-size: clamp(1.02rem, 1.35vw, 1.2rem); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1.35;
  margin-inline-end: -.2em; }   /* lo spazio dopo l'ultima lettera, tolto: il nome resta centrato */
.sp-tplsm-porta-riga { font-size: .8rem; letter-spacing: .06em; line-height: 1.4; color: var(--sp-tplsm-text-2, #b6bdc7); }
/* le voci-link (description) sotto le schede, centrate */
.sp-tpl-reserved .sp-tplsm-porte-lista + .sp-tpl-login-actions { margin-top: 18px; justify-content: center; }
/* telefono (390-intro): le schede in colonna, a tutta larghezza, piu' basse */
@media (max-width: 599px) {
  .sp-tplsm-porte-lista { grid-template-columns: 1fr; gap: 14px; }
  .sp-tplsm-porta { min-height: 96px; }
}

/* 6) IL PALCO della D1-bis (j-tali, foto-v4.cjs; v4.1, j-edi 3013): la Sfera della pagina (sphereCanvas) in un div aria-hidden, primo figlio
   della sezione, dietro a tutto e senza clic; il contenitore del login sopra. Solo posizione: nessuna veste delle porte. */
.sp-tpl-reserved:has(> .sp-tplsm-palco) { position: relative; }
.sp-tplsm-palco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sp-tplsm-palco .sp-tplsm-sphere--palco { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-tplsm-palco ~ .sp-tpl-container { position: relative; z-index: 1; }

/* 7) L'ETICHETTA CHE SI RISCRIVE (v5; bundle: sphere.labelRewrite, la accende lo skin JS di spheremesh). Il bundle prepara un campo al suo
   primo fuoco: il .fen prende .sp-lr, e da li' la posizione dell'etichetta la decide .sp-lr-out (o un valore nel campo), non piu' :focus.
   Il salto dentro/fuori avviene a zero lettere, quindi niente transizione sulla posizione. Senza la funzione (bundle vecchio, altro sito)
   restano l'etichetta che sale qui sopra e quella del layout: e' il ripiego.
   7a) ovunque nel sito (fuori dall'area la posizione del layout comune, r. 979-996): DA PORTARE nel layout comune se un secondo sito la accende. */
.fen.sp-lr:not(.sp-lr-out) > .fen-field ~ .fen-label { transform: translateY(-50%); }
.fen.sp-lr.sp-lr-out > .fen-field ~ .fen-label,
.fen.sp-lr > .fen-field:not(:placeholder-shown) ~ .fen-label { transform: translateY(-100%) translateY(-0.5em) scale(0.9); }
.fen.sp-lr > .fen-label { transition: color var(--sp-moto-breve, 250ms) linear; }
/* il cursore: il «cyan» del prototipo e' il teal del sito (--sp-primary, l'unico cyan della palette di spheremesh); lampeggia una volta
   alla fine della scrittura fuori (il bundle mette .is-blink); in errore prende --sp-danger come l'etichetta */
.fen.sp-lr .sp-lr-caret {
  display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -.12em; opacity: 0;
  background: var(--sp-primary, #0abab5);
}
.fen.sp-lr .sp-lr-caret.is-blink { animation: sp-lr-blink .6s steps(1) 1; }
.fen.sp-lr > .fen-field[aria-invalid="true"] ~ .fen-label .sp-lr-caret { background: var(--sp-danger, #e8746c); }
@keyframes sp-lr-blink { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* 7b) nell'area: le due posizioni dei campi di C1 (punto 4), con la classe al posto di :focus */
.sp-tpl-reserved .des .fen.sp-lr:not(.sp-lr-out) > .fen-field ~ .fen-label { top: calc(var(--c1-campo-h) / 2); left: 14px; transform: translateY(-50%); }
.sp-tpl-reserved .des .fen.sp-lr.sp-lr-out > .fen-field ~ .fen-label,
.sp-tpl-reserved .des .fen.sp-lr > .fen-field:not(:placeholder-shown) ~ .fen-label { top: -4px; left: 2px; transform: translateY(-100%) scale(.85); }

/* 8) IL LOGIN DA DENTRO (v5.1, decisione di Davide 3033, j-edi 3040 B). Il template v5.1 dichiara sul palco del login data-sp-riposo="dentro"
   (sulla sezione); la regia fa entrare la Sfera {da:'dentro'}, fa nascere i pannelli e poi TOGLIE il segno. Finche' il segno c'e', i pannelli
   ([data-sp-pannello], la card del login con le porte) non si vedono: niente card che lampeggia prima di nascere. RETE SOLO CSS: se la regia
   non toglie il segno (runner fermo, JS spento, skin vecchio), un'animazione di durata zero con 3 s di ritardo li rivela comunque.
   visibility, non solo opacity: mentre sono nascosti non prendono il fuoco e non si cliccano. Col movimento ridotto niente attesa (j-edi 3046):
   si vedono subito. Nessuna regola senza il segno: le altre pagine non cambiano. */
[data-sp-riposo="dentro"] [data-sp-pannello],
[data-sp-riposo="dentro"] .sp-tpl-reserved-card,
[data-sp-riposo="dentro"] .sp-tplsm-porta { animation: sp-c1-rete-dentro 0s linear 3s both; }
@keyframes sp-c1-rete-dentro { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

/* 3) e 4) il profilo (righe del fronte, retro, facce della flip, tab): NON qui, li tiene r-vi nel suo file (profilo-restyle) */

@media (prefers-reduced-motion: reduce) {
  .sp-tpl-reserved .des .fen::before, [data-sp-passo="errore"], .sp-tplsm-porta { transition: none; }
  .fen.sp-lr .sp-lr-caret { display: none; }
  [data-sp-riposo="dentro"] [data-sp-pannello], [data-sp-riposo="dentro"] .sp-tpl-reserved-card, [data-sp-riposo="dentro"] .sp-tplsm-porta { animation: none; }
}

/* (S7 punto 3, j-tali 19/10; Davide via j-edi 3568) LA SCENA DEL PALCO A TUTTO SCHERMO. La sezione riservata che ha il palco (il login col Gate)
   e' alta quanto la finestra VERA (100svh, ripiego 100vh): la testata fissa sta dentro il suo padding-top (r. 3296), la card al centro della
   scena, il footer subito sotto, si raggiunge scorrendo. Solo dove c'e' il palco: le altre sezioni riservate e le altre pagine non cambiano. */
#sp-main-content > .sp-tpl-reserved:has(> :is(.sp-tplsm-palco, .sp-tplsm-open-stage)) {
	box-sizing: border-box;
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: center;
}
/* (prova 4, piano §3.1 punto 3, r-vi; fatti di j-tali 4070/4073) dalla 514 il Gate non ha piu' il palco: nella sezione riservata c'e' lo STAGE
   dello sferone (loginCornice → sferoneScena). La scena a tutto schermo qui sopra vale anche per lui, e lo stage, che di serie e' FISSO sulla
   finestra (§16, r. ~1495: e' lo stage della home), dentro la sezione riservata scorre con lei e la riempie, come gia' sotto -pagina (r. ~2523).
   Cosi' il footer sta sotto la scena e non sale sopra le porte. /sfera e la home non hanno lo stage figlio di una .sp-tpl-reserved: non cambiano. */
#sp-main-content > .sp-tpl-reserved:has(> .sp-tplsm-open-stage) { position: relative; }
#sp-main-content > .sp-tpl-reserved > .sp-tplsm-open-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; }

/* (LAVAGNA §3.12, 22/10/2026) IL SALUTO DELL'ESCI, mentre si e' dentro la Sfera (lo mette la meta' IN di unwarp dello skin; il testo dal server).
   La grammatica delle scritte del Gate: il titolo come il nome delle porte (maiuscolo, spaziato: la voce del sistema), il testo come la frase
   del Gate (grande e leggero: la voce calda). Sopra il canvas, al centro, nessun clic. La dissolvenza la fa il JS (opacity) */
.sp-tplsm-saluto {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 0 20px; color: var(--sp-tplsm-text, #e9eef4);
}
.sp-tplsm-saluto-titolo {
  margin: 0; font-size: clamp(1.02rem, 1.35vw, 1.2rem); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1.35;
  margin-inline-end: -.2em; color: var(--sp-tplsm-text-2, #b6bdc7);
}
.sp-tplsm-saluto-testo { margin: 0; font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 300; line-height: 1.12; }
/* (§3.12, resa: Davide 22/10, «a») mentre c'e' il saluto nell'ospite del mondo, la scritta «Sphere Mesh» si spegne e poi torna, nei tempi di sfuma.
   filter e non opacity: l'opacity del titolo la scrive inline il volo dell'apertura della home (scroll), il filtro si somma senza !important.
   Su /sfera si tiene la transizione d'opacita' di prima (r. ~2536); durante il volo dello sferone vince ancora la sua durata 0 (r. ~2537) */
.sp-tplsm-open[data-sp-open] > .sp-tplsm-open-title { transition: filter var(--sp-moto-sfuma, 450ms) ease; }
.sp-tplsm-sferone-pagina > .sp-tplsm-open-title { transition: opacity .45s ease, filter var(--sp-moto-sfuma, 450ms) ease; }
.sp-tplsm-open:has(> [data-sp-world] > .sp-tplsm-saluto) > .sp-tplsm-open-title { filter: opacity(0); }