/* Home · Fig. 1 — I due percorsi sul canale del Flow (components/home/percorsi.inc.php) */

.percorsi { padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) 0 var(--sezione); }
.percorsi__griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.percorsi__intro h1 { margin-bottom: 1.75rem; }
.percorsi__intro h1 .riga { display: block; }
.percorsi__ruolo { font-size: var(--t-lead); line-height: 1.45; color: var(--su-blu-2); margin-bottom: 2.25rem; max-width: 24em; }
.percorsi__ruolo strong { color: var(--bianco); font-weight: 700; }
.percorsi__azioni { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

.grafico { position: relative; }
.grafico__area { position: relative; aspect-ratio: 1 / 0.86; }
.grafico svg.assi { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.assi .asse { stroke: var(--su-blu-2); stroke-width: 1.25; fill: none; }
.assi .tacca { stroke: var(--su-blu-3); stroke-width: 1; }
.assi .canale { fill: rgba(116, 255, 160, .1); }
.assi .bordo-canale { fill: none; stroke: var(--menta); stroke-width: 1.5; }
.assi .centro-canale { fill: none; stroke: var(--menta); stroke-width: 1; stroke-dasharray: 2 7; opacity: .7; }
.assi text { fill: var(--su-blu-2); font-family: var(--f); }
.assi .zona { font-size: 15px; font-style: italic; fill: var(--su-blu-3); }
.assi .scritta-flow { fill: var(--menta); font-weight: 800; font-stretch: 125%; font-size: 30px; letter-spacing: .02em; }
.assi .etichetta { font-size: 12px; letter-spacing: .12em; font-weight: 650; font-stretch: 87%; text-transform: uppercase; fill: var(--su-blu-2); }

/* disegno del canale all'ingresso */
.js .grafico .bordo-canale, .js .grafico .asse { stroke-dasharray: var(--l, 2000); stroke-dashoffset: var(--l, 2000); }
.js .grafico .canale, .js .grafico .zona, .js .grafico .scritta-flow, .js .grafico .centro-canale, .js .grafico .etichetta, .js .grafico .tacca { opacity: 0; }
.js .grafico .punto, .js .grafico .segno, .js .grafico .guida { opacity: 0; }
.js .grafico .punto { transform: translateY(10px); }
.grafico.disegnato .asse { transition: stroke-dashoffset 1.1s var(--esce); stroke-dashoffset: 0; }
.grafico.disegnato .bordo-canale { transition: stroke-dashoffset 1.6s var(--esce) .45s; stroke-dashoffset: 0; }
.grafico.disegnato .canale { transition: opacity 1.2s var(--esce) .9s; opacity: 1; }
.grafico.disegnato .tacca, .grafico.disegnato .etichetta { transition: opacity .8s var(--esce) .5s; opacity: 1; }
.grafico.disegnato .centro-canale { transition: opacity .8s var(--esce) 1.3s; opacity: .7; }
.grafico.disegnato .zona, .grafico.disegnato .scritta-flow { transition: opacity 1s var(--esce) 1.2s; opacity: 1; }
.grafico.disegnato .punto, .grafico.disegnato .segno, .grafico.disegnato .guida { transition: opacity .9s var(--esce) 1.5s, transform .9s var(--esce) 1.5s; opacity: 1; }
.grafico.disegnato .punto { transform: none; }
.grafico.disegnato .punto--2, .grafico.disegnato .segno-2, .grafico.disegnato .guida-2 { transition-delay: 1.7s; }

/* i due ingressi: etichette da manuale collegate al punto da una linea di richiamo */
.assi .guida { stroke: var(--menta); stroke-width: 1; }
.assi .anello { fill: var(--blu); stroke: var(--menta); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform .6s var(--esce); }
.assi .nucleo { fill: var(--menta); }
.grafico:has(.punto--1:hover, .punto--1:focus-visible) .segno-1 .anello,
.grafico:has(.punto--2:hover, .punto--2:focus-visible) .segno-2 .anello { transform: scale(1.6); }
.punto { position: absolute; display: flex; flex-direction: column; gap: .25rem; width: min(17rem, 40%); text-decoration: none; }
.punto--1 { left: 47%; top: 64.6%; }
.punto--2 { right: 39%; bottom: 72.5%; text-align: right; align-items: flex-end; }
.punto__nome { font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem); font-weight: 800; font-stretch: 115%; letter-spacing: -.015em; line-height: 1.05; }
.punto__vai { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-piccolo); font-weight: 700; color: var(--menta); margin-top: .2rem; transition: gap .4s var(--esce); }
.punto__vai svg { width: .95rem; height: .95rem; }
.punto:hover .punto__vai { gap: .75rem; }
.punto:hover .punto__nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

@media (max-width: 980px) {
  .percorsi__griglia { grid-template-columns: 1fr; }
  .percorsi { padding-top: calc(var(--nav-h) + 2.5rem); }
}
@media (max-width: 640px) {
  .assi .zona { font-size: 22px; }
  .assi .scritta-flow { font-size: 38px; }
  .assi .etichetta { font-size: 19px; }
  .punto { width: 46%; }
  .punto__nome { font-size: 1.125rem; }
  .punto__vai { display: none; }
}