/* ============================================================
   Studio Tecnico Geometra Vito Gasparre
   Foglio di stile unico. Ordine: token, base, utility,
   componenti, sezioni, responsive, motion.
   ============================================================ */

/* ---------- 0. CARATTERI ----------
   Serviti dal nostro dominio, non da Google. Chiederli a Google funzionava,
   ma faceva comunicare a un terzo l'indirizzo IP di chiunque aprisse una
   pagina, senza che nessuno l'avesse scelto. Tutti e tre sono a licenza
   aperta (SIL OFL): stanno in assets/fonts/ e si riscaricano con
   tools/prepara-font.py.

   Sono file variabili: un solo file copre tutti i pesi, e per Archivo anche
   le larghezze — i titoli del sito usano font-stretch, quindi l'asse serve
   davvero. Ogni carattere ha due file, latino e latino esteso: unicode-range
   fa scaricare al browser solo quello che gli serve davvero. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. DESIGN TOKEN ---------- */
:root {
  /* Palette: solo neutri, nessun colore di accento.
     Ordine dal chiaro allo scuro. */
  --bianco:     #FFFFFF;
  --carta:      #F4F4F2;
  --nebbia:     #E8E8E6;
  --filo:       #D9DAD9;
  --argento:    #C9CBCC;
  --acciaio:    #6B7073;
  --grafite:    #2A2D2F;
  --inchiostro: #101112;

  /* Filetti su fondo scuro */
  --filo-scuro: #33383A;
  --testo-scuro-secondario: #9DA1A3;

  /* Tipografia */
  --f-display: 'Archivo', 'Arial Narrow', Helvetica, sans-serif;
  --f-corpo:   'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Scala tipografica */
  --t-hero:     clamp(2.5rem, 7.4vw, 6rem);
  --t-titolo:   clamp(1.9rem, 4vw, 3.3rem);
  --t-card:     clamp(1.2rem, 1.7vw, 1.5rem);
  --t-corpo:    1.0625rem;
  --t-piccolo:  0.9375rem;
  --t-eyebrow:  0.6875rem;

  /* Spazio */
  --gutter:      clamp(1.25rem, 4vw, 3rem);
  --larghezza:   1240px;
  --sezione-y:   clamp(4.5rem, 9vw, 8.5rem);

  /* L'header ha due stati. `--h-header` è quello compatto, cioè l'altezza che
     resta sotto agli occhi per quasi tutta la pagina: è quella che regola
     `scroll-padding-top` e la posizione del pannello mobile. */
  --h-header:        68px;
  --h-header-esteso: 108px;
  --h-logo-compatto: 40px;
  --h-logo-esteso:   66px;

  /* Resa delle fotografie. Il colore c'è ma è tenuto basso: tutto il resto
     della pagina è neutro, e un colore pieno spaccherebbe l'insieme. Alzando
     --f-saturazione verso 1 le foto tornano piene, portandola a 0 tornano in
     bianco e nero: è l'unico punto da toccare. */
  --f-saturazione: 0.68;
  --foto: saturate(var(--f-saturazione)) contrast(1.03);

  /* Ombra sotto le fotografie: serve solo a togliere il taglio netto contro il
     fondo, quindi è larga e quasi invisibile. Sul fondo scuro un'ombra scura
     non si vedrebbe, e al suo posto va un alone chiarissimo. */
  --ombra-foto:       0 14px 38px rgba(16, 17, 18, 0.13);
  --ombra-foto-scuro: 0 0 46px 10px rgba(255, 255, 255, 0.05);

  /* Forma e movimento */
  --r: 2px;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-veloce: 180ms var(--curva);
  --t-medio:  380ms var(--curva);
}

