/* servizi-ai.css — hub /servizi/progetti-automazioni-ai/ e 5 schede (agente servizi). */

/* ---------------------------------------------------------------- hub AI ------------------ */
.ai-hero__titolo { font-size: clamp(38px, min(6.6vw, 10.6svh), 112px); max-width: none; }
.ai-principio .svi-frase__testo { font-size: clamp(24px, min(3.2vw, 6svh), 48px); line-height: 1.08; max-width: 30ch; }
.ai-sistema { --n: 6; }
.ai-sistema .sv-tappe__palco { align-items: center; }
.ai-sistema__griglia { display: grid; gap: 40px; }
.ai-sistema__lato { display: grid; gap: clamp(20px, 4vh, 40px); justify-items: start; }
.ai-sistema__lato .sv-testa__lead { font-size: clamp(16px, 1.2vw, 18px); max-width: 46ch; }
.ai-rete { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
.ai-rete svg { width: 100%; height: 100%; overflow: visible; }
.ai-rete__linea { stroke: rgba(169, 139, 255, .28); stroke-width: 1; fill: none; transition: stroke .6s; }
.ai-rete__linea.is-attiva { stroke: var(--viola-luce); }
.ai-rete__anello { fill: none; stroke: var(--linea-forte); stroke-dasharray: 2 6; }
.ai-rete__nodo circle { fill: var(--nero-2); stroke: var(--linea-forte); transition: fill .6s, stroke .6s; }
.ai-rete__nodo.is-attivo circle { fill: var(--viola); stroke: var(--viola-luce); }
.ai-rete__nodo text, .ai-rete__centro text { font: 500 15px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; fill: var(--carta-2); }
.ai-rete__nodo.is-attivo text { fill: var(--carta); }
.ai-rete__centro circle { fill: var(--viola-ombra); stroke: var(--viola-luce); }
.ai-rete__centro text { fill: var(--carta); }
.ai-punti { display: grid; column-gap: calc(var(--gutter) * 2); }
.ai-punto { display: grid; align-content: start; gap: 8px; padding: 16px 0; border-top: 1px solid var(--linea); }
.ai-punto h3 { font-size: clamp(18px, 1.4vw, 22px); font-weight: 500; line-height: 1.2; transition: color .6s var(--curva-expo); }
.ai-punto h3 span { color: var(--viola-luce); text-transform: uppercase; font: 500 12px/1 var(--font-mono); letter-spacing: .04em; display: block; margin-bottom: 8px; }
.ai-punto p { color: var(--carta-2); font-size: 15px; line-height: 1.5; transition: color .6s var(--curva-expo); }
@media (min-width: 820px) {
  .ai-sistema__griglia { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(var(--gutter) * 3); align-items: center; }
  .ai-rete { width: min(100%, 360px, 36svh); justify-self: start; }
  .ai-punti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.mm-anima:not(.ridotto) .ai-sistema { height: calc(100svh + 6 * 45svh); }
  /* niente cambi di altezza durante lo scroll: si accende solo il colore (leggibile anche spento) */
  .ai-sistema.is-vivo .ai-punto h3 { color: var(--carta-3); }
  .ai-sistema.is-vivo .ai-punto p { color: var(--carta-3); }
  .ai-sistema.is-vivo .ai-punto.is-attivo h3 { color: var(--carta); }
  .ai-sistema.is-vivo .ai-punto.is-attivo p { color: var(--carta-2); }
  .ai-sistema.is-vivo .ai-punto.is-attivo { border-top-color: var(--viola-luce); }
}
@media (min-width: 820px) and (max-width: 1099px) {
  .ai-rete { display: none; }
  .ai-sistema__griglia { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.ai-chiusa { margin-top: 28px; max-width: 70ch; }

.ai-soluzioni__lista { margin-top: clamp(32px, 6vh, 64px); border-bottom: 1px solid var(--linea); counter-reset: sol; }
.ai-sol {
  display: grid; gap: 10px 24px; padding: clamp(20px, 3vh, 32px) 0; border-top: 1px solid var(--linea);
  grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: start;
}
.ai-sol__num { color: var(--viola-luce); padding-top: .4em; }
.ai-sol__nome { font: var(--peso-display) clamp(24px, 2.8vw, 44px)/1 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; transition: color .3s; }
.ai-sol__descr { color: var(--carta-2); max-width: 56ch; margin-top: 10px; }
.ai-sol__flusso { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; color: var(--carta-3); }
.ai-sol__flusso b { color: var(--carta-2); font-weight: 500; }
.ai-sol__flusso .ai-sol__umano { color: var(--viola-luce); }
.ai-sol:hover .ai-sol__nome { color: var(--viola-luce); }
.ai-sol .sv-settori__freccia { margin-top: .2em; }
.ai-sol:hover .sv-settori__freccia { background: var(--viola); box-shadow: none; }
@media (min-width: 820px) { .ai-sol { grid-template-columns: 4em minmax(0, 1fr) minmax(0, 18em) auto; } .ai-sol__lato { padding-top: .5em; } }
.ai-sol__lato { color: var(--carta-3); }
@media (max-width: 819px) { .ai-sol__lato { grid-column: 2 / -1; } }

.ai-prova__griglia { display: grid; gap: 36px; margin-top: clamp(28px, 5vh, 56px); }
.ai-prova__nota { display: grid; gap: 14px; align-content: start; }
.ai-prova__nota ul { display: grid; gap: 10px; }
.ai-prova__nota li { display: flex; gap: 12px; color: var(--carta-2); }
.ai-prova__nota li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; background: var(--viola-luce); }
@media (min-width: 900px) { .ai-prova__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(var(--gutter) * 3); } }
.chat-ripiego { display: grid; gap: 16px; padding: clamp(20px, 3vw, 36px); background: var(--nero-2); box-shadow: inset 0 0 0 1px var(--linea); border-radius: 14px; }
.chat-ripiego__bolla { justify-self: start; max-width: 46ch; padding: 14px 18px; border-radius: 14px 14px 14px 4px; background: var(--nero-3); color: var(--carta); }
.chat-ripiego__domande { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-ripiego__domande li { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-forte); font-size: 14px; color: var(--carta-2); }

/* ---------------------------------------------------------------- scheda AI --------------- */
.as-hero__titolo { font-size: clamp(30px, min(6vw, 10.5svh), 104px); max-width: none; }
.as-panoramica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: clamp(32px, 5vh, 56px); border-top: 1px solid var(--linea); }
.as-panoramica > div { display: grid; gap: 8px; align-content: start; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--linea); }
.as-panoramica dd { margin: 0; font-size: clamp(16px, 1.3vw, 20px); font-weight: 500; line-height: 1.25; }
.as-panoramica dt { color: var(--carta-3); }
.as-panoramica .as-umano dd { color: var(--viola-luce); }
@media (min-width: 820px) { .as-panoramica { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.as-problema__testo { display: grid; gap: 1em; margin-top: 28px; color: var(--carta-2); max-width: 62ch; font-size: clamp(17px, 1.3vw, 20px); }
.as-moduli { display: grid; gap: 22px; margin-top: 8px; }
.as-moduli-col { margin-top: 56px; align-content: start; }
.as-modulo + .as-modulo::before { content: ""; position: absolute; left: 32px; top: -23px; width: 1px; height: 22px; background: linear-gradient(180deg, var(--viola-luce), var(--linea-forte)); }
.as-modulo { position: relative; display: grid; gap: 10px; padding: 22px; background: var(--nero-2); box-shadow: inset 0 0 0 1px var(--linea); }
.as-modulo h3 { font: 500 clamp(19px, 1.6vw, 24px)/1.1 var(--font-mono); letter-spacing: -.02em; }
.as-modulo p { color: var(--carta-2); font-size: 16px; }
@media (min-width: 820px) { .as-moduli-col { margin-top: 0; } }
.as-altre { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; }
.sv-chat { min-height: 650px; }
@media (min-width: 820px) { .sv-chat { min-height: 667px; } }