/* =====================================================================
 * Sphere — Site Template Basic 2.0
 * "Svecchiato" — derivato dal mockup v6
 * Compatibile con il theming dictionary Sphere (placeholder [TOKEN])
 * Da abbinare a: sp-site-layout-2.0.css + sp-animations-2.0.css + basic2.php
 * Prefix: sp-tpl-* (template-specifici, non collidono col core sp-*)
 * 2026-05-13
 * ===================================================================== */

:root {
  --sp-tpl-r-sm: 2px;
  --sp-tpl-r-md: 4px;
  --sp-tpl-r-lg: 6px;
  --sp-tpl-ease: cubic-bezier(.2, .7, .2, 1);
  --sp-tpl-container: 1240px;
  --sp-tpl-topbar-h: 38px;
  /* Livello della guida dell'area riservata. Vale DENTRO la sezione `.sp-tpl-reserved`, che
     ha `isolation: isolate`: qualunque valore si metta qui, la guida resta strutturalmente
     sotto header (55), topbar (60), drawer (70/80), totop (90), banner cookie (1200) e
     dialog, che stanno tutti fuori dalla sezione. Serve solo a ordinare cio' che sta dentro. */
  --sp-tpl-z-guide: 60;
  --sp-tpl-header-h: 72px;
  /* Hardcoded brand-template (identità visiva del template 2.0) */
  --sp-tpl-navy-0: #0e1d2b;
  --sp-tpl-navy-1: #14283a;
  --sp-tpl-navy-deep: #06121d;
  --sp-tpl-ink-0: #1a2332;
  --sp-tpl-ink-1: #4a5868;
  --sp-tpl-ink-2: #7a8694;
  --sp-tpl-line: rgba(14,29,43,0.08);
  --sp-tpl-line-dark: rgba(255,255,255,0.08);
  --sp-tpl-bg-soft: #f6f9fa;
  --sp-tpl-shadow-1: 0 1px 2px rgba(14,29,43,0.06);
  --sp-tpl-shadow-2: 0 8px 24px rgba(14,29,43,0.08);
  /* Semantic colors (no placeholder, semantica template) */
  --sp-tpl-success: #1f7a55;
  --sp-tpl-success-soft: rgba(80,180,140,0.18);
  --sp-tpl-warning: #9a7320;
  --sp-tpl-warning-soft: rgba(240,198,116,0.24);
  --sp-tpl-danger: #a83a3a;
  --sp-tpl-danger-soft: rgba(220,80,80,0.16);
  /* Glow accent (deriva da PRIMARY-COLOR cliente) */
  --sp-tpl-accent-glow: rgba(80,172,188,0.22);
  --sp-tpl-accent-soft: rgba(80,172,188,0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Quicksand, system-ui, sans-serif;
  color: var(--sp-tpl-ink-0);
  background: #ffffff;
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#sp-main-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
#sp-main-content > section { flex: 0 0 auto; }
#sp-main-content > .sp-tpl-reserved { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.sp-tpl-container {
  width: 100%;
  max-width: var(--sp-tpl-container);
  margin: 0 auto;
  padding: 0 var(--sp-unit-l);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.015em; line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0; }

/* ===== SLIDESHOW LEGACY (drop-in con basic.php parent: .slides/.slide/.slide-nav*) =====
   I 2.0 emettono ancora markup legacy via basic::slideshow($slides). Stylizziamo
   con CSS vars e snappy transitions. In Sfera 6 si sostituisce con Ken Burns 2.0. */
.slides {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 600px;
  opacity: 0;
  z-index: 0;
  transition: opacity .5s var(--sp-tpl-ease);
}
.slide.active {
  opacity: 1;
  z-index: 5;
}
.slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-slide-title {
  position: absolute;
  left: 5rem;
  top: 25%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 3.5rem;
  text-transform: uppercase;
  color: #ffffff;
  padding: 4px 8px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.sp-slide-intro {
  position: absolute;
  left: 5rem;
  top: 35%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #ffffff;
  padding: 4px 8px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.slide-nav-panel {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #ffffff;
  z-index: 100;
  display: flex;
  gap: 8px;
}
.slide-nav-panel * {
  opacity: 0.6;
  cursor: pointer;
  transition: opacity .25s var(--sp-tpl-ease), color .25s var(--sp-tpl-ease);
}
.slide-nav-panel *.active { color: #0abab5; opacity: 1; }
.slides:hover .slide-nav-panel * { opacity: 0.8; }
.slide-nav-panel *:hover { opacity: 1; }
.slide-nav {
  position: absolute;
  top: 0;
  height: 100%;
  width: 5rem;
  font-size: 3rem;
  color: #ffffff;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.slide-nav[data-nav="odd"]  { left: 0; }
.slide-nav[data-nav="even"] { right: 0; }
.slide-nav * {
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s var(--sp-tpl-ease);
}
.slide-nav:hover * { opacity: 1; }

.sp-tpl-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #0abab5;
  margin-bottom: 18px;
}

/* ===== TOP UTILITY BAR ===== */
.sp-tpl-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--sp-tpl-topbar-h);
  display: flex; align-items: center;
  background: linear-gradient(90deg, #0abab5 0%, #3ff0e8 100%);
  color: #ffffff;
  font-size: 0.85rem;
  z-index: 60;
}

.sp-tpl-topbar .sp-tpl-container { 
  display: flex; 
  justify-content: space-between;
  gap: 24px; align-items: center; }

.sp-tpl-topbar-left  { 
  display: flex; gap: 22px; 
  align-items: center; 
}

.sp-tpl-topbar-right { 
  display: flex; 
  gap: 18px; 
  align-items: center; 
}
.sp-tpl-topbar a {
  color: #ffffff;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500;
  transition: opacity .2s var(--sp-tpl-ease);
}
.sp-tpl-topbar a:hover { opacity: 0.78; }
.sp-tpl-topbar svg { opacity: 0.85; }

/* ===== HEADER (white, sticky) ===== */
.sp-tpl-header {
  position: fixed;
  top: var(--sp-tpl-topbar-h); left: 0; right: 0;
  height: var(--sp-tpl-header-h);
  display: flex; align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--sp-tpl-line);
  z-index: 55;
  transition: box-shadow .25s var(--sp-tpl-ease);
}
.sp-tpl-header.is-scrolled { box-shadow: var(--sp-tpl-shadow-2); }
.sp-tpl-header .sp-tpl-container { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 24px; 
}

.sp-tpl-logo {
  display: inline-flex; 
  align-items: center; 
  gap: 12px;
  font-weight: 700; 
  font-size: 1.15rem;
  color: var(--sp-tpl-navy-0);
  letter-spacing: -0.01em;
}

.sp-tpl-logo img, .sp-tpl-logo svg { 
  max-height: 36px; 
  width: auto; 
}

.sp-tpl-logo-svg .sp-tpl-logo-hex { stroke: #0abab5; stroke-width: 1.4; }

.sp-tpl-logo-svg .sp-tpl-logo-mesh { stroke: #0abab5; stroke-width: 0.8; opacity: 0.55; }

.sp-tpl-logo-svg .sp-tpl-logo-node { fill: #0abab5; opacity: 0.9; }

/* variante contrast (footer scuro): mark chiaro */
.sp-tpl-logo-svg--contrast .sp-tpl-logo-hex,
.sp-tpl-logo-svg--contrast .sp-tpl-logo-mesh { stroke: #ffffff; }

.sp-tpl-logo-svg--contrast .sp-tpl-logo-node { fill: #ffffff; }

.sp-tpl-footer-logo-svg { 
  width: 40px; 
  height: 40px; 
  flex-shrink: 0; 
}

/* footer brand: mark + nome/legale inline (come mockup v6) */
.sp-tpl-footer-brand { 
  display: flex; 
  align-items: center; 
  gap: 14px; 
}

.sp-tpl-footer-brand .sp-tpl-footer-logo { 
  max-height: 40px; 
  width: auto; 
  flex-shrink: 0; 
}

.sp-tpl-footer-brand-name { 
  font-weight: 700; 
  font-size: 1.05rem; 
  color: #ffffff; 
  letter-spacing: -0.01em; 
}

.sp-tpl-footer-brand-legal { 
  font-size: 0.82rem; 
  color: rgba(255,255,255,0.55); 
  margin-top: 2px;
}

.sp-tpl-logo-brand {
  font-weight: 700; font-size: 1.05rem;
  color: var(--sp-tpl-navy-0);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* mobile a 3 zone: logo (svg) a sinistra, scritta centrata, hamburger a destra */
  .sp-tpl-header .sp-tpl-container { position: relative; }
  .sp-tpl-logo-brand { 
    position: absolute;
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    white-space: nowrap; 
  }
  /* footer centratura: vedi blocco in fondo (dopo le media query responsive, per vincere
     sull'override di ≤1024 footer-top align-items:flex-start). */
}

/* Lang toggle (topbar): bottone code + dropdown panel data-driven da siteData.locales */
.sp-tpl-lang { 
  position: relative; 
  display: inline-flex; 
}

.sp-tpl-lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--sp-tpl-bg-soft, #fafafa);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--sp-tpl-r-sm, 4px);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.sp-tpl-lang-toggle:hover,
.sp-tpl-lang[data-sp-lang-open] .sp-tpl-lang-toggle {
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.sp-tpl-lang-toggle svg { transition: transform .2s ease; }
.sp-tpl-lang[data-sp-lang-open] .sp-tpl-lang-toggle svg { transform: rotate(180deg); }
.sp-tpl-lang-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--sp-tpl-navy-0, #0e1d2b);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sp-tpl-r-sm, 4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  padding: 4px;
  display: none;
  z-index: 90;
}
.sp-tpl-lang[data-sp-lang-open] .sp-tpl-lang-panel { display: block; }
.sp-tpl-lang-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: rgba(245, 245, 245, 0.78);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--sp-tpl-r-sm, 4px);
  transition: background .15s ease, color .15s ease;
}
.sp-tpl-lang-option:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sp-tpl-lang-option.is-current { color: #0abab5; }
.sp-tpl-lang-option__code {
  font-weight: 700; letter-spacing: 0.04em;
  font-size: 0.75rem;
  min-width: 22px;
}
.sp-tpl-lang-option__label { flex: 1; }

.sp-tpl-nav { display: flex; gap: 4px; position: relative; }
.sp-tpl-nav-indicator {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, #0abab5 30%, transparent) 12%,
    #0abab5 50%,
    color-mix(in srgb, #0abab5 30%, transparent) 88%,
    transparent 100%);
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform .35s var(--sp-tpl-ease), width .35s var(--sp-tpl-ease), opacity .25s ease;
}
.sp-tpl-nav-indicator.is-visible { opacity: 1; }
.sp-tpl-nav a {
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--sp-tpl-ink-1);
  border-radius: var(--sp-tpl-r-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color .2s var(--sp-tpl-ease);
  position: relative;
}
.sp-tpl-nav a:hover,
.sp-tpl-nav a.is-active,
.sp-tpl-nav a[aria-current="page"] { color: #0abab5; }
/* Vecchio underline per-link disattivato: ora è gestito da .sp-tpl-nav-indicator
 * (singleton animato in slide tra le voci). Lascio commentato per documentare la migrazione. */
.sp-tpl-nav a.is-active::after,
.sp-tpl-nav a[aria-current="page"]::after {
  content: none;
  left: 10px; right: 10px; bottom: 4px;
  height: 2px;
}
.sp-tpl-hamburger {
  display: none;
  background: transparent;
  border: 0;
  color: var(--sp-tpl-ink-0);
  width: 40px; height: 40px;
  border-radius: var(--sp-tpl-r-sm);
  padding: 0;
  cursor: pointer;
}
.sp-tpl-hamburger:hover { background: var(--sp-tpl-bg-soft); }

/* ===== DRAWER mobile ===== */
.sp-tpl-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(6, 18, 29, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 70;
}
.sp-tpl-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.sp-tpl-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  /* Riprende il pattern bg area riservata: radial secondary forte bottom-right che sfuma
   * verso il menù; primary soft top-left per profondità. Su bg-soft di base. */
  background:
    radial-gradient(circle at 100% 100%, color-mix(in srgb, #3ff0e8 38%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, #0abab5 14%, transparent) 0%, transparent 40%),
    var(--sp-tpl-bg-soft, #fafafa);
  box-shadow: var(--sp-tpl-shadow-2);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 80;
  padding: calc(var(--sp-tpl-topbar-h) + 20px) 24px 24px;
  overflow-y: auto;
  isolation: isolate;
}
/* Pattern quadratini sottili come l'area riservata */
.sp-tpl-drawer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.04) 100%),
    linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.04) 100%);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}
.sp-tpl-drawer > * { position: relative; z-index: 1; }
.sp-tpl-drawer-brand {
  position: absolute;
  left: 0; right: 0; bottom: 24px;
  text-align: center;
  z-index: 1;
  font-family: var(--font-display, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, #0abab5 75%, var(--sp-tpl-ink-0));
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}
.sp-tpl-drawer.is-open { transform: translateX(0); }
.sp-tpl-drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.sp-tpl-drawer-link {
  padding: 12px 14px;
  font-size: 1rem; font-weight: 600;
  color: var(--sp-tpl-ink-0);
  border-radius: var(--sp-tpl-r-sm);
  transition: background 160ms ease, color 160ms ease;
}
.sp-tpl-drawer-link { position: relative; }
.sp-tpl-drawer-link:hover { color: #0abab5; }
.sp-tpl-drawer-link.is-active,
.sp-tpl-drawer-link[aria-current="page"] { color: #0abab5; }
.sp-tpl-drawer-link.is-active::after,
.sp-tpl-drawer-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: 4px;
  width: 56px;
  height: 1.5px;
  background: linear-gradient(90deg, #0abab5 0%, color-mix(in srgb, #0abab5 40%, transparent) 60%, transparent 100%);
  border-radius: 1px;
}

/* ===== BUTTONS ===== */
.sp-tpl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  border-radius: var(--sp-tpl-r-sm);
  font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--sp-tpl-ease), background .2s var(--sp-tpl-ease),
              color .2s var(--sp-tpl-ease), border-color .2s var(--sp-tpl-ease);
  font-family: inherit;
}

.sp-tpl-btn:focus-visible { 
  outline: 2px solid #0abab5; 
  outline-offset: 3px; 
}

.sp-tpl-btn--primary { 
  background: #0abab5; 
  color: var(--sp-tpl-navy-0); 
}

.sp-tpl-btn--primary:hover { 
  background: #3ff0e8; 
  color: var(--sp-tpl-navy-0); 
  transform: translateY(-1px);
}

.sp-tpl-btn--ghost  { 
  border-color: rgba(255,255,255,0.25); 
  color: #ffffff; 
}

.sp-tpl-btn--ghost:hover {
 border-color: #0abab5; 
 color: #0abab5; 
}

.sp-tpl-btn--dark   { 
  background: var(--sp-tpl-navy-0); 
  color: #ffffff; 
}

.sp-tpl-btn--dark:hover { 
  background: var(--sp-tpl-navy-1); 
  color: #ffffff; 
  transform: translateY(-1px); 
}

.sp-tpl-btn--outline {
  border-color: var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
}

.sp-tpl-btn--outline:hover { border-color: #0abab5; color: #0abab5; }

/* ===== HERO ===== */
.sp-tpl-hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + 80px) 24px 100px;
  text-align: center;
  background: var(--sp-tpl-navy-0);
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}

.sp-tpl-hero--short {
  min-height: 55vh;
  padding: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + 70px) 24px 70px;
}

.sp-tpl-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, var(--sp-tpl-accent-soft), transparent 65%),
    linear-gradient(180deg, #0a1828 0%, var(--sp-tpl-navy-0) 60%, var(--sp-tpl-navy-deep) 100%);
}

.sp-tpl-hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.sp-tpl-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(6,18,29,0.55) 100%);
  pointer-events: none;
}

.sp-tpl-hero-inner { max-width: 768px; position: relative; }
.sp-tpl-hero h1 { color: #ffffff; margin-bottom: 22px; }
.sp-tpl-hero h1 .sp-tpl-accent { color: #0abab5; }
.sp-tpl-hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.78);
  max-width: 58ch;
  margin: 0 auto 36px;
}
.sp-tpl-hero--short h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 16px; }
.sp-tpl-hero--short p  { font-size: 1.02rem; margin-bottom: 0; color: rgba(255,255,255,0.72); }
.sp-tpl-hero-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ===== SECTIONS ===== */
.sp-tpl-section { padding: 100px 0; background: #ffffff; }
.sp-tpl-section--soft { background: var(--sp-tpl-bg-soft); }
.sp-tpl-section--dark { background: var(--sp-tpl-navy-0); color: #ffffff; }

.sp-tpl-section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.sp-tpl-section-head h2 { color: var(--sp-tpl-navy-0); margin-bottom: 14px; }
.sp-tpl-section-head p  { color: var(--sp-tpl-ink-1); font-size: 1.02rem; }
.sp-tpl-section-head .sp-tpl-eyebrow { margin-bottom: 14px; }

.sp-tpl-section-head--inline {
  text-align: left;
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; flex-wrap: wrap; max-width: none;
}

/* ===== INTRO CARDS (home) ===== */
.sp-tpl-intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sp-tpl-intro-card {
  padding: 28px 26px;
  background: var(--sp-tpl-bg-soft);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), background .25s var(--sp-tpl-ease),
              transform .25s var(--sp-tpl-ease);
}
.sp-tpl-intro-card:hover {
  border-color: #0abab5;
  background: var(--sp-tpl-accent-soft);
  transform: translateY(-3px);
}
.sp-tpl-intro-card .sp-tpl-ico {
  width: 44px; height: 44px;
  border-radius: var(--sp-tpl-r-sm);
  background: linear-gradient(135deg, var(--sp-tpl-accent-soft), rgba(80,172,188,0.05));
  color: #0abab5;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.sp-tpl-intro-card h3 { color: var(--sp-tpl-navy-0); margin-bottom: 8px; font-size: 1.1rem; }
.sp-tpl-intro-card p  { color: var(--sp-tpl-ink-1); font-size: 0.93rem; }

/* ===== VALUE CARDS (chi siamo) ===== */
.sp-tpl-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sp-tpl-value-card {
  padding: 28px 24px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), transform .25s var(--sp-tpl-ease);
}
.sp-tpl-value-card:hover { border-color: #0abab5; transform: translateY(-3px); }
.sp-tpl-value-card .sp-tpl-num {
  font-size: 1.6rem; font-weight: 700;
  color: #0abab5;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.sp-tpl-value-card h3 { color: var(--sp-tpl-navy-0); margin-bottom: 8px; font-size: 1.05rem; }
.sp-tpl-value-card p  { color: var(--sp-tpl-ink-1); font-size: 0.92rem; }

/* ===== TOOLBAR (search + filters + count) ===== */
.sp-tpl-toolbar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 32px; }
.sp-tpl-search-box { position: relative; flex: 1; min-width: 260px; max-width: 360px; }
.sp-tpl-search-box input {
  width: 100%; padding: 13px 44px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  color: var(--sp-tpl-ink-0);
  font: inherit; font-family: inherit; font-size: 0.95rem;
  outline: 0;
  transition: border-color .2s var(--sp-tpl-ease), box-shadow .2s var(--sp-tpl-ease);
}
.sp-tpl-search-box input:focus {
  border-color: #0abab5;
  box-shadow: 0 0 0 4px var(--sp-tpl-accent-soft);
}
.sp-tpl-search-box .sp-tpl-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--sp-tpl-ink-2); pointer-events: none;
}
.sp-tpl-search-box .sp-tpl-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: rgba(14,29,43,0.08);
  color: var(--sp-tpl-ink-1);
  font-size: 1rem; line-height: 1;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
}
.sp-tpl-search-box.has-value .sp-tpl-clear { display: flex; }
.sp-tpl-search-box .sp-tpl-clear:hover { background: #0abab5; color: var(--sp-tpl-navy-0); }
.sp-tpl-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-tpl-filters button {
  padding: 8px 16px; font-size: 0.88rem;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  font-family: inherit;
  cursor: pointer;
  transition: all .2s var(--sp-tpl-ease);
}
.sp-tpl-filters button:hover,
.sp-tpl-filters button.is-active {
  background: #0abab5; color: var(--sp-tpl-navy-0); border-color: #0abab5;
}
.sp-tpl-count { color: var(--sp-tpl-ink-2); font-size: 0.85rem; margin-left: auto; white-space: nowrap; }
.sp-tpl-empty {
  display: none; text-align: center; padding: 80px 20px;
  color: var(--sp-tpl-ink-2); font-size: 0.95rem;
  border: 1px dashed var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
}
.sp-tpl-empty.is-visible { display: block; }

/* ===== NEWS GRID ===== */
.sp-tpl-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sp-tpl-news-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--sp-tpl-ease), box-shadow .25s var(--sp-tpl-ease),
              border-color .25s var(--sp-tpl-ease);
}
.sp-tpl-news-card:hover {
  transform: translateY(-4px); box-shadow: var(--sp-tpl-shadow-2); border-color: #0abab5;
}
.sp-tpl-news-thumb { aspect-ratio: 16/10; position: relative; background: linear-gradient(135deg, var(--sp-tpl-navy-0), #0abab5); }
.sp-tpl-news-thumb::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.12), transparent 30%);
}
.sp-tpl-news-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sp-tpl-news-meta { display: flex; gap: 12px; font-size: 0.78rem; color: var(--sp-tpl-ink-2); text-transform: uppercase; letter-spacing: 0.1em; }
.sp-tpl-news-meta .sp-tpl-tag { color: #0abab5; font-weight: 600; }
.sp-tpl-news-body h3 { color: var(--sp-tpl-navy-0); font-size: 1.1rem; line-height: 1.35; }
.sp-tpl-news-body p  { color: var(--sp-tpl-ink-1); font-size: 0.92rem; }
.sp-tpl-news-card .sp-tpl-more {
  margin-top: auto; color: var(--sp-tpl-navy-0);
  font-weight: 600; font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.sp-tpl-news-card .sp-tpl-more::after { content: "→"; transition: transform .2s var(--sp-tpl-ease); }
.sp-tpl-news-card:hover .sp-tpl-more::after { transform: translateX(4px); }


/* ===== STORE GRID ===== */
.sp-tpl-store-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 22px; 
}

.sp-tpl-product-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--sp-tpl-ease), box-shadow .25s var(--sp-tpl-ease),
              border-color .25s var(--sp-tpl-ease);
}

