/* Effetti per tema. Caricato per ultimo, su homepage e pagine dei corsi.
   Punk: aberrazione cromatica sui titoli, linee orizzontali (scanline) sulle immagini, striscia gialla e nera a righe.
   Classico: bagliore azzurro morbido, striscia sfumata blu, riflesso che attraversa le parole in evidenza.
   Gotico: ombra e oro antico, vignettatura, filo dorato con estremi rossi. */

/* ---------- Nessuna aberrazione cromatica fuori dal Punk ---------- */
[data-tema="classico"] :is(.cx-title .t1,.cx-title .t2,.hero h1,.hero h1 em,.lesson-number,.software-mark,.closing h2,.scene-caption em,.mc-num),
[data-tema="gotico"] :is(.software-mark,.lesson-number,.mc-num){text-shadow:none}
[data-tema="classico"] :is(.cx-title .t1,.cx-title .t2,.hero h1,.closing h2){text-shadow:0 0 38px #467ff740}
[data-tema="gotico"] :is(.cx-title .t1,.cx-title .t2,.hero h1,.scene-caption em){text-shadow:0 3px 0 #000a,0 0 30px #6e171744}

/* ---------- Linee orizzontali: solo Punk. Le altre versioni hanno la loro ---------- */
[data-tema="classico"] :is(.hero,.cx-hero)::after{background:linear-gradient(115deg,transparent 35%,#467ff71c 48%,#9bbcff14 52%,transparent 65%);mix-blend-mode:screen}
[data-tema="gotico"] :is(.hero,.cx-hero)::after{background:radial-gradient(ellipse at 60% 45%,transparent 45%,#000b 100%);mix-blend-mode:normal}

/* ---------- Striscia: una per tema ---------- */
:root{--stripe-img:linear-gradient(90deg,#06429e,#467ff7 35%,#9bbcff 50%,#467ff7 65%,#06429e);--stripe-h:5px;--stripe-glow:0 0 22px #467ff77a}
[data-tema="gotico"]{--stripe-img:linear-gradient(90deg,transparent,#6e1717 14%,#c4a270 50%,#6e1717 86%,transparent);--stripe-h:3px;--stripe-glow:0 0 18px #6e171766}
[data-tema="punk"]{--stripe-img:repeating-linear-gradient(-45deg,var(--stripe-a) 0 14px,var(--stripe-b) 14px 28px);--stripe-h:12px;--stripe-glow:none}
.cx-stripe{height:var(--stripe-h);background:var(--stripe-img);box-shadow:var(--stripe-glow)}
.cx-band,.closing{border-top:0!important;border-image:none!important}
.cx-band::before,.closing::before{content:'';position:absolute;top:0;left:0;right:0;height:var(--stripe-h);background:var(--stripe-img);box-shadow:var(--stripe-glow);z-index:2}

/* ---------- Animazioni dei testi: calme. Nessuno scatto cromatico ---------- */
@keyframes cx-sheen{0%,30%{background-position:100% 0,0 0}70%,100%{background-position:0 0,0 0}}
@media(prefers-reduced-motion:no-preference){
  [data-tema="classico"] :is(.hero h1 em,.scene-caption.is-visible em){color:transparent;padding:.12em .1em .1em 0;text-shadow:none;
    background:linear-gradient(100deg,transparent 40%,#ffffff99 50%,transparent 60%) 100% 0/300% 100% repeat-y,linear-gradient(95deg,#467ff7,#9dbcff) 0 0/100% 100% repeat-y;-webkit-background-clip:text;background-clip:text;animation:cx-sheen 3.4s ease-in-out infinite}
}

/* ---------- Menu: nessuna riga sotto, come in ZETA Evolution ---------- */
html .header,html .header.is-solid,html .header:has(nav.open),html .cx-header{border-bottom:0!important}

/* ---------- Pillola dei temi: pallini, come in ZETA Evolution ---------- */
.tema-switch:not([hidden]){right:16px;bottom:16px;gap:0;align-items:center;padding:8px 10px;border-radius:999px;background:#0a0a0cd1;border:1px solid #ffffff24;box-shadow:0 10px 40px #0008;backdrop-filter:blur(10px)}
.tema-switch button{position:relative;width:28px;height:28px;min-height:0;padding:0;border-radius:50%;border:2px solid #ffffff40;font-size:0;line-height:0;color:transparent;gap:0;display:block;transition:transform .2s}
.tema-switch button+button{margin-left:10px}
.tema-switch button::after{content:'';position:absolute;inset:-8px;border-radius:50%}
.tema-switch button:hover{transform:scale(1.12)}
.tema-switch button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px #ffffff40}
.tema-switch .tema-dot{display:none}
.tema-switch button[data-tema-scelta="classico"][aria-pressed]{background:linear-gradient(135deg,#06429e,#467ff7 60%,#9dbcff)}
.tema-switch button[data-tema-scelta="gotico"][aria-pressed]{background:linear-gradient(135deg,#0c0c0c 0 38%,#c4a270 38% 68%,#6e1717 68%)}
.tema-switch button[data-tema-scelta="punk"][aria-pressed]{background:linear-gradient(135deg,#fcee0a 0 45%,#00f0ff 45% 70%,#ff003c 70%)}
.tema-switch .tema-nome{max-width:0;overflow:hidden;white-space:nowrap;font-size:.78rem;line-height:1;color:#e9edf1;opacity:0;transition:max-width .35s,margin .35s,opacity .25s}
.tema-switch .tema-nome.visibile{max-width:9em;margin:0 12px 0 4px;opacity:1}
/* Telefono: un solo pallino, ogni tocco passa al tema successivo e il nome compare un attimo */
@media(max-width:900px){
  .tema-switch:not([hidden]){padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;right:12px;bottom:max(14px,env(safe-area-inset-bottom))}
  .tema-switch button{width:32px;height:32px;box-shadow:0 6px 20px #0008}
  .tema-switch button[aria-pressed="false"]{display:none}
  .tema-switch button[aria-pressed="true"]{box-shadow:0 6px 20px #0008,0 0 0 3px #ffffff40}
  .tema-switch .tema-nome{position:absolute;right:calc(100% + 10px);top:50%;max-width:none;margin:0;padding:.5em .9em;border-radius:999px;background:#0a0a0ce6;border:1px solid #ffffff24;transform:translate(6px,-50%);pointer-events:none}
  .tema-switch .tema-nome.visibile{transform:translate(0,-50%);margin:0}
}

/* ---------- Giro di critica 1 ---------- */
/* Fondo di pagina sempre pieno (le lezioni restavano bianche sotto il video) */
html{background:var(--bg)}
/* Menu: gradiente trasparente, senza bordo e senza ombra, come in Evolution; anche dopo lo scroll */
html .header,html .header.is-solid,html .header:has(nav.open){box-shadow:none!important;backdrop-filter:none}
html .header.is-solid,html .header:has(nav.open){background:linear-gradient(#000000f2,#000000b3 70%,transparent)!important;background-image:linear-gradient(#000000f2,#000000b3 70%,transparent)!important}
[data-tema="gotico"] .header{background-image:linear-gradient(#000000f2,#000000b3 70%,transparent)}
/* Dashboard: la parola in evidenza ha l'aberrazione solo nel Punk */
[data-tema="classico"] .dash-title span,[data-tema="gotico"] .dash-title span{text-shadow:none}
[data-tema="classico"] .dash-title span{text-shadow:0 0 30px #467ff755}
/* Gotico coerente: pulsanti primari rossi, titoli in oro antico */
[data-tema="gotico"] :is(.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button,.dash-tabs [aria-selected="true"]){background:#6e1717;color:#fff4e8;border:1px solid #8a2424;box-shadow:inset 0 0 0 3px #08080840}
[data-tema="gotico"] :is(h2,.cx-title .t2){color:#ddbb85}
[data-tema="gotico"] .closing h2,[data-tema="gotico"] .cx-band .waiting-panel h2{color:#e7e5e0}
/* Barra dei passi: il nome del corso non viene mai troncato */
.cx-step-t{overflow-wrap:anywhere;hyphens:auto;min-width:0}
.cx-footer{padding-bottom:130px}
/* Riflesso sulle parole in evidenza: tre passaggi, poi si ferma */
@media(prefers-reduced-motion:no-preference){[data-tema="classico"] :is(.hero h1 em,.scene-caption.is-visible em){animation-iteration-count:3}}
/* Con riduci movimento le scene sono blocchi separati, con respiro */
.scene-static .scene-stage{gap:46px;padding-bottom:16vh;padding-top:16vh}
.scene-static .scene-caption{font-size:clamp(1.8rem,4vw,3.2rem);max-width:22ch}
/* Elenco corsi: l'immagine è sempre visibile, più forte al passaggio */
.course-accordion summary::before{opacity:.32;transform:none}
.course-accordion summary:hover::before,.course-accordion summary:focus-visible::before{opacity:.6}

/* =====================================================================
   Giro 2: tre linguaggi distinti. Pulsanti, schede, parole in evidenza, ornamenti
   ===================================================================== */
/* ---------- Pulsanti ---------- */
/* Punk: angoli tagliati (come Evolution). Classico: morbido, arrotondato, con ombra azzurra. Gotico: rettangolare, rosso, filo oro interno. */
[data-tema="classico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button){clip-path:none;border-radius:12px;background:var(--fill);color:#fff;border:0;box-shadow:0 10px 28px #2a63d44d,inset 0 1px 0 #ffffff33;font-family:Montserrat,system-ui,sans-serif;text-transform:none;letter-spacing:0;transition:transform .2s,box-shadow .2s,background .2s}
[data-tema="classico"] :is(.button,.cx-btn):not(:disabled):hover{background:#3a74ea;box-shadow:0 14px 34px #2a63d466,inset 0 1px 0 #ffffff44;transform:translateY(-2px)}
[data-tema="classico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):disabled{background:#222a3c;color:#9aa6bd;box-shadow:none}
[data-tema="classico"] .closing .button{background:#f3f5f8;color:#06429e;box-shadow:0 10px 28px #0006}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button){clip-path:none;border-radius:0;outline:1px solid #c4a27077;outline-offset:-6px;letter-spacing:.04em}
[data-tema="gotico"] :is(.button,.cx-btn):not(:disabled):hover{background:#8a2424;outline-color:#ddbb85}
[data-tema="gotico"] .closing .button{background:#6e1717;color:#fff4e8}
[data-tema="classico"] .cx-band .waiting-panel,[data-tema="gotico"] .cx-band .waiting-panel{clip-path:none}
[data-tema="classico"] .cx-band .waiting-panel{border-radius:18px}

/* ---------- Schede ---------- */
/* Classico: angoli morbidi, ombra diffusa, nessuna tacca. Gotico: doppio filo oro e losanga. Punk: tacca gialla (resta com'è) */
[data-tema="classico"] :is(.mc-form,.software-grid article,.mentorship,.course-detail>.course-image,.cx-step,.waiting-panel,.about-photo img){border-radius:16px}
[data-tema="classico"] .course-detail>.course-image{box-shadow:0 22px 50px #0007}
[data-tema="classico"] :is(.mc-form,.software-grid article,.mentorship,.course-detail>.course-image)::before{display:none}
[data-tema="classico"] .software-grid article{border-top-width:1px}
[data-tema="gotico"] .course-detail>.course-image{box-shadow:none;outline:1px solid #c4a27055;outline-offset:6px}
[data-tema="gotico"] :is(.mc-form,.software-grid article,.mentorship,.waiting-panel,.cx-step){border:1px solid #c4a27066;outline:1px solid #c4a27030;outline-offset:5px;border-radius:0}
[data-tema="gotico"] :is(.mc-form,.software-grid article,.mentorship)::before{width:auto;height:auto;border:0;content:'◆';color:#c4a270;font-size:12px;line-height:1;left:12px;top:8px;background:#0a0808;padding:0 6px}

/* ---------- Parole in evidenza: come in ZETA Evolution ---------- */
/* Punk: gialle, sdoppiate, con glitch breve e ripetuto. Solo Punk. */
@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)}}
[data-tema="punk"] :is(.hero h1 em,.scene-caption em,.closing h2 em,.cx-title .t1){color:#fcee0a;display:inline-block;text-shadow:3px 0 0 #ff003c,-3px 0 0 #00f0ff}
@media(prefers-reduced-motion:no-preference){
  [data-tema="punk"] :is(.hero h1 em,.closing h2 em,.cx-title .t1){animation:cyber-glitch-in 3.5s steps(1) infinite}
  [data-tema="punk"] .scene-caption.is-visible em{animation:cyber-glitch-in 3.5s steps(1) infinite}
}

/* ---------- Gotico: grafica piena ---------- */
[data-tema="gotico"] main::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;background-image:url(assets/gothic-grain.svg),url(assets/gothic-wear.svg);opacity:.32;mix-blend-mode:overlay}
[data-tema="gotico"] :is(.hero,.cx-hero)::after{background:radial-gradient(ellipse at 60% 45%,transparent 45%,#000b 100%),radial-gradient(ellipse at 12% 105%,#6e171722,transparent 55%),radial-gradient(ellipse at 92% 105%,#6e171718,transparent 50%)}
[data-tema="gotico"] .section-head h2::after,[data-tema="gotico"] .about-title h2::after,[data-tema="gotico"] .mc h2::after{content:'';display:block;width:min(240px,70%);height:14px;margin-top:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14'%3E%3Cpath d='M0 7h106M134 7h106' stroke='%23c4a270' stroke-width='1'/%3E%3Cpath d='M120 1l6 6-6 6-6-6z' fill='%23c4a270'/%3E%3C/svg%3E") left center/contain no-repeat}
[data-tema="gotico"] .scene-caption.is-visible::before{width:120px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M0 7h46M74 7h46' stroke='%23c4a270' stroke-width='1'/%3E%3Cpath d='M60 1l6 6-6 6-6-6z' fill='%23c4a270'/%3E%3C/svg%3E") left center/contain no-repeat}
[data-tema="gotico"] .marquee i{font-size:0}
[data-tema="gotico"] .marquee i::before{content:'◆';font-size:.7rem;color:#6e1717}
[data-tema="gotico"] .discipline{border-block:1px solid #c4a27055;background:#0d0a09}
[data-tema="gotico"] .course-accordion{border-bottom:1px solid #c4a27044}
[data-tema="gotico"] .path-number{font-family:Georgia,serif;font-style:italic;color:#c4a270}
[data-tema="gotico"] .closing{background:radial-gradient(ellipse at 50% 0,#2a2827,#0e0d0d 70%)}
[data-tema="gotico"] .closing::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:url(assets/gothic-grain.svg);opacity:.45;mix-blend-mode:overlay}
[data-tema="gotico"] .closing .wrap{position:relative;z-index:1}

/* ---------- Area membri: nel piè di pagina, con risposta al passaggio ---------- */
.members{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 22px;border:1px solid var(--a1);color:var(--a1);background:transparent;font-family:var(--cx-display);text-transform:var(--cx-upper);letter-spacing:.06em;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.members:hover,.members:focus-visible{background:var(--fill);color:var(--on-a1);transform:translateY(-2px);box-shadow:0 10px 24px #0006}
[data-tema="classico"] .members{border-radius:12px;color:#9bbcff;border-color:#467ff7}
[data-tema="classico"] .members:hover,[data-tema="classico"] .members:focus-visible{color:#fff}
[data-tema="gotico"] .members{border-radius:0;color:#ddbb85}
[data-tema="punk"] .members{border-radius:0;color:#00f0ff;border-color:#00f0ff}
[data-tema="punk"] .members:hover,[data-tema="punk"] .members:focus-visible{background:#00f0ff;color:#0b0b10}
.footer-links .members{grid-column:1/-1;justify-self:start;margin-bottom:8px}

/* ---------- Chi sono ---------- */
.about{align-items:start;gap:clamp(36px,7vw,110px)}
.about-photo{margin:34px 0 0;max-width:380px;position:relative}
.about-photo img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 30%;border:1px solid color-mix(in srgb,var(--a1) 55%,transparent)}
[data-tema="punk"] .about-photo img{box-shadow:10px 10px 0 #ff003c88}
[data-tema="gotico"] .about-photo img{outline:1px solid #c4a27055;outline-offset:7px;filter:contrast(1.05) saturate(.9)}
[data-tema="classico"] .about-photo img{box-shadow:0 22px 50px #0007}
.about-copy{padding-top:0}
.booking{margin-top:48px;padding-top:32px;border-top:1px solid color-mix(in srgb,var(--a1) 40%,transparent)}
.booking h3{font-family:var(--cx-display);text-transform:var(--cx-upper);margin-bottom:10px}
.booking>p{color:var(--muted)}
.booking .button{margin-top:6px}
.booking .note{margin-top:14px;font-size:var(--fs-small);color:var(--muted)}
.calendario{margin-top:22px;border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);background:#fff;overflow:hidden}
.calendario iframe{display:block;border:0;width:100%}
[data-tema="classico"] .calendario{border-radius:16px}
@media(max-width:900px){.about{grid-template-columns:1fr}.about-photo{max-width:300px}}

/* =====================================================================
   Giro 3 (critica 2)
   ===================================================================== */
/* ---------- Focus: un anello per tema, staccato dalle cornici decorative ---------- */
:root{--focus:#b0caff}[data-tema="gotico"]{--focus:#ddbb85}[data-tema="punk"]{--focus:#00f0ff}
html :is(a,button,input,select,summary):focus-visible{outline:3px solid var(--focus);outline-offset:4px}
/* Gotico: la cornice interna dei pulsanti è un'ombra, non un contorno, così il contorno resta libero per il focus */
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button){outline:0;box-shadow:inset 0 0 0 5px #08080840,inset 0 0 0 6px #c4a27077}
[data-tema="gotico"] :is(.button,.cx-btn):not(:disabled):hover{box-shadow:inset 0 0 0 5px #08080840,inset 0 0 0 6px #ddbb85}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):disabled{background:#2a2321;color:#8f857a;box-shadow:inset 0 0 0 6px #ffffff10;border-color:#3a302c}
[data-tema="punk"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):disabled{background:#2b2f38;color:#a9b2c0}

/* ---------- Area membri nel Gotico: al passaggio resta leggibile ---------- */
[data-tema="gotico"] .members:hover,[data-tema="gotico"] .members:focus-visible{background:#6e1717;color:#fff4e8;border-color:#c4a270}

/* ---------- Chiusura ---------- */
html:root[data-tema="punk"] .closing h2 em{color:#0b0b10;text-shadow:3px 0 0 #ff003c,-3px 0 0 #00f0ff}
html [data-tema="classico"] .closing .button.button.button,[data-tema="classico"] .closing .button.button.button{background:#f3f5f8;color:#06429e;box-shadow:0 10px 28px #0006}
@media(prefers-reduced-motion:no-preference){
  [data-tema="classico"] .closing h2 em{color:transparent;padding:.12em .1em .1em 0;text-shadow:none;background:linear-gradient(100deg,transparent 40%,#ffffffaa 50%,transparent 60%) 100% 0/300% 100% repeat-y,linear-gradient(95deg,#fff,#cfe0ff) 0 0/100% 100% repeat-y;-webkit-background-clip:text;background-clip:text;animation:cx-sheen 3.4s ease-in-out 3}
}

/* ---------- Social: la forma di ciascun tema ---------- */
[data-tema="classico"] .social a{border-radius:12px}
[data-tema="gotico"] .social a{border-radius:0;box-shadow:inset 0 0 0 4px #00000030,inset 0 0 0 5px #c4a27055}
[data-tema="punk"] .social a{border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
[data-tema="punk"] .social a:focus-visible{clip-path:none}

/* ---------- Elenco corsi: la forma di ciascun tema ---------- */
[data-tema="classico"] .course-accordion{border:1px solid #467ff733;border-radius:18px;margin-bottom:14px;background:#ffffff08;overflow:hidden;transition:background .25s,box-shadow .25s}
[data-tema="classico"] .course-accordion:first-child{border-top:1px solid #467ff733}
[data-tema="classico"] .course-accordion:hover{background:#467ff710;box-shadow:0 14px 36px #0005}
[data-tema="classico"] .course-accordion summary{padding-inline:28px}
[data-tema="punk"] .course-accordion{border-left:6px solid transparent;transition:border-color .2s,background .2s}
[data-tema="punk"] .course-accordion:hover,[data-tema="punk"] .course-accordion[open]{border-left-color:#fcee0a}
[data-tema="gotico"] .course-accordion summary::after{content:'◆';position:absolute;left:0;top:50%;transform:translateY(-50%);color:#6e1717;font-size:10px;opacity:0;transition:opacity .25s}
[data-tema="gotico"] .course-accordion:hover summary::after,[data-tema="gotico"] .course-accordion[open] summary::after{opacity:1}
[data-tema="gotico"] .course-accordion[open]{border:1px solid #c4a27055;outline:1px solid #c4a27022;outline-offset:5px}

/* ---------- Pagine dei corsi e delle lezioni: etichette e schede per tema ---------- */
.cx-lesson-tag{clip-path:none}
[data-tema="punk"] .cx-lesson-tag{clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
[data-tema="classico"] .cx-lesson-tag{border-radius:999px;padding-inline:18px}
[data-tema="gotico"] .cx-lesson-tag{border:1px solid #c4a270;background:#6e1717;color:#fff4e8;box-shadow:inset 0 0 0 2px #08080840}
[data-tema="punk"] .cx-step{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
[data-tema="punk"] .cx-step:focus-visible{clip-path:none}
[data-tema="classico"] .cx-step{border-radius:14px}
.cx-nav a:not(.members){display:inline-block}
@media(max-width:760px){.cx-nav a:not(.members){display:none}}
.cx-nav a:not(.members){font-family:var(--cx-display);text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-small)}
[data-tema="gotico"] .cx-band .waiting-panel{background:#130d0c;color:#e7e5e0}
[data-tema="gotico"] .cx-band .waiting-panel p{color:#c9c1b5}
[data-tema="classico"] .cx-band .waiting-panel{background:#0b1020}

/* ---------- Movimento ridotto: margini corretti ---------- */
.scene-static .scene-caption{right:auto;left:auto;bottom:auto}
.scene-static .scene-stage{padding-inline:var(--gutter)}

/* ---------- Segnalazione di bozza: resta nella prima schermata, non segue lo scroll ---------- */
.draft{position:absolute;top:calc(100svh - 54px);bottom:auto}
body{position:relative}

/* ---------- Chi sono: foto 4:5, su telefono dopo i testi e prima della prenotazione ---------- */
.about-photo img{aspect-ratio:1/1}
.about-photo{max-width:340px}
.booking h3{color:var(--text)}
@media(max-width:900px){
  .about{display:flex;flex-direction:column;gap:0}
  .about-title,.about-copy{display:contents}
  .about-title>.eyebrow{order:1}.about-title>h2{order:2;margin-bottom:24px}
  .about-copy>p,.about-copy>.about-quote{order:3}
  .about-photo{order:4;max-width:none;width:100%;margin:12px 0 0}
  .booking{order:5}
}
.mc-fig{aspect-ratio:16/4}

.cx-band .wrap{align-items:start}

/* =====================================================================
   Giro 4: animazione dei pulsanti al passaggio, come in ZETA Evolution
   Punk: glitch breve (spostamenti e sdoppiamento del testo, nessun clip-path per non togliere la parte cliccabile).
   Classico: rimbalzo (si solleva, si schiaccia un poco, si assesta).
   Gotico: da definire con Andrea.
   ===================================================================== */
@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)}
}
@keyframes btn-bounce{
  0%{transform:translateY(0) scale(1,1)}
  30%{transform:translateY(-9px) scale(.98,1.04)}
  55%{transform:translateY(1px) scale(1.04,.94)}
  78%{transform:translateY(-4px) scale(.99,1.02)}
  100%{transform:translateY(-2px) scale(1,1)}
}
[data-tema="punk"] :is(.button,.cx-btn,.members,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover{animation:cyber-glitch-btn .45s steps(1) 1;text-shadow:2px 0 0 #ff003c,-2px 0 0 #00f0ff}
[data-tema="classico"] :is(.button,.cx-btn,.members,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover{animation:btn-bounce .55s cubic-bezier(.2,.7,.2,1) 1}
@media(prefers-reduced-motion:reduce){
  [data-tema="punk"] :is(.button,.cx-btn,.members):hover,[data-tema="classico"] :is(.button,.cx-btn,.members):hover{animation:none}
}

/* =====================================================================
   Gotico: "ceneri" (idea: Dark Souls 3). Grigio e nero, oro, rosso sangue in piccolissime dosi.
   - parole in evidenza: oro invecchiato con un respiro lento e irregolare di brace
   - pulsanti: placca di metallo con i quattro angoli tagliati; al passaggio si stacca una nuvola di ceneri (ceneri.js)
   - ceneri e braci dal bordo basso della hero (ceneri.js)
   ===================================================================== */
@keyframes ceneri-respiro{
  0%,100%{filter:drop-shadow(0 0 5px #b8571f26) drop-shadow(0 1px 12px #000a)}
  21%{filter:drop-shadow(0 0 8px #b8571f4d) drop-shadow(0 1px 16px #000a)}
  37%{filter:drop-shadow(0 0 4px #b8571f1f) drop-shadow(0 1px 12px #000a)}
  66%{filter:drop-shadow(0 0 10px #c4682a59) drop-shadow(0 1px 18px #000a)}
  83%{filter:drop-shadow(0 0 6px #b8571f33) drop-shadow(0 1px 14px #000a)}
}
[data-tema="gotico"] :is(.hero h1 em,.scene-caption em,.closing h2 em,.cx-title .t1,.dash-title span){
  display:inline-block;color:transparent;text-shadow:none;padding:.1em .06em .06em 0;
  background:linear-gradient(0deg,#8f6a3d 0%,#c4a270 42%,#e8d6ad 78%,#f3e8cc 100%);-webkit-background-clip:text;background-clip:text;
}
@media(prefers-reduced-motion:no-preference){
  [data-tema="gotico"] :is(.hero h1 em,.closing h2 em,.cx-title .t1,.dash-title span),[data-tema="gotico"] .scene-caption.is-visible em{animation:ceneri-respiro 11s cubic-bezier(.45,.05,.35,1) infinite}
}

/* Pulsanti: placca di metallo, quattro angoli tagliati, due rivetti, piccolo segno rosso sangue */
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button){
  position:relative;overflow:visible;border:0;padding-inline:clamp(30px,3vw,44px);
  color:#d9bd8a;text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:calc(var(--fs-body) * .86);
  clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
  background-color:#1d1c1a;
  background-image:
    radial-gradient(circle,#a98d5e 0 1.7px,transparent 2.6px),
    radial-gradient(circle,#a98d5e 0 1.7px,transparent 2.6px),
    linear-gradient(90deg,#6e1717,#6e1717),
    linear-gradient(180deg,#34322f 0%,#232220 48%,#161513 100%);
  background-size:6px 6px,6px 6px,34% 2px,100% 100%;
  background-position:11px 50%,calc(100% - 11px) 50%,calc(11px + 6px) calc(100% - 6px),0 0;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px #c4a270,inset 0 0 0 4px #0000008c,inset 0 0 0 5px #c4a27044,inset 0 2px 0 5px #ffffff0d;
  text-shadow:0 1px 0 #000;
  transition:color .3s,filter .3s,transform .2s,box-shadow .3s;
}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button)::after{content:none}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover{
  color:#f3e4bf;filter:brightness(1.14);transform:translateY(-1px);
  background-position:11px 50%,calc(100% - 11px) 50%,calc(11px + 6px) calc(100% - 6px),0 0;
  box-shadow:inset 0 0 0 1px #e8d09a,inset 0 0 0 4px #0000008c,inset 0 0 0 5px #c4a27066,inset 0 2px 0 5px #ffffff14;
  text-shadow:0 1px 0 #000,0 0 10px #c4a27055;
}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):focus-visible{clip-path:none}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):disabled{
  background-image:linear-gradient(180deg,#262523,#1a1918);background-color:#1a1918;color:#7d766b;box-shadow:inset 0 0 0 1px #4a443b}
[data-tema="gotico"] .closing .button{color:#d9bd8a}
[data-tema="gotico"] .members:hover,[data-tema="gotico"] .members:focus-visible{background:#1d1c1a;color:#f3e4bf;border-color:#e8d09a;box-shadow:inset 0 0 0 3px #00000066}

/* Striscia: oro, con punte di rosso sangue appena accennate agli estremi */
[data-tema="gotico"]{--stripe-img:linear-gradient(90deg,transparent,#6e1717 4%,#c4a270 22%,#c4a270 78%,#6e1717 96%,transparent);--stripe-glow:0 0 14px #c4a27033}
/* Il fondo, le ombre e le cornici passano dal rosso al nero e al grigio */
[data-tema="gotico"] :is(.hero,.cx-hero)::after{background:radial-gradient(ellipse at 60% 45%,transparent 45%,#000b 100%),radial-gradient(ellipse at 12% 105%,#6e171722,transparent 55%),radial-gradient(ellipse at 92% 105%,#6e171718,transparent 50%)}
[data-tema="gotico"] .closing{background:radial-gradient(ellipse at 50% 0,#2a2827,#0e0d0d 70%)}

/* Gotico: placca con cornice che segue gli angoli tagliati (due fili sagomati), niente segno rosso */
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button){
  background-image:
    radial-gradient(circle,#a98d5e 0 1.7px,transparent 2.6px),
    radial-gradient(circle,#a98d5e 0 1.7px,transparent 2.6px),
    linear-gradient(180deg,#34322f 0%,#232220 48%,#161513 100%);
  background-size:6px 6px,6px 6px,100% 100%;
  background-position:15px 50%,calc(100% - 15px) 50%,0 0;
  box-shadow:none;
}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover{
  background-position:15px 50%,calc(100% - 15px) 50%,0 0;box-shadow:none;
}
/* Filo esterno: segue il taglio di 11px */
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button)::before{
  content:'';position:absolute;inset:0;pointer-events:none;background:#c4a270;transition:background .3s;
  clip-path:polygon(evenodd,
    11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px,11px 0,
    11.6px 1.5px,1.5px 11.6px,1.5px calc(100% - 11.6px),11.6px calc(100% - 1.5px),calc(100% - 11.6px) calc(100% - 1.5px),calc(100% - 1.5px) calc(100% - 11.6px),calc(100% - 1.5px) 11.6px,calc(100% - 11.6px) 1.5px,11.6px 1.5px);
}
/* Filo interno, più sottile e più tenue, sempre sagomato */
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button)::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:1;background:#c4a27055;transition:background .3s;
  clip-path:polygon(evenodd,
    13.1px 5px,calc(100% - 13.1px) 5px,calc(100% - 5px) 13.1px,calc(100% - 5px) calc(100% - 13.1px),calc(100% - 13.1px) calc(100% - 5px),13.1px calc(100% - 5px),5px calc(100% - 13.1px),5px 13.1px,13.1px 5px,
    13.5px 6px,6px 13.5px,6px calc(100% - 13.5px),13.5px calc(100% - 6px),calc(100% - 13.5px) calc(100% - 6px),calc(100% - 6px) calc(100% - 13.5px),calc(100% - 6px) 13.5px,calc(100% - 13.5px) 6px,13.5px 6px);
  background-image:none;animation:none;
}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover::before{background:#ecd6a0}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover::after{background:#c4a270aa}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):disabled::before{background:#4a443b}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):disabled::after{background:#4a443b55}

/* Pulsante Gotico: al passaggio si accende una brace dal basso (poca, senza esagerare) */
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button){
  background-image:
    radial-gradient(circle,#a98d5e 0 1.7px,transparent 2.6px),
    radial-gradient(circle,#a98d5e 0 1.7px,transparent 2.6px),
    radial-gradient(ellipse 85% 100% at 50% 135%,#d8531f 0%,#8f2412cc 42%,transparent 72%),
    linear-gradient(180deg,#34322f 0%,#232220 48%,#161513 100%);
  background-size:6px 6px,6px 6px,100% 0,100% 100%;
  background-position:15px 50%,calc(100% - 15px) 50%,50% 100%,0 0;
  transition:background-size .55s cubic-bezier(.2,.7,.2,1),color .3s,filter .3s,transform .2s;
}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover{
  background-size:6px 6px,6px 6px,100% 100%,100% 100%;
  color:#ffe6b8;text-shadow:0 1px 0 #000,0 0 12px #e0602a99;filter:brightness(1.08);
}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover::before{background:#efb26a}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover::after{background:#d9742f99}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):disabled{background-image:linear-gradient(180deg,#262523,#1a1918)}

/* Pulsante Gotico: al passaggio una fiamma guizza sul fondo, poi resta a ardere piano.
   Copre tutta la larghezza; l'altezza e l'intensità variano (non sale come una linea di scansione). */
@property --brace{syntax:'<number>';inherits:false;initial-value:0}
@property --alt{syntax:'<number>';inherits:false;initial-value:30}
@keyframes brace-guizzo{
  0%{--brace:.2;--alt:30}
  16%{--brace:1;--alt:94}
  34%{--brace:.7;--alt:50}
  54%{--brace:.95;--alt:74}
  78%{--brace:.62;--alt:54}
  100%{--brace:.55;--alt:50}
}
@keyframes brace-arde{
  0%,100%{--brace:.55;--alt:50}
  27%{--brace:.66;--alt:57}
  46%{--brace:.5;--alt:45}
  71%{--brace:.6;--alt:54}
}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button){
  --brace:0;--alt:30;
  background-image:
    radial-gradient(circle,#a98d5e 0 1.7px,transparent 2.6px),
    radial-gradient(circle,#a98d5e 0 1.7px,transparent 2.6px),
    radial-gradient(ellipse 130% 85% at 50% 135%,rgb(255 140 50 / calc(var(--brace) * .55)),transparent 72%),
    linear-gradient(0deg,rgb(226 84 28 / var(--brace)) 0%,rgb(150 36 18 / calc(var(--brace) * .85)) calc(var(--alt) * .5%),transparent calc(var(--alt) * 1%)),
    linear-gradient(180deg,#34322f 0%,#232220 48%,#161513 100%);
  background-size:6px 6px,6px 6px,100% 100%,100% 100%,100% 100%;
  background-position:15px 50%,calc(100% - 15px) 50%,0 0,0 0,0 0;
  transition:--brace .6s ease-out,--alt .6s ease-out,color .3s,filter .3s,transform .2s;
}
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover{
  --brace:.55;--alt:50;background-size:6px 6px,6px 6px,100% 100%,100% 100%,100% 100%;
  color:#ffe6b8;text-shadow:0 1px 0 #000,0 0 12px #e0602a99;filter:brightness(1.06);
}
@media(prefers-reduced-motion:no-preference){
  [data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover{
    animation:brace-guizzo .95s ease-out 1,brace-arde 3.9s ease-in-out .95s infinite}
}
/* La posizione dei livelli vale anche al passaggio (una regola precedente la accorciava e spostava la fiamma) */
[data-tema="gotico"] :is(.button,.cx-btn,.cx-band .waiting-form .button,.mc-form .waiting-form .button):not(:disabled):hover{background-position:15px 50%,calc(100% - 15px) 50%,0 0,0 0,0 0}

/* Gotico: il pallino del selettore è una brace; le parole delle scene animate ardono come fiamme */
@keyframes brace-pallino{
  0%,100%{box-shadow:0 0 0 3px #ffffff40,0 0 8px #d8501c66,inset 0 0 6px #ff8a3a66}
  23%{box-shadow:0 0 0 3px #ffffff40,0 0 13px #e8601f99,inset 0 0 9px #ffa04a99}
  41%{box-shadow:0 0 0 3px #ffffff40,0 0 6px #d8501c4d,inset 0 0 5px #ff8a3a4d}
  68%{box-shadow:0 0 0 3px #ffffff40,0 0 15px #ef6a24aa,inset 0 0 10px #ffb05acc}
  86%{box-shadow:0 0 0 3px #ffffff40,0 0 9px #d8501c73,inset 0 0 7px #ff8a3a80}
}
.tema-switch button[data-tema-scelta="gotico"][aria-pressed]{
  background:radial-gradient(circle at 50% 62%,#ffb04e 0,#ee6a22 24%,#a02a12 50%,#34130c 74%,#14100e 100%);
  box-shadow:0 0 7px #d8501c55,inset 0 0 5px #ff8a3a55;
}
.tema-switch button[data-tema-scelta="gotico"][aria-pressed="true"]{border-color:#e9b27a}
@media(prefers-reduced-motion:no-preference){
  .tema-switch button[data-tema-scelta="gotico"][aria-pressed]{animation:brace-pallino 6.4s ease-in-out infinite}
}

@keyframes fuoco-parola{
  0%,100%{filter:drop-shadow(0 0 8px #ff7a2a66) drop-shadow(0 -3px 18px #c8461f99)}
  19%{filter:drop-shadow(0 0 13px #ff8a3acc) drop-shadow(0 -5px 28px #d8501ccc)}
  34%{filter:drop-shadow(0 0 6px #ff7a2a4d) drop-shadow(0 -2px 14px #c8461f80)}
  58%{filter:drop-shadow(0 0 15px #ff9a4ae6) drop-shadow(0 -6px 32px #e0602add)}
  77%{filter:drop-shadow(0 0 9px #ff7a2a80) drop-shadow(0 -3px 20px #c8461fa6)}
}
:root[data-tema="gotico"] .scene-caption em{
  background:linear-gradient(0deg,#c8461f 0%,#ee8a3a 20%,#e8c88a 56%,#f6ebcf 100%);-webkit-background-clip:text;background-clip:text;
}
@media(prefers-reduced-motion:no-preference){
  [data-tema="gotico"] .scene-caption.is-visible em{animation:fuoco-parola 6.8s cubic-bezier(.45,.05,.35,1) infinite}
}

/* Pallino Gotico: brace più discreta e bassa, con il filo d'oro come cornice */
@keyframes brace-pallino-soft{
  0%,100%{box-shadow:0 0 0 3px #c4a27033,0 0 4px #d8501c33,inset 0 -3px 5px #ff8a3a33}
  27%{box-shadow:0 0 0 3px #c4a27033,0 0 6px #e8601f4d,inset 0 -3px 7px #ffa04a4d}
  45%{box-shadow:0 0 0 3px #c4a27033,0 0 3px #d8501c26,inset 0 -2px 4px #ff8a3a26}
  72%{box-shadow:0 0 0 3px #c4a27033,0 0 7px #ef6a2459,inset 0 -3px 8px #ffb05a59}
}
.tema-switch button[data-tema-scelta="gotico"][aria-pressed]{
  background:radial-gradient(ellipse 70% 55% at 50% 100%,#e8661f 0,#a02a12 42%,transparent 78%),linear-gradient(180deg,#1b1917 0%,#12100f 100%);
  border-color:#c4a270;box-shadow:0 0 0 3px #c4a27026,inset 0 -3px 5px #ff8a3a26;
}
.tema-switch button[data-tema-scelta="gotico"][aria-pressed="true"]{border-color:#e8d09a;box-shadow:0 0 0 3px #c4a27055}
@media(prefers-reduced-motion:no-preference){
  .tema-switch button[data-tema-scelta="gotico"][aria-pressed]{animation:brace-pallino-soft 6.4s ease-in-out infinite}
}

/* Parole delle scene animate (Gotico): poco alone, il fuoco sta nella parte bassa della scritta, come nel pulsante */
@property --fb{syntax:'<number>';inherits:false;initial-value:.8}
@property --fh{syntax:'<number>';inherits:false;initial-value:46}
@keyframes fuoco-basso{
  0%,100%{--fb:.85;--fh:40}
  18%{--fb:1;--fh:56}
  33%{--fb:.68;--fh:32}
  57%{--fb:.96;--fh:50}
  76%{--fb:.76;--fh:37}
}
:root[data-tema="gotico"] .scene-caption em{
  --fb:.85;--fh:40;
  background:
    linear-gradient(0deg,rgb(214 56 20 / var(--fb)) 0%,rgb(196 50 20 / calc(var(--fb) * .75)) calc(var(--fh) * .35%),rgb(170 42 18 / calc(var(--fb) * .3)) calc(var(--fh) * .7%),transparent calc(var(--fh) * 1%)),
    linear-gradient(0deg,#e8c88a 0%,#f1ddb2 55%,#f8eed4 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 5px 9px #c8461f40);
}
@media(prefers-reduced-motion:no-preference){
  [data-tema="gotico"] .scene-caption.is-visible em{animation:fuoco-basso 7.2s cubic-bezier(.45,.05,.35,1) infinite}
}

/* ---------- Area membri nel menu in alto: voce di menu con accento e risposta al passaggio ---------- */
.header nav a.nav-members,.cx-nav a.nav-members{color:var(--a1);font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:color .2s,transform .2s,text-shadow .2s}
[data-tema="classico"] .header nav a.nav-members,[data-tema="classico"] .cx-nav a.nav-members{color:#9bbcff}
[data-tema="punk"] .header nav a.nav-members,[data-tema="punk"] .cx-nav a.nav-members{color:#00f0ff}
.header nav a.nav-members span,.cx-nav a.nav-members span{transition:transform .2s}
.header nav a.nav-members:hover,.header nav a.nav-members:focus-visible,.cx-nav a.nav-members:hover,.cx-nav a.nav-members:focus-visible{color:#fff;transform:translateY(-1px)}
.header nav a.nav-members:hover span,.cx-nav a.nav-members:hover span{transform:translate(2px,-2px)}
.header nav a.nav-members::after{background:currentColor}
@media(max-width:760px){.cx-nav a.nav-members{display:inline-flex}}

/* Menu dopo lo scroll: fondo quasi pieno, i titoli non si leggono piu' sotto le voci */
html .header.is-solid,html .header:has(nav.open){background:color-mix(in srgb,var(--bg) 96%,transparent)!important;background-image:none!important}
/* Pillola dei temi: nelle pagine dei corsi compare solo dopo lo scroll, per non coprire i passi nella prima schermata */
body[data-course] .tema-switch:not([hidden]){transition:opacity .3s}
body[data-course] .tema-switch.is-early{opacity:0;pointer-events:none}