@media (max-width: 900px) {
  :root {
    --h-header:        60px;
    --h-header-esteso: 84px;
    --h-logo-compatto: 34px;
    --h-logo-esteso:   50px;
  }
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* Tutte le fotografie passano dalla stessa resa: il colore resta, ma smorzato.
   Una sola regola per tutte, così non si formano due trattamenti diversi man
   mano che arrivano gli asset veri. */
.hero__media img,
.card__media img,
.studio__media img,
.studio__firma img,
.ambiente__scatto img,
.banco__scatto img,
.contatti__media img { filter: var(--foto); }

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 600; }
p  { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

::selection { background: var(--inchiostro); color: var(--bianco); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--inchiostro);
  color: var(--bianco);
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top var(--t-veloce);
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. UTILITY ---------- */
.container {
  width: min(100% - (var(--gutter) * 2), var(--larghezza));
  margin-inline: auto;
}

/* Etichetta tecnica: mono, maiuscolo, preceduta da un trattino di richiamo. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acciaio);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  flex: none;
}

/* ---------- 4. LINEA DI QUOTA (elemento firma) ----------
   Compare solo dove misura davvero qualcosa: la quota porta un valore,
   non è un separatore decorativo. */
.quota {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.quota__tratto {
  position: relative;
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.quota__tratto::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: currentColor;
}
.quota__tratto:first-child::after  { left: 0; }
.quota__tratto:last-child::after   { right: 0; }
.quota__valore {
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.quota--verticale {
  flex-direction: column;
  position: absolute;
  left: -2.75rem;
  top: 0;
  bottom: 0;
  color: var(--acciaio);
}
.quota--verticale .quota__tratto {
  width: 1px;
  height: auto;
  flex: 1;
}
.quota--verticale .quota__tratto::after {
  top: auto;
  left: -5px;
  right: auto;
  width: 11px;
  height: 1px;
}
.quota--verticale .quota__tratto:first-child::after { top: 0; }
.quota--verticale .quota__tratto:last-child::after  { bottom: 0; }
.quota--verticale .quota__valore {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ---------- 5. BOTTONI ---------- */
.btn {
  --bordo: currentColor;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid var(--bordo);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-veloce), color var(--t-veloce),
              border-color var(--t-veloce), transform var(--t-veloce);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--scuro {
  background: var(--inchiostro);
  color: var(--bianco);
  --bordo: var(--inchiostro);
}
.btn--scuro:hover { background: var(--grafite); --bordo: var(--grafite); }

.btn--chiaro {
  background: var(--bianco);
  color: var(--inchiostro);
  --bordo: var(--bianco);
}
.btn--chiaro:hover { background: var(--nebbia); --bordo: var(--nebbia); }

.btn--fantasma {
  background: transparent;
  color: var(--bianco);
  --bordo: rgba(255, 255, 255, 0.45);
}
.btn--fantasma:hover { --bordo: var(--bianco); background: rgba(255, 255, 255, 0.08); }

/* ---------- 6. HEADER ---------- */
/* In cima alla pagina l'header è esteso e il marchio è grande; appena si
   scorre si contrae in una barra. Le due altezze passano da variabili così
   che anche il pannello mobile, agganciato sotto, segua senza calcoli. */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  --h-corrente: var(--h-header-esteso);
  --h-logo: var(--h-logo-esteso);
  background: var(--bianco);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-veloce), box-shadow var(--t-veloce);
}
.header--attivo {
  --h-corrente: var(--h-header);
  --h-logo: var(--h-logo-compatto);
  border-bottom-color: var(--filo);
  box-shadow: 0 1px 24px rgba(16, 17, 18, 0.05);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--h-corrente);
  transition: height var(--t-medio);
}
.header__logo img {
  width: auto;
  height: var(--h-logo);
  transition: height var(--t-medio);
}

/* Etichetta della sezione corrente. Compare solo nella barra compatta e solo
   dove la navigazione non è a vista: sopra i 900px i link la marcano già. */
.header__sezione {
  display: none;
  margin: 0 0 0 auto;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acciaio);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  translate: 0 5px;
  transition: opacity var(--t-medio), translate var(--t-medio);
}
.header--attivo .header__sezione { opacity: 1; translate: none; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0;
  font-size: var(--t-piccolo);
  color: var(--grafite);
  transition: color var(--t-veloce);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-medio);
}
.nav__link:hover { color: var(--inchiostro); }
.nav__link:hover::after,
.nav__link.is-attivo::after { transform: scaleX(1); }
.nav__link.is-attivo { color: var(--inchiostro); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  background: none;
  border: 0;
  color: var(--inchiostro);
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__icona {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 24px;
}
.nav-toggle__tratto {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-medio);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__tratto:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__tratto:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- 7. HERO ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* L'hero sta in cima, dove l'header è ancora esteso. */
  min-height: min(760px, calc(100vh - var(--h-header-esteso)));
  min-height: min(760px, calc(100svh - var(--h-header-esteso)));
  padding-block: clamp(4rem, 10vw, 7rem);
  background: var(--inchiostro);
  color: var(--bianco);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(16, 17, 18, 0.92) 0%, rgba(16, 17, 18, 0.62) 55%, rgba(16, 17, 18, 0.78) 100%),
    linear-gradient(to top, rgba(16, 17, 18, 0.85) 0%, rgba(16, 17, 18, 0) 45%);
}
.hero__inner { position: relative; z-index: 2; }

