/* =========================================================================
   StandUp! Srl — pagina /sistema (e /en/system)
   Il linguaggio delle grafiche dello stand: pareti a sfumatura blu e teal,
   cerchi pieni con l'icona e il numero, una linea «neon» a più fili che li
   collega con un puntino a metà strada, trame a puntini, scritte fantasma,
   mappa a puntini.
   Colori campionati dalle grafiche definitive: azzurro #58CAF1, blu notte
   delle icone #1F2E5C, teal #00B3B4 -> #009599, icone teal #00AAAB.
   Si appoggia a style.css: qui ci sono solo le parti che quel foglio non ha.
   Tutte le animazioni si spengono con prefers-reduced-motion.
   ========================================================================= */

.fx {
  --blu-alto: #2159a9;
  --blu-basso: #16244a;
  --blu-scuro: #101c3d;
  --azzurro: #58caf1;
  --notte: #1f2e5c;
  --teal-alto: #00b3b4;
  --teal-basso: #009599;
  --teal-icona: #00aaab;
  --lp-teal: #129b9d;

  /* colori del cerchio e della linea: su fondo chiaro come sulla parete blu */
  --c-anello: var(--azzurro);
  --c-disco: var(--azzurro);
  --c-icona: var(--notte);
  --c-num-fondo: var(--notte);
  --c-num: #fff;
  --neon: var(--azzurro);
}

