/* FlamiArt ETS — la pagina di Balloon Artist Game Show (restyling chiaro, 18/10/2026, voci 3e-3g, 7, 8, 13, 14, 18).
   Dal kit Design/kit-18-10/design-balloon-artist-game-show/ (design v2): solo quello che è di questa pagina, cioè le
   misure e le posizioni delle sue sezioni e i colori misurati sul suo design. Il resto viene dal sistema comune
   (style.css, non si tocca).
   Tornata «4 Step» (20/10/2026, voci 29-31): la finitura della pagina dell'Accademia, col tema di Balloon (azzurro,
   pastello, palloncini, oro). La hero è una scena (palloncini del kit che salgono e ondeggiano, stelle sul filo d'oro);
   le foto stanno in cornici d'oro col nastro e col sigillo tondo che le sormonta; ogni sezione ha i suoi ornamenti del
   kit e cambia ritmo; i titoli sono in due toni; due frasi in corsivo d'oro; bande che sfumano dal bianco. Testi uguali. */

.tema-balloon {
  --cielo: #F6FBFE;              /* la carta della hero e degli sfondi del kit (misurato su 02-hero) */
  --cielo-banda: #EEF8FE;        /* il centro di sfondo-sezione-balloon e sfondo-contatti-balloon (misurato) */
  --rosa-palloncino: #FBEDEA;    /* il rosa dei palloncini del kit (#EBBFB8, misurato su palloncini-pastello) schiarito */
  --blu-notte: #03056C;          /* «Tempo» */
  --viola-palloncino: #860184;   /* «Velocità» */
  --bruno-palloncino: #581900;   /* «Creatività» */
  --magenta-edizione: #D01BA3;   /* «Seconda edizione» */
  --ombra-foto: 0 34px 64px -40px rgba(126, 73, 10, .6);
}

/* ── Il sigillo: il cerchio bianco con l'icona d'oro del kit che sormonta una foto (come le lezioni dell'Accademia) ── */
.sigillo {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bianco);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .5), 0 16px 30px -16px rgba(126, 73, 10, .65);
}
.sigillo img { display: block; width: 100%; height: auto; }

/* ══ Hero: una scena — il logo molto grande sulla carta, la conduttrice nel cerchio azzurro, i palloncini intorno ══ */
/* il logo originale ha il fondo bianco: col «multiply» il bianco prende il colore della carta (il file resta com'è).
   Per farlo, la hero è un gruppo a sé, l'immagine sta sotto il testo e le decorazioni stanno prima del testo. */
.hero--balloon { background: var(--cielo); isolation: isolate; }
.hero--balloon .hero__testo { z-index: auto; }
.hero--balloon .hero__scena { z-index: -1; }
.hero--balloon .hero__logo { mix-blend-mode: multiply; }
.hero__briciole { margin-bottom: clamp(6px, 1vw, 14px); }
.hero--balloon .hero__logo { width: min(100%, 470px); margin-left: -1.5%; }
.hero--balloon .hero__dicitura { margin-top: 0; max-width: 12em; font-size: clamp(2.15rem, 3.2vw, 3.1rem); line-height: 1.05; }
.hero--balloon .hero__intro { margin-top: 14px; max-width: 24em; }
.hero__edizioni { margin-top: 10px; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.45; color: var(--oro-testo); }
.hero__edizioni img { display: inline-block; width: 18px; height: 18px; margin-right: 9px; vertical-align: -3px; }
.hero--balloon .hero__azioni { margin-top: 24px; }
/* le righe passano sopra i fili d'oro della hero: un alone della carta le tiene leggibili */
.hero--balloon .hero__intro, .hero__edizioni { text-shadow: 0 0 6px var(--cielo), 0 0 2px var(--cielo); }

/* i palloncini del kit salgono al caricamento e poi ondeggiano piano; le stelle brillano sul filo d'oro */
@keyframes palloncini-entra { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes palloncini-ondeggia { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-12px) rotate(1.4deg); } }
.balloon-hero__palloncini {
  transform-origin: 70% 100%;
  animation: palloncini-entra .9s var(--ease-out) .35s backwards, palloncini-ondeggia 7s var(--ease-in-out) 1.3s infinite alternate;
  filter: drop-shadow(0 18px 22px rgba(60, 100, 150, .18));
}
.balloon-hero__palloncini--alto { --w: clamp(320px, 28vw, 460px); --right: -5vw; --top: -9%; }
/* specchiato con «scale», così l'ondeggiare (transform) e la profondità (translate) non lo annullano */
.balloon-hero__palloncini--basso {
  --w: clamp(200px, 16.5vw, 270px); --left: 47.5%; --bottom: -1.5%; scale: -1 1; transform-origin: 50% 100%;
  animation-delay: .5s, 1.5s; animation-duration: .9s, 8.5s;
}
.balloon-hero__stella--1 { --w: 44px; --left: max(1%, calc(50% - 712px)); --top: 46%; }
.balloon-hero__stella--2 { --w: 22px; --left: max(1.4%, calc(50% - 704px)); --top: 78%; --opacita: .9; }
.balloon-hero__stella--3 { --w: 70px; --left: 50.5%; --top: 14%; }

