/* design.css: generato da _tools/design/sincronizza.py. Non si modifica: la fonte è _design/. */

/* ===== fonts ===== */
/* Caratteri ospitati sul sito (niente Google Fonts): Montserrat, Poppins, Chakra Petch, Rajdhani. Solo sottoinsieme latino. */
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("fonts/Montserrat-800-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 900; font-display: swap;
  src: url("fonts/Montserrat-800-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Montserrat-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Montserrat-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/Montserrat-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/Montserrat-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("fonts/Poppins-300-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/Poppins-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Poppins-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Poppins-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ChakraPetch-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ChakraPetch-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Rajdhani-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Rajdhani-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Rajdhani-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Rajdhani-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Identità Andrea Tarroni (tema andrea-identita): nomi propri, così il tema "andrea" e le pagine esistenti non cambiano.
   Fonte: Personal-Brand/brand/identity/guide/assets/fonts/ (Avenir Next LT Pro Bold e Heavy, Inter 400 e 600). */
@font-face { font-family: "Avenir Next Identita"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/AvenirNext-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Avenir Next Identita"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/AvenirNext-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Identita"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Inter-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Identita"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Inter-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== tokens ===== */
/* =====================================================================
   _design / tokens.css
   Unica fonte per colori, font, scale (testi, spaziature), forme e tempi.
   Valori ricavati dalla sales page di ZETA Evolution (ZETA-Evolution/sito/style.css), che resta congelata.
   Qui e in temi/*.css si scrivono i valori; i componenti usano SOLO queste variabili.
   Il tema di base è il Classico (blu ZETA); gli altri lo ridefiniscono (temi/).
   ===================================================================== */

:root {
  /* ---------- Colori ---------- */
  --bianco: #fff;
  --nero: #000;
  --bg: #131313;
  --bg-deep: #0b0b0c;
  --bg-raised: #1b1b1d;
  --text: #f3f5f8;
  --muted: #c8d5dc;
  --dim: #8a949b;
  --line: rgba(200, 213, 220, 0.14);
  --accent: #467ff7;
  --accent-deep: #06429e;
  --accent-soft: #9dbcff;
  --on-accent: var(--bianco);       /* testo sopra un fondo d'accento */
  --extra: var(--accent-soft);      /* secondo colore del tema (Cyberpunk: ciano) */
  --ok: #2ecc71;                    /* sì, spunta, interruttore acceso */
  --no: #ff3b3b;                    /* no, live, avviso */
  --oro: #e2b13c;                   /* voci riservate alla mentorship */
  --oro-chiaro: #f6dc8e;
  --oro-scuro: #a97b17;
  --oro-testo: #1a1204;             /* testo sopra l'oro */

  /* ---------- Font ---------- */
  --display: "Montserrat", system-ui, sans-serif;
  --body: "Poppins", system-ui, sans-serif;
  --peso-corpo: 300;
  --peso-titoli: 800;             /* h1-h3 (identità Andrea Tarroni: 700) */
  --tracking-titoli: -0.02em;     /* interlettera dei titoli (identità Andrea Tarroni: -0.045em) */

  /* ---------- Scala dei testi (da ZETA God, desktop 1280 / mobile 390) ---------- */
  --fs-display: clamp(3.2rem, 8.4vw, 7.5rem);              /* titolo della hero: 120 / 51 px (guida Andrea Tarroni) */
  --fs-h2: clamp(1.75rem, 0.74rem + 4.16vw, 4.06rem);       /* titoli di sezione: 65 / 28 px */
  --fs-h3: clamp(1.75rem, 1.2rem + 2.25vw, 3rem);           /* sottotitoli: 48 / 28 */
  --fs-btn: clamp(1.75rem, 1.53rem + 0.9vw, 2.25rem);       /* pulsanti grandi: 36 / 28 */
  --fs-lead: clamp(1.125rem, 0.96rem + 0.674vw, 1.5rem);    /* frasi in evidenza: 24 / 18 */
  --fs-body: clamp(1.125rem, 1.016rem + 0.449vw, 1.375rem); /* testo corrente: 22 / 18 */
  --fs-label: clamp(0.875rem, 0.66rem + 0.9vw, 1.375rem);   /* etichette dei numeri: 22 / 14 */
  --fs-small: clamp(0.875rem, 0.78rem + 0.25vw, 1rem);      /* note e didascalie: 16 / 14 */
  /* Misure grafiche (eccezioni ammesse dalla regola: cifre e prezzi) */
  --fs-numero: clamp(2.6rem, 7vw, 5.2rem);                  /* cifre del countdown */
  --fs-prezzo: clamp(3.4rem, 7vw, 5.6rem);                  /* prezzo di una scheda */

  /* ---------- Scala delle spaziature, a voce ---------- */
  --sp-xs: 0.5rem;                       /* minuscola: etichetta e campo; titoletto e testo sotto */
  --sp-s: 0.75rem;                       /* piccola: elementi dello stesso gruppo */
  --sp-m: 1.25rem;                       /* media: tra paragrafi, titolo e testo, padding delle schede */
  --sp-l: clamp(1.75rem, 3vw, 2.5rem);   /* grande: padding dei riquadri grandi, titolo e griglia sotto */
  --sp-xl: clamp(2.5rem, 5vw, 3.75rem); /* grandissima: tra blocchi diversi di una sezione */
  --sp-xxl: clamp(3.5rem, 8vw, 6rem);    /* enorme: distanza verticale tra sezioni */

  /* ---------- Layout ---------- */
  --gutter: clamp(1rem, 5vw, 4rem);
  --max: 77.5rem;

  /* ---------- Forma (i temi la cambiano) ---------- */
  --bordo: 1px;
  --r-s: 0.5rem;
  --r-m: 1rem;
  --r-l: 1.2rem;
  --r-btn: 1.6em;
  --r-pill: 999px;
  --taglio: none;                  /* angoli tagliati (Cyberpunk): clip-path dei riquadri */
  --tracking-etichetta: 0.6em;    /* interlettera di sopratitoli ed etichette (Cyberpunk: più stretta) */
  --maiuscole: none;               /* titoli e pulsanti in maiuscolo (Cyberpunk) */

  /* ---------- Tempi ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur-s: 0.25s;
  --dur-m: 0.5s;
  --dur-l: 0.85s;

  /* ---------- Carattere del movimento (ogni tema sceglie il suo; vedi movimento.css) ---------- */
  --anim-btn-hover: btn-rimbalzo 0.55s var(--ease) 1;   /* all'hover di un bottone */
  --anim-evidenza: sheen 3.2s ease-in-out infinite;      /* parole in evidenza */
  --anim-titolo: none;                                   /* titolo che "scatta" (glitch) */
  --btn-testo-hover: none;                               /* sdoppiamento del testo all'hover */
}

/* Valori derivati dal colore d'accento: stanno su :root e su ogni elemento con data-tema,
   così un tema annidato dentro un altro (catalogo) li ricalcola con i propri colori. */
:root,
[data-tema] {
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --btn-ombra: 0 0 0 0 var(--accent-glow), 0 0.6rem 2.5rem -0.6rem var(--accent-glow);
  --btn-ombra-hover: 0 0 0 0.4rem color-mix(in srgb, var(--accent) 15%, transparent), 0 1rem 3rem -0.6rem var(--accent-glow);
  /* Parole in evidenza (Classico): sfumatura blu → azzurro con un riflesso bianco inclinato che passa */
  --evid-sfondo:
    linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--bianco) 50%, transparent) 50%, transparent 60%) 100% 0 / 300% 100% repeat-y,
    linear-gradient(95deg, var(--accent) 0%, var(--accent-soft) 100%) 0 0 / 100% 100% repeat-y;
  --evid-colore: transparent;
  --evid-corsivo: italic;
  --evid-peso: 900;
  --evid-pad: 0.2em 0.08em 0.1em 0;
  --evid-clip: text;
  /* Bottoni */
  --btn-sfondo: var(--accent);          /* può essere un gradiente (identità Andrea Tarroni) */
  --btn-bordo: var(--accent);
  --btn-bg-hover: var(--accent);
  --btn-ghost-bg: transparent;
  --btn-ghost-fg: var(--text);
  --btn-ghost-bordo: color-mix(in srgb, var(--text) 35%, transparent);
  --btn-chiaro-bg: var(--bianco);
  --btn-chiaro-fg: var(--accent-deep);
  --btn-chiaro-bg-hover: var(--bianco);
  /* Fascia countdown: blu a tutta larghezza (Classico); giallo con righe diagonali (Cyberpunk) */
  --fascia-sfondo:
    radial-gradient(ellipse 60% 120% at 85% 50%, color-mix(in srgb, var(--bianco) 16%, transparent), transparent 60%),
    linear-gradient(115deg, var(--accent-deep) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 75%, var(--bianco)) 100%);
  --fascia-testo: var(--bianco);
  --fascia-testo-soft: color-mix(in srgb, var(--bianco) 80%, transparent);
  --fascia-cifre-ombra: 0 0.4rem 2rem color-mix(in srgb, var(--accent-deep) 55%, var(--nero));
  --fascia-righe: 0;                     /* altezza delle righe diagonali in cima alla fascia */
  --fascia-riflesso: color-mix(in srgb, var(--bianco) 12%, transparent);
  /* Interruttore sì/no e spunte */
  --spunta: var(--bianco);
}

