/* Proposta B · Fogli: si entra in un foglio e si torna indietro, sempre dentro il pannello. */
.fogli{flex:1;min-height:0;display:grid;margin-top:clamp(4px,.8vh,10px)}
.foglio{grid-area:1/1;min-height:0;display:flex;flex-direction:column;overflow:auto;scrollbar-width:thin;scrollbar-color:#f4c67880 transparent}
.foglio[hidden]{display:none}
.foglio.entra-avanti{animation:b-avanti .32s ease both}
.foglio.entra-indietro{animation:b-indietro .32s ease both}
@keyframes b-avanti{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes b-indietro{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* Inizio: tre porte nello stile delle tappe di oggi; il numero grande è quante cose trovi dentro. */
.porte{list-style:none;margin:0;padding:0;flex:1;display:grid;grid-template-rows:repeat(3,minmax(0,1fr))}
.porta{display:grid;grid-template-columns:clamp(64px,4vw,92px) 1fr;align-items:center;width:100%;height:100%;text-align:left;border:0;border-top:1px solid #e3e9de5c;padding:clamp(10px,1.2vh,20px) 4px;background:none;cursor:pointer;border-radius:0;transition:background .2s ease}
.porte li:first-child .porta{border-top:0}
.porta:hover{background:var(--banda)}
.conta{font-size:clamp(30px,min(1.9vw,3.6vh),46px);line-height:1;color:var(--gold);font-weight:600}
.porta>span:last-child{padding-left:clamp(25px,1.5vw,38px);border-left:1px solid #e2e7dd75;position:relative;padding-right:34px}
.porta>span:last-child::after{content:"›";position:absolute;right:6px;top:50%;transform:translateY(-55%);font-size:34px;line-height:1;color:var(--gold);transition:transform .2s ease}
.porta:hover>span:last-child::after{transform:translate(4px,-55%)}
.porta strong,.porta small{display:block}
.porta strong{font-size:clamp(19px,min(1.25vw,2.5vh),28px);line-height:1.14;font-weight:600;margin-bottom:4px}
.porta small{font-size:clamp(15px,min(.95vw,2vh),21px);line-height:1.3;color:#e7eef0}

/* Fogli interni. */
.indietro{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:6px 2px;margin:0 0 6px;cursor:pointer;color:var(--gold);font:600 clamp(14px,min(.88vw,1.9vh),17px)/1.2 Jost,General,sans-serif;letter-spacing:.01em}
.indietro span{font-size:1.7em;line-height:.6;transition:transform .2s ease}
.indietro:hover span{transform:translateX(-3px)}
.foglio h2{margin:0 0 clamp(10px,1.4vh,18px);font-size:clamp(22px,min(1.6vw,3.2vh),34px);line-height:1.12;letter-spacing:-.025em;font-weight:600;color:#fff7e8}
.righe{list-style:none;margin:0;padding:0;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#f4c67880 transparent}
.riga{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--filo);padding:clamp(9px,1.2vh,15px) 6px;cursor:pointer;border-radius:0;transition:background .2s ease}
.righe li:first-child .riga{border-top:0}
.riga:hover{background:var(--banda)}
.riga strong{display:block;font-weight:600;font-size:clamp(16px,min(1vw,2.1vh),23px);line-height:1.25}
.riga small{display:block;margin-top:2px;color:var(--tenue);font-size:clamp(13px,min(.85vw,1.8vh),18px);line-height:1.35}
.freccia{flex:none;font-size:30px;line-height:1;color:var(--gold);transition:transform .2s ease}
.riga:hover .freccia{transform:translateX(4px)}
.foglio .steps{flex:1}
.foglio .step:first-child{border-top:0}
.foglio>p:not(.chi){max-width:62ch}
.foglio .parti{flex:none;columns:2 300px;column-gap:clamp(28px,2.6vw,52px)}
.foglio .parte{break-inside:avoid}
.foglio .chi{margin-bottom:14px}

@media(max-width:760px){
 .porta{grid-template-columns:42px 1fr;padding:13px 3px}
 .conta{font-size:26px}
 .porta>span:last-child{padding-left:13px}
 .porta strong{font-size:17px}
 .porta small{font-size:14px;line-height:1.36}
 .foglio h2{font-size:23px}
 .riga strong{font-size:16px}
 .riga small{font-size:14px}
 .foglio .parti{columns:auto}
}