/* Segni di registro: il foglio da disegno, non un ornamento generico. */
.hero__registro span {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 2;
}
.hero__registro span:nth-child(1) { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.hero__registro span:nth-child(2) { top: 22px; right: 22px; border-left: 0; border-bottom: 0; }
.hero__registro span:nth-child(3) { bottom: 22px; left: 22px; border-right: 0; border-top: 0; }
.hero__registro span:nth-child(4) { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }

.hero__eyebrow { color: var(--argento); }

.hero__titolo {
  margin: 1.75rem 0 0;
  font-size: var(--t-hero);
  font-weight: 700;
  font-stretch: 118%;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.hero__titolo-riga { display: block; }
.hero__titolo-riga--piccola {
  margin-bottom: 0.4em;
  font-size: 0.26em;
  font-weight: 500;
  font-stretch: 105%;
  letter-spacing: 0.3em;
  color: var(--argento);
}

.hero__claim {
  max-width: 44ch;
  margin-top: 2rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.82);
}

/* Larghezza tarata sul blocco del titolo: la quota lo misura, non lo accompagna. */
.hero__quota {
  max-width: 560px;
  margin-top: 1.75rem;
  color: var(--argento);
}

.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* ---------- 8. IMPOSTAZIONE SEZIONI ---------- */
.sezione { padding-block: var(--sezione-y); }
.servizi { background: var(--carta); }

.sezione__testata { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sezione__titolo {
  margin-top: 1.25rem;
  font-size: var(--t-titolo);
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.sezione__intro {
  max-width: 52ch;
  margin-top: 1.25rem;
  color: var(--acciaio);
}

/* ---------- 9. CARD SERVIZI ---------- */
.servizi__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.card { display: flex; }
.card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bianco);
  border: 1px solid var(--filo);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--ombra-foto);
  transition: border-color var(--t-medio), transform var(--t-medio),
              box-shadow var(--t-medio);
}
.card__link:hover {
  border-color: var(--inchiostro);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16, 17, 18, 0.08);
}

.card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--filo);
  transition: border-color var(--t-medio);
}
.card__link:hover .card__media { border-color: var(--inchiostro); }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--curva);
}
.card__link:hover .card__media img { transform: scale(1.04); }

