/* =====================================================================
   CHI SIAMO · stile della pagina (restyling v3 · 30/09/2026)
   ===================================================================== */

/* ---------- Le tappe: linea del tempo ----------
   Computer: quattro colonne su una linea orizzontale che si disegna quando compare.
   Telefono: una sotto l'altra, lungo una linea verticale. */
.tappe { position: relative; }
.tappe__elenco {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tappe__linea { position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--linea-chiara); }
.tappe__elenco li { position: relative; padding-top: 48px; }
.tappe__elenco li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bronzo-chiaro);
  box-shadow: 0 0 0 6px var(--antracite);
}
.tappe__anno { display: block; margin-bottom: 14px; font: 600 clamp(2.4rem, 1.8rem + 2vw, 3.6rem)/1 var(--serif); color: var(--bronzo-chiaro); }
.tappe__elenco h3 { color: var(--avorio); }
.tappe__elenco p { margin: 0; font-size: .95rem; }

/* ---------- Formazione: video e testo ---------- */
.duo--video { grid-template-columns: 1.15fr .85fr; }

/* ---------- La filosofia: tre valori numerati ---------- */
.valori { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.valore { padding-top: 24px; border-top: 1px solid var(--testo); }
.valore__num { display: block; margin-bottom: 18px; font: 600 3rem/1 var(--serif); color: var(--bronzo); }
.valore p { margin: 0; color: var(--testo-2); }

@media (max-width: 760px) {
  .tappe { padding-left: 34px; }
  .tappe__elenco { grid-template-columns: 1fr; gap: 36px; }
  .tappe__linea { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .tappe__elenco li { padding-top: 0; }
  .tappe__elenco li::before { left: -34px; top: 12px; }
  .duo--video { grid-template-columns: 1fr; }
  .valori { grid-template-columns: 1fr; }
}