/* ============================================================
   Advertising: media mix, media plan e il prima/dopo.
   Grafici di Gabriel, riportati sui token del sito: qui dentro
   non c'e' un colore scritto a mano, tutto scende da --accent,
   --on-block e --gl-fluid. Le famiglie di media hanno bisogno di
   tinte distinguibili: si derivano con color-mix, non si inventano.
   ============================================================ */

.mp,
.ba,
.ascene {
  --mp-mute: color-mix(in srgb, var(--on-block) 55%, transparent);
  --mp-faint: color-mix(in srgb, var(--on-block) 28%, transparent);
  --mp-line: color-mix(in srgb, var(--on-block) 12%, transparent);

  /* le tre famiglie di media, in ordine: online, connected tv, esterna */
  --fam-1: var(--on-block);
  --fam-1b: color-mix(in srgb, var(--on-block) 70%, var(--gl-fluid));
  --fam-1c: color-mix(in srgb, var(--on-block) 44%, var(--gl-fluid));
  --fam-1d: color-mix(in srgb, var(--on-block) 20%, var(--gl-fluid));
  --fam-2: var(--accent);
  --fam-2b: color-mix(in srgb, var(--accent) 45%, var(--on-block));
  --fam-3: var(--gl-fluid);

  /* esito positivo: l'unico colore fuori palette, e non decora, misura */
  --esito: #2AE58F;

  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* l'alone del fluido dell'hero, anche qui */
.mp::before,
.ba::before {
  content: '';
  position: absolute; right: -20%; top: -10%;
  width: 80vw; height: 80vw; max-width: 1100px; max-height: 1100px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gl-fluid) 45%, transparent), transparent 60%);
  z-index: -1; pointer-events: none;
}

.mp__righe {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--mp-line) 1px, transparent 1px);
  background-size: 100% 120px;
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  opacity: 0.35;
}

/* etichette e numeri: il sito non ha un monospace, la cifra
   tabellare di Inter basta a tenere le colonne allineate */
.mp__eti,
.mp__meta,
.mp__cifra {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-mute);
}
.mp__cifra { font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0.02em; }

/* la parola accentata nel titolo di sezione */
.mp .ssec em,
.ba .ssec em { font-style: normal; color: var(--accent); }

/* ---------- entrata ---------- */
.mp .rv,
.ba .rv {
  opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s;
  transition-delay: var(--dl, 0s);
}
.mp.on .rv,
.ba.on .rv { opacity: 1; transform: none; filter: none; }