.card__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.card__sigle {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acciaio);
}
.card__titolo {
  margin-top: 0.9rem;
  font-size: var(--t-card);
  font-stretch: 110%;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.card__testo {
  margin-top: 0.75rem;
  font-size: var(--t-piccolo);
  color: var(--acciaio);
}
.card__azione {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.75rem;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.card__azione::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width var(--t-medio);
}
.card__link:hover .card__azione::after { width: 44px; }

/* ---------- 10. STUDIO / CHI SIAMO ----------
   La biografia sta su una fascia scura — lo stesso fondo del cartiglio — che
   la stacca di netto dalle sezioni chiare intorno. Il colore però non attacca
   di taglio: entra ed esce in dissolvenza, e la rampa si consuma dentro
   l'imbottitura verticale della sezione, così quando comincia il testo il
   fondo è già pieno. Gli estremi valgono il colore delle sezioni confinanti
   — i servizi sopra, la galleria sotto — quindi il raccordo non si vede. */
.studio {
  color: var(--bianco);
  background: linear-gradient(
    to bottom,
    var(--carta) 0,
    var(--inchiostro) calc(var(--sezione-y) * 0.85),
    var(--inchiostro) calc(100% - var(--sezione-y) * 0.85),
    var(--carta) 100%);
}

/* Sul fondo scuro valgono i grigi da fondo scuro, gli stessi dei contatti e
   del cartiglio: i grigi da fondo chiaro qui sparirebbero. */
.studio .eyebrow { color: var(--argento); }
.studio .quota--verticale { color: var(--testo-scuro-secondario); }

/* Due righe e una striscia: ritratto e biografia sopra, il testo sulla rete e
   la foto della firma sotto ma a lati scambiati, la scheda dati a chiudere per
   tutta la larghezza. Lo scambio è quello che tiene insieme la sezione senza
   farla leggere come due colonne parallele lunghe il doppio. */
.studio__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.studio__media {
  position: relative;
  margin: 0;
}
.studio__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--ombra-foto-scuro);
}
.studio__firma { margin: 0; }
.studio__firma img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--ombra-foto-scuro);
}
.studio__testo p + p,
.studio__rete p + p { margin-top: 1rem; }
.studio__testo > p:not(.eyebrow),
.studio__rete p { color: var(--testo-scuro-secondario); }
.studio__testo .sezione__titolo { margin-bottom: 1.5rem; }

/* I nomi in evidenza salgono al bianco: sul grigio del corpo il solo grassetto
   quasi non si distingue. */
.studio__testo strong,
.studio__rete strong {
  color: var(--bianco);
  font-weight: 600;
}

.studio__sottotitolo {
  margin-bottom: 1.25rem;
  font-size: var(--t-card);
  font-stretch: 108%;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* La scheda dati vive solo dentro la fascia scura della biografia, quindi i
   suoi filetti sono quelli da fondo scuro. In colonna stretta resta un elenco,
   che si legge meglio; quando c'è spazio diventa la riga di quote in fondo
   alla tavola, celle divise da filetti verticali.

   La soglia sta a 1000px e non più a 760: con l'aggiunta della cella dell'albo
   le celle sono cinque, e a 760 i valori più lunghi andavano a capo. In una
   riga di quote un valore spezzato in due si legge come due dati. */
.scheda { border-top: 1px solid var(--filo-scuro); }
.scheda__riga {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--filo-scuro);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.scheda dt {
  color: var(--testo-scuro-secondario);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-eyebrow);
  align-self: center;
}
.scheda dd { margin: 0; }

@media (min-width: 1000px) {
  .scheda {
    display: grid;
    /* Il numero di celle non è fisso: quando se ne aggiunge una — l'albo, un
       domani la polizza — la riga si ridistribuisce da sola invece di mandare
       l'ultima a capo da sola. */
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    border-bottom: 1px solid var(--filo-scuro);
  }
  .scheda__riga {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 1.35rem 1.75rem;
    border-bottom: 0;
    border-left: 1px solid var(--filo-scuro);
  }
  .scheda__riga:first-child { border-left: 0; padding-left: 0; }
  .scheda dt { align-self: flex-start; }
}

/* ---------- 11. AMBIENTE (la tavola degli scatti) ----------
   Le foto stanno come stampe posate su una tavola da disegno, non come
   provini in griglia: tre colonne che non partono alla stessa quota e che
   scorrendo si muovono a velocità appena diverse. Ogni colonna porta uno
   scatto orizzontale e uno verticale, così tutte chiudono alla stessa altezza
   e lo sfalsamento resta una scelta, non uno squilibrio. */
.ambiente { background: var(--carta); }

/* Sotto le tre colonne le foto scorrono come un elenco unico impaginato a
   colonne: le proporzioni sono miste e una griglia a righe lascerebbe vuoti
   sotto agli scatti orizzontali, mentre così si impacchettano da sole. */
.ambiente__tavola {
  columns: 1;
  column-gap: clamp(1.5rem, 3vw, 2.25rem);
}
.ambiente__colonna { display: contents; }