@media (max-width: 700px) {
  :root { --r-btn: 1.4em; }
}

/* ===== temi/andrea-identita ===== */
/* Tema Andrea Tarroni · identità approvata il 28/10/2026. Attivo con data-tema="andrea-identita".
   Fonte unica delle scelte: Personal-Brand/brand/identity/STYLE.md; valori presi da guide/assets/identity-tokens.css,
   identity.css e layout.css. È una variante del tema "andrea": quello resta com'è (sito attuale) finché Andrea non approva il passaggio.
   Accenti: acqua (predefinito) oppure data-accento="pesca" | "lavanda" | "rosa", sullo stesso elemento o su un contenitore interno.
   Superfici P4/P6/Graphite e trattamenti del testo 02+CA6 e gradiente pieno: componenti/identita.css. */

/* ---------- Palette, font, forma, movimento ---------- */
[data-tema="andrea-identita"] {
  /* Palette dell'identità (STYLE.md, tabella Palette) */
  --at-ink: #08090B;
  --at-soft-white: #F5F5F7;
  --at-silver: #C8CBD0;
  --at-graphite: #202226;
  --at-aqua: #8EF0E5;
  --at-peach: #FFBC9B;
  --at-lavender: #BDB0F4;
  --at-pink: #F5B6D2;
  --at-mint: #B9DDC8;
  --at-butter: #F4DF9A;
  --at-aqua-deep: #117D90;
  --at-neon-blue: #5189FF;
  --at-neon-violet: #A887FF;

  /* Hero: luce blu-Graphite in alto a destra (guide/assets/identity.css) */
  --at-hero-glow: #202835;
  --at-hero-background: radial-gradient(ellipse at 72% 0%, var(--at-hero-glow) 0%, transparent 56%);

  /* Ruoli del sistema */
  --bg: var(--at-ink);
  --bg-deep: var(--at-ink);
  --bg-raised: #111316;
  --text: var(--at-soft-white);
  --muted: var(--at-silver);
  --dim: #A8ABB2;
  --line: #34363B;
  --at-muted-chiaro: #555A63;   /* testi secondari su fondo chiaro (Porcelain) */
  --accent: var(--at-aqua);
  --accent-deep: var(--at-aqua-deep);
  --accent-soft: var(--at-aqua);
  --on-accent: var(--at-ink);
  --extra: var(--at-lavender);

  --display: "Avenir Next Identita", "Avenir Next", "Avenir Next LT Pro", Avenir, system-ui, sans-serif;
  --body: "Inter Identita", "Inter", system-ui, sans-serif;
  --peso-corpo: 400;
  --peso-titoli: 700;
  --tracking-titoli: -0.045em;

  --r-s: 0.5rem;
  --r-m: 1rem;
  --r-l: 1.25rem;
  --r-btn: var(--r-pill);
  --taglio: none;
  --maiuscole: none;

  /* Movimento calmo, senza glitch: come il tema andrea */
  --anim-btn-hover: none;
  --anim-evidenza: none;
  --anim-titolo: none;
  --btn-testo-hover: none;

  /* Gradiente pieno del tema acqua (alternativa «More room to grow»): 115°, aqua → azzurro → blu → violetto → rosa */
  --at-spettro: linear-gradient(115deg, var(--at-aqua) 8%, #41CFE5 35%, var(--at-neon-blue) 64%, var(--at-neon-violet) 89%, var(--at-pink));
  --at-titolo: var(--at-spettro);
  --at-titolo-display: inline;
  --at-titolo-pad: 0;
  --at-titolo-margine: 0;

  /* Trattamento 02 con CA6 (parole grandi su una riga) */
  --at-scolpito: linear-gradient(180deg, #4BA2C9 0%, #11354F 24%, #121E3D 43%, #8775E8 66%, #C7B8FF 78%, #C7B8FF 100%);
  --at-scolpito-bordo: #72DDEB;
  --at-ca-ciano: #00EFFF;
  --at-ca-magenta: #FF58CE;
  --at-ca-opacita: 0.45;
  --at-ca-spostamento: 1px;

  /* Porcelain (P4 predefinita, P6 più chiara) */
  --at-porcellana-luce: #FFFFFF;
  --at-porcellana-1: #FFFFFF;
  --at-porcellana-2: #F1F2F5;
  --at-porcellana-3: #E2E4E9;
  --at-porcellana-4: #D1D4DB;
  --at-porcellana-p4: 18%;
  --at-porcellana-p6: 57.5%;
  --at-porcellana-bordo: #D9DCE3;
  --at-porcellana-riflesso: #FFFFFF;
  --at-porcellana-riflesso-basso: #FFFFFF90;
  --at-porcellana-ombra: 0 0.8rem 1.8rem -0.8rem #232B381A;

  /* Graphite */
  --at-grafite-luce: #414A5C66;
  --at-grafite-sfondo: linear-gradient(130deg, #292D35 0%, #171A21 38%, #080A0E 75%, #202631 100%);
  --at-grafite-bordo: #FFFFFF18;
  --at-grafite-riflesso: #FFFFFF19;
  --at-grafite-ombra: 0 1rem 3rem -0.8rem #00000099;

  --at-btn-riflesso: inset 0 1px 1px #FFFFFF99;
  --at-testo-ritagliato: transparent;   /* testo che mostra il gradiente ritagliato (fuori dal tema resta il colore normale) */
}

/* ---------- Accenti alternativi: un colore protagonista per composizione ---------- */
[data-tema="andrea-identita"][data-accento="pesca"],
[data-tema="andrea-identita"] [data-accento="pesca"] { --accent: var(--at-peach); }
[data-tema="andrea-identita"][data-accento="lavanda"],
[data-tema="andrea-identita"] [data-accento="lavanda"] { --accent: var(--at-lavender); }
[data-tema="andrea-identita"][data-accento="rosa"],
[data-tema="andrea-identita"] [data-accento="rosa"] { --accent: var(--at-pink); }

/* Nei tre pastello titolo e bottone condividono il gradiente a 110°; il titolo è un solo piano inline-block
   con 0.22em di protezione dei discendenti. */
[data-tema="andrea-identita"][data-accento]:not([data-accento="acqua"]),
[data-tema="andrea-identita"] [data-accento]:not([data-accento="acqua"]) {
  --accent-deep: color-mix(in srgb, var(--accent) 45%, var(--at-ink));
  --accent-soft: var(--accent);
  --at-titolo: initial;
  --at-titolo-display: inline-block;
  --at-titolo-pad: 0 0 0.22em;
  --at-titolo-margine: 0 0 -0.22em;
}
[data-tema="andrea-identita"] [data-accento="acqua"] {
  --accent: var(--at-aqua);
  --accent-deep: var(--at-aqua-deep);
  --accent-soft: var(--at-aqua);
  --at-titolo: var(--at-spettro);
  --at-titolo-display: inline;
  --at-titolo-pad: 0;
  --at-titolo-margine: 0;
}

/* ---------- Valori derivati dall'accento: ricalcolati anche dove si cambia accento ---------- */
[data-tema="andrea-identita"],
[data-tema="andrea-identita"] [data-accento] {
  --at-gradiente-accento: linear-gradient(110deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--at-neon-blue)));
  --at-gradiente-titolo: var(--at-titolo, var(--at-gradiente-accento));
  --btn-sfondo: var(--at-gradiente-accento);
  --btn-bg-hover: var(--at-gradiente-accento);
  --btn-bordo: transparent;
  --btn-ombra: var(--at-btn-riflesso);
  --btn-ombra-hover: var(--at-btn-riflesso), 0 0.6rem 1.9rem -0.6rem color-mix(in srgb, var(--accent) 45%, transparent);
  --btn-chiaro-fg: var(--at-ink);
  /* Parole in evidenza: gradiente pieno, statico. Per un titolo su due righe nei pastello usare .testo-spettro */
  --evid-sfondo: var(--at-gradiente-titolo);
  --evid-colore: transparent;
  --evid-corsivo: normal;
  --evid-peso: inherit;
  --evid-pad: 0 0 0.22em;
  --evid-clip: text;
}

/* ===== base ===== */
/* _design / base.css: reset, corpo della pagina, titoli, sopratitolo, parole in evidenza, comparsa al passaggio.
   Usa solo variabili di tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: var(--peso-corpo);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, canvas, svg { max-width: 100%; }
img, video, canvas { display: block; }

a { color: inherit; }
strong { font-weight: 600; color: var(--bianco); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: var(--peso-titoli);
  line-height: 1.05;
  letter-spacing: var(--tracking-titoli);
  margin: 0;
  text-transform: var(--maiuscole);
}

.titolo-sezione { font-size: var(--fs-h2); margin-block: 0 var(--sp-xl); }
.sottotitolo { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); color: var(--muted); }
.nota { font-size: var(--fs-small); color: var(--dim); }

/* Sopratitolo spaziato: firma tipografica di Accademia ZETA (Poppins leggero, tracking largo) */
.sopratitolo {
  margin: 0 0 var(--sp-m);
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase;
  color: var(--accent);
}
[data-tema="cyber"] .sopratitolo { color: var(--extra); }

.focusable:focus-visible,
.btn:focus-visible,
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.3em; }