/* ---------- testata ---------- */
.mp__testa { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: end; }
.mp__eti { display: flex; gap: 0.9rem; align-items: center; }
.mp__tot { text-align: right; }
.mp__tot small { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mp-mute); }
.mp__tot b {
  display: block; margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 300; font-size: clamp(3rem, 6vw, 5.25rem);
  letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mp__tot b i { font-style: normal; color: var(--accent); }
.mp__riga { height: 1px; background: var(--mp-line); margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.mp__meta { display: flex; gap: clamp(1.25rem, 4vw, 3.5rem); flex-wrap: wrap; margin-top: 1.1rem; text-transform: none; letter-spacing: 0.02em; }
.mp__meta b { color: var(--on-block); font-weight: 600; }
@media (max-width: 760px) {
  .mp__testa { grid-template-columns: 1fr; }
  .mp__tot { text-align: left; }
}

/* ---------- titolo di sottosezione ---------- */
.mp__sez { margin-top: clamp(4.5rem, 10vw, 8.75rem); }
.mp__sh { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.mp__sh h3 { font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; display: flex; gap: 1rem; align-items: baseline; }
.mp__sh h3 span { font-size: 0.75rem; color: var(--accent); letter-spacing: 0.06em; }
.mp__sh p { font-size: 0.78rem; color: var(--mp-mute); letter-spacing: 0.04em; }

/* ---------- media mix: la ciambella ---------- */
.mix { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.donut-wrap { position: relative; aspect-ratio: 1; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut circle { fill: none; }
.donut .track { stroke: var(--mp-line); }
.arc {
  stroke-linecap: butt;
  transition: stroke-dashoffset 1.6s var(--ease), stroke-width 0.6s var(--ease), opacity 0.5s;
  transition-delay: var(--dl, 0s), 0s, 0s;
}
.ring-in .arc { stroke-width: 7; }
.ring-out .arc { stroke-width: 22; }
.ring-out .arc.act { stroke-width: 34; }
.ring-out.dim .arc:not(.act) { opacity: 0.35; }
.ticks line { stroke: var(--mp-faint); stroke-width: 1; }

.center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.center .c-in { width: 60%; transition: opacity 0.35s, transform 0.35s; }
.center .c-in.out { opacity: 0; transform: translateY(6px); }
.c-cat { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); height: 1rem; }
.c-name { font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 500; margin-top: 0.6rem; height: 1.2em; }
.c-pct {
  font-family: var(--font-display);
  font-weight: 300; font-size: clamp(3rem, 6.4vw, 5.25rem);
  letter-spacing: -0.05em; line-height: 1; margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.c-pct i { font-style: normal; font-size: 0.4em; color: var(--mp-mute); letter-spacing: 0; margin-left: 4px; vertical-align: 0.9em; }
.c-eur { font-size: 0.82rem; color: var(--mp-mute); margin-top: 0.5rem; font-variant-numeric: tabular-nums; }

.cats { display: grid; gap: clamp(1.4rem, 3vw, 2.15rem); }
.cat-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.6rem; border-bottom: 1px solid var(--mp-line); position: relative; }
.cat-h::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: var(--w);
  background: var(--c); transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s var(--ease) var(--dl, 0s);
}
.mp.on .cat-h::after { transform: none; }
.cat-h b { font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem; }
.cat-h b i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cat-h span { font-size: 0.82rem; color: var(--on-block); font-variant-numeric: tabular-nums; }
.cat-h span em { font-style: normal; color: var(--mp-mute); margin-left: 0.75rem; }
.chs { list-style: none; margin-top: 0.5rem; }
.chs li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 56px; gap: 0.75rem; align-items: center; padding: 0.45rem 0; font-size: 0.92rem; color: var(--mp-mute); transition: color 0.4s; }
.chs li.act { color: var(--on-block); }
.chs .bar { height: 2px; background: var(--mp-line); position: relative; overflow: hidden; }
.chs .bar i { position: absolute; inset: 0; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) var(--dl, 0s); }
.mp.on .chs .bar i { transform: scaleX(var(--s)); }
.chs .v { font-size: 0.78rem; text-align: right; font-variant-numeric: tabular-nums; }
.chs li.act .v { color: var(--on-block); }
@media (max-width: 900px) {
  .mix { grid-template-columns: minmax(0, 1fr); }
  .donut-wrap { max-width: 440px; width: 100%; margin-inline: auto; }
}

/* ---------- media plan: la tabella ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.mp table { width: 100%; min-width: 980px; border-collapse: collapse; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.mp th,
.mp td { padding: 0 0.5rem; height: 44px; text-align: right; white-space: nowrap; transition: color 0.25s; }
.mp thead th { font-weight: 400; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mp-mute); height: 36px; border-bottom: 1px solid var(--mp-line); }
.mp th:first-child,
.mp td:first-child { text-align: left; padding-left: 0; position: sticky; left: 0; background: var(--bg-block); z-index: 2; min-width: 190px; }
.mp tbody td { font-size: 0.78rem; color: var(--on-block); border-bottom: 1px solid var(--mp-line); position: relative; }
.mp tbody td:first-child { font-size: 0.9rem; }
.mp td .val { position: relative; z-index: 1; transition: color 0.3s; }
.mp td.z .val { color: var(--mp-faint); }
.mp td .heat {
  position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px;
  background: var(--c); transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease); transition-delay: var(--dl, 0s);
  opacity: var(--o);
}
.mp.on td .heat { transform: scaleX(1); }
.mp tr.cat td { height: 52px; padding-top: 18px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mp-mute); }
.mp tr.cat td:first-child { color: var(--c); }
.mp tr.cat td:first-child i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c); margin-right: 0.6rem; vertical-align: 1px; }
.mp td.tot,
.mp th.tot { padding-left: 1.4rem; color: var(--on-block); }
.mp th.tot { color: var(--accent); }
.mp tbody td.tot { font-weight: 600; }
.mp tfoot td { font-size: 0.82rem; height: 56px; font-weight: 600; border-top: 1px solid var(--mp-faint); }
.mp tfoot td:first-child { font-size: 0.95rem; }
.mp tfoot td.tot { color: var(--accent); font-size: 0.95rem; }
.mp tbody tr.row { opacity: 0; transform: translateX(-10px); transition: opacity 0.7s, transform 0.7s var(--ease); transition-delay: var(--dl, 0s); }
.mp tbody tr.cat { opacity: 0; transition: opacity 0.7s; transition-delay: var(--dl, 0s); }
.mp.on tbody tr.row,
.mp.on tbody tr.cat { opacity: 1; transform: none; }
.mp tbody tr.row:hover td { background: color-mix(in srgb, var(--on-block) 4%, transparent); }
.mp tbody tr.row:hover td:first-child { background: var(--bg-block); color: var(--accent); }
.mp tbody td[data-m],
.mp tfoot td[data-m] { cursor: pointer; }

/* il mese acceso */
.col-hl {
  position: absolute; top: 0; left: 0; width: 0;
  background: var(--accent); border-radius: 10px; pointer-events: none;
  opacity: 0; z-index: 0;
  transition: transform 0.7s var(--ease), width 0.7s, opacity 0.6s;
  box-shadow: 0 20px 60px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.tbl-wrap.flow .col-hl { opacity: 1; }
.mp td.hot,
.mp td.hot .val,
.mp thead th.hot,
.mp tfoot td.hot { color: var(--white); }
.mp td.hot.z .val { color: color-mix(in srgb, var(--white) 55%, transparent); }
.mp td.hot .heat { background: var(--white); opacity: 0.6; }
.mp thead th.hot { font-weight: 600; }
.mp tr.spark td.hot .col i { background: var(--white); }

/* ---------- comandi dei mesi ---------- */
.ctrl { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 1.1rem; }
.play {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--mp-faint); background: none; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 0.3s, background 0.3s;
}
.play:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.play span { width: 10px; height: 12px; border-left: 3px solid var(--on-block); border-right: 3px solid var(--on-block); }
.play.paused span { width: 0; height: 0; border: 0; border-left: 11px solid var(--on-block); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.months { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.months button {
  position: relative; height: 40px; border: 1px solid var(--mp-line); border-radius: 8px;
  background: none; color: var(--mp-mute);
  font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; overflow: hidden;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.months button i { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p) * 100%); background: var(--mp-faint); transition: background 0.3s; }
.months button:hover { border-color: var(--mp-faint); color: var(--on-block); }
.months button.act { background: var(--accent); border-color: var(--accent); color: var(--white); }
.months button.act i { background: var(--white); }

/* ---------- pannello del mese ---------- */
.focus { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--mp-line); border-radius: 12px; margin-bottom: 1.75rem; overflow: hidden; }
.focus > div { padding: 1rem 1.1rem; }
.focus > div + div { border-left: 1px solid var(--mp-line); }
.focus small { display: block; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mp-mute); }
.focus b {
  display: block; margin-top: 0.5rem; font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem); letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.16s, transform 0.16s;
}
.focus > div:nth-child(2) b { color: var(--accent); }
.focus b.out { opacity: 0; transform: translateY(5px); }
@media (max-width: 900px) {
  .focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus > div:nth-child(odd) { border-left: 0; }
  .focus > div { border-top: 1px solid var(--mp-line); }
  .focus > div:first-child { grid-column: 1 / -1; border-top: 0; }
  .months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .months button { height: 32px; }
}

