/* FlamiArt ETS — SISTEMA COMUNE del restyling chiaro (18/10/2026, Modifiche/2026-10-18.md).
   Dai 4 kit di ChatGPT in Design/kit-18-10/ (home: design-flamiart-chiaro, v2): fondo chiaro ovunque,
   oro nei pulsanti, nelle cornici e nei simboli, il nero solo nelle scritte e nei loghi.
   Colori misurati sul design con confronta-design.py --colori e campionati sulle zone (titoli, schede,
   pulsanti, etichette). Le classi e i componenti sono descritti in Design/SISTEMA-18-10.md: chi costruisce
   una pagina usa questi e scrive solo il suo assets/css/<pagina>.css, senza toccare questo file.
   Movimento: non ancora (arriva al 5-bis); qui solo i passaggi di stato che servono all'uso. */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic.woff2") format("woff2");
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mrs Saint Delafield";
  src: url("../fonts/mrs-saint-delafield.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ── fondi (misurati) ── */
  --bianco: #FFFFFF;
  --crema: #FEFAF0;            /* hero, a sinistra */
  --crema-scheda: #FEF8EE;     /* scheda di Élite */
  --crema-etichetta: #FDF2DB;  /* etichetta «MODA» */
  --rosa: #FEF0FD;             /* scheda di All Together Dance */
  --rosa-etichetta: #FDC6FC;   /* etichetta «DANZA» */
  --azzurro: #EDF8FE;          /* scheda di Balloon Artist Game Show */
  --azzurro-etichetta: #DAEDFC;/* etichetta «CREATIVITÀ» */

  /* ── scritte (misurate) ── */
  --inchiostro: #120000;       /* titoli: «Tre progetti.» */
  --testo: #434957;            /* testo: sottotitolo della hero */
  --tenue: #656974;            /* righe sotto i titoli */
  --menu: #3C3D42;             /* voci del menu */
  --oro-titolo: #7E490A;       /* «Infinite possibilità.», «insieme.», titolo della hero */
  --oro-testo: #975B35;        /* scritte dei pulsanti col bordo d'oro */

  /* ── oro (misurato su pulsante-oro.png e sulle linee del design) ── */
  --oro-chiaro: #E6BE77;
  --oro-medio: #DCAE61;
  --oro: #C99239;              /* simboli, cerchi delle icone */
  --oro-bruno: #B47A23;
  --oro-scuro: #A76E1E;
  --oro-linea: #DAA13A;        /* filo sotto la testata */
  --oro-velo: #F2D6AB;         /* filo del piede, bordi leggeri */
  --bordo-oro: #C69847;        /* pulsante-bordo-oro.png */
  --linea: #CEC3BB;            /* divisori del piede */

  /* ── i tre progetti (misurati sulle schede e sulle etichette) ── */
  --magenta: #E102B2;          /* All Together Dance */
  --blu: #0128F6;              /* Balloon Artist Game Show */
  --viola: #593B98;            /* scritta «DANZA» */
  --bruno-etichetta: #9D6639;  /* scritta «MODA» */
  --blu-etichetta: #275BF6;    /* scritta «CREATIVITÀ» */

  /* ── il tema di una sezione o di una pagina (si cambia con .tema-…) ── */
  --accento: var(--oro-titolo);
  --accento-testo: var(--oro-testo);   /* lo stesso colore, abbastanza scuro per le scritte piccole (AA) */
  --tinta: var(--crema-scheda);
  --etichetta: var(--crema-etichetta);
  --etichetta-testo: var(--bruno-etichetta);

  --oro-sfumato: linear-gradient(180deg, var(--oro-chiaro) 0%, var(--oro-medio) 18%, var(--oro) 50%, var(--oro-bruno) 76%, var(--oro-scuro) 100%);
  --ombra-morbida: 0 22px 46px -30px rgba(126, 73, 10, .38);
  --ombra-scheda: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 44px -32px rgba(126, 73, 10, .42);

  --serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --mano: "Mrs Saint Delafield", "Snell Roundhand", cursive;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entrate e uscite */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* cose che si spostano o si disegnano sullo schermo */

  --margine: clamp(16px, 4vw, 64px);
  --larghezza: 1320px;
  --testata: 100px;
  --spazio: clamp(56px, 6.2vw, 92px);       /* due terzi di prima (voce 7) */
  --spazio-stretto: clamp(40px, 4.4vw, 64px);
  --h1: clamp(2.5rem, 4.2vw, 4.25rem);
  --h2: clamp(2.05rem, 3.6vw, 3.45rem);
  --h3: clamp(1.4rem, 1.9vw, 1.75rem);
}
@media (max-width: 1099px) { :root { --testata: 76px; } }
@media (max-width: 699px) { :root { --testata: 68px; } }

/* ══ Base ══ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata) + 12px);
}
html.menu-aperto, html.foto-aperta { overflow: hidden; }
body {
  margin: 0;
  background: var(--bianco);
  color: var(--testo);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; color: var(--inchiostro); line-height: 1.1; }
p { margin: 0; }
p, li { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: inherit; }
a, button, select, label, summary { touch-action: manipulation; }
button, input, select, textarea { font: inherit; color: inherit; }
.unito { white-space: nowrap; }
.visivo-nascosto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  padding: 10px 18px; border-radius: 999px;
  background: var(--bianco); color: var(--inchiostro); border: 1.5px solid var(--bordo-oro);
  text-decoration: none;
}
.salta:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin: 0 auto;
  padding-left: max(var(--margine), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
}
.contenitore--stretto { max-width: calc(1000px + 2 * var(--margine)); }

/* ══ Sezioni: sempre chiare ══ */
.sezione { position: relative; padding: var(--spazio) 0; overflow-x: clip; }
.sezione--stretta { padding: var(--spazio-stretto) 0; }
.sezione--crema { background: var(--crema); }
.sezione--tinta { background: var(--tinta); }
/* la carta con la pennellata d'oro del kit (sfondo-sezione-senza-contenuti) */
/* la carta con l'onda d'oro del kit (sfondo-sezione-senza-contenuti): si usa solo la fascia dell'onda, in fondo,
   e il suo bordo alto sfuma nella carta: nessuna riga dritta. Le stelle del file restano fuori (ci sono le .deco) */
.sezione--carta { isolation: isolate; background: var(--crema); padding-bottom: calc(var(--spazio) + clamp(56px, 7vw, 120px)); }
.sezione--carta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  height: clamp(120px, 15vw, 230px);
  background: url("../img/kit/sfondo-sezione-2400.webp") 50% 84% / max(100%, 1100px) auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.sezione > .contenitore { position: relative; z-index: 1; }

/* ══ Titoli ══ */
.titolo {
  font-size: var(--h2);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
/* la seconda parte del titolo in oro, come nel design («Tre progetti. Infinite possibilità.») */
.titolo em, .titolo .oro { font-style: normal; color: var(--oro-titolo); }
.titolo--grande { font-size: var(--h1); }
.titolo--medio { font-size: var(--h3); line-height: 1.16; letter-spacing: -0.01em; }
.titolo--oro { color: var(--oro-titolo); }
.occhiello {
  display: block; margin-bottom: 14px;
  font-size: 13px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--oro-testo);
}
.intestazione { position: relative; z-index: 1; }
.intestazione--centro { max-width: 860px; margin: 0 auto; text-align: center; }
.intestazione__riga { margin-top: 14px; font-size: clamp(1.04rem, 1.3vw, 1.16rem); color: var(--tenue); }
.intestazione__riga + .intestazione__riga { margin-top: 4px; }
/* titolo a sinistra e un pulsante o una riga a destra (come «Le nostre emozioni, in scena.») */
.intestazione--fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 48px; flex-wrap: wrap; }
.intestazione--fila > :first-child { max-width: 760px; }
.attacco { font-size: clamp(1.14rem, 1.55vw, 1.38rem); line-height: 1.5; color: var(--testo); }
.testo > * + * { margin-top: .75em; }
.testo a, .attacco a { color: var(--oro-titolo); text-decoration-color: var(--oro); text-underline-offset: 3px; }
/* la frase scritta a mano (Mrs Saint Delafield) */
.scritta-mano {
  font-family: var(--mano);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.12;
  color: var(--oro-titolo);
}

