/* Chi siamo */
.storia { align-items: start; }
.storia-frase { color: var(--titolo); font: 500 var(--t-t2)/1.02 var(--voce); letter-spacing: -.02em; text-wrap: balance; }
.storia-testo p { font-size: var(--t-lead); line-height: 1.55; color: var(--sky-chiaro); }
.storia-testo p + p { color: var(--mint); }

/* linea del tempo: un filo che si riempie mentre si scorre */
.tappe { position: relative; padding-left: clamp(40px, 6vw, 96px); }
.tappe-elenco { display: grid; gap: clamp(48px, 9vh, 104px); }
.tappe-filo { position: absolute; left: clamp(12px, 2vw, 32px); top: 12px; bottom: 12px; width: 2px; background: var(--linea); border-radius: 2px; }
.tappe-filo i { position: absolute; inset: 0; background: linear-gradient(var(--imperial), var(--sky-vivo)); transform-origin: top; border-radius: 2px; }
.tappa { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 16px clamp(24px, 4vw, 80px); align-items: end; }
.tappa::before { content: ""; position: absolute; left: calc(clamp(40px, 6vw, 96px) * -1 + clamp(12px, 2vw, 32px) - 6px); top: clamp(26px, 3vw, 54px); width: 14px; height: 14px; border-radius: 50%; background: var(--notte); box-shadow: 0 0 0 2px var(--nebbia); transition: background-color .6s var(--esce), box-shadow .6s; }
.tappa.accesa::before, html:not(.moto) .tappa::before { background: var(--sky); box-shadow: 0 0 0 2px var(--sky); }
.tappa--oggi.accesa::before, html:not(.moto) .tappa--oggi::before { background: var(--fucsia); box-shadow: 0 0 0 2px var(--fucsia); }
.tappa-quando { font: 400 var(--t-t1)/.98 var(--voce); letter-spacing: -.01em; font-variation-settings: "opsz" 40, "SOFT" 100, "WONK" 0; font-variant-numeric: tabular-nums; color: var(--nebbia); transition: color .8s var(--esce); }
.tappa.accesa .tappa-quando, html:not(.moto) .tappa-quando { color: var(--imperial); }
.tappa--oggi .tappa-quando { font-weight: 400; }
.tappa--oggi.accesa .tappa-quando, html:not(.moto) .tappa--oggi .tappa-quando { color: var(--jet); }
.tappa h3 { font: 500 var(--t-t3)/1.1 var(--voce); letter-spacing: -.02em; margin-bottom: 10px; }
.tappa p:not(.tappa-quando) { color: var(--sky-chiaro); font-size: var(--t-testo); line-height: 1.55; }

@media (max-width: 900px) {
  .tappa { grid-template-columns: 1fr; }
  .tappa::before { top: 22px; }
}
.tappa-rimando { margin-top: 18px; font-size: var(--t-testo); }

/* Team: foto a mezzo busto sul fronte, descrizioni originali sul retro. */
.persone-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px); }
.persona { --mint: #f9fffb; --sky-chiaro: #d6e5ee; min-width: 0; perspective: 1400px; }
.persona-giro { position: relative; border-radius: 26px; box-shadow: var(--ombra-morbida); }
.persona-fronte { position: relative; overflow: hidden; border-radius: 26px; background: #eeefed; }
.persona-fronte img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.persona-identita { position: absolute; inset: auto 0 0; padding: 140px clamp(20px, 2vw, 32px) 24px; color: var(--mint); background: linear-gradient(rgba(7, 28, 39, 0), rgba(7, 28, 39, .08) 15%, rgba(7, 28, 39, .3) 32%, rgba(7, 28, 39, .62) 52%, rgba(7, 28, 39, .86) 72%, rgb(7, 28, 39)); }
.persona h3 { font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; }
.persona-ruolo { margin-top: 8px; font: 400 var(--t-piccolo)/1.4 var(--display); }
.persona-retro { border-radius: 26px; background: var(--imperial); color: var(--mint); padding: clamp(24px, 2.5vw, 40px); }
.persona-retro .persona-ruolo { color: var(--sky-chiaro); }
.persona-fuori { margin-top: 24px; font-size: var(--t-testo); line-height: 1.6; }
.persona-gira, .persona-torna { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 44px; padding: 12px 0 0; border: 0; border-top: 1px solid rgba(249,255,251,.3); background: transparent; color: var(--mint); text-align: left; font: 500 var(--t-piccolo)/1.3 var(--display); cursor: pointer; }
.persona-gira svg, .persona-torna svg { width: 22px; height: 22px; flex: none; transition: transform .25s var(--esce); }
.persona-gira:hover svg, .persona-torna:hover svg { transform: rotate(15deg); }
.persona-gira:focus-visible, .persona-torna:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
/* Senza JavaScript entrambe le facce restano leggibili nel flusso. */
.persona--interattiva .persona-giro { display: grid; grid-template-columns: minmax(0, 1fr); transform-style: preserve-3d; transition: transform .65s var(--esce); }
.persona--interattiva .persona-fronte, .persona--interattiva .persona-retro { grid-area: 1 / 1; transition-property: none !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.persona--interattiva .persona-fronte { transform: rotateY(0deg); }
/* la foto copre tutta la card anche quando il retro è più alto */
.persona--interattiva .persona-fronte::before { content: ""; display: block; padding-top: 125%; }
.persona--interattiva .persona-fronte img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 50% 20%; }
.persona--interattiva .persona-identita { padding-bottom: 88px; }
.persona--interattiva .persona-gira { position: absolute; bottom: 22px; left: clamp(20px, 2vw, 32px); width: calc(100% - 2 * clamp(20px, 2vw, 32px)); }
.persona--interattiva .persona-retro { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; transform: rotateY(180deg); }
.persona--girata .persona-giro { transform: rotateY(180deg); }
.persona--interattiva .persona-fronte[aria-hidden="true"], .persona--interattiva .persona-retro[aria-hidden="true"] { visibility: hidden; }
@media (min-width: 901px) {
  .persone-elenco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .persona:nth-child(3n+2) { margin-top: clamp(64px, 7vw, 120px); }
  .persona:nth-child(3n) { margin-top: clamp(24px, 2.6vw, 44px); }
}
@media (max-width: 600px) { .persone-elenco { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .persona-giro, .persona-gira svg, .persona-torna svg { transition: none !important; }
  .persona--interattiva .persona-giro { transform: none; transform-style: flat; }
  .persona--interattiva .persona-fronte, .persona--interattiva .persona-retro { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
}