/* GymPro — foglio di stile condiviso
   Regole: spaziature solo dalla scala a multipli di 8 (--s*),
   due pesi tipografici (400 e 700), niente maiuscolo, numeri senza decorazioni. */
:root {
  /* Colori */
  --notte: #0f1a2b;      /* fondo principale, blu grafite */
  --notte-2: #15233a;    /* superfici rialzate */
  --linea: #24364f;      /* bordi e divisori */
  --acciaio: #8496b0;    /* testo secondario */
  --ghiaccio: #e8eef8;   /* testo principale */
  --testo-2: #c3cfe1;    /* testo corrente */
  --blu: #3b82f6;        /* accento, dal "Pro" del logo */
  --blu-chiaro: #7fb4ff;
  --blu-scuro: #1d4ed8;
  --ok: #34d399;
  --errore: #f87171;

  /* Spaziature: multipli di 8 */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s6: 48px;
  --s8: 64px;
  --s12: 96px;

  /* Tipografia: due pesi */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --regolare: 400;
  --forte: 700;

  --max: 1152px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--notte);
  color: var(--ghiaccio);
  font-family: var(--font);
  font-weight: var(--regolare);
  font-size: 1rem;
  line-height: 1.5;
}
b, strong { font-weight: var(--forte); }
img { max-width: 100%; display: block; }
a { color: var(--blu-chiaro); }
:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(var(--max), 100% - var(--s4)); margin-inline: auto; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15, 26, 43, .9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); height: var(--s8); }
.top .logo img { height: var(--s4); width: auto; }
.top nav { display: flex; align-items: center; gap: var(--s3); }
.top nav .link { color: var(--acciaio); text-decoration: none; }
.top nav .link:hover { color: var(--ghiaccio); }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: var(--s6); padding: 0 var(--s3);
  border-radius: 999px; border: 0;
  font: var(--forte) 1rem/1 var(--font);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, box-shadow .15s;
}
.btn-primario { background: var(--blu); color: #fff; }
.btn-primario:hover { background: var(--blu-scuro); }
.btn-secondario { background: transparent; color: var(--ghiaccio); box-shadow: inset 0 0 0 1px var(--linea); }
.btn-secondario:hover { box-shadow: inset 0 0 0 1px var(--blu); }
.btn-piccolo { min-height: var(--s4); padding: 0 var(--s2); font-size: .875rem; }
.btn svg { width: var(--s2); height: var(--s2); flex: none; }

/* ---------- Tipografia ---------- */
h1, h2, h3 { margin: 0; font-weight: var(--forte); line-height: 1.1; }
h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-variation-settings: "wdth" 122; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); font-variation-settings: "wdth" 118; letter-spacing: -.01em; }
h3 { font-size: 1.125rem; font-variation-settings: "wdth" 110; line-height: 1.3; }
.lead { font-size: 1.25rem; color: var(--testo-2); max-width: 34em; }
.muted { color: var(--acciaio); }

/* ---------- Hero ---------- */
.hero { padding: var(--s12) 0; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 896px; max-height: 896px;
  background: radial-gradient(closest-side, rgba(59,130,246,.2), transparent 70%);
  pointer-events: none;
}
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: center; position: relative; }
.hero h1 { margin-bottom: var(--s3); }
.hero .lead { margin: 0 0 var(--s4); }
.azioni { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hero .nota { margin: var(--s3) 0 0; font-size: .875rem; color: var(--acciaio); }

/* ---------- Pannello app ---------- */
.pannello {
  background: var(--notte-2);
  border: 1px solid var(--linea);
  border-radius: var(--s3);
  padding: var(--s3);
  box-shadow: 0 32px 80px -32px rgba(29, 78, 216, .55);
  animation: entra .7s cubic-bezier(.2,.7,.2,1) both .1s;
}
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.pannello-testa { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.pannello-testa img { width: 40px; height: 40px; border-radius: var(--s1); }
.pannello-testa strong { display: block; }
.pannello-testa span { font-size: .875rem; color: var(--acciaio); }

.schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); background: var(--notte); border-radius: var(--s2); padding: var(--s1); margin-bottom: var(--s3); }
.schede button {
  border: 0; background: transparent; color: var(--acciaio);
  font: var(--forte) .875rem/1 var(--font); min-height: var(--s4); padding: 0 var(--s1); border-radius: var(--s1); cursor: pointer;
}
.schede button[aria-selected="true"] { background: var(--blu); color: #fff; }
.schede button:hover:not([aria-selected="true"]) { color: var(--ghiaccio); }

.vista { display: none; min-height: 320px; }
.vista.attiva { display: block; animation: vista .25s ease both; }
@keyframes vista { from { opacity: 0; } to { opacity: 1; } }

.giorno { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s1); }
.giorno small { color: var(--acciaio); font-size: .875rem; }

