/* Pagine QR «Scegli il difficile» — complemento a vb.css v3 (solo gettoni della casa). Mockup 7/11/2026. */
.vb-hero h1 { margin-bottom:.35rem; }
.vb-hero .sous-titre.piccolo { font-size:.95rem; color:var(--ciel); }

/* Il libro: copertina reale con leggero volume (costa + taglio delle pagine), niente ritocchi */
.libro { position:relative; width:min(54vw, 214px); margin:2.1rem auto 2.4rem; perspective:1100px; }
.libro .volume { position:relative; transform:rotateY(-21deg) rotateX(2deg); transform-style:preserve-3d; transform-origin:50% 50%; }
.libro .volume img { position:relative; display:block; width:100%; height:auto; aspect-ratio:480/768; border-radius:2px 6px 6px 2px;
  box-shadow:0 22px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }
.libro .piega { position:absolute; inset:0 auto 0 0; width:7%; border-radius:2px 0 0 2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 30%, rgba(0,0,0,.38) 55%, rgba(255,255,255,.07) 75%, rgba(0,0,0,0) 100%); }
.libro .luce { position:absolute; inset:0; border-radius:2px 6px 6px 2px; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%); }
.libro .taglio { position:absolute; top:1.2%; bottom:1.2%; right:0; width:19px; transform-origin:100% 50%; transform:rotateY(90deg);
  background:repeating-linear-gradient(90deg, #f6f1e6 0 1px, #e4ddcd 1px 2px); box-shadow:inset 0 0 6px rgba(0,0,0,.25); }
.libro .terra { position:absolute; left:6%; right:-4%; bottom:-22px; height:26px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0)); filter:blur(3px); transform:translateZ(-1px); }
.libro .didascalia { margin-top:1.55rem; text-align:center; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ciel); }

/* Ringraziamento: carta chiara, calda, con filetto e fregio */
.grazie { position:relative; background:var(--blanc); color:var(--texte-carte); border-radius:var(--rayon); box-shadow:var(--ombre);
  padding:1.9rem 1.45rem 1.6rem; margin-top:.6rem; text-align:center; overflow:hidden; }
.grazie::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg, var(--nuit), var(--bleu), var(--nuit)); }
.grazie .fregio { display:flex; align-items:center; justify-content:center; gap:.7rem; color:var(--bleu); margin-bottom:.9rem; }
.grazie .fregio::before, .grazie .fregio::after { content:""; width:2.6rem; height:1px; background:#c9dbf3; }
.grazie .fregio svg { width:18px; height:18px; display:block; }
.grazie h2 { margin:0 0 .75rem; color:var(--encre); font-size:1.42rem; line-height:1.22; }
.grazie p { color:#2b3648; font-size:1.02rem; line-height:1.72; max-width:30rem; margin-left:auto; margin-right:auto; }
.grazie .firma { margin-top:1.05rem; font-family:Fraunces, Georgia, serif; font-weight:500; color:var(--encre); font-size:.98rem; }

/* Carta d'azione della pagina */
.azione { margin-top:1.6rem; padding:1.55rem 1.35rem 1.45rem; }
.azione .surtitre { margin-bottom:.4rem; }
.azione h2 { font-size:1.36rem; margin-bottom:.7rem; }
.azione > p:not(.surtitre):not(.petit):not(.rgpd) { color:#2b3648; }
.azione .btn { margin-top:1.25rem; }
.brano { display:flex; align-items:center; gap:.9rem; margin:.35rem 0 .9rem; padding:.8rem .9rem; background:#F2F7FE; border:1px solid #d6e5f8; border-radius:12px; }
.brano .num { flex:none; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--nuit); color:var(--blanc); display:grid; place-items:center;
  font-family:Fraunces, Georgia, serif; font-weight:600; font-size:1.05rem; }
.brano .titolo { font-family:Fraunces, Georgia, serif; font-weight:600; color:var(--encre); font-size:1.15rem; line-height:1.2; }
.brano .meta { font-size:.8rem; color:var(--gris-carte); letter-spacing:.06em; }
.percorso { display:flex; justify-content:center; gap:.42rem; margin:1.3rem 0 0; list-style:none; }
.percorso li { width:.5rem; height:.5rem; border-radius:50%; background:#d3e2f6; margin:0; }
.percorso li.qui { background:var(--nuit); box-shadow:0 0 0 3px rgba(63,134,220,.25); }
.percorso-etichetta { text-align:center; font-size:.78rem; color:var(--gris-carte); margin-top:.45rem; }
.btn .icona { display:inline-block; vertical-align:-2px; margin-right:.5rem; width:1rem; height:1rem; }
.azione .etapes { margin-top:1rem; color:#2b3648; font-size:.96rem; }
.azione .rgpd { text-align:left; }
.dono { display:flex; gap:.85rem; align-items:center; margin:.2rem 0 1rem; padding:.85rem; background:#F2F7FE; border:1px solid #d6e5f8; border-radius:12px; }
.dono img { flex:none; width:58px; height:auto; aspect-ratio:1; object-fit:cover; object-position:50% 22%; border-radius:8px; box-shadow:0 6px 14px rgba(11,47,107,.28); }
.dono .titolo { font-family:Fraunces, Georgia, serif; font-weight:600; color:var(--encre); font-size:1.06rem; line-height:1.25; }
.dono .meta { font-size:.82rem; color:var(--gris-carte); }
.btn[aria-disabled="true"] { background:#e7eef8 !important; color:#5b6b86 !important; box-shadow:none !important; cursor:not-allowed; transform:none !important; border:1px dashed #a9c3e6; }
.regole { margin-top:1.4rem; padding:1.1rem 1.2rem; border-radius:14px; background:var(--voile); border:1px solid rgba(156,195,240,.28); font-size:.92rem; color:var(--pale); }
.regole p + p { margin-top:.6rem; }
.mockup { margin:2rem auto 0; max-width:40rem; text-align:center; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(156,195,240,.6); }
@media (min-width:760px) { .libro { width:230px; } .grazie { padding:2.2rem 2.2rem 1.9rem; } }
.nw { white-space:nowrap; }
@media (max-width:479px) { .vb-hero .surtitre .sep { display:block; height:0; overflow:hidden; } }

/* Pagine di ascolto: pulsante in alto, ringraziamento in una riga, copertina più piccola */
.grazie-breve { text-align:center; color:var(--ciel); font-size:.98rem; line-height:1.5; margin:.1rem auto 1.15rem; max-width:22rem; }
.ascolto .azione { margin-top:.15rem; }
.ascolto .azione .btn { margin-top:.55rem; }
.ascolto .libro { width:min(38vw, 148px); margin:2rem auto 1.5rem; }
@media (min-width:760px) { .ascolto .libro { width:156px; } }