.sp-tpl-product-card:hover { 
  transform: translateY(-3px); 
  box-shadow: var(--sp-tpl-shadow-2); 
  border-color: #0abab5; 
}

.sp-tpl-product-thumb { aspect-ratio: 1; 
  background: linear-gradient(135deg, #e6eef0, #d0dde0);
  position: relative; 
}

.sp-tpl-product-thumb::after {
  content: "";
  position: absolute; 
  inset: 30%;
  background: radial-gradient(circle, #0abab5 0%, transparent 70%);
  opacity: 0.35; filter: blur(18px);
}

.sp-tpl-product-body { padding: 16px 18px 20px; }
.sp-tpl-product-cat { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sp-tpl-ink-2); }
.sp-tpl-product-body h3 { font-size: 1rem; margin: 4px 0 10px; color: var(--sp-tpl-navy-0); font-weight: 600; }
.sp-tpl-product-price { display: flex; align-items: baseline; gap: 8px; }
.sp-tpl-product-price .sp-tpl-price { color: #0abab5; font-weight: 700; font-size: 1.08rem; }
.sp-tpl-product-price .sp-tpl-old   { color: var(--sp-tpl-ink-2); text-decoration: line-through; font-size: 0.88rem; }

/* ===== PAGINATION ===== */
.sp-tpl-pagination { 
  display: flex; 
  justify-content: center; 
  gap: 8px; 
  margin-top: 48px; 
}

.sp-tpl-pagination button {
  width: 40px; height: 40px;
  border-radius: var(--sp-tpl-r-sm);
  border: 1px solid var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  font: inherit; font-family: inherit; font-weight: 600;
  cursor: pointer;
}
.sp-tpl-pagination button.is-active { background: var(--sp-tpl-navy-0); color: #ffffff; border-color: var(--sp-tpl-navy-0); }
.sp-tpl-pagination button:hover { border-color: #0abab5; color: #0abab5; }

/* ===== CONTACTS ===== */
.sp-tpl-contact-grid { 
  display: grid;
  grid-template-columns: 1fr 1.4fr; 
  gap: 36px; 
  align-items: stretch; 
}

.sp-tpl-contact-info { 
  display: flex; 
  flex-direction: column; 
  gap: 14px; 
}

.sp-tpl-info-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px;
  background: var(--sp-tpl-bg-soft);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), background .25s var(--sp-tpl-ease);
}

.sp-tpl-info-card:hover { 
  border-color: #0abab5; 
  background: var(--sp-tpl-accent-soft); 
}

.sp-tpl-info-card .sp-tpl-ico {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: var(--sp-tpl-r-sm);
  background: linear-gradient(135deg, var(--sp-tpl-accent-soft), rgba(80,172,188,0.05));
  color: #0abab5;
  display: grid; place-items: center;
}

.sp-tpl-info-card .sp-tpl-body { 
  flex: 1; 
  min-width: 0; 
}

.sp-tpl-info-card h4 {
  font-size: 0.74rem; 
  text-transform: uppercase; 
  letter-spacing: 0.12em;
  color: var(--sp-tpl-ink-2);
  margin: 0 0 4px; 
  font-weight: 600;
}

.sp-tpl-info-card p { color: var(--sp-tpl-ink-0); font-size: 0.96rem; line-height: 1.45; }

.sp-tpl-info-card a { color: #0abab5; }

.sp-tpl-map {
  position: relative; min-height: 460px;
  border-radius: var(--sp-tpl-r-md); overflow: hidden;
  border: 1px solid var(--sp-tpl-line);
  background: var(--sp-tpl-bg-soft);
}

.sp-tpl-map iframe { 
  position: absolute;
  inset: 0; 
  width: 100%; 
  height: 100%;
  border: 0;
}

.sp-tpl-map-pin {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2; pointer-events: none;
}

.sp-tpl-map-pin-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #0abab5;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 4px var(--sp-tpl-accent-soft), 0 4px 12px rgba(14,29,43,0.18);
  position: relative;
}

.sp-tpl-map-pin-dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; background: #0abab5;
  animation: sp-pulse-ring 2.2s ease-out infinite;
  z-index: -1;
}

/* ===== LOGIN CARD ===== */
.sp-tpl-login-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 36px 32px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-2);
}

.sp-tpl-login-card h2  { 
  color: var(--sp-tpl-navy-0); 
  margin-bottom: 10px; 
  font-size: 1.4rem; 
}

.sp-tpl-login-card .sp-tpl-sub { 
  color: var(--sp-tpl-ink-1); 
  font-size: 0.95rem;
   margin-bottom: 24px; 
 }

.sp-tpl-login-form { 
  display: flex; 
  flex-direction: column; 
  gap: var(--sp-unit); 
}

.sp-tpl-login-form label { 
  display: flex; 
  flex-direction: column; 
  gap: var(--sp-unit-s); 
  font-size: 0.82rem; 
  color: var(--sp-tpl-ink-2); 
}

.sp-tpl-login-form input {
  padding: calc(var(--sp-unit-s) * 2) var(--sp-unit);
  background: var(--sp-tpl-bg-soft);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  color: var(--sp-tpl-ink-0); 
  font: inherit; 
  font-family: inherit; 
  font-size: 0.95rem;
  outline: 0;
  transition: border-color .2s var(--sp-tpl-ease), background .2s var(--sp-tpl-ease);
}

.sp-tpl-login-form input:focus { background: #ffffff; }

/* Toggle "mostra password" — override scoped al template 2.0.
   des.php emette il button inline con top:6px hardcoded (calibrato per padding input legacy).
   Sul padding input 2.0 (10×15) il valore corretto per centrare l'icona verticalmente
   nell'input è ~10px = calc(var(--sp-unit-s) * 2). !important per battere l'inline style.
   margin/line-height a 0 per evitare che il button "respiri" e sembri alto/disallineato.
   Sfera 6: andrà sostituito da un refactor strutturale di des.php (wrap input+button). */
.sp-tpl-reserved-card .fen button[type="button"] {
  top: calc(var(--sp-unit-s) * 2) !important;
  transform: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.sp-tpl-login-card .sp-tpl-extras {
  margin-top: 18px; display: flex; justify-content: space-between;
  font-size: 0.85rem;
}
.sp-tpl-login-card .sp-tpl-extras a { color: #0abab5; }

/* ===== ACCOUNT LAYOUT (area riservata 2.0, mockup v6) ===== */
.sp-tpl-account-layout {
  display: flex;
  gap: var(--sp-unit-l);
  align-items: flex-start;
}
.sp-tpl-account-sidebar {
  flex-shrink: 0;
  /* 260px = 60*4 + 5*4 — sidebar standard mockup */
  width: calc(var(--sp-unit-xl) * 4 + var(--sp-unit-s) * 4);
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  padding: var(--sp-unit-l) var(--sp-unit);
  box-shadow: var(--sp-tpl-shadow-1);
  position: sticky;
  top: 0;
  /* 🛑 R3 (Davide, 22/9): senza questa riga i bottoni delle card del catalogo si disegnavano
     SOPRA il pannello della guida, che pure ha z-index 60. Misurato: `position: sticky` crea
     un contesto di impilamento, quindi il 60 del pannello vale solo DENTRO la sidebar; fuori,
     la sidebar vale `auto` e i `.sp-button` (che sp-site-layout-2.0 rende `position: relative`)
     sono posizionati anche loro con `auto` e vengono DOPO nel DOM — quindi vincevano.
     Alzare il pannello non serviva a niente: va alzata la sidebar, che e' il contenitore. */
  z-index: var(--sp-tpl-z-guide, 60);
}

.sp-tpl-account-main {
  flex: 1 1 auto;
  min-width: 0;
}

/*================MOBILE=============== */

@media (max-width: 768px) {
  /* meno gap sopra l'area menu su mobile. Doppia classe per battere la base .sp-tpl-reserved--app
     (definita più avanti nel file → a parità di specificità vincerebbe). */

  .sp-tpl-content.sp-tpl-reserved--app { 
    padding-top: var(--sp-unit); 
  }

  /* meno padding laterale su mobile: 30px (unit-l) mangiavano troppa larghezza → 15px (unit). */
  .sp-tpl-reserved--app > .sp-tpl-container {
   padding-left: var(--sp-unit); 
   padding-right: var(--sp-unit); 
 }

  .sp-tpl-dash-card { padding: var(--sp-unit); }

  .sp-tpl-account-layout { flex-direction: column; }

  .sp-tpl-account-sidebar {
    width: 100%;
    position: static;
    top: auto;
  }
  /* MENU COLLASSABILE: l'header (avatar+nome) è il toggle; le voci sono nascoste finché
     non .is-open (jSite initDropdown via data-sp-dropdown). Si vede icona+nome, tap → espande. */
  .sp-tpl-account-sidebar .sp-tpl-account-user { 
    cursor: pointer; 
    margin-bottom: 0; }

  .sp-tpl-account-user-caret {
    display: block;
    margin-left: auto;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--sp-tpl-ink-2, #6b7280);
    transition: transform .25s var(--sp-tpl-ease);
  }

  .sp-tpl-account-sidebar.is-open .sp-tpl-account-user-caret { transform: rotate(180deg); }

  .sp-tpl-sidebar-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--sp-tpl-ease);
  }
  .sp-tpl-account-sidebar.is-open .sp-tpl-account-user { margin-bottom: var(--sp-unit); }

  .sp-tpl-account-sidebar.is-open .sp-tpl-sidebar-nav { max-height: 360px; }
}
/* caret visibile solo su mobile (toggle del menu collassabile). (12/10) Dentro una media: fuori, questa regola veniva dopo quella
   della media <=900 (stessa specificita') e spegneva il caret anche su mobile, dove e' l'unico segno che la scheda utente apre il menu */
@media (min-width: 901px) { .sp-tpl-account-user-caret { display: none; } }

/* user header in sidebar */
.sp-tpl-account-user {
  display: flex;
  align-items: center;
  gap: calc(var(--sp-unit-s) * 2);
  padding: 0 var(--sp-unit-s);
  margin-bottom: var(--sp-unit-l);
}

.sp-tpl-account-avatar {
  width: calc(var(--sp-unit-l) * 1.5);
  height: calc(var(--sp-unit-l) * 1.5);
  border-radius: 50%;
  background: #0abab5;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.sp-tpl-account-user-info {
  display: flex; flex-direction: column;
  min-width: 0;
}

.sp-tpl-account-user-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sp-tpl-navy-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sp-tpl-account-user-role {
  font-size: 0.8rem;
  color: var(--sp-tpl-ink-2);
}

.sp-tpl-sidebar-nav {
  display: flex; flex-direction: column;
  gap: var(--sp-unit-s);
}

.sp-tpl-sidebar-link {
  display: flex; align-items: center;
  gap: calc(var(--sp-unit-s) * 2);
  padding: calc(var(--sp-unit-s) * 2) var(--sp-unit);
  border-radius: var(--sp-tpl-r-sm);
  color: var(--sp-tpl-ink-1);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.18s var(--sp-tpl-ease), color 0.18s var(--sp-tpl-ease);
  position: relative;
  cursor: pointer;
}

.sp-tpl-sidebar-link:hover {
  background: var(--sp-tpl-bg-soft);
  color: var(--sp-tpl-navy-0);
}

.sp-tpl-sidebar-link[aria-current="page"] {
  background: var(--sp-tpl-accent-soft);
  color: var(--sp-tpl-navy-0);
  font-weight: 600;
}

.sp-tpl-sidebar-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: var(--sp-unit-s); bottom: var(--sp-unit-s);
  width: 3px;
  background: #0abab5;
  border-radius: 0 var(--sp-tpl-r-sm) var(--sp-tpl-r-sm) 0;
}

.sp-tpl-sidebar-link-icon {
  flex-shrink: 0;
  width: calc(var(--sp-unit) * 1.2);
  height: calc(var(--sp-unit) * 1.2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sp-tpl-ink-2);
}

.sp-tpl-sidebar-link:hover .sp-tpl-sidebar-link-icon,
.sp-tpl-sidebar-link[aria-current="page"] .sp-tpl-sidebar-link-icon {
  color: #0abab5;
}

.sp-tpl-sidebar-link-label {
  flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== TABBED SECTION (capability generale: launcherType tabBar) =====
   Tab "attaccate" al box sottostante (estetica browser-tab): la tab attiva si
   fonde col pannello bianco #sp-tpl-tabpane (= il box). Tutto allineato. Riusabile. */
/* perspective sul container → il tab ruota in 3D (rotateX) durante il flip della card.
   Effetto comparsa: quando il Profilo viene caricato (es. click da Dashboard) la sezione entra
   con fade + leggero slide-up. */

.sp-tpl-tabbed {
  perspective: 900px;
  animation: sp-tpl-tabbed-appear .45s var(--sp-tpl-ease) both;
}

@keyframes sp-tpl-tabbed-appear {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.sp-tpl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-unit-s);
  margin: 0;
  /* il tab flippa sull'asse ORIZZONTALE (rotateX), origine al centro:
     avanti = top indietro / bottom avanti; ritorno = al contrario. */
  transform-origin: center center;
  padding: 0;            /* primo tab a filo col bordo sx del box (angolo alto-sx squadrato si salda) */
  position: relative;
  z-index: 1;
}
@keyframes sp-tpl-tab-flap {       /* AVANTI (→ edit): top indietro, bottom avanti */
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}
@keyframes sp-tpl-tab-flap-back {  /* SAVE/ANNULLA (→ fronte): al contrario */
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}
/* Ad OGNI flip il JS marca .sp-tpl-tabbed con .is-flipping per la durata del flip. La direzione la
   distingue lo stato is-flipped della card (già aggiornato quando parte il flap):
   andata = card flipped → flap; ritorno = card non flipped → flap-back (specchiato). */
.sp-tpl-tabbed.is-flipping:has(.sp-tpl-flip.is-flipped) .sp-tpl-tabs {
  animation: sp-tpl-tab-flap .6s cubic-bezier(.4, .2, .2, 1);
}

.sp-tpl-tabbed.is-flipping:not(:has(.sp-tpl-flip.is-flipped)) .sp-tpl-tabs {
  animation: sp-tpl-tab-flap-back .6s cubic-bezier(.4, .2, .2, 1);
}

.sp-tpl-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-unit-s);
  padding: var(--sp-unit-s) var(--sp-unit);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--sp-tpl-ink-1);
  background: var(--sp-tpl-bg-soft);
  border: 1px solid var(--sp-tpl-line);
  border-bottom: 0;
  border-radius: var(--sp-tpl-r-md) var(--sp-tpl-r-md) 0 0;
  margin-bottom: -1px;            /* sovrappone il bordo del box → "attaccata" */
  cursor: pointer;
  transition: color .2s var(--sp-tpl-ease), background .2s var(--sp-tpl-ease);
}

.sp-tpl-tab:hover { color: var(--sp-tpl-navy-0); }

.sp-tpl-tab.active {
  background: #ffffff;            /* uguale al box → si fonde */
  color: var(--sp-tpl-navy-0);
}

.sp-tpl-tab-icon { 
  display: inline-flex; 
  flex-shrink: 0; 
}

.sp-tpl-tabpane {
  /* Default: il pane È la card "agganciata" ai tab → contenuto generico (es. Sicurezza)
     dentro un box bianco che si salda alla tab attiva (angolo alto-sx squadrato),
     così i tab non sembrano "attaccati in aria". */
  min-height: calc(var(--sp-unit-xl) * 2);
  perspective: 1600px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: 0 var(--sp-tpl-r-md) var(--sp-tpl-r-md) var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-1);
  padding: var(--sp-unit-l);
}

/* Eccezione: se il tab contiene la flip card, è LEI il box (gira intera) → il pane torna
   trasparente per non fare card-in-card. Anagrafica resta identica. */
.sp-tpl-tabpane:has(> .sp-tpl-flip) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* ===== FLIP CARD (view ⇄ edit) =====
   Fronte = visualizzazione dati, retro = des form. "Modifica" gira la scheda,
   "Annulla"/save la rigira. Grid-stack: le due facce occupano la stessa cella →
   il contenitore prende l'altezza della faccia più alta (no clipping su des lunghi).
   Degrada gentile: se 3D non supportato, le facce restano leggibili (no backface). */
.sp-tpl-flip { perspective: 1600px; }

.sp-tpl-flip-inner {
  display: grid;   /* grid-stack: le due facce nella STESSA cella → il flip 3D + backface-visibility
                      le nasconde a vicenda. (NB: NON usare position absolute/relative qui: rompe la
                      backface e si vedono entrambe le facce. Altezza adattiva → semmai via JS.) */
  transition: transform .6s cubic-bezier(.4, .2, .2, 1), height .5s cubic-bezier(.4, .2, .2, 1);
  transform-style: preserve-3d;
}

.sp-tpl-flip.is-flipped .sp-tpl-flip-inner { transform: rotateY(180deg); }

.sp-tpl-flip-face {
  grid-area: 1 / 1;
  align-self: start;   /* niente stretch alla cella → ogni faccia = sua altezza naturale; il JS
                          (site.flipSetHeight) imposta l'altezza dell'inner = faccia ATTIVA (adattiva). */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  min-width: 0;
  /* La faccia È la scheda bianca: gira tutta col flip. Top-left piatto = aggancio tab. */
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: 0 var(--sp-tpl-r-md) var(--sp-tpl-r-md) var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-1);
  padding: var(--sp-unit-l);
}

