/* FlamiArt ETS — la pagina di All Together Dance (restyling chiaro, 18/10/2026; rifinitura del 20/10/2026).
   Dal kit Design/kit-18-10/design-all-together-dance/ (v2): l'insegna al neon molto grande, il lilla e il magenta del
   concorso, i cerchi dei passi, l'arco d'oro del palco. Tornata «4 Step», voci 29-31 (20/10/2026): portata alla finitura
   della pagina dell'Accademia, tenendo il suo tema: la hero è una scena (la foto vera del palco che si accende in un
   cerchio sfumato nella carta lilla, i fili e il nastro d'oro), le foto in cornici d'oro (ovale, arco, schede), le icone
   tonde d'oro che si sovrappongono, gli ornamenti del kit in ogni sezione, le bande che sfumano, il ritmo che cambia da
   una sezione all'altra. Solo quello che è di questa pagina: il resto viene dal sistema comune (style.css, che non si
   tocca). Il movimento è quello del sistema (classi reveal, data-sfalsa, brilla, data-profondita). */

/* ── i colori del concorso, misurati sul design (design-desktop-v2-3x-interpolato.png) ── */
body.tema-dance {
  --dance-hero: #FEFCFE;      /* bordo sinistro della hero del kit (02-hero, da originali) */
  --dance-carta: #FDFAFD;     /* fondo chiaro lilla delle sezioni */
  --dance-lilla: #F8F0FC;     /* fascia «Dalla tua regione alla finale.» e «Porta la tua scuola in scena.» */
  --dance-scheda: #FBF4FE;    /* il corpo delle schede (scheda-vuota.png, a metà della sfumatura) */
  --dance-cerchio: #F0D4FC;   /* cerchio del «?» delle domande */
  --dance-magenta: #C909F7;   /* numeri 01 e 03 */
  --dance-viola: #5907F8;     /* numero 02 */
  --dance-passo: #535B85;     /* testo dei passi */
  --dance-riga: #EBE6F6;      /* bordo delle righe delle domande */
  --dance-bordo: #ECC896;     /* bordo d'oro delle etichette («Scuole di danza», «Insegnanti», «Coreografi») */
  /* le ombre del palco: viola, morbide, come la luce delle foto */
  --dance-ombra-foto: 0 34px 64px -36px rgba(89, 7, 120, .62);
  --dance-ombra-scheda: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 46px -32px rgba(89, 7, 120, .42);
}

/* ══ Hero: la scena. La carta lilla del kit con le onde d'oro; a destra la foto vera del palco nel grande cerchio che
   sfuma nella carta (nessun bordo duro, come la Roma dell'Accademia), i due fili d'oro attorno e il nastro davanti ══ */
.hero--dance { background: var(--dance-hero) url("../img/kit/atd-sfondo-hero-2400.webp") 50% 100% / cover no-repeat; }
.hero--dance .deco { z-index: 1; }
.hero--dance .atd-hero__nastro { z-index: 3; }
.atd-hero__scena { isolation: isolate; }
/* il palco: la foto intera, il bordo che si perde nella carta come una luce */
.atd-hero__palco {
  display: block; position: absolute; inset: 0; z-index: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000 66%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, .3) 92%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 66%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, .3) 92%, transparent 100%);
}
.hero--dance .atd-hero__palco .hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 46%; }
/* il bagliore lilla e magenta del neon, che esce dal cerchio nella carta */
.atd-hero__luce {
  position: absolute; inset: -9%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 9, 247, .2) 30%, rgba(160, 60, 230, .1) 62%, rgba(248, 240, 252, 0) 100%);
}
/* i due fili d'oro, spostati come nell'ovale del kit: il primo pieno, il secondo che si interrompe */
.atd-hero__anello {
  position: absolute; inset: 1% -1% 0 2%; z-index: 2; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--oro-chiaro); rotate: -8deg;
}
.atd-hero__anello::after {
  content: ""; position: absolute; inset: -3.5% -2% 2% -3%; border-radius: 50%;
  border: 1.3px solid var(--oro); border-color: var(--oro) var(--oro) transparent transparent; rotate: 14deg;
}