/* ---------- la spesa mese per mese, in fondo alla tabella ---------- */
.mp tr.spark td { height: 110px; vertical-align: bottom; border-top: 1px solid var(--mp-faint); padding-top: 14px; padding-bottom: 10px; }
.mp tr.spark td.lab { font-size: 0.7rem; color: var(--mp-mute); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; }
.mp tr.spark .col { display: flex; flex-direction: column-reverse; gap: 2px; height: 86px; justify-content: flex-start; width: 10px; margin-left: auto; }
.mp tr.spark .col i { display: block; background: var(--c); height: calc(var(--h) * 1%); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); transition-delay: var(--dl, 0s); }
.mp.on tr.spark .col i { transform: none; }
.mp tfoot tr:last-child td { border-top: 1px solid var(--mp-line); }
.mp__nota { font-size: 0.72rem; color: var(--mp-mute); margin-top: 1.4rem; letter-spacing: 0.03em; }

/* ============================================================
   Prima / dopo: stessa spesa, altro risultato.
   Tutto dentro .ba: .row, .track e .same hanno nomi generici che
   la tabella del media plan usa a sua volta.
   ============================================================ */
.ba__eti { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mp-mute); }

.ba .same {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem); padding: 1.1rem 0;
  border-top: 1px solid var(--mp-line); border-bottom: 1px solid var(--mp-line);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mp-mute);
}
.ba .same strong { font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.02em; text-transform: none; color: var(--on-block); font-variant-numeric: tabular-nums; }
.ba .bars { display: grid; grid-template-columns: repeat(8, 26px); gap: 5px; margin-left: auto; }
.ba .bars i { height: 4px; border-radius: 2px; background: var(--on-block); opacity: 0.8; transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); transition-delay: calc(0.6s + var(--i) * 0.07s); }
.ba.on .bars i { transform: none; }