/* Nessuna didascalia: le foto mostrano l'ambiente in generale, non zone
   precise, quindi non c'è niente da intitolare. */
.ambiente__scatto {
  break-inside: avoid;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.ambiente__scatto img {
  width: 100%;
  border-radius: var(--r);
  background: var(--nebbia);
  box-shadow: var(--ombra-foto);
}

/* ---------- 12. STRUMENTI (il banco) ----------
   Funziona come la legenda di una tavola: a sinistra le voci, a destra il
   pezzo a cui rimandano. La voce scelta allunga il proprio trattino di
   richiamo — è la linea di richiamo del disegno tecnico, che qui fa da
   indicatore invece di un pallino o di un fondino colorato. */
.strumenti { background: var(--bianco); }

.banco {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
}

/* Sotto il breakpoint le voci diventano una fila che scorre di lato: in
   colonna stretta un elenco verticale mangerebbe tutta la prima schermata. */
.banco__voci {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.banco__voci::-webkit-scrollbar { display: none; }

.banco__voce {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--filo);
  border-radius: var(--r);
  background: transparent;
  color: var(--acciaio);
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-veloce), border-color var(--t-veloce);
}
/* Il trattino di richiamo: corto quando la voce è a riposo, disteso su
   quella scelta, come la linea che porta a un particolare. */
.banco__voce::before {
  content: "";
  flex: none;
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width var(--t-medio), background var(--t-veloce);
}
.banco__voce:hover { color: var(--grafite); border-color: var(--argento); }
.banco__voce[aria-selected="true"] {
  color: var(--inchiostro);
  border-color: var(--inchiostro);
}
.banco__voce[aria-selected="true"]::before { width: 30px; }

.banco__pezzo[hidden] { display: none; }
/* Verticale, come le foto: gli strumenti stanno in piedi nella loro valigia e
   un riquadro orizzontale li taglierebbe sopra e sotto. Su schermo stretto una
   foto alta si mangerebbe tutta la schermata, quindi si limita — ma per via
   della larghezza, non dell'altezza: il limite sta sulla figura e la foto la
   riempie, così il posto è prenotato prima che l'immagine arrivi e la pagina
   non salta. Limitare direttamente l'altezza dell'immagine costava 380px di
   scatto al caricamento. 46vh di larghezza fanno 61vh di altezza. */
.banco__scatto {
  margin: 0;
  /* La larghezza va dichiarata, non lasciata al contenuto: se dipendesse
     dall'immagine, finche' l'immagine non arriva il riquadro varrebbe zero. */
  width: 100%;
  max-width: min(100%, 46vh);
  margin-inline: auto;
}
.banco__scatto img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--nebbia);
  box-shadow: var(--ombra-foto);
}
.banco__nota {
  margin-top: 1.25rem;
  max-width: 56ch;
  color: var(--acciaio);
}

/* Il cambio di pezzo è una dissolvenza corta: fa capire che qualcosa è
   cambiato senza far aspettare. */
.banco__pezzo:not([hidden]) { animation: dissolvi 320ms var(--curva) both; }
.banco__pezzo:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* ---------- 13. CONTATTI / CTA FINALE ---------- */
.contatti {
  position: relative;
  padding-block: var(--sezione-y);
  background: var(--inchiostro);
  color: var(--bianco);
  overflow: hidden;
}
.contatti__media { position: absolute; inset: 0; }
.contatti__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.contatti::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(16, 17, 18, 0.94) 0%, rgba(16, 17, 18, 0.7) 100%);
}
.contatti__inner { position: relative; z-index: 2; }
.contatti .eyebrow { color: var(--argento); }

.contatti__titolo {
  margin-top: 1.25rem;
  font-size: var(--t-titolo);
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.contatti__testo {
  max-width: 46ch;
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.78);
}
.contatti__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.contatti__elenco {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--filo-scuro);
}
.contatti__elenco li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--t-piccolo);
}
.contatti__elenco .eyebrow { color: var(--testo-scuro-secondario); }
.contatti__elenco a { transition: color var(--t-veloce); }
.contatti__elenco a:hover { color: var(--argento); }