.hero__insegna {
  position: relative; z-index: 1;
  display: block; width: clamp(250px, 24vw, 360px); height: auto;
  border-radius: 14px;
  box-shadow: 0 34px 60px -30px rgba(89, 7, 120, .75), 0 0 0 1px rgba(255, 255, 255, .7);
  /* il filo d'oro attorno, staccato, come le cornici del kit */
  outline: 1.5px solid var(--oro-chiaro); outline-offset: 9px;
}
.hero--dance .hero__titolo {
  position: relative; z-index: 1;
  margin-top: clamp(26px, 2.4vw, 34px);
  font-size: clamp(2.15rem, 3.3vw, 3.2rem); line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__nome { display: block; color: var(--inchiostro); }
.hero--dance .hero__dicitura {
  display: inline; max-width: none; margin: 0;
  font-size: inherit; line-height: inherit; letter-spacing: inherit;
  color: var(--oro-titolo);
}
/* il motto del concorso: in Playfair, in corsivo, come la frase in evidenza dell'Accademia */
.hero--dance .atd-hero__motto {
  position: relative; z-index: 1; margin-top: 16px; max-width: 26em;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.18rem, 1.6vw, 1.45rem); line-height: 1.38;
  color: var(--inchiostro);
}
.hero__etichette { position: relative; z-index: 1; margin-top: 22px; }
.hero__etichette .pillola {
  min-height: 44px; padding: 5px 16px 5px 6px;
  border-color: var(--dance-bordo); background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 22px -16px rgba(89, 7, 120, .45);
  font-size: 15.5px;
}
.hero__etichette .pillola img { width: 32px; height: 32px; }
/* la stella del kit non ha il cerchio: glielo dà il filo d'oro, come alle altre due icone */
.hero__etichette .pillola__stella { padding: 7px; border: 1.2px solid var(--oro); border-radius: 50%; }
.hero--dance .hero__azioni { position: relative; z-index: 1; margin-top: 26px; }
.hero--dance .btn--bordo { background: rgba(255, 255, 255, .88); }
.hero__stella--1 { --w: 38px; --top: -14px; --left: calc(clamp(250px, 24vw, 360px) + 24px); }
.hero__stella--2 { --w: 56px; --left: -46px; --top: 50%; --opacita: .85; }
.atd-hero__puntini { --w: 260px; --opacita: .8; }
.atd-hero__stella { --w: 54px; }

@media (min-width: 1200px) {
  /* il testo nella colonna di sinistra, sulla carta; la scena a destra, centrata in altezza */
  .hero--dance { display: grid; align-items: center; min-height: clamp(780px, 60vw, 920px); }
  .hero--dance .hero__testo {
    position: relative; top: auto; left: auto; transform: none;
    width: min(41vw, 600px);
    margin-left: max(var(--margine), calc((100vw - var(--larghezza)) / 2));
    padding: 40px 0 72px;
  }
  .hero--dance .hero__scena {
    position: absolute; top: 50%; right: max(-3vw, calc((100vw - 1640px) / 2));
    width: min(55vw, 860px); height: auto; aspect-ratio: 1;
    translate: 0 -49%;
  }
  .atd-hero__nastro { --w: min(980px, 66vw); --right: -6vw; --bottom: 1%; --ruota: -3deg; }
  .atd-hero__puntini { --right: max(1vw, calc((100vw - 1500px) / 2)); --top: 6%; }
  .atd-hero__stella { --left: 47%; --top: 12%; }
}
/* fra 1200 e 1439 i due pulsanti stanno in una riga sola */
@media (min-width: 1200px) and (max-width: 1439px) {
  .hero--dance .hero__azioni { gap: 12px; }
  .hero--dance .hero__azioni .btn { min-height: 48px; padding: 10px 20px; font-size: 16px; gap: 10px; }
  .hero__etichette { gap: 6px; }
  .hero__etichette .pillola { min-height: 40px; padding: 4px 13px 4px 5px; font-size: 14.5px; }
  .hero__etichette .pillola img { width: 29px; height: 29px; }
}
/* 21/10 (collaudo, step 7): da 1440 in su il pulsante «Scopri come si accede alla finale», più lungo dopo i testi del 20/10,
   toccava la curva d'oro della scena: i due pulsanti della stessa misura che hanno fra 1200 e 1439 */
