/* =====================================================================
   Sito pubblico SGI – stesso tema della piattaforma admin:
   materiali "liquid glass", colori di sistema iOS, tema chiaro e scuro.
   ===================================================================== */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --blu: #007aff; --verde: #34c759; --arancio: #ff9500; --viola: #af52de; --indaco: #5856d6;
  --blu-t: rgba(0, 122, 255, .12); --verde-t: rgba(52, 199, 89, .15); --arancio-t: rgba(255, 149, 0, .16); --viola-t: rgba(175, 82, 222, .14);
  --verde-testo: #248a3d; --arancio-testo: #c93400; --blu-testo: #0062cc; --viola-testo: #8944ab;

  --testo: #1c1c1e;
  --testo-2: rgba(60, 60, 67, .68);
  --testo-3: rgba(60, 60, 67, .42);
  --separatore: rgba(60, 60, 67, .14);
  --riempimento: rgba(118, 118, 128, .10);

  --vetro: rgba(255, 255, 255, .62);
  --vetro-forte: rgba(255, 255, 255, .82);
  --vetro-bordo: rgba(255, 255, 255, .7);
  --vetro-luce: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --ombra: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .07);
  --sfocatura: blur(28px) saturate(185%);

  --sfondo: #eef1f7;
  --macchia-1: #7fb0ff; --macchia-2: #ffb0d6; --macchia-3: #8fe6b8; --macchia-4: #c3a9ff;

  --r: 16px; --r-l: 24px; --r-xl: 32px;
  --molla: cubic-bezier(.32, .72, 0, 1);

  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --testo: #f5f5f7;
    --testo-2: rgba(235, 235, 245, .66);
    --testo-3: rgba(235, 235, 245, .4);
    --separatore: rgba(84, 84, 88, .5);
    --riempimento: rgba(118, 118, 128, .22);
    --vetro: rgba(38, 38, 42, .58);
    --vetro-forte: rgba(44, 44, 48, .86);
    --vetro-bordo: rgba(255, 255, 255, .1);
    --vetro-luce: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .03);
    --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
    --sfondo: #0b0b10;
    --macchia-1: #1f4fb8; --macchia-2: #7a2477; --macchia-3: #0f6b4c; --macchia-4: #4330a8;
    --blu: #0a84ff; --verde: #30d158; --arancio: #ff9f0a;
    --verde-testo: #30d158; --arancio-testo: #ffb340; --blu-testo: #64a8ff; --viola-testo: #d68bf5;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--sfondo); overflow-x: hidden; }

body::before {
  content: ''; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 18%, var(--macchia-1), transparent 70%),
    radial-gradient(34vmax 34vmax at 88% 12%, var(--macchia-2), transparent 70%),
    radial-gradient(40vmax 40vmax at 78% 88%, var(--macchia-3), transparent 70%),
    radial-gradient(30vmax 30vmax at 22% 92%, var(--macchia-4), transparent 70%);
  filter: blur(40px); opacity: .85;
  animation: deriva 40s ease-in-out infinite alternate;
}
@keyframes deriva {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3vmax, -2vmax, 0) scale(1.06); }
  100% { transform: translate3d(-2vmax, 2vmax, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  html { scroll-behavior: auto; }
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 750; letter-spacing: -.03em; margin: 0; line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.025em; margin: 0 0 .5rem; line-height: 1.15; }
h3 { font-size: 1.08rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .4rem; }
p { margin: 0 0 .8rem; }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--blu-t); }
:focus-visible { outline: 3px solid rgba(0, 122, 255, .45); outline-offset: 2px; }
code { font-family: var(--mono); font-size: .88em; background: var(--riempimento); padding: .1em .35em; border-radius: 6px; }

.vetro, .card, .barra {
  background: var(--vetro);
  -webkit-backdrop-filter: var(--sfocatura);
  backdrop-filter: var(--sfocatura);
  border: 1px solid var(--vetro-bordo);
  box-shadow: var(--vetro-luce), var(--ombra);
}