/* Parole in evidenza: l'aspetto lo decide il tema con le variabili --evid-* (Classico: sfumatura con riflesso inclinato;
   Cyberpunk: evidenziatore giallo con glitch; Andrea: solo il colore d'accento) */
.evidenza {
  font-style: var(--evid-corsivo);
  font-weight: var(--evid-peso);
  padding: var(--evid-pad);
  color: var(--evid-colore);
  background: var(--evid-sfondo);
  -webkit-background-clip: var(--evid-clip);
  background-clip: var(--evid-clip);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: var(--anim-evidenza);
}

/* Comparsa al passaggio: l'elemento sale di poco e compare quando entra nello schermo (la classe .in la mette il JS) */
.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

[data-nascosto] { display: none !important; }

/* ===== movimento ===== */
/* _design / movimento.css
   Tutte le animazioni della libreria, in un posto solo. Ogni tema sceglie il suo "carattere" con le variabili
   --anim-* (vedi tokens.css e temi/): Cyberpunk = glitch, Classico = rimbalzo e riflesso, Andrea = movimento calmo.
   Con prefers-reduced-motion tutto si ferma, una volta sola, in fondo a questo file. */

/* ---------- Ingresso ---------- */
@keyframes sale { to { opacity: 1; transform: none; } }

/* ---------- Luce e riflessi (Classico e Andrea) ---------- */
@keyframes sheen {                    /* riflesso inclinato che attraversa una parola in evidenza */
  0%, 30% { background-position: 100% 0, 0 0; }
  70%, 100% { background-position: 0 0, 0 0; }
}
@keyframes bagliore-bottone {         /* striscia di luce che attraversa un bottone */
  0%, 35% { transform: translateX(-160%) skewX(-20deg); }
  75%, 100% { transform: translateX(380%) skewX(-20deg); }
}
@keyframes riflesso-fascia {          /* riga di luce che scorre sulla fascia */
  0%, 30% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}
@keyframes impulso {                  /* pallino che pulsa (revisioni live) */
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--no) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.9rem transparent; }
}
@keyframes lampeggia { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rimbalza-giu {             /* freccia che invita a continuare */
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.6rem); }
}

/* ---------- Rimbalzo del bottone (Classico) ---------- */
@keyframes btn-rimbalzo {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(-0.55rem) scale(0.98, 1.04); }
  55%  { transform: translateY(0.06rem) scale(1.04, 0.94); }
  78%  { transform: translateY(-0.25rem) scale(0.99, 1.02); }
  100% { transform: translateY(-0.12rem) scale(1, 1); }
}

/* ---------- Glitch (Cyberpunk) ---------- */
@keyframes glitch {                   /* titolo: scatti rari */
  0%, 92%, 100% { transform: none; clip-path: none; }
  93% { transform: translate(-0.35rem, 0.1rem); clip-path: inset(10% 0 55% 0); }
  95% { transform: translate(0.3rem, -0.1rem); clip-path: inset(60% 0 8% 0); }
  97% { transform: translate(-0.2rem, 0); clip-path: inset(30% 0 35% 0); }
}
@keyframes glitch-ingresso {          /* parole in evidenza: raffica all'inizio, poi scatti rari */
  0%   { transform: translate(-0.35rem, 0.1rem); clip-path: inset(10% 0 55% 0); }
  3%   { transform: translate(0.3rem, -0.1rem); clip-path: inset(60% 0 8% 0); }
  6%   { transform: translate(-0.2rem, 0); clip-path: inset(30% 0 35% 0); }
  9%   { transform: translate(0.25rem, 0.05rem); clip-path: inset(0 0 60% 0); }
  12%, 92%, 100% { transform: none; clip-path: none; }
  93% { transform: translate(-0.35rem, 0.1rem); clip-path: inset(10% 0 55% 0); }
  95% { transform: translate(0.3rem, -0.1rem); clip-path: inset(60% 0 8% 0); }
  97% { transform: translate(-0.2rem, 0); clip-path: inset(30% 0 35% 0); }
}
/* Bottone: solo spostamenti e sdoppiamento del testo, mai clip-path (toglierebbe la parte cliccabile) */
@keyframes btn-glitch {
  0%   { transform: translate(-0.2rem, 0.06rem); text-shadow: 5px 0 0 var(--no), -5px 0 0 var(--extra); }
  20%  { transform: translate(0.2rem, -0.06rem); text-shadow: -4px 0 0 var(--no), 4px 0 0 var(--extra); }
  40%  { transform: translate(-0.12rem, 0);      text-shadow: 3px 1px 0 var(--no), -3px -1px 0 var(--extra); }
  60%  { transform: translate(0.2rem, 0.06rem);  text-shadow: -5px 0 0 var(--no), 5px 0 0 var(--extra); }
  80%  { transform: translate(-0.06rem, 0);      text-shadow: 2px 0 0 var(--no), -2px 0 0 var(--extra); }
  100% { transform: translateY(-0.12rem); }
}

/* ---------- Timeline: medaglia e scintille (tappe con un bonus) ---------- */
@keyframes medaglia {
  0% { transform: perspective(90px) rotateY(0deg); background-image: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r)); background-size: 100% 100%; background-position: 0 0; clip-path: none; }
  2.5% { transform: perspective(90px) rotateY(90deg); background-image: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r)); background-size: 100% 100%; background-position: 0 0; clip-path: none; }
  2.51% { transform: perspective(90px) rotateY(-90deg); background-image: linear-gradient(110deg, var(--oro) 38%, var(--oro-chiaro) 50%, var(--oro) 62%); background-size: 300% 100%; background-position: 0% 0; clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  5%, 8% { transform: perspective(90px) rotateY(0deg); background-image: linear-gradient(110deg, var(--oro) 38%, var(--oro-chiaro) 50%, var(--oro) 62%); background-size: 300% 100%; background-position: 0% 0; clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  17%, 30% { transform: perspective(90px) rotateY(0deg); background-image: linear-gradient(110deg, var(--oro) 38%, var(--oro-chiaro) 50%, var(--oro) 62%); background-size: 300% 100%; background-position: 100% 0; clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  32.5% { transform: perspective(90px) rotateY(90deg); background-image: linear-gradient(110deg, var(--oro) 38%, var(--oro-chiaro) 50%, var(--oro) 62%); background-size: 300% 100%; background-position: 100% 0; clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  32.51% { transform: perspective(90px) rotateY(-90deg); background-image: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r)); background-size: 100% 100%; background-position: 0 0; clip-path: none; }
  35%, 100% { transform: perspective(90px) rotateY(0deg); background-image: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r)); background-size: 100% 100%; background-position: 0 0; clip-path: none; }
}
@keyframes scintilla-a {
  0%, 8% { opacity: 0; transform: scale(0) rotate(0deg); }
  11% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  15% { opacity: 0; transform: scale(0.2) rotate(90deg); }
  21% { opacity: 1; transform: scale(0.9) rotate(135deg); }
  26%, 100% { opacity: 0; transform: scale(0) rotate(180deg); }
}
@keyframes scintilla-b {
  0%, 12% { opacity: 0; transform: scale(0) rotate(0deg); }
  15% { opacity: 1; transform: scale(1.2) rotate(-45deg); }
  19% { opacity: 0; transform: scale(0.2) rotate(-90deg); }
  25% { opacity: 1; transform: scale(0.9) rotate(-135deg); }
  30%, 100% { opacity: 0; transform: scale(0) rotate(-180deg); }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ===== componenti/bottone ===== */
/* Bottone. Varianti: .btn--ghost (a contorno), .btn--chiaro (su fasce colorate), .btn--oro (mentorship), .btn--s (piccolo).
   data-glint: striscia di luce che attraversa il bottone. L'effetto all'hover lo decide il tema (--anim-btn-hover). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-btn);
  text-decoration: none;
  text-transform: var(--maiuscole);
  letter-spacing: 0.01em;
  color: var(--on-accent);
  background: var(--btn-sfondo);
  padding: 0.7em 1.6em;
  line-height: 1.15;
  text-align: center;
  border-radius: var(--r-btn);
  border: var(--bordo) solid var(--btn-bordo);
  box-shadow: var(--btn-ombra);
  clip-path: var(--taglio);
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s), color var(--dur-s);
}
/* L'area dell'hover è più grande del bottone, così il rimbalzo non lo sposta via da sotto il mouse */
.btn::before { content: ""; position: absolute; inset: -0.4em -0.2em; }
.btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-0.12rem);
  box-shadow: var(--btn-ombra-hover);
  animation: var(--anim-btn-hover);
  text-shadow: var(--btn-testo-hover);
}

