/* Come lavoriamo: le cinque fasi una alla volta, con le frecce. */
.fasi{margin-block:2rem 4rem}
.fasi__barra{display:flex;align-items:center;gap:1rem;border-block-end:1px solid var(--wp--preset--color--linea)}
.fasi__elenco{list-style:none;margin:0;padding:0;display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.fasi__elenco::-webkit-scrollbar{display:none}
.fasi__elenco li{flex:1 1 0;min-width:8.5rem}
.fasi__elenco a{box-sizing:border-box;display:flex;flex-direction:column;gap:.4rem;height:100%;padding:1.1rem .75rem 1rem;margin-block-end:-1px;
  color:var(--wp--preset--color--muto);text-decoration:none;border-block-end:2px solid transparent;transition:color .3s,border-color .4s}
.fasi__n{font-family:"Times New Roman",Times,"Liberation Serif",serif;font-size:1.625rem;line-height:1;color:var(--wp--preset--color--ottone)}
.fasi__t{font-size:.875rem;line-height:1.3}
.fasi__elenco a:hover{color:var(--wp--preset--color--inchiostro)}
.fasi__elenco a[aria-selected="true"]{color:var(--wp--preset--color--inchiostro);border-color:var(--wp--preset--color--verde)}
.fasi__elenco a:focus-visible{outline:2px solid var(--wp--preset--color--verde);outline-offset:-2px}

.fasi__freccia{flex:none;position:relative;width:48px;height:48px;border-radius:50%;border:1px solid var(--wp--preset--color--linea);
  background:transparent;color:var(--wp--preset--color--inchiostro);cursor:pointer;transition:border-color .3s,color .3s}
.fasi__freccia::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border:solid currentColor;border-width:0 0 1.5px 1.5px;
  transform:translate(-30%,-50%) rotate(45deg)}
.fasi__freccia--succ::before,.paghera-rtl .fasi__freccia--prec::before{transform:translate(-70%,-50%) rotate(-135deg)}
.paghera-rtl .fasi__freccia--succ::before{transform:translate(-30%,-50%) rotate(45deg)}
.fasi__freccia:hover:not(:disabled){border-color:var(--wp--preset--color--verde);color:var(--wp--preset--color--verde)}
.fasi__freccia:focus-visible{outline:2px solid var(--wp--preset--color--verde);outline-offset:2px}
.fasi__freccia:disabled{opacity:.3;cursor:default}

.fasi__pannello{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:2.5rem}
.fasi__pannello + .fasi__pannello{border-block-start:1px solid var(--wp--preset--color--linea)}
.fasi__foto{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--wp--preset--color--pietra-scura)}
.fasi__foto img{width:100%;height:100%;object-fit:cover;display:block}
.fasi__conta{margin:0 0 .5rem;font-size:.8125rem;letter-spacing:.06em;color:var(--wp--preset--color--ottone)}
.fasi__titolo{margin:0 0 1rem;font-family:var(--wp--preset--font-family--cormorant);font-weight:400;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1}
.fasi__link{white-space:nowrap}
.fasi__link::after{content:" →"}
.paghera-rtl .fasi__link::after{content:" ←"}

/* con lo script: una fase alla volta, e quella nuova entra piano */
.fasi--attivo .fasi__pannello + .fasi__pannello{border-block-start:0}
.fasi--attivo .fasi__pannello[hidden]{display:none}
.fasi--attivo .fasi__pannello{animation:fasi-entra .7s cubic-bezier(.16,1,.3,1)}
@keyframes fasi-entra{from{opacity:0;transform:translateY(12px)}}
@media (max-width:820px){.fasi__pannello{grid-template-columns:1fr}.fasi__freccia{width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.fasi--attivo .fasi__pannello{animation:none}.fasi__elenco a,.fasi__freccia{transition:none}}