/* ==========================================================================================
   caso.css — case study /portfolio/<slug>/ (agente lavori; template partials/caso.php)
   hero · espansione · contesto · pagina vera (desktop/telefono) · simulazione Telegram AUTO WP ·
   tre scelte · risultato e voce · sito+SEO · galleria masonry · FAQ · correlati · prossimo lavoro
   --tinta (R G B) e --tinta-hex arrivano dal colore dominante della cattura (lavori_tinta()).
   ========================================================================================== */

.caso { position: relative; }
/* il bagliore centrale prende il colore del marchio; gli altri due restano viola */
.caso .bagliori i:nth-child(2) {
  background: radial-gradient(closest-side, rgb(var(--tinta) / .34), rgb(var(--tinta) / .1) 58%, rgb(var(--tinta) / 0));
}

/* ---------------------------------------------------------------- hero ------------------ */
.caso-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: clip;
  padding-top: clamp(110px, 15vh, 160px);
  padding-bottom: clamp(48px, 8vh, 96px);
}
.caso-hero__fondo {
  position: absolute;
  inset: -12% -8% 10%;
  z-index: -2;
  background-size: cover;
  background-position: 50% 0;
  filter: blur(56px) saturate(1.3);
  opacity: .26;
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .55) 50%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .55) 50%, transparent 92%);
  pointer-events: none;
}
.caso-hero__dentro { display: grid; gap: clamp(22px, 3.6vh, 40px); min-width: 0; }
.caso-hero__briciole { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--carta-2); }
.caso-hero__briciole span[aria-hidden] { color: var(--carta-3); }
.caso-hero__h1 { display: grid; gap: clamp(16px, 2.6vh, 30px); min-width: 0; }
.caso-hero__nome {
  display: block;
  font-size: clamp(22px, min(13.2vw, 21svh, calc(88vw / (var(--lettere, 10) * .68)), calc(180vw / (var(--totale, 10) * .64))), 200px);
}
.caso-hero__titolo {
  display: block;
  max-width: 34ch;
  font: 500 clamp(24px, 2.8vw, 44px)/1.06 var(--font-sans);
  letter-spacing: -.025em;
}
.caso-hero__piede {
  display: grid;
  gap: 26px;
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--linea);
}
.caso-hero__lead { max-width: 52ch; }
.caso-hero__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 22px var(--gutter); margin: 0; }
.caso-hero__meta div { display: grid; gap: 7px; align-content: start; min-width: 0; }
.caso-hero__meta dd { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.caso-hero__azioni { display: flex; flex-wrap: wrap; gap: 12px; }
/* bozza di presentazione (lavori nuovi su staging o solo in locale): lo si dice subito, senza nasconderlo */
.caso-hero__bozza { max-width: 52ch; margin: 0; font-size: 15px; line-height: 1.45; color: var(--carta-2); }
.caso-hero__bozza-segno {
  display: inline-block; margin-right: 8px; padding: 5px 9px 4px; border: 1px solid rgb(169 139 255 / .45);
  border-radius: 999px; color: var(--viola-luce); vertical-align: 1px;
}
@media (min-width: 640px) { .caso-hero__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .caso-hero__piede { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; }
  .caso-hero__lead { grid-column: 1 / span 5; }
  .caso-hero__bozza { grid-column: 1 / span 5; }
  .caso-hero__meta { grid-column: 7 / span 6; grid-row: 1 / span 2; }
  .caso-hero__azioni { grid-column: 1 / span 6; align-self: end; }
}

/* ---------------------------------------------------------------- espansione ------------ */
.caso-espandi { position: relative; padding: clamp(24px, 5vh, 56px) var(--margine) 0; }
.caso-espandi__palco { position: relative; }
.caso-espandi__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: var(--nero-2);
  box-shadow: 0 0 0 1px var(--linea), 0 40px 140px -60px rgb(var(--tinta) / .8);
}
.caso-espandi__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.caso-espandi__nota { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; }
@media (min-width: 820px) {
  html.mm-anima .caso-espandi { height: 240svh; padding: 0; }
  html.mm-anima .caso-espandi__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  html.mm-anima .caso-espandi__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    clip-path: inset(22% 27% 22% 27% round 14px);
    will-change: clip-path;
  }
  html.mm-anima .caso-espandi__nota {
    position: absolute;
    left: var(--margine);
    right: var(--margine);
    bottom: calc(var(--hud-h) + 20px);
    margin: 0;
    color: var(--carta);
    mix-blend-mode: difference;
  }
}