/* ══ Pulsanti: oro pieno o bordo d'oro (pulsante-oro.png, pulsante-bordo-oro.png) ══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 12px 30px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: .005em;
  text-align: center; text-decoration: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: transform .14s var(--ease-out), box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, filter .25s ease;
}
.btn:active { transform: scale(0.97); }
.btn--oro {
  color: var(--bianco);
  background: var(--oro-sfumato);
  border-color: var(--oro-bruno);
  text-shadow: 0 1px 1px rgba(126, 73, 10, .45);
  box-shadow: 0 12px 24px -14px rgba(167, 110, 30, .8), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn--bordo { color: var(--oro-testo); background: rgba(255, 255, 255, .82); border-color: var(--bordo-oro); }
/* il bordo nel colore del progetto (le schede del design: rosa, oro, blu) */
.btn--accento { color: var(--accento-testo); background: var(--bianco); border-color: var(--accento); }
.btn--piccolo { min-height: 46px; padding: 10px 22px; font-size: 16px; }
.btn--largo { width: 100%; }
/* le icone dei pulsanti prendono il colore della scritta: il file del kit fa da sagoma */
.ico {
  flex: none; display: inline-block; width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
/* le versioni «ui-» sono le icone del kit col tratto ingrossato, per restare leggibili a 12-16 px */
.ico--freccia { --ico: url("../img/kit/ui-freccia-destra.webp"); }
.ico--giu { --ico: url("../img/kit/ui-freccia-basso.webp"); }
.ico--piu { --ico: url("../img/kit/ui-piu.webp"); }
.ico-wa { flex: none; width: 20px; height: 20px; fill: currentColor; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.azioni--centro { justify-content: center; }
/* il collegamento con la freccia */
.link-freccia {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--oro-titolo); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--oro-velo); padding-bottom: 2px;
}

/* ══ Testata ══ */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--bianco);
  transition: box-shadow .25s ease;
}
.testata::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--oro-velo), var(--oro-linea) 22%, var(--oro-chiaro) 50%, var(--oro-linea) 78%, var(--oro-velo));
}
.testata.scorsa { box-shadow: 0 12px 30px -24px rgba(126, 73, 10, .5); }
.testata__barra {
  height: var(--testata);
  display: flex; align-items: center; gap: 20px;
  width: 100%; max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin: 0 auto;
  padding-left: max(var(--margine), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
}
.testata__logo { flex: none; display: block; }
.testata__logo img { height: 76px; width: auto; }
.menu { margin-left: auto; }
.menu > ul { display: flex; align-items: center; gap: clamp(18px, 2.3vw, 40px); }
.menu a, .menu__apri {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 0; background: none; border: 0;
  font-size: 17px; color: var(--menu); text-decoration: none; cursor: pointer;
}
.menu a::after, .menu__apri::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px;
  background: var(--oro); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.menu__apri .ico { width: 12px; height: 12px; color: var(--oro); transition: transform .2s var(--ease-out); }
.menu__apri[aria-expanded="true"] .ico { transform: rotate(180deg); }
.menu__gruppo { position: relative; }
.menu__tendina {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; z-index: 5;
  min-width: 270px; padding: 10px;
  background: var(--bianco); border: 1px solid var(--oro-velo); border-radius: 16px;
  box-shadow: 0 26px 50px -28px rgba(126, 73, 10, .45);
}
.menu__tendina[hidden] { display: none; }
.menu .menu__tendina a { display: flex; padding: 11px 14px; border-radius: 10px; font-size: 16.5px; }
.menu .menu__tendina a::after { display: none; }
.testata__cta { flex: none; margin-left: clamp(8px, 1.6vw, 24px); }
.testata__apri {
  display: none;
  margin-left: auto; width: 48px; height: 48px; padding: 10px;
  background: var(--bianco); border: 1.5px solid var(--bordo-oro); border-radius: 50%;
  cursor: pointer;
  transition: transform .14s var(--ease-out);
}
.testata__apri:active { transform: scale(0.95); }
.testata__apri img { width: 100%; height: 100%; }

/* il menu da telefono: chiaro, a tutto schermo */
.menu-telefono {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  padding: 0 max(var(--margine), env(safe-area-inset-left, 0px)) calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--crema);
  isolation: isolate;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .16s ease;   /* si chiude più in fretta di come si apre */
}
.menu-telefono::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  height: 34%; min-height: 180px;
  background: url("../img/kit/sfondo-sezione-2400.webp") 34% 84% / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%); mask-image: linear-gradient(180deg, transparent, #000 50%);
}
.menu-telefono[hidden] { display: none; }
.menu-telefono.aperto { opacity: 1; transition-duration: .26s; }
.menu-telefono__testa { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--testata); border-bottom: 1px solid var(--oro-velo); }
.menu-telefono__logo { height: 54px; width: auto; }
.menu-telefono__chiudi {
  width: 48px; height: 48px; padding: 12px;
  background: var(--bianco); border: 1.5px solid var(--bordo-oro); border-radius: 50%; cursor: pointer;
}
.menu-telefono__chiudi img { width: 100%; height: 100%; }
.menu-telefono nav { padding: 12px 0 24px; }
.menu-telefono nav > ul > li { border-bottom: 1px solid var(--oro-velo); }
.menu-telefono nav a { display: flex; align-items: center; min-height: 56px; padding: 8px 0; font-size: 24px; color: var(--inchiostro); text-decoration: none; }
.menu-telefono__gruppo { padding: 14px 0 10px; }
.menu-telefono__etichetta { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--oro-testo); }
.menu-telefono__gruppo ul { margin-top: 4px; }
.menu-telefono .menu-telefono__gruppo a { min-height: 48px; font-size: 19px; padding-left: 16px; border-left: 1.5px solid var(--oro-velo); }
.menu-telefono__cta { margin-top: auto; width: 100%; }

/* ══ Hero: l'immagine del kit a tutta larghezza, il testo sulla carta a sinistra ══
   Base (come dal 18/10, la usano anche le pagine): .hero > .hero__testo + .hero__scena > picture.
   Variante della home .hero--carta: picture e svg dentro .hero__quadro, l'immagine intera spostata a destra di un
   decimo per lasciare la carta a logo, testo e due pulsanti in fila; si taglia solo sotto. */