/* la sagoma disegnata sul fondo */
.ba__auto { position: absolute; right: -6%; bottom: 2%; width: min(62%, 760px); pointer-events: none; z-index: -1; opacity: 0.2; }
.ba__auto svg { width: 100%; height: auto; display: block; }
.ba__auto path,
.ba__auto circle { fill: none; stroke: color-mix(in srgb, var(--on-block) 50%, transparent); stroke-linecap: round; stroke-linejoin: round; }
.ba__auto .draw { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); transition: stroke-dashoffset 2.6s cubic-bezier(0.4, 0, 0.2, 1) var(--dl, 0s); }
.ba.on .ba__auto .draw { stroke-dashoffset: 0; }

.ba__righe { margin-top: clamp(1.25rem, 3vw, 2.1rem); }
.ba .head-r,
.ba .row { display: grid; grid-template-columns: 1.25fr 0.85fr 1.6fr 1.1fr; align-items: center; gap: clamp(0.9rem, 2.4vw, 2.5rem); }
.ba .head-r { padding: 1.4rem 0 0.75rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mp-faint); }
.ba .head-r .y25 { text-align: right; }
.ba .head-r .y26 { text-align: right; color: var(--on-block); }
.ba .head-r .y26 b { color: var(--accent); font-weight: 600; }
.ba .row { padding: clamp(1.4rem, 3vw, 2.1rem) 0; border-top: 1px solid var(--mp-line); position: relative; }
.ba .r-lab { font-size: clamp(0.95rem, 1.5vw, 1.2rem); letter-spacing: -0.01em; }
.ba .r-lab small { display: block; font-size: 0.7rem; color: var(--mp-faint); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.35rem; }
.ba .v25 {
  text-align: right; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.75rem); letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--on-block) 42%, transparent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ba .v25 small { font-size: 0.5em; }

.ba .track { position: relative; height: 38px; display: flex; align-items: center; }
.ba .track .ln { position: absolute; left: 0; right: 0; height: 1px; background: var(--mp-line); }
.ba .track .fill {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--esito));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.5s var(--ease); transition-delay: calc(0.5s + var(--i) * 0.22s);
}
.ba.on .track .fill { transform: none; }
.ba .track .tip {
  position: absolute; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--esito);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--esito) 18%, transparent), 0 0 22px var(--esito);
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.5s, transform 0.6s cubic-bezier(0.3, 1.7, 0.5, 1);
  transition-delay: calc(1.9s + var(--i) * 0.22s);
}
.ba.on .track .tip { opacity: 1; transform: none; }
.ba .track .dot { position: absolute; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--on-block); opacity: 0; }
.ba.on .track .dot { animation: ba-corsa 3.4s cubic-bezier(0.5, 0, 0.4, 1) infinite; animation-delay: calc(2.4s + var(--i) * 0.35s); }
@keyframes ba-corsa {
  0% { left: 0; opacity: 0; }
  10% { opacity: 0.9; }
  88% { opacity: 0.9; }
  100% { left: 100%; opacity: 0; }
}
.ba .track .pct {
  position: absolute; left: 50%; transform: translate(-50%, -22px);
  font-size: clamp(1.25rem, 2.6vw, 2.1rem); font-weight: 600;
  color: var(--esito); letter-spacing: -0.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.6s, transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1);
  transition-delay: calc(1.7s + var(--i) * 0.22s);
  text-shadow: 0 0 30px color-mix(in srgb, var(--esito) 45%, transparent);
}
.ba.on .track .pct { opacity: 1; transform: translate(-50%, -20px); }
.ba .track .pct em { font-style: normal; font-size: 0.55em; margin-right: 4px; vertical-align: 0.1em; }

