/* Palette Brain Personal Trainer — i quattro colori del tema Mosaico
   dell'app (Tema.swift): fucsia Memoria, turchese Calcolo, viola Attenzione,
   arancio Logica, su fondo notte (#0B0E1B, il fondo dell'app fuori dalla Home).
   Sovrascrive i token di base.css: i componenti restano gli stessi. */

[data-site="braintrainer"] {
  --c-memoria:    #F21DBD;
  --c-calcolo:    #21E0DB;
  --c-attenzione: #7F34EB;
  --c-logica:     #F76919;

  --navy: #0B0E1B; --navy-deep: #05060D; --navy-ink: #080A14;
  --navy-elevated: #161A2B; --navy-soft: #1F2438;
  --gold: #21E0DB; --gold-soft: #8FF0EC; --cream: #F3F2FA;
  --accent-red: #FF5A5A; --accent-green: #3DE07A; --accent-cyan: #F21DBD;
  --on-gold: #041012; --accent-text: #2EE6E1; --muted-fg: #B8BCD6;
  --bg-0: #0F1224;
  --bg-1: #0B0E1B;
  --bg-2: #05060D;
  --panel-0: #161A2B;
  --panel-1: #0D1020;
  /* le sei schede di "Cosa la distingue" */
  --tile-0-a: #8A3A0C; --tile-0-b: #F76919;   /* la cassa: arancio Logica */
  --tile-1-a: #0B6E6B; --tile-1-b: #21E0DB;   /* la Sfida: turchese Calcolo */
  --tile-2-a: #7A0F60; --tile-2-b: #F21DBD;   /* punteggio: fucsia Memoria */
  --tile-3-a: #3B1478; --tile-3-b: #7F34EB;   /* privacy: viola Attenzione */
  --tile-4-a: #123C86; --tile-4-b: #4D8DFF;   /* lingue */
  --tile-5-a: #12703F; --tile-5-b: #3DE07A;   /* temi */
  --tile-6-a: #0B5F6E; --tile-6-b: #22C8D8;
  --is-dark: 1;
  color-scheme: dark;
}

[data-site="braintrainer"] .brand__text span { color: var(--accent-cyan); }

/* ==========================================================================
   Il fulcro: la Home a quattro colori, tagliata dalle diagonali
   ========================================================================== */
.stage { display: grid; gap: var(--sp-4); justify-items: center; }
.home {
  position: relative; width: min(100%, 380px); aspect-ratio: 1;
  border-radius: 40px; overflow: hidden; background: #000;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.06);
  user-select: none;
}
.home__mosaic { position: absolute; inset: 0; width: 100%; height: 100%; }
.home__mosaic polygon { transition: opacity 500ms var(--ease-out); }
.home__mosaic g { transition: opacity 500ms var(--ease-out), filter 500ms var(--ease-out); }
.home.has-active .home__mosaic g:not(.is-active) { opacity: 0.72; }

/* senza JavaScript restano i quattro triangoli pieni */
.home__sector {
  position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer;
  background: var(--c); clip-path: var(--clip);
  transition: filter 400ms var(--ease-out);
}
.js .home__sector { background: transparent; }
.home__sector:focus-visible { outline: none; }
.home__sector span {
  position: absolute; left: var(--lx); top: var(--ly); translate: -50% -50%;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.95rem, 0.7rem + 1.2vw, 1.25rem);
  letter-spacing: -0.01em; color: #fff; white-space: nowrap;
  text-shadow: 0 0 6px rgb(0 0 0 / 0.9), 0 2px 14px rgb(0 0 0 / 0.75), 0 0 2px rgb(0 0 0 / 1);
  transition: transform 400ms var(--ease-out), opacity 400ms;
}
.home__sector.is-active span { transform: scale(1.08); }
.home.has-active .home__sector:not(.is-active) span { opacity: 0.8; }
.home__sector:focus-visible span { outline: 3px solid #fff; outline-offset: 6px; border-radius: 6px; }

.home__hub {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 46%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: #000; box-shadow: 0 0 0 3px rgb(0 0 0 / 0.9), 0 18px 40px -10px rgb(0 0 0 / 0.9);
  pointer-events: none;
}
.home__hub img { width: 100%; height: 100%; object-fit: cover; scale: 1.06; }

/* la didascalia sotto la Home: l'area attiva e i suoi esercizi */
.stage__caption {
  width: min(100%, 380px); min-height: 11.5rem;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  border-inline-start: 4px solid var(--c, var(--gold));
  transition: border-color 500ms var(--ease-out);
}
.stage__caption h3 {
  font-size: 1.05rem; color: var(--c, var(--cream)); margin-bottom: 0.15rem;
  transition: color 500ms;
}
.stage__caption p { font-size: var(--fs-sm); color: var(--muted-fg); margin-bottom: 0.6rem; }
.stage__caption ul { list-style: none; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.stage__caption li { display: block; padding-inline-start: 1rem; position: relative; }
.stage__caption li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--c, var(--gold)); position: absolute; left: 0; top: 0.55em;
}
.stage__caption li span { color: var(--muted-fg); }
.stage__caption li strong { font-weight: 600; color: var(--cream); margin-inline-end: 0.4rem; }
.stage__caption.is-swap > * { animation: capfade 420ms var(--ease-out); }
@keyframes capfade { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) { .stage__caption.is-swap > * { animation: none; } }