@media (min-width: 1440px) {
  .hero--dance .hero__azioni { gap: 12px; }
  .hero--dance .hero__azioni .btn { min-height: 48px; padding: 10px 20px; font-size: 16px; gap: 10px; }
  .atd-hero__nastro { --right: calc(-6vw - 28px); }   /* la punta del nastro un poco più in là dei pulsanti */
}
@media (max-width: 1199px) {
  .hero--dance .hero__testo { padding-top: 36px; max-width: 760px; }
  .hero__stella--1 { --top: 6px; }
  .hero--dance .hero__scena { aspect-ratio: 1; }
  .hero--dance .hero__scena::before { content: none; }
  .atd-hero__nastro { --w: 640px; --right: -120px; --bottom: 0; --ruota: -4deg; }
  .atd-hero__puntini { --w: 200px; --right: 2%; --top: auto; --bottom: 34%; }
  .atd-hero__stella { --w: 40px; --right: 8%; --top: auto; --bottom: 46%; }
}
/* schermi medi: il testo a sinistra e la scena accanto, quadrata */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero--dance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: center; }
  .hero--dance .hero__testo { max-width: none; padding: 40px 12px 56px max(var(--margine), env(safe-area-inset-left, 0px)); }
  .hero--dance .hero__scena { width: 108%; margin-right: -6%; }
  .atd-hero__puntini { --bottom: auto; --top: 6%; }
  .atd-hero__stella { --bottom: auto; --top: 14%; --right: 40%; }
}
/* tablet stretto e telefono: il testo sopra, la scena sotto, centrata */
@media (max-width: 899px) {
  .hero--dance .hero__scena { width: min(88vw, 620px); margin: 18px auto clamp(28px, 6vw, 48px); }
}
@media (max-width: 699px) {
  .hero--dance { background-position: 28% 100%; background-size: auto 42%; }
  .hero--dance .hero__testo { padding-top: 26px; }
  .hero__insegna { width: min(72vw, 290px); outline-offset: 7px; }
  .hero--dance .hero__titolo { font-size: clamp(1.95rem, 8.6vw, 2.4rem); }
  .hero--dance .atd-hero__motto { font-size: 1.16rem; }
  /* 21/10 (collaudo, step 7): le tre etichette una sotto l'altra, mai due sopra e una sola sotto */
  .hero__etichette { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero__etichette .pillola { font-size: 15px; }
  .hero--dance .hero__scena { width: min(94vw, 420px); margin: 16px auto 34px; }
  .atd-hero__nastro { --w: 460px; --right: -110px; --bottom: 10px; }
  .atd-hero__puntini { --w: 150px; --right: -10px; --bottom: auto; --top: auto; }
  .atd-hero__puntini { display: none; }
  .atd-hero__stella { --w: 30px; --right: 8%; --bottom: 40%; }
  .hero__stella--1 { --w: 30px; --left: calc(min(72vw, 290px) + 14px); --top: 18px; }
  .hero__stella--2 { display: none; }
}

/* ══ Che cos'è: il passo a due nell'ovale d'oro (come la sfilata dell'Accademia), col nastro del kit e l'icona tonda
   d'oro che si sovrappone; la prima riga più grande ══ */
.presentazione { padding-bottom: calc(var(--spazio) + 20px); }
.presentazione__pannello { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; }
.presentazione__ovale { width: 100%; max-width: 660px; aspect-ratio: 1.3; justify-self: center; }
.presentazione__ovale .ovale__foto { box-shadow: var(--dance-ombra-foto); }
.presentazione__ovale .ovale__foto img { object-position: 50% 60%; }
.presentazione__ovale .ovale__nastro { left: auto; right: -4%; bottom: auto; top: -12%; width: 50%; rotate: 9deg; }
.presentazione__medaglia {
  position: absolute; z-index: 4; left: 7%; bottom: 1%;
  width: clamp(72px, 6.6vw, 96px); height: auto; border-radius: 50%;
  background: var(--bianco); box-shadow: 0 16px 30px -14px rgba(126, 73, 10, .65);
}
.presentazione__testo { max-width: 580px; }
.presentazione__righe { margin-top: 20px; font-size: clamp(1.02rem, 1.2vw, 1.12rem); }
.presentazione__righe .presentazione__primo { font-size: clamp(1.14rem, 1.5vw, 1.34rem); line-height: 1.5; color: var(--inchiostro); }
.presentazione__titolo { font-size: clamp(2rem, 3.1vw, 2.95rem); line-height: 1.1; }
.presentazione__azione { margin-top: clamp(22px, 2.4vw, 30px); }
.presentazione__danzatrice { --w: 150px; --right: max(-30px, calc(50% - 760px)); --bottom: -30px; --opacita: .5; }
.presentazione__roma { --w: min(560px, 40vw); --left: -20px; --bottom: 0; --opacita: .38; }
.presentazione__stella { --w: 34px; --left: 46%; --top: 36px; }

/* ══ Uno spettacolo: la banda lilla che sfuma in alto e in basso; il video nell'arco d'oro, una foto nell'ovale ══ */
.palco { background: linear-gradient(180deg, var(--bianco) 0%, var(--dance-lilla) 20%, var(--dance-lilla) 80%, var(--bianco) 100%); }
.palco__griglia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.palco__testo { max-width: 600px; }
.palco__righe { margin-top: 20px; font-size: clamp(1.02rem, 1.2vw, 1.12rem); }
.palco__righe .palco__primo { font-size: clamp(1.14rem, 1.5vw, 1.34rem); line-height: 1.5; color: var(--inchiostro); }
/* le altre righe col rombo d'oro del kit, come gli elenchi del sito */
.palco__righe p:not(.palco__primo) { position: relative; padding-left: 24px; }
.palco__righe p:not(.palco__primo)::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px;
  background: url("../img/kit/rombo-64.webp") center / contain no-repeat;
}
.palco__firma { position: relative; display: flex; justify-content: flex-start; margin-top: 30px; padding-left: 112px; min-height: 96px; align-items: flex-end; }
.palco__danzatrice { --w: 92px; --left: 0; --bottom: -14px; --opacita: .75; }
.palco__scena { position: relative; display: grid; justify-items: end; padding: 14px 18px 18px clamp(60px, 8vw, 150px); }
.palco__arco { position: relative; width: min(100%, 360px); aspect-ratio: 9 / 15; }
/* l'arco: in alto un mezzo cerchio, come il boccascena; due fili d'oro spostati, come le cornici del kit */
.palco__arco::before, .palco__arco::after, .palco__video { border-radius: 50% 50% 7% 7% / 30% 30% 4.2% 4.2%; }
.palco__arco::before, .palco__arco::after { content: ""; position: absolute; pointer-events: none; }
.palco__arco::before { inset: -13px; border: 1.5px solid var(--oro-chiaro); }
.palco__arco::after { inset: 12px -16px -16px 12px; border: 1px solid var(--oro); opacity: .6; z-index: -1; }
.palco__video {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--dance-lilla);
  box-shadow: 0 40px 70px -40px rgba(89, 7, 120, .75);
}
.palco__video .galleria__audio { left: 16px; bottom: 16px; }
.palco__ovale { position: absolute; z-index: 2; left: 0; top: 20%; width: clamp(190px, 21vw, 300px); }
.palco__ovale .ovale__foto { border: 4px solid var(--bianco); box-shadow: var(--dance-ombra-foto); }
.palco__ovale .ovale__foto img { object-position: 50% 60%; }
.palco__stella--1 { --w: 30px; --left: 50%; --top: 54px; }
.palco__stella--2 { --w: 64px; --right: 3%; --bottom: 44px; --opacita: .85; }
.palco__puntini { --w: 300px; --right: -60px; --top: -10px; --opacita: .6; }

