/* ═══════════════════════════════════════════════════════════════════
   Vektora Prodotti — design system
   Stesse variabili del sito principale (oro/nero), tema scuro di default
   con override chiaro. Il colore d'accento di ogni prodotto arriva da
   prodotti.css (generato dai dati) e sostituisce --accento* nella pagina
   o nell'elemento con data-prodotto.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Font self-hosted (licenza SIL OFL) ─── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
}

/* ─── Token ─── */
:root {
  --oro:        #C9A84C;
  --oro-chiaro: #E8C97A;
  --nero:       #0D0D0D;
  --nero-card:  #1A1A1A;
  --grigio:     #2E2E2E;
  --testo:      #E8E0D0;
  --testo-soft: #C0A882;
  --oro-testo:  #C9A84C;
  --su-oro:     #0D0D0D;

  /* Accento corrente: oro nelle pagine generali, colore del prodotto altrove. */
  --accento:        var(--oro);
  --accento-testo:  var(--oro-testo);
  --su-accento:     var(--su-oro);

  --bordo:      rgba(201, 168, 76, 0.18);
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raggio:     12px;
  --larghezza:  72rem;
  --gutter:     1rem;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --nero:       #FAFAFA;
  --nero-card:  #F0EDE8;
  --grigio:     #DDD8D0;
  --testo:      #1A1510;
  --testo-soft: #6B5F4E;
  /* Più scuro di #8A6A1C del sito principale: resta AA anche sullo sfondo delle schede. */
  --oro-testo:  #7D5F17;
  --su-oro:     #1A1510;
  --bordo:      rgba(125, 95, 23, 0.22);
  color-scheme: light;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nero);
  color: var(--testo);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }
main:focus { outline: none; }
[id] { scroll-margin-top: 5.5rem; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--testo);
}
h1 { font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h3 { font-size: 1.45rem; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25rem; }

a { color: var(--accento-testo); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accento-testo);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg { display: block; max-width: 100%; }

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 640px) { :root { --gutter: 1.5rem; } }

.visivamente-nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ─── Link "salta al contenuto" ─── */
.salta {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--accento);
  color: var(--su-accento);
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(-200%);
}
.salta:focus { transform: none; }

/* ─── Testata ─── */
.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nero);
  border-bottom: 1px solid var(--bordo);
}
.testata__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: 4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--testo);
  text-decoration: none;
}
.marchio__logo { width: 1.9rem; height: 1.9rem; color: var(--oro); }
.marchio__testo { display: flex; flex-direction: column; line-height: 1.1; }
.marchio__nome { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.marchio__sotto {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro-testo);
}

.testata__azioni { display: flex; gap: 0.4rem; order: 2; }

.pulsante-icona {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: transparent;
  color: var(--testo);
  cursor: pointer;
}
.pulsante-icona svg { width: 1.25rem; height: 1.25rem; }
.pulsante-icona:hover { border-color: var(--accento); }

/* Navigazione: su mobile si apre col pulsante menu (solo se JS è attivo,
   altrimenti resta sempre visibile). */
.navigazione { order: 3; width: 100%; }
.js .navigazione { display: none; }
.js .navigazione.aperta { display: block; }
.navigazione__lista {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.75rem;
  display: flex;
  flex-direction: column;
}
.navigazione__lista a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0;
  color: var(--testo-soft);
  text-decoration: none;
  font-size: 0.95rem;
}
.navigazione__lista a:hover,
.navigazione__lista a[aria-current="page"] { color: var(--testo); }
.navigazione__lista a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accento); text-underline-offset: 0.4em; }
.navigazione__prodotto::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accento);
  flex: none;
}

@media (min-width: 900px) {
  .testata__riga { flex-wrap: nowrap; }
  .navigazione, .js .navigazione { display: block; order: 2; width: auto; margin-left: auto; }
  .testata__azioni { order: 3; }
  .testata__menu { display: none; }
  .navigazione__lista { flex-direction: row; gap: 1.6rem; padding: 0; }
  .navigazione__lista a { padding: 0.5rem 0; font-size: 0.9rem; }
}