.btn--s { font-size: var(--fs-small); padding: 0.7em 1.3em; letter-spacing: 0.08em; }

.btn--ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-fg); border-color: var(--btn-ghost-bordo); box-shadow: none; }
.btn--ghost:hover { background: var(--btn-ghost-bg); border-color: var(--btn-ghost-fg); box-shadow: none; }

.btn--chiaro { background: var(--btn-chiaro-bg); border-color: var(--btn-chiaro-bg); color: var(--btn-chiaro-fg); box-shadow: 0 0.9rem 2.5rem -0.8rem color-mix(in srgb, var(--nero) 55%, transparent); }
.btn--chiaro:hover { background: var(--btn-chiaro-bg-hover); color: var(--btn-chiaro-fg); }

.btn--oro {
  background: linear-gradient(100deg, var(--oro-scuro), var(--oro) 40%, var(--oro-chiaro) 75%, var(--oro));
  border-color: var(--oro);
  color: var(--oro-testo);
}
.btn--oro:hover { background: var(--oro-chiaro); }

.btn[data-glint] { overflow: hidden; isolation: isolate; }
.btn[data-glint]::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--bianco) 75%, transparent) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-20deg);
  animation: bagliore-bottone 3.6s ease-in-out infinite;
}

/* Riga sotto un bottone che invita a continuare a leggere */
.btn-nota { display: block; margin-top: var(--sp-s); font-size: var(--fs-small); color: var(--dim); text-align: center; }

/* ===== componenti/card-girevoli ===== */
/* Card che girano al clic (problema davanti, come lo affrontiamo dietro). Griglia .card-girevoli, ogni card è .card-girevole
   con data-componente="card-girevole": due facce (--fronte, --retro) dentro .card-girevole__giro. Il retro è oro, con un bagliore dietro. */
.card-girevoli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-m); align-items: stretch; }
@media (max-width: 900px) { .card-girevoli { grid-template-columns: minmax(0, 1fr); } }

.card-girevoli__suggerimento { margin: 0 0 var(--sp-m); text-align: center; font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.card-girevoli__tocco { display: none; }
@media (hover: none) { .card-girevoli__mouse { display: none; } .card-girevoli__tocco { display: inline; } }

.card-girevole { position: relative; perspective: 1400px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.card-girevole__giro { position: relative; z-index: 1; display: grid; height: 100%; transform-style: preserve-3d; transition: transform var(--dur-l) var(--ease); }
.card-girevole.is-girata .card-girevole__giro { transform: rotateY(180deg); }
@media (hover: hover) { .card-girevole:not(.is-girata):hover .card-girevole__giro { transform: rotateY(-9deg) translateY(-0.25rem); } }

.card-girevole__faccia {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
  padding: var(--sp-l);
  border: var(--bordo) solid var(--line);
  border-radius: var(--r-s);
  background: var(--bg-raised);
  clip-path: var(--taglio);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-girevole__faccia--fronte {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--no) 22%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--no) 7%, transparent), transparent 45%), var(--bg-raised);
  border-color: color-mix(in srgb, var(--no) 45%, var(--line));
  box-shadow: 0 0 2.5rem -1.6rem var(--no);
}
.card-girevole__faccia--retro {
  transform: rotateY(180deg);
  background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--oro) 22%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--oro) 7%, transparent), transparent 45%), var(--bg-raised);
  border-color: var(--oro);
  box-shadow: inset 0 0 0 1px var(--oro), inset 0 0 1.75rem -0.4rem color-mix(in srgb, var(--oro) 50%, transparent);
}
[data-tema="cyber"] .card-girevole__faccia--fronte { background: linear-gradient(180deg, color-mix(in srgb, var(--no) 14%, transparent), var(--bg-raised) 45%), var(--bg-raised); }
[data-tema="cyber"] .card-girevole__faccia--retro { background: linear-gradient(180deg, color-mix(in srgb, var(--oro) 12%, transparent), var(--bg-raised) 45%), var(--bg-raised); }

/* Bagliore dorato dietro la card girata (elemento a parte: nel Cyberpunk la faccia è ritagliata) */
.card-girevole::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--oro); filter: blur(22px); opacity: 0; transform: scale(0.97); transition: opacity 0.4s ease 0.3s; }
.card-girevole.is-girata::before { opacity: 0.6; }

.card-girevole__ico { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.card-girevole__ico--x { stroke: var(--no); }
.card-girevole__ico--v { stroke: color-mix(in srgb, var(--oro) 35%, var(--dim)); transition: stroke 0.5s ease 0.45s, filter 0.5s ease 0.45s; }
.card-girevole.is-girata .card-girevole__ico--v { stroke: var(--oro); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--oro) 70%, transparent)); }

.card-girevole__domanda { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-lead); line-height: 1.25; color: var(--text); text-wrap: balance; text-transform: var(--maiuscole); }
.card-girevole__testo { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--muted); }
.card-girevole__testo strong { color: var(--text); }
.card-girevole:focus-visible .card-girevole__faccia { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Animazioni ridotte: niente rotazione, le due facce si scambiano con una dissolvenza */
@media (prefers-reduced-motion: reduce) {
  .card-girevole__giro, .card-girevole.is-girata .card-girevole__giro, .card-girevole:not(.is-girata):hover .card-girevole__giro { transform: none; transition: none; }
  .card-girevole__faccia--retro { transform: none; opacity: 0; visibility: hidden; }
  .card-girevole.is-girata .card-girevole__faccia--fronte { opacity: 0; visibility: hidden; }
  .card-girevole.is-girata .card-girevole__faccia--retro { opacity: 1; visibility: visible; }
}

/* ===== componenti/dialogo ===== */
/* Finestra di dialogo (<dialog class="dialogo" id="...">): scelta tra due o più azioni.
   Si apre da un elemento con data-componente="dialogo" e data-apre="<id>"; si chiude con la X o cliccando fuori. */
.dialogo {
  width: min(92vw, 32.5rem);
  padding: var(--sp-l);
  border: var(--bordo) solid var(--line);
  border-radius: var(--r-m);
  background: var(--bg-raised);
  color: var(--text);
  text-align: center;
  clip-path: var(--taglio);
}
.dialogo::backdrop { background: color-mix(in srgb, var(--nero) 70%, transparent); }
.dialogo h3 { margin: 0 0 var(--sp-s); font-size: var(--fs-lead); }
.dialogo__sub { margin: 0 0 var(--sp-l); color: var(--muted); font-size: var(--fs-small); }
.dialogo__azioni { display: flex; flex-direction: column; gap: var(--sp-s); }
.dialogo__azione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 4rem;
  border-radius: var(--r-s);
  text-decoration: none;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--on-accent);
  background: var(--accent);
  transition: transform var(--dur-s) var(--ease), filter var(--dur-s);
}
.dialogo__azione:hover { transform: translateY(-0.12rem); filter: brightness(1.08); }
.dialogo__nota { margin: var(--sp-s) 0 0; color: var(--dim); font-size: var(--fs-small); }
.dialogo__chiudi {
  position: absolute;
  top: var(--sp-xs);
  right: var(--sp-s);
  background: none;
  border: 0;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1;
  cursor: pointer;
}
.dialogo__chiudi:hover { color: var(--text); }

