/* Home · Come funziona: i quattro passi (components/home/comeFunziona.inc.php) */

.passi { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.passi::before { content: ""; position: absolute; left: 0; right: 0; top: 1.25rem; height: 1.5px; background: var(--blu); }
.passi li { position: relative; padding-top: 3.75rem; }
.passi .n { position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--carta); border: 1.5px solid var(--blu); font-weight: 800; font-stretch: 115%; font-variant-numeric: tabular-nums; }
html:not(.js) .passi li:last-child .n { background: var(--blu); color: var(--bianco); }
.passi h3 { margin-bottom: .75rem; }
.passi p { color: var(--su-carta-2); max-width: 34ch; }
.passi p + p { margin-top: .75rem; }
.come__chiusa { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
/* quattro passi in fila stanno larghi solo sopra i 1000px; sotto, in colonna */
@media (max-width: 1000px) {
  .passi { grid-template-columns: 1fr; gap: 2rem; padding-left: 3.75rem; }
  .passi::before { left: 1.25rem; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .passi li { padding-top: 0; }
  .passi .n { left: -3.75rem; }
  .come__chiusa { padding-left: 3.75rem; }  /* allineato ai testi dei passi: la linea scende libera a sinistra */
}
@media (max-width: 520px) { .come__chiusa .azione { padding: 0 1rem; gap: .5rem; white-space: nowrap; } }

/* i passi si accendono quando la linea del Flow ci passa */
.js .passi .n { transition: background-color .5s var(--esce), color .5s var(--esce); }
.js .passi li.toccata .n { background: var(--blu); color: var(--bianco); }