/* ===========================================================================
   SAPIUS — vetrina
   ---------------------------------------------------------------------------
   Linguaggio visivo: quadro elettrico e vetro. Fondo scuro come un pannello di
   reparto, pannelli di vetro sopra, LED con i colori che il prodotto usa
   davvero (verde attivo, ambra transizione, rosso guasto, grigio sconosciuto).

   Nessun carattere e nessun foglio di stile esterni: questa pagina viene
   servita dallo stesso processo che serve il prodotto, e su una rete chiusa
   una pagina che scarica da una CDN e' una pagina bianca.
   =========================================================================== */

body[data-vista="vetrina"] #area { display: none; }
body[data-vista="area"] #vetrina,
body[data-vista="area"] .v-assistente { display: none; }
body[data-vista="area"] .solo-vetrina { display: none; }

:root {
  /* Neri e grigi sono quelli della chat: stesso prodotto, stessi grigi. Dal marchio non si
     potevano prendere — il logo non ha un solo pixel scuro. */
  --v-fondo:        #181818;
  --v-fondo-2:      #202020;
  --v-fondo-3:      #2d2d2d;
  --v-vetro:        rgba(255, 255, 255, .045);
  --v-vetro-forte:  rgba(255, 255, 255, .075);
  --v-bordo:        rgba(255, 255, 255, .09);
  --v-bordo-vivo:   rgba(255, 255, 255, .16);
  --v-testo:        #f3f3f3;
  --v-testo-2:      #c2c2c2;
  --v-testo-3:      #8e8e8e;

  /* L'oro del marchio, misurato sui pixel opachi di logo-sapius.png: il 90% del logo e' oro,
     media pesata #BD9552. La luce #DBB262 e l'ombra dell'emblema #926A2C servono perche' il
     marchio E' una sfumatura di metallo, non una tinta piatta: con un valore solo i bottoni
     pieni diventano piatti e non somigliano piu' al logo che hanno sopra.
     Verifica indipendente: le 521 triplette RGB di src/Sapius.V2.Cli/marchio.ans danno #B99454,
     quattro punti su 255 di scarto. */
  --v-oro:          #bd9552;
  --v-oro-chiaro:   #dbb262;
  --v-oro-scuro:    #926a2c;

  /* Il secondo colore del marchio: l'argento e' il 10% dei pixel del logo. */
  --v-argento:      #adafb3;

  /* Il testo che sta SOPRA l'oro pieno. Bianco su oro da' 2,4:1, cioe' illeggibile; il nero
     del fondo da' 6,7:1. */
  --v-su-oro:       #181818;

  /* Gli stati, presi dalla chat: bassi di saturazione, perche' in una schermata scura un
     colore acceso grida anche quando sta solo dicendo «fatto». */
  --v-verde:        #6cc48b;
  --v-ambra:        #d97757;
  --v-rosso:        #e8705f;
  --v-raggio:       16px;
  --v-raggio-p:     10px;
  --v-mono:         ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --v-sans:         system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --v-dentro:       1240px;
}

/* ---------------------------------------------------------------- base --- */

#vetrina {
  position: relative;
  font-family: var(--v-sans);
  color: var(--v-testo);
  background: var(--v-fondo);
  overflow-x: clip;
}

#vetrina * { box-sizing: border-box; }

#vetrina h1, #vetrina h2, #vetrina h3 {
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.12;
  font-weight: 640;

  /* Il foglio del portale scrive i titoli in maiuscolo e in oro: qui no, perche' la vetrina
     ha un suo respiro. Dichiarato, non lasciato all'ordine di caricamento. */
  text-transform: none;
  color: var(--v-testo);
}

#vetrina .v-bottone,
#vetrina .v-scelta,
.v-assistente .v-scelta { text-transform: none; letter-spacing: normal; }

#vetrina p { margin: 0; }

.v-mono { font-family: var(--v-mono); font-variant-ligatures: none; }

.v-minuto { color: var(--v-testo-3); font-size: .82rem; line-height: 1.6; }

.v-dentro {
  width: min(100% - 48px, var(--v-dentro));
  margin-inline: auto;
}

.v-centrato { text-align: center; }

.v-sezione {
  position: relative;
  padding: clamp(64px, 9vw, 132px) 0;
  z-index: 1;
}

.v-alternata { background: linear-gradient(180deg, transparent, var(--v-fondo-2) 12%, var(--v-fondo-2) 88%, transparent); }

.v-testata { max-width: 780px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }

.v-occhiello {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border: 1px solid var(--v-bordo);
  border-radius: 999px;
  background: var(--v-vetro);
  color: var(--v-oro-chiaro);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.v-titolone { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }

.v-sommario {
  margin-top: 20px;
  color: var(--v-testo-2);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.65;
}

/* --------------------------------------------------------- sfondi vivi --- */

.v-trama {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(173, 175, 179, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 175, 179, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 35%, transparent 78%);
}

.v-bagliori { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.v-bagliori i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  animation: v-galleggia 22s ease-in-out infinite;
}

.v-bagliori i:nth-child(1) {
  width: 46vw; height: 46vw; top: -14vw; left: -8vw;
  background: radial-gradient(circle, rgba(189, 149, 82, .42), transparent 68%);
}
.v-bagliori i:nth-child(2) {
  width: 38vw; height: 38vw; top: 24vw; right: -12vw;
  background: radial-gradient(circle, rgba(108, 196, 139, .20), transparent 68%);
  animation-delay: -7s;
}
.v-bagliori i:nth-child(3) {
  width: 30vw; height: 30vw; top: 68vw; left: 18vw;
  background: radial-gradient(circle, rgba(219, 178, 98, .18), transparent 68%);
  animation-delay: -14s;
}

@keyframes v-galleggia {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(3vw, 4vw, 0) scale(1.08); }
  66%      { transform: translate3d(-3vw, 2vw, 0) scale(.94); }
}

/* ---------------------------------------------------------------- vetro -- */

.v-vetro-carta {
  position: relative;
  border: 1px solid var(--v-bordo);
  border-radius: var(--v-raggio);
  background: linear-gradient(160deg, var(--v-vetro-forte), var(--v-vetro) 45%, rgba(255, 255, 255, .02));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .07) inset,
    0 24px 60px -30px rgba(0, 0, 0, .9);
  overflow: hidden;
}

.v-vetro-carta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
}

/* ------------------------------------------------------------- bottoni --- */

.v-bottone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--v-raggio-p);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--v-testo);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.v-bottone:hover { transform: translateY(-2px); }
.v-bottone:active { transform: translateY(0); }

.v-primario {
  background: linear-gradient(180deg, var(--v-oro-chiaro), var(--v-oro));
  box-shadow: 0 10px 30px -12px rgba(189, 149, 82, .55), 0 1px 0 rgba(255, 255, 255, .25) inset;
  color: var(--v-su-oro);
}
.v-primario:hover { box-shadow: 0 16px 40px -14px rgba(189, 149, 82, 1), 0 1px 0 rgba(255, 255, 255, .3) inset; }

.v-vetro {
  border-color: var(--v-bordo-vivo);
  background: var(--v-vetro);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.v-vetro:hover { background: var(--v-vetro-forte); border-color: rgba(255, 255, 255, .3); }

.v-largo { width: 100%; justify-content: center; }

.v-play {
  width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.v-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.v-azioni-centro { justify-content: center; }

/* -------------------------------------------------------------- LED ------ */

.v-led {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--v-testo-3);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
  flex: none;
}
.v-verde  { background: var(--v-verde);  box-shadow: 0 0 10px rgba(108, 196, 139, .9),  0 0 0 3px rgba(108, 196, 139, .14); animation: v-battito 2.6s ease-in-out infinite; }
.v-ambra  { background: var(--v-ambra);  box-shadow: 0 0 10px rgba(217, 119, 87, .9), 0 0 0 3px rgba(217, 119, 87, .14); }
.v-rosso  { background: var(--v-rosso);  box-shadow: 0 0 10px rgba(232, 112, 95, .9),  0 0 0 3px rgba(232, 112, 95, .14); animation: v-battito 1.1s ease-in-out infinite; }
.v-grigio { background: #6b7c96; }
.v-vuoto  { background: transparent; border: 1px dashed var(--v-testo-3); }

@keyframes v-battito {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.v-verde-testo { color: var(--v-verde); }
.v-ambra-testo { color: var(--v-ambra); }

/* ------------------------------------------------------------ apertura --- */

.v-apertura { padding-top: clamp(52px, 7vw, 96px); }

.v-apertura-griglia {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}

.v-apertura-testo h1 { margin-top: 6px; }
.v-apertura-testo .v-sommario { max-width: 560px; }

.v-titolone .v-risalto {
  background: linear-gradient(100deg, var(--v-oro-chiaro), var(--v-oro-chiaro) 45%, var(--v-verde));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.v-fiducia {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.v-fiducia li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--v-testo-3);
  font-size: .82rem;
}
.v-fiducia b { color: var(--v-testo); font-size: 1rem; }

.v-apertura-figura { position: relative; }

/* ------------------------------------------------------------- telaio ---- */

.v-telaio {
  position: relative;
  border: 1px solid var(--v-bordo-vivo);
  border-radius: var(--v-raggio);
  background: var(--v-fondo-3);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 40px 90px -40px rgba(0, 0, 0, 1);
  overflow: hidden;
}

.v-telaio img, .v-telaio video {
  display: block;
  width: 100%;
  height: auto;
}

.v-telaio-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--v-bordo);
  background: rgba(255, 255, 255, .03);
}

.v-telaio-titolo { color: var(--v-testo-2); font-size: .76rem; }

.v-pallini { display: inline-flex; gap: 6px; }
.v-pallini i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }

.v-stato-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(108, 196, 139, .35);
  border-radius: 999px;
  color: var(--v-verde);
  font-family: var(--v-mono);
  font-size: .68rem;
  letter-spacing: .1em;
}

.v-scansione {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(219, 178, 98, .10) 48%, transparent 52%);
  background-size: 100% 260%;
  animation: v-scansiona 7s linear infinite;
}

@keyframes v-scansiona {
  from { background-position: 0 -120%; }
  to   { background-position: 0 220%; }
}

/* ---------------------------------------------------- schede fluttuanti -- */

.v-scheda-fluttuante {
  position: absolute;
  padding: 14px 16px;
  border: 1px solid var(--v-bordo-vivo);
  border-radius: 14px;
  background: rgba(10, 16, 28, .82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 24px 60px -28px #000;
  animation: v-fluttua 9s ease-in-out infinite;
}

.v-scheda-stati { left: -58px; bottom: -58px; width: 214px; }

/* ------------------------------------------------------ Sapius al lavoro -- */

.v-lavoro { background: #070c16; }

.v-lavoro-corpo {
  position: relative;
  margin: 0;
  padding: 22px 24px;
  min-height: 430px;
  font-size: .8rem;
  line-height: 1.85;
  color: var(--v-testo-2);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}
.v-lavoro-corpo .v-c-verde { color: var(--v-verde); }
.v-lavoro-corpo .v-c-ambra { color: var(--v-ambra); }
.v-lavoro-corpo .v-c-blu   { color: var(--v-oro-chiaro); }
.v-lavoro-corpo .v-c-tenue { color: var(--v-testo-3); }

.v-cursore {
  display: inline-block;
  width: 8px; height: 15px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--v-oro-chiaro);
  animation: v-lampeggia 1.05s steps(2, start) infinite;
}
@keyframes v-lampeggia { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.v-scheda-assenso {
  right: -34px; bottom: 54px; width: 244px;
  border-color: rgba(217, 119, 87, .26);
  animation-delay: -4.5s;
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.v-scheda-assenso.v-acceso {
  border-color: rgba(217, 119, 87, .7);
  box-shadow: 0 0 0 1px rgba(217, 119, 87, .25), 0 24px 60px -24px rgba(217, 119, 87, .5);
}
.v-assenso-riga {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px;
  color: var(--v-testo-2); font-size: .78rem;
}

/* La barra in alto e' del portale: in vetrina il richiamo principale prende l'oro del
   marchio, cosi' la pagina e il logo che le sta sopra parlano lo stesso linguaggio. */
body[data-vista="vetrina"] .barra .bottone.primario {
  background: linear-gradient(180deg, var(--v-oro-chiaro), var(--v-oro));
  border-color: transparent;
  color: var(--v-su-oro);
  box-shadow: 0 10px 26px -12px rgba(189, 149, 82, .55);
}
body[data-vista="vetrina"] .barra.barra-staccata {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(5, 8, 15, .78);
  border-bottom: 1px solid var(--v-bordo);
}
.v-scheda-manovra { right: -34px; top: -30px; width: 232px; animation-delay: -4.5s; }

@keyframes v-fluttua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.v-stati { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.v-stati li { display: flex; align-items: center; gap: 9px; font-size: .78rem; color: var(--v-testo-2); }

.v-manovra-riga {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 9px; font-size: .78rem; color: var(--v-testo-2);
}
.v-manovra-riga b { color: var(--v-testo); font-size: .76rem; }

.v-manovra-barra {
  margin-top: 12px; height: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.v-manovra-barra i {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, var(--v-oro), var(--v-verde));
  animation: v-avanza 3.4s ease-in-out infinite;
}

@keyframes v-avanza {
  0%   { width: 8%; }
  60%  { width: 92%; }
  100% { width: 8%; }
}

.v-scorri {
  position: absolute; left: 50%; bottom: 22px;
  width: 22px; height: 36px; margin-left: -11px;
  border: 1px solid var(--v-bordo-vivo); border-radius: 12px;
}
.v-scorri span {
  position: absolute; left: 50%; top: 8px;
  width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
  background: var(--v-testo-3);
  animation: v-scendi 2s ease-in-out infinite;
}
@keyframes v-scendi {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(10px); opacity: .2; }
}

/* ------------------------------------------------------------- griglie --- */

.v-griglia { display: grid; gap: clamp(16px, 2vw, 24px); }
.v-griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-griglia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v-griglia-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.v-due-colonne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* --------------------------------------------------------------- carte --- */

.v-carta { padding: clamp(22px, 2.4vw, 30px); }
.v-carta h3 { font-size: 1.12rem; margin-bottom: 10px; }
.v-carta p { color: var(--v-testo-2); font-size: .94rem; line-height: 1.65; }

.v-icona {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border: 1px solid var(--v-bordo);
  border-radius: 12px;
  background: rgba(189, 149, 82, .12);
  color: var(--v-oro-chiaro);
}
.v-icona svg { width: 22px; height: 22px; }

.v-spunta { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.v-spunta li {
  position: relative;
  padding-left: 24px;
  color: var(--v-testo-2);
  font-size: .9rem;
  line-height: 1.55;
}
.v-spunta li::before {
  content: "";
  position: absolute; left: 4px; top: .48em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--v-verde);
  box-shadow: 0 0 8px rgba(108, 196, 139, .8);
}
.v-spunta-grande li { font-size: .98rem; padding-left: 28px; }

[data-inclina] { transition: transform .3s cubic-bezier(.2, .7, .3, 1), border-color .3s ease; }
[data-inclina]:hover { border-color: var(--v-bordo-vivo); }

/* --------------------------------------------------------------- passi --- */

.v-passi { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(48px, 6vw, 96px); }

.v-passo {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.v-passo-invertito .v-passo-testo { order: 2; }

.v-numero {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--v-oro-chiaro);
  font-size: .95rem;
  letter-spacing: .1em;
}
.v-passo-testo h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); margin-bottom: 14px; }
.v-passo-testo p { color: var(--v-testo-2); line-height: 1.7; }
.v-passo-testo .v-minuto { margin-top: 14px; }

/* ----------------------------------------------------------- terminale --- */

.v-terminale { overflow: hidden; }
.v-terminale-barra {
  padding: 10px 16px;
  border-bottom: 1px solid var(--v-bordo);
  color: var(--v-testo-3);
  font-size: .74rem;
  background: rgba(255, 255, 255, .03);
}
.v-terminale-corpo {
  margin: 0;
  padding: 20px;
  font-size: .82rem;
  line-height: 1.75;
  color: var(--v-testo-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.v-terminale-corpo .v-c-verde { color: var(--v-verde); }
.v-terminale-corpo .v-c-ambra { color: var(--v-ambra); }
.v-terminale-corpo .v-c-blu   { color: var(--v-oro-chiaro); }
.v-terminale-corpo .v-c-tenue { color: var(--v-testo-3); }

/* ----------------------------------------------------------- pacchetto --- */

.v-pacchetto { padding: 22px 24px; }
.v-pacchetto-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v-pacchetto-righe { margin: 18px 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.v-pacchetto-righe li {
  display: flex; justify-content: space-between; gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, .07);
  font-size: .8rem; color: var(--v-testo-2);
}
.v-pacchetto-righe b { color: var(--v-testo); }

.v-distintivo {
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--v-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
}
.v-distintivo-verde { background: rgba(108, 196, 139, .14); color: var(--v-verde); border: 1px solid rgba(108, 196, 139, .3); }
.v-distintivo-blu   { background: rgba(189, 149, 82, .16); color: var(--v-oro-chiaro); border: 1px solid rgba(189, 149, 82, .35); }

/* ------------------------------------------------------------ manovra ---- */

.v-contratto { text-align: left; }
.v-etichetta { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--v-testo-3); }

.v-onda {
  position: relative;
  height: 54px;
  margin: 18px 0;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 14px 100%,
    rgba(255, 255, 255, .02);
  overflow: hidden;
}
.v-onda i {
  position: absolute; left: 0; bottom: 12px;
  height: 2px; border-radius: 2px;
  background: var(--v-oro-chiaro);
  box-shadow: 0 0 12px rgba(219, 178, 98, .9);
}
.v-onda-livello i  { width: 100%; animation: v-livello 4s ease-in-out infinite; }
.v-onda-impulso i  { width: 100%; animation: v-impulso 2.6s linear infinite; }
.v-onda-mailbox i:nth-child(1) { width: 100%; animation: v-impulso 3.2s linear infinite; }
.v-onda-mailbox i:nth-child(2) { width: 100%; bottom: 30px; background: var(--v-verde); box-shadow: 0 0 12px rgba(108, 196, 139,.8); animation: v-impulso 3.2s linear .6s infinite; }

@keyframes v-livello {
  0%, 45%   { transform: translateY(0); }
  55%, 100% { transform: translateY(-22px); }
}
@keyframes v-impulso {
  0%, 18%   { transform: translateY(0); }
  22%, 34%  { transform: translateY(-22px); }
  38%, 100% { transform: translateY(0); }
}

.v-affermazioni {
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--v-bordo);
  border-radius: var(--v-raggio);
  background: linear-gradient(160deg, rgba(189, 149, 82, .09), rgba(255, 255, 255, .02));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.v-affermazioni h3 { text-transform: uppercase; letter-spacing: .14em; margin-bottom: 20px; }
.v-affermazione {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px;
  border: 1px solid var(--v-bordo);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  font-size: .9rem; color: var(--v-testo-2); line-height: 1.55;
}
.v-affermazione b {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 7px;
  background: rgba(189, 149, 82, .18);
  color: var(--v-oro-chiaro);
  font-size: .78rem;
}
.v-citazione {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 3px solid var(--v-oro);
  color: var(--v-testo);
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  line-height: 1.55;
  font-style: italic;
}

/* ----------------------------------------------------------- galleria ---- */

.v-galleria { display: grid; gap: 20px; }
.v-galleria-voci { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.v-galleria-voce {
  padding: 9px 16px;
  border: 1px solid var(--v-bordo);
  border-radius: 999px;
  background: var(--v-vetro);
  color: var(--v-testo-2);
  font: inherit; font-size: .84rem;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.v-galleria-voce:hover { color: var(--v-testo); border-color: var(--v-bordo-vivo); }
.v-galleria-voce.v-attiva {
  color: #fff;
  border-color: rgba(189, 149, 82, .55);
  background: rgba(189, 149, 82, .18);
}
.v-operion-punti { margin-top: clamp(28px, 3vw, 44px); }

.v-galleria-telaio { position: relative; }
/* In basso a SINISTRA: a destra ci stanno gia' il chatbot della vetrina e, dentro le demo,
   l'assistente d'impianto. Tre bottoni nello stesso angolo sono un bottone che non si preme. */
.v-galleria-apri {
  position: absolute; left: 18px; bottom: 18px;
  font-size: .86rem; padding: 10px 18px;
}
.v-galleria-apri::after { content: " ↗"; }

/* ------------------------------------------------------------ piano unico -- */

.v-piano-unico {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 3.4vw, 44px);
  align-items: center;
  border-color: rgba(189, 149, 82, .4);
  background:
    radial-gradient(90% 120% at 12% -10%, rgba(189, 149, 82, .2), transparent 58%),
    linear-gradient(160deg, var(--v-vetro-forte), var(--v-vetro));
}
.v-piano-lato { display: grid; gap: 12px; justify-items: start; }
.v-piano-lato h3 { font-size: 1.3rem; }
.v-piano-lato .v-prezzo b { font-size: clamp(2.4rem, 4.4vw, 3.4rem); }
.v-piano-lato .v-bottone { margin-top: 10px; }
.v-piano-elenco li { font-size: 1rem; }

@media (max-width: 860px) {
  .v-piano-unico { grid-template-columns: minmax(0, 1fr); }
  .v-galleria-apri { position: static; margin: 14px 18px 18px; }
}

/* -------------------------------------------------------------- catena --- */

.v-catena { padding: clamp(24px, 3vw, 34px); }
.v-catena h3 { text-transform: uppercase; letter-spacing: .14em; margin-bottom: 18px; }
.v-catena-passi { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: k; display: grid; gap: 11px; }
.v-catena-passi li {
  counter-increment: k;
  position: relative;
  padding-left: 34px;
  color: var(--v-testo-2);
  font-size: .82rem;
  line-height: 1.6;
}
.v-catena-passi li::before {
  content: counter(k, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  color: var(--v-oro-chiaro);
  font-size: .74rem;
}
.v-catena-passi li::after {
  content: "";
  position: absolute; left: 9px; top: 1.5em; bottom: -11px;
  width: 1px;
  background: linear-gradient(180deg, rgba(189, 149, 82, .5), transparent);
}
.v-catena-passi li:last-child::after { display: none; }

/* -------------------------------------------------------------- numeri --- */

.v-numeri { padding-block: clamp(44px, 5vw, 72px); }
.v-numero-carta {
  padding: 24px 18px;
  border: 1px solid var(--v-bordo);
  border-radius: var(--v-raggio);
  background: var(--v-vetro);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
}
.v-numero-carta b {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
  color: var(--v-testo);
  letter-spacing: -.03em;
}
.v-numero-carta span { display: block; margin-top: 8px; color: var(--v-testo-3); font-size: .82rem; line-height: 1.5; }

/* --------------------------------------------------------------- video --- */

.v-video-telaio video { background: #000; aspect-ratio: 1500 / 950; object-fit: cover; }

/* Una sezione pronta ma spenta (per esempio l'assistenza remota, data-da-accendere): senza
   questa riga il display di .v-sezione vincerebbe su «hidden». */
.v-sezione[hidden] { display: none; }

/* ------------------------------------------------------------- prova ----- */

.v-prova-nota { margin-top: 18px; }

/* ----------------------------------------------------------- domande ----- */

.v-domande { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.v-domanda { padding: 0; }
.v-domanda summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 22px;
  color: var(--v-testo);
  font-weight: 600;
}
.v-domanda summary::-webkit-details-marker { display: none; }
.v-domanda summary::after { content: '+'; color: var(--v-oro-chiaro); font-family: var(--v-mono); flex: none; }
.v-domanda[open] summary::after { content: '−'; }
.v-domanda summary:focus-visible { outline: 2px solid var(--v-oro-chiaro); outline-offset: 2px; border-radius: var(--v-raggio-p); }
.v-domanda p { padding: 0 22px 20px; color: var(--v-testo-2); font-size: .95rem; line-height: 1.65; }

/* --------------------------------------------------------- protocolli ---- */

.v-protocollo-elenco { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.v-protocollo-elenco li {
  display: grid;
  grid-template-columns: 12px minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: .9rem;
}
.v-protocollo-elenco li:last-child { border-bottom: 0; padding-bottom: 0; }
.v-protocollo-elenco b { color: var(--v-testo); font-weight: 600; }
.v-protocollo-elenco span:last-child { color: var(--v-testo-3); font-size: .84rem; }

/* Requisiti (25/9/2026): un punto d'oro per riga, fermo. Niente legenda a LED: ogni riga e' una
   cosa che serve, non uno stato di prova. «In arrivo» ha il punto vuoto e sta sotto un titolo suo. */
.v-punto {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--v-oro-chiaro);
  box-shadow: 0 0 0 3px rgba(219, 178, 98, .14);
  align-self: center;
}
.v-punto-arrivo { background: transparent; border: 1.5px solid var(--v-oro-chiaro); box-shadow: none; }
.v-etichetta-arrivo { margin-top: 26px; }
.v-in-arrivo span:last-child { color: var(--v-testo-2); }
.v-protocolli .v-carta > .v-minuto { margin-top: 16px; color: var(--v-testo-2); }

@media (max-width: 600px) {
  .v-protocollo-elenco li { grid-template-columns: 12px minmax(0, 1fr); gap: 6px 12px; }
  .v-protocollo-elenco span:last-child { grid-column: 2; }
  .v-protocollo-elenco .v-punto { align-self: baseline; margin-top: 5px; }
}

/* --------------------------------------------------------------- piani --- */

.v-piano { display: flex; flex-direction: column; gap: 14px; }
.v-piano h3 { font-size: 1.15rem; }
.v-piano .v-bottone { margin-top: auto; }
.v-prezzo { display: flex; align-items: baseline; gap: 8px; }
.v-prezzo b { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.03em; }

.v-piano-spicco {
  border-color: rgba(189, 149, 82, .45);
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(189, 149, 82, .22), transparent 60%),
    linear-gradient(160deg, var(--v-vetro-forte), var(--v-vetro));
}
.v-piano .v-distintivo { align-self: flex-start; }

/* I bottoni di un piano stanno in fondo alla carta, uno sotto l'altro: prova e acquisto. */
.v-piano-azioni { margin-top: auto; display: grid; gap: 10px; }
.v-piano .v-piano-azioni .v-bottone { margin-top: 0; justify-content: center; }

/* La famiglia Operion, sotto i due piani: stessa carta, prezzo un po' più piccolo. */
.v-testata-famiglia { margin-top: clamp(48px, 6vw, 80px); }
.v-famiglia .v-prezzo { flex-wrap: wrap; }
.v-famiglia .v-prezzo b { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.v-famiglia p { font-size: .92rem; }
.v-box-immagine {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: 10px;
  margin: 14px 0 18px;
}

/* Il requisito dell'abbonamento del cliente: sta sotto le tre carte, largo, perche' e' la
   condizione che cambia il conto della spesa e non deve stare in una nota a pie' di pagina. */
.v-requisito {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: clamp(20px, 2.4vw, 30px);
  padding: clamp(22px, 2.6vw, 30px);
}
.v-requisito h3 { font-size: 1.05rem; margin-bottom: 8px; }
.v-requisito p { color: var(--v-testo-2); font-size: .94rem; line-height: 1.65; }
.v-requisito .v-minuto { margin-top: 10px; }
.v-requisito-segno {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(108, 196, 139, .32);
  border-radius: 12px;
  background: rgba(108, 196, 139, .1);
  color: var(--v-verde);
}
.v-requisito-segno svg { width: 24px; height: 24px; }

@media (max-width: 760px) {
  .v-requisito { grid-template-columns: minmax(0, 1fr); }
}

#listinoVetrina { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
#listinoVetrina li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--v-bordo);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  font-size: .86rem;
  color: var(--v-testo-2);
}
#listinoVetrina li b { color: var(--v-testo); font-family: var(--v-mono); }

/* ------------------------------------------------------------- scarica --- */

.v-scarica-carta { padding: clamp(22px, 2.6vw, 30px); }
.v-scarica-carta h3 { margin-bottom: 16px; color: var(--v-testo-3); }
.v-scarica-due { display: grid; gap: 18px; }

.v-scarica-righe { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.v-scarica-righe li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: .8rem; color: var(--v-testo-3);
}
.v-scarica-righe b { color: var(--v-testo-2); font-family: var(--v-mono); font-size: .76rem; word-break: break-all; text-align: right; }

/* il prezzo pieno accanto a quello di lancio */
.v-prezzo-pieno { margin-top: -4px; font-size: .86rem; color: var(--v-testo-3); }
.v-prezzo-pieno s { opacity: .75; }
.v-prezzo-pieno span { color: var(--v-ambra); }
.scaricabile { display: grid; gap: 12px; }
.scaricabile a { color: var(--v-oro-chiaro); }
/* Il bottone «Scarica la versione …» e' oro pieno: il testo sopra e' scuro. La regola qui sopra
   (link oro) pesa piu' di .v-primario e lo rendeva oro su oro, quasi invisibile (25/9/2026).
   #181818 su #dbb262/#bd9552 da' circa 8,9:1 e 6,4:1, oltre il 4,5:1 richiesto. */
.scaricabile a.v-bottone.v-primario,
.scaricabile a.v-bottone.v-primario:hover,
.scaricabile a.v-bottone.v-primario:visited { color: var(--v-su-oro); font-weight: 600; }
.scaricabile .riga {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: .86rem; color: var(--v-testo-2);
}

/* -------------------------------------------------------------- modulo --- */

.v-modulo { display: grid; gap: 14px; padding: clamp(24px, 3vw, 32px); }
.v-modulo label { display: grid; gap: 7px; font-size: .84rem; color: var(--v-testo-2); }
.v-modulo input,
.v-modulo select,
.v-modulo textarea {
  padding: 12px 14px;
  border: 1px solid var(--v-bordo);
  border-radius: var(--v-raggio-p);
  background: rgba(0, 0, 0, .28);
  color: var(--v-testo);
  font: inherit;
  font-size: .92rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.v-modulo input:focus,
.v-modulo select:focus,
.v-modulo textarea:focus {
  outline: none;
  border-color: rgba(189, 149, 82, .6);
  box-shadow: 0 0 0 4px rgba(189, 149, 82, .16);
}
.v-modulo textarea { resize: vertical; min-height: 96px; }
.v-modulo .v-bottone { margin-top: 6px; }
#esitoInformazioni:not(:empty) { margin-top: 4px; color: var(--v-verde); }
#esitoInformazioni.v-errore { color: var(--v-ambra); }

/* ------------------------------------------------------------- manuale --- */

#manuale { padding-block: clamp(48px, 6vw, 84px); }
.v-manuale-lingue { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* il poster della dimostrazione, finche' il filmato non e' in linea */
.v-video-invito {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 16px; justify-items: center;
  background: linear-gradient(180deg, rgba(5, 8, 15, .35), rgba(5, 8, 15, .82));
  text-align: center;
}
.v-video-invito p { max-width: 460px; color: var(--v-testo-2); font-size: .95rem; line-height: 1.6; }

/* ------------------------------------------------------------ chiusura --- */

.v-chiusura {
  background:
    radial-gradient(90% 120% at 50% 100%, rgba(189, 149, 82, .16), transparent 62%),
    var(--v-fondo);
}
.v-chiusura-titolo { font-size: clamp(1.8rem, 4vw, 3rem); }

.v-piede { border-top: 1px solid var(--v-bordo); padding: 40px 0; }
.v-piede-dentro { display: grid; gap: 20px; }
.v-piede-marchio { letter-spacing: .3em; margin-right: 12px; }
.v-piede-voci { display: flex; flex-wrap: wrap; gap: 18px; }
.v-piede-voci a { color: var(--v-testo-3); text-decoration: none; font-size: .86rem; }
.v-piede-voci a:hover { color: var(--v-testo); }
.v-piede-nota { max-width: 760px; }

/* ---------------------------------------------------------- assistente --- */

.v-assistente { position: fixed; right: 22px; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 60; }
.v-assistente-bolla {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 18px;
  border: 1px solid #d6af71; border-radius: 999px;
  background: #c29b5d; color: #181715;
  font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer;
  box-shadow: 0 8px 28px #0005;
}
.v-assistente-bolla:hover { background: #d6af71; }
.v-assistente-icona {
  display: inline-grid; place-items: center; width: 21px; height: 21px;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: .8rem;
}
.v-assistente-pannello {
  position: absolute; right: 0; bottom: 62px;
  width: min(calc(100vw - 44px), 420px);
  display: flex; flex-direction: column;
  max-height: min(650px, calc(100dvh - 120px));
  overflow: hidden; background: #222320;
  box-shadow: 0 20px 70px #0008;
  animation: v-apri .22s ease;
}
@keyframes v-apri {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.v-assistente-testa {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--v-bordo);
  font-size: 1rem; font-weight: 600;
}
.v-assistente-chiudi {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--v-testo-2);
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.v-assistente-chiudi:hover { background: #ffffff0d; color: #fff; }
.v-assistente-corpo {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 20px 18px; scrollbar-width: thin; scrollbar-color: #77766a #222320;
}
.v-faq-voce { border-bottom: 1px solid var(--v-bordo); }
.v-faq-voce summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 54px; padding: 14px 0;
  list-style: none; font-size: .9rem; line-height: 1.5; cursor: pointer; color: var(--v-testo);
}
.v-faq-voce summary::-webkit-details-marker { display: none; }
.v-faq-voce summary::after { content: '+'; flex: 0 0 18px; color: #d6af71; font-size: 1.25rem; text-align: center; }
.v-faq-voce[open] summary { color: #e2bd83; }
.v-faq-voce[open] summary::after { content: '−'; }
.v-faq-voce p { margin: 0; padding: 0 0 18px; font-size: .88rem; line-height: 1.7; color: var(--v-testo-2); }
.v-faq-contatto { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; color: #e2bd83; font-size: .9rem; }
.v-assistente :is(button, summary, a):focus-visible { outline: 2px solid #e2bd83; outline-offset: -2px; }

/* --------------------------------------------------------- selettore ----- */

.v-lingue { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--v-bordo); border-radius: 999px; }
/* Con una lingua sola vetrina.js non mette bottoni e nasconde il selettore, ma portale.js
   rimette hidden=false su tutti i .solo-vetrina appena sa chi c'è: senza questa riga in barra
   restava un cerchietto vuoto accanto ad «Accedi». */
.v-lingue:empty { display: none; }
.v-lingua {
  padding: 5px 9px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--v-testo-3);
  font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.v-lingua:hover { color: var(--v-testo); }
.v-lingua.v-attiva { background: rgba(189, 149, 82, .22); color: #fff; }

/* -------------------------------------------------------- animazioni ----- */

.v-con-animazioni [data-anima] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
.v-con-animazioni [data-anima="scala"] { transform: translateY(18px) scale(.97); }
.v-con-animazioni [data-anima].v-dentro-vista { opacity: 1; transform: none; }

/* ------------------------------------------------------------ risposta --- */

@media (max-width: 1080px) {
  .v-apertura-griglia,
  .v-due-colonne,
  .v-passo,
  .v-passo-invertito { grid-template-columns: minmax(0, 1fr); }
  .v-passo-invertito .v-passo-testo { order: 0; }
  .v-griglia-4, .v-griglia-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-scheda-stati { left: 8px; bottom: -18px; }
  .v-scheda-manovra { right: 8px; top: -18px; }
  .v-scheda-assenso { right: 8px; bottom: -22px; }
}

@media (max-width: 760px) {
  .v-dentro { width: min(100% - 32px, var(--v-dentro)); }
  .v-griglia-2, .v-griglia-3, .v-griglia-4, .v-griglia-5 { grid-template-columns: minmax(0, 1fr); }
  .v-scheda-fluttuante { position: static; width: auto; margin-top: 14px; animation: none; }
  .v-azioni .v-bottone { flex: 1 1 auto; justify-content: center; }
  .v-assistente { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #vetrina *,
  .v-assistente * {
    animation: none !important;
    transition: none !important;
  }
  [data-anima] { opacity: 1; transform: none; }
  .v-scansione { display: none; }
}

/* Saldo incluso e ricariche insieme ai prezzi Sapius. */
.v-tagli-ai { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 10px; }
.v-tagli-ai b { padding: 8px 12px; border: 1px solid var(--v-bordo); border-radius: 12px; font-size: clamp(1.2rem, 2.1vw, 1.7rem); white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1080px) { .v-piani.v-griglia-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Demo video: native controls, click to load, responsive on mobile. */
.v-demo-video { margin: 32px 0 0; }
.v-demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0c0f13; border: 1px solid var(--v-bordo); border-radius: 18px; box-shadow: 0 18px 64px #0005; }
.v-demo-crediti { margin-top: 14px; color: var(--v-smorzato, #aaa); font-size: .78rem; line-height: 1.6; overflow-wrap: anywhere; }
.v-demo-crediti a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .v-demo-video video { border-radius: 10px; } }

/* SEO: lingua navigabile e pagina video dedicata. */
a.v-lingua { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.v-demo-link { text-align: center; margin-top: 22px; }
.v-demo-link a { color: var(--oro, #c8a45b); text-underline-offset: 4px; }
.v-demo-pagina { padding: 100px 0 64px; }
.v-demo-pagina h1 { max-width: 1000px; font-size: clamp(1.7rem, 3.5vw, 2.7rem); line-height: 1.16; margin-bottom: 16px; }
.v-demo-pagina p { max-width: 920px; line-height: 1.75; color: #c3c3c3; margin: 14px 0 24px; }
.v-demo-pagina section { margin-top: 40px; }
.v-demo-pagina .v-demo-video { margin: 24px 0; }
.v-demo-pagina a:not(.v-bottone) { color: #d2ad63; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .v-con-animazioni [data-anima] { opacity: 1; transform: none; } }