@media (min-width: 1200px) {
  .hero--balloon { display: flex; align-items: center; min-height: clamp(660px, 54.17vw, 1000px); }
  .hero--balloon .hero__scena { position: absolute; inset: 0; height: auto; }
  .hero--balloon .hero__foto { object-position: 100% 30%; }
  .hero--balloon .hero__testo {
    position: relative; top: auto; left: auto; transform: none;
    width: clamp(430px, 38vw, 560px);
    margin-left: max(var(--margine), calc((100vw - var(--larghezza)) / 2));
    padding: 22px 0 40px;
  }
  /* la luce dello studio: un riflettore morbido sul cerchio azzurro e l'ombra sotto i piedi della conduttrice */
  .hero--balloon .hero__scena::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(ellipse 13% 3.2% at 64.5% 94.5%, rgba(31, 74, 128, .32), rgba(31, 74, 128, 0) 100%),
      radial-gradient(ellipse 24% 40% at 68% 30%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 100%),
      /* 20/10, dopo il controllo: il velo di carta sotto la colonna del testo, il nastro dell'immagine sfuma prima delle righe */
      linear-gradient(90deg, rgba(246, 251, 254, .96) 0%, rgba(246, 251, 254, .9) 30%, rgba(246, 251, 254, 0) 44%);
  }
}
/* da 1440 px i due pulsanti stanno in fila, come nel design (sporgono un poco dalla colonna, sulla carta) */
@media (min-width: 1440px) {
  .hero--balloon .hero__azioni { width: max-content; flex-wrap: nowrap; }
  .hero--balloon .hero__azioni .btn { flex: none; }
}
@media (max-width: 1199px) {
  .hero--balloon .hero__testo { text-align: center; padding-top: 22px; }
  .hero--balloon .briciole ol { justify-content: center; }
  .hero--balloon .hero__logo { width: min(86%, 440px); margin: 0 auto; }
  .hero--balloon .hero__dicitura, .hero--balloon .hero__intro { margin-left: auto; margin-right: auto; }
  .hero--balloon .hero__azioni { justify-content: center; }
  /* il bordo alto dell'immagine si scioglie nella carta */
  .hero--balloon .hero__scena::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 1;
    background: linear-gradient(180deg, var(--cielo) 10%, rgba(246, 251, 254, 0)); pointer-events: none;
  }
  /* sotto i 1200 px restano i palloncini dell'immagine e una stella sul filo d'oro */
  .balloon-hero__palloncini, .balloon-hero__stella--1, .balloon-hero__stella--2 { display: none; }
  .balloon-hero__stella--3 { --w: 52px; --left: 10%; --top: auto; --bottom: 52%; }
}

/* ══ Un format dedicato alla Balloon Art: la foto nella cornice d'oro, ferma accanto al riquadro azzurro del testo ══ */
.presentazione { padding-top: calc(var(--spazio) * .95); }
.presentazione__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(40px, 5vw, 84px); align-items: start; }
.presentazione__scena { position: relative; isolation: isolate; margin: 18px 0 0 18px; }
.presentazione__foto { aspect-ratio: .92; box-shadow: var(--ombra-foto); border-radius: 20px; }
.presentazione__foto img { object-position: 30% 50%; border-radius: 20px; }
.presentazione__foto::after { inset: -18px 18px 18px -18px; border-radius: 26px; }
.presentazione__nastro { position: absolute; z-index: 2; left: -22%; bottom: -10%; width: 84%; height: auto; rotate: -5deg; pointer-events: none; }
.presentazione__sigillo { position: absolute; z-index: 3; right: -30px; top: 44px; width: 108px; height: 108px; padding: 12px; }
.presentazione__pannello {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(34px, 3.8vw, 58px) clamp(26px, 3.4vw, 54px) clamp(36px, 3.8vw, 58px);
  background:
    radial-gradient(70% 46% at 100% 100%, var(--rosa-palloncino), rgba(251, 237, 234, 0) 100%),
    linear-gradient(160deg, var(--bianco) 0%, var(--cielo) 42%, var(--cielo-banda) 100%);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 34px 64px -42px rgba(126, 73, 10, .5);
}
/* il filo d'oro dentro il riquadro, come una cornice */
.presentazione__pannello::before {
  content: ""; position: absolute; inset: 12px; z-index: -1; pointer-events: none;
  border: 1px solid rgba(230, 190, 119, .5); border-radius: 16px;
}
.presentazione__pannello .titolo { font-size: clamp(2.1rem, 3.1vw, 3rem); }
.presentazione__palloncini { position: absolute; z-index: -1; right: -60px; bottom: -44px; width: 300px; height: auto; pointer-events: none; }
.presentazione__scintille { position: absolute; z-index: -1; right: 36px; top: 34px; width: 26px; height: auto; pointer-events: none; }
.presentazione__testo { margin-top: 20px; max-width: 31em; font-size: clamp(1.02rem, 1.2vw, 1.1rem); line-height: 1.62; }
.presentazione__testo .presentazione__primo { font-size: clamp(1.14rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--inchiostro); }
/* l'ultima riga, in corsivo d'oro (come la frase della «crescita personale» dell'Accademia) */
.presentazione__testo .presentazione__frase {
  margin-top: 1.3em; max-width: 22em; padding-left: clamp(16px, 1.6vw, 22px);
  border-left: 2px solid var(--oro-chiaro);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.28rem, 1.85vw, 1.62rem); line-height: 1.3;
  letter-spacing: -0.005em; color: var(--oro-titolo); text-wrap: balance;
}
.presentazione__azione { position: relative; margin-top: 26px; }
.presentazione__firma { margin-top: 26px; }
.presentazione__stella { --w: 54px; --left: max(1%, calc(50% - 740px)); --top: 18px; --opacita: .85; }
.presentazione__puntini { --w: 300px; --left: -110px; --bottom: 40px; --opacita: .55; }
@media (min-width: 1100px) {
  /* la foto resta accanto al testo mentre si legge */
  .presentazione__scena { position: sticky; top: calc(var(--testata) + 56px); }
}