/* ---------------------------------------------------------------- contesto e soluzione -- */
.caso-intro { display: grid; gap: clamp(32px, 5vh, 56px); padding-block: var(--ritmo); }
.caso-intro__titolo { max-width: 30ch; }
.caso-intro__colonne { display: grid; gap: 40px; }
.caso-intro__blocco { display: grid; gap: 16px; align-content: start; }
.caso-intro__blocco .t-lead { max-width: 42ch; }
.caso-intro__fatti { display: flex; flex-wrap: wrap; gap: 12px 40px; padding-top: 24px; border-top: 1px solid var(--linea); color: var(--carta-2); }
.caso-intro__fatti li { display: flex; gap: 12px; align-items: baseline; max-width: 50ch; }
.caso-intro__segno { flex: none; width: 7px; height: 7px; background: var(--tinta-hex); transform: translateY(-2px); }
@media (min-width: 900px) {
  .caso-intro__colonne { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .caso-intro__blocco:first-child { grid-column: 1 / span 5; }
  .caso-intro__blocco:last-child { grid-column: 7 / span 6; }
}

/* ---------------------------------------------------------------- la pagina vera -------- */
.caso-pagina { position: relative; padding-block: clamp(32px, 6vh, 72px) var(--ritmo); }
.caso-pagina__palco { display: grid; gap: 28px; }
.caso-pagina__testa { display: grid; gap: 16px; }
.caso-pagina__titolo { margin-top: 12px; }
.caso-pagina__nota { max-width: 46ch; font-size: 16px; }
.caso-pagina__schermi { position: relative; display: grid; min-height: 0; padding-inline: var(--margine); }
.caso-pagina__schermo {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  min-height: 0;
  transition: opacity .6s var(--curva-expo), visibility 0s;
}
.caso-pagina__schermo .cornice--browser { width: min(100%, 1180px); }
.caso-pagina__schermo .cornice--telefono { width: min(76vw, 300px); }
/* il dispositivo non scelto esce del tutto (display: none): niente link nascosti raggiungibili;
   l'ingresso di quello scelto lo anima caso.js */
.caso-pagina[data-modo="telefono"] .caso-pagina__schermo--desktop,
.caso-pagina[data-modo="desktop"] .caso-pagina__schermo--telefono,
.caso-pagina[data-modo="auto"] .caso-pagina__schermo--telefono { display: none; }
@media (max-width: 819px) {
  .caso-pagina.ha-telefono[data-modo="auto"] .caso-pagina__schermo--telefono { display: grid; }
  .caso-pagina.ha-telefono[data-modo="auto"] .caso-pagina__schermo--desktop { display: none; }
}
.caso-pagina__comandi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.caso-pagina__px { min-width: 15ch; text-align: center; color: var(--carta-2); font-variant-numeric: tabular-nums; }
.caso-pagina__px b { font-weight: 500; color: var(--carta); }
.caso-pagina__barra { position: relative; width: min(220px, 40vw); height: 2px; overflow: hidden; background: var(--linea-forte); }
.caso-pagina__barra i { position: absolute; inset: 0; background: var(--tinta-hex); transform-origin: 0 50%; transform: scaleX(0); }
.caso-pagina__aiuto { display: none; color: var(--carta-3); transition: color .4s ease; }
.caso-pagina .cornice__schermo { transition: box-shadow .45s var(--curva-expo); }
.caso-pagina .cornice__schermo:focus-visible { outline-offset: -2px; }
@media (min-width: 820px) {
  html.mm-anima .caso-pagina__aiuto { display: block; }
  html.mm-anima .caso-pagina .cornice__schermo { cursor: ns-resize; }
  .caso-pagina.is-dentro .cornice__schermo { box-shadow: inset 0 0 0 1px rgb(var(--tinta) / .55); }
  .caso-pagina.is-dentro .caso-pagina__aiuto { color: var(--carta); }
}
.interruttore { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-forte); }
.interruttore[hidden] { display: none; }
.interruttore__voce {
  padding: 11px 16px 10px;
  border-radius: 999px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--carta-2);
  transition: background-color .45s var(--curva-expo), color .45s var(--curva-expo);
}
.interruttore__voce:hover { color: var(--carta); }
.interruttore__voce[aria-pressed="true"] { background: var(--carta); color: var(--nero); }
@media (min-width: 1024px) {
  .caso-pagina__testa { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .caso-pagina__testa > div { grid-column: 1 / span 6; }
  .caso-pagina__nota { grid-column: 8 / span 5; }
}
@media (min-width: 820px) {
  /* uno schermo, senza aggancio: la pagina del sito scorre solo con il cursore sopra (caso.js) */
  html.mm-anima .caso-pagina { padding: 0; }
  html.mm-anima .caso-pagina__palco {
    position: relative;
    height: 100svh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(12px, 2.2vh, 22px);
    padding: clamp(92px, 12.5vh, 128px) 0 calc(var(--hud-h) + 18px);
  }
  /* la cornice prende l'altezza che resta nel palco e la larghezza dal suo rapporto */
  html.mm-anima .caso-pagina__schermi { height: 100%; grid-template-rows: minmax(0, 1fr); }
  html.mm-anima .caso-pagina__schermo { height: 100%; }
  html.mm-anima .caso-pagina__schermo .cornice--browser {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: auto;
    height: 100%;
    max-width: min(100%, 1180px);
    aspect-ratio: 16 / 10.6;
  }
  html.mm-anima .caso-pagina__schermo .cornice--browser .cornice__schermo { aspect-ratio: auto; height: 100%; }
  html.mm-anima .caso-pagina__schermo .cornice--telefono {
    display: grid;
    width: auto;
    height: 100%;
    max-width: 300px;
    aspect-ratio: 9.6 / 19.5;
  }
  html.mm-anima .caso-pagina__schermo .cornice--telefono .cornice__schermo { aspect-ratio: auto; height: 100%; }
}

/* ---------------------------------------------------------------- simulazione Telegram -- */
.caso-sim { position: relative; padding-block: clamp(48px, 8vh, 96px); }
.caso-sim__palco { display: grid; gap: clamp(20px, 3vh, 30px); }
.caso-sim__testa { display: grid; gap: 14px; }
.caso-sim__titolo { max-width: 26ch; }
.caso-sim__scena { display: grid; gap: 16px; align-items: center; }
.sim-wp, .sim-plugin, .sim-tg { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--linea-forte); }
.sim-wp { background: var(--nero-2); }
.sim-wp__barra, .sim-tg__barra { display: flex; align-items: center; gap: 10px; margin: 0; }
.sim-wp__barra { height: 34px; padding: 0 12px; background: var(--nero-3); font: 500 11px/1 var(--font-mono); letter-spacing: .03em; color: var(--carta-2); }
.sim-punti { display: flex; gap: 5px; }
.sim-punti i { width: 7px; height: 7px; border-radius: 50%; background: rgba(239, 233, 225, .2); }
.sim-wp__corpo { display: grid; gap: 10px; padding: 16px; }
.sim-wp__campo {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(239, 233, 225, .04);
  box-shadow: inset 0 0 0 1px var(--linea);
  font-size: 15px;
  line-height: 1.4;
  color: var(--carta-2);
  transition: box-shadow .5s ease, background-color .5s ease;
}
.sim-wp__campo b { font-size: 17px; font-weight: 600; color: var(--carta); }
.sim-wp__campo--riga { grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
.sim-wp__stato { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 0; }
.sim-wp__valore { padding: 6px 9px; border-radius: 4px; background: rgba(239, 233, 225, .08); font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--carta-2); transition: background-color .4s, color .4s; }
.sim-wp__pubblica { margin: 6px 0 0; }
.sim-wp__pubblica span {
  display: inline-flex;
  padding: 11px 18px;
  border-radius: 6px;
  background: var(--viola);
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--carta);
  transition: transform .3s var(--curva-expo), background-color .3s, color .3s, box-shadow .5s;
}
.sim-plugin { display: grid; gap: 12px; padding: 16px; background: linear-gradient(160deg, rgba(121, 64, 224, .22), rgba(13, 10, 26, .95) 55%); }
.sim-plugin__nome { color: var(--viola-luce); }
.sim-plugin__regola { margin: 0; font-size: 15px; line-height: 1.45; color: var(--carta-2); }
.sim-plugin__regola b { color: var(--carta); font-weight: 600; }
.sim-plugin__modello { display: grid; gap: 6px; padding: 12px; border-radius: 8px; background: rgba(6, 5, 12, .6); box-shadow: inset 0 0 0 1px var(--linea); }
.sim-plugin__modello code { display: block; font: 500 13px/1.5 var(--font-mono); color: var(--carta-2); overflow-wrap: anywhere; }
.sim-token { padding: 1px 4px; border-radius: 3px; background: rgba(169, 139, 255, .14); color: var(--viola-luce); transition: background-color .45s ease, color .45s ease, box-shadow .45s ease; }
.sim-plugin__flusso { position: relative; display: block; height: 2px; background: var(--linea); overflow: hidden; }
.sim-plugin__flusso i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--viola), var(--neon)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--curva-sipario); }
.sim-tg { background: #0e1621; }
.sim-tg__barra { padding: 10px 14px; background: #17212b; font-size: 15px; }
.sim-tg__barra b { display: block; font-weight: 600; }
.sim-tg__sotto { display: block; font: 500 11px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--carta-2); }
.sim-tg__avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--viola); font-weight: 600; }
.sim-tg__chat { display: grid; gap: 10px; align-content: end; min-height: 250px; padding: 16px; }
.sim-tg__vecchio { justify-self: start; display: flex; align-items: flex-end; gap: 12px; max-width: 86%; margin: 0; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: #182533; font-size: 14px; color: var(--carta-2); }
.sim-tg__msg { justify-self: start; display: grid; gap: 6px; max-width: 94%; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: #182533; font-size: 15px; line-height: 1.4; transform-origin: 0 100%; }
.sim-tg__msg p { margin: 0; }
.sim-tg__msg b { font-weight: 600; }
.sim-tg__msg u { color: #79b8f0; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.sim-tg__tag { color: #79b8f0; }
.sim-tg time, .sim-tg__vecchio time { justify-self: end; flex: none; font: 500 11px/1 var(--font-mono); letter-spacing: .03em; color: var(--carta-2); }
ol.caso-sim__passi { display: grid; gap: 10px; padding-inline: var(--margine); }
.caso-sim__passi li { display: flex; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 16px; color: var(--carta-2); transition: color .5s ease, border-color .5s ease; }
.caso-sim__passi li .etichetta { padding-top: 3px; }
.caso-sim__passi li.is-attivo { color: var(--carta); border-color: var(--viola-luce); }
/* i passi: la scena li riceve come classi cumulative is-p1…is-p4 da caso.js */
.is-p1 .sim-wp__valore { background: rgba(84, 200, 140, .16); color: #9fe3c0; }
.is-p1 .sim-wp__pubblica span { transform: scale(.96); background: var(--viola-luce); color: var(--nero); box-shadow: 0 0 0 6px rgba(169, 139, 255, .18); }
.is-p2 .sim-wp__campo { box-shadow: inset 0 0 0 1px rgba(169, 139, 255, .55); background: rgba(121, 64, 224, .08); }
.is-p2 .sim-token { background: rgba(169, 139, 255, .32); color: var(--carta); box-shadow: 0 0 16px rgba(169, 139, 255, .45); }
.is-p2 .sim-plugin__flusso i { transform: scaleX(.5); }
.is-p3 .sim-token { background: transparent; box-shadow: none; color: var(--carta); padding-inline: 0; }
.is-p4 .sim-plugin__flusso i { transform: scaleX(1); }
html.mm-anima .caso-sim .sim-tg__msg { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .5s ease, transform .5s ease; }
html.mm-anima .caso-sim .is-p4 .sim-tg__msg { opacity: 1; transform: none; transition: opacity .7s var(--curva-expo), transform .9s var(--curva-expo); }
@media (min-width: 900px) { .caso-sim__passi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .caso-sim__testa { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .caso-sim__testa > .etichetta { grid-column: 1 / -1; }
  .caso-sim__titolo { grid-column: 1 / span 7; }
  .caso-sim__testa .didascalia { grid-column: 8 / span 5; justify-self: end; text-align: right; }
  .caso-sim__scena { grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, 1fr); gap: 0; }
  .sim-plugin { margin-inline: -1px; z-index: 1; border-radius: 0; }
  .sim-wp { border-radius: 12px 0 0 12px; }
  .sim-tg { border-radius: 0 12px 12px 0; }
  html.mm-anima .caso-sim { height: 320svh; padding: 0; }
  html.mm-anima .caso-sim__palco {
    position: sticky;
    top: 0;
    min-height: 100svh;
    align-content: center;
    padding: clamp(92px, 12vh, 124px) 0 calc(var(--hud-h) + 20px);
  }
}

/* ---------------------------------------------------------------- tre scelte ------------ */
.caso-capitoli { padding-block: var(--ritmo); }
.caso-capitoli__testa { display: grid; gap: 16px; margin-bottom: clamp(36px, 6vh, 72px); }
.caso-capitoli__lista { display: grid; }
.caso-capitolo { display: grid; gap: 18px; padding-block: clamp(28px, 5vh, 56px); border-top: 1px solid var(--linea); }
.caso-capitolo__num { position: relative; display: block; width: max-content; font: var(--peso-display) clamp(76px, 12.5vw, 200px)/.8 var(--font-display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.caso-capitolo__vuoto { display: block; color: transparent; -webkit-text-stroke: 1px var(--linea-forte); }
.caso-capitolo__pieno { position: absolute; left: 0; top: 0; color: var(--tinta-hex); }
html.mm-anima .caso-capitolo__pieno { clip-path: inset(100% 0 0 0); }
.caso-capitolo__testo { display: grid; gap: 16px; align-content: start; }
.caso-capitolo__testo .t-lead { max-width: 44ch; }
@media (min-width: 900px) {
  .caso-capitolo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .caso-capitolo__num { grid-column: 1 / span 4; }
  .caso-capitolo__testo { grid-column: 6 / span 7; padding-top: 10px; }
}

/* ---------------------------------------------------------------- risultato ------------- */
.caso-risultato { position: relative; isolation: isolate; display: grid; gap: clamp(22px, 3.4vh, 40px); padding-block: var(--ritmo); }
.caso-risultato__titolo { max-width: none; }
.caso-dati { display: grid; gap: 22px; margin-top: clamp(12px, 3vh, 32px); }
.caso-dati__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px var(--gutter); margin: 0; }
.caso-dati__voce { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--linea-forte); }
.caso-dati__voce dd { margin: 0; }
.caso-dati .t-dato { font-size: clamp(52px, 6.4vw, 104px); font-variant-numeric: proportional-nums; white-space: nowrap; }
.caso-dati__prova { display: grid; gap: 12px; margin: 10px 0 0; max-width: 1180px; }
.caso-dati__prova img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px var(--linea), 0 40px 120px -50px rgb(var(--tinta) / .7); }
.caso-voce { display: grid; gap: 20px; max-width: 1000px; margin: clamp(20px, 5vh, 56px) 0 0; padding-top: 28px; border-top: 1px solid var(--linea); }
.caso-voce__testo { margin: 0; font: 400 clamp(21px, 2.2vw, 32px)/1.32 var(--font-sans); letter-spacing: -.015em; }
.caso-voce__testo p::before { content: "«"; }
.caso-voce__testo p::after { content: "»"; }
.caso-voce__autore { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 16px; }
.caso-voce__autore b { font-weight: 600; }

/* ---------------------------------------------------------------- sito e SEO ------------ */
.caso-gemello { display: grid; gap: 20px; padding-block: clamp(40px, 8vh, 110px); }
.caso-gemello__titolo { max-width: 30ch; }
.caso-gemello__coppia { display: grid; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px var(--linea-forte); margin-top: 8px; }
.caso-gemello__lato { display: grid; gap: 12px; align-content: start; min-width: 0; padding: clamp(22px, 3vw, 40px); }
.caso-gemello__lato--qui { background: var(--nero-2); }
.caso-gemello__lato--qui .caso-gemello__img { opacity: .5; filter: grayscale(.7); }
.caso-gemello__lato--altro { position: relative; background: linear-gradient(140deg, rgb(var(--tinta) / .16), rgba(6, 5, 12, 0) 60%), var(--nero); transition: background-color .5s ease; }
.caso-gemello__lato--altro:hover { background-color: var(--nero-3); }
.caso-gemello__tipo { display: flex; align-items: center; gap: 14px; font: var(--peso-display) clamp(28px, 3.1vw, 50px)/.95 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; }
.caso-gemello__tipo .freccia { width: .6em; height: .6em; transition: transform .7s var(--curva-expo); }
.caso-gemello__lato--altro:hover .caso-gemello__tipo .freccia { transform: translateX(8px); }
.caso-gemello__frase { max-width: 40ch; font-size: 17px; line-height: 1.45; }
.caso-gemello__img { display: block; margin-top: 8px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--linea); }
.caso-gemello__img img { width: 100%; height: auto; transition: transform 1.2s var(--curva-expo); }
.caso-gemello__lato--altro:hover .caso-gemello__img img { transform: scale(1.03); }
.caso-gemello__dato { font-size: 16px; color: var(--carta-2); }
.caso-gemello__dato b { font: var(--peso-display) 26px/1 var(--font-display); letter-spacing: -.03em; color: var(--carta); }
.caso-gemello__giunto { display: flex; align-items: center; gap: 0; padding-inline: clamp(22px, 3vw, 40px); }
.caso-gemello__giunto i { flex: 1; height: 1px; background: var(--linea-forte); }
.caso-gemello__giunto b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-forte); font: 500 18px/1 var(--font-mono); color: var(--tinta-hex); background: var(--nero); }
@media (min-width: 900px) {
  .caso-gemello__coppia { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .caso-gemello__giunto { flex-direction: column; padding: 0; background: linear-gradient(90deg, var(--nero-2) 50%, var(--nero) 50%); }
  .caso-gemello__giunto i { width: 1px; height: auto; }
}

/* ---------------------------------------------------------------- galleria -------------- */
.caso-galleria { padding-block: var(--ritmo); }
.caso-galleria__testa { display: grid; gap: 14px; margin-bottom: clamp(28px, 5vh, 56px); }
.caso-galleria__muro { columns: 1; column-gap: var(--gutter); }
.caso-galleria__voce { display: grid; gap: 10px; margin: 0 0 clamp(20px, 3vh, 36px); break-inside: avoid; }
.caso-galleria__cornice { display: block; overflow: hidden; border-radius: 10px; background: var(--nero-2); box-shadow: 0 0 0 1px var(--linea); }
.caso-galleria__cornice img { width: 100%; height: auto; transition: transform 1.4s var(--curva-expo); }
.caso-galleria__voce:hover .caso-galleria__cornice img { transform: scale(1.035); }
.caso-galleria__voce figcaption { display: flex; gap: 12px; }
.caso-galleria__voce figcaption span { color: var(--carta-3); }
.caso-galleria__voce--telefono .caso-galleria__cornice {
  display: grid;
  place-items: center;
  padding: clamp(28px, 6%, 56px) 0;
  background: radial-gradient(circle at 50% 110%, rgb(var(--tinta) / .45), transparent 60%), var(--nero-2);
}
.caso-galleria__voce--telefono .caso-galleria__cornice img { width: min(58%, 300px); border-radius: 18px; box-shadow: 0 0 0 6px var(--nero-3), 0 0 0 7px var(--linea-forte); }
@media (min-width: 700px) { .caso-galleria__muro { columns: 2; } }

/* ---------------------------------------------------------------- FAQ ------------------- */
.caso-faq { display: grid; gap: 28px; padding-block: var(--ritmo); }
.caso-faq__testa { display: grid; gap: 14px; align-content: start; }
@media (min-width: 1024px) {
  .caso-faq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .caso-faq__testa { grid-column: 1 / span 4; }
  .caso-faq .faq { grid-column: 6 / span 7; }
}

/* ---------------------------------------------------------------- correlati ------------- */
.caso-correlati { padding-block: clamp(48px, 9vh, 120px) var(--ritmo); border-top: 1px solid var(--linea); }
.caso-correlati__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: clamp(28px, 4vh, 44px); }
.caso-correlati__griglia { display: grid; gap: 48px var(--gutter); }
.caso-correlati .card-lavoro__titolo { text-transform: none; }
.caso-correlati .card-lavoro__testo { font-size: 16px; line-height: 1.45; }
.cornice__pagina--copri { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@media (min-width: 820px) { .caso-correlati__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- prossimo lavoro ------- */
.caso-prossimo { position: relative; isolation: isolate; overflow: clip; border-top: 1px solid var(--linea); }
.caso-prossimo__link { display: grid; gap: clamp(18px, 3vh, 32px); padding-block: clamp(64px, 14vh, 180px) clamp(56px, 10vh, 120px); }
.caso-prossimo__riga { display: flex; justify-content: space-between; gap: 16px; }
.caso-prossimo__nome {
  position: relative;
  display: block;
  font: var(--peso-display) clamp(36px, min(13.2vw, 22svh, calc(94vw / (var(--lettere, 10) * .68)), calc(180vw / (var(--totale, 10) * .64))), 210px)/.85 var(--font-display);
  letter-spacing: -.045em;
  text-transform: uppercase;
}
/* riempimento col colore del marchio che entra da sinistra (copia sovrapposta, il testo vero resta carta) */
.caso-prossimo__nome::after {
  content: attr(data-testo);
  position: absolute;
  inset: 0;
  color: var(--tinta-prossimo, var(--viola-luce));
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--curva-sipario);
  pointer-events: none;
}
.caso-prossimo__link:hover .caso-prossimo__nome::after,
.caso-prossimo__link:focus-visible .caso-prossimo__nome::after { clip-path: inset(0 0 0 0); }
.caso-prossimo__piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; }
.caso-prossimo__frase { max-width: 40ch; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; color: var(--carta-2); }
.caso-prossimo__tipo { display: inline-flex; align-items: center; gap: 10px; }
.caso-prossimo__tipo .freccia { transition: transform .7s var(--curva-expo); }
.caso-prossimo__link:hover .caso-prossimo__tipo .freccia { transform: translateX(8px); }
.caso-prossimo__anteprima {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-cursore);
  width: clamp(260px, 22vw, 360px);
  aspect-ratio: 16 / 10;
  margin: calc(clamp(260px, 22vw, 360px) * -.3125) 0 0 calc(clamp(260px, 22vw, 360px) / -2);
  overflow: hidden;
  border-radius: 10px;
  background: var(--nero-2);
  box-shadow: 0 0 0 1px var(--linea-forte), 0 40px 110px -40px rgba(0, 0, 0, .9);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.caso-prossimo__anteprima.is-attiva { visibility: visible; }