.ba .v26 {
  text-align: right; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.75rem, 5.6vw, 5.1rem); letter-spacing: -0.05em; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 0 40px color-mix(in srgb, var(--on-block) 28%, transparent);
}
.ba .v26 small { font-size: 0.42em; opacity: 0.7; margin-left: 2px; }
.ba__nota { margin-top: clamp(1.6rem, 3vw, 2.5rem); font-size: 0.72rem; color: var(--mp-mute); letter-spacing: 0.03em; }

@media (max-width: 900px) {
  .ba__auto { width: 120%; right: -25%; bottom: 6%; opacity: 0.22; }
  .ba .head-r { display: none; }
  .ba .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'lab v25' 'trk trk' 'v26 v26'; gap: 0.6rem; padding: 1.6rem 0; }
  .ba .r-lab { grid-area: lab; }
  .ba .v25 { grid-area: v25; font-size: 1.5rem; }
  .ba .v25::after { content: ' \00b7 2025'; font-size: 0.62rem; letter-spacing: 0.1em; vertical-align: 3px; }
  .ba .track { grid-area: trk; height: 30px; margin-top: 1.4rem; }
  .ba .track .pct { left: auto; right: 0; transform: translate(0, -20px); }
  .ba.on .track .pct { transform: translate(0, -18px); }
  .ba .v26 { grid-area: v26; text-align: left; font-size: clamp(3rem, 15vw, 4.25rem); }
  .ba .v26::after { content: ' 2026'; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--mp-faint); vertical-align: middle; margin-left: 0.5rem; }
  .ba .bars { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ba.on .track .dot { animation: none; }
}

/* ============================================================
   Il resto della pagina, disegnata da Gabriel: hero, mappa, frase,
   cosa comprende con le scene. Stesse regole: nessun
   colore scritto a mano, le trasparenze scendono da currentColor,
   --on-block e --accent con color-mix.
   ============================================================ */

:root { --ease-morbida: cubic-bezier(0.2, 0.8, 0.2, 1); }

.asez {
  --a-muto: color-mix(in srgb, currentColor 60%, transparent);
  --a-tenue: color-mix(in srgb, currentColor 30%, transparent);
  --a-linea: color-mix(in srgb, currentColor 12%, transparent);
  position: relative;
}
.asez .ssec { font-size: clamp(2.5rem, 5.6vw, 5.25rem); letter-spacing: -0.04em; line-height: 1; }
.asez .rv {
  opacity: 0; transform: translateY(34px);
  transition: opacity 1.1s var(--ease-morbida), transform 1.1s var(--ease-morbida);
  transition-delay: var(--dl, 0s);
}
.asez .rv.on { opacity: 1; transform: none; }

/* ---------- hero: i suoi pesi, il punto rosso ---------- */
.shero__title { font-weight: 250; }
.shero__title strong { font-weight: 800; }
.shero__punto { color: var(--accent); }