.contenitore { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* ---------------- barra superiore ---------------- */
.testata { position: sticky; top: 12px; z-index: 50; margin-top: 12px; }
.barra {
  display: flex; align-items: center; gap: 1rem; padding: .55rem .6rem .55rem .9rem; border-radius: 999px;
}
.marchio { display: flex; gap: .65rem; align-items: center; color: var(--testo); margin-right: auto; }
.marchio:hover { text-decoration: none; }
.marchio strong { display: block; font-size: .95rem; letter-spacing: -.01em; line-height: 1.2; }
.marchio small { display: block; font-size: .72rem; color: var(--testo-2); line-height: 1.2; }
.logo {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(145deg, #3d9bff, #5856d6); color: #fff; font-weight: 700; font-size: .74rem;
  box-shadow: 0 4px 14px rgba(0, 122, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.menu { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: .45rem .8rem; border-radius: 999px; color: var(--testo); font-weight: 500; font-size: .9rem;
  transition: background .25s var(--molla);
}
.menu a:hover, .menu a[aria-current="page"] { background: var(--riempimento); text-decoration: none; }
.apri-menu { display: none; }

/* ---------------- pulsanti ---------------- */
.pulsante {
  font: inherit; font-weight: 600; font-size: .92rem; letter-spacing: -.005em;
  border: none; background: var(--blu); color: #fff; padding: .6rem 1.15rem; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 122, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s var(--molla), filter .2s;
  -webkit-tap-highlight-color: transparent;
}
.pulsante:hover { filter: brightness(1.07); text-decoration: none; }
.pulsante:active { transform: scale(.95); }
.pulsante.secondario {
  background: var(--vetro-forte); color: var(--blu);
  -webkit-backdrop-filter: var(--sfocatura); backdrop-filter: var(--sfocatura);
  box-shadow: var(--vetro-luce), 0 1px 3px rgba(0, 0, 0, .08); border: 1px solid var(--vetro-bordo);
}
.pulsante.grande { padding: .8rem 1.4rem; font-size: 1rem; }
.icona { width: 20px; height: 20px; flex-shrink: 0; }
.pulsante .icona { width: 18px; height: 18px; }

/* ---------------- sezioni ---------------- */
main { padding-bottom: 2rem; }
section { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.occhiello { display: inline-block; font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--blu-testo); margin-bottom: .6rem; }
.intro { color: var(--testo-2); font-size: 1.06rem; max-width: 62ch; margin-bottom: 1.6rem; }

.eroe { padding-top: clamp(3rem, 9vw, 6.5rem); }
.eroe .card { padding: clamp(1.6rem, 5vw, 3.2rem); border-radius: var(--r-xl); }
.eroe p.intro { font-size: clamp(1.05rem, 2vw, 1.22rem); margin: 1rem 0 1.6rem; }
.azioni { display: flex; flex-wrap: wrap; gap: .6rem; }
.norme { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }

.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge.blu { background: var(--blu-t); color: var(--blu-testo); }
.badge.verde { background: var(--verde-t); color: var(--verde-testo); }
.badge.arancio { background: var(--arancio-t); color: var(--arancio-testo); }
.badge.viola { background: var(--viola-t); color: var(--viola-testo); }

.griglia { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card { border-radius: var(--r-l); padding: 1.4rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .testo-2, .testo-2 { color: var(--testo-2); }
.card .icona-box {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .9rem;
  background: var(--blu-t); color: var(--blu);
}
.card .icona-box.verde { background: var(--verde-t); color: var(--verde); }
.card .icona-box.arancio { background: var(--arancio-t); color: var(--arancio); }
.card .icona-box.viola { background: var(--viola-t); color: var(--viola); }
.card .icona-box .icona { width: 22px; height: 22px; }

.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li { padding: .7rem 0; border-top: 1px solid var(--separatore); display: flex; gap: .8rem; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.elenco li:first-child { border-top: none; padding-top: 0; }
.elenco li:last-child { padding-bottom: 0; }
.elenco .etichetta { color: var(--testo-2); font-size: .9rem; }

.punti { margin: .4rem 0 0; padding-left: 1.15rem; }
.punti li { margin: .3rem 0; }
.punti li::marker { color: var(--blu); }

.certificato { display: flex; flex-direction: column; gap: .2rem; }
.certificato .norma { font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; }
.certificato dl { margin: .8rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .9rem; }
.certificato dt { color: var(--testo-2); }
.certificato dd { margin: 0; }

.segnaposto {
  background: var(--arancio-t); color: var(--arancio-testo); border-radius: 6px; padding: 0 .35em;
  font-style: normal; font-weight: 550;
}

.passi { counter-reset: passo; list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.passi li { counter-increment: passo; display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: start; }
.passi li::before {
  content: counter(passo); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--blu); color: #fff; font-weight: 700; font-size: .88rem;
}

.richiamo { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: var(--r-xl); }
.richiamo h2 { margin-bottom: .3rem; }
.richiamo p { color: var(--testo-2); margin: 0; max-width: 56ch; }

.documento { padding-top: clamp(2.5rem, 7vw, 4.5rem); }
.documento .card { padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: var(--r-xl); max-width: 820px; }
.documento h2 { font-size: 1.3rem; margin-top: 2rem; }
.documento h2:first-of-type { margin-top: 1.4rem; }
.documento .aggiornato { color: var(--testo-3); font-size: .85rem; margin-top: .6rem; }

/* ---------------- piè di pagina ---------------- */
.piede { margin-top: clamp(3rem, 7vw, 5rem); padding: 1.6rem 0 2.4rem; border-top: 1px solid var(--separatore); color: var(--testo-2); font-size: .88rem; }
.piede .contenitore { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.piede nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.piede a { color: var(--testo-2); }

/* ---------------- telefono ---------------- */
@media (max-width: 860px) {
  .testata { top: 8px; margin-top: 8px; }
  .barra { border-radius: var(--r-l); flex-wrap: wrap; padding: .5rem .6rem .5rem .8rem; }
  .apri-menu {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--riempimento); color: var(--testo);
  }
  .barra .accedi-testata { display: none; }
  .barra > nav { order: 3; width: 100%; }
  .menu { display: none; flex-direction: column; padding: .3rem 0 .2rem; }
  .barra.aperta .menu { display: flex; }
  .menu a { padding: .7rem .8rem; border-radius: 12px; font-size: 1rem; }
  .menu .solo-telefono { display: block; }
}
.menu .solo-telefono { display: none; }
@media (max-width: 860px) { .menu .solo-telefono { display: list-item; } }

@media print {
  body::before, .testata, .azioni, .richiamo { display: none; }
  .card { box-shadow: none; border: 1px solid #ccc; background: #fff; }
}

.salta { position: absolute; left: -9999px; top: 12px; z-index: 100; }
.salta:focus { left: 16px; background: var(--blu); color: #fff; padding: .5rem 1rem; border-radius: 999px; }