.sp-tpl-flip-back { transform: rotateY(180deg); }
/* Fallback: niente preserve-3d (browser vecchi) → mostra solo il fronte finché non si flippa */
@supports not (transform-style: preserve-3d) {
  .sp-tpl-flip-back { display: none; }
  .sp-tpl-flip.is-flipped .sp-tpl-flip-front { display: none; }
  .sp-tpl-flip.is-flipped .sp-tpl-flip-back { display: block; transform: none; }
}

.sp-tpl-flip-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-unit-s);
  margin-top: var(--sp-unit-l);
  padding-top: var(--sp-unit);
  border-top: 1px solid var(--sp-tpl-line);
}
/* Pulsantiera del des nel retro (Save + Annulla): stile coerente coi .sp-tpl-btn.
   wrapper desBar = .disable-selection (getDesBarStructure); Save = [data-sphere], Annulla = [data-sp-flip-to]. */
.sp-tpl-flip-back .disable-selection {
  justify-content: flex-end;            /* barra a destra, niente space-between */
  gap: var(--sp-unit-s);
  margin-top: var(--sp-unit-l);
  padding-top: var(--sp-unit);
  border-top: 1px solid var(--sp-tpl-line);
}

.sp-tpl-flip-back .sp-button {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 0;                        /* annulla sp-margin-t del desBar */
  padding: 13px 26px;
  border-radius: var(--sp-tpl-r-sm);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--sp-tpl-ease), background .2s var(--sp-tpl-ease),
              color .2s var(--sp-tpl-ease), border-color .2s var(--sp-tpl-ease);
}

.sp-tpl-flip-back .sp-button[data-sphere] {      /* Save → primary (come "Modifica") */
  background: #0abab5; color: var(--sp-tpl-navy-0);
}

.sp-tpl-flip-back .sp-button[data-sphere]:hover {
 background: #3ff0e8; 
 transform: translateY(-1px); 
}

.sp-tpl-flip-back .sp-button[data-sp-flip-to] {  /* Annulla → outline */
  background: transparent; 
  border-color: var(--sp-tpl-line); 
  color: var(--sp-tpl-ink-1);
}

.sp-tpl-flip-back .sp-button[data-sp-flip-to]:hover { border-color: #0abab5; color: #0abab5; }
/* Il "box" ora è il pannello #sp-tpl-tabpane (vedi sopra): le facce sono trasparenti
   e il flip avviene DENTRO il box, che resta fermo. */

/* Testata scheda profilo: avatar + nome + sottotitolo */
.sp-tpl-profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-unit);
  padding-bottom: var(--sp-unit);
  margin-bottom: var(--sp-unit);
  border-bottom: 1px solid var(--sp-tpl-line);
}

.sp-tpl-profile-headinfo { min-width: 0; }

.sp-tpl-profile-name { 
  font-weight: 700; 
  font-size: 1.05rem; 
  color: var(--sp-tpl-navy-0); 
  line-height: 1.2; 
}

.sp-tpl-profile-sub { 
  color: var(--sp-tpl-ink-2); 
  font-size: 0.85rem; 
}

/* Vista dati profilo (fronte): righe label → valore */
/* ===== GRUPPI dei descrittori (.des-group) — capability "gruppi" =====
   Sezione nominabile dentro un des (view/mod/add). Titolo header + separatore tra gruppi. */

.des-group {
  width: 100%; 
  margin-bottom: var(--sp-unit-l); 
}/* gruppi impilati (sezioni), non affiancati */

.des-group:last-child { margin-bottom: 0; }

.des-group + .des-group { 
  padding-top: var(--sp-unit-l); 
  border-top: 1px solid var(--sp-tpl-line);
}

.des-group-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0abab5;
  margin-bottom: var(--sp-unit);
}
.des-group-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--sp-tpl-ink-2);
  margin: calc(-1 * var(--sp-unit-s)) 0 var(--sp-unit);
}
/* Logica layout per-gruppo via desGroups.type → classe des-group--<type>. Default (no type) = stack.
   Titolo/descrizione restano sempre a tutta larghezza anche in flex/grid. */

.des-group--flex { 
  display: flex; 
  flex-wrap: wrap; gap: var(--sp-unit) var(--sp-unit-l); 
  align-items: flex-start; 
}

.des-group--flex > * { flex: 1 1 240px; min-width: 0; }

.des-group--flex > .des-group-title, .des-group--flex > .des-group-desc { flex-basis: 100%; flex-grow: 0; }

.des-group--grid { 
  display: grid; 
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap: var(--sp-unit) var(--sp-unit-l); 
}

.des-group--grid > .des-group-title, .des-group--grid > .des-group-desc { grid-column: 1 / -1; }

/* valori lunghi (email, CF…) vanno a capo, mai overflow che accavalla la colonna accanto */
.sp-fen-view { overflow-wrap: anywhere; word-break: break-word; }

/* mobile: i campi affiancati (grid 2-col / flex / fen-view) impilano a piena larghezza */
@media ( max-width: 640px ) {
	.des-group--grid { grid-template-columns: 1fr; }

	.des-group--flex > * { flex-basis: 100%; }

	.sp-fen-view > * { flex: 1 1 100%; min-width: 0; }
}

.sp-tpl-profile-view { 
  display: flex; 
  flex-direction: column; 
  gap: var(--sp-unit-s); 
}

.sp-tpl-profile-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-unit);
  padding: var(--sp-unit-s) 0;
  border-bottom: 1px solid var(--sp-tpl-line);
}

.sp-tpl-profile-row:last-child { border-bottom: 0; }
.sp-tpl-profile-label { color: var(--sp-tpl-ink-2); font-size: 0.85rem; }
.sp-tpl-profile-value { color: var(--sp-tpl-navy-0); font-weight: 600; }
.sp-tpl-muted { color: var(--sp-tpl-ink-2); }

/* ===== FOOTER ===== */
.sp-tpl-footer {
  align-self: stretch; /* reset di sp-site-layout-2.0 footer { align-self: flex-end } */
  width: 100%;
  background: #04070c;
  color: rgba(255,255,255,0.78);
  padding: 56px 0 0;
  box-shadow: none;
}

.sp-tpl-footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--sp-tpl-line-dark);
}

.sp-tpl-footer-col { 
  display: flex; 
  flex-direction: column; 
  gap: 14px; 
  min-width: 160px; 
}

.sp-tpl-footer-col--brand { 
  gap: 12px; 
  min-width: 200px;
}
.sp-tpl-footer-logo { 
  max-height: 44px;
   width: auto; 
}

.sp-tpl-footer-title {
  font-weight: 700; font-size: 0.92rem;
  color: #ffffff;
  letter-spacing: 0.04em; text-transform: uppercase;
}

.sp-tpl-footer-items { 
  display: flex; 
  flex-direction: column; 
  gap: 8px;
}

.sp-tpl-footer-item {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  transition: color .18s var(--sp-tpl-ease);
}