/* ---------- 4M€ e mappa ---------- */
.amappa {
  --terra: color-mix(in srgb, var(--gl-fluid) 50%, var(--bg-block));
  --lento: 2.5;   /* moltiplica tempi e ritardi dell'entrata */
  overflow: hidden;
}
.amappa__testa { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 3vw, 2.5rem); align-items: flex-end; }
.amappa__num {
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(5.25rem, 15vw, 12.5rem);
  line-height: 0.78; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--accent);
}
.amappa__eur { color: var(--on-block); }
.amappa__cap { font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 2.1rem); line-height: 1.08; padding-bottom: 0.2em; }
.amappa__cap em { font-style: normal; color: var(--accent); }
.amappa__mappa { display: block; width: 100%; height: auto; overflow: visible; margin-top: clamp(1.25rem, 4vw, 3rem); }
.amappa__terra { fill: var(--terra); }
.amappa__mercato { fill: var(--terra); transition: fill calc(0.9s * var(--lento)) var(--ease-morbida) calc((0.25s + var(--i) * 0.18s) * var(--lento)); }
.is-accesa .amappa__mercato { fill: var(--on-block); }
.amappa__filo { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-accesa .amappa__filo { stroke-dashoffset: 0; transition: stroke-dashoffset calc(0.6s * var(--lento)) ease calc((0.9s + var(--i) * 0.15s) * var(--lento)); }
.amappa__eti { opacity: 0; transform: translateY(8px); }
.is-accesa .amappa__eti {
  opacity: 1; transform: none;
  transition: opacity calc(0.4s * var(--lento)), transform calc(0.5s * var(--lento)) cubic-bezier(0.3, 1.5, 0.5, 1);
  transition-delay: calc((1.2s + var(--i) * 0.15s) * var(--lento));
}
.amappa__eti rect { fill: var(--accent); }
.amappa__eti text { font: 800 17px var(--font-sans); fill: var(--on-block); }
.amappa__cuore, .amappa__impulso { transform-box: fill-box; transform-origin: center; }
.amappa__cuore { fill: var(--accent); stroke: var(--on-block); stroke-width: 2.5; transform: scale(0); }
.is-accesa .amappa__cuore { transform: scale(1); transition: transform calc(0.5s * var(--lento)) cubic-bezier(0.3, 1.8, 0.5, 1) calc((0.7s + var(--i) * 0.15s) * var(--lento)); }
.amappa__impulso { fill: var(--accent); opacity: 0; }
.amappa__onda { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; }
.is-viva .amappa__impulso { animation: amappa-impulso 2.6s ease-out infinite calc(var(--i) * 0.7s); }
.is-viva .amappa__onda { animation: amappa-onda 4.2s cubic-bezier(0.2, 0.5, 0.4, 1) infinite calc(var(--w) * 1.4s); }
.is-viva .amappa__mercato { animation: amappa-bagliore 1.4s ease-out infinite var(--d); }
@keyframes amappa-impulso { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(3.8); } }
@keyframes amappa-onda { 0% { r: 10px; opacity: 0.9; stroke-width: 6; } 100% { r: 1300px; opacity: 0; stroke-width: 1; } }
@keyframes amappa-bagliore {
  0%, 30%, 100% { fill: var(--on-block); }
  8% { fill: color-mix(in srgb, var(--accent) 30%, var(--on-block)); }
}
.amappa__legenda {
  display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 4vw, 3.5rem);
  list-style: none; margin-top: clamp(1rem, 3vw, 2rem);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s calc(2.6s * var(--lento)), transform 0.6s calc(2.6s * var(--lento));
}
.is-accesa .amappa__legenda { opacity: 1; transform: none; }
.amappa__legenda li { display: flex; gap: 14px; align-items: center; }
.amappa__legenda b { display: block; font-weight: 800; font-size: 17px; }
.amappa__legenda small { display: block; margin-top: 2px; font-size: 14px; color: color-mix(in srgb, var(--on-block) 70%, var(--gl-fluid)); }
.amappa__chiave { flex: none; width: 26px; height: 18px; border-radius: 3px; background: var(--on-block); }
.amappa__chiave--cliente {
  width: 18px; height: 18px; border-radius: 50%; margin-inline: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------- la frase che si accende parola per parola ---------- */
.afrase { padding-block: clamp(7.5rem, 16vw, 15rem) clamp(6rem, 12vw, 11rem); }
.afrase__testo {
  font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 5.5rem);
  line-height: 1.04; letter-spacing: -0.04em; max-width: 17ch;
}
.afrase__parola { color: color-mix(in srgb, var(--fg-strong) 14%, transparent); transition: color 0.25s; }
.afrase__parola.is-on { color: var(--fg-strong); }
.afrase__parola--rossa.is-on { color: var(--accent); }
.afrase__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 8vw, 9rem);
  margin-top: clamp(3.5rem, 7vw, 7rem);
  font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.65; color: var(--a-muto);
}
.afrase__col:last-child { margin-top: clamp(0px, 6vw, 7rem); }
@media (max-width: 760px) {
  .afrase__cols { grid-template-columns: 1fr; }
  .afrase__col:last-child { margin-top: 0; }
}