/* ---------- 14. FOOTER (cartiglio) ----------
   Il footer è impaginato come il cartiglio di una tavola tecnica:
   celle riquadrate con etichetta e valore. */
.footer {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--inchiostro);
  color: var(--bianco);
  border-top: 1px solid var(--filo-scuro);
}

/* Il gap di 1px sul fondo colorato disegna i filetti della griglia
   senza dover gestire i bordi cella per cella a ogni breakpoint. */
.cartiglio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--filo-scuro);
  border: 1px solid var(--filo-scuro);
  border-radius: var(--r);
  overflow: hidden;
}
.cartiglio__cella {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--inchiostro);
}
/* Il marchio sta da solo nella sua cella: nessuna scritta di accompagnamento,
   il nome dello studio è già dentro al logo. */
.footer__logo { width: auto; height: clamp(56px, 7vw, 76px); }
.cartiglio__etichetta {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--testo-scuro-secondario);
}
.cartiglio__lista {
  margin-top: 1.25rem;
  font-size: var(--t-piccolo);
  color: var(--testo-scuro-secondario);
  line-height: 1.9;
}
.cartiglio__lista a { transition: color var(--t-veloce); }
.cartiglio__lista a:hover { color: var(--bianco); }
.cartiglio__lista--orari li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
}
.cartiglio__lista--orari li span:last-child { text-align: right; color: var(--bianco); }

.social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-scuro-secondario);
  transition: color var(--t-veloce);
}
.social:hover { color: var(--bianco); }

.footer__coda {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-scuro-secondario);
}
.footer__legali { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__legali a { transition: color var(--t-veloce); }
.footer__legali a:hover { color: var(--bianco); }

/* ---------- 15. WHATSAPP FLOTTANTE ---------- */
.whatsapp {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--inchiostro);
  color: var(--bianco);
  box-shadow: 0 10px 30px rgba(16, 17, 18, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.94);
  transition: opacity var(--t-medio), transform var(--t-medio),
              visibility var(--t-medio), background var(--t-veloce);
}
.whatsapp--visibile { opacity: 1; visibility: visible; transform: none; }
.whatsapp:hover { background: var(--grafite); }

/* ---------- 16. PAGINE DI TESTO (legali) ---------- */
.pagina-testo { padding-block: clamp(3.5rem, 7vw, 6rem); }
.pagina-testo__contenuto { max-width: 68ch; }
.pagina-testo__titolo {
  margin-top: 1.25rem;
  font-size: var(--t-titolo);
  font-stretch: 112%;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.pagina-testo h2 {
  margin-top: 2.75rem;
  font-size: 1.25rem;
  font-stretch: 108%;
}
.pagina-testo p { margin-top: 1rem; color: var(--acciaio); }
.pagina-testo ul { margin-top: 1rem; color: var(--acciaio); }
.pagina-testo li { padding-left: 1.25rem; position: relative; }
.pagina-testo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 1px;
  background: var(--argento);
}
.avviso {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--argento);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  color: var(--acciaio);
}
.pagina-testo a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
/* Nelle pagine legali il corpo è grigio: il grassetto deve tornare a piena
   tinta, altrimenti non stacca e la voce dell'elenco perde il suo attacco. */
.pagina-testo strong { color: var(--inchiostro); font-weight: 600; }
.pagina-testo li + li { margin-top: 0.6rem; }
/* La data di aggiornamento è un dato, non una frase: va in mono, come le
   altre misure del sito. */
.pagina-testo__data {
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filo);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

/* ---------- 17. POLIGONALE (tracciato di rilievo) ----------
   Vive nel margine sinistro del foglio, fuori dalla colonna di testo, e non
   intercetta il puntatore: è un segno del disegno, non un elemento da usare.
   Le geometrie le calcola main.js sulle posizioni reali delle sezioni; qui
   c'è solo il modo in cui il tratto si presenta. */