.sp-tpl-footer-item:hover { color: #0abab5; }
.sp-tpl-footer-item--image { display: inline-flex; align-items: center; gap: 8px; }
.sp-tpl-footer-item--image img { height: 22px; width: auto; opacity: 0.75; transition: opacity .18s var(--sp-tpl-ease); }
.sp-tpl-footer-item--image:hover img { opacity: 1; }

.sp-tpl-footer-bottom {
  padding: 22px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.sp-tpl-footer-copyright { color: rgba(255,255,255,0.55); }
.sp-tpl-footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.sp-tpl-footer-legal-link {
  color: rgba(255,255,255,0.65);
  transition: color .18s var(--sp-tpl-ease);
}
.sp-tpl-footer-legal-link:hover { color: #0abab5; }

/* ===== INTRO (siteIntro composer step) ===== */
.sp-tpl-intro {
  padding: clamp(64px, 8vw, 96px) 0;
  background: var(--sp-tpl-bg-soft, #070b12);
  text-align: center;
}
.sp-tpl-intro + .sp-tpl-intro { padding-top: 0; }
.sp-tpl-intro-title {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700;
  color: var(--sp-tpl-navy-0);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.sp-tpl-intro-body {
  font-size: 1.02rem; line-height: 1.7;
  color: var(--sp-tpl-ink-1);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.sp-tpl-intro-body p + p { margin-top: 14px; }
/* La grid di card resta allineata a sinistra anche se la testa è centrata. */
.sp-tpl-intro-grid { text-align: left; margin-top: clamp(40px, 5vw, 56px); }
/* Teaser (news/store in home): grid riusata dentro sezione intro centrata. */
.sp-tpl-intro .sp-tpl-news-grid,
.sp-tpl-intro .sp-tpl-store-grid { text-align: left; margin-top: clamp(40px, 5vw, 56px); }
.sp-tpl-teaser-more { margin-top: clamp(32px, 4vw, 44px); }

/* ===== CTA BAND (banda finale home) ===== */
/* top padding ridotto: il gap sopra è già dato dal padding-bottom della sezione precedente. */
.sp-tpl-cta { padding: clamp(8px, 1.5vw, 20px) 0 clamp(64px, 8vw, 96px); background: var(--sp-tpl-bg-soft, #070b12); }
.sp-tpl-cta-card {
  position: relative;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px);
  border-radius: var(--sp-tpl-r-lg);
  background:
    radial-gradient(ellipse at top right, var(--sp-tpl-accent-soft), transparent 55%),
    linear-gradient(180deg, var(--sp-tpl-navy-0), var(--sp-tpl-navy-1));
  border: 1px solid var(--sp-tpl-accent-soft);
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}
.sp-tpl-cta-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sp-tpl-cta-inner { position: relative; z-index: 1; }
.sp-tpl-cta-card h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: #ffffff; margin-bottom: 16px; letter-spacing: -0.01em; }
.sp-tpl-cta-card p { color: rgba(255,255,255,0.82); max-width: 620px; margin: 0 auto 32px; font-size: 1.05rem; line-height: 1.7; }
.sp-tpl-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===== REVIEWS (recensioni/testimonial) ===== */
.sp-tpl-reviews { padding: clamp(64px, 8vw, 96px) 0; background: var(--sp-tpl-bg-soft, #070b12); text-align: center; }
.sp-tpl-reviews-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--sp-tpl-ink-1); }
.sp-tpl-reviews-rating strong { color: var(--sp-tpl-navy-0); font-size: 1.2rem; }
.sp-tpl-stars { color: #f5a623; letter-spacing: 2px; }
.sp-tpl-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; margin-top: clamp(40px, 5vw, 56px); }
.sp-tpl-review-card { padding: 28px 26px; background: #ffffff; border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-md); display: flex; flex-direction: column; gap: 14px; }
.sp-tpl-review-card .sp-tpl-stars { font-size: 0.9rem; }
.sp-tpl-review-text { color: var(--sp-tpl-ink-1); font-size: 0.95rem; line-height: 1.65; flex: 1; }
.sp-tpl-review-author { display: flex; flex-direction: column; }
.sp-tpl-review-author strong { color: var(--sp-tpl-navy-0); }
.sp-tpl-review-author span { color: var(--sp-tpl-ink-2); font-size: 0.85rem; }
@media (max-width: 900px) { .sp-tpl-reviews-grid { grid-template-columns: 1fr; } }

/* ===== METRICS STRIP ===== */
.sp-tpl-metrics { padding: clamp(56px, 7vw, 84px) 0; background: var(--sp-tpl-navy-0); color: #ffffff; text-align: center; }
.sp-tpl-metrics .sp-tpl-intro-title { color: #ffffff; }
.sp-tpl-metrics .sp-tpl-intro-body { color: rgba(255,255,255,0.78); }
.sp-tpl-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: clamp(32px, 4vw, 44px); }
.sp-tpl-metric { display: flex; flex-direction: column; gap: 6px; }
.sp-tpl-metric-value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: #0abab5; line-height: 1; }
.sp-tpl-metric-label { color: rgba(255,255,255,0.72); font-size: 0.9rem; }
@media (max-width: 900px) { 
  .sp-tpl-metrics-grid { 
    grid-template-columns: repeat(2, 1fr); 
  } 
}

/* ===== LOGOS STRIP ===== */
.sp-tpl-logos {
  padding: clamp(40px, 5vw, 60px) 0; 
  background: var(--sp-tpl-bg-soft, #070b12); 
  text-align: center; 
}

.sp-tpl-logos-title { 
  color: var(--sp-tpl-ink-2); 
  text-transform: uppercase; 
  letter-spacing: 0.14em; 
  font-size: 0.78rem; 
  margin-bottom: 24px; 
}

.sp-tpl-logos-row { 
  display: flex; 
  flex-wrap: wrap; 
  gap: clamp(24px, 4vw, 52px); 
  align-items: center; 
  justify-content: center;
}

.sp-tpl-logo-item { 
  color: var(--sp-tpl-ink-2); 
  font-weight: 600; 
  font-size: 1.05rem; 
  opacity: 0.7; 
  transition: opacity .2s var(--sp-tpl-ease);
}

.sp-tpl-logo-item:hover { 
  opacity: 1;
  color: var(--sp-tpl-navy-0);
}

.sp-tpl-logo-item img {
  height: 34px; 
  width: auto; 
  filter: grayscale(1); 
  opacity: 0.7;
}

.sp-tpl-logo-item:hover img { filter: none; opacity: 1; }

/* ===== FAQ ===== */
.sp-tpl-faq { 
  padding: clamp(64px, 8vw, 96px) 0; 
  background: #ffffff; 
  text-align: center; 
}

.sp-tpl-faq-list { 
  max-width: 760px; 
  margin: clamp(32px, 4vw, 44px) auto 0; 
  text-align: left; display: 
  flex; flex-direction: column; 
  gap: 12px; 
}

.sp-tpl-faq-item { 
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md); 
  background: var(--sp-tpl-bg-soft, #070b12); 
  padding: 0 22px;
}

.sp-tpl-faq-item summary { 
  cursor: pointer; 
  padding: 18px 0; 
  font-weight: 600; 
  color: var(--sp-tpl-navy-0); 
  list-style: none; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 16px; 
}

.sp-tpl-faq-item summary::-webkit-details-marker { display: none; }

.sp-tpl-faq-item summary::after { content: '+'; color: #0abab5; font-size: 1.4rem; line-height: 1; }

.sp-tpl-faq-item[open] summary::after { content: '\2212'; }

.sp-tpl-faq-answer { padding: 0 0 18px; color: var(--sp-tpl-ink-1); line-height: 1.7; }

/* ===== BENTO ===== */
.sp-tpl-bento { 
  padding: clamp(64px, 8vw, 96px) 0; 
  background: var(--sp-tpl-bg-soft, #070b12); 
  text-align: center; }

.sp-tpl-bento-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 22px; 
  text-align: left; 
  margin-top: clamp(40px, 5vw, 56px); 
}

.sp-tpl-bento-card { 
  padding: 30px 28px; 
  background: #ffffff; 
  border: 1px solid var(--sp-tpl-line); 
  border-radius: var(--sp-tpl-r-md); 
  transition: border-color .25s var(--sp-tpl-ease), transform .25s var(--sp-tpl-ease);
}

.sp-tpl-bento-card:hover { 
  border-color: #0abab5; 
  transform: translateY(-3px);
}

.sp-tpl-bento-card.is-wide { grid-column: span 2; }

.sp-tpl-bento-card h3 { color: var(--sp-tpl-navy-0); margin-bottom: 8px; }

.sp-tpl-bento-card p { color: var(--sp-tpl-ink-1); font-size: 0.93rem; }

@media (max-width: 900px) { 

  .sp-tpl-bento-grid { 
    grid-template-columns: 1fr;
  } 

  .sp-tpl-bento-card.is-wide { 
    grid-column: auto; 
  } 
}

/* ===== CASE STUDY ===== */
.sp-tpl-case { 
  padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px); 
  background: var(--sp-tpl-bg-soft, #070b12);
}

.sp-tpl-case-card { 
  padding: clamp(40px, 5vw, 72px); 
  border-radius: var(--sp-tpl-r-lg); 
  background: #ffffff; 
  border: 1px solid var(--sp-tpl-line); 
  max-width: 880px; margin: 0 auto;
}

.sp-tpl-case-card h2 { 
  color: var(--sp-tpl-navy-0); 
  margin-bottom: 14px; 
}

.sp-tpl-case-lead { 
  color: var(--sp-tpl-ink-1); 
  line-height: 1.7; 
  margin-bottom: 24px; 
}

.sp-tpl-case-points { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

.sp-tpl-case-points li { 
  padding-left: 26px; 
  position: relative; 
  color: var(--sp-tpl-ink-1); 
}

.sp-tpl-case-points li::before { 
  content: '\2713'; 
  position: absolute; 
  left: 0; 
  color: #0abab5; 
  font-weight: 700; 
}

.sp-tpl-case-points strong { color: var(--sp-tpl-navy-0); }

/* ===== FOOTER SOCIALS (icon-button, mockup v6) ===== */
.sp-tpl-footer-socials { 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap;
}

.sp-tpl-footer-social { 
  width: 38px;
  height: 38px;
  border-radius:var(--sp-tpl-r-sm); 
  background: rgba(255,255,255,0.06); 
  color: rgba(255,255,255,0.8); 
  display: grid; 
  place-items: center; 
  font-size: 0.95rem; 
  transition: background .2s var(--sp-tpl-ease), color .2s var(--sp-tpl-ease), transform .2s var(--sp-tpl-ease);
}

.sp-tpl-footer-social:hover { 
  background: #0abab5; 
  color: var(--sp-tpl-navy-0); 
  transform: translateY(-2px);
}

/* ===== BACK TO TOP ===== */
.sp-tpl-totop {
  position: fixed; right: 24px; bottom: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #0abab5; color: var(--sp-tpl-navy-0);
  border: none; cursor: pointer; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--sp-tpl-ease), transform .25s var(--sp-tpl-ease), visibility .25s, background .2s var(--sp-tpl-ease);
  z-index: 90; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.sp-tpl-totop.is-visible { 
  opacity: 1; 
  visibility: visible;
  transform: translateY(0);
}

.sp-tpl-totop:hover { background: #3ff0e8; }

@media (prefers-reduced-motion: reduce) { .sp-tpl-totop { transition: none; } }

/* ===== PAGE HERO (pagine interne — mockup v6 style: centered + teal spotlight) ===== */
.sp-tpl-page-hero {
  position: relative;
  background: var(--sp-tpl-navy-0);
  color: #ffffff;
  padding: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + 70px) 24px 70px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* Background "tono di luce" — sempre presente, anche con image */
.sp-tpl-page-hero-bg {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(78, 195, 200, 0.16), transparent 65%),
    linear-gradient(180deg, #0a1828 0%, var(--sp-tpl-navy-0) 60%, var(--sp-tpl-navy-deep) 100%);
}
/* Image opzionale: si fonde con il gradient via luminosity + opacity */
.sp-tpl-page-hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.4;
  mix-blend-mode: luminosity;
}
/* Overlay aggiuntivo (solo quando c'è image) — preserva il tono di luce sopra */
.sp-tpl-page-hero-bg img + .sp-tpl-page-hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(78, 195, 200, 0.18), transparent 65%),
    linear-gradient(180deg, rgba(6, 18, 29, 0.30) 0%, rgba(6, 18, 29, 0.55) 70%, rgba(6, 18, 29, 0.75) 100%);
}
.sp-tpl-page-hero-inner { position: relative; z-index: 2; }
.sp-tpl-page-hero .sp-tpl-eyebrow { color: #0abab5; margin-bottom: 14px; }
.sp-tpl-page-hero-title {
  color: #ffffff;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.sp-tpl-page-hero-teaser {
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.55;
}

/* ===== CONTENT (section + section-head pattern del mockup) ===== */
.sp-tpl-content {
  padding: 90px 0;
  background: #ffffff;
}
.sp-tpl-content-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.sp-tpl-content-head .sp-tpl-eyebrow { color: #0abab5; margin-bottom: 14px; }
.sp-tpl-content-subtitle {
  color: var(--sp-tpl-navy-0);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.sp-tpl-content-body {
  color: var(--sp-tpl-ink-1);
  font-size: 1.02rem;
  line-height: 1.65;
}
.sp-tpl-content-body p + p,
.sp-tpl-content-body h2,
.sp-tpl-content-body h3,
.sp-tpl-content-body ul,
.sp-tpl-content-body ol { margin-top: 18px; }
.sp-tpl-content-body h2 { font-size: 1.3rem; color: var(--sp-tpl-navy-0); }
.sp-tpl-content-body h3 { font-size: 1.1rem; color: var(--sp-tpl-navy-0); }
.sp-tpl-content-body a { color: #0abab5; }
.sp-tpl-content-body a:hover { text-decoration: underline; }
.sp-tpl-content-body ul,
.sp-tpl-content-body ol { padding-left: 22px; text-align: left; display: inline-block; }
.sp-tpl-content-body li + li { margin-top: 6px; }

/* ===== CONTENT GRID (boxetti — 4 col numerati 01/02/03/04 ===== */
.sp-tpl-content-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sp-tpl-content-card {
  display: flex; flex-direction: column;
  padding: 28px 24px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), transform .25s var(--sp-tpl-ease);
  text-align: left;
}
.sp-tpl-content-card:hover,
a.sp-tpl-content-card:hover {
  border-color: #0abab5;
  transform: translateY(-3px);
}
.sp-tpl-content-card-num {
  font-size: 1.6rem; font-weight: 700;
  color: #0abab5;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 14px;
}
.sp-tpl-content-card-icon {
  font-size: 1.8rem;
  color: #0abab5;
  margin-bottom: 14px;
  line-height: 1;
}
.sp-tpl-content-card-img { margin-bottom: 14px; }
.sp-tpl-content-card-img img {
  max-width: 100%; height: auto;
  border-radius: var(--sp-tpl-r-sm);
}
.sp-tpl-content-card-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--sp-tpl-navy-0);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.sp-tpl-content-card-body {
  font-size: 0.92rem;
  color: var(--sp-tpl-ink-1);
  line-height: 1.55;
}

/* ===== NEWS / ARTICLES (mockup v6) ===== */
.sp-tpl-news-toolbar {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 32px;
}
.sp-tpl-news-search {
  position: relative; flex: 1;
  min-width: 260px; max-width: 360px;
}
.sp-tpl-news-search input {
  width: 100%; padding: 13px 44px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  color: var(--sp-tpl-ink-0);
  font: inherit; font-size: 0.95rem;
  outline: 0;
  transition: border-color .2s var(--sp-tpl-ease), box-shadow .2s var(--sp-tpl-ease);
}
.sp-tpl-news-search input:focus { border-color: #0abab5; box-shadow: 0 0 0 4px rgba(78,195,200,0.14); }
.sp-tpl-news-search .sp-tpl-news-search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--sp-tpl-ink-2); pointer-events: none;
}
.sp-tpl-news-search .sp-tpl-news-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: rgba(14, 29, 43, 0.08); color: var(--sp-tpl-ink-1);
  cursor: pointer; font-size: 1rem; line-height: 1;
  display: none; align-items: center; justify-content: center;
}
.sp-tpl-news-search.has-value .sp-tpl-news-search-clear { display: flex; }
.sp-tpl-news-search .sp-tpl-news-search-clear:hover { background: #0abab5; color: var(--sp-tpl-navy-0); }

.sp-tpl-news-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-tpl-news-filters a,
.sp-tpl-news-filters button {
  padding: 8px 16px; font-size: 0.88rem;
  border-radius: var(--sp-tpl-r-sm);
  border: 1px solid var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  cursor: pointer;
  transition: all .2s var(--sp-tpl-ease);
}
.sp-tpl-news-filters a:hover,
.sp-tpl-news-filters button:hover,
.sp-tpl-news-filters a.is-active,
.sp-tpl-news-filters button.is-active {
  background: #0abab5;
  color: var(--sp-tpl-navy-0);
  border-color: #0abab5;
}

.sp-tpl-news-count {
  color: var(--sp-tpl-ink-2);
  font-size: 0.85rem;
  margin-left: auto;
  white-space: nowrap;
}

.sp-tpl-news-empty {
  text-align: center; padding: 80px 20px;
  color: var(--sp-tpl-ink-2); font-size: 0.95rem;
  border: 1px dashed var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
}

.sp-tpl-news-approx {
  margin: 0 0 var(--sp-unit-l) 0;
  padding: var(--sp-unit) var(--sp-unit-l);
  background: linear-gradient(135deg, rgba(255, 196, 0, 0.10), rgba(255, 145, 0, 0.06));
  border: 1px solid rgba(255, 196, 0, 0.35);
  border-left: 3px solid var(--sp-tpl-accent, #ff9100);
  border-radius: var(--sp-tpl-r-md);
  color: var(--sp-tpl-ink-1);
  font-size: 0.92rem;
  line-height: 1.45;
}
.sp-tpl-news-approx::before {
  content: "⚐";
  display: inline-block;
  margin-right: 8px;
  color: var(--sp-tpl-accent, #ff9100);
  font-size: 0.95rem;
}

.sp-tpl-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.sp-tpl-news-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--sp-tpl-ease), box-shadow .25s var(--sp-tpl-ease), border-color .25s var(--sp-tpl-ease);
}
.sp-tpl-news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sp-tpl-shadow-2);
  border-color: #0abab5;
}
.sp-tpl-news-thumb {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sp-tpl-navy-0), #0abab5);
}
.sp-tpl-news-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sp-tpl-news-thumb.alt-1 { background: linear-gradient(135deg, #2c4a55, #4ec3c8); }
.sp-tpl-news-thumb.alt-2 { background: linear-gradient(135deg, #1a2330, #f0c674); }
.sp-tpl-news-thumb.alt-3 { background: linear-gradient(135deg, #0e1d2b, #6b9aa6); }
.sp-tpl-news-thumb.alt-4 { background: linear-gradient(135deg, #3a4f5c, #a08af0); }
.sp-tpl-news-thumb.alt-5 { background: linear-gradient(135deg, #14283a, #4ec3c8); }
.sp-tpl-news-thumb.alt-6 { background: linear-gradient(135deg, #2a1f2c, #f08aa0); }
.sp-tpl-news-thumb:not(:has(img))::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.12), transparent 30%);
}
.sp-tpl-news-body {
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.sp-tpl-news-meta {
  display: flex; gap: 12px;
  font-size: 0.78rem;
  color: var(--sp-tpl-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sp-tpl-news-meta .sp-tpl-news-tag {
  color: #0abab5;
  font-weight: 600;
}
.sp-tpl-news-body h3 {
  color: var(--sp-tpl-navy-0);
  font-size: 1.1rem;
  line-height: 1.35;
  margin: 0;
}
.sp-tpl-news-body p {
  color: var(--sp-tpl-ink-1);
  font-size: 0.92rem;
  margin: 0;
}
.sp-tpl-news-card .sp-tpl-news-more {
  margin-top: auto;
  color: var(--sp-tpl-navy-0);
  font-weight: 600;
  font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.sp-tpl-news-card .sp-tpl-news-more::after {
  content: "→";
  transition: transform .2s var(--sp-tpl-ease);
}
.sp-tpl-news-card:hover .sp-tpl-news-more::after { transform: translateX(4px); }

.sp-tpl-news-pager {
  display: flex; justify-content: center; gap: 12px;
  margin-top: 48px;
}
.sp-tpl-news-pager a,
.sp-tpl-news-pager button {
  padding: 10px 22px;
  border-radius: var(--sp-tpl-r-sm);
  border: 1px solid var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  font-weight: 600; font-size: 0.92rem;
  cursor: pointer;
  transition: border-color .2s var(--sp-tpl-ease), color .2s var(--sp-tpl-ease);
}
.sp-tpl-news-pager a:hover,
.sp-tpl-news-pager button:hover {
  border-color: #0abab5;
  color: #0abab5;
}

/* ===== AREA RISERVATA (login card centered) ===== */
.sp-tpl-reserved {
  position: relative;
  padding: 80px 0;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, #0abab5 22%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, #3ff0e8 18%, transparent) 0%, transparent 50%),
    var(--sp-tpl-bg-soft, #fafafa);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.sp-tpl-reserved::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.04) 100%),
    linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.04) 100%);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}
.sp-tpl-reserved > * { position: relative; z-index: 1; }
.sp-tpl-reserved .sp-tpl-container { width: 100%; }

/* App variant (dashboard area riservata): full-width con padding come sito.
   La login card resta centered; solo la home loggata si allarga a tutta larghezza. */
.sp-tpl-reserved--app {
  display: block;
  padding: var(--sp-unit-xl) 0;
}
.sp-tpl-reserved--app > .sp-tpl-container { max-width: none; }

/* Hero variant: background image full-bleed + overlay + card sopra */
.sp-tpl-reserved--hero {
  position: relative;
  padding: 100px 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--sp-tpl-navy-0);
  isolation: isolate;
  display: flex;
  align-items: center;
}
.sp-tpl-reserved--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,21,32,0.45) 0%, rgba(11,21,32,0.65) 100%);
  z-index: 0;
}
.sp-tpl-reserved--hero .sp-tpl-container { position: relative; z-index: 1; }

/* Mesh variant login: sfondo navy + canvas mesh dietro la card (no background-image). 2026-06-04.
   Override z-index del `.sp-tpl-reserved > *` (che metterebbe il canvas davanti). */
.sp-tpl-reserved--mesh { background: var(--sp-tpl-navy-0); overflow: hidden; }
.sp-tpl-reserved--mesh::after { display: none; }
.sp-tpl-reserved--mesh > .sp-tpl-hero-bg { position: absolute; inset: 0; z-index: 0; }
.sp-tpl-reserved--mesh > .sp-tpl-hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }

.sp-tpl-reserved-card {
  max-width: calc(var(--sp-unit-xl) * 9);
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  padding: calc(var(--sp-unit-l) * 1.5) var(--sp-unit-l);
  min-height: calc(var(--sp-unit-xl) * 5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(11,21,32,0.08), 0 1px 4px rgba(11,21,32,0.04);
  transition: transform 0.25s var(--sp-tpl-ease), box-shadow 0.25s var(--sp-tpl-ease);
}
.sp-tpl-reserved-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(11,21,32,0.12), 0 2px 6px rgba(11,21,32,0.06);
}
.sp-tpl-reserved--hero .sp-tpl-reserved-card {
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.sp-tpl-reserved-card .sp-login-buttons {
  display: flex;
  justify-content: center;
}
.sp-tpl-reserved-card .sp-button {
  padding: 13px 26px;
  border-radius: var(--sp-tpl-r-sm);
  background: #0abab5;
  color: var(--sp-tpl-navy-0);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s var(--sp-tpl-ease), transform 0.2s var(--sp-tpl-ease);
  cursor: pointer;
}
.sp-tpl-reserved-card .sp-button:hover { transform: translateY(-1px); }

/* Login/passwordless card (basic2::loginBox, passBox, mfaBox) */
.sp-tpl-reserved-card .sp-tpl-login-title {
  display: block;
  margin: 0 auto var(--sp-unit-l);
  font-size: calc(var(--sp-unit) * 1.75);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--sp-tpl-navy-0);
  letter-spacing: -0.01em;
}
.sp-tpl-reserved-card .sp-tpl-login-form { margin-bottom: var(--sp-unit-l); }
.sp-tpl-reserved-card .sp-tpl-login-form .fen { margin-bottom: var(--sp-unit); }
.sp-tpl-reserved-card .sp-tpl-login-desc {
  margin: 0 0 var(--sp-unit-l);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sp-tpl-muted, #6b7280);
  text-align: center;
}
.sp-tpl-reserved-card .sp-tpl-login-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-unit);
}
.sp-tpl-reserved-card .sp-tpl-login-actions .sp-tpl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--sp-unit-s) * 2);
  padding: var(--sp-unit) calc(var(--sp-unit) * 2);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  border-radius: var(--sp-tpl-r-sm);
  width: 100%;
  box-shadow: 0 4px 14px rgba(80,172,188,0.32);
  transition: transform 0.2s var(--sp-tpl-ease), box-shadow 0.2s var(--sp-tpl-ease), background 0.2s var(--sp-tpl-ease);
}
/* icona allineata, non si schiaccia col testo che va a capo */
.sp-tpl-reserved-card .sp-tpl-login-actions .sp-tpl-btn i {
  flex-shrink: 0;
  font-size: 1.1em;
}
.sp-tpl-reserved-card .sp-tpl-login-actions .sp-tpl-btn:hover {
  transform: translateY(calc(var(--sp-unit-s) * -0.4));
  box-shadow: 0 8px 22px rgba(80,172,188,0.45);
}
/* mobile: testo più compatto così "Accedi con passkey" sta su una riga */
@media (max-width: 640px) {
  .sp-tpl-reserved-card .sp-tpl-login-actions .sp-tpl-btn {
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    padding: calc(var(--sp-unit-s) * 2) var(--sp-unit);
  }
}
.sp-tpl-reserved-card .sp-tpl-login-link {
  color: #0abab5;
  text-decoration: none;
  font-size: 0.9rem;
  text-align: center;
  padding: var(--sp-unit-s) 0;
}
.sp-tpl-reserved-card .sp-tpl-login-link:hover { text-decoration: underline; }

/* ===== STORE / PRODUCTS (mockup v6) ===== */
.sp-tpl-store-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sp-tpl-product-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--sp-tpl-ease), box-shadow .25s var(--sp-tpl-ease), border-color .25s var(--sp-tpl-ease);
}
.sp-tpl-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sp-tpl-shadow-2);
  border-color: #0abab5;
}
.sp-tpl-product-thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sp-tpl-navy-0), #0abab5);
}
.sp-tpl-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-tpl-product-thumb.alt-1 { background: linear-gradient(135deg, #2c4a55, #4ec3c8); }
.sp-tpl-product-thumb.alt-2 { background: linear-gradient(135deg, #1a2330, #f0c674); }
.sp-tpl-product-thumb.alt-3 { background: linear-gradient(135deg, #0e1d2b, #6b9aa6); }
.sp-tpl-product-thumb.alt-4 { background: linear-gradient(135deg, #3a4f5c, #a08af0); }
.sp-tpl-product-thumb.alt-5 { background: linear-gradient(135deg, #14283a, #4ec3c8); }
.sp-tpl-product-thumb.alt-6 { background: linear-gradient(135deg, #2a1f2c, #f08aa0); }
.sp-tpl-product-thumb.alt-7 { background: linear-gradient(135deg, #1a2820, #88ccaa); }
.sp-tpl-product-thumb:not(:has(img))::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 38%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,0.12), transparent 32%);
}
.sp-tpl-product-body {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.sp-tpl-product-cat {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0abab5;
  font-weight: 600;
}
.sp-tpl-product-body h3 {
  color: var(--sp-tpl-navy-0);
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0;
  font-weight: 700;
}
.sp-tpl-product-price {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.sp-tpl-product-price-current {
  color: var(--sp-tpl-navy-0);
  font-weight: 700;
  font-size: 1.05rem;
}
.sp-tpl-product-price-old {
  color: var(--sp-tpl-ink-2);
  font-size: 0.88rem;
  text-decoration: line-through;
}
.sp-tpl-product-price--hero {
  margin-top: 18px;
  align-items: center;
  justify-content: center;
}
.sp-tpl-product-price--hero .sp-tpl-product-price-current {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
}
.sp-tpl-product-price--hero .sp-tpl-product-price-old {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.05rem;
}

@media (max-width: 1024px) {
  .sp-tpl-store-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .sp-tpl-store-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .sp-tpl-store-grid { grid-template-columns: 1fr; }
}

/* ===== CONTATTI ===== */
.sp-tpl-contact-block {}
.sp-tpl-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 36px;
  align-items: stretch;
}
.sp-tpl-contact-info {
  display: flex; flex-direction: column;
  gap: 14px;
}
.sp-tpl-info-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), background .25s var(--sp-tpl-ease);
}
.sp-tpl-info-card:hover {
  border-color: #0abab5;
  background: rgba(78, 195, 200, 0.04);
}
.sp-tpl-info-card-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--sp-tpl-r-sm);
  background: rgba(78, 195, 200, 0.10);
  color: #0abab5;
  font-size: 1.05rem;
}
.sp-tpl-info-card-body { flex: 1; min-width: 0; }
.sp-tpl-info-card-body h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sp-tpl-ink-2);
  margin: 0 0 6px;
  font-weight: 600;
}
.sp-tpl-info-card-body p {
  color: var(--sp-tpl-ink-0);
  font-size: 0.96rem;
  line-height: 1.45;
  margin: 0;
}
.sp-tpl-info-card-body a { color: #0abab5; }
.sp-tpl-info-card-body a:hover { text-decoration: underline; }

.sp-tpl-contact-map {
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  border: 1px solid var(--sp-tpl-line);
  background: var(--sp-tpl-bg-soft, #f5f5f5);
  min-height: 360px;
  display: flex;
}
.sp-tpl-contact-map iframe,
.sp-tpl-contact-map > * {
  display: block;
  width: 100%;
  flex: 1;
  border: 0;
  min-height: 360px;
}

@media (max-width: 720px) {
  .sp-tpl-contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .sp-tpl-contact-map iframe,
  .sp-tpl-contact-map > * { min-height: 280px; }
}

/* ===== ARTICLE single (esploso /news/<cat>/<slug>) ===== */
.sp-tpl-article-image {
  margin: 0 auto 32px;
  max-width: 820px;
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
}
.sp-tpl-article-image img {
  display: block; width: 100%; height: auto;
  object-fit: cover;
}
.sp-tpl-article-body {
  margin: 0 auto;
  max-width: 720px;
}
.sp-tpl-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px;
  border-radius: var(--sp-tpl-r-sm);
  border: 1px solid var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  font-weight: 600; font-size: 0.92rem;
  transition: border-color .2s var(--sp-tpl-ease), color .2s var(--sp-tpl-ease);
}
.sp-tpl-back-link:hover { border-color: #0abab5; color: #0abab5; }

@media (max-width: 900px) {
  .sp-tpl-content-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-tpl-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sp-tpl-content-grid { grid-template-columns: 1fr; }
  .sp-tpl-news-grid { grid-template-columns: 1fr; }
  .sp-tpl-news-count { margin-left: 0; width: 100%; }
  .sp-tpl-content { padding: 60px 0; }
}

/* ===== HERO SLIDESHOW (cinematic) ===== */
.sp-tpl-slideshow {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
  background: var(--sp-tpl-navy-deep);
  margin-top: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h));
}
.sp-tpl-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  pointer-events: none;
}
.sp-tpl-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.sp-tpl-slide-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.sp-tpl-slide.is-kb .sp-tpl-slide-bg { animation: sp-ken-burns 18s ease-out forwards; }
.sp-tpl-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6,18,29,0.25) 0%,
    rgba(6,18,29,0.45) 50%,
    rgba(6,18,29,0.78) 100%);
}
.sp-tpl-slide-content {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
  padding-bottom: 110px;
  color: #ffffff;
}
.sp-tpl-slide-title {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 820px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.sp-tpl-slide-intro {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  max-width: 680px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

.sp-tpl-slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border: 0; border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(6px);
}
.sp-tpl-slideshow:hover .sp-tpl-slide-nav { opacity: 1; }
.sp-tpl-slide-nav:hover { background: #0abab5; color: var(--sp-tpl-navy-0); }
.sp-tpl-slide-prev { left: 24px; }
.sp-tpl-slide-next { right: 24px; }

.sp-tpl-slide-dots {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 10px;
}
.sp-tpl-slide-dot {
  width: 8px; height: 8px;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, width 0.25s ease;
}
.sp-tpl-slide-dot.is-active { background: #ffffff; width: 28px; border-radius: 4px; }

@media (max-width: 720px) {
  .sp-tpl-slideshow { height: 60vh; min-height: 380px; }
  .sp-tpl-slide-content { padding-bottom: 80px; padding-left: 20px; padding-right: 20px; }
  .sp-tpl-slide-nav { width: 40px; height: 40px; opacity: 1; background: rgba(255,255,255,0.18); }
  .sp-tpl-slide-prev { left: 12px; }
  .sp-tpl-slide-next { right: 12px; }
}

/* ===== REVEAL ===== */
.sp-tpl-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--sp-tpl-ease), transform .7s var(--sp-tpl-ease); }
.sp-tpl-reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .sp-tpl-reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .sp-tpl-nav { display: none; }
  .sp-tpl-hamburger { display: grid; place-items: center end; }
  .sp-tpl-intro-grid { grid-template-columns: 1fr; }
  .sp-tpl-news-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-tpl-store-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-tpl-values-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-tpl-contact-grid { grid-template-columns: 1fr; }
  .sp-tpl-map { min-height: 320px; }
  .sp-tpl-footer-top { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .sp-tpl-topbar { font-size: 0.78rem; }
  .sp-tpl-topbar-left .tel { display: none; }
  .sp-tpl-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .sp-tpl-section { padding: 70px 0; }
  .sp-tpl-news-grid, .sp-tpl-store-grid, .sp-tpl-values-grid { grid-template-columns: 1fr; }
}
/* Footer centrato + compatto su mobile — DOPO i blocchi sopra per vincere su ≤1024.
   KB unit scale 5/15/30/60: tutti i valori canonical via var(--sp-unit-s/unit/unit-l/unit-xl). */
@media (max-width: 640px) {
  .sp-tpl-footer { padding-top: calc(var(--sp-unit-l) + var(--sp-unit)); padding-bottom: var(--sp-unit-l); }
  .sp-tpl-footer-top { align-items: center; text-align: center; gap: var(--sp-unit-l); padding-bottom: var(--sp-unit-l); }
  .sp-tpl-footer-col, .sp-tpl-footer-col--brand { align-items: center; }
  .sp-tpl-footer-brand { justify-content: center; }
  .sp-tpl-footer-socials { justify-content: center; }
  .sp-tpl-footer-bottom { flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: var(--sp-unit); padding: calc(var(--sp-unit) + var(--sp-unit-s)) 0 0; }
  .sp-tpl-footer-legal { justify-content: center; gap: var(--sp-unit-s) calc(var(--sp-unit-s) * 2); font-size: 0.78rem; }
  .sp-tpl-footer-legal-link { white-space: nowrap; }
}

/* ===== Mobile login/reserved card + topbar ===== */
/* Card login/area-riservata: su mobile full-width + padding generoso (sensazione "grande box").
   No min-height/hover transform. Input font 16px (no iOS zoom).
   Topbar: icone-only su mobile (label nascosti via .sp-tpl-topbar-label) → tutto su una riga. */
@media (max-width: 640px) {
  .sp-tpl-reserved {
    padding: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + var(--sp-unit-l)) 0 var(--sp-unit-l);
  }
  .sp-tpl-reserved-card {
    max-width: 100%;
    width: 100%;
    padding: calc(var(--sp-unit-l) + var(--sp-unit)) var(--sp-unit-l);
    min-height: auto;
  }
  .sp-tpl-reserved-card:hover {
    transform: none;
    box-shadow: 0 4px 24px rgba(11,21,32,0.08), 0 1px 4px rgba(11,21,32,0.04);
  }
  .sp-tpl-reserved-card .sp-tpl-login-title {
    font-size: calc(var(--sp-unit) * 2);
    margin-bottom: var(--sp-unit-l);
  }
  .sp-tpl-reserved-card .sp-button {
    padding: var(--sp-unit) var(--sp-unit-l);
    font-size: 1rem;
  }
  .sp-tpl-login-card {
    max-width: 100%;
    padding: calc(var(--sp-unit-l) * 1.5) var(--sp-unit-l);
  }
  .sp-tpl-login-card h2 {
    font-size: 1.6rem;
  }
  .sp-tpl-login-card .sp-tpl-sub {
    font-size: 1rem;
    margin-bottom: var(--sp-unit-l);
  }
  .sp-tpl-login-form {
    gap: var(--sp-unit-l);
  }
  .sp-tpl-login-form input {
    font-size: 1rem;
    padding: calc(var(--sp-unit-s) * 3) var(--sp-unit);
  }
  .sp-tpl-login-card .sp-tpl-extras {
    flex-direction: column;
    gap: var(--sp-unit-s);
    align-items: flex-start;
    margin-top: var(--sp-unit-l);
  }
  /* Topbar: nascondi label, mantieni solo icone → tutto su una riga.
     Touch target min 40×40 (WCAG ~44) via padding + min-w/h sull'item, scale-aware.
     Topbar altezza mobile: --sp-unit-l + --sp-unit-s (35) — sotto soglia 40 anche perché
     l'item ha min-height 40 → flex stretcha a 40. Topbar a height auto + min-height. */
  .sp-tpl-topbar-label {
    display: none;
  }
  .sp-tpl-topbar {
    height: auto;
    min-height: calc(var(--sp-unit-l) + var(--sp-unit-s) * 2);
  }
  .sp-tpl-topbar-left,
  .sp-tpl-topbar-right {
    gap: var(--sp-unit-s);
  }
  .sp-tpl-topbar-item {
    padding: var(--sp-unit-s) calc(var(--sp-unit-s) * 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--sp-unit-l) + var(--sp-unit-s) * 2);
    min-height: calc(var(--sp-unit-l) + var(--sp-unit-s) * 2);
  }
  /* Primo item left / ultimo item right: icona flush con il padding container
     (allinea visivamente con logo header a sinistra, hamburger a destra) */
  .sp-tpl-topbar-left > .sp-tpl-topbar-item:first-child {
    padding-left: 0;
    justify-content: flex-start;
  }
  .sp-tpl-topbar-right > .sp-tpl-topbar-item:last-child {
    padding-right: 0;
    justify-content: flex-end;
  }
}

/* ============================================================================
   WIDGET DASHBOARD (2026-06-09) — card generali nel <main> area riservata.
   Layout: header (greeting) + griglia 12-col di card-widget (col-N).
   Mix: greeting · Il mio account · completamento · sicurezza(in arrivo) · scorciatoie.
   Scala unit canonica (5/15/30/60), accent = #0abab5.
   ============================================================================ */
/* Griglia 12-col: i widget sono celle (col-N). Vive come <div> dentro <main> →
   su navigazione (Profilo che fa innerHTML su .sp-tpl-account-main) sparisce. */
.sp-tpl-dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-unit-l);
  align-items: start;
}
.sp-tpl-dash-col-4  { grid-column: span 4; }
.sp-tpl-dash-col-8  { grid-column: span 8; }
.sp-tpl-dash-col-12 { grid-column: span 12; }
@media (max-width: 900px) {
  /* Collasso a 1 colonna: con 12 tracce + gap 30px i soli gap (11×30=330) sforavano
     la larghezza utile del telefono → contenuto debordante a destra. */
  .sp-tpl-dash-grid { grid-template-columns: 1fr; }
  .sp-tpl-dash-col-4, .sp-tpl-dash-col-8, .sp-tpl-dash-col-12 { grid-column: auto; }
}

.sp-tpl-dash-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-1);
  padding: var(--sp-unit-l);
}
.sp-tpl-dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-unit);
  margin-bottom: var(--sp-unit);
}
.sp-tpl-dash-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0abab5;
}
.sp-tpl-dash-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px var(--sp-unit-s);
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-accent-soft);
  color: #0abab5;
}

