/* Temi della pagina: estetiche alternative tra cui chi visita può scegliere (pallini in basso a destra).
   Il tema si attiva con data-tema sull'elemento <html>: "cyber".
   Senza attributo resta il tema ZETA blu di style.css (Classico). I font stanno in assets/fonts. */
/* ---------- Selettore dei temi ---------- */

.tema-switch {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  font-family: "Poppins", system-ui, sans-serif;
}

/* Il nome compare solo per un attimo dopo la scelta: la pillola si allarga e poi si richiude sui due pallini */
.tema-switch .tema-nome {
  max-width: 0;
  margin-right: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.78rem;
  color: #e9edf1;
  opacity: 0;
  transition: max-width 0.35s ease, margin-right 0.35s ease, opacity 0.25s ease;
}

.tema-switch .tema-nome.visibile { max-width: 9em; margin-right: 12px; margin-left: 4px; opacity: 1; }

.tema-switch button + button { margin-left: 10px; }

.tema-switch button {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform 0.2s;
}

.tema-switch button:hover { transform: scale(1.12); }
.tema-switch button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
.tema-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.tema-switch [data-scelta="zeta"] { background: linear-gradient(135deg, #06429e, #467ff7 60%, #9dbcff); }
.tema-switch [data-scelta="cyber"] { background: linear-gradient(135deg, #fcee0a 0 45%, #00f0ff 45% 70%, #ff003c 70%); }

/* Mobile: un solo pallino in basso a destra, ogni tocco cambia tema e il nome compare un attimo */
@media (max-width: 900px) {
  .tema-switch {
    padding: 0;
    gap: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Pallino 30 px, ma l'area che risponde al tocco resta di 42 px */
  .tema-switch button { position: relative; width: 30px; height: 30px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55); }
  .tema-switch button::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
  .tema-switch button[aria-pressed="false"] { display: none; }
  .tema-switch button[aria-pressed="true"] { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.25); }
  .tema-switch .tema-nome {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0.45em 0.9em;
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
    opacity: 0;
    transform: translate(6px, -50%);
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
  }
  .tema-switch .tema-nome.visibile { opacity: 1; transform: translate(0, -50%); margin: 0; }
  .tema-switch button + button { margin-left: 0; }
}

/* =====================================================================
   CYBERPUNK 2077: giallo evidenziatore, ciano elettrico, rosso
   ===================================================================== */

[data-tema="cyber"] {
  --bg: #0b0b10;
  --bg-deep: #050507;
  --bg-raised: #15151d;
  --text: #f2f2f2;
  --muted: #bcc6cc;
  --dim: #7c8790;
  --line: rgba(252, 238, 10, 0.2);
  --accent: #fcee0a;
  --accent-deep: #8a8200;
  --accent-glow: rgba(252, 238, 10, 0.3);
  --ciano: #00f0ff;
  --rosso: #ff003c;
  --live: #ff003c;
  --mentor: #00f0ff;
  --tl-start: #fcee0a;    /* timeline: week 0 gialla, settimane ciano, revisioni rosse */
  --tl-week: #00f0ff;
  --display: "Chakra Petch", "Montserrat", system-ui, sans-serif;
  --body: "Rajdhani", "Poppins", system-ui, sans-serif;
  --taglio: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

[data-tema="cyber"] body { font-weight: 500; }

/* Linee di scansione leggere su tutta la pagina */
[data-tema="cyber"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
}

[data-tema="cyber"] h1,
[data-tema="cyber"] h2,
[data-tema="cyber"] h3,
[data-tema="cyber"] .pivot,
[data-tema="cyber"] summary,
[data-tema="cyber"] .btn,
[data-tema="cyber"] .cd-band-title {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

[data-tema="cyber"] h1,
[data-tema="cyber"] h2,
[data-tema="cyber"] .pivot { font-weight: 700; }

[data-tema="cyber"] .hero {
  background:
    radial-gradient(ellipse 45% 40% at 75% 35%, rgba(0, 240, 255, 0.25), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 75%, rgba(255, 0, 60, 0.25), transparent 70%),
    var(--bg-deep);
}

/* Riga "work in progress" in fondo alla hero: barrette diagonali gialle a tutta larghezza, con i vuoti trasparenti.
   Sostituisce quella che stava in cima alla fascia del video (tolta sotto). */
[data-tema="cyber"] .hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  z-index: 2;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 10px, transparent 10px 20px);
}

[data-tema="cyber"] .cd-band-video::before { display: none; }



[data-tema="cyber"] .hero-shade {
  background: linear-gradient(to top, var(--bg) 0%, rgba(11, 11, 16, 0.45) 14%, transparent 38%);
}

[data-tema="cyber"] .hero-title {
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: 0.92;
}

[data-tema="cyber"] .hero-title span:first-child {
  color: var(--accent);
  text-shadow: 4px 0 0 var(--rosso), -4px 0 0 var(--ciano);
}

[data-tema="cyber"] .hero-title .evo {
  font-style: normal;
  color: #fff;
  text-shadow: 3px 0 0 var(--rosso), -3px 0 0 var(--ciano);
  animation: cyber-glitch 3.5s steps(1) infinite;
}

@keyframes cyber-glitch {
  0%, 92%, 100% { transform: none; clip-path: none; }
  93% { transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); }
  95% { transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); }
  97% { transform: translate(-3px, 0); clip-path: inset(30% 0 35% 0); }
}

[data-tema="cyber"] .eyebrow,
[data-tema="cyber"] .hero-facts span { color: var(--ciano); }

/* Parole in evidenza come passate con l'evidenziatore */
[data-tema="cyber"] .statement em {
  font-style: normal;
  color: #000;
  background: var(--accent);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

[data-tema="cyber"] .pivot {
  color: var(--accent);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-shadow: 6px 0 0 var(--rosso), -6px 0 0 var(--ciano);
}

[data-tema="cyber"] blockquote { border-left-color: var(--rosso); }

[data-tema="cyber"] .btn {
  background: var(--accent);
  border: 0;
  color: #000;
  border-radius: 0;
  clip-path: var(--taglio);
  box-shadow: none;
}

[data-tema="cyber"] .btn:hover { background: #fff; transform: none; box-shadow: none; }

[data-tema="cyber"] .btn-ghost {
  background: rgba(0, 240, 255, 0.12);
  color: var(--ciano);
  outline: 1px solid var(--ciano);
  outline-offset: -1px;
}

[data-tema="cyber"] .plan,
[data-tema="cyber"] .week-detail,
[data-tema="cyber"] .quote,
[data-tema="cyber"] .art-ph,
[data-tema="cyber"] .photo-placeholder, [data-tema="cyber"] .author-img { clip-path: var(--taglio); border-radius: 0; }

[data-tema="cyber"] .plan-featured {
  --oro: #f2c14e;
  --oro-chiaro: #ffe49a;
  --oro-scuro: #b8841a;
  border-color: var(--oro);
  background: linear-gradient(180deg, rgba(242, 193, 78, 0.12), var(--bg-raised) 45%), var(--bg-raised);
}
[data-tema="cyber"] .plan li::before { background: var(--ciano); }
[data-tema="cyber"] .plan-featured li::before { background: var(--oro); }
[data-tema="cyber"] .plan-featured .btn {
  background: linear-gradient(100deg, var(--oro-scuro), var(--oro) 40%, var(--oro-chiaro) 75%, var(--oro));
  color: #1a1204;
}
[data-tema="cyber"] .plan-featured .btn:hover { background: var(--oro-chiaro); }

[data-tema="cyber"] .tt-stage,
[data-tema="cyber"] .closing {
  background:
    radial-gradient(circle at 50% 55%, rgba(0, 240, 255, 0.28), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(255, 0, 60, 0.22), transparent 45%),
    var(--bg-deep);
}

[data-tema="cyber"] .scene-ph {
  background:
    radial-gradient(ellipse 40% 55% at 50% 45%, rgba(0, 240, 255, 0.3), transparent 70%),
    radial-gradient(circle at 50% 120%, rgba(255, 0, 60, 0.4), transparent 60%),
    #050507;
}


[data-tema="cyber"] .checklist li::before { background: var(--accent); border-radius: 0; box-shadow: none; }
[data-tema="cyber"] .checklist li::after { border-color: #000; }
[data-tema="cyber"] .checklist-no li::before { background: transparent; }

[data-tema="cyber"] .seal { border: 0; clip-path: none; background: none; }

/* Fascia countdown gialla con testo nero, come le schermate del gioco */
[data-tema="cyber"] .cd-band {
  background: var(--accent);
  color: #000;
}

[data-tema="cyber"] .cd-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: repeating-linear-gradient(-45deg, #000 0 10px, transparent 10px 20px);
  opacity: 0.85;
}

[data-tema="cyber"] .cd-band::after { background: linear-gradient(100deg, transparent 45%, rgba(255, 255, 255, 0.35) 50%, transparent 55%); }

[data-tema="cyber"] .cd-band-title,
[data-tema="cyber"] .cd-band .cd-closed { color: #000; }

[data-tema="cyber"] .cd-band .countdown span { color: #000; text-shadow: 3px 0 0 var(--rosso); }
[data-tema="cyber"] .cd-band .countdown small { color: rgba(0, 0, 0, 0.7); font-weight: 700; }

[data-tema="cyber"] .btn-light { background: #000; color: var(--accent); }
[data-tema="cyber"] .btn-light:hover { background: var(--rosso); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  [data-tema="cyber"] .hero-title .evo { animation: none; }
}

/* Prima fascia countdown (video): titolo leggibile sul colore di ogni tema */
[data-tema="cyber"] .cd-band-video .eyebrow,
[data-tema="cyber"] .cd-band-video .section-title,
[data-tema="cyber"] .cd-band-cta p,
[data-tema="cyber"] .cd-band-warn,
[data-tema="cyber"] .cd-band-warn strong,
[data-tema="cyber"] .cd-band-cta strong { color: #000; }

/* Testo più grande: Rajdhani ha un occhio piccolo rispetto a Poppins (i titoli restano uguali) */
[data-tema="cyber"] {
  --fs-lead: calc(clamp(1.125rem, 0.96rem + 0.674vw, 1.5rem) * 1.12);
  --fs-body: calc(clamp(1.125rem, 1.016rem + 0.449vw, 1.375rem) * 1.12);
  --fs-label: calc(clamp(0.875rem, 0.66rem + 0.9vw, 1.375rem) * 1.12);
  --fs-small: calc(clamp(0.875rem, 0.78rem + 0.25vw, 1rem) * 1.12);
}

/* Parole chiave delle scene: stessi parametri del titolo della hero (sdoppiamento 3px, glitch 3.5s), in giallo, senza riquadro */
[data-tema="cyber"] .scene-caption em {
  display: inline-block;
  color: var(--accent);
  background: none;
  padding: 0;
  text-shadow: 3px 0 0 var(--rosso), -3px 0 0 var(--ciano);
  filter: none;
}

/* Parte appena la didascalia compare: subito una raffica di glitch, poi gli scatti come nel titolo della hero */
[data-tema="cyber"] .scene-caption.is-visible em { animation: cyber-glitch-in 3.5s steps(1) infinite; }

@keyframes cyber-glitch-in {
  0%   { transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); }
  3%   { transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); }
  6%   { transform: translate(-3px, 0); clip-path: inset(30% 0 35% 0); }
  9%   { transform: translate(4px, 1px); clip-path: inset(0 0 60% 0); }
  12%, 92%, 100% { transform: none; clip-path: none; }
  93% { transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); }
  95% { transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); }
  97% { transform: translate(-3px, 0); clip-path: inset(30% 0 35% 0); }
}


@media (prefers-reduced-motion: reduce) {
  [data-tema="cyber"] .scene-caption.is-visible em { animation: none; }
}

/* Il titolo evidenziato ha bisogno di più larghezza per restare su una riga */
[data-tema="cyber"] .scene-caption.scene-title { max-width: 24ch; }

/* Pulsanti: glitch all'hover nel Cyberpunk, rimbalzo negli altri temi */
[data-tema="cyber"] .btn:hover {
  animation: cyber-glitch-btn 0.45s steps(1) 1;
  text-shadow: 2px 0 0 #ff003c, -2px 0 0 #00f0ff;
}

/* Solo spostamenti e sdoppiamento del testo: niente clip-path, che toglierebbe la parte cliccabile del pulsante */
@keyframes cyber-glitch-btn {
  0%   { transform: translate(-3px, 1px); text-shadow: 5px 0 0 #ff003c, -5px 0 0 #00f0ff; }
  20%  { transform: translate(3px, -1px); text-shadow: -4px 0 0 #ff003c, 4px 0 0 #00f0ff; }
  40%  { transform: translate(-2px, 0);   text-shadow: 3px 1px 0 #ff003c, -3px -1px 0 #00f0ff; }
  60%  { transform: translate(3px, 1px);  text-shadow: -5px 0 0 #ff003c, 5px 0 0 #00f0ff; }
  80%  { transform: translate(-1px, 0);   text-shadow: 2px 0 0 #ff003c, -2px 0 0 #00f0ff; }
  100% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, [data-tema="cyber"] .btn:hover { animation: none; }
}

/* Didascalie delle scene: maiuscole e minuscole normali (Chakra Petch ha le minuscole) */
[data-tema="cyber"] .scene-caption { text-transform: none; letter-spacing: -0.01em; }

/* Pulsanti, tema classico: rimbalzo all'hover (si solleva, si schiaccia un poco, si assesta) */
:root:not([data-tema="cyber"]) .btn:hover { animation: btn-bounce 0.55s var(--ease) 1; }

@keyframes btn-bounce {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(-9px) scale(0.98, 1.04); }
  55%  { transform: translateY(1px) scale(1.04, 0.94); }
  78%  { transform: translateY(-4px) scale(0.99, 1.02); }
  100% { transform: translateY(-2px) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-tema="cyber"]) .btn:hover { animation: none; }
}

/* Tema classico: l'area dell'hover è più grande del pulsante, così il rimbalzo non lo sposta via da sotto il mouse */
:root:not([data-tema="cyber"]) .btn { position: relative; }
:root:not([data-tema="cyber"]) .btn::after { content: ""; position: absolute; inset: -14px -6px; }

/* Cursore della hero nel Cyberpunk: rettangolo rosso pieno, come un terminale */
[data-tema="cyber"] .tp-ch::after {
  width: 0.55em;
  height: 0.95em;
  top: 0.12em;
  margin-left: 0.08em;
  background: var(--rosso);
}

/* Menu, Cyberpunk: voci sottili con il font del tema; il logo diventa nero sulla fascia gialla */
[data-tema="cyber"] .sitenav-list a,
[data-tema="cyber"] .sitenav-cta { font-weight: 400; letter-spacing: 0.12em; }
[data-tema="cyber"] .sitenav-list a[aria-current],
[data-tema="cyber"] .sitenav-cta[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }
[data-tema="cyber"] .sitenav-cta { color: var(--accent); font-weight: 600; }
[data-tema="cyber"] .sitenav.is-over-band .sitenav-logo img { filter: brightness(0); }

/* Frase a effetto, Cyberpunk: ombre colorate più sottili e lettere meno strette (con 6 px si impastava) */
[data-tema="cyber"] .pivot.pivot-sm {
  letter-spacing: 0.01em;
  text-shadow: 3px 0 0 var(--rosso), -3px 0 0 var(--ciano);
}

/* Titolo glitch, Cyberpunk */
[data-tema="cyber"] .titolo-glitch {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--accent);
  text-shadow: 3px 0 0 var(--rosso), -3px 0 0 var(--ciano);
}

[data-tema="cyber"] .titolo-glitch.glitch-anim { animation: cyber-glitch 3.5s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  [data-tema="cyber"] .titolo-glitch.glitch-anim { animation: none; }
}

/* PROVA Argomenti, Cyberpunk */
[data-tema="cyber"] .arg-card,
[data-tema="cyber"] .arg-sticky {
  border: 0;
  border-radius: 0;
  background: #0d0d12;
  box-shadow: inset 3px 0 0 var(--accent);
  clip-path: var(--taglio);
}
[data-tema="cyber"] .arg-card .arg-n { border-radius: 0; border-color: var(--accent); color: var(--accent); }
[data-tema="cyber"] .arg-sticky .arg-n { text-shadow: 3px 0 0 var(--rosso), -3px 0 0 var(--ciano); }
[data-tema="cyber"] .arg-title { text-transform: uppercase; }
[data-tema="cyber"] .arg-chips li { border-radius: 0; color: var(--accent); }
[data-tema="cyber"] .arg-line::after { background: var(--accent); box-shadow: 0 0 16px rgba(252, 238, 10, 0.5); }
[data-tema="cyber"] .arg-sticky-vis { background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0, 240, 255, 0.22), transparent 70%), radial-gradient(circle at 50% 120%, rgba(255, 0, 60, 0.3), transparent 60%), #050508; }
[data-tema="cyber"] .arg-stadio { border-radius: 0; color: var(--accent); border-color: var(--accent); }
/* PROVA A, Cyberpunk: niente taglio sugli angoli, altrimenti il numero sulla linea resta tagliato fuori dalla card */
[data-tema="cyber"] .arg-card { clip-path: none; }

/* PROVA Argomenti, Cyberpunk: le card devono staccarsi dallo sfondo.
   Fondo più chiaro del nero della pagina, bordo sottile, staffe gialle agli angoli, alone scuro e giallo leggero. */
[data-tema="cyber"] .arg-card,
[data-tema="cyber"] .arg-sticky {
  clip-path: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 28px 3px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 3px 28px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 28px 3px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 3px 28px no-repeat,
    linear-gradient(160deg, #23232f 0%, #15151c 55%, #101016 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 22px 50px -18px rgba(0, 0, 0, 0.95), 0 0 36px -14px rgba(252, 238, 10, 0.4);
}
[data-tema="cyber"] .arg-sticky { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 -22px 50px -18px rgba(0, 0, 0, 0.95), 0 0 36px -14px rgba(252, 238, 10, 0.4); }
[data-tema="cyber"] .arg-sticky-vis { background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0, 240, 255, 0.28), transparent 70%), radial-gradient(circle at 50% 120%, rgba(255, 0, 60, 0.4), transparent 60%), #08080d; border-left: 1px solid rgba(255, 255, 255, 0.1); }

/* Le card di prova stanno sopra le linee di scansione (che coprono tutta la pagina, z-index 50) e sotto il menu (60) */
[data-tema="cyber"] .arg-card,
[data-tema="cyber"] .arg-sticky,
[data-tema="cyber"] .bn-stage { z-index: 55; }
[data-tema="cyber"] .plan,
[data-tema="cyber"] .timeline,
[data-tema="cyber"] .week-detail { position: relative; z-index: 55; }

/* Etichette degli strumenti, Cyberpunk: a forma di cartellino (punta a sinistra con il foro), giallo pieno e testo nero */
[data-tema="cyber"] .arg-chips { gap: 0.6rem; }
[data-tema="cyber"] .arg-chips li {
  position: relative;
  padding: 0.3em 1em 0.3em 1.7em;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  letter-spacing: 0.08em;
  clip-path: polygon(0.8em 0, 100% 0, 100% 100%, 0.8em 100%, 0 50%);
}
[data-tema="cyber"] .arg-chips li::before {
  content: "";
  position: absolute;
  left: 0.75em;
  top: 50%;
  width: 0.4em;
  height: 0.4em;
  margin-top: -0.2em;
  border-radius: 50%;
  background: #15151c;
}

/* Etichette Cyberpunk più piccole e più esili: stesso cartellino giallo, testo e imbottitura ridotti */
[data-tema="cyber"] .arg-chips { gap: 0.45rem; margin-top: 0.9rem; }
[data-tema="cyber"] .arg-chips li {
  padding: 0.12em 0.7em 0.12em 1.3em;
  font-size: calc(var(--fs-small) * 0.78);
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.5;
  clip-path: polygon(0.55em 0, 100% 0, 100% 100%, 0.55em 100%, 0 50%);
}
[data-tema="cyber"] .arg-chips li::before { left: 0.55em; width: 0.3em; height: 0.3em; margin-top: -0.15em; }

/* Etichette Cyberpunk: rettangolo giallo senza pallino, con l'angolo in alto a destra tagliato a 45° */
[data-tema="cyber"] .arg-chips li {
  padding: 0.12em 1em 0.12em 0.7em;
  clip-path: polygon(0 0, calc(100% - 0.7em) 0, 100% 0.7em, 100% 100%, 0 100%);
}
[data-tema="cyber"] .arg-chips li::before { display: none; }
[data-tema="cyber"] .arg-chips li.is-ai { background: var(--rosso); color: #fff; }

@supports (text-box: trim-both cap alphabetic) {
  [data-tema="cyber"] .arg-chips li { padding-block: 0.52em; line-height: 1.2; }
}

/* Pila di card, Cyberpunk: la staffa gialla in basso a destra va sopra l'immagine (che copre lo sfondo della card dove sono disegnate le staffe) */
[data-tema="cyber"] .arg-sticky::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  pointer-events: none;
}

/* Bonus a carosello, Cyberpunk */
[data-tema="cyber"] .bn-card { --c: var(--ciano); --c2: #00506a; }
[data-tema="cyber"] .bn-card.is-mentor { --c: #f2c14e; --c2: #6b4a0f; }
/* Cyberpunk: stesso linguaggio delle card degli argomenti: angoli vivi, staffe agli angoli (azzurro o oro), fondo staccato dallo sfondo */
[data-tema="cyber"] .bn-card {
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(var(--c), var(--c)) top left / 28px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 3px 28px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 28px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 3px 28px no-repeat,
    linear-gradient(160deg, #23232f 0%, #15151c 55%, #101016 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 22px 50px -18px rgba(0, 0, 0, 0.95), 0 0 36px -14px var(--c);
}
[data-tema="cyber"] .bn-card.is-on { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 22px 50px -18px rgba(0, 0, 0, 0.95), 0 0 56px -8px var(--c); }
/* tag a cartellino con l'angolo tagliato, come le etichette degli strumenti */
[data-tema="cyber"] .bn-tag { padding: 0.25em 1em 0.25em 0.8em; background: var(--c); color: #000; clip-path: polygon(0 0, calc(100% - 0.7em) 0, 100% 0.7em, 100% 100%, 0 100%); }
[data-tema="cyber"] .bn-vis { border-radius: 0; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
/* nome del bonus con lo sdoppiamento rosso/ciano della numerazione degli argomenti */
[data-tema="cyber"] .bn-title { text-shadow: 2px 0 0 var(--rosso), -2px 0 0 var(--ciano); }
[data-tema="cyber"] .bn-card.is-mentor .bn-vis { color: #1a1204; }
@media (max-width: 700px) {
  [data-tema="cyber"] .bn-tag { padding-block: 0.08em; line-height: 1.15; clip-path: polygon(0 0, calc(100% - 0.5em) 0, 100% 0.5em, 100% 100%, 0 100%); }
  [data-tema="cyber"] .bn-vis { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
}

[data-tema="cyber"] .plan:not(.plan-featured):hover { border-color: var(--ciano); box-shadow: inset 0 0 0 1px var(--ciano), inset 0 0 28px -6px rgba(0, 240, 255, 0.45); }
[data-tema="cyber"] .plan-glow { --glow: var(--ciano); }
[data-tema="cyber"] .plan-glow-featured { --glow: #f2c14e; }
[data-tema="cyber"] .plan:hover + .plan-glow { opacity: 0.75; }
[data-tema="cyber"] .coupon { border-radius: 6px; }
/* Il tagliando della garanzia sta davanti alle linee di scansione */
[data-tema="cyber"] .coupon { z-index: 55; }
[data-tema="cyber"] .flip-face { clip-path: var(--taglio); }
[data-tema="cyber"] .flipcard { position: relative; z-index: 55; }
[data-tema="cyber"] .flipcard { --ok: #2bff88; }

/* "ZETA Evolution" nella frase della scheda girevole: giallo con sdoppiamento rosso/ciano e scatti di glitch (come le parole chiave delle scene) */
[data-tema="cyber"] .flip-intro em { text-shadow: 3px 0 0 var(--rosso), -3px 0 0 var(--ciano); animation: cyber-glitch-in 3.5s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { [data-tema="cyber"] .flip-intro em { animation: none; } }

/* "stack di competenze" nel titolo: giallo con sdoppiamento rosso/ciano e scatti di glitch, come le parole chiave delle scene */
[data-tema="cyber"] .arg-heading em { text-shadow: 3px 0 0 var(--rosso), -3px 0 0 var(--ciano); animation: cyber-glitch-in 3.5s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { [data-tema="cyber"] .arg-heading em { animation: none; } }

/* "Cos'è ZETA Evolution": parola chiave della frase d'apertura in giallo con glitch; numeri delle fasi quadrati */
[data-tema="cyber"] .cose-lead em, [data-tema="cyber"] .frase-chiave em { text-shadow: 3px 0 0 var(--rosso), -3px 0 0 var(--ciano); animation: cyber-glitch-in 3.5s steps(1) infinite; }
[data-tema="cyber"] .cose-n { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { [data-tema="cyber"] .cose-lead em, [data-tema="cyber"] .frase-chiave em { animation: none; } }

/* Briefing (week 0): la schedina "Lezione live" resta bianca come nel Classico, anche se il pallino sulla timeline è giallo */
[data-tema="cyber"] .ws-block[data-kind="start"] { --sc: #f2f4f7; }

/* Card della mentorship (Cyberpunk): angoli tagliati come le altre schede */
[data-tema="cyber"] .mc-face { clip-path: var(--taglio); border-radius: 0; }
[data-tema="cyber"] .mc-q { text-transform: uppercase; letter-spacing: 0.02em; }
[data-tema="cyber"] .mcard::before { background: #f2c14e; }
[data-tema="cyber"] .mcard.is-flipped::before { opacity: 0.75; }
[data-tema="cyber"] .mc-back { background: linear-gradient(180deg, rgba(242, 193, 78, 0.12), var(--bg-raised) 45%), var(--bg-raised); }
[data-tema="cyber"] .mentor-cards-wrap { position: relative; z-index: 55; } /* sopra le linee di disturbo, come le altre schede */
[data-tema="cyber"] .mc-front { background: linear-gradient(180deg, rgba(255, 0, 60, 0.14), var(--bg-raised) 45%), var(--bg-raised); }