/* Visual animati del processo: Marketing Strategy (templates/components/ms-svg.php) e Content Strategy (cs-svg.php).
   Si appoggia a processo-vis.css (classi base .lv-vis, .lv-rep, .lv-brief, .lv-chk, .lv-st, .lv-tk, .lv-bars, .lv-ch):
   file separato perché processo-vis.css è condiviso con SEO e Performance Marketing.
   Griglia 480×270 (1em = 10px a 480). Stato base = stato FINALE, per prefers-reduced-motion. */

.lv-pn { position: absolute; top: 1.6em; bottom: 1.6em; padding: 1em 1.1em; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1em; background: #101010; display: flex; flex-direction: column; gap: .6em; }
.lv-set-solution .lv-vis .lv-us__l { position: absolute; inset: 0; width: 100%; height: 100%; }
.lv-pkt--e { fill: var(--e); }
.lv-seg { display: inline-flex; align-self: flex-start; justify-self: start; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99em; overflow: hidden; }
.lv-seg b { padding: .3em .9em; font-size: .78em; color: rgba(255, 255, 255, .6); }
.lv-seg .lv-seg__on { background: #fff; color: #000; animation: lv-segon var(--t) ease calc(var(--d) * 1s) infinite both; }
@keyframes lv-segon { 0%, 6% { background: transparent; color: rgba(255, 255, 255, .6); } 10%, 100% { background: #fff; color: #000; } }
.lv-us__z { border-color: rgba(249, 46, 7, .5); color: var(--e); }
.lv-msi .lv-msi__r, .lv-an__r, .lv-cb__l .lv-brief__r, .lv-us2 .lv-tk__r { flex: 1; max-height: 4.2em; }

/* ── MS1 · Riunione input ── */
.lv-msi { gap: .5em; }
.lv-msi__r { display: grid; grid-template-columns: 6.4em 1fr; align-items: center; gap: .8em; min-height: 2.9em; padding: .45em .8em; border: 1px solid rgba(255, 255, 255, .07); border-radius: .6em; background: rgba(255, 255, 255, .025); }
.lv-msi__r .lv-vis__m { font-size: .72em; }
.lv-msi__c { display: flex; flex-wrap: wrap; gap: .4em .6em; }
.lv-msi__c .lv-vc { font-size: .78em; padding: .2em .75em; }
.lv-set-solution .lv-vis .lv-msi__on { border-color: var(--e); color: #fff; background: rgba(249, 46, 7, .14); animation: lv-sel var(--t) ease calc(var(--d) * 1s) infinite both; }
@keyframes lv-sel { 0%, 6% { border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); background: transparent; } 10%, 88% { border-color: var(--e); color: #fff; background: rgba(249, 46, 7, .14); } }
.lv-msi__m { display: inline-flex; align-items: center; gap: .4em; font-size: .82em; color: rgba(255, 255, 255, .8); }
.lv-msi__m .lv-tk__cb { width: 1.25em; height: 1.25em; }
.lv-msi__r .lv-brief__l { grid-row: auto; grid-column: auto; }

/* ── MS2 · Analisi dentro e fuori, etichette di evidenza ── */
.lv-an__top { position: absolute; left: 1.6em; right: 1.6em; top: 1.3em; display: flex; justify-content: space-between; align-items: center; }
.lv-an__c { position: absolute; top: 4.4em; bottom: 1.6em; width: 20.2em; padding: .9em 1em; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1em; background: #101010; display: flex; flex-direction: column; gap: .5em; }
.lv-an__c--a { left: 1.6em; } .lv-an__c--b { right: 1.6em; }
.lv-an__fl { position: absolute; left: 21.8em; width: 4.4em; top: 14em; }
.lv-an__r { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .55em .7em; border: 1px solid rgba(255, 255, 255, .07); border-radius: .6em; background: rgba(255, 255, 255, .025); }
.lv-an__t { font-size: .92em; color: rgba(255, 255, 255, .88); white-space: nowrap; }
.lv-ev { flex: none; padding: .25em .6em; border: 1px solid rgba(255, 255, 255, .2); border-radius: .4em; font: .62em "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); animation: lv-stamp var(--t) cubic-bezier(.3, 1.6, .5, 1) calc(var(--d) * 1s) infinite both; }
.lv-ev--v { background: #fff; border-color: #fff; color: #000; }
.lv-ev--i { border-style: dashed; }
.lv-ev--x { border-color: var(--e); color: var(--e); }
@keyframes lv-stamp { 0%, 4% { opacity: 0; transform: scale(1.6); } 8%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* ── MS3 · Insight → USP ── */
.lv-us__i { position: absolute; left: 1.6em; width: 15em; height: 7.2em; padding: .8em .9em; border: 1px solid rgba(255, 255, 255, .1); border-radius: .9em; background: #111; display: flex; flex-direction: column; gap: .2em; }
.lv-us__i .lv-sk--d { margin-top: .5em; }
.lv-us__u { position: absolute; left: 24em; right: 1.6em; top: 1.6em; bottom: 1.6em; padding: 1em 1.1em; border: 1px solid rgba(249, 46, 7, .45); border-radius: 1em; background: #101010; display: flex; flex-direction: column; gap: .5em; }
.lv-us__u .lv-sk { margin: 0; }
.lv-us__u .lv-sk--w { margin-bottom: .3em; }

/* ── MS4 · KPI e scenari ── */
.lv-ks { gap: .8em; }
.lv-kt { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; padding-top: 4em; }
.lv-kt::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 3.1em; height: 1px; background: rgba(255, 255, 255, .2); }
.lv-kt__root { position: absolute; left: 33%; right: 33%; top: 0; height: 2.4em; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: .6em; background: #181818; }
.lv-kt__root .lv-vis__m { color: #fff; font-size: .7em; }
.lv-kt__root::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: .7em; background: rgba(255, 255, 255, .2); }
.lv-kt__n { position: relative; padding: .5em .7em; border: 1px solid rgba(255, 255, 255, .1); border-radius: .6em; background: rgba(255, 255, 255, .03); }
.lv-kt__n::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: .9em; background: rgba(255, 255, 255, .2); }
.lv-kt__n .lv-vis__m { font-size: .7em; }
.lv-kt__n .lv-sk--d { margin: .5em 0 0; }
.lv-sc { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .4em; }
.lv-sc .lv-bars { position: relative; flex: 1; gap: 3em; padding: 0 3em; }
.lv-sc .lv-bars i { background: rgba(255, 255, 255, .16); }
.lv-sc .lv-bars .lv-sc__b { background: rgba(255, 255, 255, .5); }
.lv-sc__s { position: absolute; left: 0; right: 0; bottom: 60%; height: 0; border-top: 1px dashed var(--e); }
.lv-sc__s em { position: absolute; right: 0; top: -1.5em; font-size: .62em; }
.lv-sc__l { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3em; padding: 0 3em; text-align: center; }
.lv-sc__l .lv-vis__m { font-size: .66em; }

/* ── MS5 · Moduli e customer journey ── */
.lv-md { position: absolute; left: 1.6em; right: 1.6em; top: 1.6em; height: 14.2em; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: .8em; }
.lv-md__t { padding: .7em .9em; border: 1px solid rgba(255, 255, 255, .1); border-radius: .8em; background: #101010; display: flex; flex-direction: column; justify-content: space-between; }
.lv-md__t--off { border-style: dashed; background: transparent; opacity: .6; }
.lv-md__h { display: flex; justify-content: space-between; align-items: center; }
.lv-md__h > b { font-size: 1.15em; letter-spacing: -.02em; }
.lv-md__t .lv-vis__m { font-size: .66em; }
.lv-md__t:not(.lv-md__t--off) .lv-vis__m { color: rgba(186, 255, 46, .8); }
.lv-jr { position: absolute; left: 1.6em; right: 1.6em; bottom: 1.6em; height: 6.6em; padding: .8em 1em; border: 1px solid rgba(255, 255, 255, .1); border-radius: .9em; background: #101010; }
.lv-jr__l { position: absolute; left: 1.4em; right: 1.4em; top: 3.4em; height: 1px; background: rgba(255, 255, 255, .2); }
.lv-jr__n { position: absolute; top: 0; }
.lv-jr__n i { position: absolute; left: -.45em; top: -.45em; width: .9em; height: .9em; border-radius: 50%; background: #fff; }
.lv-jr__n em { position: absolute; left: 0; top: .9em; font-size: .64em; transform: translateX(-50%); }
.lv-jr__p { position: absolute; top: -.35em; width: .7em; height: .7em; margin-left: -.35em; border-radius: 50%; background: var(--e); left: 92%; animation: lv-run 4.5s ease-in-out infinite; }
@keyframes lv-run { 0% { left: 8%; opacity: 0; } 8% { opacity: 1; } 88% { left: 92%; opacity: 1; } 100% { left: 92%; opacity: 0; } }

/* ── MS6 · Roadmap ── */
.lv-rm { gap: .7em; }
.lv-rm__g { position: relative; flex: 1; display: grid; grid-template-columns: 6.6em repeat(12, 1fr); grid-template-rows: auto repeat(5, 1fr); gap: .35em .2em; align-items: center; }
.lv-rm__m { text-align: center; font-size: .6em; }
.lv-rm__n { font-size: .66em; }
.lv-rm__q { align-self: stretch; margin: -.2em -.1em; border: 1px dashed rgba(249, 46, 7, .6); border-radius: .5em; background: rgba(249, 46, 7, .06); }
.lv-rm__b { height: 1.1em; border-radius: .4em; background: rgba(255, 255, 255, .28); transform-origin: left; animation: lv-fill var(--t) ease calc(var(--d) * 1s) infinite both; }
.lv-rm__b--e { background: var(--e); }
.lv-rm__f { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.lv-rm__sk { width: 40%; margin: 0; }

/* ── CS1 · Concept e tre stream ── */
.lv-cc__in { position: absolute; left: 1.6em; width: 10.4em; height: 3em; display: flex; align-items: center; gap: .6em; padding: 0 .8em; border: 1px solid rgba(255, 255, 255, .12); border-radius: .7em; background: #111; font-size: 1em; color: rgba(255, 255, 255, .88); }
.lv-cc__in .lv-fav { width: 1.2em; height: 1.2em; }
.lv-cc__c { position: absolute; left: 15em; width: 13em; top: 8em; height: 11em; padding: .9em 1em; border: 1px solid rgba(255, 255, 255, .3); border-radius: .9em; background: #161616; display: flex; flex-direction: column; gap: .3em; }
.lv-cc__s { position: absolute; left: 33em; right: 1.6em; height: 7.6em; padding: .7em .9em; border: 1px solid rgba(255, 255, 255, .1); border-radius: .9em; background: #101010; display: flex; flex-direction: column; gap: .2em; }
.lv-cc__k { display: flex; gap: .4em; margin-top: auto; }
.lv-cc__k span { padding: .15em .5em; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99em; font-size: .66em; color: rgba(255, 255, 255, .6); }

/* ── CS2 · Brief designer e base veritiera ── */
.lv-set-solution .lv-vis .lv-cb__l { left: 1.6em; right: auto; width: 20em; }
.lv-cb__r { position: absolute; left: 23.6em; right: 1.6em; top: 1.6em; bottom: 1.6em; display: flex; flex-direction: column; gap: .55em; }
.lv-cb__mb { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: .4em; }
.lv-cb__t { border-radius: .5em; background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05)); }
.lv-cb__t--1 { background: linear-gradient(160deg, #3a3a3a, #161616); }
.lv-cb__t--2 { background: #e9e9e9; }
.lv-cb__t--3 { background: linear-gradient(200deg, #262626, #0f0f0f); border: 1px solid rgba(249, 46, 7, .5); }
.lv-cb__t--4 { background: linear-gradient(120deg, #8a8a8a, #2e2e2e); }
.lv-cb__t--5 { background: #1c1c1c; border: 1px solid rgba(255, 255, 255, .12); }
.lv-cb__r .lv-chk { padding: .35em .8em; }

/* ── CS3 · Piano editoriale ── */
.lv-pd { gap: .5em; }
.lv-pd__lg { display: inline-flex; align-items: center; gap: .4em; font: .62em "Space Mono", monospace; color: rgba(255, 255, 255, .5); }
.lv-pd__lg i { width: .9em; height: .9em; margin-left: .5em; border-radius: .2em; }
.lv-pd__g { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(4, 1fr); gap: .3em; }
.lv-pd__d { text-align: center; font-size: .6em; }
.lv-pd__c { position: relative; border: 1px solid rgba(255, 255, 255, .06); border-radius: .4em; padding: .25em; }
.lv-pd__p { display: block; padding: .2em .3em; border-radius: .3em; font-size: .68em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-pd__p--1 { background: #fff; color: #000; }
.lv-pd__p--2 { background: rgba(255, 255, 255, .22); color: #fff; }
.lv-pd__p--3 { border: 1px solid var(--e); color: var(--e); }

/* ── CS4 · Preview feed e QA ── */
.lv-fd { position: absolute; left: 1.6em; top: 1.6em; bottom: 1.6em; width: 17em; padding: .8em; border: 1px solid rgba(255, 255, 255, .14); border-radius: 1.4em; background: #0f0f0f; display: flex; flex-direction: column; gap: .7em; }
.lv-fd__h { display: flex; align-items: center; gap: .6em; }
.lv-fd__h > span { flex: 1; }
.lv-fd__h .lv-sk { margin: 0; }
.lv-fd__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25em; }
.lv-fd__t { position: relative; aspect-ratio: 1; border-radius: .25em; background: rgba(255, 255, 255, .14); }
.lv-fd__t--1 { background: linear-gradient(150deg, #4a4a4a, #1a1a1a); }
.lv-fd__t--2 { background: #dcdcdc; }
.lv-fd__t--3 { background: linear-gradient(30deg, #222, #555); }
.lv-fd__t b { position: absolute; right: .35em; top: .3em; font-size: .7em; color: #fff; }
.lv-fd__nav { margin-top: auto; display: flex; justify-content: space-around; padding-top: .6em; border-top: 1px solid rgba(255, 255, 255, .08); }
.lv-fd__nav i { width: 1em; height: 1em; border-radius: .25em; background: rgba(255, 255, 255, .2); }
.lv-fq { left: 21.4em; right: 1.6em; }
.lv-fq .lv-chk { padding: .35em .8em; }

/* ── CS5 · Uscite e mese dopo ── */
.lv-us2 { left: 1.6em; width: 24.4em; gap: .5em; }
.lv-us2 .lv-tk__r { padding: .5em .7em; }
.lv-us2 .lv-fav { width: 1.4em; height: 1.4em; }
.lv-us2 .lv-tk__p { width: 8em; }
.lv-nm { left: 27.6em; right: 1.6em; }
.lv-set-solution .lv-vis .lv-nm__ch { flex: 1; min-height: 0; height: auto; padding: .5em; }
.lv-nm .lv-nx p { font-size: .88em; }

@media (prefers-reduced-motion: reduce) {
	.lv-vis .lv-jr__p { display: none; }
}