/* ---------- fasce a tutta larghezza ---------- */
.fx-banda {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: clamp(3.75rem, 2rem + 6vw, 6.75rem) 0;
}
.fx-banda--blu {
  background: linear-gradient(150deg, var(--blu-alto) 0%, #1b438d 42%, var(--blu-basso) 86%, var(--blu-scuro) 100%);
  --c-anello: var(--azzurro); --c-disco: var(--azzurro); --c-icona: var(--notte);
  --c-num-fondo: var(--azzurro); --c-num: var(--notte); --neon: var(--azzurro);
}
.fx-banda--scura {
  background: linear-gradient(180deg, var(--blu-basso) 0%, var(--blu-scuro) 100%);
  --c-anello: var(--azzurro); --c-disco: var(--azzurro); --c-icona: var(--notte);
  --c-num-fondo: var(--azzurro); --c-num: var(--notte); --neon: var(--azzurro);
}
.fx-banda--teal {
  background: linear-gradient(165deg, var(--teal-alto) 0%, #00a7a9 50%, var(--teal-basso) 100%);
  --c-anello: #fff; --c-disco: #fff; --c-icona: var(--teal-icona);
  --c-num-fondo: #fff; --c-num: var(--teal-icona); --neon: #fff;
}
.fx-banda > .wrap { position: relative; z-index: 2; }
.fx-banda h2, .fx-banda h3 { color: #fff; }
.fx-banda p, .fx-banda li { color: rgba(255, 255, 255, 0.92); }
.fx-banda .lead { color: rgba(255, 255, 255, 0.9); }

/* sezioni chiare che ospitano una linea: servono come riferimento */
.fx-tela { position: relative; overflow: hidden; }
.fx-tela > .wrap { position: relative; z-index: 2; }

/* ---------- titoli come sulle pareti ---------- */
/* la domanda grande (azzurra sulla parete blu, bianca sulla teal) */
.fx-domanda {
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 0.85rem;
  color: var(--azzurro);
  text-wrap: balance;
}
.fx-banda--teal .fx-domanda { color: #fff; }
/* la risposta, bianca e maiuscola sotto la domanda */
.fx-titolo {
  font-size: clamp(1.15rem, 0.95rem + 0.95vw, 1.7rem);
  line-height: 1.22;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: #fff;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.fx-sottotitolo {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 50rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}
/* occhiello piccolo: sezioni chiare e blocchi secondari */
.fx-occhiello {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azzurro);
  margin: 0 0 0.75rem;
}
.fx-banda--teal .fx-occhiello { color: #dcfbfa; }

/* ---------- scritta fantasma sul fondo ---------- */
.fx-fantasma {
  position: absolute;
  left: -2vw;
  bottom: -5vw;
  font-size: clamp(9rem, 27vw, 30rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  will-change: transform;
}

/* ---------- trame a puntini ---------- */
.fx-punti::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.4px);
  background-size: 18px 18px;
  opacity: 0.14;
  pointer-events: none;
  z-index: 1;
}
.fx-punti--angolo::after {
  inset: auto 0 0 auto;
  width: min(42vw, 420px);
  height: min(30vh, 300px);
  -webkit-mask-image: linear-gradient(315deg, #000 10%, transparent 70%);
  mask-image: linear-gradient(315deg, #000 10%, transparent 70%);
}
.fx-punti--alto::after {
  inset: 0 0 auto auto;
  width: min(46vw, 520px);
  height: min(36vh, 340px);
  -webkit-mask-image: linear-gradient(225deg, #000 10%, transparent 70%);
  mask-image: linear-gradient(225deg, #000 10%, transparent 70%);
}

/* ---------- il percorso: cerchi pieni collegati dalla linea neon ---------- */
.fx-percorso { position: relative; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.fx-tappe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  position: relative;
  z-index: 2;
}
@media (min-width: 760px) {
  .fx-tappe {
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    gap: clamp(1.25rem, 0.5rem + 2vw, 2.75rem);
  }
}
.fx-tappa { text-align: center; }
.fx-tappa h3 {
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 1.15rem 0 0.5rem;
}
.fx-tappa p {
  font-size: 0.96875rem;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 31ch;
}
.fx-tela .fx-tappa h3 { color: var(--notte); }
.fx-tela .fx-tappa p { color: var(--ink-2, #3a5563); }

.fx-cerchio {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto;
}
.fx-cerchio svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-cerchio__anello,
.fx-cerchio__disco,
.fx-cerchio__icona {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
/* l'anello staccato dal disco, come sulle pareti */
.fx-cerchio__anello {
  fill: none;
  stroke: var(--c-anello);
  stroke-width: 3;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 1s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 200ms + 250ms);
}
.fx-cerchio__disco {
  fill: var(--c-disco);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--i, 0) * 200ms + 150ms);
}
/* l'icona: il gruppo esterno si anima, quello interno la porta al centro.
   (Una transform CSS sul gruppo con l'attributo transform lo sostituirebbe:
   l'icona finirebbe piccola nell'angolo in alto a sinistra.) */
.fx-cerchio__icona {
  fill: none;
  stroke: var(--c-icona);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--i, 0) * 200ms + 450ms);
}
.fx-cerchio__numero {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  background: var(--c-num-fondo);
  color: var(--c-num);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--i, 0) * 200ms + 650ms);
}
.fx-percorso.in .fx-cerchio__anello { stroke-dashoffset: 0; }
.fx-percorso.in .fx-cerchio__disco,
.fx-percorso.in .fx-cerchio__icona,
.fx-percorso.in .fx-cerchio__numero { opacity: 1; transform: scale(1); }

/* la linea neon la disegna sistema.js: un filo principale, un alone e due
   fili sottili che lo accompagnano, come sulle pareti dello stand */
.fx-neon {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.fx-neon path { fill: none; stroke: var(--neon); stroke-linecap: round; stroke-linejoin: round; }
.fx-neon .n-alone { stroke-width: 11; opacity: 0.13; }
.fx-neon .n-filo { stroke-width: 1.1; opacity: 0.5; }
.fx-neon .n-core { stroke-width: 3; }
.fx-neon circle { fill: var(--neon); opacity: 0; transition: opacity .4s ease 1.5s; }
.fx-neon.disegnata circle { opacity: 1; }
.fx-neon.anima path { transition: stroke-dashoffset 2.2s cubic-bezier(.45,.05,.2,1); }

/* ---------- elenchi con la spunta (i punti della brochure) ---------- */
.fx-elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem 2rem;
}
@media (min-width: 900px) { .fx-elenco--due { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-elenco li {
  position: relative;
  padding-left: 2.45rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2, #3a5563);
}
.fx-elenco li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--azzurro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2e5c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.fx-elenco strong { color: var(--notte); font-weight: 800; }
.fx-banda .fx-elenco li { color: rgba(255, 255, 255, 0.9); }
.fx-banda .fx-elenco strong { color: #fff; }
.fx-banda--teal .fx-elenco li::before {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300aaab' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
}

/* ---------- blocco foto + elenco ---------- */
.fx-dettaglio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 900px) {
  .fx-dettaglio { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .fx-dettaglio--inverso > :first-child { order: 2; }
  .fx-dettaglio--stretto { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}
.fx-foto { margin: 0; }
.fx-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(8, 20, 50, 0.1), 0 26px 60px rgba(8, 20, 50, 0.22);
}
.fx-banda .fx-foto img {
  border: 6px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px rgba(4, 12, 32, 0.45);
}
.fx-foto figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-3, #6a8494);
}
.fx-banda .fx-foto figcaption { color: rgba(255, 255, 255, 0.75); }
.fx-foto--verticale img { max-height: 520px; width: auto; max-width: 100%; margin-inline: auto; }
.fx-foto-coppia {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
  height: clamp(220px, 12rem + 14vw, 400px);
}
.fx-foto-coppia .fx-foto { height: 100%; min-height: 0; }
.fx-foto-coppia img { width: 100%; height: 100%; object-fit: cover; }
.fx-foto-coppia .fx-foto--disegno img { object-fit: contain; background: #fff; padding: .5rem; }

/* ---------- il prossimo passo: sempre centrato, col bottone sotto ---------- */
.fx-passo {
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
  max-width: 46rem;
  text-align: center;
}
.fx-passo__etichetta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azzurro);
  margin: 0 0 0.8rem;
}
.fx-passo__etichetta::before,
.fx-passo__etichetta::after {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  opacity: 0.7;
}
.fx-banda--teal .fx-passo__etichetta { color: #fff; }
.fx-chiaro .fx-passo__etichetta { color: var(--brand, #1c6d8c); }
.fx-passo p { font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem); line-height: 1.6; margin: 0 0 1.6rem; }
.fx-chiaro .fx-passo p { color: var(--ink, #0f2029); }
.fx-passo .actions { justify-content: center; }

/* ---------- riquadri (domande e garanzie della brochure) ---------- */
.fx-riquadro {
  border-radius: 16px;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  background: var(--brand-50, #eef4f8);
  border: 1px solid var(--brand-100, #cfe3ec);
}
.fx-riquadro h3 {
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--brand, #1c6d8c);
  margin: 0 0 0.6rem;
}
.fx-riquadro p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--ink, #0f2029); }
.fx-banda .fx-riquadro { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.fx-banda .fx-riquadro h3 { color: var(--azzurro); }
.fx-banda--teal .fx-riquadro { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.3); }
.fx-banda--teal .fx-riquadro h3 { color: #fff; }
.fx-banda .fx-riquadro p { color: #fff; }
.fx-riquadro--grande p { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); }
.fx-riquadro + .fx-riquadro { margin-top: 1rem; }

/* ---------- griglie di funzioni (software, altri settori, rete) ---------- */
.fx-funzioni {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
}
/* il numero di colonne lo decide il contenuto (--n): 6 voci = 3 + 3, mai 4 + 2 */
@media (min-width: 620px) { .fx-funzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .fx-funzioni { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
/* cinque schede su tre colonne: l'ultima riga centrata invece che appoggiata a sinistra */
@media (min-width: 980px) {
  .fx-funzioni--centrate { display: flex; flex-wrap: wrap; justify-content: center; }
  .fx-funzioni--centrate > * { flex: 0 1 calc((100% - 2 * clamp(1rem, 0.6rem + 1.4vw, 1.6rem)) / 3); }
}
.fx-funzione {
  background: #fff;
  border: 1px solid var(--line, #dee7ec);
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.6rem;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.fx-funzione:hover { transform: translateY(-4px); box-shadow: var(--sh, 0 12px 28px rgba(8,29,38,.08)); border-color: var(--brand-100, #cfe3ec); }
.fx-funzione h3 { font-size: 1.0625rem; margin: 1rem 0 0.4rem; color: var(--notte); }
.fx-funzione p { margin: 0; font-size: 0.96875rem; line-height: 1.6; color: var(--ink-2, #3a5563); }
.fx-banda .fx-funzione { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); }
.fx-banda .fx-funzione h3 { color: #fff; }
.fx-banda .fx-funzione p { color: rgba(255, 255, 255, 0.88); }
.fx-banda--teal .fx-funzione { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); }

/* icona in un disco azzurro con l'anello staccato, come i cerchi */
.fx-icona {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--azzurro);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--azzurro);
  margin: 6px;
}
.fx-icona svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--notte);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fx-banda--blu .fx-icona, .fx-banda--scura .fx-icona { box-shadow: 0 0 0 4px #1a3a7a, 0 0 0 6px var(--azzurro); }
.fx-banda--teal .fx-icona { background: #fff; box-shadow: 0 0 0 4px #00a3a5, 0 0 0 6px #fff; }
.fx-banda--teal .fx-icona svg { stroke: var(--teal-icona); }

/* ---------- il cartello stradale dell'apertura ---------- */
.fx-bivio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
}
.fx-porta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 1.9rem 1.4rem 1.6rem;
  border-radius: var(--r-lg, 22px);
  border: 1px solid var(--line, #dee7ec);
  background: #fff;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.fx-porta:hover, .fx-porta:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16, 28, 61, 0.13);
  border-color: currentColor;
}
.fx-porta__icona { width: 72px; height: 72px; margin: 0 0 1rem; display: block; }
.fx-porta__icona * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fx-porta h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.45rem;
  color: currentColor;
}
.fx-porta p { font-size: 0.9375rem; color: var(--ink-2, #3a5563); margin: 0 0 1.1rem; flex: 1 0 auto; }
.fx-porta--self { color: #2159a9; }
.fx-porta--lavasecco, .fx-porta--aprire { color: #00959b; }
/* «Scopri» e la freccia sulla stessa riga: style.css mette gli svg in blocco */
.fx-freccia {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
  text-transform: uppercase;
}
.fx-freccia svg { display: inline-block; flex: 0 0 auto; }
.fx-porta:hover .fx-freccia svg { animation: fx-spinge 1s ease infinite; }
.fx-porta:hover .fx-freccia--sx svg { animation-name: fx-spinge-sx; }
@keyframes fx-spinge { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(5px) } }
@keyframes fx-spinge-sx { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(-5px) } }

/* ---------- marchi ---------- */
.fx-marchio { display: block; height: 34px; width: auto; margin: 0 0 1.75rem; }

/* ---------- parete di armadietti animata ---------- */
.fx-armadi {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  width: 100%;
  min-width: 260px;
  max-width: 440px;
  margin-inline: auto;
  align-self: center;
}
.fx-armadio {
  aspect-ratio: 3 / 4;
  min-height: 34px;
  border-radius: 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.05);
  transition: background .45s ease, border-color .45s ease, transform .45s ease;
}
.fx-armadi.in .fx-armadio.acceso {
  background: var(--azzurro);
  border-color: var(--azzurro);
  transform: translateY(-3px);
}

/* ---------- la filiera: mappa e voci ---------- */
.fx-filiera { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 860px) { .fx-filiera { grid-template-columns: 1fr 1.1fr; } }
.fx-mappa { position: relative; }
.fx-mappa img { width: 100%; height: auto; display: block; }
.fx-mappa__segno {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.fx-mappa__segno::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
}
.fx-mappa.in .fx-mappa__segno::after { animation: fx-onda 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes fx-onda {
  0% { transform: scale(.6); opacity: .9 }
  70% { transform: scale(2.1); opacity: 0 }
  100% { opacity: 0 }
}
.fx-voci { display: grid; gap: 1.35rem; }
.fx-voce { display: flex; gap: 1rem; align-items: center; }
.fx-voce__icona {
  flex: 0 0 auto;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: grid; place-items: center;
}
.fx-voce__icona svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-voce h3 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.fx-voce p { margin: 0; font-size: .96875rem; color: var(--ink-2, #3a5563); }
.fx-tricolore { display: flex; width: 72px; height: 5px; border-radius: 3px; overflow: hidden; margin-bottom: 1.1rem; }
.fx-tricolore i { flex: 1 }
.fx-tricolore i:nth-child(1) { background: #008c45 }
.fx-tricolore i:nth-child(2) { background: #e9ebe4 }
.fx-tricolore i:nth-child(3) { background: #cd212a }

/* ---------- chi c'è dietro: una scheda per nome, col suo logo ---------- */
.fx-attori {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
  margin-top: 2rem;
}
.fx-attore {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line, #dee7ec);
  border-radius: 16px;
  padding: 1.25rem 1.35rem 1.5rem;
}
.fx-attore p { margin: 0; font-size: 0.96875rem; line-height: 1.6; color: var(--ink-2, #3a5563); }
.fx-attore p strong { color: var(--notte); }
/* il logo sta in un badge tutto suo, mai tagliato */
.fx-logo {
  height: 84px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  margin-bottom: 1.1rem;
  background: #fff;
  border: 1px solid var(--line, #dee7ec);
}
.fx-logo img { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.fx-logo--bertin { background: #134b96; border-color: #134b96; }
.fx-logo--standup img { max-height: 42px; }
.fx-logo--lp img { max-height: 30px; }
.fx-logo--euroleather img { max-height: 56px; }
.fx-logo--filpower img { max-height: 58px; }

/* ---------- payoff ---------- */
.fx-payoff {
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 2rem 0 0;
  color: var(--azzurro);
}

.fx-nota { font-size: 0.875rem; color: var(--ink-3, #6a8494); margin: 1.5rem 0 0; }
.fx-centrato { text-align: center; }
.fx-centrato .actions { justify-content: center; }

/* ---------- comparsa in scorrimento ---------- */
.fx-su {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.fx-su.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fx-su, .fx-cerchio__anello, .fx-cerchio__disco, .fx-cerchio__icona, .fx-cerchio__numero,
  .fx-neon path, .fx-neon circle, .fx-armadio, .fx-porta, .fx-funzione {
    transition: none !important;
  }
  .fx-su, .fx-cerchio__disco, .fx-cerchio__icona, .fx-cerchio__numero, .fx-neon circle { opacity: 1 !important; }
  .fx-su, .fx-cerchio__disco, .fx-cerchio__icona, .fx-cerchio__numero, .fx-armadio, .fx-porta, .fx-funzione { transform: none !important; }
  .fx-cerchio__anello { stroke-dashoffset: 0 !important; }
  .fx-neon path { stroke-dashoffset: 0 !important; }
  .fx-mappa.in .fx-mappa__segno::after,
  .fx-porta:hover .fx-freccia svg { animation: none !important; }
  .fx-fantasma { transform: none !important; }
}