.hero { position: relative; background: var(--crema); overflow: hidden; }
.hero__scena { position: relative; }
.hero__quadro { position: absolute; inset: 0; }
.hero__foto { width: 100%; height: auto; }
.hero__anello { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hero__anello--telefono { display: none; }
.hero__testo { position: relative; z-index: 2; }
.hero__titolo { font-weight: 500; }
.hero__logo { display: block; width: min(100%, 31vw, 480px); height: auto; }
.hero__dicitura {
  display: block; margin-top: 18px;
  font-size: var(--h1); line-height: 1.02; letter-spacing: -0.022em;
  color: var(--oro-titolo); text-wrap: balance;
}
.hero__intro { margin-top: 18px; max-width: 25em; font-size: clamp(1.08rem, 1.42vw, 1.32rem); line-height: 1.5; color: var(--testo); }
.hero__azioni { margin-top: 28px; }
@media (min-width: 1200px) {
  .hero__scena { height: max(600px, min(54.17vw, calc(100svh - var(--testata)))); }
  .hero__scena > picture, .hero__quadro picture, .hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__foto { object-fit: cover; object-position: 100% 50%; }
  .hero__testo {
    position: absolute; top: 50%; z-index: 2;
    left: max(var(--margine), calc((100vw - var(--larghezza)) / 2));
    width: min(31vw, 520px);
    transform: translateY(-50%);
  }
  .hero--carta .hero__scena { height: max(600px, min(48.75vw, max(calc(100svh - var(--testata)), 44vw))); }
  .hero--carta .hero__quadro { left: 10vw; }
  .hero--carta .hero__foto {
    object-position: 100% 0;
    /* il bordo sinistro sfuma nella carta; le stelline stampate in alto a sinistra della foto (sotto il logo) si tolgono */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%), radial-gradient(ellipse 16% 30% at 11% 30%, transparent 72%, #000 100%);
    mask-image: linear-gradient(90deg, transparent, #000 9%), radial-gradient(ellipse 16% 30% at 11% 30%, transparent 72%, #000 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .hero--carta .hero__testo { left: clamp(var(--margine), calc((100vw - var(--larghezza)) / 2), 6vw); width: min(40vw, 580px); }
  .hero--carta .hero__logo { width: min(100%, 36vw, 540px); }
  .hero--carta .hero__intro { margin-top: 22px; }
  .hero--carta .hero__azioni { gap: 12px; }
  .hero--carta .hero__azioni .btn { padding: 12px 20px; font-size: 15.5px; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  .hero--carta .hero__quadro { left: 12vw; }
  .hero--carta .hero__azioni { gap: 10px; }
  .hero--carta .hero__azioni .btn { padding: 10px 15px; gap: 9px; font-size: 14.5px; }
  .hero--carta .hero__azioni .ico-wa { width: 18px; height: 18px; }
}
@media (max-width: 1199px) {
  .hero__testo { padding: 28px max(var(--margine), env(safe-area-inset-left, 0px)) 8px; }
  .hero__logo { width: min(100%, 420px); }
  .hero__dicitura { max-width: 11em; }
  .hero__scena { aspect-ratio: 3 / 2; }
  .hero__scena > picture, .hero__quadro picture, .hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__foto { object-fit: cover; object-position: 100% 50%; }
}
@media (max-width: 699px) {
  .hero__testo { padding-top: 22px; }
  .hero__logo { width: min(100%, 300px); }
  .hero__dicitura { font-size: clamp(2.3rem, 10.4vw, 2.9rem); margin-top: 14px; }
  .hero__intro { margin-top: 16px; font-size: 1.04rem; line-height: 1.48; }
  .hero__azioni { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__azioni .btn { width: 100%; }
  /* l'immagine verticale sale sotto i pulsanti: il suo cielo chiaro fa da carta */
  .hero__scena { aspect-ratio: 1080 / 1600; margin-top: -26vw; z-index: 1; }
  .hero__scena::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 1;
    background: linear-gradient(180deg, var(--crema) 18%, rgba(254, 250, 240, 0));
    pointer-events: none;
  }
  .hero__foto { object-position: 50% 50%; }
  .hero__anello--computer { display: none; }
  .hero__anello--telefono { display: block; z-index: 2; }
}

/* ══ Schede (le tre del design: tinta del progetto, logo, foto, titolo, pulsante) ══ */
.schede { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.9vw, 28px); margin-top: clamp(32px, 3.8vw, 52px); }
.scheda {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(12px, 1.2vw, 16px);
  background: var(--tinta);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 16px;
  box-shadow: var(--ombra-scheda);
}
.scheda__media { display: grid; gap: 10px; }
.scheda__logo, .scheda__foto { display: block; overflow: hidden; border-radius: 10px; }
.scheda__logo { aspect-ratio: 6 / 5; background: var(--bianco); }
.scheda__logo img { width: 100%; height: 100%; object-fit: contain; }
.scheda__logo--pieno img { object-fit: cover; }
/* i loghi si usano così come sono: quello di Élite è oro su nero (Dubbi 3), e il riquadro prende il suo nero */
.scheda__logo--nero { background: #000; }
.scheda__foto { aspect-ratio: 3 / 2; background: var(--bianco); }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; }
.scheda__corpo { flex: 1; display: flex; flex-direction: column; padding: 22px clamp(4px, .6vw, 10px) 6px; }
.scheda__titolo { font-size: var(--h3); line-height: 1.15; }
.scheda__titolo a { text-decoration: none; }
.scheda__nome { display: block; color: var(--accento); }
.scheda__nome .oro { color: var(--oro-titolo); }
/* «Élite Fashion Academy» nero e «& Management» oro, come nella scheda del design */
.scheda__nome:has(.oro) { color: var(--inchiostro); }
.scheda__sottotitolo { display: block; margin-top: 6px; font-size: .64em; line-height: 1.3; color: var(--inchiostro); letter-spacing: 0; }
.scheda__testo { margin-top: 14px; font-size: 16.5px; line-height: 1.58; }
.scheda__testo > * + * { margin-top: .6em; }
.scheda__azione { margin-top: auto; padding-top: 24px; }

/* le etichette con il simbolo (materie, ruoli): un elenco a pillole */
.pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.pillola {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 4px 14px 4px 5px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--bordo-oro); border-radius: 999px;
  font-size: 15px; line-height: 1.2; color: var(--inchiostro);
}
.pillola img { width: 32px; height: 32px; flex: none; }

/* ══ Il pannello largo: foto in cornice da una parte, testo dall'altra ══ */
.pannello { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pannello--inverso > :first-child { order: 2; }

/* ══ Cornici e ovali d'oro (cornice-foto-*.png, l'ovale di «L'arte ci fa crescere») ══ */
.cornice { position: relative; border-radius: 14px; }
.cornice img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.cornice::after {
  content: ""; position: absolute; inset: -10px 10px 10px -10px; z-index: -1;
  border: 1.5px solid var(--oro-chiaro); border-radius: 18px;
}
.ovale { position: relative; isolation: isolate; aspect-ratio: 1.18; }
.ovale__foto { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(126, 73, 10, .6); }
.ovale__foto img { width: 100%; height: 100%; object-fit: cover; }
.ovale::before, .ovale::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.ovale::before { inset: -16px -8px -4px -22px; border: 2.5px solid var(--oro-chiaro); rotate: -5deg; z-index: -1; }
.ovale::after { inset: -6px -20px -14px -6px; border: 1.5px solid var(--oro); rotate: 4deg; z-index: 2; border-color: var(--oro) transparent transparent var(--oro); }
.ovale__nastro { position: absolute; z-index: 3; pointer-events: none; width: 78%; left: -14%; bottom: -10%; rotate: -8deg; }

/* ══ Il cerchio d'oro con l'icona del kit, e la sua etichetta ══ */
.icone { display: flex; flex-wrap: wrap; gap: 18px clamp(20px, 3vw, 44px); }
.icona { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 16.5px; line-height: 1.35; color: var(--testo); }
.icona__cerchio {
  flex: none; display: grid; place-items: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--bianco); border: 1.5px solid var(--oro);
  box-shadow: 0 12px 24px -18px rgba(126, 73, 10, .55);
}
.icona__cerchio img { width: 42%; height: 42%; object-fit: contain; }
/* le icone del kit che hanno già il cerchio (icona-formazione, icona-spettacolo…) */
.icona__immagine { width: 78px; height: 78px; flex: none; }

/* ══ Gruppi in colonna (schede chiare col bordo d'oro: scheda-vuota.png) ══ */
.gruppi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 3.4vw, 48px); }
.gruppo {
  position: relative;
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--bianco);
  border: 1px solid var(--oro-velo); border-radius: 20px;
  box-shadow: var(--ombra-morbida);
}
.gruppo__icona { width: 72px; height: 72px; }
.gruppo__titolo { margin-top: 16px; font-size: var(--h3); }
.gruppo .elenco { margin-top: 14px; }
.elenco { display: grid; gap: 10px; }
.elenco li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.55; }
.elenco li::before {
  content: ""; position: absolute; left: 3px; top: .58em; width: 8px; height: 8px;
  background: url("../img/kit/rombo-64.webp") center / contain no-repeat;
}
.elenco a { color: var(--oro-titolo); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* ══ Passi numerati (come «Dalla tua regione alla finale») ══ */
.passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(20px, 2.6vw, 40px); margin-top: clamp(28px, 3.4vw, 44px); counter-reset: passo; }
.passo { counter-increment: passo; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--bianco); border: 1.5px solid var(--accento);
  font-size: 26px; line-height: 1; color: var(--accento);
  font-variant-numeric: lining-nums;
}
.passo p { padding-top: 6px; font-size: 17px; line-height: 1.5; }
.passo a { color: var(--oro-titolo); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* ══ Domande frequenti: righe chiare col «?» e la freccia (riga-faq-vuota.png) ══ */
.faq { display: grid; gap: 12px; margin-top: clamp(28px, 3.4vw, 44px); }
.faq__voce {
  background: var(--bianco);
  border: 1px solid var(--oro-velo); border-radius: 16px;
  box-shadow: 0 12px 26px -24px rgba(126, 73, 10, .45);
  transition: border-color .2s ease;
}
.faq__titolo { font-size: inherit; font-weight: inherit; line-height: inherit; }
.faq__domanda {
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 66px; padding: 12px 22px 12px 14px;
  background: none; border: 0; border-radius: 16px;
  text-align: left; font-size: 18px; line-height: 1.35; color: var(--inchiostro); cursor: pointer;
}
.faq__segno { flex: none; width: 40px; height: 40px; }
.faq__domanda > span:not(.ico) { flex: 1; }
.faq__domanda .ico { width: 15px; height: 15px; color: var(--oro); transition: transform .22s var(--ease-out); }
.faq__domanda[aria-expanded="true"] .ico { transform: rotate(180deg); }
.faq__voce:has([aria-expanded="true"]) { border-color: var(--oro-chiaro); }
.faq__risposta { padding: 0 24px 20px 70px; font-size: 17px; color: var(--testo); }
.faq__risposta[hidden] { display: none; }
.faq__risposta a { color: var(--oro-titolo); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* ══ La striscia di foto con l'etichetta colorata (come «Le nostre emozioni, in scena.») ══ */
.striscia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.striscia__voce > a { display: block; overflow: hidden; border-radius: 12px; background: var(--etichetta); text-decoration: none; box-shadow: var(--ombra-morbida); transition: transform .14s var(--ease-out); }
.striscia__voce > a:active { transform: scale(0.98); }
.striscia__foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.striscia__foto img { width: 100%; height: 100%; object-fit: cover; }
.striscia__etichetta {
  display: block; padding: 9px 12px;
  font-size: 13.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-align: center;
  color: var(--etichetta-testo); background: var(--etichetta);
}

/* ══ L'invito (la banda «La tua passione trova spazio qui.»: carta, nastri d'oro, danzatrice) ══ */
.invito { position: relative; overflow: hidden; background: var(--crema) url("../img/kit/sfondo-contatti-2400.webp") 50% 50% / cover no-repeat; padding: var(--spazio) 0; }
.invito > .contenitore { position: relative; z-index: 1; }
.invito__griglia { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px clamp(32px, 5vw, 80px); align-items: center; }
.invito__titolo { color: var(--oro-titolo); }

/* ══ Galleria con le foto che si aprono grandi (chiara: voce 3f) ══ */
.galleria__griglia {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense;
  gap: 10px; margin-top: clamp(28px, 3.4vw, 44px);
}
.galleria__cella { position: relative; aspect-ratio: 1; }
.galleria__cella--video { grid-row: span 2; aspect-ratio: auto; }
.galleria__cella--video ~ .galleria__cella--video { grid-column-end: -1; }
.galleria__foto, .galleria__video {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  padding: 0; margin: 0;
  background: var(--crema);
  border: 0; border-radius: 12px;
  overflow: hidden;
  transition: transform .16s var(--ease-out), box-shadow .25s ease;
}
.galleria__foto { cursor: zoom-in; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.galleria__foto:active { transform: scale(0.97); }
.galleria__foto img, .galleria__filmato { width: 100%; height: 100%; object-fit: cover; }
.galleria__foto img { object-position: 50% 22%; }
.galleria__filmato { display: block; }
/* l'unico comando del video: l'audio (chiaro, col bordo d'oro) */
.galleria__audio {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 24px); min-height: 38px; padding: 7px 14px 7px 10px;
  background: rgba(255, 255, 255, .94); color: var(--inchiostro);
  border: 1px solid var(--bordo-oro); border-radius: 999px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: left;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: transform .14s var(--ease-out);
}
.galleria__audio:active { transform: scale(0.97); }
.galleria__audio[hidden] { display: none; }
.galleria__audio svg { flex: none; order: -1; width: 18px; height: 18px; color: var(--oro-bruno); }
.galleria__audio .icona-acceso, .galleria__audio .testo-acceso { display: none; }
.galleria__audio[aria-pressed="true"] .icona-acceso { display: block; }
.galleria__audio[aria-pressed="true"] .testo-acceso { display: inline; }
.galleria__audio[aria-pressed="true"] .icona-spento, .galleria__audio[aria-pressed="true"] .testo-spento { display: none; }
.galleria__instagram { margin-top: clamp(24px, 2.6vw, 36px); }

/* la foto grande: su carta avorio (voce 3g) */
.lightbox {
  width: 100vw; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(254, 250, 240, .97); color: var(--inchiostro);
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(254, 250, 240, .7); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox.chiude { opacity: 0; transition: opacity .15s ease; }
.lightbox__testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--margine) 14px; }
.lightbox__conto { font-size: 15px; letter-spacing: .16em; color: var(--oro-testo); font-variant-numeric: tabular-nums; }
.lightbox__palco { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 var(--margine); }
.lightbox__foto { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border: 6px solid var(--bianco); border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(126, 73, 10, .55); background: var(--bianco); }
.lightbox__piede { display: flex; justify-content: center; gap: 16px; padding: 14px var(--margine) calc(18px + env(safe-area-inset-bottom, 0px)); }
.lightbox__tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 48px; min-height: 48px; padding: 8px 18px;
  background: var(--bianco); color: var(--oro-testo);
  border: 1.5px solid var(--bordo-oro); border-radius: 999px;
  font-size: 16px; cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: transform .14s var(--ease-out);
}
.lightbox__tasto:active { transform: scale(0.97); }
.lightbox__tasto img { width: 16px; height: 16px; }
.lightbox__tasto--prima img { rotate: 180deg; }