/* ══ Chi partecipa: la banda che sfuma nel rosa dei palloncini, il testo e l'ovale d'oro coi palloncini dietro ══ */
.partecipa { isolation: isolate; padding-top: calc(var(--spazio) * .8); }
.partecipa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 62% at 78% 52%, var(--rosa-palloncino), rgba(251, 237, 234, 0) 100%),
    radial-gradient(34% 50% at 6% 86%, var(--cielo-banda), rgba(238, 248, 254, 0) 100%);
  /* la banda sfuma sopra e sotto: nessun bordo dritto */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent);
}
.partecipa__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.partecipa__testo { max-width: 620px; }
.partecipa__attacco { margin-top: 20px; color: var(--inchiostro); }
/* le due righe in colonne, con le icone tonde d'oro e i fili d'oro (come il management dell'Accademia) */
.partecipa__colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; padding: 22px 0; border-top: 1px solid var(--oro-velo); border-bottom: 1px solid var(--oro-velo); }
.partecipa__colonna { padding: 2px clamp(16px, 2vw, 28px); font-size: 16.5px; line-height: 1.55; }
.partecipa__colonna:first-child { padding-left: 0; }
.partecipa__colonna + .partecipa__colonna { border-left: 1.5px solid var(--oro-chiaro); }
.partecipa__icona { display: block; width: 58px; height: 58px; margin-bottom: 14px; }
/* il palloncino del kit (decorazione-palloncino-linea) nel cerchio d'oro, come le altre icone */
.partecipa__icona--palloncino { display: grid; padding: 2px; border: 1.5px solid var(--oro); border-radius: 50%; }
.partecipa__icona--palloncino .manca__simbolo { -webkit-mask-size: auto 70%; mask-size: auto 70%; }
.partecipa__azione { margin-top: 26px; }
.partecipa__ovale { width: 100%; max-width: 410px; aspect-ratio: .84; justify-self: center; }
.partecipa__ovale .ovale__foto img { object-position: 50% 30%; }
.partecipa__ovale .ovale__nastro { width: 96%; left: -28%; bottom: 4%; }
.partecipa__palloncini { position: absolute; z-index: -2; top: -15%; right: -46%; width: 92%; height: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 16px 20px rgba(60, 100, 150, .16)); }
.partecipa__stella { position: absolute; z-index: 4; left: -2%; top: 10%; width: 56px; height: auto; pointer-events: none; }
.partecipa__palloncino { --w: 80px; --left: calc(50% + 30px); --top: 14%; --opacita: .7; --ruota: -10deg; }
.partecipa__puntini { --w: 300px; --right: -70px; --bottom: -10px; --opacita: .5; }