/* Il tracciato si posiziona rispetto al contenuto, non al documento: l'header
   sticky sta in flusso e contraendosi fa salire tutto di 40px. Agganciato qui,
   il tracciato sale insieme al resto e non si sgancia. */
#contenuto { position: relative; }

.poligonale {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
}
/* Quando il margine non basta a contenerla, main.js la spegne. */
.poligonale--spenta { display: none; }

/* Il tracciamento a matita: sottile, tratteggiato, sempre visibile per
   intero. Nel disegno tecnico la costruzione precede l'inchiostrazione. */
.poligonale__matita {
  fill: none;
  stroke: url(#poligonale-matita);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
/* L'inchiostro ricopre la matita ed è più carico, come sul foglio. */
.poligonale__inchiostro {
  fill: none;
  stroke: url(#poligonale-inchiostro);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: miter;
}
/* Ogni stazione si segna quando il tratto la raggiunge. */
.poligonale__stazione {
  opacity: 0;
  transition: opacity 460ms var(--curva);
}
.poligonale__stazione--segnata { opacity: 1; }

/* ---------- 18. RESPONSIVE ---------- */
@media (min-width: 640px) {
  .contatti__elenco { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header__sezione { display: block; }

  .nav {
    position: fixed;
    top: var(--h-corrente);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: var(--bianco);
    border-bottom: 1px solid var(--filo);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--t-medio), transform var(--t-medio), visibility var(--t-medio);
  }
  .nav--aperto { opacity: 1; visibility: visible; transform: none; }

  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--filo);
    font-size: 1.0625rem;
  }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 1.5rem; }
}

/* Spazio in fondo perché il bottone WhatsApp non copra i link legali. */
@media (max-width: 640px) {
  .footer { padding-bottom: 7rem; }
}

@media (max-width: 420px) {
  :root { --h-logo-esteso: 44px; --h-logo-compatto: 30px; }
  .nav-toggle__etichetta { display: none; }
}

@media (min-width: 760px) {
  .servizi__griglia { grid-template-columns: repeat(2, 1fr); }
  .ambiente__tavola { columns: 2; }
}

/* Da qui in su c'è spazio per comporre davvero: le colonne tornano riquadri,
   ognuna con il suo scatto orizzontale e il suo verticale — così chiudono
   tutte alla stessa altezza — e ognuna parte da una quota diversa. È lo
   sfalsamento a tenere viva la tavola, insieme alla parallasse che da qui in
   avanti ha dei riquadri su cui agire. */