/* ==========================================================================
   Come funziona: i quattro numeri
   ========================================================================== */
.stats {
  display: grid; gap: var(--sp-3); margin-top: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.stat {
  padding: var(--sp-4) var(--sp-3); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  border-top: 3px solid var(--c, var(--gold));
}
.stat strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1; color: var(--c, var(--cream));
  letter-spacing: -0.02em;
}
.stat span { display: block; margin-top: 0.4rem; font-size: var(--fs-sm); color: var(--muted-fg); }

/* ==========================================================================
   Le quattro aree, con i quattordici esercizi
   ========================================================================== */
.areas { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.area {
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--panel-0);
  border: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
  display: flex; flex-direction: column;
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
.area:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -22px rgb(0 0 0 / 0.7); }
.area__head {
  padding: var(--sp-4); color: #fff;
  background: linear-gradient(150deg, var(--c), color-mix(in oklab, var(--c) 62%, black));
}
.area__head h3 { font-size: var(--fs-h3); margin-bottom: 0.3rem; }
.area__head p { font-size: var(--fs-sm); color: rgb(255 255 255 / 0.86); text-wrap: pretty; }
.area__list { list-style: none; padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: 0.7rem; }
.area__list li { display: grid; gap: 0.1rem; padding-inline-start: 1rem; position: relative; }
.area__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c);
}
.area__list strong { font-weight: 600; color: var(--cream); }
.area__list span { font-size: var(--fs-sm); color: var(--muted-fg); }

/* ==========================================================================
   Gratis e Pro
   ========================================================================== */
.model {
  width: 100%; border-collapse: collapse; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--panel-0);
  border: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
  font-size: var(--fs-body);
}
.model th, .model td {
  padding: 0.95rem var(--sp-4); text-align: start; vertical-align: top;
  border-bottom: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
}
.model tr:last-child > * { border-bottom: 0; }
.model th { font-weight: 600; color: var(--cream); }
.model thead th { font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.01em; }
.model thead th:nth-child(2) { color: var(--muted-fg); }
.model thead th:nth-child(3) { color: var(--accent-text); }
.model td { color: var(--muted-fg); }
.model td:nth-child(3) { color: var(--cream); font-weight: 500;
  background: color-mix(in oklab, var(--gold) 7%, transparent); }
.model th:first-child { width: 34%; }
.model .model__none { opacity: 0.5; }
.model__wrap { overflow-x: auto; margin-bottom: var(--sp-4); }
@media (max-width: 560px) {
  .model th, .model td { padding: 0.75rem 0.85rem; font-size: var(--fs-sm); }
}

/* ==========================================================================
   Promesse (privacy) e schermata
   ========================================================================== */
.promises { list-style: none; display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.promises li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  font-weight: 500;
}
.promises li svg { width: 20px; height: 20px; flex: none; stroke: var(--accent-green); }

.device--single { width: min(100%, 300px); rotate: none; translate: none; }
[data-site="braintrainer"] .gallery { justify-content: center; }
@media (max-width: 560px) {
  [data-site="braintrainer"] .gallery { overflow: visible; }
  .device--single { width: min(100%, 280px); }
}

/* ==========================================================================
   Pagine documento (privacy e supporto)
   ========================================================================== */
.steps { list-style: none; counter-reset: s; display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.steps li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
}
.steps li::before {
  counter-increment: s; content: counter(s);
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
  background: var(--gold); color: var(--on-gold);
}
.doc__body ul:not(.doc__list) { list-style: none; display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.doc__body ul:not(.doc__list) li {
  padding: var(--sp-3); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  text-wrap: pretty;
}
.doc__body a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.doc__body strong { color: var(--cream); }


/* ---------- Guida rapida: le slide ---------- */
.slides{position:relative;margin-top:2.2rem}
.slides__track{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.25rem .25rem 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.slides__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(86vw,340px);scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;gap:1rem;background:var(--card,#161A2B);border:1px solid rgb(255 255 255 / .08);border-radius:22px;padding:1.1rem;color:#fff}
.slide__num{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:999px;background:var(--c,#5B4BD6);font-weight:700;font-size:.9rem;margin-bottom:.4rem}
.slide h3{font-family:"Unbounded",Inter,system-ui,sans-serif;font-size:1.05rem;line-height:1.25;margin:0 0 .35rem}
.slide p{margin:0;font-size:.95rem;line-height:1.5;color:rgb(255 255 255 / .78)}
.slide__shot{border-radius:18px;overflow:hidden;background:#000;aspect-ratio:620/1348;box-shadow:0 12px 30px rgb(0 0 0 / .45)}
.slide__shot img{display:block;width:100%;height:100%;object-fit:cover}
.slides__nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.5rem}
.slides__btn{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:999px;border:1px solid rgb(255 255 255 / .16);background:rgb(255 255 255 / .06);color:#fff;cursor:pointer}
.slides__btn svg{width:1.2rem;height:1.2rem}
.slides__btn:hover{background:rgb(255 255 255 / .12)}
.slides__dots{display:flex;gap:.4rem}
.slides__dots i{width:.45rem;height:.45rem;border-radius:999px;background:rgb(255 255 255 / .25)}
.slides__dots i.is-on{background:#fff}
@media (min-width:900px){.slide{flex-basis:300px}}