/* =============================================================================
   L'ACCHIANATA DI SANTA ROSALIA
   assets/css/virtuale.css - Acchianata virtuale
   -----------------------------------------------------------------------------
   Tema chiaro: questo cammino si fa da casa, di giorno, spesso da computer.
   Il tema notturno resta al sentiero, dove serve davvero.
   ============================================================================= */

.v-apertura{padding:clamp(36px,6vw,72px) 0}

/* --- Riquadri di stato ---------------------------------------------------- */

.v-invito,
.v-ripresa,
.v-traguardo,
.v-avviso{
  background:var(--sfondo-alt);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:28px;
  margin-bottom:30px;
}

.v-invito h2{margin-bottom:.5em}
.v-invito__azioni{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}
.v-invito__azioni .bottone{flex:1 1 auto;min-width:200px}

.v-ripresa__stato{
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--testo-morbido);margin-bottom:.8em;
}
.v-ripresa .barra{
  height:8px;border-radius:4px;overflow:hidden;
  background:var(--avorio-scuro);margin-bottom:22px;
}
.v-ripresa .barra span{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--bordeaux),var(--oro));
}

.v-avviso{display:flex;gap:14px;align-items:center}
.v-avviso i{font-size:1.8rem;color:var(--oro)}
.v-avviso p{margin:0;color:var(--testo-morbido)}

.v-traguardo{
  text-align:center;
  border-color:var(--oro);
  background:linear-gradient(160deg,rgba(201,162,39,.1),rgba(92,26,50,.05));
}
.v-traguardo i{font-size:2.6rem;color:var(--oro);display:block;margin-bottom:12px}
.v-traguardo h2{margin-bottom:.4em}
.v-traguardo p{color:var(--testo-morbido)}

/* --- Elenco delle tappe --------------------------------------------------- */

.v-elenco__titolo{margin:44px 0 18px;font-size:1.5rem}
.v-elenco{display:grid;gap:10px}

.v-riga{
  display:flex;align-items:center;gap:15px;
  padding:15px 18px;
  background:var(--sfondo-alt);
  border:1px solid var(--bordo);border-radius:var(--raggio);
}
.v-riga__numero{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:700;font-size:.92rem;
  background:var(--avorio-scuro);color:var(--testo-morbido);
}
.v-riga__corpo{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.v-riga__link{font-size:.86rem;font-weight:700;white-space:nowrap}

.v-riga--letta .v-riga__numero{background:var(--oro);color:var(--notte)}
.v-riga--attuale{border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-chiaro)}
.v-riga--attuale .v-riga__numero{background:var(--bordeaux);color:#fff}
.v-riga--chiusa{opacity:.6}

/* --- Pagina di una tappa -------------------------------------------------- */

.v-tappa{padding:30px 0 70px}

.v-passi{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-bottom:36px;
}
.v-passo{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  font-size:.85rem;font-weight:700;
  background:var(--avorio-scuro);color:var(--testo-morbido);
  border:2px solid transparent;
}
.v-passo--letta{background:var(--oro);color:var(--notte)}
.v-passo--qui{
  border-color:var(--bordeaux);color:var(--bordeaux);background:#fff;
  transform:scale(1.12);
}
.v-passo--letta.v-passo--qui{background:var(--oro);color:var(--notte)}

.v-numero{
  font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--rosa);margin-bottom:.8em;
}
.v-titolo{font-size:clamp(1.9rem,5.4vw,2.8rem);line-height:1.1;margin-bottom:.25em}
.v-sottotitolo{
  font-family:var(--font-display);font-style:italic;
  font-size:1.15rem;color:var(--testo-morbido);margin-bottom:1.6em;
}

.v-figura{margin:0 0 30px}
.v-figura img{width:100%;border-radius:var(--raggio);border:1px solid var(--bordo)}
.v-figura figcaption{
  margin-top:9px;font-size:.84rem;color:var(--testo-morbido);
  font-style:italic;text-align:center;
}

.v-testo{font-size:1.12rem;line-height:1.8}
.v-testo p{margin:0 0 1.3em}
.v-testo p:first-of-type::first-letter{
  font-family:var(--font-display);
  float:left;font-size:3.6rem;line-height:.82;
  padding:6px 12px 0 0;color:var(--bordeaux);
}
.v-testo blockquote{
  margin:1.8em 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--oro);
  font-family:var(--font-display);font-style:italic;
  font-size:1.2rem;color:var(--pietra);
}

/* --- Navigazione fra le tappe --------------------------------------------- */

.v-navigazione{
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;align-items:center;
  margin-top:46px;padding-top:26px;
  border-top:1px solid var(--bordo);
}
.v-navigazione .bottone{flex:1 1 auto;min-width:190px;justify-content:center}

/* Pulsante in attesa del tempo minimo di lettura */
.prosegui--atteso{
  background:var(--avorio-scuro);
  color:var(--testo-morbido);
  cursor:default;pointer-events:none;
  font-variant-numeric:tabular-nums;
}

/* --- Pagine di servizio --------------------------------------------------- */

.v-servizio{max-width:520px;margin:0 auto;padding:8vh 0 40px;text-align:center}
.v-servizio > i{font-size:3rem;color:var(--oro);display:block;margin-bottom:16px}
.v-servizio h1{font-size:clamp(1.6rem,4.6vw,2.1rem);margin-bottom:.5em}
.v-servizio p{color:var(--testo-morbido);margin-bottom:1.4em}
.v-servizio .bottone{margin:6px}