/* ---------- cosa comprende: scene a sinistra, voci a destra ---------- */
.acomp__griglia {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 7rem); align-items: start;
}
.ascene {
  position: relative; aspect-ratio: 1; max-width: 480px;
  border-radius: 6px; overflow: hidden;
  color: var(--on-block);
  background: var(--grad-brand);
}
/* il numero della voce sta sul fondo della sezione, quasi invisibile come
   quello di «Come lavoriamo», e resta fermo insieme al pannello */
.acomp__lato { position: relative; isolation: isolate; }
.ascene__conto {
  /* in basso a destra dello schermo: il pannello fermo sta centrato in
     verticale, e a sinistra parte dal bordo di .swrap */
  position: absolute; z-index: -1;
  right: calc(100% + max(var(--pad), (100vw - 72rem) / 2) - 100vw);
  bottom: calc((100% - 100svh) / 2 - 0.1em);
  font-family: var(--font-display);
  font-size: clamp(8rem, 15vw, 15rem); line-height: 0.8; letter-spacing: -0.06em;
  font-weight: 250; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: color-mix(in srgb, var(--fg-strong) 4%, transparent);
  pointer-events: none;
}
.ascene__conto b { font-weight: 700; }
.ascena {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.6s, transform 0.8s var(--ease-morbida);
}
.ascena.is-qui { opacity: 1; transform: none; }
.ascena svg { display: block; width: 100%; height: 100%; }
.ascena > svg:not(:only-child) { position: absolute; inset: 0; }
.ascena text { font: 600 13px var(--font-sans); }

/* tinte delle scene */
.ascene .bianco { fill: var(--on-block); }
.ascene .pieno { fill: color-mix(in srgb, var(--on-block) 85%, transparent); }
.ascene .medio { fill: color-mix(in srgb, var(--on-block) 60%, transparent); }
.ascene .tenue { fill: color-mix(in srgb, var(--on-block) 40%, transparent); }
.ascene .fioco { fill: color-mix(in srgb, var(--on-block) 8%, transparent); }
.ascene .rosso { fill: var(--accent); }
.ascene .verde { fill: var(--esito); }
.ascene .griglia { fill: none; stroke: var(--a-linea); }
.ascene [class*='filo'] { fill: none; stroke-width: 1.5; }
.ascene .filo { stroke: color-mix(in srgb, var(--on-block) 35%, transparent); }
.ascene .filo--lieve { stroke: color-mix(in srgb, var(--on-block) 20%, transparent); }
.ascene .filo--pieno { stroke: var(--on-block); }
.ascene .filo--rosso { stroke: var(--accent); stroke-width: 2; }
.ascene .filo--verde { stroke: var(--esito); stroke-width: 2.2; }

