/* ==========================================================================
   PORTFOLIO
   Due cose stanno qui: la sezione «I nostri clienti» della home e le
   pagine dei lavori (templates/lavoro.php). Il foglio si carica solo su
   quelle pagine: vedi inc/partials/head.php.

   I due caratteri in fondo sono quelli DEL CLIENTE e servono soltanto al
   campione tipografico della pagina del lavoro: il browser li scarica
   quando li incontra, quindi sulla home non pesano.
   ========================================================================== */

@font-face {
  font-family: 'KC Serif';
  src: url('/fonts/portfolio/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'KC Sans';
  src: url('/fonts/portfolio/jost.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ==========================================================================
   LA FINESTRA E IL TELEFONO
   Le due cornici in cui si mostra un sito. Sono disegnate, non
   fotografate: restano nitide a ogni misura e pesano niente.
   ========================================================================== */

.finestra {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #f3ece4;
  box-shadow: 0 30px 70px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.14);
}
.finestra__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: #e8edf1;
}
.finestra__barra i {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #c5cfd8;
}
.finestra__barra b {
  flex: 0 1 230px;
  margin-left: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: #55677a;
  font: 600 0.68rem/1 var(--font);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finestra img { display: block; width: 100%; height: auto; }

.telefonino {
  display: block;
  padding: 6px;
  border-radius: 24px;
  background: #0b1017;
  box-shadow: 0 24px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.18);
}
.telefonino img { display: block; width: 100%; height: auto; border-radius: 18px; }

/* ==========================================================================
   HOME — I NOSTRI CLIENTI
   Resta sul fondo scuro dei servizi, senza onda in mezzo: per questo il
   margine sopra e' corto. Lo spazio prima dell'onda che segue (i settori)
   lo aggiunge gia' la regola generale dei raccordi.
   ========================================================================== */

.clienti { padding-top: 28px; }

.cliente {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
  gap: clamp(28px, 4.4vw, 68px);
  align-items: center;
  padding: clamp(24px, 3.6vw, 52px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(140deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.022) 100%);
  text-align: left;
}
.cliente__logo { display: block; width: auto; height: 70px; margin-bottom: 20px; }
.cliente__riga {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.cliente__cosa { font-size: 1.04rem; line-height: 1.66; }
.cliente__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.cliente__tags li {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #dbe8f2;
}
.cliente__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cliente__fuori svg,
.caso-eroe__azioni .btn svg,
.caso-finale__apri .btn svg { width: 16px; height: 16px; flex: none; }

/* --- La frase del cliente --------------------------------------------- */
.recensione { margin: 0; padding-top: 22px; border-top: 1px solid var(--border); }
.recensione__stelle { display: flex; gap: 4px; margin-bottom: 12px; }
.recensione__stelle svg { width: 20px; height: 20px; fill: #f4c152; }
.recensione__stelle svg.spenta { fill: color-mix(in srgb, var(--text) 22%, transparent); }
.recensione blockquote { margin: 0; }
.recensione blockquote p {
  font-size: 1.03rem;
  line-height: 1.66;
  color: var(--text);
  text-wrap: pretty;
}
.recensione figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 14px;
  font-size: 0.86rem;
}
.recensione figcaption strong { color: var(--text); font-weight: 700; }
.recensione figcaption span { color: var(--text-secondary); }
.recensione figcaption small { flex-basis: 100%; font-size: 0.72rem; color: var(--text-secondary); }

/* Le stelle si accendono in fila quando la frase entra in vista.
   La classe `in-vista` la mette entrate() in showcase.js, e NON e' la
   `.visible` delle comparse: quella, per sicurezza, dopo tre secondi
   viene data a tutta la pagina insieme, e un'entrata legata a lei
   finirebbe di recitare fuori schermo, prima che qualcuno arrivi a
   guardarla. Vale per tutte le entrate di questo foglio. */
.js .recensione .recensione__stelle svg { opacity: 0; transform: scale(0.2) rotate(-40deg); }
.js .recensione.in-vista .recensione__stelle svg {
  animation: stella-entra 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.js .recensione.in-vista .recensione__stelle svg:nth-child(1) { animation-delay: 0.20s; }
.js .recensione.in-vista .recensione__stelle svg:nth-child(2) { animation-delay: 0.29s; }
.js .recensione.in-vista .recensione__stelle svg:nth-child(3) { animation-delay: 0.38s; }
.js .recensione.in-vista .recensione__stelle svg:nth-child(4) { animation-delay: 0.47s; }
.js .recensione.in-vista .recensione__stelle svg:nth-child(5) { animation-delay: 0.56s; }
@keyframes stella-entra {
  from { opacity: 0; transform: scale(0.2) rotate(-40deg); }
  to   { opacity: 1; transform: none; }
}

/* --- La scena: finestra in prospettiva, telefono davanti ---------------
   --sx e --sy (da -1 a 1) li scrive scene() in showcase.js seguendo il
   puntatore; a riposo valgono zero e resta l'inclinazione di base. */
.cliente__scena {
  position: relative;
  display: block;
  padding: 0 7% 9% 0;
  perspective: 1400px;
}
.cliente__scena .finestra {
  transform: rotateY(calc(-7deg + var(--sx, 0) * 5deg)) rotateX(calc(3deg + var(--sy, 0) * -4deg));
  transform-origin: 60% 50%;
  transition: transform 0.6s var(--ease), opacity 0.7s var(--ease);
  will-change: transform;
}
.cliente__scena .telefonino {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26%;
  min-width: 108px;
  transform: translate3d(calc(var(--sx, 0) * -12px), calc(var(--sy, 0) * -9px), 0);
  transition: transform 0.6s var(--ease), opacity 0.7s var(--ease);
  will-change: transform;
}
/* L'ingresso: la finestra arriva di taglio e si raddrizza, il telefono
   sale un attimo dopo. Finche' la scheda non e' in vista stanno fuori. */
.js .cliente:not(.in-vista) .cliente__scena .finestra {
  opacity: 0;
  transform: translateX(46px) rotateY(-20deg) rotateX(6deg);
}
.js .cliente:not(.in-vista) .cliente__scena .telefonino {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.92);
}
.cliente.in-vista .cliente__scena .finestra { transition-delay: 0.12s; }
.cliente.in-vista .cliente__scena .telefonino { transition-delay: 0.34s; }
/* dopo l'ingresso il ritardo non serve piu': rallenterebbe l'inseguimento */
.cliente__scena.segue .finestra,
.cliente__scena.segue .telefonino { transition-delay: 0s; transition-duration: 0.25s; }

@media (max-width: 900px) {
  .cliente { grid-template-columns: minmax(0, 1fr); }
  .cliente__scena { order: -1; padding: 0 5% 8% 0; perspective: none; }
  .cliente__scena .finestra { transform: none; }
  .cliente__scena .telefonino { width: 28%; transform: none; }
  .js .cliente:not(.in-vista) .cliente__scena .finestra { transform: translateY(24px); }
}
@media (max-width: 480px) {
  .cliente { padding: 18px 18px 24px; border-radius: 18px; }
  .cliente__logo { height: 58px; }
  .cliente__azioni .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   PAGINA DI UN LAVORO
   ========================================================================== */

/* --- Apertura: testo a sinistra, la finestra a destra ------------------ */
.caso-eroe {
  position: relative;
  padding: clamp(28px, 4vw, 52px) 0 clamp(56px, 7vw, 96px);
  background-color: var(--navy-900);
  background-image:
    radial-gradient(70% 90% at 82% 30%, rgba(29,85,128,0.42) 0%, transparent 62%),
    linear-gradient(180deg, rgba(6,22,38,0.92) 0%, rgba(6,22,38,0.82) 100%),
    image-set(url('/img/hero/valle-1600.webp') type('image/webp'),
              url('/img/hero/valle-1400.jpg') type('image/jpeg'));
  background-size: cover, cover, cover;
  background-position: center, center, center 58%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.caso-eroe__griglia {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(28px, 4.4vw, 68px);
  align-items: center;
}
.caso-eroe h1 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.3vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.caso-eroe__azioni { margin: 28px 0 0; }
.caso-eroe__scena { perspective: 1400px; }
.caso-eroe__scena .finestra {
  transform: rotateY(-5deg) rotateX(2deg);
  transform-origin: 60% 50%;
}
.js .caso-eroe__scena .finestra { animation: finestra-posa 1s var(--ease) 0.1s backwards; }
@keyframes finestra-posa {
  from { opacity: 0; transform: translateY(28px) rotateY(-16deg) rotateX(6deg); }
}
@media (max-width: 960px) {
  .caso-eroe__griglia { grid-template-columns: minmax(0, 1fr); }
  .caso-eroe__scena { perspective: none; }
  .caso-eroe__scena .finestra { transform: none; }
}

/* --- La scheda: sei voci invece delle quattro dei paesi ---------------- */
.caso-scheda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.caso-scheda > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.caso-scheda dd a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.caso-scheda dd a:hover { color: var(--primary-dark); }
@media (max-width: 860px) {
  .caso-scheda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caso-scheda > div:nth-child(3n + 1) { padding-left: 20px; border-left: var(--filetto); }
  .caso-scheda > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
  .caso-scheda { grid-template-columns: minmax(0, 1fr); }
  .caso-scheda > div:nth-child(n) { padding-left: 0; border-left: 0; }
}

/* --- Le quattro direzioni ---------------------------------------------- */
.direzioni {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.direzione { position: relative; }
.direzione__schizzo {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.direzione__schizzo svg { display: block; width: 100%; height: auto; }
.direzione:hover .direzione__schizzo { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.direzione h3 { font-size: 1.02rem; letter-spacing: -0.01em; margin: 0 0 8px; }
.direzione p { font-size: 0.9rem; line-height: 1.62; margin: 0; }
.direzione.is-scelta .direzione__schizzo { outline: 3px solid var(--accent); outline-offset: 3px; }
.direzione__scelta {
  position: absolute;
  top: 10px; left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.direzioni__esito {
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  max-width: 62ch;
  font-size: 1.04rem;
  color: var(--text);
}
@media (max-width: 900px) { .direzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .direzioni { grid-template-columns: minmax(0, 1fr); } }

/* --- La carta del cliente: lino, navy, il rosso delle due barrette -----
   Qui dentro i token del sito si ribaltano su quelli del progetto, cosi'
   numeri, filetti e testi prendono da soli i colori giusti. */
.caso-lino {
  position: relative;
  z-index: 1;
  background: #f3ece4;
  --text: #1c2733;
  --text-secondary: #4f463f;
  --primary: #1c2733;
  --accent: #b8352a;
  --border: #c9bdb1;
  --filetto: 1px solid #c9bdb1;
  color: var(--text);
}
.caso-lino h2, .caso-lino h3 { color: var(--text); }
.caso-lino__secondo { margin-top: clamp(64px, 8vw, 110px); }

.campioni {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.campione {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.campione__colore {
  display: block;
  aspect-ratio: 1 / 1.18;
  margin-bottom: 10px;
  border: 1px solid #c9bdb1;
  transition: transform 0.4s var(--ease), clip-path 0.9s var(--ease);
}
.campione:hover .campione__colore { transform: translateY(-6px); }
.campione strong { font-size: 0.9rem; font-weight: 700; color: #1c2733; }
.campione code { font: 500 0.74rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #645850; }
.campione__uso { font-size: 0.78rem; line-height: 1.42; color: #4f463f; }
.campione__contrasto {
  position: absolute;
  top: 8px; right: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(243,236,228,0.94);
  color: #1c2733;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}
/* il colore si versa dal basso, un campione dopo l'altro */
.js .campione:not(.in-vista) .campione__colore { clip-path: inset(100% 0 0 0); }
.campione.in-vista .campione__colore { clip-path: inset(0 0 0 0); }
.campione:nth-child(2) .campione__colore { transition-delay: 0s, 0.07s; }
.campione:nth-child(3) .campione__colore { transition-delay: 0s, 0.14s; }
.campione:nth-child(4) .campione__colore { transition-delay: 0s, 0.21s; }
.campione:nth-child(5) .campione__colore { transition-delay: 0s, 0.28s; }
.campione:nth-child(6) .campione__colore { transition-delay: 0s, 0.35s; }
.campione:nth-child(7) .campione__colore { transition-delay: 0s, 0.42s; }
@media (max-width: 1000px) { .campioni { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .campioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dosi { margin-top: clamp(40px, 5vw, 60px); max-width: 860px; }
.dosi h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.dosi__barra { display: flex; height: 52px; border: 1px solid #c9bdb1; }
.dosi__barra span { transform-origin: left; min-width: 6px; }
.js .dosi:not(.in-vista) .dosi__barra span { transform: scaleX(0); }
.dosi.in-vista .dosi__barra span {
  transform: scaleX(1);
  transition: transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.14s + 0.15s);
}
.dosi p { margin: 14px 0 0; font-size: 0.94rem; color: var(--text-secondary); }

/* --- Il campione tipografico ------------------------------------------- */
.specimen {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  margin-top: clamp(36px, 5vw, 56px);
  border: 1px solid #c9bdb1;
}
.specimen__tavola {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4.4vw, 60px);
  border-right: 1px solid #c9bdb1;
}
.specimen__occhiello {
  font: 500 0.75rem/1 'KC Sans', var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #645850;
  margin: 0 0 22px;
}
.specimen__occhiello b { color: #b8352a; font-weight: 500; }
.specimen__titolo {
  font: 300 clamp(2.6rem, 6vw, 5.2rem)/0.98 'KC Serif', Georgia, serif;
  letter-spacing: -0.01em;
  color: #1c2733;
  margin: 0 0 22px;
  text-wrap: balance;
}
.specimen__testo {
  font: 400 1.06rem/1.6 'KC Sans', var(--font);
  color: #2b2b2b;
  margin: 0;
  max-width: 40ch;
}
.famiglia {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 20px;
  align-items: baseline;
  padding: clamp(22px, 3vw, 34px);
}
.famiglia + .famiglia { border-top: 1px solid #c9bdb1; }
.famiglia__aa { grid-row: span 2; font-size: clamp(3rem, 5vw, 4.4rem); line-height: 1; color: #1c2733; }
.famiglia strong { font-size: 1.02rem; color: #1c2733; align-self: end; }
.famiglia > span:not(.famiglia__aa):not(.famiglia__segni) { font-size: 0.82rem; color: #645850; }
.famiglia__segni {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #2b2b2b;
  overflow-wrap: anywhere;
}
.famiglia--serif .famiglia__aa,
.famiglia--serif .famiglia__segni { font-family: 'KC Serif', Georgia, serif; font-weight: 400; }
.famiglia--serif .famiglia__aa { font-weight: 300; }
.famiglia--sans .famiglia__aa,
.famiglia--sans .famiglia__segni { font-family: 'KC Sans', var(--font); font-weight: 400; }
@media (max-width: 820px) {
  .specimen { grid-template-columns: minmax(0, 1fr); }
  .specimen__tavola { border-right: 0; border-bottom: 1px solid #c9bdb1; }
}

/* --- Il sito finale: la pagina intera dentro le sue cornici ------------ */
.vetrina {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(160px, 21%, 240px);
  gap: clamp(18px, 3vw, 44px);
  align-items: end;
  margin-top: clamp(36px, 5vw, 60px);
}
.vetrina__vista { position: relative; overflow: hidden; background: #f3ece4; }
.vetrina__vista:focus { outline: none; }
.vetrina__desktop .vetrina__vista { aspect-ratio: 16 / 10; }
.vetrina__telefono .vetrina__vista { aspect-ratio: 390 / 800; border-radius: 18px; }
.vetrina__vista img { display: block; width: 100%; height: auto; border-radius: 0; will-change: transform; }
.vetrina__nota {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.72);
}
/* La corsa: da schermo grande il contenitore e' alto piu' di due
   schermate e la vetrina gli resta appesa in cima. Lo spazio in piu' e'
   la strada che si fa scorrendo mentre la pagina del cliente passa
   dentro le cornici. La classe la mette vetrina() solo dove serve. */
.vetrina-corsa.is-corsa { height: 230vh; }
.vetrina-corsa.is-corsa .vetrina { position: sticky; top: clamp(84px, 11vh, 116px); }

/* Senza copione, o con meno movimento: la cornice si scorre a mano. */
html:not(.js) .vetrina__vista,
.vetrina-corsa.is-manuale .vetrina__vista { overflow-y: auto; }
html:not(.js) .vetrina__nota,
.vetrina-corsa.is-manuale .vetrina__nota { display: block; }
@media (max-width: 700px) {
  .vetrina { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .vetrina__desktop { width: 100%; }
  .vetrina__telefono { width: min(58%, 240px); }
}
.caso-finale__apri { margin: clamp(26px, 4vw, 40px) 0 0; }

/* --- I tempi: cinque date su un filo ----------------------------------- */
.tempi { margin-top: clamp(52px, 7vw, 88px); }
.tempi h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 26px;
}
.tempi__lista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.tempi__lista::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 5px;
  height: 1px;
  background: rgba(255,255,255,0.3);
  transform-origin: left;
}
.tempi__lista li { position: relative; padding: 28px 18px 0 0; }
.tempi__lista li::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(134,181,93,0.22);
}
.tempi__lista time { display: block; font-weight: 700; font-size: 0.98rem; color: #fff; }
.tempi__lista time span { font-weight: 500; font-size: 0.78rem; color: rgba(255,255,255,0.6); }
.tempi__lista p { margin: 6px 0 0; font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.84); }
.js .tempi:not(.in-vista) .tempi__lista::before { transform: scaleX(0); }
.js .tempi:not(.in-vista) .tempi__lista li::before { transform: scale(0); }
.tempi.in-vista .tempi__lista::before { transform: scaleX(1); transition: transform 1.2s var(--ease) 0.1s; }
.tempi.in-vista .tempi__lista li::before {
  transform: scale(1);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i, 0) * 0.2s + 0.2s);
}
@media (max-width: 820px) {
  .tempi__lista { grid-template-columns: minmax(0, 1fr); }
  /* In colonna il filo unico scendeva oltre l'ultima data, per quanto e'
     alto il suo testo: qui ogni data porta il tratto fino alla successiva,
     e l'ultima non ne ha. */
  .tempi__lista::before { display: none; }
  .tempi__lista li { padding: 0 0 22px 30px; }
  .tempi__lista li::before { top: 5px; }
  .tempi__lista li:last-child { padding-bottom: 0; }
  .tempi__lista li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: -5px;
    width: 1px;
    background: rgba(255,255,255,0.3);
  }
}

/* --- Il rimando ai servizi e la parola al cliente ---------------------- */
.caso-rimando { margin-top: 22px !important; }
.caso-rimando a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}
.caso-rimando svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.caso-rimando a:hover svg { transform: translateX(4px); }

.caso-voce .recensione {
  max-width: 760px;
  margin: clamp(52px, 7vw, 88px) auto 0;
  padding-top: clamp(30px, 4vw, 44px);
  border-top: var(--filetto);
  text-align: center;
}
.caso-voce .recensione__stelle { justify-content: center; margin-bottom: 18px; }
.caso-voce .recensione__stelle svg { width: 26px; height: 26px; }
.caso-voce .recensione blockquote p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.3vw, 1.62rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.caso-voce .recensione figcaption { justify-content: center; margin-top: 20px; font-size: 0.94rem; }

/* ==========================================================================
   MENO MOVIMENTO
   Tutto fermo e tutto visibile: le scene si mostrano gia' a posto.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .recensione .recensione__stelle svg,
  .js .cliente:not(.in-vista) .cliente__scena .finestra,
  .js .cliente:not(.in-vista) .cliente__scena .telefonino,
  .js .campione:not(.in-vista) .campione__colore,
  .js .dosi:not(.in-vista) .dosi__barra span,
  .js .tempi:not(.in-vista) .tempi__lista::before,
  .js .tempi:not(.in-vista) .tempi__lista li::before {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  .cliente__scena .finestra,
  .cliente__scena .telefonino,
  .caso-eroe__scena .finestra,
  .campione__colore,
  .direzione__schizzo { transition: none !important; animation: none !important; }
}