/* ===== componenti/faq ===== */
/* Domande frequenti: elenco di <details class="faq-voce"> dentro .faq. */
.faq { max-width: 57.5rem; margin-inline: auto; }

.faq-voce { border-top: var(--bordo) solid var(--line); }
.faq-voce:last-of-type { border-bottom: var(--bordo) solid var(--line); }

.faq-voce summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--sp-m) 3rem var(--sp-m) 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-lead);
  text-transform: var(--maiuscole);
}
.faq-voce summary::-webkit-details-marker { display: none; }
.faq-voce summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-right: 0.12rem solid var(--accent);
  border-bottom: 0.12rem solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-s) var(--ease);
}
.faq-voce[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-voce p { margin: 0 0 var(--sp-m); color: var(--muted); max-width: 46rem; }

/* ===== componenti/fascia-countdown ===== */
/* Fascia countdown a tutta larghezza. Markup:
   <section class="fascia-cd" data-componente="countdown" data-fine="2026-11-01T23:59:00+01:00">
     <div class="wrap fascia-cd__dentro">
       <div><p class="fascia-cd__titolo">...</p>
         <div class="countdown"><div><span data-cd="d">00</span><small>giorni</small></div> ... h, m, s</div>
         <p class="fascia-cd__chiuso" hidden>...</p></div>
       <a class="btn btn--chiaro" href="#">...</a>
     </div>
   </section>
   Classico: blu con riflesso di luce che scorre. Cyberpunk: giallo con righe diagonali e cifre con ombra rossa. */
.fascia-cd {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-xl);
  background: var(--fascia-sfondo);
  color: var(--fascia-testo);
}

/* Righe diagonali in cima (altezza 0 nel Classico) */
.fascia-cd::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--fascia-righe);
  background: repeating-linear-gradient(-45deg, var(--nero) 0 10px, transparent 10px 20px);
  opacity: 0.85;
}

/* Riga di luce che scorre piano, come un riflesso: l'unico movimento della fascia */
.fascia-cd::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, var(--fascia-riflesso) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: riflesso-fascia 6s ease-in-out infinite;
  pointer-events: none;
}

.fascia-cd__dentro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-l) var(--sp-xl);
}

.fascia-cd__titolo {
  margin: 0 0 var(--sp-xs);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-lead);
  text-transform: var(--maiuscole);
  color: var(--fascia-testo);
}
.fascia-cd__chiuso { margin: 0; font-family: var(--display); font-weight: 800; font-size: var(--fs-lead); }

/* Quattro colonne della stessa larghezza: numeri equidistanti e centrati sulle etichette */
.countdown {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  max-width: 100%;
  gap: var(--sp-m);
  margin: 0;
}
.countdown div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.countdown span {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--fs-numero);
  line-height: 1;
  letter-spacing: -0.04em;
  padding-right: 0.04em; /* compensa l'interlettera negativa dopo l'ultima cifra */
  font-variant-numeric: tabular-nums;
  color: var(--fascia-testo);
  text-shadow: var(--fascia-cifre-ombra);
}
.countdown small {
  margin-top: var(--sp-xs);
  padding-left: 0.4em; /* compensa l'interlettera dopo l'ultima lettera */
  font-size: var(--fs-small);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--fascia-testo-soft);
}

@media (max-width: 700px) {
  .fascia-cd__dentro { flex-direction: column; align-items: stretch; text-align: center; }
  .fascia-cd .countdown { margin-inline: auto; }
  .countdown small { letter-spacing: 0.12em; padding-left: 0.12em; }
}

.countdown[hidden] { display: none; }

/* ===== componenti/fasi-scroll ===== */
/* Fasi che avanzano con lo scroll: la striscia con i nodi si ferma al centro dello schermo e scorrendo (o cliccando) avanza.
   Markup: <div class="fasi-scroll" data-componente="fasi-scroll"><div class="fasi-scroll__fisso">
             <ol class="fasi-scroll__nodi"><li class="fasi-scroll__nodo" tabindex="0"><span class="fasi-scroll__n"></span></li>...</ol>
             <div class="fasi-scroll__pannelli"><div class="fasi-scroll__pannello"><h3 class="fasi-scroll__titolo">...</h3><p>...</p></div>...</div>
           </div></div> */
.fasi-scroll { --k: 0; position: relative; }
/* Lo spazio di scorrimento sta dentro il contenitore (non come padding): solo così la striscia resta ferma finché dura */
.fasi-scroll::after { content: ""; display: block; height: 110vh; height: 110svh; }
.fasi-scroll__fisso { position: sticky; top: 30vh; display: flex; flex-direction: column; gap: var(--sp-l); }

.fasi-scroll__nodi { position: relative; display: flex; justify-content: space-between; align-self: center; width: min(100%, 35rem); list-style: none; margin: 0; padding: 0; counter-reset: fase; }
.fasi-scroll__nodi::before, .fasi-scroll__nodi::after { content: ""; position: absolute; top: calc(1.6rem - 1px); left: 1.6rem; height: 2px; }
.fasi-scroll__nodi::before { right: 1.6rem; background: var(--line); }
.fasi-scroll__nodi::after { width: calc((100% - 3.2rem) * var(--k)); background: var(--accent); box-shadow: 0 0 0.9rem var(--accent-glow); transition: width var(--dur-m) var(--ease); }

.fasi-scroll__nodo { position: relative; z-index: 1; width: 3.2rem; height: 3.2rem; counter-increment: fase; cursor: pointer; outline-offset: 0.4rem; }
.fasi-scroll__n {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--bg);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--dim);
  transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.fasi-scroll__n::before { content: counter(fase, decimal-leading-zero); }
.fasi-scroll__nodo.done .fasi-scroll__n { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0.7rem var(--accent-glow); }
.fasi-scroll__nodo.on .fasi-scroll__n { border-color: var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 1.4rem var(--accent-glow); transform: scale(1.12); }
.fasi-scroll__nodo:hover .fasi-scroll__n { border-color: var(--accent); }

.fasi-scroll__pannelli { display: grid; align-self: center; width: min(100%, 35rem); }
.fasi-scroll__pannello {
  grid-area: 1 / 1;
  padding-left: var(--sp-m);
  border-left: 3px solid var(--accent);
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s var(--ease);
}
.fasi-scroll__pannello.on { opacity: 1; transform: none; pointer-events: auto; }
.fasi-scroll__titolo { margin: 0 0 var(--sp-s); font-size: var(--fs-lead); line-height: 1.2; overflow-wrap: anywhere; }
.fasi-scroll__pannello p { margin: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .fasi-scroll__pannello p { font-size: var(--fs-body); } }

@media (prefers-reduced-motion: reduce) {
  .fasi-scroll::after { display: none; }
  .fasi-scroll__fisso { position: static; }
  .fasi-scroll__n, .fasi-scroll__nodi::after, .fasi-scroll__pannello { transition: none; }
}

/* ===== componenti/identita ===== */
/* Identità Andrea Tarroni: superfici e trattamenti del testo approvati il 28/10/2026 (Personal-Brand/brand/identity/STYLE.md).
   Hanno senso solo con data-tema="andrea-identita", che ne definisce i valori (--at-*); negli altri temi restano spenti (il testo resta leggibile).
   .superficie--porcellana (P4, predefinita) · .superficie--porcellana-chiara (P6, solo per scelta esplicita) · .superficie--grafite
   .testo-ca6 > .testo-scolpito (trattamento 02 con CA6: parole grandi su UNA riga, mai corpo, bottoni o tutti i titoli)
   .testo-spettro (gradiente pieno «More room to grow»: tema acqua a 115°, pastello a 110° come il bottone) */

/* ---------- Superfici ---------- */
.superficie--porcellana,
.superficie--porcellana-chiara {
  --at-mix: var(--at-porcellana-p4);
  color: var(--at-ink);
  background:
    radial-gradient(ellipse at 35% 12%, var(--at-porcellana-luce) 0%, transparent 63%),
    linear-gradient(130deg,
      color-mix(in srgb, var(--at-porcellana-1), var(--bianco) var(--at-mix)) 0%,
      color-mix(in srgb, var(--at-porcellana-2), var(--bianco) var(--at-mix)) 44%,
      color-mix(in srgb, var(--at-porcellana-3), var(--bianco) var(--at-mix)) 76%,
      color-mix(in srgb, var(--at-porcellana-4), var(--bianco) var(--at-mix)) 100%);
  border: var(--bordo) solid var(--at-porcellana-bordo);
  box-shadow: inset 1px 1px 1px var(--at-porcellana-riflesso), inset -1px -1px 0 var(--at-porcellana-riflesso-basso), var(--at-porcellana-ombra);
}
.superficie--porcellana-chiara { --at-mix: var(--at-porcellana-p6); }
.superficie--porcellana strong,
.superficie--porcellana-chiara strong { color: inherit; }
/* Su chiaro i testi secondari e il sopratitolo passano ai toni scuri dell'identità */
.superficie--porcellana :is(.lead, .nota),
.superficie--porcellana-chiara :is(.lead, .nota) { color: var(--at-muted-chiaro); }
.superficie--porcellana .sopratitolo,
.superficie--porcellana-chiara .sopratitolo { color: var(--accent-deep); }