/* ══ Come funziona la gara: le quattro prove, schede alte col cerchio dell'icona che le sormonta e il filo d'oro ══ */
.manche { padding-top: calc(var(--spazio) * .8); }
.manche__riga { max-width: 38em; margin-left: auto; margin-right: auto; }
.manche__etichetta { margin-top: 18px; font-size: 13.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-testo); }
.manche__elenco {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px);
  max-width: 1180px; margin: clamp(68px, 6vw, 84px) auto 0;
}
/* il filo d'oro tratteggiato che passa da un cerchio all'altro */
.manche__elenco::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: -1px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--oro) 0 9px, transparent 9px 17px); opacity: .75;
}
.manca {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 70px 18px 30px;
  background: linear-gradient(180deg, var(--manca-fondo, var(--crema)) 0%, var(--bianco) 92%);
  border: 1px solid rgba(255, 255, 255, .95); border-radius: 22px;
  box-shadow: var(--ombra-scheda);
}
/* la stella del kit sotto il nome */
.manca::after {
  content: ""; display: block; width: 16px; height: 16px; margin-top: 14px;
  background: url("../img/kit/stella-quattro-punte-128.webp") center / contain no-repeat; opacity: .9;
}
.manca__icona, .manca__cerchio {
  position: absolute; z-index: 1; top: -46px; left: 50%; margin-left: -46px;
  width: 92px; height: 92px; padding: 8px; border-radius: 50%;
  background: var(--bianco);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 16px 28px -16px rgba(126, 73, 10, .6);
}
.manca__cerchio { display: grid; }
/* il cerchio d'oro disegnato in CSS ha la misura di quello dentro le icone del kit */
.manca__cerchio::after { content: ""; position: absolute; inset: 11px; border: 1.5px solid var(--oro); border-radius: 50%; }
/* il palloncino del kit (decorazione-palloncino-linea) fa da sagoma, nell'oro delle altre icone; il suo filo è
   sottile, quindi la sagoma si ripete spostata di un pixel: il tratto prende il peso delle altre icone */
.manca__simbolo {
  display: block; width: 100%; height: 100%; background: var(--oro-bruno);
  -webkit-mask: url("../img/kit/palloncino-linea-320.webp") 50% 55% / auto 54% no-repeat, url("../img/kit/palloncino-linea-320.webp") calc(50% + 1px) 55% / auto 54% no-repeat, url("../img/kit/palloncino-linea-320.webp") 50% calc(55% + 1px) / auto 54% no-repeat;
  mask: url("../img/kit/palloncino-linea-320.webp") 50% 55% / auto 54% no-repeat, url("../img/kit/palloncino-linea-320.webp") calc(50% + 1px) 55% / auto 54% no-repeat, url("../img/kit/palloncino-linea-320.webp") 50% calc(55% + 1px) / auto 54% no-repeat;
}
.manca__nome { font-family: var(--serif); font-size: clamp(1.45rem, 1.9vw, 1.8rem); line-height: 1.15; color: var(--manca-colore, var(--oro-titolo)); }
.manca__nome::first-letter { text-transform: uppercase; }
.manca--gioco { --manca-fondo: var(--rosa-palloncino); }
.manca--tempo { --manca-fondo: var(--azzurro); --manca-colore: var(--blu-notte); }
.manca--velocita { --manca-fondo: var(--rosa); --manca-colore: var(--viola-palloncino); }
.manca--creativita { --manca-fondo: var(--crema-scheda); --manca-colore: var(--bruno-palloncino); }
.manche__palloncino { --w: 120px; --opacita: .75; }
.manche__palloncino--1 { --left: max(1%, calc(50% - 700px)); --top: 30px; --ruota: -12deg; }
.manche__palloncino--2 { --right: max(1%, calc(50% - 700px)); --top: 50px; --ruota: 10deg; }
.manche__stella { --w: 30px; }
.manche__stella--1 { --left: max(9%, calc(50% - 560px)); --top: 140px; }
.manche__stella--2 { --right: max(9%, calc(50% - 560px)); --top: 30px; }

/* ══ In giuria: la banda azzurra del kit che sfuma dal bianco, il testo e la foto nella cornice d'oro ══ */
.giuria { isolation: isolate; background: var(--cielo) url("../img/kit/sfondo-sezione-balloon-2400.webp") 50% 100% / cover no-repeat; padding: calc(var(--spazio) * 1.1) 0; }
.giuria::before, .giuria::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.giuria::before { top: 0; height: clamp(90px, 11vw, 160px); background: linear-gradient(180deg, var(--bianco), rgba(255, 255, 255, 0)); }
.giuria::after { bottom: 0; height: 40px; background: linear-gradient(0deg, var(--bianco), rgba(255, 255, 255, 0)); }
.giuria__griglia { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 5.6vw, 84px); align-items: center; }
.giuria__testo { max-width: 520px; }
.giuria__attacco { margin-top: 20px; color: var(--inchiostro); }
.giuria__righe { margin-top: 24px; }
.giuria__frase {
  padding-left: clamp(16px, 1.6vw, 22px); border-left: 2px solid var(--oro-chiaro);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.62rem); line-height: 1.3;
  letter-spacing: -0.005em; color: var(--oro-titolo); text-wrap: balance;
}
.giuria__nota {
  display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 16px; align-items: center;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--oro-velo);
  font-size: 16.5px; line-height: 1.5;
}
.giuria__icona { width: 50px; height: 50px; }
.giuria__scena { position: relative; isolation: isolate; margin: 18px 18px 0 0; }
.giuria__scena::before { content: ""; position: absolute; inset: -18px -18px 18px 18px; z-index: -1; border: 1.5px solid var(--oro-chiaro); border-radius: 26px; }
.giuria__foto { aspect-ratio: 16 / 10.4; overflow: hidden; border: 6px solid var(--bianco); border-radius: 22px; box-shadow: var(--ombra-foto); }
.giuria__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.giuria__nastro { position: absolute; z-index: 2; left: -14%; bottom: -15%; width: 68%; height: auto; pointer-events: none; }
.giuria__sigillo { position: absolute; z-index: 3; left: -34px; top: -30px; width: 92px; height: 92px; padding: 20px; }
.giuria__stella { --w: 30px; --left: max(2%, calc(50% - 690px)); --top: 12%; }

