.tappe { position: relative; display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--spazio-griglia); margin: 48px 0 0; padding: 0; list-style: none; }
.tappe::before { content: ""; position: absolute; top: 26px; bottom: 26px; left: 25px; width: 2px; background: repeating-linear-gradient(to bottom, var(--rosso) 0 10px, transparent 10px 20px); opacity: 0.5; }
.tappa { position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 12px var(--spazio-griglia); align-items: start; }
.tappa__numero { position: relative; z-index: 1; display: grid; grid-column: 1; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--rosso); box-shadow: 0 0 0 6px var(--sfondo); color: var(--bianco); font: 700 1.0625rem/1 var(--font-titoli); }
.sezione--scura .tappa__numero { background: var(--bianco); box-shadow: 0 0 0 6px var(--mattone); color: var(--mattone); }
.sezione--scura .tappe::before { background: repeating-linear-gradient(to bottom, var(--su-mattone) 0 10px, transparent 10px 20px); }
.tappa__corpo { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 14px var(--spazio-griglia); padding: 20px 22px; border-radius: var(--raggio-m); background: var(--bianco); box-shadow: var(--ombra-appoggio); color: var(--testo); }
.tappa__cosa, .tappa .dato { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .tappa__numero { margin-top: 14px; }
  .tappa__corpo { grid-column: 2 / -1; }
}
@media (min-width: 960px) {
  .tappa__corpo { align-items: center; }
  .tappa__cosa { grid-column: 1 / 4; }
  .tappa .dato { grid-column: 4 / 6; }
  .tappa .dato--costo { grid-column: 6 / -1; }
}
@media (min-width: 1100px) {
  .tappa__cosa { grid-column: 1 / 7; }
  .tappa .dato { grid-column: 7 / 10; }
  .tappa .dato--costo { grid-column: 10 / -1; }
}
.tappa__cosa { display: flex; align-items: flex-start; gap: 14px; }
.tappa__cosa .icona { width: 44px; height: 44px; border-radius: var(--raggio-campo); font-size: 1.25rem; }
.tappa h3 { font-size: var(--misura-title); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.tappa__cosa p { margin-top: 4px; color: var(--testo-2); }
.tappa__dati { display: contents; margin: 0; }
.dato { margin: 0; }
.dato dt { display: flex; align-items: center; gap: 6px; color: var(--testo-2); font: 600 0.8125rem/1.2 var(--font-titoli); }
.dato dt .bi { color: var(--rosso); }
.dato dd { margin: 6px 0 0; font-family: var(--font-mono); font-size: var(--misura-dati); }
.dato--costo dd { color: var(--testo); font: 700 1.125rem/1.2 var(--font-titoli); }
.ora { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding-block: 6px; }
.ora + .ora { border-top: 1px dashed var(--linea-forte); }
.ora__giorni { color: var(--testo-2); }
.ora__ore { margin-left: auto; font-weight: 700; text-align: right; }
.dato__nota { display: block; margin-top: 4px; color: var(--testo-2); font: 400 0.875rem/1.4 var(--font-testo); }
.sezione--scura .tappa__corpo { border: 1px solid var(--linea-su-scuro); background: var(--mattone); box-shadow: none; color: var(--bianco); }
.sezione--scura .ora + .ora { border-top-color: var(--linea-su-scuro); }
.sezione--scura .ora__giorni, .sezione--scura .tappa__cosa p, .sezione--scura .dato dt, .sezione--scura .dato dt .bi, .sezione--scura .dato--costo dd, .sezione--scura .dato__nota { color: var(--bianco); }
@media (max-width: 759.98px) {
  .tappe::before { top: 42px; left: 43px; }
  .tappa__numero { grid-row: 1; grid-column: 1; width: 44px; height: 44px; margin: 20px 0 0 22px; font-size: 1rem; }
  .tappa__corpo { grid-row: 1; }
  .tappa__cosa { padding-top: 56px; }
  .tappa__cosa .icona { display: none; }
  .sezione--scura .tappe::before { top: 43px; left: 44px; }
  .sezione--scura .tappa__numero { margin: 21px 0 0 23px; }
}

@media (min-width: 960px) {
  .tappe:not(:has(.dato + .dato)) .tappa__corpo { align-items: start; }
  .tappe:not(:has(.dato + .dato)) .tappa .dato { grid-column: 5 / -1; }
  .tappe:not(:has(.dato + .dato)) .tappa .dato dd { max-width: 17rem; }
}
@media (min-width: 1100px) { .tappe:not(:has(.dato + .dato)) .tappa .dato { grid-column: 8 / -1; } }