.superficie--grafite {
  color: var(--at-soft-white);
  background: radial-gradient(ellipse at 80% 0%, var(--at-grafite-luce) 0%, transparent 60%), var(--at-grafite-sfondo);
  border: var(--bordo) solid var(--at-grafite-bordo);
  box-shadow: inset 1px 1px 1px var(--at-grafite-riflesso), var(--at-grafite-ombra);
}

.superficie--porcellana,
.superficie--porcellana-chiara,
.superficie--grafite {
  border-radius: var(--r-l);
  padding: var(--sp-xl);
}
@media (max-width: 760px) {
  .superficie--porcellana,
  .superficie--porcellana-chiara,
  .superficie--grafite { padding: var(--sp-l); }
}

/* ---------- Trattamento 02 con CA6 ---------- */
/* Riempimento verticale con bordino ciano centrato sul contorno; il padding protegge g e y nel ritaglio. */
.testo-scolpito {
  display: inline-block;
  background-image: var(--at-scolpito);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--at-testo-ritagliato, inherit);
  -webkit-text-stroke: 0.012em var(--at-scolpito-bordo);
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
/* CA6: due contorni ciano e magenta spostati di ∓1 px, opacità 45%, senza sfocatura, statici.
   Il testo va ripetuto in data-text: <span class="testo-ca6" data-text="yours"><span class="testo-scolpito">yours</span></span> */
.testo-ca6 {
  display: inline-block;
  position: relative;
  isolation: isolate;
}
.testo-ca6 > .testo-scolpito { position: relative; z-index: 1; }
.testo-ca6::before,
.testo-ca6::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: pre-line;
  color: transparent;
  -webkit-text-stroke: 0.018em var(--at-ca-ciano);
  opacity: var(--at-ca-opacita);
  transform: translateX(calc(-1 * var(--at-ca-spostamento)));
  pointer-events: none;
  z-index: 2;
}
.testo-ca6::after {
  -webkit-text-stroke-color: var(--at-ca-magenta);
  transform: translateX(var(--at-ca-spostamento));
}

/* ---------- Gradiente pieno ---------- */
.testo-spettro {
  display: var(--at-titolo-display);
  padding: var(--at-titolo-pad);
  margin: var(--at-titolo-margine);
  background-image: var(--at-gradiente-titolo);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--at-testo-ritagliato, inherit);
  -webkit-text-stroke: 0;
}

/* ===== componenti/lista-spunte ===== */
/* Elenco con spunte (.lista-spunte) e con croci (.lista-spunte--no). Spunta e croce sono disegnate in CSS. */
.lista-spunte { list-style: none; margin: 0; padding: 0; max-width: 52rem; }

.lista-spunte li {
  position: relative;
  padding: 1.1rem 0 1.1rem 3rem;
  border-top: var(--bordo) solid var(--line);
  color: var(--muted);
}
.lista-spunte li:first-child { border-top: 0; }

.lista-spunte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-s);
  background: var(--ok);
  box-shadow: 0 0 1.1rem color-mix(in srgb, var(--ok) 45%, transparent);
}

.lista-spunte li::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 1.5rem;
  width: 0.45rem;
  height: 0.8rem;
  border-right: 0.16rem solid var(--spunta);
  border-bottom: 0.16rem solid var(--spunta);
  transform: rotate(45deg);
}

.lista-spunte--no li::before { background: transparent; border: 0.12rem solid var(--no); box-shadow: none; }
.lista-spunte--no li::after {
  left: 0.3rem;
  top: 1.55rem;
  width: 1rem;
  height: 1rem;
  border: 0;
  transform: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--no) calc(50% - 1px), var(--no) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--no) calc(50% - 1px), var(--no) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ===== componenti/pila-card ===== */
/* Pila di card: scorrendo, ogni card si ferma in alto e la successiva le scivola sopra (position: sticky).
   Markup: <div class="pila-card"><article class="pila-card__card" style="--i:0"> <div class="pila-card__testo">...</div>
           <div class="pila-card__visivo">...</div></article> ... --i:1, --i:2 </div>
   La colonna visiva ospita un'immagine o una scena; sfondo con alone nel colore d'accento. */
.pila-card { padding-bottom: var(--sp-xl); }

.pila-card__card {
  position: sticky;
  top: calc(var(--sp-xxl) + var(--i, 0) * var(--sp-m));
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  min-height: min(68vh, 35rem);
  margin-bottom: var(--sp-xl);
  overflow: hidden;
  border: var(--bordo) solid var(--line);
  border-radius: var(--r-l);
  clip-path: var(--taglio);
  background: var(--bg-raised);
  box-shadow: 0 -1.5rem 3.75rem -1.9rem color-mix(in srgb, var(--nero) 90%, transparent);
}
.pila-card__card:last-child { margin-bottom: 0; }

.pila-card__testo { padding: var(--sp-l); align-self: center; }
.pila-card__testo h3 { margin: 0 0 var(--sp-m); font-size: var(--fs-h3); line-height: 1.05; text-wrap: balance; }
.pila-card__testo p { margin: 0 0 var(--sp-s); font-size: var(--fs-body); color: var(--muted); }
.pila-card__testo strong { color: var(--text); }

.pila-card__numero {
  display: block;
  margin-bottom: var(--sp-xs);
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--accent);
}
.pila-card__numero small { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; color: var(--dim); }

.pila-card__etichette { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin: var(--sp-m) 0 0; padding: 0; list-style: none; }
.pila-card__etichette li {
  padding: 0.25em 0.9em;
  border: var(--bordo) solid var(--accent);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
[data-tema="cyber"] .pila-card__etichette li { border-radius: 0; }

.pila-card__visivo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, var(--accent-glow), transparent 70%),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--accent-deep) 60%, transparent), transparent 60%),
    var(--bg-deep);
}
.pila-card__visivo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .pila-card__card { grid-template-columns: minmax(0, 1fr); min-height: 0; top: calc(var(--sp-xl) + var(--i, 0) * var(--sp-s)); }
  .pila-card__visivo { min-height: 12rem; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .pila-card__card { position: static; } }

/* ===== componenti/scheda-girevole ===== */
/* Scheda girevole con interruttore sì/no ("Per chi è" / "Non è per te"). Le due facce stanno nella stessa cella,
   quindi la scheda ha l'altezza della più alta. Markup nel catalogo; il JS (data-componente="scheda-girevole") gira la scheda. */
.scheda-girevole { --ok-glow: color-mix(in srgb, var(--ok) 45%, transparent); perspective: 1800px; max-width: 56rem; margin-inline: auto; }

.scheda-girevole__interruttore { display: flex; align-items: center; justify-content: center; gap: var(--sp-m); margin-bottom: var(--sp-m); }

.scheda-girevole__ico { width: 2.4rem; height: 2.4rem; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0.45; transition: opacity var(--dur-m) ease, transform var(--dur-m) ease; }
.scheda-girevole__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scheda-girevole__ico .pieno { fill: currentColor; stroke: none; }
.scheda-girevole__ico--si { color: var(--ok); }
.scheda-girevole__ico--no { color: var(--no); }
.scheda-girevole:not(.is-girata) .scheda-girevole__ico--si,
.scheda-girevole.is-girata .scheda-girevole__ico--no { opacity: 1; transform: scale(1.12); }

.scheda-girevole__switch {
  position: relative;
  width: 5.4rem;
  height: 2.7rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  background: var(--ok);
  box-shadow: 0 0 1.4rem -0.25rem var(--ok), inset 0 0 0 2px color-mix(in srgb, var(--bianco) 18%, transparent);
  transition: background var(--dur-m) ease, box-shadow var(--dur-m) ease;
}
.scheda-girevole__switch .pomello {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--bianco);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--nero) 45%, transparent);
  transition: transform var(--dur-m) var(--ease);
}
.scheda-girevole.is-girata .scheda-girevole__switch { background: var(--no); box-shadow: 0 0 1.4rem -0.25rem var(--no), inset 0 0 0 2px color-mix(in srgb, var(--bianco) 18%, transparent); }
.scheda-girevole.is-girata .scheda-girevole__switch .pomello { transform: translateX(2.7rem); }
.scheda-girevole__switch:focus-visible, .scheda-girevole__ico:focus-visible { outline: 2px solid var(--text); outline-offset: 0.3em; }