/* --- Header dashboard (page-title, niente avatar → no duplicazione con sidebar) --- */
.sp-tpl-dash-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-unit);
  flex-wrap: wrap;
  margin-bottom: var(--sp-unit-l);
}
/* Orologio live (popolato da jSite::initClock, tick 1s). Capitalizza il giorno. */
.sp-tpl-dash-clock {
  font-size: 0.9rem;
  color: var(--sp-tpl-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sp-tpl-dash-clock::first-letter { text-transform: uppercase; }
.sp-tpl-dash-h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sp-tpl-ink-0);
  margin: 0 0 var(--sp-unit-s);
  line-height: 1.2;
}
.sp-tpl-dash-lead { color: var(--sp-tpl-ink-1); font-size: 0.95rem; margin: 0; }

/* --- Il mio account --- */
.sp-tpl-dash-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-unit) var(--sp-unit-xl);
}
.sp-tpl-dash-account-item { display: flex; flex-direction: column; gap: 2px; }
.sp-tpl-dash-account-label { font-size: 0.75rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-dash-account-value { font-weight: 600; color: var(--sp-tpl-ink-0); }
@media (max-width: 520px) { .sp-tpl-dash-account-grid { grid-template-columns: 1fr; } }

/* --- Sicurezza --- */
.sp-tpl-dash-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-unit);
}
@media (max-width: 768px) { .sp-tpl-dash-security-grid { grid-template-columns: 1fr; } }
.sp-tpl-dash-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-unit);
  padding: var(--sp-unit);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
}
.sp-tpl-dash-security-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-tpl-dash-security-name { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-dash-security-desc { font-size: 0.8rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-dash-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.sp-tpl-dash-status::before { content: "\25CF"; }
.sp-tpl-dash-status.is-on  { color: #3aa676; }
.sp-tpl-dash-status.is-off { color: var(--sp-tpl-ink-2); }
.sp-tpl-dash-status.is-off::before { content: "\25CB"; }

/* --- Completamento profilo --- */
.sp-tpl-dash-completion-pct { font-weight: 700; color: #0abab5; }
.sp-tpl-dash-progress {
  height: var(--sp-unit-s);
  border-radius: var(--sp-unit-s);
  background: var(--sp-tpl-bg-soft);
  overflow: hidden;
}
.sp-tpl-dash-progress-bar {
  height: 100%;
  border-radius: var(--sp-unit-s);
  background: #0abab5;
  transition: width .6s ease;
}
.sp-tpl-dash-completion.is-complete .sp-tpl-dash-progress-bar { background: #3aa676; }
.sp-tpl-dash-completion.is-complete .sp-tpl-dash-completion-pct { color: #3aa676; }
.sp-tpl-dash-completion-foot { margin-top: var(--sp-unit); }
.sp-tpl-dash-completion-msg { font-size: 0.88rem; color: var(--sp-tpl-ink-2); }

/* --- Scorciatoie --- */
.sp-tpl-dash-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--sp-unit-xl) * 2 + var(--sp-unit)), 1fr));
  gap: var(--sp-unit);
}
.sp-tpl-dash-shortcut {
  display: flex;
  flex-direction: column;
  gap: var(--sp-unit-s);
  padding: var(--sp-unit);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
  text-decoration: none;
  color: var(--sp-tpl-ink-0);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.sp-tpl-dash-shortcut:hover {
  border-color: #0abab5;
  transform: translateY(-2px);
  box-shadow: var(--sp-tpl-shadow-1);
}
.sp-tpl-dash-shortcut-icon { font-size: 1.2rem; color: #0abab5; }
.sp-tpl-dash-shortcut-label { font-weight: 600; font-size: 0.95rem; }
.sp-tpl-dash-shortcut-desc { font-size: 0.8rem; color: var(--sp-tpl-ink-2); line-height: 1.4; }

/* ============================================================================
   TAB SICUREZZA profilo (FASE 1: Ultimi accessi). Render in #sp-tpl-tabpane.
   ============================================================================ */
.sp-tpl-sec-block { margin-bottom: var(--sp-unit-l); }
.sp-tpl-sec-head { margin-bottom: var(--sp-unit); }
/* Tab Sicurezza: desktop = 2 colonne (Ultimi accessi a sx, 2FA/passkey a dx), mobile = stack. */
.sp-tpl-sec { display: flex; flex-wrap: wrap; gap: var(--sp-unit-xl); align-items: flex-start; }
.sp-tpl-sec-col { display: flex; flex-direction: column; min-width: 0; }
.sp-tpl-sec-col--side { flex: 0 0 38%; max-width: 38%; }
.sp-tpl-sec-col--main { flex: 1 1 auto; }
.sp-tpl-sec-col--full { flex: 1 1 100%; }
.sp-tpl-sec-col .sp-tpl-sec-block:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .sp-tpl-sec { display: block; }
  .sp-tpl-sec-col--side, .sp-tpl-sec-col--main { max-width: none; }
  /* in block-stack il gap del flex non vale più → spazio tra le colonne (es. passkey → 2FA) */
  .sp-tpl-sec-col { margin-bottom: var(--sp-unit-xl); }
  .sp-tpl-sec-col:last-child { margin-bottom: 0; }
}
.sp-tpl-sec-title { font-size: 1.05rem; font-weight: 600; color: var(--sp-tpl-ink-0); margin: 0 0 var(--sp-unit-s); }
.sp-tpl-sec-sub { font-size: 0.88rem; color: var(--sp-tpl-ink-2); line-height: 1.5; }
.sp-tpl-sec-sessions { display: flex; flex-direction: column; gap: var(--sp-unit-s); }
.sp-tpl-sec-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-unit);
  padding: var(--sp-unit);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
}
.sp-tpl-sec-session.is-current { border-left: 3px solid #0abab5; }
.sp-tpl-sec-session-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-tpl-sec-session-device { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-sec-session-meta { font-size: 0.8rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-badge {
  flex-shrink: 0;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px var(--sp-unit-s); border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-accent-soft); color: #0abab5;
}
.sp-tpl-sec-empty { font-size: 0.9rem; color: var(--sp-tpl-ink-2); }

/* WebAuthn / passkey (tab Sicurezza) — lista credenziali + azione "Aggiungi". */
.sp-tpl-sec-passkey-list { display: flex; flex-direction: column; gap: var(--sp-unit-s); }
.sp-tpl-sec-passkey {
  display: flex; align-items: center; gap: var(--sp-unit-s);
  padding: var(--sp-unit-s) var(--sp-unit);
  border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
}
.sp-tpl-sec-passkey-icon {
  flex-shrink: 0; width: var(--sp-unit-l); height: var(--sp-unit-l);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--sp-tpl-accent-soft); color: #0abab5;
}
.sp-tpl-sec-passkey-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-tpl-sec-passkey-name { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-sec-passkey-meta { font-size: 0.8rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-passkey-actions {
  display: flex; align-items: center; gap: var(--sp-unit); flex-wrap: wrap;
  margin-top: var(--sp-unit);
}
.sp-tpl-sec-passkey-msg { font-size: 0.85rem; color: var(--sp-tpl-ink-2); margin: 0; }
.sp-tpl-sec-passkey-msg.is-error { color: var(--sp-tpl-danger, #c0392b); }
.sp-tpl-sec-passkey-msg.is-ok { color: var(--sp-tpl-success, #2e7d32); }
/* Revoca passkey (row-action sic optionsGroup): a destra + icona ghost (grigio → rosso on hover).
   L'optionsGroup rende <div class="sp-flex..."><div class="sp-button sp-scale ...">icona <span vuoto></span></div></div>:
   sgancio il wrapper flex, neutralizzo la base .sp-button grigia, nascondo la label vuota. */
.sp-tpl-sec-passkey-action { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; }
.sp-tpl-sec-passkey-action .sp-flex, .sp-tpl-sec-passkey-action .disable-selection { display: contents; }
.sp-tpl-sec-passkey-action .sp-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-unit-l); height: var(--sp-unit-l); min-width: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--sp-tpl-ink-2); cursor: pointer; line-height: 1;
  transition: color .15s ease, background .15s ease;
}
.sp-tpl-sec-passkey-action .sp-button:hover,
.sp-tpl-sec-passkey-action .sp-button:focus-visible {
  color: var(--sp-tpl-danger, #c0392b);
  background: var(--sp-tpl-danger-soft, rgba(192,57,43,0.10));
}
.sp-tpl-sec-passkey-action .sp-launcher-title { display: none; }
/* Trusted devices (revoca) — coerente con le card passkey */
.sp-tpl-sec-trusted { margin-top: var(--sp-unit); }
.sp-tpl-sec-trusted-title { font-size: 0.9rem; font-weight: 600; color: var(--sp-tpl-ink-1); margin: 0 0 var(--sp-unit-s); }
.sp-tpl-sec-trusted-list { display: flex; flex-direction: column; gap: var(--sp-unit-s); list-style: none; margin: 0; padding: 0; }
.sp-tpl-sec-trusted-item {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-unit); flex-wrap: wrap;
	padding: var(--sp-unit-s) var(--sp-unit); border: 1px solid var(--sp-tpl-line, rgba(0,0,0,0.1));
	border-radius: var(--sp-unit-s); background: var(--sp-tpl-surface-1, transparent);
}
.sp-tpl-sec-trusted-item.is-current { border-color: var(--sp-tpl-accent, #4ec3c8); }
.sp-tpl-sec-trusted-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 12rem; }
.sp-tpl-sec-trusted-dev { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-sec-trusted-meta { font-size: 0.8rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-trusted-action { flex-shrink: 0; }
.sp-tpl-btn--sm { padding: var(--sp-unit-s) var(--sp-unit); font-size: 0.85rem; }
.sp-tpl-sec-trusted-hint { font-size: 0.8rem; color: var(--sp-tpl-ink-2); margin: var(--sp-unit-s) 0 0; }
/* finestra conferma revoca (dialog): padding attorno a messaggio + pulsantiera */
.sp-tpl-confirm-dialog { padding: var(--sp-unit-l); }
.sp-tpl-confirm-actions { display: flex; gap: var(--sp-unit-s); flex-wrap: wrap; margin-top: var(--sp-unit); }
.sp-tpl-confirm-actions .sp-flex, .sp-tpl-confirm-actions .disable-selection { display: contents; }
.sp-tpl-sec-confirm { color: var(--sp-tpl-ink-1); line-height: 1.5; margin: 0 0 var(--sp-unit); }
.sp-tpl-sec-confirm .fa-triangle-exclamation { color: var(--sp-tpl-accent, #4ec3c8); margin-right: var(--sp-unit-s); }
@media ( max-width: 640px ) {
	.sp-tpl-sec-trusted-item { flex-direction: column; align-items: stretch; justify-content: flex-start; }
	.sp-tpl-sec-trusted-info { flex: 0 0 auto; }
	.sp-tpl-sec-trusted-action, .sp-tpl-sec-trusted-action .sp-tpl-btn { width: 100%; }
}

/* TOTP / 2FA (tab Sicurezza) */
.sp-tpl-sec-totp { display: flex; flex-direction: column; gap: var(--sp-unit-s); }
.sp-tpl-sec-totp-status { display: flex; align-items: center; gap: var(--sp-unit); flex-wrap: wrap; }
.sp-tpl-sec-totp-recovery { font-size: 0.85rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-totp-trusted { display: flex; align-items: center; gap: var(--sp-unit-s); font-size: 0.85rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-totp-trusted i { color: #0abab5; }
.sp-tpl-sec-badge.is-on { background: var(--sp-tpl-accent-soft); color: #0abab5; }
.sp-tpl-sec-totp-enroll { display: flex; flex-direction: column; gap: var(--sp-unit-s); align-items: flex-start; padding: var(--sp-unit); border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-sm); background: var(--sp-tpl-bg-soft); }
.sp-tpl-sec-totp-qr img { width: 180px; height: 180px; image-rendering: pixelated; background: #fff; padding: var(--sp-unit-s); border-radius: var(--sp-tpl-r-sm); }
.sp-tpl-sec-totp-secret { font-family: monospace; font-size: 0.95rem; letter-spacing: 0.08em; background: #fff; padding: var(--sp-unit-s) var(--sp-unit); border-radius: var(--sp-tpl-r-sm); border: 1px solid var(--sp-tpl-line); user-select: all; }
.sp-tpl-sec-totp-hint { font-size: 0.85rem; color: var(--sp-tpl-ink-2); margin: 0; }
.sp-tpl-sec-totp-confirm { display: flex; gap: var(--sp-unit-s); align-items: center; }
.sp-tpl-sec-totp-code { font-family: monospace; font-size: 1.1rem; letter-spacing: 0.3em; width: calc(var(--sp-unit-xl) * 2); text-align: center; padding: var(--sp-unit-s); border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-sm); }
.sp-tpl-sec-totp-recovery-box { padding: var(--sp-unit); border: 1px dashed #0abab5; border-radius: var(--sp-tpl-r-sm); }
.sp-tpl-sec-totp-recovery-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-unit-s); font-family: monospace; font-size: 0.95rem; margin-top: var(--sp-unit-s); }
.sp-tpl-sec-totp-recovery-box .sp-tpl-sec-totp-confirm { margin-top: var(--sp-unit-l); }
/* Enrollment è un VERO des (campo `code` + desbar Conferma/Annulla via bind:des). Lo STILE dei
   bottoni arriva dalle classi REALI sp-tpl-btn/--primary/--outline messe sugli item del launcher
   (launchers_otm_SDLi.classes) → identici ad "Attiva 2FA", hover incluso. Qui SOLO layout + kill
   del ripple ::before/::after e del margin-left che .sp-button aggiunge (assenti su .sp-tpl-btn puro). */
.sp-tpl-sec-totp-enroll { width: 100%; }
.sp-tpl-sec-totp-enroll .des { padding: 0; width: 100%; }
.sp-tpl-sec-totp-enroll .sp-public-desbar { display: flex; flex-wrap: wrap; gap: var(--sp-unit-s); margin-top: var(--sp-unit); }
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button { margin-left: 0; }
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button::before,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button::after,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button:hover::before,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button:hover::after,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button:active::before,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button:active::after { display: none !important; }

/* ============================================================================
   NOTIFICHE (bacheca comunicazioni area riservata). Card full-width nel <main>.
   Riusa contents+articlesCategory 'notifiche' (reserved). Lista newest-first.
   ============================================================================ */
.sp-tpl-notify-list { display: flex; flex-direction: column; gap: var(--sp-unit-s); }
.sp-tpl-notify-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-unit);
  padding: var(--sp-unit);
  border: 1px solid var(--sp-tpl-line);
  border-left: 3px solid #0abab5;
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
}
.sp-tpl-notify-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-tpl-notify-title { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-notify-text { font-size: 0.85rem; color: var(--sp-tpl-ink-2); line-height: 1.5; margin: 0; }
.sp-tpl-notify-date { display: block; font-size: 0.78rem; font-style: italic; color: var(--sp-tpl-ink-2); margin-top: 2px; }
.sp-tpl-notify-empty {
  padding: var(--sp-unit-l);
  text-align: center;
}
.sp-tpl-notify-empty-text { font-size: 0.9rem; color: var(--sp-tpl-ink-2); margin: 0; }
/* Notifiche 2.0 — TIPO (bordo-sx + icona inline nel titolo + chip testo); non-letta = tint (niente colonna vuota) */
.sp-tpl-notify-item.is-unread { background: var(--sp-tpl-accent-soft); }
.sp-tpl-notify-main { flex: 1 1 auto; min-width: 0; }
.sp-tpl-notify-type-icon { margin-right: 0.35rem; }
.sp-tpl-notify-chip { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 1px 0.5rem; border-radius: 999px; border: 1px solid currentColor; line-height: 1.5; white-space: nowrap; }
.sp-tpl-notify-chip--pin { border-color: transparent; background: var(--sp-tpl-accent-soft); }
.sp-tpl-notify-chip--pin i { margin-right: 0.2rem; }
.sp-tpl-notify-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-unit); margin-top: var(--sp-unit); flex-wrap: wrap; }
.sp-tpl-notify-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-unit-s); min-width: 0; }
.sp-tpl-notify-foot-end { display: flex; align-items: center; gap: var(--sp-unit); flex-shrink: 0; margin-left: auto; }
.sp-tpl-notify-foot .sp-tpl-notify-action { margin-top: 0; }
.sp-tpl-notify-item--info      { border-left-color: var(--sp-tpl-info, #3b82f6); }
.sp-tpl-notify-item--avviso    { border-left-color: var(--sp-tpl-warning, #d97706); }
.sp-tpl-notify-item--successo  { border-left-color: var(--sp-tpl-success, #2e7d32); }
.sp-tpl-notify-item--sicurezza { border-left-color: #0abab5; }
.sp-tpl-notify-item--info      .sp-tpl-notify-type-icon, .sp-tpl-notify-item--info      .sp-tpl-notify-chip { color: var(--sp-tpl-info, #3b82f6); }
.sp-tpl-notify-item--avviso    .sp-tpl-notify-type-icon, .sp-tpl-notify-item--avviso    .sp-tpl-notify-chip { color: var(--sp-tpl-warning, #d97706); }
.sp-tpl-notify-item--successo  .sp-tpl-notify-type-icon, .sp-tpl-notify-item--successo  .sp-tpl-notify-chip { color: var(--sp-tpl-success, #2e7d32); }
.sp-tpl-notify-item--sicurezza .sp-tpl-notify-type-icon, .sp-tpl-notify-item--sicurezza .sp-tpl-notify-chip { color: #0abab5; }
/* Pallocco (badge numerico non-lette) — nav sidebar + widget scorciatoie. Alimentato da badgeMethod. */
.sp-tpl-sidebar-link-badge {
  flex-shrink: 0; margin-left: auto;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #0abab5; color: #fff;
  font-size: 0.7rem; font-weight: 700; line-height: 1;
}
/* wrapper apid-app del menu sidebar (per il refresh live del pallocco): trasparente al layout */
.sp-tpl-account-sidebar-inner { display: contents; }
.sp-tpl-dash-shortcut-icon { position: relative; display: inline-flex; }
.sp-tpl-dash-shortcut-badge {
  position: absolute; top: -0.45rem; right: -0.65rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #0abab5; color: #fff;
  font-size: 0.65rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--sp-tpl-bg-0, #fff);
}
/* Notifiche 2.0 — trigger "Leggi" (cardOptions) + dialog dettaglio */
.sp-tpl-notify-action { margin-top: var(--sp-unit-s); }
.sp-tpl-notify-action .sp-flex, .sp-tpl-notify-action .disable-selection { display: contents; }
.sp-tpl-notify-action button {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: #0abab5; font-size: 0.82rem; font-weight: 600; font-family: inherit;
}
.sp-tpl-notify-action button:hover { text-decoration: underline; }
.sp-tpl-notify-detail-body { color: var(--sp-tpl-ink-1); line-height: 1.6; }
.sp-tpl-notify-detail-body p { margin: 0 0 var(--sp-unit-s); }
.sp-tpl-notify-detail-body p:last-child { margin-bottom: 0; }
.sp-tpl-notify-detail-date { margin-top: var(--sp-unit); font-size: 0.8rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-notify-detail-actions { margin-top: var(--sp-unit-l); display: flex; justify-content: flex-end; gap: var(--sp-unit-s); flex-wrap: wrap; }
.sp-tpl-notify-detail-actions .sp-flex, .sp-tpl-notify-detail-actions .disable-selection { display: contents; }

/* ============================================================================
   BANNER TOAST (sphere.banner, jspheresite) — override del default core (lightblue,
   stretto, mal posizionato su mobile). Es. "Nome utente non valido" sul login.
   Desktop: in alto a destra sotto header fisso. Mobile: full-width, margini simmetrici.
   Specificità raddoppiata (.sp-banner.sp-banner--…) per battere il core a parità.
   ============================================================================ */
.sp-banner.sp-banner--primary,
.sp-banner.sp-banner--alert,
.sp-banner.sp-banner--success,
.sp-banner {
  position: fixed;
  top: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + var(--sp-unit));
  right: var(--sp-unit-l);
  left: auto;
  z-index: 1200;
  transform: none;   /* annulla il translateX(-50%) del core (causava x negativo / fuori posto) */
  width: auto;
  max-width: min(360px, calc(100vw - var(--sp-unit-l) * 2));
  margin: 0;
  padding: var(--sp-unit) var(--sp-unit-l);
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-left: 3px solid #0abab5;
  border-radius: var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-2);
  color: var(--sp-tpl-ink-0);
  font-size: 0.9rem;
  line-height: 1.4;
  transition: opacity .3s ease;
}
.sp-banner.sp-banner--alert { border-left-color: #c0392b; }
.sp-banner.sp-banner--success { border-left-color: #3aa676; }
@media (max-width: 768px) {
  .sp-banner.sp-banner--primary,
  .sp-banner.sp-banner--alert,
  .sp-banner.sp-banner--success,
  .sp-banner {
    left: var(--sp-unit);
    right: var(--sp-unit);
    max-width: none;
    text-align: center;
  }
}

/* =====================================================================
   GUIDA AREA RISERVATA — v2 (22/9/2026): icone protagoniste, poche scritte.
   Disegno approvato sul mockup `claudio/proposte/guida-aimo-mockup-v2.html`.
   Un solo elemento per due stati (`is-open`), classi proprie: il box non
   riusa piu' `sp-tpl-account-user`, che sotto i 900px e' anche il toggle del
   menu collassabile — era la ragione tecnica del "sembra una voce di menu".
   Struttura qui, colori nel cpath: i token `--sp-tpl-guide-*` hanno un
   valore di ripiego e i siti li ridefiniscono (aimo lo fa in aimo2.css).
   ===================================================================== */

.sp-tpl-guide {
  display: block;
  margin-top: var(--sp-unit, 15px);
  background: var(--sp-tpl-guide-bg, var(--sp-tpl-navy-0));
  color: var(--sp-tpl-guide-ink, #fff);
  border-radius: var(--sp-tpl-r-lg);
  overflow: hidden;
}

/* --- mini-guida (stato chiuso) --- */
.sp-tpl-guide-mini {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(var(--sp-unit-s, 5px) * 2);
  padding: calc(var(--sp-unit-s, 5px) * 2.4);
  cursor: pointer;
}

.sp-tpl-guide-eyebrow {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-tpl-guide-muted, rgba(255,255,255,0.72));
}
.sp-tpl-guide-eyebrow b { font-weight: 500; letter-spacing: 0.14em; }
.sp-tpl-guide-eyebrow i { font-style: normal; font-size: 0.62rem; }

/* v2: l'icona e' la prima cosa che si legge — piu' grande, senza cerchio */
.sp-tpl-guide-icon {
  display: grid;
  place-items: center;
  width: calc(var(--sp-unit, 15px) * 2.7);
  height: calc(var(--sp-unit, 15px) * 2.7);
  font-size: 1.6rem;
  color: var(--sp-tpl-guide-accent, #8fd1ff);
}

.sp-tpl-guide-text { display: flex; flex-direction: column; min-width: 0; }
.sp-tpl-guide-verb { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.sp-tpl-guide-hint {
  font-size: 0.78rem;
  color: var(--sp-tpl-guide-muted, rgba(255,255,255,0.72));
  margin-top: 2px;
}

/* i tre bottoni sono voci di launcher: qui si vestono soltanto */
.sp-tpl-guide-toggle,
.sp-tpl-guide-close {
  display: grid;
  place-items: center;
  width: calc(var(--sp-unit, 15px) * 2);
  height: calc(var(--sp-unit, 15px) * 2);
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: inherit;
  cursor: pointer;
  transition: transform .25s var(--sp-tpl-ease);
}
/* il titolo del launcher resta per gli screen reader: e' l'etichetta accessibile */
.sp-tpl-guide-toggle span,
.sp-tpl-guide-close span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.sp-tpl-guide.is-open .sp-tpl-guide-toggle { transform: rotate(180deg); }

/* --- pannello (stato aperto) --- */
.sp-tpl-guide-panel {
  position: fixed;
  left: var(--sp-unit, 15px);
  right: var(--sp-unit, 15px);
  bottom: var(--sp-unit, 15px);
  z-index: var(--sp-tpl-z-guide, 60);
  display: grid;
  gap: calc(var(--sp-unit-s, 5px) * 2);
  padding: var(--sp-unit, 15px);
  background: var(--sp-tpl-guide-bg, var(--sp-tpl-navy-0));
  color: var(--sp-tpl-guide-ink, #fff);
  border-radius: var(--sp-tpl-r-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  transform: translateY(calc(100% + var(--sp-unit-l, 30px)));
  transition: transform .35s var(--sp-tpl-ease);
}
.sp-tpl-guide.is-open .sp-tpl-guide-panel { transform: translateY(0); }

.sp-tpl-guide-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-tpl-guide-muted, rgba(255,255,255,0.72));
}

/* --- v2: i passi sono TESSERE, icona grande sopra e verbo sotto --- */
.sp-tpl-guide-steps {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sp-unit-s, 5px) * 1.6);
}
.sp-tpl-guide-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--sp-unit-s, 5px) * 1.2);
  width: calc(var(--sp-unit, 15px) * 6.4);
  padding: calc(var(--sp-unit-s, 5px) * 2.4) var(--sp-unit-s, 5px);
  border-radius: var(--sp-tpl-r-lg);
  border: 1px solid transparent;
  background: var(--sp-tpl-guide-tile, rgba(255,255,255,0.08));
  color: var(--sp-tpl-guide-muted, rgba(255,255,255,0.72));
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.25;
}
.sp-tpl-guide-step i { font-size: 1.35rem; }
/* colore per STATO: fatto, corrente, da fare. Non per famiglia di sezione:
   mentre compri serve sapere a che punto sei, non in che area sei. */
.sp-tpl-guide-step.is-done {
  color: var(--sp-tpl-guide-done, rgba(143,209,255,0.85));
  background: var(--sp-tpl-guide-tile, rgba(255,255,255,0.08));
}
.sp-tpl-guide-step.is-current {
  background: var(--sp-tpl-guide-tile-current, var(--sp-tpl-navy-1));
  color: var(--sp-tpl-guide-ink, #fff);
  border-color: rgba(255,255,255,0.25);
  font-weight: 600;
}
.sp-tpl-guide-step.is-todo { opacity: 0.6; }

/* --- v2: il testo lungo nasce chiuso, dietro la voce di launcher `details` --- */
/* la voce di launcher `details` sta in uno slot: il markup la stampa sempre, lo
   slot sparisce dove il contenuto non ha testo lungo (e dopo un cambio in AJAX).
   Senza slot il template dovrebbe manomettere l'HTML stampato dal launcher. */
.sp-tpl-guide-details-slot { justify-self: start; }
.sp-tpl-guide-details-slot[hidden],
.sp-tpl-guide-body[hidden] { display: none; }

.sp-tpl-guide-details {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--sp-unit-s, 5px) * 1.6);
  padding: calc(var(--sp-unit-s, 5px) * 1.2) calc(var(--sp-unit-s, 5px) * 2.8);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: none;
  color: var(--sp-tpl-guide-ink, #fff);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.sp-tpl-guide-details i { transition: transform .25s var(--sp-tpl-ease); }
.sp-tpl-guide.is-detailed .sp-tpl-guide-details i { transform: rotate(180deg); }

.sp-tpl-guide-body {
  display: none;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--sp-tpl-guide-muted, rgba(255,255,255,0.72));
  max-width: 68ch;
}
.sp-tpl-guide.is-detailed .sp-tpl-guide-body:not([hidden]) { display: block; }
.sp-tpl-guide-body p { margin: 0.4em 0; }
.sp-tpl-guide-body b { color: var(--sp-tpl-guide-ink, #fff); }
.sp-tpl-guide-body ul { margin: 0.4em 0 0; padding-left: 1.1em; }

/* lampeggio al cambio di sezione: la classe c'era dal 16/9 e non aveva una regola */
.sp-tpl-guide.is-updated { animation: sp-tpl-guide-pulse .6s var(--sp-tpl-ease); }
@keyframes sp-tpl-guide-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.28); }
  100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}

/* Con il pannello aperto l'ultima riga del contenuto finirebbe sotto di lui quando si e'
   in fondo alla pagina: il pannello e' fisso, la pagina non scorre oltre. Si libera lo spazio
   con un margine in coda alla colonna del contenuto, solo mentre e' aperto.
   Valore approssimato per eccesso: l'altezza vera del pannello dipende dal testo, e saperla
   in CSS non si puo'. Se un giorno servisse esatta, la scrive il JS in una variabile. */
.sp-tpl-account-layout:has(.sp-tpl-guide.is-open) .sp-tpl-account-main { padding-bottom: 240px; }

/* desktop: il pannello e' largo quanto il contenuto, non quanto la finestra */
@media (min-width: 901px) {
  .sp-tpl-guide-panel {
    left: auto;
    right: var(--sp-unit-l, 30px);
    width: max-content;
    max-width: min(680px, calc(100vw - var(--sp-unit-l, 30px) * 2));
  }
}
/* (6/10/2026, Davide, strada b: sull'Anagrafica a ~2000 px il pannello ridotto copriva il "Modifica" in fondo alla card) sul desktop il
   pannello sta in basso a SINISTRA, nella colonna della sidebar (che comincia al padding del contenitore), sia ridotto sia coi dettagli:
   i bottoni del contenuto, allineati a destra, restano liberi anche alla prima vista (il margine in coda serve solo se la pagina scorre).
   Coi dettagli il pannello comincia sotto la mini-guida della sidebar (che finisce a ~240px con la pagina in cima, piu' su quando la
   sidebar e' attaccata in alto): l'altezza massima lascia 260px sopra, il testo scorre dentro */
@media (min-width: 901px) {
  .sp-tpl-account-layout .sp-tpl-guide-panel { left: var(--sp-unit-l, 30px); right: auto; }
  .sp-tpl-account-layout .sp-tpl-guide.is-detailed .sp-tpl-guide-panel {
    max-height: calc(100vh - 260px - var(--sp-unit, 15px));
    max-height: calc(100dvh - 260px - var(--sp-unit, 15px));
  }
}

/* telefono: tessere che scorrono invece di andare a capo, e via l'hint */
@media (max-width: 640px) {
  .sp-tpl-guide-hint { display: none; }
  .sp-tpl-guide-steps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .sp-tpl-guide-step { flex: 0 0 auto; width: calc(var(--sp-unit, 15px) * 5.6); }
  .sp-tpl-guide-panel { max-height: 62vh; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-tpl-guide-panel,
  .sp-tpl-guide-toggle,
  .sp-tpl-guide-details i { transition: none; }
  .sp-tpl-guide.is-updated { animation: none; }
}

/* DIALOG 2.0 — la shell del bundle (finestra dialog, 25/9/2026). jspheresite-2.0 la costruisce quando la pagina non ha
   #sp-dialog (template 2.0 con LEGACY_DIALOG = false): barra = .sp-dialog-header.sp-dialog-handle, con icona, titolo e
   la X (<button>). Qui solo la struttura, a specificita' zero (:where): i CSS dei siti (spheremesh, aimo2) la
   ridefiniscono come vogliono. La barra legacy (#sp-dialog, la barra non ha .sp-dialog-handle) non e' toccata. */
:where(.sphere-dialog .sp-dialog-header.sp-dialog-handle) { display: flex; align-items: center; gap: 10px; }
:where(.sphere-dialog .sp-dialog-header.sp-dialog-handle) :where(.sphere-dialog-icon:empty) { display: none; }
:where(.sphere-dialog .sp-dialog-header.sp-dialog-handle) :where(.sphere-dialog-title) { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.sphere-dialog .sp-dialog-header.sp-dialog-handle) :where(.sp-dialog-actions) { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
:where(.sphere-dialog .sp-dialog-actions) :where(button[data-dialog]) { appearance: none; -webkit-appearance: none; border: 0; background: none; margin: 0; padding: 0; font: inherit; color: inherit; line-height: 1; min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; border-radius: 8px; cursor: pointer; }
:where(.sphere-dialog .sp-dialog-actions) :where(button[data-dialog]:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
/* sottotitolo del dialog (la descrizione della voce che lo apre): una riga piccola sotto il titolo */
:where(.sphere-dialog .sphere-dialog-title) :where(.sphere-dialog-subtitle) { display: block; font-size: .78em; font-weight: 400; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* T1 — le voci della topbar nel drawer mobile (finestra dialog, 25/9/2026). Il template 2.0 le stampa nel drawer da
   headerData->topMenu (le stesse della topbar); qui lo stile, coerente con .sp-tpl-drawer-link: stessa colonna, riga
   separata, icona del colore primario. Le etichette le mostriamo anche dove la topbar le nasconde (sotto i 720 px). */
.sp-tpl-drawer-utils { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 64px; padding-top: 12px; border-top: 1px solid var(--sp-tpl-line); }
.sp-tpl-drawer-util { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; border-radius: var(--sp-tpl-r-sm); font-size: .95rem; font-weight: 500; color: var(--sp-tpl-ink-1); text-decoration: none; transition: color 160ms ease; }
.sp-tpl-drawer-util i, .sp-tpl-drawer-util svg { width: 20px; text-align: center; flex: none; color: #0abab5; }
.sp-tpl-drawer-util .sp-tpl-topbar-label { display: inline; }
.sp-tpl-drawer-util:hover { color: #0abab5; }
.sp-tpl-drawer-util:focus-visible { outline: 2px solid #0abab5; outline-offset: 2px; }

/* T2 — le card dei contatti con una destinazione sono link (<a class="sp-tpl-info-card is-link">): stesso aspetto della
   card, niente sottolineatura, il focus da tastiera visibile. L'hover e' gia' quello di .sp-tpl-info-card. */
a.sp-tpl-info-card { color: inherit; text-decoration: none; cursor: pointer; }
a.sp-tpl-info-card:hover .sp-tpl-info-card-body h4 { color: #0abab5; }
a.sp-tpl-info-card:focus-visible { outline: 2px solid #0abab5; outline-offset: 3px; }

/* =====================================================================
   GHOST (6/10/2026, Davide via claude-78): l'icona grande in trasparenza a destra, tagliata dal bordo destro e dal fondo, dietro il
   testo. Decorativa: aria-hidden nel markup, pointer-events none qui. Al passaggio (hover, focus-visible, :active al tocco) l'icona si
   muove un poco (8-12 px verso l'alto a sinistra, -7 gradi) e prende opacita'; il contenitore si evidenzia. Solo transform e opacity
   sull'icona: niente layout, quindi 60 fps. Con prefers-reduced-motion l'icona sta ferma: resta solo l'evidenza.
   Token comuni guida + tessere, tutti col ripiego (i siti li ridefiniscono nel cpath se vogliono):
     --sp-tpl-ghost-color       colore dell'icona (ripiego: l'accento della guida / il colore primario per le tessere)
     --sp-tpl-ghost-opacity     a riposo (ripiego .14)
     --sp-tpl-ghost-opacity-on  al passaggio (ripiego .26)
   ===================================================================== */

/* --- la mini-guida: il testo a tutta larghezza, il ghost dietro, la freccina sopra --- */
.sp-tpl-guide-mini { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) auto; transition: box-shadow .25s ease-out; }   /* l'anello sfuma, dentro e fuori */
.sp-tpl-guide-mini > .sp-tpl-guide-icon { display: none; }   /* l'icona della sezione: nella mini c'e' il ghost (il bundle ci scrive lo stesso) */
.sp-tpl-guide-mini > :not(.sp-tpl-guide-ghost) { position: relative; z-index: 1; }
.sp-tpl-guide-ghost {
  position: absolute; right: -0.16em; bottom: -0.2em; z-index: 0;
  font-size: calc(var(--sp-unit, 15px) * 5.4); line-height: 1;
  color: var(--sp-tpl-ghost-color, var(--sp-tpl-guide-accent, #8fd1ff));
  opacity: var(--sp-tpl-ghost-opacity, .14);
  pointer-events: none; transform-origin: 70% 75%;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), opacity .28s ease-out;
}
/* il box non si solleva: dentro c'e' il pannello position: fixed, che con una transform sul box perderebbe la finestra come riferimento.
   L'evidenza e' l'anello nel colore d'accento, dentro il bordo arrotondato (il box ha overflow hidden) */
.sp-tpl-guide-mini:is(:hover, :active, :has(:focus-visible)) { box-shadow: inset 0 0 0 1px var(--sp-tpl-guide-accent, #8fd1ff); }
.sp-tpl-guide-mini:is(:hover, :active, :has(:focus-visible)) .sp-tpl-guide-ghost { transform: translate(-10px, -10px) rotate(-7deg); opacity: var(--sp-tpl-ghost-opacity-on, .26); }

/* --- le tessere delle scorciatoie, variante A, SOLO dove c'e' la guida (oggi: aimo; snap e spheremesh.com hanno le scorciatoie ma non
   la guida, quindi restano identici). Variante A: l'icona della voce diventa il ghost (la piccola non c'e' piu'), il testo sale in alto.
   Lo span dell'icona diventa trasparente al layout (display: contents): l'icona e il pallino dei non letti si posizionano sulla tessera */
.sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut { position: relative; overflow: hidden; isolation: isolate; transition: border-color .25s ease-out, box-shadow .25s ease-out, transform .25s ease-out; }   /* sullo stato a riposo: anche l'uscita e' morbida */
.sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut-icon { display: contents; }
.sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut-icon > :not(.sp-tpl-dash-shortcut-badge) {
  position: absolute; right: -0.14em; bottom: -0.2em; z-index: 0;
  font-size: calc(var(--sp-unit, 15px) * 5.2); line-height: 1;
  color: var(--sp-tpl-ghost-color, #0abab5);
  opacity: var(--sp-tpl-ghost-opacity, .14);
  pointer-events: none; transform-origin: 70% 75%;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), opacity .28s ease-out;
}
.sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut-badge { top: calc(var(--sp-unit-s, 5px) * 2); right: calc(var(--sp-unit-s, 5px) * 2); z-index: 2; }
.sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut-label, .sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut-desc { position: relative; z-index: 1; }
.sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut-desc { padding-right: 25%; }   /* il sottotitolo non tocca la figura; il titolo resta su una riga */
.sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut:is(:hover, :focus-visible, :active) { border-color: #0abab5; transform: translateY(-2px); box-shadow: 0 0 0 1px #0abab5, var(--sp-tpl-shadow-1); }
.sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut:is(:hover, :focus-visible, :active) .sp-tpl-dash-shortcut-icon > :not(.sp-tpl-dash-shortcut-badge) { transform: translate(-10px, -10px) rotate(-7deg); opacity: var(--sp-tpl-ghost-opacity-on, .26); }
@media (prefers-reduced-motion: reduce) {
  .sp-tpl-guide-ghost, .sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut-icon > :not(.sp-tpl-dash-shortcut-badge) { transition: opacity .12s ease-out; }   /* niente movimento: l'opacita' sfuma, piu' breve */
  .sp-tpl-guide-mini { transition: box-shadow .12s ease-out; }
  .sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut { transition: border-color .12s ease-out, box-shadow .12s ease-out; }
  .sp-tpl-guide-mini:is(:hover, :active, :has(:focus-visible)) .sp-tpl-guide-ghost,
  .sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut:is(:hover, :focus-visible, :active) .sp-tpl-dash-shortcut-icon > :not(.sp-tpl-dash-shortcut-badge) { transform: none; }
  .sp-tpl-account-layout:has(.sp-tpl-guide) .sp-tpl-dash-shortcut:is(:hover, :focus-visible, :active) { transform: none; }
}

/* =====================================================================
   I PASSI DELLA GUIDA, CON LE ICONE (6/10/2026, testi Howden; Davide: guide colorate, icone protagoniste, poche scritte).
   Markup del contenuto: <ol> o <ul> con la classe sp-tpl-guide-howto, ogni <li> comincia con <i class="fa-… fa-…" aria-hidden>.
   (sp-tpl-guide-steps NON si usa: e' gia' la striscia delle tessere del pannello.) Senza la classe le liste del corpo restano quelle di
   prima: solo le <ol> qualunque prendono un rientro uguale a quello delle <ul>.
   - l'icona dentro un tondo di 38 px col colore d'accento della guida (token, col ripiego); il numero del passo, piccolo, sul tondo, solo
     nelle <ol>;
   - il testo rientra e allinea tutte le sue righe (padding a sinistra + icona assoluta: nei <li> testo e <b> sono misti, una griglia ne
     farebbe celle separate); il tondo sta dentro il passo e la prima riga scende al suo centro (padding-top da 1lh; dove lh non c'e',
     la riga resta in alto);
   - un passo senza icona: al posto del tondo c'e' il numero (ol) o un puntino (ul);
   - capitoli: la lista dentro un <li> rientra sotto il titolo del capitolo.
   Vale per FA7 (dev) e FA6 (prod): le misure si danno al tag <i>, il glifo e' il ::before del kit, centrato.
   ===================================================================== */
.sp-tpl-guide-body ol { margin: 0.4em 0 0; padding-left: 1.3em; }
.sp-tpl-guide-body .sp-tpl-guide-howto {
  list-style: none; margin: 0.9em 0 0.5em; padding: 0;
  display: grid; gap: calc(var(--sp-unit-s, 5px) * 2.4);
  counter-reset: sp-tpl-howto;
}
.sp-tpl-guide-howto > li {
  position: relative; min-height: 38px; padding-left: 52px;
  padding-top: 0; padding-top: max(0px, calc((38px - 1lh) / 2));   /* la prima riga scende al centro del tondo: il tondo resta dentro il passo */
  counter-increment: sp-tpl-howto;
  color: var(--sp-tpl-guide-muted, rgba(255,255,255,0.72));
}
.sp-tpl-guide-howto > li > i:first-child {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; line-height: 1; border-radius: 50%;
  font-size: 1rem;
  color: var(--sp-tpl-guide-accent, #8fd1ff);
  background: var(--sp-tpl-guide-tile, rgba(255,255,255,0.08));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-tpl-guide-accent, #8fd1ff) 38%, transparent);
}
/* il numero del passo (solo <ol>): una pastiglia piccola sul tondo, in alto a sinistra */
ol.sp-tpl-guide-howto > li::before {
  content: counter(sp-tpl-howto);
  position: absolute; z-index: 1; left: -5px; top: -5px;
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--sp-tpl-guide-bg, var(--sp-tpl-navy-0));
  background: var(--sp-tpl-guide-accent, #8fd1ff);
}
/* un passo senza icona: il numero al posto del tondo (ol), un puntino d'accento (ul) */
ol.sp-tpl-guide-howto > li:not(:has(> i:first-child))::before {
  left: 0; top: 0; width: 38px; height: 38px; min-width: 0; border-radius: 50%;
  font-size: 0.85rem; color: var(--sp-tpl-guide-accent, #8fd1ff); background: var(--sp-tpl-guide-tile, rgba(255,255,255,0.08));
}
ul.sp-tpl-guide-howto > li:not(:has(> i:first-child))::before {
  content: ""; position: absolute; left: 16px; top: 16px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sp-tpl-guide-accent, #8fd1ff);
}
/* capitoli: la lista e le note dentro un passo rientrano sotto il suo testo */
.sp-tpl-guide-howto > li > :is(ul, ol, p) { margin-top: 0.5em; }
.sp-tpl-guide-howto > li > :is(ul, ol):not(.sp-tpl-guide-howto) { padding-left: 1.1em; }
/* l'icona in testa a un paragrafo (es. "Importante:" coi codici di recupero): piccola, d'accento, sulla riga */
.sp-tpl-guide-body p > i:first-child { color: var(--sp-tpl-guide-accent, #8fd1ff); margin-right: 0.35em; }
/* i titoli di sezione nel corpo (6/10/2026, Davide: "separate in modo marcato"): <p class="sp-tpl-guide-sezione">, filo sottile sopra
   (non sulla prima), piu' spazio prima, un po' piu' grande, in bold, nel colore d'accento. Icona facoltativa: un <i> in testa, nel testo */
.sp-tpl-guide-body .sp-tpl-guide-sezione { margin: 1.5em 0 0.55em; padding-top: 1.1em;
  border-top: 1px solid color-mix(in srgb, var(--sp-tpl-guide-accent, #8fd1ff) 28%, transparent);
  font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--sp-tpl-guide-accent, #8fd1ff); }
.sp-tpl-guide-body .sp-tpl-guide-sezione:first-child { margin-top: 0.2em; padding-top: 0; border-top: 0; }
.sp-tpl-guide-body .sp-tpl-guide-sezione b { color: inherit; }
.sp-tpl-guide-body .sp-tpl-guide-sezione > i:first-child { margin-right: 0.45em; font-size: 1.05em; }

/* i testi lunghi (Profilo 3.493 caratteri, Proteggi 2.634): anche sul desktop il pannello ha un'altezza massima e scorre dentro.
   Sul telefono c'era gia' (62vh, sotto i 640) */
@media (min-width: 641px) {
  .sp-tpl-guide-panel { max-height: calc(100vh - var(--sp-unit, 15px) * 2 - 80px); max-height: calc(100dvh - var(--sp-unit, 15px) * 2 - 80px); overflow-y: auto; overscroll-behavior: contain; }
}
.sp-tpl-guide-panel { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; }

/* =====================================================================
   SALVA / ANNULLA DEI FORM A FLIP (6/10/2026, Davide: "come il Modifica"). Il retro di una scheda a flip (es. Profilo > Anagrafica >
   Modifica) ha la pulsantiera del des: div.sp-button del desBar (sitessphere getDesBarStructure), Salva [data-bind] e Annulla
   [data-control="close"][data-sp-flip-to]. Il fronte ha il Modifica, <button class="sp-tpl-btn sp-tpl-btn--primary">. Due famiglie di
   classi: qui la pulsantiera del retro prende la STESSA geometria di .sp-tpl-btn e i colori di --primary (Salva) e di un secondario
   coerente (Annulla). Specificita' 0,3,0: batte le regole generiche dell'area riservata (es. .sp-tpl-account-main .sp-button 0,2,0 di
   un cPath) senza !important. Vale per tutti i form 2.0 a flip; fuori dal retro di una flip card niente cambia.
   I colori passano da token col ripiego uguale a .sp-tpl-btn--primary del base, cosi' un cPath che veste il suo Modifica con altri
   valori li riporta qui con una riga (aimo lo fa in aimo2.css):
     --sp-tpl-btn-primary-bg / --sp-tpl-btn-primary-ink / --sp-tpl-btn-primary-bg-hover / --sp-tpl-btn-secondary-ink
   ===================================================================== */
.sp-tpl-flip-back .disable-selection { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: calc(var(--sp-unit-s, 5px) * 2); }
.sp-tpl-flip-back .disable-selection .sp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0; min-height: 44px; padding: 13px 26px; box-sizing: border-box;
  border-radius: var(--sp-tpl-r-sm); border: 1px solid transparent;
  font-family: inherit; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;   /* la line-height si eredita, come il <button> del Modifica */
  cursor: pointer;
  transition: background-color .25s ease-out, color .25s ease-out, border-color .25s ease-out, box-shadow .25s ease-out, transform .25s ease-out;
}
.sp-tpl-flip-back .disable-selection .sp-button::before,
.sp-tpl-flip-back .disable-selection .sp-button::after { content: none; }
.sp-tpl-flip-back .disable-selection .sp-button[data-bind] {
  background: var(--sp-tpl-btn-primary-bg, #0abab5); color: var(--sp-tpl-btn-primary-ink, var(--sp-tpl-navy-0));
}
.sp-tpl-flip-back .disable-selection .sp-button[data-bind]:hover {
  background: var(--sp-tpl-btn-primary-bg-hover, #3ff0e8); color: var(--sp-tpl-btn-primary-ink, var(--sp-tpl-navy-0)); transform: translateY(-1px);
}
/* Annulla, secondario: fondo bianco, testo e bordo nel primario. Il testo usa il primario SCURITO verso il navy (62%: con snap 5,1:1 su bianco): con un primario
   chiaro (es. snap #50acbc) il primario puro su bianco non si leggeva (2,7:1). Un cPath che vuole il colore esatto usa il token
   --sp-tpl-btn-secondary-ink (aimo: #0068a6, gia' leggibile) */
.sp-tpl-flip-back .disable-selection .sp-button[data-control] {
  background: #ffffff; color: var(--sp-tpl-btn-secondary-ink, color-mix(in srgb, #0abab5 62%, #0e1d2b));
  border-color: color-mix(in srgb, var(--sp-tpl-btn-secondary-ink, color-mix(in srgb, #0abab5 62%, #0e1d2b)) 45%, transparent);
}
.sp-tpl-flip-back .disable-selection .sp-button[data-control]:hover {
  background: color-mix(in srgb, var(--sp-tpl-btn-primary-bg, #0abab5) 8%, #ffffff);
  border-color: var(--sp-tpl-btn-secondary-ink, color-mix(in srgb, #0abab5 62%, #0e1d2b));
  color: var(--sp-tpl-btn-secondary-ink, color-mix(in srgb, #0abab5 62%, #0e1d2b)); transform: translateY(-1px);
}
.sp-tpl-flip-back .disable-selection .sp-button:focus-visible { outline: 2px solid var(--sp-tpl-btn-primary-bg, #0abab5); outline-offset: 3px; }
.sp-tpl-flip-back .disable-selection .sp-button i { font-size: 1em; }
/* telefono: a tutta larghezza e impilati, nell'ordine del DB (Salva per primo); e il Modifica del FRONTE della stessa scheda a tutta
   larghezza anche lui (Davide 6/10), cosi' girando la scheda i bottoni non cambiano misura */
@media (max-width: 559px) {
  .sp-tpl-flip-back .disable-selection { flex-direction: column; align-items: stretch; }
  .sp-tpl-flip-back .disable-selection .sp-button { width: 100%; }
  .sp-tpl-flip-front .sp-tpl-flip-actions .sp-tpl-btn { width: 100%; justify-content: center; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-tpl-flip-back .disable-selection .sp-button { transition: background-color .12s ease-out, color .12s ease-out, border-color .12s ease-out; }
  .sp-tpl-flip-back .disable-selection .sp-button:hover { transform: none; }
}

/* =====================================================================
   MODALE CON UN FORM (294, 6/10/2026, Davide: il nudge del cellulare su aimo apre sphere.modal col form della SDL e "manca il CSS").
   sphere.modal (jspheresite-2.0) costruisce .sp-modal > .sp-modal-close + .sp-modal-content + .sp-modal-title (testo di json.title).
   sp-site-layout-2.0 da' il box solo a .sp-modal-content > .sp-des-page / .sp-main-content-content (i siti 1.x e il modale dei cookie
   di snap e developers); su basic2 il form arriva come .sp-modal-content > .sp-padding > .des (sitessphere mod/add), quindi senza box.
   Qui SOLO quel caso (il selettore richiede .sp-padding > .des figlio diretto del contenuto): il modale delle immagini (> img) e quello
   dei cookie (> .sp-des-page) non cambiano. Lo stesso aspetto del dialog 2.0 della scorciatoia: box bianco centrato (~820px), raggio
   e ombra del dialog, barra di testa nel colore del footer col titolo, X bianca nella barra, corpo con padding. Il box comincia a
   --sp-modale-top dall'alto (non centrato in verticale): cosi' barra e X, che sono fratelli del contenuto, gli stanno sopra */
.sp-modal:has(> .sp-modal-content > .sp-padding > .des) {
  --sp-modale-top: max(8vh, 40px);
  --sp-modale-w: min(820px, calc(100% - var(--sp-unit, 15px) * 2));
  --sp-modale-testa: 54px;
  background: rgba(14, 29, 43, 0.45);
}
.sp-modal-content:has(> .sp-padding > .des) {
  justify-content: flex-start; align-items: center; flex-wrap: nowrap; box-sizing: border-box;
  padding: var(--sp-modale-top) var(--sp-unit, 15px) var(--sp-unit-l, 30px);
}
.sp-modal-content > .sp-padding:has(> .des) {
  flex: none; width: 100%; max-width: 820px; box-sizing: border-box;   /* 100% del contenuto (gia' col suo padding): la stessa larghezza di --sp-modale-w, che e' sul guscio */
  background: #ffffff; color: var(--sp-tpl-ink-0);
  border-radius: 7px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.12);
  padding: calc(var(--sp-modale-testa) + var(--sp-unit, 15px)) calc(var(--sp-unit, 15px) * 2) calc(var(--sp-unit, 15px) * 2);
}
/* la barra di testa: il titolo, posato sopra il box (stessa larghezza, angoli in alto); senza titolo resta solo lo spazio della X */
.sp-modal:has(> .sp-modal-content > .sp-padding > .des) > .sp-modal-title {
  position: absolute; top: var(--sp-modale-top); left: 50%; transform: translateX(-50%); z-index: 1;
  width: var(--sp-modale-w); height: var(--sp-modale-testa); box-sizing: border-box;
  display: flex; align-items: center; padding: 0 56px 0 calc(var(--sp-unit, 15px) * 2);
  background: #04070c; color: #ffffff; font-weight: 600; border-radius: 7px 7px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.sp-modal:has(> .sp-modal-content > .sp-padding > .des) > .sp-modal-title:empty { background: transparent; }
/* la X nella barra, a destra, bianca come nel dialog; senza titolo, nell'angolo del box col colore del testo */
.sp-modal:has(> .sp-modal-content > .sp-padding > .des) > .sp-modal-close {
  top: calc(var(--sp-modale-top) + (var(--sp-modale-testa) - 34px) / 2); right: calc((100% - var(--sp-modale-w)) / 2 + 10px); z-index: 2;
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  color: #ffffff; transition: background .15s;
}
.sp-modal:has(> .sp-modal-content > .sp-padding > .des) > .sp-modal-close:hover { background: rgba(255, 255, 255, 0.18); }
.sp-modal:has(> .sp-modal-content > .sp-padding > .des):has(> .sp-modal-title:empty) > .sp-modal-close { color: var(--sp-tpl-ink-1); }
.sp-modal:has(> .sp-modal-content > .sp-padding > .des):has(> .sp-modal-title:empty) > .sp-modal-close:hover { background: var(--sp-tpl-line); }
/* (298, Davide 6/10: "come modale mi aspetto almeno un blur fuori dalla finestrella") la pagina sotto il modale col form si sfoca;
   il velo un po' piu' scuro per il contrasto. Solo il caso form (lo stesso selettore della 294): il modale delle foto non cambia */
.sp-modal:has(> .sp-modal-content > .sp-padding > .des) {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(14, 29, 43, 0.5);
}
/* (300, Davide 6/10 dal telefono, Profilo di aimo) sotto i 600px i tab della tabbed section 2.0 andavano a capo ("Documenti" da solo
   sulla seconda riga, larghezze disuguali, il tab attivo poco chiaro). Ora stanno su UNA riga e il tab attivo ha un indicatore nel
   colore primario. Desktop invariato */
/* fino a 4 tab: colonne uguali, icona sopra ed etichetta sotto (un po' piu' piccola, tagliata coi puntini se non ci sta); da 5 tab in su
   la striscia scorrevole (scroll-snap). Il tab attivo: fondo bianco che si salda al pannello, come oggi, piu' il filo primario in alto */
@media (max-width: 600px) {
  .sp-tpl-tabs:not(:has(> .sp-tpl-tab:nth-child(5))) { flex-wrap: nowrap; }
  .sp-tpl-tabs:not(:has(> .sp-tpl-tab:nth-child(5))) > .sp-tpl-tab {
    flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 4px;
    padding: calc(var(--sp-unit-s, 5px) * 2) var(--sp-unit-s, 5px); font-size: 0.78rem; text-align: center;
  }
  .sp-tpl-tabs:not(:has(> .sp-tpl-tab:nth-child(5))) > .sp-tpl-tab .sp-tpl-tab-icon { font-size: 1.15rem; }
  .sp-tpl-tabs:not(:has(> .sp-tpl-tab:nth-child(5))) > .sp-tpl-tab .sp-tpl-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sp-tpl-tabs:has(> .sp-tpl-tab:nth-child(5)) { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sp-tpl-tabs:has(> .sp-tpl-tab:nth-child(5))::-webkit-scrollbar { display: none; }
  .sp-tpl-tabs:has(> .sp-tpl-tab:nth-child(5)) > .sp-tpl-tab { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .sp-tpl-tab { position: relative; }
  .sp-tpl-tab.active::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: var(--sp-tpl-r-md) var(--sp-tpl-r-md) 0 0; background: #0abab5; }
}
/* (303, Davide 6/10 dal telefono sul tab Documenti di aimo: "toglierei un po' di padding in giro") sotto i 600px meno padding nella zona
   contenuto dell'area riservata e niente box dentro il box. Misurato a 390: la tabella cominciava a 77px dal bordo (contenitore 15 +
   pannello del tab 31 + il box .sphere-app dentro il pannello 31) e aveva 236px per 503px di tabella. Desktop invariato */
@media (max-width: 600px) {
  /* il pannello dei tab: 15px invece di 30 */
  .sp-tpl-tabpane { padding: var(--sp-unit, 15px); }
  /* il box dell'app (la tabella) DENTRO il pannello: il pannello e' gia' il box. Specificita' sopra .sp-tpl-account-main .sphere-app
     dei fogli dei siti (aimo2), che vengono dopo */
  .sp-tpl-account-main .sp-tpl-tabpane .sphere-app { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; margin-bottom: 0; }
  /* le card della dashboard: 15px. La regola mobile di r.~1039 c'era gia', ma sta PRIMA della regola base (padding 30): non vinceva mai */
  .sp-tpl-dash-card { padding: var(--sp-unit, 15px); }
  /* le tabelle scorrono nel loro contenitore (gia' overflow-x: auto) senza barra larga, col dito; l'indizio che c'e' altro: il bordo
     destro sfuma (maschera, vale su qualsiasi fondo, anche lo skin scuro di spheremesh). Le card col layout a schede non si possono
     fare senza il core: le celle non portano il nome della colonna */
  .sp-tpl-account-main .sp-table-container {
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}
/* =====================================================================
   CAPITOLI A TESSERE DELLA GUIDA (dev0 6/10/2026; mockup v2 approvato da Davide, variante "divisore-coda": riga pulita, tessere della
   stessa altezza, illustrazioni grandi; freccia SOLO fra passi in sequenza, divisore sottile fra alternative; il passo "dopo" un altro
   come coda attaccata a destra). Markup di basic2::guideCapitoli e di sphere.guide; solo con .sp-tpl-guide-steps.is-capitoli (le guide
   senza capitoli restano come oggi). Colori dai token della guida (aimo li ridefinisce in aimo2.css)
   ===================================================================== */
.sp-tpl-guide-steps.is-capitoli { --sp-tpl-cap-h: 176px; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; overflow: visible; padding-bottom: 0; }   /* stretch: le tessere tutte alte quanto la piu' alta (un titolo su tre righe non sborda) */
.sp-tpl-guide-cap {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; font: inherit; cursor: pointer; box-sizing: border-box;
  display: grid; grid-template-rows: 84px auto auto; justify-items: center; align-content: start; gap: 6px;
  width: 156px; min-height: var(--sp-tpl-cap-h); padding: 14px 10px; border-radius: 12px; text-align: center; flex: none;
  background: var(--sp-tpl-guide-tile, rgba(255,255,255,0.08)); color: var(--sp-tpl-guide-muted, rgba(255,255,255,0.72));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: background-color .25s ease-out, box-shadow .25s ease-out, transform .25s ease-out, color .25s ease-out;
}
.sp-tpl-guide-cap:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--sp-tpl-guide-accent, #8fd1ff); }
.sp-tpl-guide-cap:focus-visible { outline: 2px solid var(--sp-tpl-guide-accent, #8fd1ff); outline-offset: 3px; }
.sp-tpl-guide-cap.is-current { background: var(--sp-tpl-guide-tile-current, #1d3a5c); color: var(--sp-tpl-guide-ink, #fff); box-shadow: inset 0 0 0 2px var(--sp-tpl-guide-accent, #8fd1ff); }
.sp-tpl-guide-cap-tit { font-weight: 700; font-size: .84rem; line-height: 1.2; color: var(--sp-tpl-guide-ink, #fff); }
.sp-tpl-guide-cap-sub { font-size: .72rem; line-height: 1.3; }
/* l'illustrazione (serie del core, guideIll): tratto in currentColor, accento dal token; senza illustrazione l'icona del passo, grande */
.sp-tpl-guide-ill { display: grid; place-items: center; width: 84px; height: 84px; }
.sp-tpl-guide-ill svg { width: 84px; height: 84px; display: block; }
.sp-tpl-guide-ill i { font-size: 2.6rem; color: var(--sp-tpl-guide-accent, #8fd1ff); }
.sp-tpl-guide-ill .t { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.sp-tpl-guide-ill .a { fill: none; stroke: var(--sp-tpl-guide-accent, #8fd1ff); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sp-tpl-guide-ill .p { fill: var(--sp-tpl-guide-accent, #8fd1ff); }
.sp-tpl-guide-ill .s { opacity: .45; }
/* separatori: la freccia fra passi in sequenza; il divisore sottile, con piu' spazio, fra alternative */
.sp-tpl-guide-sep { align-self: center; flex: none; }
.sp-tpl-guide-sep--seq svg { width: 26px; height: 26px; display: block; fill: none; stroke: var(--sp-tpl-guide-accent, #8fd1ff); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-tpl-guide-sep--alt { align-self: center; flex: none; width: 1px; height: calc(var(--sp-tpl-cap-h) * .7); margin: 0 18px;
  background: linear-gradient(transparent, rgba(255,255,255,0.35) 20%, rgba(255,255,255,0.35) 80%, transparent); }
/* il passo "dopo" il precedente: coda stretta della stessa altezza, attaccata a destra */
.sp-tpl-guide-coppia { display: flex; flex: none; align-items: stretch; }
.sp-tpl-guide-cap--con-coda { border-radius: 12px 0 0 12px; }
.sp-tpl-guide-cap.sp-tpl-guide-cap--coda { width: 74px; grid-template-rows: auto auto; align-content: center; padding: 10px 6px; border-radius: 0 12px 12px 0;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.08); }
.sp-tpl-guide-cap--coda .sp-tpl-guide-ill, .sp-tpl-guide-cap--coda .sp-tpl-guide-ill svg { width: 40px; height: 40px; }
.sp-tpl-guide-cap--coda .sp-tpl-guide-cap-tit { font-size: .68rem; }
.sp-tpl-guide-cap--coda .sp-tpl-guide-cap-sub { display: none; }
.sp-tpl-guide-cap--coda.is-current { box-shadow: inset 0 0 0 2px var(--sp-tpl-guide-accent, #8fd1ff); }
/* il pannello coi capitoli si allarga quanto la riga (fino a 980px; sul desktop sta a sinistra, 293) */
@media (min-width: 901px) {
  .sp-tpl-guide-panel:has(> .sp-tpl-guide-steps.is-capitoli) { max-width: min(980px, calc(100vw - var(--sp-unit-l, 30px) * 2)); }
}
/* telefono: in colonna, tessere orizzontali (illustrazione a sinistra), frecce verso il basso, divisore orizzontale */
@media (max-width: 640px) {
  .sp-tpl-guide-steps.is-capitoli { --sp-tpl-cap-h: auto; flex-direction: column; align-items: stretch; gap: 8px; overflow: visible; }
  .sp-tpl-guide-steps.is-capitoli .sp-tpl-guide-cap { width: 100%; min-height: 72px; grid-template-rows: none; grid-template-columns: 52px 1fr; justify-items: start;
    align-items: center; align-content: center; text-align: left; padding: 10px 12px; gap: 2px 12px; }
  .sp-tpl-guide-steps.is-capitoli .sp-tpl-guide-ill { grid-row: 1 / 3; width: 52px; height: 52px; }
  .sp-tpl-guide-steps.is-capitoli .sp-tpl-guide-ill svg { width: 52px; height: 52px; }
  .sp-tpl-guide-steps.is-capitoli > .sp-tpl-guide-sep--seq { transform: rotate(90deg); align-self: center; }
  .sp-tpl-guide-steps.is-capitoli > .sp-tpl-guide-sep--alt { width: 70%; height: 1px; margin: 8px auto;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35) 20%, rgba(255,255,255,0.35) 80%, transparent); }
  .sp-tpl-guide-steps.is-capitoli .sp-tpl-guide-coppia .sp-tpl-guide-cap--con-coda { flex: 1; }
  .sp-tpl-guide-steps.is-capitoli .sp-tpl-guide-cap.sp-tpl-guide-cap--coda { width: 70px; grid-template-columns: none; justify-items: center; text-align: center; }
  .sp-tpl-guide-steps.is-capitoli .sp-tpl-guide-cap--coda .sp-tpl-guide-ill { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .sp-tpl-guide-cap { transition: none; } .sp-tpl-guide-cap:hover { transform: none; } }
/* =====================================================================
   308 (7/10/2026, Davide sulla Sicurezza di aimo coi capitoli aperti: "potresti rispostare a destra la guidona?") tre ritocchi della guida
   ===================================================================== */
/* (1) sul desktop la guida ESTESA (coi dettagli) e quella coi CAPITOLI (la striscia delle tessere, larga fino a 980px) stanno a DESTRA,
   come prima della 293; resta a sinistra, nella colonna della sidebar, solo il pannello piccolo senza capitoli e senza dettagli: e' quello
   che copriva il "Modifica" in fondo alla card dell'Anagrafica alla prima vista (293). Restano l'altezza massima della 293 (il pannello
   esteso comincia 260px sotto il bordo alto, il testo scorre dentro) e la larghezza della 306 */
@media (min-width: 901px) {
  .sp-tpl-account-layout .sp-tpl-guide:is(.is-detailed, :has(.sp-tpl-guide-steps.is-capitoli)) .sp-tpl-guide-panel { left: auto; right: var(--sp-unit-l, 30px); }
  /* coi capitoli e coi dettagli l'altezza e' FISSA (quella massima): cambiando capitolo il pannello non "balla" (testi lunghi diversi) */
  .sp-tpl-account-layout .sp-tpl-guide.is-detailed .sp-tpl-guide-panel:has(> .sp-tpl-guide-steps.is-capitoli) { height: calc(100vh - 260px - var(--sp-unit, 15px)); height: calc(100dvh - 260px - var(--sp-unit, 15px)); }
}
/* (2) le tessere: lo stato attivo passa morbido (fondo, bordo, un piccolo scale, 220ms); il testo del capitolo entra con una dissolvenza
   e uno scorrimento breve (200ms). Niente bundle: guideCapitolo riscrive il corpo a ogni clic, e un'animazione sui figli riparte da
   sola su ogni nodo nuovo. Solo nelle guide coi capitoli */
.sp-tpl-guide-cap { transition: background-color .22s ease-out, box-shadow .22s ease-out, transform .22s ease-out, color .22s ease-out; }
.sp-tpl-guide-cap.is-current { transform: scale(1.03); }
.sp-tpl-guide-cap.is-current:hover { transform: translateY(-2px) scale(1.03); }
@keyframes sp-tpl-guide-cap-testo { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sp-tpl-guide:has(.sp-tpl-guide-steps.is-capitoli) [data-sp-guide-body] > * { animation: sp-tpl-guide-cap-testo .2s ease-out both; }
@media (min-width: 641px) and (max-width: 900px) {
  .sp-tpl-guide.is-detailed .sp-tpl-guide-panel:has(> .sp-tpl-guide-steps.is-capitoli) { height: calc(100vh - var(--sp-unit, 15px) * 2 - 80px); height: calc(100dvh - var(--sp-unit, 15px) * 2 - 80px); }
}
/* (3) telefono e tablet (<=900px): con la guida aperta la pagina dietro non scorre; lo scorrimento resta dentro il pannello (contain: niente
   "scroll chaining" in fondo alla lista). overflow: hidden non azzera la posizione: chiusa la guida, la pagina e' dove era */
@media (max-width: 900px) {
  html:has(.sp-tpl-guide.is-open), html:has(.sp-tpl-guide.is-open) body { overflow: hidden; overscroll-behavior: none; }
  .sp-tpl-guide.is-open .sp-tpl-guide-panel { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
  .sp-tpl-guide.is-detailed .sp-tpl-guide-panel:has(> .sp-tpl-guide-steps.is-capitoli) { height: 62vh; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-tpl-guide-cap, .sp-tpl-guide-cap.is-current, .sp-tpl-guide-cap.is-current:hover { transition: none; transform: none; }
  .sp-tpl-guide:has(.sp-tpl-guide-steps.is-capitoli) [data-sp-guide-body] > * { animation: none; }
}
/* (311) Sicurezza su due colonne vere sul desktop: la colonna larga (Password, 2FA, Passkey) prende lo spazio che resta accanto ai 38% di
   Ultimi accessi. Con flex-basis auto (base: la larghezza del contenuto) il testo lungo della 2FA la mandava a capo SOTTO l'altra, anche
   prima della 311 (misurato: a 1440 le due colonne partivano entrambe da x 351) */
@media (min-width: 901px) {
  .sp-tpl-sec-col--main { flex: 1 1 0; }
}
/* =====================================================================
   316 (7/10/2026, Davide da uno screenshot a ~890 px) ritocchi della guida
   ===================================================================== */
/* (1) il pannello e' una griglia: con l'altezza fissa (308, capitoli + dettagli) le righe si allungavano e la striscia delle tessere
   occupava quasi tutto il pannello. Le righe stanno in alto, alte quanto il loro contenuto; il resto scorre */
.sp-tpl-guide-panel { align-content: start; }
.sp-tpl-guide-steps.is-capitoli { align-self: start; }
/* (3) sul desktop la guida sta SEMPRE a destra, in tutti gli stati (anche il pannello piccolo senza capitoli e senza dettagli, che la 293
   e la 308 lasciavano a sinistra). Il telefono come prima */
@media (min-width: 901px) {
  .sp-tpl-account-layout .sp-tpl-guide-panel { left: auto; right: var(--sp-unit-l, 30px); }
}
/* (2) la scorciatoia sp-go nel testo della guida: con la voce sulla pagina il bundle le da' role="button" ed e' un link; senza la voce
   resta testo normale (niente stile, niente puntatore): la frase resta intera */
.sp-tpl-guide-body [class*="sp-go-"][role="button"] {
  color: var(--sp-tpl-guide-accent, #8fd1ff); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.sp-tpl-guide-body [class*="sp-go-"][role="button"]:hover { text-decoration-thickness: 2px; }
.sp-tpl-guide-body [class*="sp-go-"][role="button"]:focus-visible { outline: 2px solid var(--sp-tpl-guide-accent, #8fd1ff); outline-offset: 2px; border-radius: 2px; }
.sp-tpl-guide-body [class*="sp-go-"]:not([role="button"]) { color: inherit; cursor: auto; text-decoration: none; }