.esercizio { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--linea); }
.esercizio:first-of-type { border-top: 0; }
.esercizio .det { grid-column: 1 / -1; font-size: .875rem; color: var(--acciaio); }
.superserie { border-left: 2px solid var(--blu); padding-left: var(--s2); }
.superserie .esercizio { border-top-color: transparent; padding: var(--s1) 0; }
.timer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s2); padding: var(--s2); background: var(--notte); border-radius: var(--s2); }

.misure { margin: 0 0 var(--s2); padding: 0; list-style: none; }
.misure li { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s1) 0; border-top: 1px solid var(--linea); }
.misure li:first-child { border-top: 0; }
.misure span { color: var(--acciaio); }
.grafico { background: var(--notte); border-radius: var(--s2); padding: var(--s2); }
.grafico svg { width: 100%; height: auto; }

.storico-riga { display: grid; grid-template-columns: var(--s8) 1fr auto; gap: var(--s2); align-items: center; padding: var(--s1) 0; border-top: 1px solid var(--linea); }
.storico-riga:first-child { border-top: 0; }
.storico-riga .data { font-size: .875rem; color: var(--acciaio); line-height: 1.25; }
.storico-riga .stato { font-size: .75rem; font-weight: var(--forte); padding: 0 var(--s1); line-height: var(--s3); border-radius: 999px; background: rgba(52, 211, 153, .12); color: var(--ok); }
.storico-riga .stato.no { background: rgba(132, 150, 176, .14); color: var(--acciaio); }

/* ---------- Sezioni ---------- */
.sezione { padding: var(--s12) 0; border-top: 1px solid var(--linea); }
.sezione-testa { max-width: 720px; margin-bottom: var(--s6); }
.sezione-testa p { margin: var(--s2) 0 0; color: var(--testo-2); font-size: 1.125rem; }

.tre-colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.tre-colonne h3 { margin-bottom: var(--s1); padding-top: var(--s2); border-top: 2px solid var(--blu); }
.tre-colonne p { margin: 0; color: var(--testo-2); }
.tre-colonne ul { margin: var(--s2) 0 0; padding: 0; list-style: none; }
.tre-colonne li { padding: var(--s1) 0 var(--s1) var(--s3); position: relative; color: var(--testo-2); border-top: 1px solid var(--linea); }
.tre-colonne li::before {
  content: ""; position: absolute; left: 0; top: var(--s2); width: 12px; height: 6px;
  border-left: 2px solid var(--blu-chiaro); border-bottom: 2px solid var(--blu-chiaro); transform: rotate(-45deg);
}

.funzioni { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s8); }
.funzione { display: grid; grid-template-columns: var(--s6) 1fr; gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--linea); }
.funzione .ico { width: var(--s6); height: var(--s6); border-radius: var(--s1); background: rgba(59, 130, 246, .14); color: var(--blu-chiaro); display: grid; place-items: center; }
.funzione .ico svg { width: var(--s3); height: var(--s3); }
.funzione h3 { margin-bottom: var(--s1); }
.funzione p { margin: 0; color: var(--testo-2); }

/* Passi: il numero è testo semplice, senza colore né dimensione speciale */
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); counter-reset: passo; list-style: none; margin: 0; padding: 0; }
.passi li { counter-increment: passo; padding-top: var(--s2); border-top: 1px solid var(--linea); }
.passi li::before { content: counter(passo); display: block; margin-bottom: var(--s1); color: var(--acciaio); }
.passi p { margin: var(--s1) 0 0; color: var(--testo-2); }

.chiusura { padding: var(--s12) 0; border-top: 1px solid var(--linea); text-align: center; }
.chiusura img { width: 96px; height: 96px; margin: 0 auto var(--s3); border-radius: var(--s3); }
.chiusura h2 { max-width: 16em; margin: 0 auto var(--s2); }
.chiusura p { margin: 0 auto var(--s4); max-width: 34em; color: var(--testo-2); }
.chiusura .azioni { justify-content: center; }

/* Scarica l'app */
.scarica .wrap { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: center; }
.scarica h2 { margin-bottom: var(--s2); }
.scarica p { margin: 0 0 var(--s4); max-width: 34em; color: var(--testo-2); font-size: 1.125rem; }
.scarica img { width: 128px; height: 128px; border-radius: var(--s4); }
.btn svg { width: var(--s3); height: var(--s3); }

/* ---------- Footer ---------- */
.piede { border-top: 1px solid var(--linea); padding: var(--s4) 0 var(--s6); font-size: .875rem; color: var(--acciaio); }
.piede .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); align-items: center; }
.piede img { height: var(--s3); width: auto; }
.piede nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.piede a { color: var(--acciaio); text-decoration: none; }
.piede a:hover { color: var(--ghiaccio); }

