/* Colori dello Studio SosTer (dal marchio): salvia e volpe, con i toni del gestionale */
:root {
  --sfondo: #F4F5F1;
  --superficie: #FFFFFF;
  --testo: #1D2226;
  --tenue: #56635A;
  --linea: #D5DBD3;
  --salvia: #4F6A52;
  --ardesia: #2C5361;
  --volpe: #8A4A2C;
  --oliva: #555C2F;
  --accento: #8A4A2C;
  --fuoco: #2F6FB0;
  --font: 'Titillium Web', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --sfondo: #171B1D; --superficie: #1D2226; --testo: #EEF1EC; --tenue: #A9B4AA; --linea: #2E363B;
    --accento: #E3A97F; --fuoco: #8DB8E8; color-scheme: dark;
  }
}
:root[data-tema="scuro"] {
  --sfondo: #171B1D; --superficie: #1D2226; --testo: #EEF1EC; --tenue: #A9B4AA; --linea: #2E363B;
  --accento: #E3A97F; --fuoco: #8DB8E8; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100vh;
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  background: var(--sfondo); color: var(--testo);
}
:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 3px; }

.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.marchio { display: flex; align-items: center; gap: 12px; color: var(--testo); text-decoration: none; font-weight: 700; font-size: 20px; }
.marchio img { height: 40px; width: auto; }
.segno { width: 34px; height: 34px; border-radius: 8px; background: var(--salvia); position: relative; flex: none; }
.segno::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 12px; height: 12px; border-radius: 3px; background: #C98A5F; }
.barra-destra { display: flex; align-items: center; gap: 12px; }
.demo { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 3px; background: #F6ECE5; color: #6B3920; }
.tema {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 36px; padding: 4px 14px;
  border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--testo);
}
.tema:hover { border-color: var(--tenue); }

.contenuto { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 56px 28px 40px; }
.intestazione { text-align: center; margin-bottom: 48px; }
.sopratitolo { margin: 0; font-size: 15px; font-weight: 600; color: var(--accento); letter-spacing: 0.02em; }
.intestazione h1 { margin: 6px 0 4px; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; font-weight: 700; }
.data { margin: 0; color: var(--tenue); }

.tessere { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px 24px; }
.tessera { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 8px; border-radius: 16px; color: var(--testo); text-decoration: none; }
a.tessera:hover .icona { transform: translateY(-3px); }
.icona {
  display: grid; place-items: center; width: 132px; height: 132px; border-radius: 30px; color: #fff;
  transition: transform 0.15s ease;
}
.icona svg { width: 64px; height: 64px; }
.c-salvia { background: var(--salvia); } .c-ardesia { background: var(--ardesia); }
.c-volpe { background: var(--volpe); } .c-oliva { background: var(--oliva); }
.tessera h2 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 700; max-width: 22ch; }
.tessera p { margin: 0; color: var(--tenue); font-size: 14.5px; max-width: 26ch; }
.stato { font-size: 13px; font-weight: 600; color: var(--accento); }
.tessera.in-arrivo .icona { filter: grayscale(0.55); opacity: 0.55; }
.tessera.in-arrivo .stato { color: var(--tenue); }

.avviso { margin: 56px auto 0; max-width: 60ch; text-align: center; font-size: 14px; color: var(--tenue); }
.piede {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 16px 28px; border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--tenue);
}
@media (max-width: 560px) {
  .barra { padding: 12px 16px; } .contenuto { padding: 36px 16px 28px; }
  .icona { width: 104px; height: 104px; border-radius: 24px; } .icona svg { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .icona { transition: none; } }