@media (min-width: 900px) {
  .banco {
    grid-template-columns: minmax(210px, 3fr) 9fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  /* Tre zone, come una legenda vera: la voce, il pezzo, la didascalia. La
     foto verticale è alta di suo, e la nota accanto ne riempie il fianco
     invece di lasciare una colonna di vuoto. */
  .banco__pezzo {
    display: grid;
    grid-template-columns: minmax(300px, 6fr) 5fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  /* Qui la misura la decide la colonna, non la schermata. */
  .banco__scatto { max-width: none; }
  .banco__nota { margin-top: 0; }
  /* In colonna le voci tornano un elenco incolonnato, senza riquadri: i
     filetti orizzontali bastano a separarle e il trattino fa da indicatore. */
  .banco__voci {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    border-top: 1px solid var(--filo);
    /* Allineato in cima alla foto: le tre zone partono dalla stessa quota,
       come le tre colonne di una legenda. */
    align-self: start;
  }
  .banco__voce {
    width: 100%;
    padding: 1.15rem 0;
    border: 0;
    border-bottom: 1px solid var(--filo);
    border-radius: 0;
  }
  .banco__voce:hover { border-color: var(--filo); }
  .banco__voce[aria-selected="true"] { border-color: var(--filo); }
}

@media (min-width: 1000px) {
  .ambiente__tavola {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: start;
  }
  .ambiente__colonna {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
  }
  .ambiente__scatto { margin-bottom: 0; }
  .ambiente__colonna:nth-child(2) { margin-top: clamp(2.5rem, 6vw, 5rem); }
  .ambiente__colonna:nth-child(3) { margin-top: clamp(1rem, 2.5vw, 2rem); }
}

@media (min-width: 960px) {
  .studio__griglia {
    grid-template-columns: 5fr 7fr;
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: clamp(3rem, 5vw, 5rem);
  }
  /* I blocchi di testo stanno al centro della loro riga: le foto sono più alte
     e, con testi corti, tutto il vuoto si accumulerebbe sotto. Centrati, il
     vuoto si divide sopra e sotto; con testi lunghi la regola non fa nulla,
     perché è il testo a dettare l'altezza della riga. */
  .studio__testo,
  .studio__rete { align-self: center; }
  /* La scheda attraversa entrambe le colonne: è la riga che chiude la tavola. */
  .studio__griglia .scheda { grid-column: 1 / -1; }
}

/* La quota verticale e la poligonale dividono lo stesso margine. Sotto questa
   larghezza la quota finirebbe a pochi pixel dal bordo della vista, addosso al
   tracciato: sopra, le due cose stanno larghe e ognuna dice la sua. */
@media (max-width: 1439px) {
  .quota--verticale { display: none; }
}

@media (min-width: 1024px) {
  .contatti__elenco { grid-template-columns: repeat(4, 1fr); }
  .cartiglio { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .cartiglio { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 19. ANIMAZIONI ---------- */

/* Ingresso orchestrato dell'hero: le righe del titolo salgono,
   poi la linea di quota si "traccia" verso l'esterno dall'etichetta. */
@keyframes sali {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes traccia {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes dissolvi {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__eyebrow,
.hero__titolo-riga,
.hero__claim,
.hero__azioni {
  animation: sali 800ms var(--curva) both;
}
.hero__eyebrow                  { animation-delay: 80ms; }
.hero__titolo-riga--piccola     { animation-delay: 180ms; }
.hero__titolo-riga:nth-child(2) { animation-delay: 260ms; }
.hero__titolo-riga:nth-child(3) { animation-delay: 340ms; }
.hero__claim                    { animation-delay: 700ms; }
.hero__azioni                   { animation-delay: 860ms; }

/* La quota si traccia verso l'esterno partendo dall'etichetta: il gesto
   della misura, non un semplice fade. */
.hero__quota .quota__tratto {
  animation: traccia 900ms var(--curva) 500ms both;
}
.hero__quota .quota__tratto:first-child { transform-origin: right; }
.hero__quota .quota__tratto:last-child  { transform-origin: left; }
.hero__quota .quota__valore {
  animation: dissolvi 500ms var(--curva) 440ms both;
}
.hero__registro span { animation: dissolvi 900ms var(--curva) 1000ms both; }

/* Profondità: piani a distanze diverse su hero e CTA finale.
   Le posizioni le calcola main.js, qui c'è solo il modo in cui si applicano.
   Lo sfondo è ingrandito perché la sua corsa non scopra mai i bordi: senza JS
   resta semplicemente un po' più stretto, senza rotture. */
[data-parallasse-sfondo] {
  --par-scala: 1.22;
  transform:
    perspective(1200px)
    rotateX(var(--par-rx, 0deg))
    rotateY(var(--par-ry, 0deg))
    translate3d(var(--par-x, 0px), var(--par-y, 0px), 0)
    scale(var(--par-scala));
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

/* Il piano di testo usa la proprietà `translate` invece di `transform`:
   così non entra in conflitto con la traslazione del reveal, che sullo
   stesso elemento userebbe la stessa proprietà. */
[data-parallasse-fronte] {
  translate: var(--par-x, 0px) var(--par-y, 0px);
}

/* Reveal allo scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--curva), transform 700ms var(--curva);
  transition-delay: var(--ritardo, 0ms);
}
[data-reveal].is-visibile { opacity: 1; transform: none; }

/* ---------- 20. MOVIMENTO RIDOTTO ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .card__link:hover { transform: none; }
  .card__link:hover .card__media img { transform: none; }

  /* Nessuna profondità: gli sfondi restano fermi e a grandezza naturale. */
  [data-parallasse-sfondo] { transform: none; will-change: auto; }
  [data-parallasse-fronte] { translate: none; }
}