/* ---------- Pagina richiesta ---------- */
.richiesta { padding: var(--s8) 0 var(--s12); }
.richiesta .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s8); align-items: start; }
.richiesta .wrap.singola { grid-template-columns: 1fr; max-width: 640px; }
.richiesta-intro h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); margin-bottom: var(--s3); }
.richiesta-intro p { color: var(--testo-2); margin: 0; }
.richiesta-intro ul { list-style: none; padding: 0; margin: var(--s4) 0 0; }
.richiesta-intro li { padding: var(--s2) 0; border-top: 1px solid var(--linea); color: var(--testo-2); }
.richiesta-intro li b { color: var(--ghiaccio); display: block; }
.indietro { display: inline-flex; gap: var(--s1); align-items: center; color: var(--acciaio); text-decoration: none; margin-bottom: var(--s3); }
.indietro:hover { color: var(--ghiaccio); }
.indietro svg { width: var(--s2); height: var(--s2); }

.modulo { background: var(--notte-2); border: 1px solid var(--linea); border-radius: var(--s3); padding: var(--s6); }
.campi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.campo { display: flex; flex-direction: column; gap: var(--s1); }
.campo.pieno { grid-column: 1 / -1; }
.campo label, .campo legend { font-weight: var(--forte); font-size: .9375rem; padding: 0; }
.campo .req { color: var(--blu-chiaro); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--s6); padding: 0 var(--s2);
  background: var(--notte); color: var(--ghiaccio);
  border: 1px solid var(--linea); border-radius: var(--s1);
  font: var(--regolare) 1rem/1.5 var(--font);
}
.campo textarea { min-height: 128px; padding: var(--s1) var(--s2); resize: vertical; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238496b0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s2) center; background-size: var(--s2); padding-right: var(--s6); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 2px rgba(59,130,246,.35); }
.campo input::placeholder, .campo textarea::placeholder { color: #5d6f8a; }
.campo .errore-campo { font-size: .875rem; color: var(--errore); display: none; }
.campo.non-valido input, .campo.non-valido select, .campo.non-valido textarea { border-color: var(--errore); }
.campo.non-valido .errore-campo { display: block; }

fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.scelte { display: flex; flex-wrap: wrap; gap: var(--s1); }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta span { display: inline-flex; align-items: center; min-height: var(--s6); padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--linea); cursor: pointer; }
.scelta input:checked + span { border-color: var(--blu); background: rgba(59,130,246,.16); color: #fff; }
.scelta input:focus-visible + span { outline: 2px solid var(--blu-chiaro); outline-offset: 2px; }

.campo label.consenso, .consenso { font-weight: var(--regolare); display: grid; grid-template-columns: var(--s3) 1fr; gap: var(--s1); align-items: start; font-size: .9375rem; color: var(--testo-2); }
.consenso input { width: var(--s3); height: var(--s3); margin: 0; accent-color: var(--blu); }
.consensi { display: grid; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--linea); }
.consensi .errore-campo { margin-left: var(--s4); }

.invio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.invio .btn { min-width: 224px; }
.invio .btn[disabled] { opacity: .6; cursor: progress; }
.invio small { color: var(--acciaio); }

.esito { display: none; margin-top: var(--s3); padding: var(--s2); border-radius: var(--s2); }
.esito.ok { display: block; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.4); color: #b7f3dc; }
.esito.ko { display: block; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.4); color: #fecaca; }

.trappola { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.conferma { text-align: center; padding: var(--s6) var(--s4); }
.conferma .spunta { width: var(--s8); height: var(--s8); margin: 0 auto var(--s3); border-radius: 50%; background: rgba(52,211,153,.14); color: var(--ok); display: grid; place-items: center; }
.conferma .spunta svg { width: var(--s4); height: var(--s4); }
.conferma h2 { margin-bottom: var(--s2); }
.conferma p { color: var(--testo-2); max-width: 30em; margin: 0 auto var(--s4); }

/* ---------- Testo legale ---------- */
.legale { padding: var(--s8) 0; }
.legale .wrap { max-width: 768px; }
.legale h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--s3); }
.legale h2 { font-size: 1.25rem; margin: var(--s4) 0 var(--s1); font-variation-settings: "wdth" 110; }
.legale p, .legale li { color: var(--testo-2); }
.legale .torna { margin-top: var(--s6); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap, .richiesta .wrap { grid-template-columns: 1fr; gap: var(--s6); }
  .tre-colonne { grid-template-columns: 1fr; }
  .passi { grid-template-columns: 1fr 1fr; }
  .funzioni { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { padding: var(--s6) 0 var(--s8); }
  .sezione, .chiusura { padding: var(--s8) 0; }
  .richiesta { padding: var(--s4) 0 var(--s8); }
  .modulo { padding: var(--s3); }
  .pannello { padding: var(--s2); }
  .top nav .link { display: none; }
  .scarica .wrap { grid-template-columns: 1fr; }
  .scarica img { grid-row: 1; width: 96px; height: 96px; border-radius: var(--s3); }
  .campi { grid-template-columns: 1fr; }
  .passi { grid-template-columns: 1fr; }
  .azioni .btn, .invio .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}