/* servizi-pipeline.css — isola pipeline-ai: input → 5 fasi → output col controllo umano (agente servizi). */

/* ---------------------------------------------------------------- pipeline AI ------------- */
.pl { display: grid; overflow: hidden; }
.pl__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--linea); }
.pl__schede { display: flex; flex-wrap: wrap; gap: 6px; }
.pl__comandi { display: flex; flex-wrap: wrap; gap: 6px; }
.pl__flusso { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 32px); }
.pl__capo { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--nero); box-shadow: inset 0 0 0 1px var(--linea); transition: box-shadow .6s; }
.pl__capo.is-acceso { box-shadow: inset 0 0 0 1px var(--viola-luce), 0 0 40px -10px rgba(121, 64, 224, .7); }
.pl__capo b { font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; line-height: 1.2; }
.pl__campione { font: 500 12px/1.5 var(--font-mono); color: var(--carta-2); overflow-wrap: anywhere; }
.pl__traccia { position: relative; display: grid; gap: 0; }
.pl__linea { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--linea-forte); }
.pl__linea i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--viola), var(--neon)); transform-origin: 50% 0; transform: scaleY(var(--avanz, 0)); transition: transform .9s var(--curva-sipario); }
.pl__fase { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 0; text-align: left; color: var(--carta-3); transition: color .5s; }
.pl__nodo { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--nero-2); box-shadow: inset 0 0 0 1px var(--linea-forte); font: 500 12px/1 var(--font-mono); transition: background-color .5s, box-shadow .5s, color .5s; }
.pl__fase.is-fatta { color: var(--carta-2); }
.pl__fase.is-fatta .pl__nodo { background: var(--viola-ombra); box-shadow: inset 0 0 0 1px var(--viola); color: var(--carta); }
.pl__fase.is-attiva { color: var(--carta); }
.pl__fase.is-attiva .pl__nodo { background: var(--viola); box-shadow: 0 0 0 6px rgba(121, 64, 224, .22), 0 0 30px rgba(121, 64, 224, .8); color: var(--carta); }
.pl__fase.is-umana .pl__nodo { box-shadow: inset 0 0 0 1.5px var(--neon); color: var(--neon); }
.pl__fase.is-umana.is-attiva .pl__nodo { background: var(--neon); color: var(--nero); box-shadow: 0 0 0 6px rgba(206, 105, 227, .2), 0 0 34px rgba(206, 105, 227, .8); }
.pl__fase.is-umana.is-fatta .pl__nodo { background: var(--viola-ombra); color: var(--neon); }
.pl__nome { display: grid; gap: 3px; font-size: clamp(16px, 1.2vw, 18px); font-weight: 500; line-height: 1.15; }
.pl__nome small { font: 500 11px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--neon); }
.pl__persona { width: 14px; height: 14px; }
.pl__dettaglio { display: grid; gap: 12px; padding: clamp(18px, 2.4vw, 32px); border-top: 1px solid var(--linea); min-height: 330px; align-content: start; }
@media (min-width: 900px) { .pl__dettaglio { min-height: 262px; } }
.pl__dettaglio-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.pl__dettaglio h4 { font: var(--peso-display) clamp(22px, 2vw, 32px)/1.05 var(--font-display); letter-spacing: -.03em; text-transform: uppercase; }
.pl__dettaglio p { color: var(--carta-2); max-width: 60ch; }
.pl__esempio { padding: 12px 14px; background: var(--nero); box-shadow: inset 0 0 0 1px var(--linea); font: 500 13px/1.55 var(--font-mono); color: var(--carta); }
.pl__esempio::before { content: "> "; color: var(--viola-luce); }
.pl__umano { display: grid; gap: 14px; padding: 18px; background: linear-gradient(120deg, rgba(206, 105, 227, .14), rgba(121, 64, 224, .06)); box-shadow: inset 0 0 0 1px rgba(206, 105, 227, .55); }
.pl__umano p { color: var(--carta); }
.pl__umano .btn { justify-self: start; animation: pl-pulsa 2s ease-in-out infinite; }
@keyframes pl-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(206, 105, 227, .5); } 50% { box-shadow: 0 0 0 10px rgba(206, 105, 227, 0); } }
.pl__piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding: 14px clamp(16px, 2vw, 26px); border-top: 1px solid var(--linea); }
@media (min-width: 900px) {
  .pl__flusso { grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr) minmax(0, 1fr); align-items: center; gap: 22px; }
  .pl__traccia { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .pl__linea { left: 10%; right: 10%; top: 21px; bottom: auto; width: auto; height: 1px; }
  .pl__linea i { transform-origin: 0 50%; transform: scaleX(var(--avanz, 0)); }
  .pl__fase { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-items: start; gap: 12px; padding: 0; }
  .pl__nome { justify-items: center; font-size: 15px; }
}
.pl--compatto .pl__flusso { grid-template-columns: minmax(0, 1fr); padding: 16px; }
.pl--compatto .pl__traccia { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pl--compatto .pl__linea { left: 10%; right: 10%; top: 21px; bottom: auto; width: auto; height: 1px; }
.pl--compatto .pl__linea i { transform-origin: 0 50%; transform: scaleX(var(--avanz, 0)); }
.pl--compatto .pl__fase { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 0; gap: 8px; }
.pl--compatto .pl__nome { font-size: 12px; justify-items: center; }
.pl--compatto .pl__umano { padding: 12px; }
.pl--compatto .pl__dettaglio { min-height: 104px; padding: 14px 16px; align-content: center; }
@media (max-width: 599px) { .pl--compatto .pl__nome { display: none; } }