/* ══ Chi può partecipare: le tre schede lilla, come le lezioni dell'Accademia: la foto del palco in alto, l'icona
   d'oro nel cerchio bianco che si sovrappone, il testo ══ */
.partecipanti__elenco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(28px, 3.4vw, 44px); }
.partecipanti__voce {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--dance-scheda); border: 1px solid rgba(255, 255, 255, .85); border-radius: 16px;
  box-shadow: var(--dance-ombra-scheda);
}
.partecipanti__foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--dance-lilla); }
.partecipanti__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease-out); }
.partecipanti__voce:nth-child(1) .partecipanti__foto img { object-position: 50% 52%; }
.partecipanti__voce:nth-child(2) .partecipanti__foto img { object-position: 50% 58%; }
.partecipanti__voce:nth-child(3) .partecipanti__foto img { object-position: 50% 42%; }
.partecipanti__corpo { position: relative; flex: 1; padding: 48px clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 28px); }
.partecipanti__icona {
  position: absolute; top: -36px; left: clamp(20px, 2vw, 28px);
  width: 70px; height: 70px; border-radius: 50%; background: var(--bianco);
  box-shadow: 0 12px 22px -14px rgba(126, 73, 10, .7);
}
.partecipanti__corpo p { font-family: var(--serif); font-size: clamp(1.12rem, 1.35vw, 1.28rem); line-height: 1.38; color: var(--inchiostro); }
.partecipanti__chiusa { margin: clamp(28px, 3vw, 40px) auto 0; max-width: 34em; text-align: center; font-size: clamp(1.06rem, 1.35vw, 1.2rem); color: var(--testo); }
.partecipanti__azione { margin-top: 20px; }
.partecipanti__costellazione { --w: 300px; --right: -50px; --top: 12px; --opacita: .75; }

/* ══ Come si arriva alla finale: la fascia lilla del kit (sfuma in alto) coi passi nei cerchi magenta e viola, legati
   dal doppio filo d'oro che si disegna; ogni passo su un foglio chiaro; Roma in oro ══ */