/* ══ Modulo (apre WhatsApp): una scheda bianca col bordo d'oro ══ */
.modulo {
  position: relative; z-index: 1;
  padding: clamp(24px, 3.6vw, 48px);
  background: var(--bianco);
  border: 1px solid var(--oro-velo); border-radius: 22px;
  box-shadow: var(--ombra-morbida);
}
.modulo__titolo { font-size: var(--h3); }
.modulo__intro { margin-top: 8px; font-size: 17px; color: var(--tenue); }
.modulo__campi { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: 15.5px; color: var(--inchiostro); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font-family: var(--sans); font-size: 17px; line-height: 1.4; color: var(--inchiostro);
  background: var(--crema); border: 1px solid var(--linea); border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.campo select {
  padding-right: 44px; -webkit-appearance: none; appearance: none;
  background-image: url("../img/kit/ui-freccia-basso.webp");
  background-repeat: no-repeat; background-position: calc(100% - 16px) 50%; background-size: 14px;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--oro); background-color: var(--bianco); box-shadow: 0 0 0 3px rgba(230, 190, 119, .35); }
.campo [aria-invalid="true"] { border-color: #A3332A; }
.campo__errore { font-size: 15px; font-weight: 600; color: #A3332A; }
.campo__nota, .modulo__nota { font-size: 15px; color: var(--tenue); }
.modulo__nota { margin-top: 16px; }
.campo--spunta { margin-top: 14px; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
.campo--spunta input { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; accent-color: var(--oro-bruno); cursor: pointer; }
.campo.campo--spunta label { font-size: 16.5px; color: var(--testo); cursor: pointer; }
.campo.campo--spunta label a { color: var(--oro-titolo); text-decoration-color: var(--oro); text-underline-offset: 3px; }
.modulo__nota a { color: var(--oro-titolo); text-decoration-color: var(--oro); text-underline-offset: 3px; }   /* 21/10: la riga della privacy sotto i moduli */
.campo--spunta .campo__errore { grid-column: 1 / -1; }
.modulo__invia { margin-top: 22px; }
.modulo__esito { margin-top: 16px; font-weight: 600; color: #A3332A; }
.modulo__conferma { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--oro-velo); border-radius: 14px; background: var(--crema); }
.modulo__conferma-titolo { font-size: 1.25rem; color: var(--inchiostro); }

/* ══ Decorazioni del kit (stelle, costellazione, puntini, nastri, danzatrice, Roma in oro) ══ */
.deco {
  position: absolute; z-index: 0; pointer-events: none; height: auto; max-width: none;
  top: var(--top, auto); right: var(--right, auto); bottom: var(--bottom, auto); left: var(--left, auto);
  width: var(--w, 120px); opacity: var(--opacita, 1); rotate: var(--ruota, 0deg);
}
.logo-firma { display: block; width: clamp(120px, 11vw, 168px); height: auto; }

/* ══ Briciole (pagine dei progetti) ══ */
.briciole { font-size: 14.5px; color: var(--tenue); }
.briciole ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.briciole li + li::before { content: "/"; margin-right: 8px; color: var(--oro); }
.briciole a { color: inherit; text-decoration: none; }
.briciole [aria-current] { color: var(--oro-testo); }

/* ══ I temi dei tre progetti (sul body della pagina o su una sezione) ══ */
.tema-dance { --accento: var(--magenta); --accento-testo: #C4009C; --tinta: var(--rosa); --etichetta: var(--rosa-etichetta); --etichetta-testo: var(--viola); }
.tema-elite { --accento: var(--oro-titolo); --accento-testo: var(--oro-testo); --tinta: var(--crema-scheda); --etichetta: var(--crema-etichetta); --etichetta-testo: var(--bruno-etichetta); }
.tema-balloon { --accento: var(--blu); --accento-testo: var(--blu); --tinta: var(--azzurro); --etichetta: var(--azzurro-etichetta); --etichetta-testo: var(--blu-etichetta); }

/* il pulsante fisso da telefono */
.whatsapp-fisso {
  position: fixed; z-index: 40;
  left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: none;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--ease-out);
}
.whatsapp-fisso.visibile { opacity: 1; transform: none; pointer-events: auto; }

/* ══ Pagine di servizio: privacy e 404 ══ */
.informativa { padding: clamp(44px, 5vw, 76px) 0 var(--spazio); background: var(--crema); }
.informativa__testa { text-align: center; }
.informativa__testa .occhiello { margin-bottom: 12px; }
.informativa__testa h1 { font-size: var(--h2); letter-spacing: -0.018em; }
.informativa__testa p:not(.occhiello) { margin-top: 12px; font-size: clamp(1.04rem, 1.4vw, 1.2rem); color: var(--tenue); }
.informativa__corpo { max-width: 860px; margin-top: clamp(28px, 3vw, 44px); padding: clamp(24px, 3.4vw, 48px); background: var(--bianco); border: 1px solid var(--oro-velo); border-radius: 22px; }
.informativa h2 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); margin: 40px 0 10px; }
.informativa h2:first-child { margin-top: 0; }
.informativa h3 { font-size: 1.2rem; margin: 24px 0 6px; }
.informativa__corpo p, .informativa__corpo li { margin-top: 10px; line-height: 1.65; color: var(--testo); }
.informativa__corpo ul { padding-left: 1.2em; list-style: disc; }
.informativa__corpo a { color: var(--oro-titolo); text-decoration-color: var(--oro); text-underline-offset: 3px; }
.informativa__torna { margin-top: 32px; text-align: center; }
/* 21/10 (9-bis): la tabella della cookie policy dal modello */
.informativa__corpo table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .95rem; }
.informativa__corpo th, .informativa__corpo td { padding: 10px 12px; border-bottom: 1px solid var(--oro-velo); text-align: left; vertical-align: top; line-height: 1.5; color: var(--testo); }
.informativa__corpo th { font-weight: 600; color: var(--nero-titoli); }
@media (max-width: 699px) { .informativa__corpo table { display: block; overflow-x: auto; } }
.informativa a[href^="https://wa.me"] { white-space: nowrap; }
/* la 404: chiara, tutta nella prima schermata (logo, titolo, pulsante oro), le stelle del kit intorno */
.non-trovata {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - var(--testata));
  display: flex; align-items: center;
  padding: clamp(32px, 5vw, 64px) 0 calc(clamp(32px, 5vw, 64px) + clamp(40px, 6vw, 90px));
  background: var(--crema); text-align: center;
}
.non-trovata::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  height: clamp(110px, 13vw, 200px);
  background: url("../img/kit/sfondo-sezione-2400.webp") 50% 84% / max(100%, 1100px) auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.non-trovata__testo { position: relative; z-index: 1; }