/* ─── Sezioni ─── */
.sezione { padding: 3.5rem 0; }
.sezione + .sezione { border-top: 1px solid var(--bordo); }
@media (min-width: 900px) { .sezione { padding: 5rem 0; } }

.occhiello {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accento-testo);
}

.intro { font-size: 1.1rem; color: var(--testo-soft); max-width: 42rem; }

.filetto {
  width: 3.5rem;
  height: 2px;
  margin: 0 0 1.5rem;
  border: 0;
  background: var(--accento);
}

/* ─── Pulsanti ─── */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--accento);
  border-radius: 999px;
  background: var(--accento);
  color: var(--su-accento);
  font: 600 0.95rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  /* Come .btn-oro del sito Vektora (vektora.css 221-229): stessi tempi e curve. */
  transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.pulsante:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accento) 25%, transparent);
}
.pulsante--secondario { background: transparent; color: var(--testo); }

.gruppo-pulsanti { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ─── Schede ─── */
.scheda {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--nero-card);
  border: 1px solid var(--bordo);
  border-top: 3px solid var(--accento);
  border-radius: var(--raggio);
  /* Come .card-vektora del sito Vektora (vektora.css 241-250): stessi tempi e curve. */
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.scheda:hover {
  border-color: var(--accento);
  transform: scale(1.02);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accento) 15%, transparent);
}
.scheda h3 { margin-bottom: 0.4em; }
.scheda p:last-child { margin-bottom: 0; }

.griglia { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .griglia--2, .griglia--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .griglia--3 { grid-template-columns: repeat(3, 1fr); } }

/* ─── Badge di stato ─── */
.stato {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--accento);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo);
}
.stato::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accento);
}
.stato--in-arrivo::before { background: transparent; border: 2px solid var(--accento); }
.stato--in-sviluppo::before { background: transparent; border: 2px dashed var(--accento); }

/* ─── FAQ ─── */
.faq { max-width: 48rem; }
.faq details {
  border-bottom: 1px solid var(--bordo);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accento-testo);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--testo-soft); padding-bottom: 0.4rem; }

/* ─── Catalogo ─── */
.catalogo-hero { padding-bottom: 1rem; }
.catalogo-hero + .sezione { border-top: 0; padding-top: 1.5rem; }
.catalogo { list-style: none; padding: 0; margin: 0; }

.elenco-schede { list-style: none; padding: 0; margin: 0; }

.scheda-prodotto { gap: 0.2rem; }
.scheda-prodotto .stato { margin-bottom: 1rem; }
.scheda-prodotto h3 { font-size: 1.9rem; }
/* Tutta la scheda è cliccabile tramite il link del titolo (un solo link per scheda). */
.scheda-prodotto__link { color: var(--testo); text-decoration: none; }
.scheda-prodotto__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }
.scheda-prodotto__link:focus-visible { outline: none; }
.scheda-prodotto:has(.scheda-prodotto__link:focus-visible) { outline: 2px solid var(--accento-testo); outline-offset: 3px; }
.scheda-prodotto__tagline { color: var(--accento-testo); font-weight: 600; }
.scheda-prodotto p { color: var(--testo-soft); }
.scheda-prodotto__piede {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scheda-prodotto__freccia { color: var(--accento-testo); font-size: 1.2rem; transition: transform 0.2s ease; }
.scheda-prodotto:hover .scheda-prodotto__freccia { transform: translateX(4px); }

/* ─── Pagina prodotto ─── */
.eroe {
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, color-mix(in srgb, var(--accento) 16%, transparent), transparent 70%);
  border-bottom: 1px solid var(--bordo);
}
.eroe .stato { margin-bottom: 1.25rem; }
.eroe__titolo { margin-bottom: 0.25em; }
.eroe__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--accento-testo);
  max-width: 40rem;
}

.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 1.75rem; font-size: 0.85rem; }
.briciole li { color: var(--testo-soft); }
.briciole li + li::before { content: "/"; margin-right: 0.4rem; color: var(--testo-soft); }
.briciole a { color: var(--testo-soft); display: inline-block; padding: 0.3rem 0; }
.briciole a:hover { color: var(--testo); }

.colonne { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .colonne { grid-template-columns: minmax(16rem, 1fr) 2fr; gap: 3rem; } }

.prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; margin: 1.25rem 0 0; }
.prezzo__importo { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: var(--testo); }
.prezzo__periodo, .prezzo__iva { color: var(--testo-soft); font-size: 0.9rem; }

.destinatari { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.etichetta {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--testo);
}

.elenco-spunte { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.elenco-spunte li { position: relative; padding-left: 1.9rem; color: var(--testo-soft); }
.elenco-spunte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.9rem;
  height: 0.5rem;
  border-left: 2px solid var(--accento);
  border-bottom: 2px solid var(--accento);
  transform: rotate(-45deg);
}

.cta-finale {
  background:
    radial-gradient(ellipse 60% 80% at 0% 100%, color-mix(in srgb, var(--accento) 14%, transparent), transparent 70%),
    var(--nero-card);
}
.cta-finale h2 { max-width: 36rem; }
.nota + .nota { margin-top: 0.5rem; }
.nota { margin-top: 1.25rem; font-size: 0.85rem; color: var(--testo-soft); max-width: 44rem; }

.altri-prodotti h2 { font-size: 1.8rem; }
.altri-prodotti .scheda-prodotto h3 { font-size: 1.6rem; }

/* ─── Testi lunghi (pagine legali) ─── */
.prosa { max-width: 48rem; }
.prosa h2 { font-size: 1.7rem; margin-top: 2.2rem; }
.prosa h3 { font-size: 1.25rem; margin-top: 1.6rem; }
.prosa p, .prosa li { color: var(--testo-soft); }
.prosa strong { color: var(--testo); }
.prosa dl { display: grid; grid-template-columns: 1fr; gap: 0.2rem 1.5rem; }
.prosa dt { font-weight: 600; color: var(--testo); }
.prosa dd { margin: 0 0 0.7rem; color: var(--testo-soft); }
@media (min-width: 640px) {
  .prosa dl { grid-template-columns: max-content 1fr; }
  .prosa dd { margin: 0; }
}

.aggiornamento { font-size: 0.85rem; color: var(--testo-soft); margin-bottom: 2rem; }
.prosa code { font-size: 0.9em; padding: 0.1em 0.35em; border-radius: 4px; background: var(--nero-card); color: var(--testo); }
.contatti { margin-top: 2rem; }
.contatti__titolo { font-size: 1.5rem; }
.contatti a { overflow-wrap: anywhere; }

