/* ==========================================================================================
   servizi.css — pagine /servizi/** (agente servizi): indice, 6 servizi, hub AI + 5 schede,
   30 pagine locali. Qui solo le parti comuni; indice, hub AI, schede e pagine locali e ogni oggetto
   dimostrativo hanno il loro file (servizi-indice/-ai/-locale/-isole/-<oggetto>.css), così ogni pagina
   carica solo ciò che usa (budget CSS di BRIEF §4.1).
   ========================================================================================== */

/* ---------------------------------------------------------------- tipografia di sezione --- */
.sv-frase {
  font-family: var(--font-display);
  font-size: clamp(30px, min(4.4vw, 8.4svh), 70px);
  font-weight: var(--peso-display);
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: none;
}
.sv-frase--piccola { font-size: clamp(26px, min(2.9vw, 6svh), 44px); max-width: none; }
.sv-testa { display: grid; gap: 18px; justify-items: start; }
.sv-testa__eyebrow { display: flex; gap: 14px; align-items: baseline; }
.sv-testa__num { color: var(--viola-luce); }
.sv-testa__lead { margin-top: 4px; }

.sv-briciole ol { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sv-briciole li { display: flex; gap: 10px; color: var(--carta-3); }
.sv-briciole li + li::before { content: "/"; color: var(--carta-3); }
.sv-briciole a { color: var(--carta-2); transition: color .3s; }
.sv-briciole a:hover { color: var(--carta); }
.sv-briciole [aria-current] { color: var(--carta); }

/* i bagliori delle sezioni sfumano in alto e in basso: niente bordo netto dove la sezione finisce */
.contenuto .bagliori {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}

/* ---------------------------------------------------------------- hero dei servizi -------- */
.sv-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--testata-h) + clamp(24px, 6vh, 64px));
  padding-bottom: calc(var(--hud-h) + 24px);
  overflow: clip;
}
.sv-hero__testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; margin-bottom: auto; }
.sv-hero__etichette { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.sv-hero__etichette li { color: var(--carta-2); }
.sv-hero__etichette li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 9px; vertical-align: .18em; background: var(--viola-luce); }
.sv-hero__eyebrow { margin-top: clamp(40px, 10vh, 120px); margin-bottom: clamp(14px, 2.4vh, 26px); }
.sv-hero__titolo { --rientro: .9em; max-width: 100%; }
.sv-hero__titolo--lungo { font-size: clamp(42px, min(10.6vw, 17svh), 168px); }
.sv-hero__piede { display: grid; gap: 28px; margin-top: clamp(28px, 5vh, 56px); }
.sv-hero__lead { color: var(--carta-2); max-width: 46ch; }
.sv-hero__azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.sv-hero__indice { display: none; }
.sv-hero__numero {
  position: absolute;
  z-index: -1;
  right: -.04em;
  top: calc(var(--testata-h) + 2vh);
  font: var(--peso-display) min(56vw, 78svh)/.8 var(--font-display);
  letter-spacing: -.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(169, 139, 255, .2);
  pointer-events: none;
  user-select: none;
}
.sv-hero__foto {
  position: absolute;
  z-index: -1;
  right: 4vw;
  bottom: 0;
  width: min(62vw, 520px);
  height: 78svh;
  opacity: .5;
}
.sv-hero__foto .foto { height: 100%; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); }
@media (min-width: 1024px) { .sv-hero, .lc-hero { padding-top: 132px; } }
@media (min-width: 820px) {
  .sv-hero__piede { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .sv-hero__lead { grid-column: 1 / span 6; }
  .sv-hero__azioni { grid-column: 8 / -1; justify-content: flex-end; }
  .sv-hero__indice {
    display: flex; flex-wrap: wrap; gap: 6px 28px; justify-content: flex-end;
    margin-top: clamp(24px, 4vh, 44px); padding-top: 14px; border-top: 1px solid var(--linea);
  }
  .sv-hero__indice a { color: var(--carta-3); transition: color .3s; }
  .sv-hero__indice a:hover { color: var(--carta); }
  .sv-hero__foto { width: min(36vw, 560px); height: 92svh; opacity: 1; right: 6vw; }
}

/* ---------------------------------------------------------------- la prova ---------------- */
.sv-prova { overflow: clip; }
.sv-prova__testa { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(36px, 7vh, 80px); }
.sv-prova__descr { max-width: 60ch; }
.sv-due { display: grid; gap: clamp(72px, 12vh, 140px); }
.sv-due__testa { display: grid; gap: 10px; max-width: 64ch; margin-bottom: 24px; }
.sv-ripiego, .sb-ripiego, .tg-ripiego, .pl-ripiego { display: grid; gap: 14px; padding: clamp(20px, 3vw, 40px); background: var(--nero-2); box-shadow: inset 0 0 0 1px var(--linea); }
.sv-ripiego__palette { display: grid; gap: 8px; }
.sv-ripiego__palette li { display: flex; gap: 12px; align-items: center; font: 500 12px/1.3 var(--font-mono); text-transform: uppercase; color: var(--carta-2); }
.sv-ripiego__palette span { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px var(--linea-forte); }
.pl-ripiego ol { display: grid; gap: 8px; padding-left: 1.2em; color: var(--carta-2); }
.pl-ripiego__umano strong { color: var(--viola-luce); font-weight: 500; }

/* ---------------------------------------------------------------- apertura + comprende ---- */
.sv-apertura__prosa { margin-top: clamp(28px, 4vh, 44px); }
.sv-apertura__prosa a { color: var(--viola-luce); }
.sv-comprende { margin-top: 56px; }
.sv-comprende__titolo { margin-bottom: 14px; }
.sv-comprende__lista { border-bottom: 1px solid var(--linea); }
.sv-comprende__lista li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--linea);
  font-size: clamp(20px, 1.75vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -.015em;
}
.sv-comprende__lista .etichetta { color: var(--viola-luce); min-width: 2.2em; }
@media (min-width: 820px) { .sv-comprende { margin-top: 0; padding-top: 6px; } }