.scheda-girevole__giro { display: grid; transform-style: preserve-3d; transition: transform var(--dur-l) var(--ease); }
.scheda-girevole.is-girata .scheda-girevole__giro { transform: rotateY(180deg); }

.scheda-girevole__faccia {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-l);
  border: var(--bordo) solid var(--line);
  border-radius: var(--r-s);
  background: var(--bg-raised);
  clip-path: var(--taglio);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.scheda-girevole__faccia--si { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 3rem -1.5rem var(--accent-glow); }
.scheda-girevole__faccia--no { transform: rotateY(180deg); border-color: color-mix(in srgb, var(--no) 55%, var(--line)); box-shadow: 0 0 3rem -1.5rem var(--no); }
.scheda-girevole__titolo { margin: 0 0 var(--sp-m); font-family: var(--display); font-weight: 700; font-size: var(--fs-lead); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); }
.scheda-girevole__faccia .lista-spunte { max-width: none; }
.scheda-girevole__faccia .lista-spunte:not(.lista-spunte--no) li::before { background: var(--ok); }

/* Frase che introduce la scheda */
.scheda-girevole__intro { margin: 0 auto var(--sp-l); max-width: 56rem; text-align: center; font-family: var(--display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.2; color: var(--text); }

/* ===== componenti/scheda-prezzo ===== */
/* Scheda prezzo. Contenitore .schede-prezzo (colonne affiancate), dentro ogni .scheda-prezzo-box:
   la scheda (.scheda-prezzo, variante --oro per la mentorship) e il suo neon (.scheda-prezzo__neon).
   Il neon è un elemento a parte perché nel Cyberpunk la scheda è ritagliata dal clip-path e un'ombra esterna non si vedrebbe. */
.schede-prezzo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--sp-l);
  align-items: stretch;
  padding-block: var(--sp-l);
}

.scheda-prezzo-box { position: relative; display: grid; }

.scheda-prezzo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-l);
  border: var(--bordo) solid var(--line);
  border-radius: var(--r-s);
  background: var(--bg);
  clip-path: var(--taglio);
  transition: border-color var(--dur-s) ease, box-shadow var(--dur-s) ease;
}
.scheda-prezzo:hover {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 1.75rem -0.4rem color-mix(in srgb, var(--accent) 45%, transparent);
}

.scheda-prezzo h3 {
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase;
  color: var(--muted);
}

.prezzo {
  margin: var(--sp-s) 0 var(--sp-xs);
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--fs-prezzo);
  line-height: 1;
  letter-spacing: -0.04em;
}
.prezzo small { font-size: var(--fs-small); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.prezzo-nota { margin: 0 0 var(--sp-m); font-size: var(--fs-small); color: var(--dim); }

.scheda-prezzo ul { list-style: none; margin: 0 0 var(--sp-m); padding: 0; }
.scheda-prezzo li {
  position: relative;
  padding: 0.85em 0 0.85em 1.9em;
  border-top: var(--bordo) solid var(--line);
  color: var(--muted);
}
.scheda-prezzo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.85em + (1lh - 1.15em) / 2);
  width: 1.15em;
  height: 1.15em;
  background: var(--voce, var(--accent));
  /* cerchio pieno con il + ritagliato (trasparente) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zM11 6.5h2V11h4.5v2H13v4.5h-2V13H6.5v-2H11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zM11 6.5h2V11h4.5v2H13v4.5h-2V13H6.5v-2H11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.scheda-prezzo .btn { margin-top: auto; }

/* Neon dietro alla scheda, visibile al passaggio del mouse (solo schermi larghi) */
.scheda-prezzo__neon { display: none; }
@media (min-width: 901px) {
  .scheda-prezzo__neon {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--neon, var(--accent));
    filter: blur(22px);
    opacity: 0;
    transform: scale(0.93);
    transition: opacity var(--dur-s) ease;
  }
  .scheda-prezzo-box:hover .scheda-prezzo__neon { opacity: var(--neon-forza, 0.6); }
}

/* Variante oro: la mentorship */
.scheda-prezzo--oro {
  --voce: var(--oro);
  border-color: var(--oro);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--oro) 22%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--oro) 7%, transparent), transparent 45%),
    var(--bg-raised);
  box-shadow: 0 1.9rem 5rem -2.5rem color-mix(in srgb, var(--oro) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--oro-chiaro) 35%, transparent);
}
.scheda-prezzo--oro h3 {
  background: linear-gradient(100deg, var(--oro-scuro), var(--oro-chiaro) 45%, var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--oro);
}
.scheda-prezzo--oro:hover {
  border-color: var(--oro);
  box-shadow: inset 0 0 0 1px var(--oro), inset 0 0 1.75rem -0.4rem color-mix(in srgb, var(--oro) 50%, transparent);
}
.scheda-prezzo-box--oro .scheda-prezzo__neon { --neon: var(--oro); transform: none; }

/* Cyberpunk: le voci e il neon della scheda base sono ciano; la scheda oro ha il fondo a sfumatura e niente ombra esterna */
[data-tema="cyber"] .scheda-prezzo { --voce: var(--extra); }
[data-tema="cyber"] .scheda-prezzo--oro { --voce: var(--oro); background: linear-gradient(180deg, color-mix(in srgb, var(--oro) 12%, transparent), var(--bg-raised) 45%), var(--bg-raised); box-shadow: none; }
[data-tema="cyber"] .scheda-prezzo-box { --neon: var(--extra); --neon-forza: 0.75; }
[data-tema="cyber"] .scheda-prezzo-box--oro { --neon: var(--oro); }

/* ===== componenti/scrittura ===== */
/* Testo che si scrive da solo, lettera per lettera, con il cursore che lampeggia; le frasi si danno il cambio nello stesso spazio
   (la più lunga fissa l'altezza). Markup: <div class="scrittura" data-componente="scrittura"><p class="scrittura__riga">Frase 1</p><p ...>Frase 2</p></div> */
.scrittura { display: grid; }
.scrittura__riga { grid-area: 1 / 1; margin: 0; opacity: 0; }
.scrittura__riga.is-on { opacity: 1; }

.scrittura__ch { position: relative; opacity: 0; }
.scrittura__ch.on { opacity: 1; }

/* Cursore: barra accanto a ogni lettera, accesa solo sull'ultima visibile (cambia solo l'opacità: nessun ricalcolo del layout) */
.scrittura__ch::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0.1em;
  width: 0.09em;
  height: 1em;
  margin-left: 0.06em;
  background: var(--accent);
  opacity: 0;
}
.scrittura__ch.cur::after { opacity: 1; animation: lampeggia 0.64s steps(1) infinite; }
.scrittura__ch.cur-pre::after { left: 0; margin-left: 0; }
.scrittura__ch.cur-pre { opacity: 1; color: transparent; }
/* Cyberpunk: cursore rettangolare rosso, come un terminale */
[data-tema="cyber"] .scrittura__ch::after { width: 0.55em; height: 0.95em; top: 0.12em; margin-left: 0.08em; background: var(--no); }

/* ===== componenti/tagliando ===== */
/* Tagliando (garanzia): bordo tratteggiato, linea di strappo e due tacche; a sinistra il sigillo a stella.
   Markup: <div class="tagliando"><div class="tagliando__tacca"><div class="sigillo">...svg...</div></div><div class="tagliando__testo">...</div></div> */
.tagliando {
  --tacca: clamp(14rem, 27vw, 19rem);
  position: relative;
  display: grid;
  grid-template-columns: var(--tacca) 1fr;
  align-items: stretch;
  border: 2px dashed var(--accent);
  border-radius: var(--r-l);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%), var(--bg);
}
.tagliando__tacca { position: relative; display: grid; place-items: center; padding: var(--sp-l); border-right: 2px dashed var(--accent); }
.tagliando__tacca::before, .tagliando__tacca::after {
  content: "";
  position: absolute;
  right: -0.95rem;
  width: 1.75rem;
  height: 1.75rem;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px dashed var(--accent);
  background: var(--bg);
}
.tagliando__tacca::before { top: -1.05rem; clip-path: inset(50% 0 0 0); }
.tagliando__tacca::after { bottom: -1.05rem; clip-path: inset(0 0 50% 0); }
/* Le forbici sulla linea di strappo */
.tagliando::after {
  content: "\2702\FE0E";
  position: absolute;
  left: calc(var(--tacca) - 0.75rem);
  top: 14%;
  padding: var(--sp-xs) 0;
  background: var(--bg);
  color: var(--accent);
  font-size: var(--fs-lead);
  line-height: 1;
  transform: rotate(90deg);
}
.tagliando__testo { padding: var(--sp-xl); align-self: center; display: flex; flex-direction: column; gap: var(--sp-m); }
.tagliando__testo > * { margin: 0; }
.tagliando__testo p { color: var(--muted); max-width: 44rem; }
.tagliando__testo h2 { font-size: var(--fs-h3); }