.ascena__barra {
  transform-box: fill-box; transform-origin: bottom; transform: scaleY(0);
  transition: transform 1s var(--ease-morbida) var(--fd);
}
.ascena__barra--x { transform-origin: left; transform: scaleX(0); }
.is-qui .ascena__barra { transform: none; }
.ascena__traccia {
  stroke-dasharray: var(--l); stroke-dashoffset: var(--l);
  transition: stroke-dashoffset 1.6s var(--ease) var(--fd, 0s);
}
.is-qui .ascena__traccia { stroke-dashoffset: 0; }
.ascena__battito { transform-box: fill-box; transform-origin: center; animation: ascena-battito 2.4s ease-out infinite; }
@keyframes ascena-battito { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } }
.ascena__goccia { offset-rotate: 0deg; animation: ascena-goccia 3.2s var(--ease) infinite; }
@keyframes ascena-goccia { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* etichette nel nostro maiuscoletto (.etichetta): piccole, pesanti, spaziate */
.ascena .ascena__eti { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; fill: color-mix(in srgb, var(--on-block) 70%, transparent); }
.ascena__area { fill: url(#ascenaVerde); opacity: 0.35; }
.ascena__stop { stop-color: var(--esito); }
.ascena__stop--via { stop-opacity: 0; }

.ascena__chip {
  position: absolute; left: var(--x); top: var(--y);
  padding: 8px 14px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--on-block) 35%, transparent);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: ascena-galleggia 6s ease-in-out infinite var(--fd, 0s);
}
.ascena__chip--rosso { border-color: var(--accent); background: var(--accent); }
@keyframes ascena-galleggia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.ascena__gruppo { position: absolute; left: 8%; right: 8%; top: var(--y); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ascena__gruppo small { width: 100%; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--on-block) 70%, transparent); }
.ascena__gruppo .ascena__chip {
  position: static; transform: none; animation: none;
  opacity: 0; translate: 0 10px;
  transition: opacity 0.5s, translate 0.6s var(--ease-morbida);
  transition-delay: var(--fd);
}
.is-qui .ascena__gruppo .ascena__chip { opacity: 1; translate: 0 0; }
.ascena__formato {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  display: flex; align-items: flex-end;
  padding: 10px 12px; border-radius: 6px;
  border: 1.5px solid color-mix(in srgb, var(--on-block) 60%, transparent);
  font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em;
  opacity: 0; transform: scale(0.8);
  transition: transform 0.8s var(--ease-morbida), opacity 0.6s;
  transition-delay: var(--fd);
}
.ascena__formato--rosso { border-color: var(--accent); background: var(--accent); }
.ascena__formato--carta { border-color: var(--on-block); background: var(--on-block); color: var(--bg-block); }
.is-qui .ascena__formato { opacity: 1; transform: none; }

.acomp__lista { list-style: none; border-top: 1px solid var(--a-linea); }
.avoce { position: relative; border-bottom: 1px solid var(--a-linea); }
.avoce::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.avoce__testa {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 2vw, 1.75rem); align-items: baseline;
  width: 100%; padding: clamp(1.5rem, 2.6vw, 2.4rem) 0;
  background: none; border: 0; font-family: inherit; color: inherit; text-align: left; cursor: pointer;
}
.avoce__testa:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.avoce__n { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--a-tenue); transition: color 0.4s; }
.avoce__nome {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 3.1rem); letter-spacing: -0.035em; line-height: 1.05;
  font-weight: 300; font-variation-settings: 'wght' 300;
  color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color 0.5s, font-variation-settings 0.6s var(--ease), transform 0.6s var(--ease-morbida);
}
.avoce__testa:hover .avoce__nome { color: color-mix(in srgb, currentColor 70%, transparent); }
.avoce__segno { position: relative; width: 18px; height: 18px; align-self: center; }
.avoce__segno::before, .avoce__segno::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px;
  background: var(--accent);
  transition: transform 0.5s var(--ease-morbida);
}
.avoce__segno::after { transform: rotate(90deg); }
.avoce__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease-morbida); }
.avoce__corpo > div { overflow: hidden; }
.avoce__corpo p {
  max-width: 60ch;
  padding: 0 0 clamp(1.5rem, 2.6vw, 2.4rem) calc(13px + clamp(1rem, 2vw, 1.75rem) + 2ch);
  font-size: clamp(0.95rem, 1.15vw, 1.1rem); line-height: 1.6; color: var(--a-muto);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s 0.1s, transform 0.7s var(--ease-morbida) 0.1s;
}
.avoce.is-qui::before { transform: none; }
.avoce.is-qui .avoce__n { color: var(--accent); }
.avoce.is-qui .avoce__nome { color: var(--fg-strong); font-variation-settings: 'wght' 780; transform: translateX(6px); }
.avoce.is-qui .avoce__segno::after { transform: rotate(0); }
.avoce.is-qui .avoce__corpo { grid-template-rows: 1fr; }
.avoce.is-qui .avoce__corpo p { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .acomp__griglia { grid-template-columns: 1fr; }
  .acomp__lato { display: none; }
  .avoce__corpo p { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .asez .rv { opacity: 1; transform: none; }
  .ascena__battito, .ascena__goccia, .ascena__chip { animation: none; }
}