.percorso { isolation: isolate; padding-bottom: calc(var(--spazio) + clamp(28px, 3.4vw, 52px)); }
.percorso::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--dance-lilla) url("../img/kit/atd-sfondo-sezione-2400.webp") 50% 100% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
.percorso__passi { position: relative; column-gap: 28px; margin-top: clamp(30px, 3.4vw, 46px); }
/* il doppio filo d'oro che passa dietro i cerchi, dal primo all'ultimo */
.percorso__passi::before, .percorso__passi::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 33px; right: calc(25% - 21px - 33px); top: 32px; height: 1.5px;
  background: linear-gradient(90deg, var(--oro-chiaro), var(--oro) 50%, var(--oro-chiaro));
}
.percorso__passi::after { top: 38px; height: 1px; opacity: .55; }
.percorso .passo { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; gap: 18px; }
.percorso .passo::before {
  color: var(--dance-magenta); border: 1.5px solid currentColor; background: var(--bianco);
  box-shadow: 0 0 0 6px rgba(248, 240, 252, .9), 0 14px 26px -14px rgba(201, 9, 247, .7);
}
.percorso .passo:nth-child(even)::before { color: var(--dance-viola); box-shadow: 0 0 0 6px rgba(248, 240, 252, .9), 0 14px 26px -14px rgba(89, 7, 248, .6); }
.percorso .passo p {
  align-self: stretch; padding: 18px 20px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95); border-radius: 16px;
  box-shadow: 0 18px 36px -30px rgba(89, 7, 120, .5);
  color: var(--dance-passo);
}
.percorso__chiusa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: clamp(28px, 3vw, 40px); padding-top: 24px;
  border-top: 1px solid rgba(201, 146, 57, .35);
}
.percorso__riga { max-width: 40em; font-size: clamp(1.04rem, 1.3vw, 1.16rem); color: var(--inchiostro); }
.percorso__roma { --w: min(500px, 40vw); --right: 2%; --top: 26px; --opacita: .24; }
.percorso__stella--1 { --w: 30px; --left: 52%; --top: 46px; }
.percorso__stella--2 { --w: 22px; --right: 4%; --bottom: 36%; --opacita: .9; }

/* ══ Cosa si vince: i due momenti come schede, l'icona tonda d'oro che si sovrappone, la freccia fra le due; poi la
   frase in evidenza in corsivo d'oro, sotto la stella, come la citazione dell'Accademia ══ */
.premio { isolation: isolate; }
.premio::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 38% at 50% 46%, rgba(248, 240, 252, .95), rgba(248, 240, 252, 0));
}
.premio__dittico {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(14px, 2vw, 28px);
  max-width: 1060px; margin: clamp(58px, 5.6vw, 76px) auto 0;
}
.premio__momento {
  position: relative;
  padding: 54px clamp(22px, 2.4vw, 32px) clamp(24px, 2.4vw, 32px);
  background: var(--bianco);
  border: 1px solid var(--oro-velo); border-radius: 18px;
  box-shadow: var(--ombra-scheda);
  font-size: 17.5px; line-height: 1.55;
}
.premio__momento .icona__immagine {
  position: absolute; top: -38px; left: clamp(22px, 2.4vw, 32px);
  width: 74px; height: 74px; border-radius: 50%; background: var(--bianco);
  box-shadow: 0 12px 22px -14px rgba(126, 73, 10, .7);
}
.premio__momento--ora {
  background: linear-gradient(150deg, var(--bianco) 0%, var(--dance-lilla) 100%);
  border-color: rgba(201, 9, 247, .3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 26px 50px -30px rgba(201, 9, 247, .55);
  color: var(--inchiostro);
}
.premio__freccia {
  align-self: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--bianco) url("../img/kit/ui-freccia-destra.webp") center / 16px no-repeat;
  border: 1.5px solid var(--oro);
  box-shadow: 0 10px 20px -12px rgba(126, 73, 10, .6);
}
.premio__attacco {
  position: relative; margin: clamp(40px, 4vw, 56px) auto 0; max-width: 26em; padding-top: 50px;
  text-align: center; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.28; letter-spacing: -0.01em;
  color: var(--oro-titolo); text-wrap: balance;
}
.premio__attacco::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 34px; height: 34px; margin-left: -17px;
  background: url("../img/kit/stella-quattro-punte-128.webp") center / contain no-repeat;
}
.premio__riga { margin: 14px auto 0; max-width: 36em; text-align: center; font-size: clamp(1.02rem, 1.25vw, 1.12rem); color: var(--tenue); }
.premio__stella { --w: 60px; --left: max(2%, calc(50% - 600px)); --top: 50px; --opacita: .85; }
.premio__puntini { --w: 300px; --right: -70px; --bottom: 20px; --opacita: .55; }

/* ══ La giuria: la banda con la foto sfumata (come «La crescita personale» dell'Accademia): la coreografia davanti
   all'insegna al neon si accende a destra e si perde nella carta lilla; il testo a sinistra ══ */