@media (max-width: 900px) {
  .tagliando { grid-template-columns: 1fr; }
  .tagliando__tacca { border-right: 0; border-bottom: 2px dashed var(--accent); }
  .tagliando__tacca::before, .tagliando__tacca::after { top: auto; bottom: -0.95rem; }
  .tagliando__tacca::before { left: -1.05rem; right: auto; clip-path: inset(0 0 0 50%); }
  .tagliando__tacca::after { right: -1.05rem; clip-path: inset(0 50% 0 0); }
  .tagliando::after { display: none; }
}

/* Sigillo a stella con anelli e scritta ad arco (SVG). Le misure del testo sono attributi font-size nel markup (unità del disegno), qui solo colori e pesi dal tema */
.sigillo { width: clamp(9rem, 14vw, 13.75rem); aspect-ratio: 1; filter: drop-shadow(0 0 1.4rem var(--accent-glow)); }
.sigillo svg { width: 100%; height: 100%; overflow: visible; font-family: var(--display); }
.sigillo__bordo { fill: var(--accent); }
.sigillo__anello { fill: none; stroke: var(--bg); stroke-width: 2; }
.sigillo__anello--sottile { stroke-width: 1.2; }
.sigillo__arco { font-weight: 800; letter-spacing: 0.14em; fill: var(--bg); }
.sigillo__stella { fill: var(--bg); }
.sigillo__numero { font-weight: 900; fill: var(--bg); }
.sigillo__giorni { font-weight: 800; letter-spacing: 0.35em; fill: var(--bg); }

/* ===== componenti/timeline-punti ===== */
/* Timeline a punti: una linea con un punto per tappa, la scheda si apre sotto.
   Markup: <div class="timeline-punti" data-componente="timeline-punti">
             <div class="timeline-punti__linea" role="tablist">
               <button class="tp-punto" type="button" role="tab" data-sigla="W1" data-data="26 ott" data-tipo="start|live|speciale"
                       data-bonus data-quando="Lunedì 26 ottobre" data-titolo="..." data-testo="..."></button> ...
             </div>
             <article class="tp-scheda"> (riempito dal JS) </article>
           </div>
   Tipi: normale (colore --tp-tappa), start (colore --tp-inizio), live (rosso, il pallino pulsa), speciale = data-bonus (il pallino
   gira come una medaglia e diventa una stella d'oro che scintilla). */
.timeline-punti { --tp-tappa: var(--accent); --tp-inizio: var(--accent); position: relative; }
[data-tema="cyber"] .timeline-punti { --tp-tappa: var(--extra); }

.timeline-punti__linea { display: flex; overflow-x: auto; scrollbar-width: none; }
.timeline-punti__linea::-webkit-scrollbar { display: none; }

.tp-punto {
  --c: var(--tp-tappa);
  --r: 6px;
  position: relative;
  flex: 1 1 0;
  min-width: 3.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-s) 0.2rem var(--sp-m);
  background: none;
  color: var(--muted);
  border: 0;
  font: inherit;
  cursor: pointer;
}
.tp-punto[data-tipo="start"] { --c: var(--tp-inizio); }
.tp-punto[data-tipo="live"] { --c: var(--no); --r: 8px; }

.tp-sigla {
  order: 1;
  height: 1.5rem;
  line-height: 1.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--dim);
  transition: color var(--dur-s);
}
.tp-data { order: 3; font-size: var(--fs-small); color: var(--dim); white-space: nowrap; transition: color var(--dur-s); }

/* Il punto sulla linea */
.tp-punto::after {
  content: "";
  order: 2;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r));
  transition: border-color var(--dur-s), box-shadow var(--dur-s);
}
/* La linea che unisce i punti */
.tp-punto::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sp-s) + 1.5rem + var(--sp-xs) + 0.7rem - 1px);
  height: 2px;
  background: var(--line);
}
.tp-punto:first-child::before { left: 50%; }
.tp-punto:last-child::before { right: 50%; }

.tp-punto:hover .tp-sigla, .tp-punto:hover .tp-data, .tp-punto[aria-selected="true"] .tp-sigla { color: var(--text); }
.tp-punto[aria-selected="true"] .tp-sigla { color: var(--c); }
.tp-punto:hover::after, .tp-punto[aria-selected="true"]::after { border-color: var(--c); box-shadow: 0 0 0.9rem var(--c); }

/* Revisioni live: il pallino emana un leggero impulso */
.tp-punto[data-tipo="live"]::after { animation: impulso 2.6s ease-out infinite; }
.tp-punto[data-tipo="live"]:nth-of-type(2n)::after { animation-delay: -0.9s; }
.tp-punto[data-tipo="live"]:nth-of-type(3n)::after { animation-delay: -1.8s; }

/* Tappe con un bonus: il pallino gira come una medaglia (ciclo di 8 s), la stella brilla e scintilla */
.tp-punto[data-bonus]::after,
.tp-punto[data-bonus] .tp-scintilla::before,
.tp-punto[data-bonus] .tp-scintilla::after { animation-duration: 8s; animation-iteration-count: infinite; }
.tp-punto[data-bonus]::after { animation-name: medaglia; animation-timing-function: ease-in-out; }
.tp-punto[data-bonus]:nth-of-type(even)::after,
.tp-punto[data-bonus]:nth-of-type(even) .tp-scintilla::before,
.tp-punto[data-bonus]:nth-of-type(even) .tp-scintilla::after { animation-delay: -4s; }

.tp-scintilla {
  position: absolute;
  top: calc(var(--sp-s) + 1.5rem + var(--sp-xs));
  left: 50%;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: -0.7rem;
  pointer-events: none;
}
.tp-scintilla::before, .tp-scintilla::after {
  content: "";
  position: absolute;
  background: var(--oro-chiaro);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--oro));
}
.tp-scintilla::before { top: -0.45rem; right: -0.4rem; width: 0.7rem; height: 0.7rem; animation-name: scintilla-a; }
.tp-scintilla::after { bottom: -0.3rem; left: -0.45rem; width: 0.5rem; height: 0.5rem; animation-name: scintilla-b; }

/* Scheda della tappa */
.tp-scheda {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--sp-xs) var(--sp-l);
  align-items: start;
  margin-top: var(--sp-m);
  padding: var(--sp-l);
  min-height: 14rem;
  border: var(--bordo) solid var(--line);
  border-radius: var(--r-s);
  clip-path: var(--taglio);
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat calc(var(--ptr, 50%) - 1.75rem) 0 / 3.5rem 3px,
    var(--bg-raised);
}
.tp-num { grid-column: 1; grid-row: 1 / span 3; margin: 0; font-family: var(--display); font-weight: 900; font-size: var(--fs-h2); line-height: 0.9; color: var(--accent); }
.tp-quando { grid-column: 2; grid-row: 1; margin: 0; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.tp-titolo { grid-column: 2; grid-row: 2; font-size: var(--fs-h3); }
.tp-testo { grid-column: 2; grid-row: 3; margin: var(--sp-s) 0 0; color: var(--muted); }
.tp-nav { grid-column: 1 / -1; grid-row: 5; display: flex; justify-content: space-between; margin-top: var(--sp-m); }
.tp-freccia {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: var(--bordo) solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--dur-s), box-shadow var(--dur-s);
}
.tp-freccia:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 0.9rem var(--accent-glow); }
.tp-freccia:disabled { opacity: 0.3; cursor: default; }
.tp-freccia::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.65rem;
  height: 0.65rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
.tp-freccia--prec::before { transform: translate(-30%, -50%) rotate(45deg); }
.tp-freccia--succ::before { transform: translate(-70%, -50%) rotate(-135deg); }

@media (max-width: 700px) {
  .tp-scheda { grid-template-columns: minmax(0, 1fr); }
  .tp-num { grid-row: auto; grid-column: 1; }
  .tp-quando, .tp-titolo, .tp-testo { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-punto[data-bonus]::after { animation: none; background: var(--oro); clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  .tp-scintilla { display: none; }
}