/* ══ Le edizioni: la banda pastello che sfuma dietro le schede, le due schede sulla linea del tempo, la terza aperta ══ */
.edizioni { isolation: isolate; }
.edizioni::before {
  content: ""; position: absolute; left: 0; right: 0; top: 42%; bottom: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 56% at 22% 50%, var(--cielo-banda), rgba(238, 248, 254, 0) 100%),
    radial-gradient(38% 56% at 62% 52%, var(--rosa-palloncino), rgba(251, 237, 234, 0) 100%);
}
.edizioni__linea { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(26px, 3vw, 40px); padding-top: 42px; }
.edizioni__linea::before, .edizioni__linea::after { content: ""; position: absolute; top: 11px; height: 2px; }
.edizioni__linea::before { left: 16.5%; width: 33.5%; background: linear-gradient(90deg, var(--oro-chiaro), var(--oro)); }
.edizioni__linea::after { left: 50%; width: 33.5%; background: repeating-linear-gradient(90deg, var(--oro) 0 9px, transparent 9px 17px); }
.edizione {
  position: relative;
  display: flex; flex-direction: column;
  padding: 14px;
  background: var(--edizione-fondo, var(--bianco));
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px;
  box-shadow: var(--ombra-scheda);
}
.edizione::before {
  content: ""; position: absolute; left: 50%; top: -42px; width: 22px; height: 22px; margin-left: -11px;
  border-radius: 50%; background: var(--oro-sfumato);
  box-shadow: 0 0 0 5px var(--bianco), 0 0 0 6.5px var(--oro-velo);
}
.edizione--prima { --edizione-fondo: linear-gradient(180deg, var(--azzurro), var(--bianco) 96%); --edizione-colore: var(--blu-etichetta); }
.edizione--seconda { --edizione-fondo: linear-gradient(180deg, var(--rosa), var(--bianco) 96%); --edizione-colore: var(--magenta-edizione); }
.edizione__media { position: relative; }
.edizione__foto { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 13px; background: var(--bianco); }
.edizione__foto img { width: 100%; height: 100%; object-fit: cover; }
/* 21/10 (collaudo, step 7): la presentatrice ha la testa in cima alla foto; inquadratura dall'alto, anche nell'ingrandimento al passaggio */
.edizione--prima .edizione__foto img { object-position: 50% 0%; transform-origin: 50% 0%; }
.edizione__sigillo { position: absolute; z-index: 1; left: 18px; bottom: -27px; width: 54px; height: 54px; padding: 14px; }
.edizione__corpo { padding: 38px 10px 8px; }
.edizione__nome { font-size: var(--h3); line-height: 1.15; color: var(--edizione-colore); }
.edizione__testo { margin-top: 10px; font-size: 17px; line-height: 1.55; }
.edizione__testo::first-letter { text-transform: uppercase; }
/* la terza: la stessa scheda, ma col filo tratteggiato, ancora da scrivere */
.edizione--terza { padding: clamp(24px, 2.6vw, 34px); background: rgba(255, 255, 255, .94); border: 1.5px dashed var(--oro-chiaro); box-shadow: none; }
.edizione--terza::before { background: var(--bianco); border: 2px dashed var(--oro); box-shadow: 0 0 0 5px var(--bianco); }
.terza__segno { display: grid; place-items: center; width: 72px; height: 72px; border: 1.5px solid var(--oro); border-radius: 50%; background: var(--crema); }
.terza__segno img { width: 56%; height: auto; }
.terza__titolo { margin-top: 18px; font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.terza__titolo em { font-style: normal; color: var(--oro-titolo); }
.terza__testo { margin-top: 12px; font-size: 17px; line-height: 1.55; }
.terza__testo > * + * { margin-top: .45em; }
.terza__azione { margin-top: auto; padding-top: 22px; }
.edizioni__costellazione { --w: 300px; --right: -30px; --top: 10px; --opacita: .8; }

/* ══ Chi organizza: la Roma luminosa del kit che sfuma, il testo e il video nell'arco d'oro davanti a Roma ══ */
.organizza { isolation: isolate; padding: calc(var(--spazio) * 1.05) 0; background: linear-gradient(180deg, var(--bianco), var(--crema) 22%, var(--crema) 78%, var(--bianco)); }
.organizza__griglia { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.organizza__video { position: relative; isolation: isolate; justify-self: end; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; }
/* l'arco: la cima tonda, i piedi appena arrotondati, il filo d'oro spostato dietro */
.organizza__video .galleria__video { border: 6px solid var(--bianco); border-radius: 999px 999px 22px 22px; box-shadow: var(--ombra-foto); }
.organizza__video::after { content: ""; position: absolute; inset: -16px -16px 16px 16px; z-index: -1; border: 2px solid var(--oro-medio); border-radius: 999px 999px 28px 28px; }
.organizza__testo { max-width: 640px; }
.organizza__attacco { margin-top: 20px; color: var(--inchiostro); }
.organizza__righe { margin-top: 14px; }
.organizza__firma { display: inline-block; margin-top: 26px; }
.organizza__roma { --w: min(620px, 48vw); --right: -40px; --bottom: 0; --opacita: .3; }
.organizza__stella { --w: 40px; --left: 4%; --top: 50px; }
.organizza__nastro { --w: min(640px, 46vw); --right: -6%; --bottom: 26px; --opacita: .85; }
@media (min-width: 1100px) {
  .organizza { background: var(--bianco); }
  .organizza::before, .organizza::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .organizza::before { background: url("../img/kit/sfondo-roma-luminoso-1600.webp") 100% 30% / auto 112% no-repeat; }
  .organizza::after {
    background:
      linear-gradient(90deg, var(--bianco) 38%, rgba(255, 255, 255, .55) 54%, rgba(255, 255, 255, 0) 72%),
      linear-gradient(180deg, var(--bianco) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 74%, var(--bianco) 100%);
  }
  .organizza__griglia { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .organizza__video { order: 2; justify-self: center; max-width: 310px; }
  .organizza__roma { display: none; }
}

/* ══ Le foto e i video: il titolo e due foto grandi in testa, poi la galleria in quattro colonne (come l'Accademia) ══ */
.balloon-galleria__insieme.galleria__griglia { display: block; margin-top: 0; }
.balloon-galleria__testa { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.balloon-galleria__profilo { margin-top: 16px; max-width: 24em; font-size: clamp(1.02rem, 1.2vw, 1.1rem); line-height: 1.55; color: var(--tenue); }
.balloon-galleria__profilo .link-freccia { display: inline; }
.balloon-galleria__evidenza { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.balloon-galleria__evidenza .galleria__cella { aspect-ratio: auto; }
.balloon-galleria__evidenza .galleria__cella:first-child { aspect-ratio: 1.42; }
.balloon-galleria__evidenza .galleria__cella:nth-child(2) .galleria__foto img { object-position: 50% 50%; }
/* due video in piedi e dodici foto: 4 colonne x 4 righe senza buchi (anche da tablet), 2 colonne da telefono */
.balloon-galleria__resto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; margin-top: 12px; }
.balloon-galleria__resto .galleria__cella { aspect-ratio: 4 / 3; }
.balloon-galleria__resto .galleria__cella--video { aspect-ratio: auto; }
.balloon-galleria .galleria__foto, .balloon-galleria .galleria__video { border-radius: 14px; box-shadow: 0 16px 34px -26px rgba(126, 73, 10, .55); }
.galleria__stella { --w: 40px; --right: 4%; --top: 40px; }
.balloon-galleria__costellazione { --w: 260px; --left: -80px; --top: -24px; --opacita: .7; }
.lightbox__chiudi img { width: 14px; height: 14px; }

/* ══ Come partecipare: la banda del kit coi palloncini che sfuma dal bianco, e il modulo che la sormonta ══ */
.invito--balloon { isolation: isolate; background-image: url("../img/kit/sfondo-contatti-balloon-2400.webp"); background-position: 50% 50%; padding-bottom: calc(var(--spazio) + 90px); }
.invito--balloon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(80px, 9vw, 130px); pointer-events: none; background: linear-gradient(180deg, var(--bianco), rgba(255, 255, 255, 0)); }
.invito__palloncini { --w: 230px; --left: -60px; --bottom: 80px; transform: scaleX(-1); }
.invito__stella--1 { --w: 44px; --left: max(2%, calc(50% - 690px)); --top: 56%; }
.invito__stella--2 { --w: 22px; --right: max(20%, calc(50% - 360px)); --top: 26%; }
.invito--balloon .invito__testo { padding-left: clamp(0px, 12vw, 190px); }
.invito__titolo { font-size: var(--h2); }
.invito--balloon .invito__titolo { color: var(--inchiostro); }
.contatti__riga { margin-top: 14px; max-width: 30em; }
.contatti__numero { margin-top: 8px; color: var(--testo); }
.contatti__numero a { color: var(--oro-titolo); text-decoration-color: var(--oro); text-underline-offset: 3px; }   /* 21/10: il numero si tocca per chiamare */
.invito--balloon .invito__azione { justify-self: center; }
.contatti__modulo { position: relative; z-index: 2; max-width: calc(1000px + 2 * var(--margine)); margin-top: -96px; padding-bottom: var(--spazio); }

/* ══ Schermi medi ══ */
@media (max-width: 1099px) {
  .presentazione__griglia, .partecipa__griglia, .giuria__griglia, .balloon-galleria__testa { grid-template-columns: minmax(0, 1fr); }
  /* dopo la hero viene prima il testo: mai due immagini grandi di fila */
  .presentazione__pannello { order: -1; }
  .presentazione__scena { width: min(100% - 18px, 720px); justify-self: center; }
  .presentazione__foto { aspect-ratio: 16 / 10; }
  .partecipa__testo, .giuria__testo { max-width: 680px; }
  .partecipa__ovale { max-width: 360px; }
  .manche__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; row-gap: 72px; }
  .manche__elenco::before { display: none; }
  .giuria__scena { width: min(100% - 18px, 760px); }
  .giuria__nastro { width: 56%; bottom: -12%; }
  .edizioni__linea { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edizioni__linea::before { left: 25%; width: 50%; }
  .edizioni__linea::after, .edizione--terza::before { display: none; }
  .edizione--terza {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px;
    grid-template-areas: "segno titolo" "segno testo" "segno azione";
  }
  .terza__segno { grid-area: segno; }
  .terza__titolo { grid-area: titolo; margin-top: 0; }
  .terza__testo { grid-area: testo; }
  .terza__azione { grid-area: azione; }
  .organizza__griglia { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .organizza__nastro { display: none; }
  .invito--balloon .invito__testo { padding-left: 0; }
  .invito--balloon .invito__azione { justify-self: start; }
  .invito__palloncini { display: none; }
  .edizioni__costellazione, .balloon-galleria__costellazione, .presentazione__puntini { display: none; }
  .partecipa__palloncino { --left: 3%; --top: auto; --bottom: 40px; }
  .giuria__stella { --left: auto; --right: 5%; --top: 40px; }
  .manche__palloncino { display: none; }
}

/* ══ Telefono ══ */
@media (max-width: 699px) {
  .hero--balloon .hero__logo { width: min(100%, 340px); }
  .hero--balloon .hero__dicitura { font-size: clamp(1.95rem, 8.8vw, 2.45rem); }
  .hero--balloon .hero__scena::before { background: linear-gradient(180deg, var(--cielo) 18%, rgba(246, 251, 254, 0)); }
  .balloon-hero__stella--3 { display: none; }
  .hero--balloon .hero__azioni .btn, .invito--balloon .invito__azione .btn { gap: 10px; padding-left: 18px; padding-right: 18px; font-size: 16.5px; }

  .presentazione__pannello { padding-bottom: 104px; border-radius: 20px; }
  .presentazione__pannello::before { inset: 9px; border-radius: 13px; }
  .presentazione__palloncini { width: 210px; right: -50px; bottom: -40px; }
  .presentazione__scintille { right: 20px; top: 20px; width: 20px; }
  .presentazione__stella { display: none; }
  .presentazione__scena { margin: 14px 0 0 14px; width: calc(100% - 14px); }
  .presentazione__foto::after { inset: -14px 14px 14px -14px; border-radius: 22px; }
  .presentazione__sigillo { right: -6px; top: auto; bottom: -28px; width: 78px; height: 78px; padding: 9px; }
  .presentazione__nastro { left: -18%; bottom: -14%; width: 80%; }
  .presentazione__azione .btn { width: 100%; }

  .partecipa::before { background: radial-gradient(70% 34% at 60% 82%, var(--rosa-palloncino), rgba(251, 237, 234, 0) 100%); }
  .partecipa__colonne { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .partecipa__colonna, .partecipa__colonna:first-child { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 0; }
  .partecipa__colonna + .partecipa__colonna { border-left: 0; border-top: 1px solid var(--oro-velo); margin-top: 16px; padding-top: 16px; }
  .partecipa__icona { width: 48px; height: 48px; margin: 0; }
  .partecipa__puntini { --w: 190px; --top: 0; --bottom: auto; --right: -60px; --opacita: .45; }
  .partecipa__ovale { max-width: 290px; margin-top: 10px; }
  .partecipa__palloncini { right: -30%; width: 74%; }
  .partecipa__stella { width: 42px; }
  .partecipa__palloncino { --w: 64px; --left: 2%; --top: auto; --bottom: 24px; }

  .manche__elenco { gap: 64px 12px; margin-top: 64px; }
  .manca { padding: 48px 10px 18px; border-radius: 18px; }
  .manca__icona, .manca__cerchio { top: -36px; margin-left: -36px; width: 72px; height: 72px; padding: 6px; }
  .manca__cerchio::after { inset: 8px; }
  .manca__nome { font-size: 1.3rem; }
  .manca::after { margin-top: 10px; width: 13px; height: 13px; }
  .manche__palloncino { --w: 70px; --opacita: .5; }
  .manche__palloncino--1 { --top: 14px; }
  .manche__palloncino--2 { --top: 14px; }
  .manche__stella { display: none; }

  .giuria__scena { width: calc(100% - 14px); margin: 14px 14px 0 0; }
  .giuria__scena::before { inset: -14px -14px 14px 14px; border-radius: 22px; }
  .giuria__foto { border-width: 4px; border-radius: 18px; }
  .giuria__sigillo { left: -6px; top: -24px; width: 68px; height: 68px; padding: 11px; }
  .giuria__nota { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .giuria__icona { width: 44px; height: 44px; }
  .giuria__stella { display: none; }

  /* la linea del tempo scende in verticale */
  .edizioni__linea { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 0; padding-left: 30px; }
  .edizioni__linea::before { top: 22px; bottom: 34%; left: 10px; width: 2px; height: auto; background: linear-gradient(180deg, var(--oro-chiaro), var(--oro)); }
  .edizioni__linea::after { display: block; top: auto; bottom: 0; left: 10px; width: 2px; height: 34%; background: repeating-linear-gradient(180deg, var(--oro) 0 9px, transparent 9px 17px); }
  .edizione::before, .edizione--terza::before { display: block; left: -30px; top: 22px; margin-left: 0; width: 20px; height: 20px; }
  .edizione--terza { display: flex; padding: 22px 20px; }
  .terza__titolo { margin-top: 16px; }
  .edizioni::before { top: 20%; background: radial-gradient(70% 30% at 40% 30%, var(--cielo-banda), rgba(238, 248, 254, 0) 100%), radial-gradient(70% 30% at 60% 62%, var(--rosa-palloncino), rgba(251, 237, 234, 0) 100%); }

  .organizza__griglia { grid-template-columns: minmax(0, 1fr); }
  .organizza__video { order: 2; justify-self: center; max-width: 236px; margin-top: 8px; }
  .organizza__video::after { inset: -12px -12px 12px 12px; }
  .organizza__roma { --w: 300px; --right: -60px; }

  .balloon-galleria__evidenza { gap: 8px; margin-top: 4px; }
  .balloon-galleria__resto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .galleria__stella { display: none; }

  .invito--balloon { padding-bottom: calc(var(--spazio) + 60px); background-position: 50% 50%; }
  .invito__stella--1 { --w: 34px; --left: auto; --right: 8%; --top: 34px; }
  .invito__stella--2 { display: none; }
  .contatti__modulo { margin-top: -64px; }
}

/* ══ Movimento (5-bis, 18/10/2026; «4 Step», 20/10): solo quello che è della pagina; il resto è nel sistema ══ */
/* le schede delle manche e delle edizioni rispondono al mouse; la linea del tempo si disegna (reveal--fili);
   i sigilli girano appena quando ci si passa sopra; i palloncini della hero ondeggiano (sopra) */
.edizione__foto img { transition: scale .7s var(--ease-out); }
.manca__icona, .manca__cerchio, .sigillo { transition: rotate .3s var(--ease-out); }
.presentazione__foto img, .giuria__foto img { transition: scale .8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .manca:hover, .edizione:hover { translate: 0 -6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 56px -34px rgba(126, 73, 10, .5); }
  .manca:hover .manca__icona, .manca:hover .manca__cerchio { rotate: -8deg; }
  .edizione:hover .edizione__foto img { scale: 1.05; }
  .edizione:hover .edizione__sigillo, .presentazione__scena:hover .sigillo, .giuria__scena:hover .sigillo { rotate: 12deg; }
  .presentazione__scena:hover .presentazione__foto img, .giuria__scena:hover .giuria__foto img { scale: 1.04; }
}
@media (prefers-reduced-motion: reduce) {
  .balloon-hero__palloncini { animation: dissolvi .6s ease backwards; }
  .manca:hover, .edizione:hover { translate: none; }
  .edizione:hover .edizione__foto img, .presentazione__scena:hover .presentazione__foto img, .giuria__scena:hover .giuria__foto img { scale: none; }
  .manca:hover .manca__icona, .manca:hover .manca__cerchio, .edizione:hover .edizione__sigillo, .presentazione__scena:hover .sigillo, .giuria__scena:hover .sigillo { rotate: none; }
}

/* da telefono le decorazioni che toccherebbero i titoli restano fuori */
@media (max-width: 699px) { .manche__palloncino--1, .manche__palloncino--2, .organizza__stella { display: none; } }
@media (max-width: 359px) { .partecipa__puntini { display: none; } }

/* design v1 (20/10/2026): il testo del sito passa in Source Sans 3; i nomi delle prove e le frasi in evidenza restano in Playfair */
.manca__nome, .presentazione__testo .presentazione__frase, .giuria__frase { font-family: var(--serif); }

/* copy del 20/10 sera: «Contattaci per la terza edizione» resta su una riga da telefono */
@media (max-width: 699px) {
  .terza__azione .btn { padding-inline: 18px; gap: 9px; }
}