/* ===================== MOTOTOUR «DA PERCORRERE» ===================== */
.copertina{min-height:min(88svh,46rem);display:grid;align-items:end;color:#fff}
.copertina::after{background:linear-gradient(180deg,rgba(10,11,13,.2) 0%,rgba(10,11,13,.55) 32%,rgba(10,11,13,.9) 58%,rgba(10,11,13,.94) 100%)}
.copertina .attacco,.copertina h1{text-shadow:0 1px 12px rgba(0,0,0,.6)}
.copertina .wrap{padding-block:3rem 2.4rem;display:grid;gap:1rem}
.copertina h1{font-size:clamp(3rem,13vw,7.5rem);line-height:.86;text-transform:uppercase}
.copertina h1 small{display:block;font-size:.34em;letter-spacing:.2em;color:var(--mezzeria);margin-bottom:.4rem}
.copertina .attacco{font:400 clamp(1.05rem,2.6vw,1.25rem)/1.55 var(--f-read);max-width:40rem;color:#f2ede3}
.copertina .attacco strong{color:#fff}
.dati-strip{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:baseline;gap:.4rem;background:rgba(10,11,13,.66);border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:.45rem .7rem;font:600 .95rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#EEE8DA;backdrop-filter:blur(4px)}
.chip b{font-size:1.25rem;color:var(--mezzeria);font-variant-numeric:tabular-nums}
.chip small{font:500 .7rem/1 var(--f-ui);letter-spacing:.1em;opacity:.8}
.firma-testo{font:600 .82rem/1.3 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}

/* palco del giro */
.giro{position:relative;background:var(--bg-2)}
.giro-palco{position:sticky;top:calc(var(--top) + 50px);height:calc(100svh - var(--top) - 50px);overflow:hidden;background:var(--bg-2);z-index:1}
.giro-palco canvas.carta{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.giro-su{position:absolute;left:12px;right:12px;top:12px;display:flex;gap:.5rem;align-items:flex-start;z-index:3;pointer-events:none}
.hud{display:flex;flex-wrap:wrap;gap:.45rem;align-items:stretch;flex:1;min-width:0}
.hud>div{background:rgba(9,11,13,.84);color:#EEE8DA;border:1px solid #2c3137;border-radius:10px;padding:.45rem .7rem;display:grid;align-content:center}
.hud small{font:700 .62rem/1 var(--f-display);letter-spacing:.18em;color:#8FB7C9;text-transform:uppercase}
.hud b{font:700 1.7rem/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--mezzeria)}
.hud .hud-tappa{min-width:0;flex:1 1 7rem;max-width:14rem}
.hud .hud-tappa b{font-size:1.15rem;color:#EEE8DA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.giro-comandi{flex:none;display:flex;flex-direction:column;gap:.45rem;pointer-events:auto}
.giro-comandi .tasto{background:rgba(9,11,13,.84);color:#EEE8DA;border-color:#2c3137;width:44px;height:44px}
.giro-comandi .tasto[aria-pressed="true"]{background:var(--mezzeria);color:#16181B;border-color:var(--mezzeria)}
.profilo-box{position:absolute;left:12px;right:12px;bottom:12px;height:64px;z-index:3;background:rgba(9,11,13,.8);border:1px solid #2c3137;border-radius:10px;overflow:hidden}
.profilo-box canvas{width:100%;height:100%;display:block}
.profilo-box span{position:absolute;right:8px;top:6px;font:600 .62rem/1 var(--f-ui);letter-spacing:.08em;color:#8d8a82;text-transform:uppercase}
.parti{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:3;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.giro[data-in-moto="si"] .parti,.giro.in-corsa .parti{display:none}
/* le tappe scorrono sopra il palco */
.tappe{list-style:none;margin:calc(-100svh + var(--top) + 50px) 0 0;padding:0 0 30svh;position:relative;z-index:2;pointer-events:none}
.tappa{min-height:100svh;display:flex;align-items:flex-end;padding:0 12px calc(92px + 1rem)}
.tappa:first-child{min-height:120svh}
.tappa-card{pointer-events:auto;background:var(--velo);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--linea);border-radius:14px;padding:1rem 1.1rem 1.1rem;max-width:30rem;width:100%;box-shadow:var(--ombra);display:grid;gap:.6rem;transition:opacity .15s}
.tappa-testa{display:flex;align-items:center;gap:.8rem}
.cippo-mini{flex:none;width:52px;background:#FBFAF6;border:2px solid #CFC7B6;border-radius:18px 18px 4px 4px;overflow:hidden;text-align:center;color:#16181B}
.cippo-mini::before{content:"";display:block;height:12px;background:#B3261E}
.cippo-mini b{display:block;font:700 1.05rem/1 var(--f-display);padding:.25rem 0 .1rem;font-variant-numeric:tabular-nums}
.cippo-mini small{display:block;font:700 .55rem/1 var(--f-display);letter-spacing:.14em;padding-bottom:.3rem;color:#5c574e}
.tappa h3{font-size:1.45rem}
.tappa .sotto{font:500 .78rem/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.tappa blockquote{margin:0;font:400 1.02rem/1.6 var(--f-read);border-left:3px solid var(--mezzeria);padding-left:.8rem}
.tappa blockquote+blockquote{margin-top:.2rem}
.tappa .fonte{font:500 .72rem/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.tappa img{border-radius:10px;width:100%;aspect-ratio:16/7;max-height:15svh;object-fit:cover}
.tappa details{border-top:1px solid var(--linea);padding-top:.4rem}
.tappa summary{cursor:pointer;font:700 .85rem/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--rocca);padding:.3rem 0}
.tappa details[open] summary{margin-bottom:.4rem}
.tappa .silenzio{font:italic 400 .98rem/1.5 var(--f-read);color:var(--fg-2)}
.tappa .storie{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.3rem}
.tappa .storia-slide{scroll-snap-align:start;background:var(--asfalto);color:#EEE8DA;border-radius:10px;overflow:hidden}
.tappa .storia-slide img{border-radius:0;aspect-ratio:16/10}
.tappa .storia-slide div{padding:.8rem .9rem 1rem;display:grid;gap:.4rem}
.tappa .storia-slide h4{margin:0;font:700 1.15rem/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.03em;color:var(--mezzeria)}
.tappa .storia-slide p{font:400 .95rem/1.5 var(--f-read)}
.tappa .storia-slide a{color:#EEE8DA}
.tappa .scorri{font:600 .72rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
@media (min-width:900px){
  .tappa{align-items:center;padding:0 var(--gutter) 6rem}
  .tappa-card{max-width:27rem}
  .giro-su{left:calc(27rem + var(--gutter) + 24px)}
  .hud{justify-content:flex-end}
  .profilo-box{left:calc(27rem + var(--gutter) + 24px);right:12px}
  .parti{left:calc(50% + 14rem)}
}

/* testo completo */
.racconto{display:grid;gap:3rem}
.racconto h2{margin-bottom:.8rem}
.racconto h2 .emoji{font-size:.8em}
.colonne{display:grid;gap:2rem}
@media (min-width:900px){.colonne{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.figura{margin:0}
.figura img{border-radius:12px;width:100%}
.figura figcaption{font:400 .85rem/1.45 var(--f-ui);color:var(--fg-2);margin-top:.5rem}
.illustrate{display:grid;gap:1.6rem}
.illustrata{display:grid;gap:1.1rem;align-items:start}
.illustrata img{border-radius:12px;width:100%;max-width:26rem}
@media (min-width:860px){.illustrata{grid-template-columns:16rem minmax(0,1fr)}}
.leggi ul{padding-left:1.1rem;margin:.6rem 0}
.leggi li{margin:.35rem 0}
.scheda-tecnica{background:var(--asfalto);color:var(--su-asfalto);border-radius:14px;padding:1.3rem;display:grid;gap:1rem}
.scheda-tecnica .righe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),1fr));gap:.8rem}
.st-voce{border:1px solid var(--asfalto-3);border-radius:10px;padding:.8rem}
.st-voce small{display:block;font:700 .68rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#8FB7C9}
.st-voce b{display:block;font:700 1.7rem/1.1 var(--f-display);color:var(--mezzeria);font-variant-numeric:tabular-nums;margin-top:.35rem}
.st-voce span{display:block;font:400 .82rem/1.35 var(--f-ui);color:var(--su-asfalto-2);margin-top:.25rem}
.scheda-tecnica .leggi{color:var(--su-asfalto);max-width:none}
.scheda-tecnica .btn{align-self:start}
.segnaposto-esterno{border:2px dashed var(--linea);border-radius:12px;padding:1.2rem;display:grid;gap:.6rem;justify-items:start;background:var(--bg)}
.in-breve{border:1px solid var(--linea);border-radius:12px;padding:1rem 1.1rem;background:var(--bg);display:grid;gap:.5rem;max-width:44rem}
.in-breve p,.in-breve li{font:400 1rem/1.55 var(--f-read)}
.in-breve ul{margin:0;padding-left:1.1rem}
.in-breve .nota{font:500 .75rem/1.3 var(--f-ui);color:var(--fg-2)}

.storie-castello .car-slide{min-height:30rem}
.tappa .teaser{display:grid;gap:.5rem}
.tappa .teaser h4{margin:0;font:700 1.2rem/1.05 var(--f-display);text-transform:uppercase;color:var(--rocca)}
/* testo molto grande su telefono stretto: carte essenziali, la strada resta visibile */
.giro.compatto .tappa img{display:none}
.giro.compatto .tappa .sotto{display:none}
.giro.compatto .cippo-mini{width:44px}