.caso-prossimo__anteprima img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ---------------------------------------------------------------- mini simulazione ------ */
.mini-sim {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9% 7% 14%;
  background: radial-gradient(circle at 70% 35%, rgba(65, 37, 108, .7), transparent 62%), var(--nero-2);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--carta-2);
}
.mini-sim__wp, .mini-sim__tg { display: grid; gap: 6px; padding: 10px; border-radius: 6px; background: rgba(239, 233, 225, .05); box-shadow: inset 0 0 0 1px var(--linea); }
.mini-sim b { font-weight: 500; color: var(--carta); }
.mini-sim i { display: block; height: 5px; border-radius: 3px; background: rgba(239, 233, 225, .2); }
.mini-sim i.corta { width: 58%; }
.mini-sim__pubblica { justify-self: start; padding: 5px 7px; border-radius: 4px; background: var(--viola); color: var(--carta); }
.mini-sim__bolla { display: grid; gap: 5px; padding: 8px; border-radius: 10px 10px 10px 2px; background: #233a56; }
.mini-sim__bolla i { background: rgba(239, 233, 225, .4); }
.mini-sim__freccia { color: var(--viola-luce); }
.mini-sim__freccia .freccia { width: 18px; height: 18px; }
.mini-sim__nota { position: absolute; left: 10px; bottom: 8px; color: var(--carta-3); }
.cornice__schermo--sim { position: relative; }

@media (hover: none), (max-width: 819px) {
  .caso-prossimo__anteprima { display: none; }
}