/* ---------------------------------------------------------------- metodo a tappe ---------- */
.sv-tappe { position: relative; isolation: isolate; }
.sv-tappe__palco { position: relative; padding-block: var(--ritmo); overflow: clip; }
.sv-tappe__dentro { position: relative; z-index: 1; }
.sv-tappe__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 32px; }
.sv-tappe__stato { color: var(--carta-3); font-variant-numeric: tabular-nums; }
.sv-tappe__stato b { color: var(--viola-luce); font-weight: 500; }
.sv-tappe__barra { position: relative; height: 1px; margin-top: clamp(32px, 6vh, 64px); background: var(--linea); }
.sv-tappe__barra i { position: absolute; inset: -1px 0; background: linear-gradient(90deg, var(--viola), var(--neon)); transform: scaleX(1); transform-origin: 0 50%; opacity: .45; }
.sv-tappe__passi { display: grid; }
.sv-tappe__passo { position: relative; display: grid; align-content: start; gap: 12px; padding: 26px 0 30px; border-bottom: 1px solid var(--linea); transition: opacity .7s var(--curva-expo), filter .7s var(--curva-expo); }
.sv-tappe__num {
  font: var(--peso-display) clamp(64px, 8vw, 132px)/.86 var(--font-display);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239, 233, 225, .38);
  transition: color .7s var(--curva-expo), -webkit-text-stroke-color .7s;
}
.sv-tappe__titolo { font-size: clamp(21px, 1.75vw, 28px); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; }
.sv-tappe__testo { color: var(--carta-2); max-width: 38ch; }
.sv-tappe__fascio { display: none; }
@media (min-width: 820px) {
  .sv-tappe__passi { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--gutter); }
  .sv-tappe__passo { border-bottom: 0; padding-top: clamp(28px, 5vh, 48px); }
  html.mm-anima:not(.ridotto) .sv-tappe { height: calc(100svh + var(--n) * 55svh); }
  html.mm-anima:not(.ridotto) .sv-tappe__palco {
    position: sticky; top: 0; height: 100svh;
    display: flex; align-items: center;
    padding-block: calc(var(--testata-h) + 8px) calc(var(--hud-h) + 8px);
  }
  html.mm-anima:not(.ridotto) .sv-tappe__dentro { width: 100%; }
  .sv-tappe.is-vivo .sv-tappe__barra i { transform: scaleX(var(--p, 0)); opacity: 1; }
  /* i passi spenti restano leggibili (carta-3, 5,6:1): si accende solo il colore */
  .sv-tappe.is-vivo .sv-tappe__titolo, .sv-tappe.is-vivo .sv-tappe__testo { color: var(--carta-3); transition: color .7s var(--curva-expo); }
  .sv-tappe.is-vivo .is-attivo .sv-tappe__titolo { color: var(--carta); }
  .sv-tappe.is-vivo .is-attivo .sv-tappe__testo { color: var(--carta-2); }
  .sv-tappe.is-vivo .is-attivo .sv-tappe__num { color: var(--carta); -webkit-text-stroke-color: transparent; }
  .sv-tappe.is-vivo .sv-tappe__fascio {
    display: block; position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--margine);
    width: calc((100% - 2 * var(--margine) - (var(--n) - 1) * var(--gutter)) / var(--n));
    transform: translateX(calc(var(--attiva, 0) * (100% + var(--gutter))));
    background: radial-gradient(60% 46% at 50% 62%, rgba(121, 64, 224, .26), rgba(121, 64, 224, 0) 70%),
                linear-gradient(to bottom, rgba(121, 64, 224, 0), rgba(121, 64, 224, .07) 55%, rgba(121, 64, 224, 0));
    transition: transform 1s var(--curva-sipario);
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------- lavori collegati -------- */
.sv-lavori__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 32px; margin-bottom: clamp(40px, 7vh, 80px); }
.sv-lavori__conta { color: var(--carta-3); }
.sv-lavori__griglia { display: grid; gap: clamp(48px, 8vh, 80px) var(--gutter); }
.sv-lavoro, .sv-lavoro .card-lavoro__link { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.sv-lavoro .cornice--browser { box-shadow: 0 0 0 1px var(--linea), 0 40px 120px -60px rgba(105, 49, 170, .8); }
.sv-lavoro__vuoto {
  display: grid; place-content: center; justify-items: center; gap: 16px;
  aspect-ratio: 16 / 10; padding: 24px; border-radius: 12px; text-align: center;
  background: radial-gradient(60% 70% at 50% 100%, rgba(121, 64, 224, .28), rgba(121, 64, 224, 0)), var(--nero-2);
  box-shadow: 0 0 0 1px var(--linea);
}
.sv-lavoro__sigla { font: var(--peso-display) clamp(30px, 4vw, 64px)/.9 var(--font-display); letter-spacing: -.045em; text-transform: uppercase; }
.sv-lavori__elenco { margin-top: clamp(56px, 9vh, 110px); border-bottom: 1px solid var(--linea); }
.sv-lavori__riga {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--linea);
  transition: color .3s ease, padding-left .6s var(--curva-expo);
}
.sv-lavori__riga .etichetta:nth-of-type(2) { display: none; }
.sv-lavori__riga:hover { color: var(--viola-luce); padding-left: 10px; }
.sv-lavori__nome { font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.sv-lavori__tutti { margin-top: clamp(36px, 6vh, 56px); }
@media (min-width: 820px) {
  .sv-lavori__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-lavori__griglia > :nth-child(2n) { margin-top: 14vh; }
  .sv-lavori__griglia--1 { grid-template-columns: minmax(0, 1fr); max-width: 64%; }
  .sv-lavori__riga { grid-template-columns: 4em minmax(0, 1fr) auto auto; }
  .sv-lavori__riga .etichetta:nth-of-type(2) { display: inline; }
}

/* ---------------------------------------------------------------- per settore ------------- */
.sv-settori__nota { margin-top: 24px; font-size: 16px; }
.sv-settori__lista { margin-top: 36px; border-bottom: 1px solid var(--linea); }
.sv-settori__voce {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: clamp(14px, 2.2vh, 22px) 0; border-top: 1px solid var(--linea);
}
.sv-settori__nome { font-size: clamp(21px, 2.3vw, 36px); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; transition: color .3s; }
.sv-settori__luogo { display: none; color: var(--carta-3); }
.sv-settori__freccia { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-forte); transition: background-color .5s var(--curva-expo), box-shadow .5s; }
.sv-settori__voce:hover .sv-settori__nome { color: var(--viola-luce); }
.sv-settori__voce:hover .sv-settori__freccia { background: var(--viola); box-shadow: none; }
@media (min-width: 820px) {
  .sv-settori__lista { margin-top: 0; }
  .sv-settori__voce { grid-template-columns: 3.4em minmax(0, 1fr) auto auto; gap: 20px; }
  .sv-settori__luogo { display: inline; }
}

/* ---------------------------------------------------------------- FAQ e chiusura ---------- */
.sv-faq .faq { margin-top: 32px; }
@media (min-width: 820px) { .sv-faq .faq { margin-top: 0; } .sv-faq .sv-testa { position: sticky; top: calc(var(--testata-h) + 32px); } }
.sv-chiusura { display: grid; gap: 26px; justify-items: start; padding-bottom: calc(var(--ritmo) * .5); }
.sv-chiusura__titolo { max-width: none; font-size: clamp(34px, min(6vw, 11svh), 96px); }

/* ---------------------------------------------------------------- frase con peso (indice e hub) */
.svi-frase { padding-block: var(--ritmo); }
.svi-frase__testo { font: 400 clamp(28px, min(4.6vw, 8svh), 72px)/1.02 var(--font-display); letter-spacing: -.035em; max-width: 34ch; }
.svi-frase__chiusa { margin-top: 28px; }

/* ---------------------------------------------------------------- elenco di link a pillola (locali, schede AI) */
.lc-altri ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; list-style: none; padding: 0; }
.lc-altri a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-forte); font-size: 15px; transition: background-color .4s, color .4s, box-shadow .4s; }
.lc-altri a:hover { background: var(--carta); color: var(--nero); box-shadow: none; }