.non-trovata__logo { display: block; width: clamp(150px, 15vw, 220px); height: auto; margin: 0 auto 18px; animation: traccia 1.3s var(--ease-in-out) .1s backwards; }
.non-trovata .occhiello { margin-bottom: 6px; }
.non-trovata__titolo { font-size: var(--h1); animation: sali .8s var(--ease-out) .2s backwards; }
.non-trovata__intro { margin: 16px auto 0; max-width: 32em; font-size: clamp(1.06rem, 1.5vw, 1.22rem); color: var(--tenue); animation: sali .8s var(--ease-out) .3s backwards; }
.non-trovata__azione { margin-top: 26px; animation: sali .8s var(--ease-out) .4s backwards; }
.non-trovata__attivita { margin-top: 26px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.non-trovata__attivita a { color: inherit; text-decoration: none; }
.non-trovata__stella--1 { --w: 56px; --top: 14%; --left: max(4%, calc(50% - 480px)); }
.non-trovata__stella--2 { --w: 30px; --top: 22%; --right: max(6%, calc(50% - 440px)); --durata: 2.2s; --ritardo: -1s; }
.non-trovata__costellazione { --w: clamp(180px, 22vw, 320px); --right: -20px; --bottom: 18%; --opacita: .7; }
@media (max-width: 699px) {
  .non-trovata { align-items: flex-start; padding-top: 40px; min-height: calc(100svh - var(--testata) - 80px); }
  .non-trovata__stella--1 { --w: 36px; --top: 18px; --left: 6%; }
  .non-trovata__stella--2 { --top: 24px; --right: 8%; }
  .non-trovata__costellazione { display: none; }
  .non-trovata__attivita a { display: block; padding: 4px 0; }
  .non-trovata__sep { display: none; }
  .non-trovata__attivita { line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .non-trovata__logo, .non-trovata__titolo, .non-trovata__intro, .non-trovata__azione { animation: dissolvi .6s ease backwards; }
}

/* ══ Mouse: i passaggi solo dove c'è un puntatore vero ══ */
@media (hover: hover) and (pointer: fine) {
  .menu a:hover::after, .menu__apri:hover::after { transform: scaleX(1); }
  .menu .menu__tendina a:hover { background: var(--crema); color: var(--oro-titolo); }
  .btn--oro:hover { filter: brightness(1.06) saturate(1.05); box-shadow: 0 16px 28px -14px rgba(167, 110, 30, .85), inset 0 1px 0 rgba(255, 255, 255, .45); }
  .btn--bordo:hover { background: var(--crema-scheda); border-color: var(--oro-bruno); }
  .btn--accento:hover { background: var(--tinta); }
  .link-freccia:hover { border-bottom-color: var(--oro); }
  .faq__domanda:hover { color: var(--oro-titolo); }
  .striscia__voce > a:hover, .galleria__foto:hover { box-shadow: 0 26px 50px -30px rgba(126, 73, 10, .6); }
  .scheda__titolo a:hover .scheda__nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .lightbox__tasto:hover, .testata__apri:hover { background: var(--crema-scheda); }
}

/* ══ Schermi medi ══ */
@media (max-width: 1359px) {
  .menu > ul { gap: clamp(14px, 1.6vw, 22px); }
  .menu a, .menu__apri { font-size: 16px; }
  .testata__cta { padding: 10px 18px; }
}
@media (max-width: 1239px) {
  .testata__barra { gap: 14px; }
  .testata__logo img { height: 64px; }
  .menu > ul { gap: 13px; }
  .menu a, .menu__apri { font-size: 15.5px; }
  .testata__cta { margin-left: 4px; padding: 9px 14px; gap: 8px; font-size: 15px; }
  .testata__cta .ico-wa { width: 18px; height: 18px; }
}
@media (max-width: 1099px) {
  .menu, .testata__cta { display: none; }
  .testata__apri { display: block; }
  .testata__logo img { height: 58px; }
  .whatsapp-fisso { display: inline-flex; }
  .schede { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
  .gruppi { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-left: auto; margin-right: auto; }
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pannello, .invito__griglia { grid-template-columns: minmax(0, 1fr); }
  .pannello--inverso > :first-child { order: 0; }
  /* il pulsante fisso non copre la riga in fondo al piede */
  .piede { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .scheda { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 22px; align-items: start; }
  .scheda__corpo { padding-top: 6px; height: 100%; }
}

/* ══ Telefono ══ */
@media (max-width: 699px) {
  body { font-size: 17px; }
  .testata__logo img { height: 50px; }
  .menu-telefono__logo { height: 48px; }
  .titolo { letter-spacing: -0.012em; }
  .btn { padding: 12px 24px; }
  .schede { gap: 22px; }
  /* il logo su un angolo della foto: un'immagine sola, mai due di fila */
  .scheda__media { position: relative; display: block; margin-bottom: 30px; }
  .scheda__logo { position: absolute; left: 12px; bottom: -30px; z-index: 1; width: 46%; border: 3px solid var(--bianco); box-shadow: 0 14px 28px -16px rgba(18, 0, 0, .45); }
  .scheda__corpo { padding-top: 16px; }
  .scheda__testo { font-size: 16.5px; }
  .passi { grid-template-columns: minmax(0, 1fr); }
  .passo::before { width: 56px; height: 56px; font-size: 22px; }
  .faq__domanda { font-size: 17px; gap: 12px; padding: 12px 16px 12px 12px; }
  .faq__segno { width: 34px; height: 34px; }
  .faq__risposta { padding: 0 18px 18px 58px; font-size: 16.5px; }
  /* la striscia scorre di lato, dentro la sua fascia */
  .striscia {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--margine)); padding: 4px var(--margine) 18px;
    scrollbar-width: none;
  }
  .striscia::-webkit-scrollbar { display: none; }
  .striscia__voce { flex: 0 0 78%; scroll-snap-align: center; }
  .galleria__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .modulo__campi { grid-template-columns: minmax(0, 1fr); }
  .modulo { border-radius: 18px; }
  .icona__cerchio, .icona__immagine { width: 66px; height: 66px; }
}
@media (max-width: 379px) {
  .hero__intro { font-size: .98rem; }
}
@media (max-width: 359px) {
  .hero__dicitura { font-size: 2.1rem; }
  .btn { padding: 12px 18px; font-size: 16px; }
}

.hero__dicitura.visivo-nascosto { position: absolute; margin: -1px; }

/* ══ MOVIMENTO (5-bis, 18/10/2026) — regole di Emil Kowalski (Animazioni/) e 09 § 0-bis-2 ══
   Solo transform, opacity e clip-path; entrate 0,8-1,4 s con --ease-out, quello che si disegna con --ease-in-out;
   tocco 140 ms; hover solo col mouse; uscite più veloci delle entrate. Le classi si usano in ogni pagina:
   .reveal (+ --scala, --svela, --traccia), [data-sfalsa] sul contenitore, .brilla, [data-profondita].
   Senza la classe .js sull'<html> (script in <head>) niente si nasconde. */
@keyframes sali { from { opacity: 0; transform: translateY(var(--sale, 28px)); } to { opacity: 1; transform: none; } }
@keyframes traccia { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes assesta { from { transform: scale(1.045); } to { transform: none; } }
@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
@keyframes brilla { from { opacity: .45; scale: .82; } to { opacity: 1; scale: 1.08; } }
@keyframes brilla-piano { from { opacity: .55; } to { opacity: 1; } }
@keyframes apri { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tendina { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes foto-entra { from { opacity: 0; transform: translateX(var(--da, 0)) scale(.97); } to { opacity: 1; transform: none; } }

/* le entrate allo scroll: .reveal → .in (main.js, una volta sola) */
.js .reveal {
  opacity: 0; transform: translateY(var(--sale, 28px));
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), translate .3s var(--ease-out), box-shadow .3s ease, border-color .25s ease;
}
.js .reveal.in { opacity: var(--opacita, 1); transform: none; }
.js .reveal--scala { transform: translateY(20px) scale(.95); }
/* la foto che si svela dal basso, la decorazione o la scritta che si disegna da sinistra */
.js .reveal--svela { opacity: var(--opacita, 1); transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-in-out); }
.js .reveal--traccia { opacity: var(--opacita, 1); transform: none; clip-path: inset(-12% 100% -12% 0); transition: clip-path 1.5s var(--ease-in-out); }
.js .reveal--svela.in, .js .reveal--traccia.in { clip-path: inset(-12% -2% -12% 0); }
.js .reveal.fatto { clip-path: none; }
/* i fili del contenitore (::before, poi ::after: per esempio una linea del tempo) si disegnano da sinistra */
.js .reveal--fili { opacity: var(--opacita, 1); transform: none; }
.js .reveal--fili::before, .js .reveal--fili::after { clip-path: inset(-6px 100% -6px 0); transition: clip-path 1.2s var(--ease-in-out) .15s; }
.js .reveal--fili::after { transition-delay: 1.15s; }
.js .reveal--fili.in::before, .js .reveal--fili.in::after { clip-path: inset(-6px -6px -6px 0); }
/* i numeri dei passi salgono dentro il loro cerchio */
.js .passo.reveal::before { transform: translateY(70%); opacity: 0; transition: transform .8s var(--ease-out) .18s, opacity .6s var(--ease-out) .18s; }
.js .passo.reveal.in::before { transform: none; opacity: 1; }

/* la hero entra al caricamento, senza aspettare il JavaScript; l'immagine è visibile da subito */
.hero__logo { animation: traccia 1.3s var(--ease-in-out) .1s backwards; }
.hero__intro { animation: sali .8s var(--ease-out) .45s backwards; }
.hero__azioni { animation: sali .8s var(--ease-out) .6s backwards; }
.hero__foto { animation: assesta 2s var(--ease-out) backwards; }
/* il velo che sfuma il busto dell'acrobata c'è da subito; il nastro d'oro si traccia appena dopo */
.hero__nastro { animation: traccia 1.3s var(--ease-in-out) .15s backwards; }

/* stelle e stelline che brillano piano, ognuna col suo tempo (--durata, --ritardo) */
.brilla {
  animation: brilla var(--durata, 2.8s) var(--ease-in-out) var(--ritardo, 0s) infinite alternate;
  transform-box: fill-box; transform-origin: 50% 50%;
}

/* la testata scorrendo: il logo si fa un po' più piccolo (senza spostare niente) */
.testata__logo img { transform-origin: 0 50%; transition: transform .3s var(--ease-out); }
.testata.scorsa .testata__logo img { transform: scale(.88); }

/* la tendina dei progetti, le risposte, i messaggi del modulo */
.menu__tendina:not([hidden]) { transform-origin: 50% 0; animation: tendina .2s var(--ease-out); }
.faq__risposta:not([hidden]), .modulo__conferma:not([hidden]), .campo__errore:not([hidden]) { animation: apri .28s var(--ease-out); }
/* il menu da telefono: le voci arrivano una dopo l'altra */
.menu-telefono.aperto nav > ul > li, .menu-telefono.aperto .menu-telefono__cta { --sale: 18px; animation: sali .5s var(--ease-out) backwards; }
.menu-telefono.aperto nav > ul > li:nth-child(2) { animation-delay: .05s; }
.menu-telefono.aperto nav > ul > li:nth-child(3) { animation-delay: .1s; }
.menu-telefono.aperto nav > ul > li:nth-child(4) { animation-delay: .15s; }
.menu-telefono.aperto nav > ul > li:nth-child(5) { animation-delay: .19s; }
.menu-telefono.aperto nav > ul > li:nth-child(6) { animation-delay: .23s; }
.menu-telefono.aperto nav > ul > li:nth-child(7) { animation-delay: .27s; }
.menu-telefono.aperto .menu-telefono__cta { animation-delay: .3s; }
/* la foto grande */
.lightbox[open] { animation: dissolvi .22s ease; }
.lightbox__foto.entra { animation: foto-entra .3s var(--ease-out); }

/* foto e schede rispondono: col mouse si ingrandisce la foto dentro, col dito si preme */
.scheda__foto img, .striscia__foto img, .ovale__foto img, .galleria__foto img, .cornice img { transition: scale .7s var(--ease-out); }
.scheda, .gruppo { transition: translate .3s var(--ease-out), box-shadow .3s ease; }
.scheda__logo { transition: transform .14s var(--ease-out); }
.scheda__logo:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .scheda:hover, .gruppo:hover { translate: 0 -6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 56px -34px rgba(126, 73, 10, .5); }
  .scheda:hover .scheda__foto img, .striscia__voce > a:hover img, .ovale:hover .ovale__foto img, .galleria__foto:hover img, .cornice:hover img { scale: 1.05; }
  .icona:hover .icona__cerchio, .gruppo:hover .gruppo__icona { rotate: -6deg; }
  .icona__cerchio, .gruppo__icona { transition: rotate .3s var(--ease-out); }
}

/* ══ Meno movimento: meno, non zero. Restano dissolvenze e colori, si tolgono gli spostamenti ══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal--scala { transform: none; transition: opacity .6s ease; }
  .js .reveal--svela, .js .reveal--traccia { clip-path: none; opacity: 0; transition: opacity .6s ease; }
  .js .reveal--svela.in, .js .reveal--traccia.in { opacity: var(--opacita, 1); }
  .js .passo.reveal::before { transform: none; transition: opacity .6s ease; }
  .js .reveal--fili::before, .js .reveal--fili::after { clip-path: none; transition: none; }
  .hero__logo, .hero__intro, .hero__azioni, .hero__nastro { animation: dissolvi .6s ease backwards; }
  .hero__foto { animation: none; }
  .brilla { animation: brilla-piano 4s ease infinite alternate; }
  .testata.scorsa .testata__logo img { transform: none; }
  .menu__tendina:not([hidden]), .faq__risposta:not([hidden]), .modulo__conferma:not([hidden]), .campo__errore:not([hidden]),
  .menu-telefono.aperto nav > ul > li, .menu-telefono.aperto .menu-telefono__cta, .lightbox__foto.entra { animation: dissolvi .2s ease backwards; }
  .scheda:hover, .gruppo:hover { translate: none; }
  .scheda:hover .scheda__foto img, .striscia__voce > a:hover img, .ovale:hover .ovale__foto img, .galleria__foto:hover img, .cornice:hover img { scale: none; }
  .whatsapp-fisso { transform: none; }
}


/* ══════════ Tornata «4 Step» · DESIGN v1 della home (20/10/2026) ══════════
   Resources/4 Step/Per-ChatGPT-home-accademia/OUTPUT/design-v1.png (1448×4344, da computer). Uguali in tutte le pagine:
   testata, pulsanti, piede e caratteri (Playfair Display nei titoli, Source Sans 3 nel testo, nel menu e nei pulsanti).
   Colori misurati sul png (confronta-design.py --colori e campioni sulle zone). Il resto delle pagine dei progetti
   resta com'è finché non arriva il kit. */
:root {
  --avorio: #FAF7F3;           /* fondo di testata, sezioni e piede */
  --avorio-pannello: #F6F3ED;  /* pannello del testo della hero, bande */
  --grigio-foto: #F1EEE7;      /* il fondo della foto della fondatrice */
  --carta-scheda: #F6F2ED;     /* il corpo delle schede */
  --linea-chiara: #ECE9E4;     /* bordi delle schede e fili grigi */
  --oro-pieno: #AE853D;        /* pulsanti pieni */
  --oro-filo: #DDBA7F;         /* il filo d'oro sopra i titoli */
  --oro-bordo: #DCC9AC;        /* bordo del pulsante chiaro */
  --oro-link: #866021;         /* scritte d'oro piccole (link): il più scuro dell'oro del design, per leggersi bene */
  --nero-titoli: #141211;      /* titoli */
  --grigio-testo: #646464;     /* testo */
  --grigio-menu: #555352;      /* menu, scritte dei pulsanti chiari */
}
body { font-family: var(--sans); }

/* i pulsanti: rettangoli d'oro pieno o col filo chiaro, scritta in Source Sans */
.btn {
  min-height: 52px; padding: 12px 26px; gap: 10px;
  border-width: 1px; border-radius: 3px;
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: .01em;
}
.btn--oro {
  color: #FFFFFF; background: var(--oro-pieno); border-color: var(--oro-pieno);
  text-shadow: 0 1px 1px rgba(80, 52, 10, .28);
  box-shadow: 0 12px 22px -16px rgba(120, 82, 22, .7);
}
.btn--bordo { color: var(--grigio-menu); background: transparent; border-color: var(--oro-filo); }
.btn--piccolo { min-height: 46px; padding: 10px 20px; font-size: 15.5px; }
.link-freccia { color: var(--oro-link); font-family: var(--sans); font-weight: 600; border-bottom-color: var(--oro-filo); }

/* la testata: chiara, il logo grande a sinistra, il menu al centro, il pulsante d'oro a destra */
:root { --testata: 112px; }
@media (max-width: 1359px) { :root { --testata: 100px; } }
@media (max-width: 1239px) { :root { --testata: 92px; } }
@media (max-width: 1099px) { :root { --testata: 76px; } }
@media (max-width: 699px) { :root { --testata: 68px; } }
.testata { background: var(--avorio); }
.testata::after { height: 1px; background: var(--linea-chiara); }
.testata__logo img { height: 96px; }
.menu { margin-left: auto; margin-right: auto; }
.menu > ul { gap: clamp(18px, 2.2vw, 34px); }
.menu a, .menu__apri { font-family: var(--sans); font-size: 16px; letter-spacing: .01em; color: var(--grigio-menu); }
.menu a::after, .menu__apri::after { background: var(--oro-filo); }
.menu__apri .ico { color: var(--oro-pieno); }
.menu__tendina { border-color: var(--linea-chiara); border-radius: 4px; background: var(--avorio); }
.menu .menu__tendina a { border-radius: 2px; font-size: 16px; }
.testata__cta { margin-left: 0; }
.testata__apri { background: transparent; border: 1px solid var(--oro-filo); }
.menu-telefono { background: var(--avorio); }
.menu-telefono__chiudi { background: transparent; border: 1px solid var(--oro-filo); }
.menu-telefono nav > ul > li { border-bottom-color: var(--linea-chiara); }
.menu-telefono nav a { font-family: var(--serif); color: var(--nero-titoli); }
.menu-telefono__etichetta { font-family: var(--sans); color: var(--grigio-menu); letter-spacing: .22em; }
.menu-telefono .menu-telefono__gruppo a { border-left-color: var(--oro-filo); }

/* il piede: chiaro, il logo a sinistra, la frase, le voci; sotto i dati e i profili, in piccolo */
.piede {
  position: relative; background: var(--avorio); border-top: 1px solid var(--linea-chiara);
  padding: clamp(34px, 3.4vw, 48px) 0 calc(22px + env(safe-area-inset-bottom, 0px));
  font-size: 15.5px; line-height: 1.55; color: var(--grigio-testo);
}
.piede a { color: inherit; text-decoration: none; transition: color .2s ease; }
.piede a:active { color: var(--oro-link); }
.piede__alto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px clamp(28px, 4vw, 64px); padding-bottom: clamp(24px, 2.6vw, 34px); border-bottom: 1px solid var(--linea-chiara); }
.piede__marchio { display: block; }
.piede__logo { display: block; width: clamp(170px, 14vw, 215px); height: auto; }
.piede__motto { font-size: 17px; color: var(--grigio-menu); }
.piede__nav { display: grid; justify-items: end; gap: 10px; }
.piede__voci { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px clamp(18px, 2vw, 30px); }
.piede__voci a { font-size: 16px; color: var(--grigio-menu); }
.piede__legale { display: flex; gap: 22px; }
.piede__basso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(28px, 4vw, 64px); padding-top: clamp(22px, 2.4vw, 30px); }
.piede__titolo { margin-bottom: 6px; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--nero-titoli); }
.piede__colonna p + p { margin-top: 2px; }
.piede__colonna ul { display: grid; gap: 2px; }
.piede__fondo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: clamp(22px, 2.4vw, 30px); padding-top: 16px; border-top: 1px solid var(--linea-chiara); font-size: 14.5px; }
.credit a { text-decoration: underline; text-decoration-color: var(--oro-filo); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .btn--oro:hover { filter: brightness(1.07); box-shadow: 0 16px 26px -16px rgba(120, 82, 22, .8); }
  .btn--bordo:hover { background: var(--avorio-pannello); border-color: var(--oro-pieno); color: var(--nero-titoli); }
  .piede a:hover { color: var(--oro-link); }
  .menu a:hover, .menu__apri:hover { color: var(--nero-titoli); }
}
@media (max-width: 1359px) {
  .testata__logo img { height: 80px; }
  .menu > ul { gap: clamp(14px, 1.5vw, 22px); }
  .menu a, .menu__apri { font-size: 15.5px; }
}
@media (max-width: 1239px) {
  .testata__logo img { height: 70px; }
  .menu > ul { gap: 14px; }
  .menu a, .menu__apri { font-size: 15px; }
  .testata__cta { padding: 9px 14px; font-size: 14.5px; }
}
@media (max-width: 1099px) {
  .testata__logo img { height: 58px; }
  .piede__alto { grid-template-columns: auto minmax(0, 1fr); }
  .piede__nav { grid-column: 1 / -1; justify-items: start; }
  .piede__voci { justify-content: flex-start; }
  /* il pulsante fisso non copre la riga in fondo al piede */
  .piede { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 699px) {
  .testata__logo img { height: 50px; }
  .btn { padding: 12px 20px; }
  .piede__alto { grid-template-columns: minmax(0, 1fr); }
  .piede__basso { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .piede__fondo { flex-direction: column; }
}

/* 20/10, dopo il controllo: sotto i 360 px la tendina del modulo lascia più posto al testo («Balloon Artist Game Show») */
@media (max-width: 359px) {
  .campo select { padding-left: 12px; padding-right: 32px; font-size: 15px; background-position: calc(100% - 12px) 50%; }
}

/* 20/10 pomeriggio (D·01, voce 1): il pulsante principale è «Richiedi informazioni senza impegno» in testata, nel menu
   da telefono e fisso in basso. In testata sta accanto al menu da 1100 a 1440 px su una riga sola (mai tagliato); da
   telefono la scritta si stringe un poco sotto i 380 px, così resta su una riga anche a 320. */
.testata__cta, .whatsapp-fisso, .menu-telefono__cta { white-space: nowrap; }
@media (max-width: 379px) {
  .whatsapp-fisso, .menu-telefono__cta { padding-left: 14px; padding-right: 14px; gap: 8px; font-size: 15px; letter-spacing: 0; }
  .modulo__invia { padding-left: 14px; padding-right: 14px; gap: 8px; font-size: 15px; letter-spacing: 0; }
}
@media (max-width: 339px) {
  .whatsapp-fisso { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
  .whatsapp-fisso, .menu-telefono__cta { padding-left: 10px; padding-right: 10px; gap: 7px; font-size: 14.5px; }
  .whatsapp-fisso .ico-wa, .menu-telefono__cta .ico-wa { width: 18px; height: 18px; }
  .modulo__invia { padding-left: 10px; padding-right: 10px; font-size: 14.5px; }
  .modulo__invia .ico { display: none; }
}