/* ─── Piè di pagina ─── */
.piede {
  margin-top: 2rem;
  background: var(--nero-card);
  border-top: 1px solid var(--bordo);
  font-size: 0.9rem;
}
.piede__griglia {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) { .piede__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .piede__griglia { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.piede__nome { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 0.4rem; }
.piede__testo { color: var(--testo-soft); }
.piede__titolo {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro-testo);
  margin-bottom: 0.9rem;
}
.piede__lista { list-style: none; padding: 0; margin: 0; }
.piede__lista li { margin-bottom: 0.15rem; }
.piede__lista a {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--testo-soft);
  text-decoration: none;
}
.piede__lista a:hover { color: var(--testo); text-decoration: underline; }
.piede__fondo { border-top: 1px solid var(--bordo); color: var(--testo-soft); font-size: 0.8rem; }
.piede__fondo-riga {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.piede__fondo p { margin: 0; }
.piede__fondo a { color: inherit; display: inline-block; padding: 0.35rem 0; }

/* ═══════════════════════════════════════════════════════════════════
   ANIMAZIONI — copia identica del sistema del sito Vektora
   (vektora-site-main/assets/css/vektora.css). Stessi tempi, curve e ritardi:
   se cambiano lì, vanno aggiornate anche qui.
   ═══════════════════════════════════════════════════════════════════ */

/* Transizione al cambio tema (vektora.css 46-49) */
body, header, footer, nav, section, div, p, h1, h2, h3, h4, h5, h6, span, a, li, ul {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Logo: contorno poi riempimento, solo al caricamento (vektora.css 195-207) */
.vektora-logo-mark .logo-outline {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: logo-draw 0.9s ease forwards;
}
.vektora-logo-mark .logo-fill {
  opacity: 0;
  animation: logo-fill-in 0.5s ease forwards;
  animation-delay: 0.75s;
}
@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-fill-in { to { opacity: 1; } }

/* Reveal allo scroll (vektora.css 261-271). Qui vale solo con JavaScript attivo
   (classe .js sull'<html>): senza JS i contenuti restano visibili. */
.js .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
/* A reveal concluso main.js toglie .fade-in/.visible: le schede tornano alla
   propria transition di hover (0,3 s) invece di ereditare quella del reveal. */

/* Ingresso al caricamento, un blocco alla volta (vektora.css 273-286).
   6° e 7° figlio: stessa progressione di +0,1 s (gli hero dei prodotti hanno più blocchi). */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal-hero > * {
  opacity: 0;
  animation: reveal-up 0.9s ease forwards;
}
.reveal-hero > *:nth-child(1) { animation-delay: 0.05s; }
.reveal-hero > *:nth-child(2) { animation-delay: 0.15s; }
.reveal-hero > *:nth-child(3) { animation-delay: 0.25s; }
.reveal-hero > *:nth-child(4) { animation-delay: 0.35s; }
.reveal-hero > *:nth-child(5) { animation-delay: 0.45s; }
.reveal-hero > *:nth-child(6) { animation-delay: 0.55s; }
.reveal-hero > *:nth-child(7) { animation-delay: 0.65s; }

/* Titoli con riflesso oro (vektora.css 297-337) */
.clip-title {
  color: var(--oro-testo);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .clip-title {
    background: linear-gradient(100deg,
      var(--oro) 0%, var(--oro-chiaro) 22%, var(--oro) 45%,
      #fff6dd 55%, var(--oro) 68%, var(--oro-chiaro) 85%, var(--oro) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: clip-title-shimmer 9s linear infinite;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35));
  }
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  :root[data-theme="light"] .clip-title {
    background-image: linear-gradient(100deg,
      #8A6A1C 0%, #A98626 22%, #8A6A1C 45%, #B08D2C 55%, #8A6A1C 68%, #A98626 85%, #8A6A1C 100%);
    filter: none;
  }
}
@keyframes clip-title-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .reveal-hero > .clip-title {
    animation: reveal-up 0.9s ease 0.15s forwards, clip-title-shimmer 9s linear infinite;
  }
}

/* ═══ SFONDO ANIMATO — fisso dietro tutta la pagina ═══
   Origine: Vektora Site/animazioni/vektora prodotti/vektora-prodotti-background.html
   (bagliore, canvas, vignettatura). Logica in assets/js/sfondo.js. */
.sfondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --sfondo-bagliore: 0.18;
  --sfondo-vignetta: 0.45;
}
:root[data-theme="light"] .sfondo {
  --sfondo-bagliore: 0.10;
  --sfondo-vignetta: 0.20;
}
.sfondo__bagliore {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85vw;
  height: 75vh;
  background: radial-gradient(circle at center, rgba(201, 168, 76, 0.15) 0%, rgba(0, 240, 255, 0.06) 45%, transparent 70%);
  opacity: var(--sfondo-bagliore);
  filter: blur(50px);
}
.sfondo__canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  /* Leggibilità: il canvas resta sotto al testo al 55% di opacità (vedi README). */
  opacity: 0;
  transition: opacity 0.6s ease;
}
.sfondo.pronto .sfondo__canvas { opacity: 0.55; }
.sfondo__vignetta {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, var(--nero) 100%);
  opacity: var(--sfondo-vignetta);
}

/* ─── Movimento ridotto ─── */
@media (prefers-reduced-motion: reduce) {
  .pulsante:hover, .scheda:hover, .scheda-prodotto:hover .scheda-prodotto__freccia { transform: none; }
  /* Come vektora.css 289-295: tutto visibile subito, niente movimento. */
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .fade-in { opacity: 1; transform: none; transition: none; }
  .reveal-hero > * { opacity: 1; transform: none; }
  .vektora-logo-mark .logo-outline { stroke-dashoffset: 0; }
  .vektora-logo-mark .logo-fill { opacity: 1; }
  .sfondo.pronto .sfondo__canvas { opacity: 0.55; }
}