.giuria { isolation: isolate; background: var(--dance-carta); padding: calc(var(--spazio) * 1.15) 0; }
.giuria__foto {
  position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 64%; margin: 0;
  /* un occhio di bue: la foto si accende al centro e si perde nella carta da tutti i lati */
  -webkit-mask-image: radial-gradient(ellipse 58% 74% at 60% 52%, #000 52%, rgba(0, 0, 0, .62) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 74% at 60% 52%, #000 52%, rgba(0, 0, 0, .62) 74%, transparent 100%);
}
.giuria__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.giuria__testo { position: relative; max-width: 560px; }
.giuria__righe { margin-top: 20px; font-size: clamp(1.02rem, 1.2vw, 1.12rem); }
.giuria__righe .giuria__primo { font-size: clamp(1.14rem, 1.5vw, 1.34rem); line-height: 1.5; color: var(--inchiostro); }
/* le altre righe col filo d'oro a sinistra, come la frase in evidenza dell'Accademia */
.giuria__righe p:not(.giuria__primo) { padding-left: 18px; border-left: 1.5px solid var(--oro-chiaro); }
.giuria__stella { --w: 34px; --left: max(2%, calc(50% - 700px)); --top: 50px; }
.giuria__puntini { --w: 240px; --left: 36%; --bottom: 26px; --opacita: .55; }

/* ══ Domande frequenti: come nell'Accademia, il titolo a sinistra (fermo mentre si scorre) con la costellazione e la
   danzatrice d'oro, le righe a destra; il «?» nel cerchio lilla e il bordo lilla delle righe, come nel design ══ */
.domande__griglia { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.domande__testa { position: sticky; top: calc(var(--testata) + 28px); }
.domande__costellazione { display: block; width: clamp(180px, 18vw, 260px); height: auto; margin-top: 28px; opacity: .85; }
.domande__danzatrice { display: block; width: clamp(110px, 10vw, 150px); height: auto; margin: 6px 0 0 clamp(60px, 8vw, 120px); --opacita: .55; opacity: .55; }
.domande .faq { margin-top: 0; }
.domande .faq__voce { border-color: var(--dance-riga); box-shadow: 0 14px 30px -26px rgba(89, 7, 120, .5); }
.domande .faq__voce:has([aria-expanded="true"]) { border-color: var(--dance-bordo); background: linear-gradient(150deg, var(--bianco) 40%, var(--dance-scheda)); }
.domande .faq__domanda { position: relative; }
/* il cerchio lilla dietro il «?» del kit: il bianco dell'icona prende il lilla, il filo resta d'oro */
.domande .faq__domanda::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  border-radius: 50%; background: var(--dance-cerchio);
}
.domande .faq__segno { position: relative; mix-blend-mode: multiply; }
.domande__puntini { --w: 300px; --right: -80px; --bottom: 20px; --opacita: .5; }

/* ══ Le foto del concorso: come la galleria dell'Accademia, il titolo e due foto grandi, poi la griglia fitta col video
   (una sola galleria, per il visore). Da computer 6 colonne × 3 righe senza buchi (il video in due righe, due foto
   larghe), da tablet 4 × 4, da telefono 2 colonne (le due foto larghe a tutta riga) ══ */
.galleria__stella { --w: 54px; --right: 2.5%; --top: 36px; --opacita: .9; }
.atd-galleria__insieme.galleria__griglia { display: block; margin-top: 0; }
.atd-galleria__testa { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
/* la riga del profilo (secondo giro del 20/10 sera): come nell'Accademia, il link solo sul nome, il punto fuori */
.galleria .galleria__instagram { margin-top: 16px; max-width: 26em; font-size: 16.5px; line-height: 1.55; color: var(--tenue); }
.galleria__instagram a { color: var(--oro-link); font-weight: 600; text-decoration-color: var(--oro); text-underline-offset: 3px; }
.atd-galleria__evidenza { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.atd-galleria__evidenza .galleria__cella { aspect-ratio: auto; }
.atd-galleria__evidenza .galleria__cella:first-child { aspect-ratio: 1.42; }
.atd-galleria__evidenza .galleria__cella:first-child img { object-position: 50% 62%; }
.atd-galleria__evidenza .galleria__cella:nth-child(2) img { object-position: 50% 50%; }
.atd-galleria__resto { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; margin-top: 12px; }
.atd-galleria__resto .galleria__cella--larga { grid-column: span 2; aspect-ratio: 2.04; }
.atd-galleria__resto .galleria__cella--larga img { object-position: 50% 50%; }
.galleria .galleria__foto, .galleria .galleria__video { border-radius: 14px; box-shadow: 0 0 0 1px rgba(242, 214, 171, .6), 0 16px 34px -24px rgba(89, 7, 120, .55); }

/* ══ Come iscrivere la scuola: la fascia lilla del kit con la danzatrice d'oro, il pulsante e il logo FlamiArt (come
   nell'Accademia), poi il modulo che la sormonta ══ */
.iscrizione { position: relative; }
.iscrizione__invito {
  background: var(--dance-lilla) url("../img/kit/atd-sfondo-sezione-2400.webp") 50% 100% / cover no-repeat;
  padding-bottom: calc(var(--spazio) + 90px);
}
.iscrizione__testo { padding-left: clamp(0px, 13vw, 210px); }
.iscrizione__righe { margin-top: 18px; max-width: 34em; font-size: clamp(1.02rem, 1.2vw, 1.12rem); }
.iscrizione__azione { display: grid; justify-items: center; gap: 18px; justify-self: center; }
.iscrizione__firma { width: clamp(120px, 10vw, 150px); }
.iscrizione__danzatrice { --w: clamp(150px, 13vw, 200px); --left: max(-10px, calc(50% - 760px)); --bottom: 80px; --opacita: .85; }
.iscrizione__stella { --w: 30px; --left: max(15%, calc(50% - 420px)); --top: 40px; }
.iscrizione__modulo { position: relative; z-index: 2; max-width: calc(1000px + 2 * var(--margine)); margin-top: -96px; padding-bottom: var(--spazio); }
.iscrizione .modulo { box-shadow: 0 30px 60px -40px rgba(89, 7, 120, .45); }

/* ══ Schermi medi ══ */
@media (max-width: 1099px) {
  .presentazione__pannello { grid-template-columns: minmax(0, 1fr); }
  .presentazione__ovale { order: 2; max-width: 640px; margin-top: 10px; }
  .presentazione__testo, .giuria__testo, .palco__testo { max-width: none; }
  .presentazione__roma { --w: 380px; --opacita: .3; }
  .presentazione__stella { --left: auto; --right: 6%; --top: 18px; --w: 28px; }
  .palco__griglia { grid-template-columns: minmax(0, 1fr); }
  .palco__scena { justify-items: center; padding: 14px 18px 18px; }
  .palco__arco { width: min(70%, 330px); }
  .palco__ovale { left: max(0px, calc(50% - 300px)); width: clamp(170px, 32vw, 250px); }
  .partecipanti__corpo { padding-top: 44px; }
  .partecipanti__icona { width: 62px; height: 62px; top: -31px; }
  .percorso__passi::before, .percorso__passi::after { display: none; }
  .premio__dittico { grid-template-columns: minmax(0, 1fr); max-width: 620px; justify-items: stretch; row-gap: 52px; }
  .premio__freccia { justify-self: center; rotate: 90deg; margin: -26px 0; }
  .giuria { padding-top: 0; }
  .giuria__foto {
    position: relative; z-index: 0; right: auto; width: auto; aspect-ratio: 16 / 9; margin: 0 0 -8%;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }
  .giuria__foto img { object-position: 50% 62%; }
  .giuria__puntini { display: none; }
  .domande__griglia { grid-template-columns: minmax(0, 1fr); }
  .domande__testa { position: static; }
  .domande__costellazione, .domande__danzatrice { display: none; }
  .atd-galleria__testa { grid-template-columns: minmax(0, 1fr); }
  .atd-galleria__resto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .atd-galleria__resto .galleria__cella--larga { grid-column: auto; aspect-ratio: 1; }
  .iscrizione__testo { padding-left: 0; }
  .iscrizione__azione { justify-self: start; justify-items: start; }
  .iscrizione__danzatrice { --w: 130px; --left: auto; --right: -10px; --bottom: auto; --top: 24px; --opacita: .45; }
  .percorso__roma { --w: 340px; --opacita: .18; }
  .palco__stella--1, .percorso__stella--1, .iscrizione__stella, .partecipanti__costellazione { display: none; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .partecipanti__corpo p { font-size: 1.08rem; }
  .percorso .passo { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; gap: 16px; }
}

/* ══ Telefono ══ */
@media (max-width: 699px) {
  .presentazione__danzatrice { --w: 100px; --right: -20px; --bottom: -10px; --opacita: .35; }
  .presentazione__roma { display: none; }
  .presentazione__stella { --left: auto; --right: 8%; --top: 26px; --w: 26px; }
  .presentazione__ovale { aspect-ratio: 1.12; }
  .presentazione__medaglia { width: 64px; left: 4%; bottom: 0; }
  .palco__firma { padding-left: 84px; min-height: 80px; }
  .palco__danzatrice { --w: 70px; }
  .palco__scena { padding: 14px 16px 18px 26px; }
  .palco__arco { width: min(66vw, 290px); }
  .palco__ovale { left: 0; top: 10%; width: 40vw; }
  .palco__ovale .ovale__foto { border-width: 3px; }
  .palco__puntini { display: none; }

  /* da telefono le schede sono righe: l'icona e il testo, senza foto (mai immagini grandi una sotto l'altra) */
  .partecipanti__elenco { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .partecipanti__foto { display: none; }
  .partecipanti__corpo { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px; }
  .partecipanti__icona { position: static; width: 56px; height: 56px; }
  .partecipanti__corpo p { font-size: 1.08rem; }
  .partecipanti__azione .btn, .percorso__chiusa .btn { width: 100%; }

  /* il filo d'oro scende a sinistra, lungo i cerchi */
  .percorso__passi::before, .percorso__passi::after { display: block; left: 27px; right: auto; top: 28px; bottom: 40px; width: 1.5px; height: auto; }
  .percorso__passi::before { background: linear-gradient(180deg, var(--oro-chiaro), var(--oro) 50%, var(--oro-chiaro)); }
  .percorso__passi::after { left: 33px; top: 34px; width: 1px; }
  .percorso .passo { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; gap: 14px; }
  .percorso .passo p { padding: 14px 16px; }
  .percorso__chiusa { flex-direction: column; align-items: stretch; }
  .percorso__roma { --w: 260px; --right: -40px; --top: 14px; }
  .percorso__stella--2 { display: none; }

  .premio__momento { font-size: 16.5px; padding-top: 46px; }
  .premio__momento .icona__immagine { width: 62px; height: 62px; top: -31px; }
  .premio__attacco { font-size: clamp(1.32rem, 6vw, 1.55rem); padding-top: 44px; }
  .premio__puntini { display: none; }

  .giuria__foto { aspect-ratio: 4 / 3; margin-left: 0; margin-right: 0; }

  .galleria__stella { display: none; }
  .atd-galleria__evidenza { gap: 8px; }
  .atd-galleria__resto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .atd-galleria__resto .galleria__cella--larga { grid-column: span 2; aspect-ratio: 2.04; }

  .domande .faq__domanda::before { left: 12px; width: 34px; height: 34px; margin-top: -17px; }
  .domande__puntini { display: none; }
  .iscrizione__invito { padding-bottom: calc(var(--spazio) + 60px); }
  .iscrizione__azione { justify-self: stretch; justify-items: center; }
  .iscrizione__azione .btn { width: 100%; }
  .iscrizione__danzatrice { --w: 96px; --top: 12px; --opacita: .35; }
  .iscrizione__modulo { margin-top: -64px; }
}

/* ══ Movimento (5-bis): solo quello che è della pagina; il resto è nel sistema (style.css) ══
   l'insegna al neon entra con la hero e la scena si accende; le schede di chi partecipa e i due momenti del premio
   rispondono al mouse (la scheda si alza, la foto si avvicina, l'icona gira appena) */
@keyframes atd-accendi { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
.hero--dance .hero__insegna { animation: sali .9s var(--ease-out) .1s backwards; }
.atd-hero__palco, .atd-hero__luce { animation: atd-accendi 1.4s var(--ease-out) .05s backwards; }
.atd-hero__anello { animation: dissolvi 1.2s ease .5s backwards; }
.hero--dance .atd-hero__motto { animation: sali .8s var(--ease-out) .4s backwards; }
.hero__etichette { animation: sali .8s var(--ease-out) .5s backwards; }
.partecipanti__icona, .premio__momento .icona__immagine { transition: rotate .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .partecipanti__voce:hover, .premio__momento:hover { translate: 0 -6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 56px -34px rgba(89, 7, 120, .5); }
  .partecipanti__voce:hover .partecipanti__foto img { scale: 1.05; }
  .hero--dance .btn--bordo:hover { background: var(--avorio-pannello); }
  .galleria__instagram a:hover { text-decoration-thickness: 2px; }
  .partecipanti__voce:hover .partecipanti__icona, .premio__momento:hover .icona__immagine { rotate: -6deg; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--dance .hero__insegna, .hero--dance .atd-hero__motto, .hero__etichette { animation: dissolvi .6s ease backwards; }
  .atd-hero__palco, .atd-hero__luce { animation: dissolvi .8s ease backwards; }
  .partecipanti__voce:hover, .premio__momento:hover { translate: none; }
  .partecipanti__voce:hover .partecipanti__foto img { scale: none; }
  .partecipanti__voce:hover .partecipanti__icona, .premio__momento:hover .icona__immagine { rotate: none; }
}

/* 20/10, dopo il controllo: da telefono lo sfondo col nastro d'oro si adatta alla larghezza e resta in fondo,
   sotto l'ultimo testo e sotto il logo dell'iscrizione (con «cover» si ingrandiva e saliva sulle righe) */
@media (max-width: 699px) {
  .percorso::before, .iscrizione__invito { background-size: 100% auto; background-position: 50% 100%; }
  .percorso { padding-bottom: calc(var(--spazio) + 64px); }
  .iscrizione__invito { padding-bottom: calc(var(--spazio) + 84px); }
}

/* copy del 20/10 sera: «Scopri come si accede alla finale» resta su una riga anche a 320 px */
@media (max-width: 379px) {
  .hero--dance .hero__azioni .btn { padding-inline: 16px; gap: 8px; font-size: 16px; }
}