/* ==========================================================================
   CartoNoir · sito v3 · «Come lavoriamo + campione» (30/09/2026)
   Si carica DOPO /brand.css, /v3/v3.css e /v3/v3-scena.css. Regole nuove con prefisso v3-cl-;
   nessun colore scritto a mano: solo token --brand-* (e, per le velature e le ombre, il noir e l'avorio
   del marchio in rgba). Le pagine del campione sono rese coi toni del marchio, non con la palette del
   template cliente (quella resta in anteprima.html, dove e' un debito dichiarato).
   ========================================================================== */

/* ==========================================================================
   Apertura: «Ogni orario dice da dove viene.»
   ========================================================================== */
body.v3 .v3-cl-campione { padding-top: clamp(12px, 3vw, 32px); padding-bottom: clamp(48px, 7vw, 96px); }
body.v3 .v3-cl-apertura-testo { margin: 0 0 var(--s3); }
body.v3 .v3-cl-apertura-testo .v3-etichetta { margin-bottom: var(--s3); }
body.v3 .v3-cl-apertura-testo .v3-cl-titolo { margin: 0 0 var(--s3); font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.05; }
body.v3 .v3-cl-apertura-testo .v3-cl-lead { margin: 0; font-size: 15px; line-height: 1.5; max-width: 42ch; }
@media (min-width: 1024px) {
  body.v3 .v3-cl-apertura-testo .v3-cl-titolo { margin-bottom: var(--s5); font-size: clamp(2.4rem, 3.4vw, 3.3rem); }
  body.v3 .v3-cl-apertura-testo .v3-cl-lead { font-size: 17px; line-height: 1.6; }
}
body.v3 .v3-cl-metodo-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 1024px) {
  body.v3 .v3-cl-metodo-griglia { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: clamp(48px, 6vw, 96px); }
}
body.v3 .v3-cl-titolo { margin: 0 0 var(--s5); font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; color: var(--v3-testo); }
body.v3 .v3-cl-lead { font-size: clamp(16px, 1.5vw, 18px); max-width: 46ch; margin-bottom: 0; }

body.v3 .v3-cl-citazione { position: relative; margin: 0; padding: clamp(28px, 4vw, 48px); background: var(--brand-blu-notte); color: var(--brand-avorio); box-shadow: var(--v3-depth-2); }
body.v3 .v3-cl-citazione-etichetta { margin: 0 0 var(--s5); font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-oro); }
body.v3 .v3-cl-citazione-testo { margin: 0 0 var(--s5); padding: 0; border: 0; }
body.v3 .v3-cl-citazione-testo p { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.25; color: var(--brand-avorio); text-wrap: balance; }
body.v3 .v3-cl-tacche { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
body.v3 .v3-cl-tacche span { display: block; height: 6px; border: 1px solid var(--brand-oro); }
body.v3 .v3-cl-tacche .is-piena { background: var(--brand-oro); }
body.v3 .v3-cl-citazione-nota { margin: var(--s4) 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--brand-testo-menu); }

/* ==========================================================================
   Il metodo: tre passi + la scena del tavolo
   ========================================================================== */
body.v3 .v3-cl-metodo { padding-bottom: calc(var(--v3-pad-y) * .5); }
body.v3 .v3-cl-metodo-griglia { margin-bottom: clamp(32px, 5vw, 56px); }
body.v3 .v3-cl-metodo-testo { min-width: 0; }
body.v3 .v3-cl-testa { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
body.v3 .v3-cl-testa .v3-h2 { margin-bottom: 0; }

body.v3 .v3-cl-passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 700px) and (max-width: 1023px) {
  body.v3 .v3-cl-passi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
  body.v3 .v3-cl-passo:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  body.v3 .v3-cl-passi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
}
body.v3 .v3-cl-passo { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); background: var(--brand-superficie-chiara); border: 1px solid var(--brand-filetto-chiaro); color: var(--brand-noir); }
body.v3 .v3-cl-passo--blu { background: var(--brand-blu-notte); border-color: var(--brand-blu-notte); color: var(--brand-avorio); box-shadow: var(--v3-depth-1); }
body.v3 .v3-cl-num { display: block; margin: 0 0 var(--s5); font-family: var(--serif); font-weight: 500; font-size: 3rem; line-height: 1; font-variant-numeric: lining-nums; color: var(--brand-oro-testo); }
body.v3 .v3-cl-passo--blu .v3-cl-num { color: var(--brand-oro); }
body.v3 .v3-cl-passo-titolo { margin: 0 0 var(--s3); font-family: var(--serif); font-weight: 500; font-size: clamp(1.55rem, 2vw, 1.85rem); line-height: 1.1; color: inherit; }
body.v3 .v3-cl-passo-testo { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--brand-testo-card); }
body.v3 .v3-cl-passo--blu .v3-cl-passo-testo { color: rgba(242, 236, 223, .86); }
body.v3 .v3-cl-passo-testo .v3-segnaposto { display: inline-block; margin-block: 2px; padding: 2px 6px; line-height: 1.5; }
body.v3 .v3-cl-passo-nota { margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid var(--brand-filetto-chiaro); font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--brand-grigio-caldo); }

/* La scena: la stessa del tavolo della home, qui come fascia larga sotto i passi. Le regole di v3.css la
   vogliono in una griglia con aree e, da 1024, incollata a lato: qui si rimette in flusso. */
body.v3 .v3-cl-tavolo { margin-top: clamp(32px, 5vw, 56px); }
body.v3 .v3-cl-tavolo .v3-scena { grid-area: auto; position: relative; top: auto; aspect-ratio: 1 / 1; }
body.v3 .v3-cl-tavolo .v3-scena img { object-position: center center; }
@media (min-width: 768px) { body.v3 .v3-cl-tavolo .v3-scena { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { body.v3 .v3-cl-tavolo .v3-scena { aspect-ratio: 2 / 1; box-shadow: var(--v3-depth-2); } }

/* ==========================================================================
   Il campione: un libro. Una sola struttura, tre comportamenti:
   · senza JavaScript: le pagine si leggono in fila (due colonne da 768);
   · con JavaScript, sotto i 1024: tutte le pagine in sequenza verticale;
   · con JavaScript, da 1024: doppia pagina, il foglio destro gira sul sinistro.
   ========================================================================== */
body.v3 .v3-cl-fogli { display: flex; flex-direction: column; gap: var(--s5); }
body.v3 .v3-cl-foglio { display: contents; }

body.v3 .v3-cl-pagina { position: relative; min-width: 0; margin: 0; overflow: hidden; background: var(--brand-superficie-chiara); color: var(--brand-noir); border: 1px solid var(--brand-filetto-chiaro); box-shadow: var(--v3-depth-1); }

/* --- pagine di testo: giorno 2 e album --- */
body.v3 .v3-cl-pagina--testo { display: flex; flex-direction: column; padding: clamp(20px, 5vw, 32px); }
body.v3 .v3-cl-pagina--testo .v3-giorno-titolo { font-size: clamp(1.6rem, 2vw, 1.9rem); }
body.v3 .v3-cl-pagina--testo .v3-giorno-sotto { margin-bottom: var(--s4); }
body.v3 .v3-cl-pagina--testo .v3-striscia { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--s4); }
body.v3 .v3-cl-pagina--testo .v3-scaletta { margin-bottom: var(--s4); }
body.v3 .v3-cl-pagina--testo .v3-scaletta li { padding-block: 9px; }
body.v3 .v3-cl-nota-orari { margin: 0 0 var(--s4); font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--brand-noir); }
body.v3 .v3-cl-pagina--testo .v3-foglio-piede { margin-top: auto; }

body.v3 .v3-cl-riquadro { margin: 0 0 var(--s4); padding: 12px 16px; background: var(--brand-avorio); border-left: 4px solid var(--brand-oro-su-chiaro); }
body.v3 .v3-cl-riquadro h4 { margin: 0 0 4px; font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-oro-testo); }
body.v3 .v3-cl-riquadro p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--brand-noir); }
body.v3 .v3-cl-riquadro strong { margin-right: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; color: var(--brand-oro-testo); }

body.v3 .v3-cl-colonne { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin: 0 0 var(--s4); }
body.v3 .v3-cl-scheda { padding: 12px 14px; background: var(--brand-avorio); border: 1px solid var(--brand-filetto-chiaro); }
body.v3 .v3-cl-scheda h4 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--brand-filetto-chiaro); font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-noir); }
body.v3 .v3-cl-scheda--oro h4 { color: var(--brand-oro-testo); }
body.v3 .v3-cl-scheda ul { list-style: none; margin: 0; padding: 0; }
body.v3 .v3-cl-scheda li { position: relative; margin: 0 0 6px; padding-left: 14px; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--brand-noir); }
body.v3 .v3-cl-scheda li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--brand-oro-su-chiaro); }

body.v3 .v3-cl-avviso { margin: 0 0 var(--s4); padding: 12px 16px; background: color-mix(in srgb, var(--brand-errore) 8%, var(--brand-superficie-chiara)); border-left: 4px solid var(--brand-errore); }
body.v3 .v3-cl-avviso h4 { margin: 0 0 4px; font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-errore); }
body.v3 .v3-cl-avviso p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--brand-noir); }

/* album: polaroid su carta, con il nastro */
body.v3 .v3-cl-album { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; margin: 4px 0 var(--s5); padding-top: 10px; }
body.v3 .v3-cl-polaroid { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; background: var(--brand-avorio); border: 1px solid var(--brand-filetto-chiaro); box-shadow: 0 3px 8px rgba(13, 14, 16, .14); }
body.v3 .v3-cl-polaroid:nth-child(1) { transform: rotate(-1.6deg); }
body.v3 .v3-cl-polaroid:nth-child(2) { transform: rotate(1.2deg); }
body.v3 .v3-cl-polaroid:nth-child(3) { transform: rotate(.9deg); }
body.v3 .v3-cl-polaroid:nth-child(4) { transform: rotate(-1.1deg); }
body.v3 .v3-cl-nastro { position: absolute; top: -10px; width: 62px; height: 22px; background: color-mix(in srgb, var(--brand-oro) 42%, transparent); border: 1px dashed color-mix(in srgb, var(--brand-oro-su-chiaro) 60%, transparent); }
body.v3 .v3-cl-nastro--sx { left: 18px; transform: rotate(-10deg); }
body.v3 .v3-cl-nastro--dx { right: 18px; transform: rotate(10deg); }
body.v3 .v3-cl-scatto { display: grid; place-items: center; aspect-ratio: 1 / 1; border: 1px dashed var(--brand-cornice-interna); background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(13, 14, 16, .03) 8px 16px); font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-align: center; color: var(--brand-grigio-caldo); }
body.v3 .v3-cl-polaroid p { margin: 0; padding-bottom: 3px; border-bottom: 1px dotted var(--brand-cornice-interna); font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-grigio-caldo); }

/* --- pagine a tutta immagine: copertina e poster --- */
body.v3 .v3-cl-pagina--immagine { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1 / 1.414; padding: clamp(24px, 6vw, 44px); background: var(--brand-noir); border-color: var(--brand-noir); color: var(--brand-avorio); text-align: center; }
/* Le due illustrazioni sono una stampa appoggiata su un tavolo di carta: la stampa occupa circa l'87 % dell'altezza
   della foto, al centro. Ingrandita di poco, riempie la pagina e la carta attorno resta fuori. */
body.v3 .v3-cl-pagina .v3-cl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.16); }
/* La velatura noir sta dove sta il testo (circa 50 % sul terzo inferiore e in alto) e si apre nel mezzo, dove l'illustrazione respira. */
body.v3 .v3-cl-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(13, 14, 16, .76) 0%, rgba(13, 14, 16, .62) 18%, rgba(13, 14, 16, .5) 34%, rgba(13, 14, 16, 0) 58%), linear-gradient(to bottom, rgba(13, 14, 16, .6) 0%, rgba(13, 14, 16, .48) 14%, rgba(13, 14, 16, 0) 30%); }
body.v3 .v3-cl-occhiello-foto { position: relative; margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: var(--brand-avorio); text-shadow: 0 1px 6px rgba(13, 14, 16, .5); }
body.v3 .v3-cl-titolo-foto { position: relative; }
body.v3 .v3-cl-titolo-foto h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 7.5vw, 2.6rem); line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-avorio); text-shadow: 0 3px 14px rgba(13, 14, 16, .55); text-wrap: balance; }
body.v3 .v3-cl-titolo-foto--poster h3 { font-size: clamp(1.5rem, 5.5vw, 2rem); letter-spacing: .05em; }
body.v3 .v3-cl-sotto-foto { margin: var(--s3) 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: .08em; color: var(--brand-avorio); text-shadow: 0 2px 8px rgba(13, 14, 16, .5); }
body.v3 .v3-cl-date-foto { display: inline-block; margin: var(--s4) 0 0; padding: 10px 0; border-block: 1px solid rgba(242, 236, 223, .55); font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-avorio); }

/* --- retrocopertina --- */
body.v3 .v3-cl-pagina--fine { overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); aspect-ratio: 1 / 1.414; padding: clamp(28px, 6vw, 56px) clamp(24px, 5vw, 44px); background: var(--brand-noir); border-color: var(--brand-campo-scuro); color: var(--brand-avorio); text-align: center; }
body.v3 .v3-cl-sigillo { display: block; width: 56px; height: 56px; margin-bottom: var(--s3); }
body.v3 .v3-cl-titolo-fine { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 6vw, 2.3rem); line-height: 1.15; color: var(--brand-avorio); text-wrap: balance; }
body.v3 .v3-cl-titolo-fine em { font-style: italic; font-weight: 400; color: var(--brand-oro); }
body.v3 .v3-cl-testo-fine { margin: 0 0 var(--s3); max-width: 36ch; font-family: var(--sans); font-size: 15px; line-height: 1.65; color: rgba(242, 236, 223, .86); }
body.v3 .v3-cl-torna { color: var(--brand-testo-menu); }

/* --- senza JavaScript, da 768: due colonne --- */
@media (min-width: 768px) {
  html:not(.v3-js) body.v3 .v3-cl-fogli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  html:not(.v3-js) body.v3 .v3-cl-pagina--fine { grid-column: 1 / -1; aspect-ratio: auto; }
}

/* --- sotto i 1024: pagine ad altezza naturale, tutte visibili nello scorrimento verticale. --- */
@media (max-width: 1023px) {
  body.v3 .v3-cl-pagina::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8%; pointer-events: none; z-index: 3; background: linear-gradient(to right, rgba(13, 14, 16, .24), rgba(13, 14, 16, 0)); }
  html.v3-js body.v3 .v3-cl-libro { display: flex; flex-direction: column; }
  html.v3-js body.v3 .v3-cl-apertura-testo { order: -2; }
  html.v3-js body.v3 .v3-cl-comandi { margin: var(--s2) 0 0; row-gap: 4px; } html.v3-js body.v3 .v3-cl-apertura-testo { margin-bottom: var(--s2); } html.v3-js body.v3 .v3-cl-apertura-testo .v3-etichetta { margin-bottom: var(--s2); } html.v3-js body.v3 .v3-cl-apertura-testo .v3-cl-titolo { margin-bottom: var(--s2); line-height: 1; }
  html.v3-js body.v3 .v3-cl-fogli {
    position: relative; flex-direction: column; align-items: stretch; gap: var(--s5);
    overflow: visible;
    margin-inline: 0; padding: 4px 0 22px;
  }
  html.v3-js body.v3 .v3-cl-fogli::-webkit-scrollbar { display: none; }
  html.v3-js body.v3 .v3-cl-fogli:focus-visible { outline: 2px solid var(--brand-oro); outline-offset: -2px; }
  html.v3-js body.v3 .v3-cl-pagina { flex: 0 0 auto; box-shadow: 0 6px 16px rgba(13, 14, 16, .4); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  body.v3 .v3-cl-scatto { aspect-ratio: 4 / 3; }
  body.v3 .v3-cl-pagina--testo .v3-striscia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.v3 .v3-cl-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- con JavaScript, da 1024: la doppia pagina.
   Tutti i fogli stanno nella colonna di destra, uno sull'altro: l'altezza del libro e' quella della pagina
   piu' alta. Girare un foglio e' ruotarlo di 180 gradi attorno alla costola, cioe' il suo bordo sinistro. --- */
@media (min-width: 1024px) {
  /* Il libro riempie la colonna dei contenuti (la stessa di ogni altra sezione): con un massimo di 1000 px e il margine
     automatico il testo d'apertura finiva 32 px a destra del resto della pagina, a 1440. */
  html.v3-js body.v3 .v3-cl-libro { position: relative; display: flex; flex-direction: column; margin-inline: 0; container-type: inline-size; }
  html.v3-js body.v3 .v3-cl-fogli {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; align-items: stretch; gap: 0;
    perspective: 2200px;
  }
  html.v3-js body.v3 .v3-cl-fogli:focus-visible { outline: 2px solid var(--brand-oro); outline-offset: 8px; }
  /* Chiuso, il libro e' la sola copertina, in proporzione A4, sulla meta' destra; sulla sinistra, in alto, il testo d'apertura
     e subito sotto Prec, Succ e i puntini. Aperto, il testo si ritira (resta nel documento) e i comandi restano in vista,
     attaccati al bordo basso dello schermo finche' il libro e' in pagina. */
  html.v3-js body.v3 .v3-cl-apertura-testo { position: absolute; top: 0; left: 0; z-index: 4; width: calc(50% - 40px); margin: 0; padding-top: clamp(32px, 4vh, 56px); display: flex; flex-direction: column; justify-content: flex-start; }
  html.v3-js body.v3 .v3-cl-libro[data-spread="0"] .v3-cl-comandi { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "prec succ stato" "punti punti punti"; justify-items: start; margin-top: var(--s6); }
  html.v3-js body.v3 .v3-cl-libro[data-spread="0"] .v3-cl-punti { justify-content: flex-start; margin-left: -10px; }
  html.v3-js body.v3 .v3-cl-libro:not([data-spread="0"]) .v3-cl-apertura-testo { position: sticky; top: auto; bottom: 12px; left: auto; z-index: 5; width: auto; order: 2; margin-top: var(--s4); padding: 12px 0; background: color-mix(in srgb, var(--brand-blu-notte) 94%, transparent); }
  html.v3-js body.v3 .v3-cl-libro:not([data-spread="0"]) .v3-cl-apertura-testo > :not(.v3-cl-comandi) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.v3-js body.v3 .v3-cl-libro:not([data-spread="0"]) .v3-cl-comandi { margin-top: 0; }
  html.v3-js body.v3 .v3-cl-foglio {
    display: grid; grid-column: 2; grid-row: 1; position: relative; min-width: 0;
    transform-origin: left center; transform-style: preserve-3d;
    z-index: var(--z-dx);
    transition: transform var(--t-tratto) var(--ease-rotta), z-index 0s linear calc(var(--t-tratto) / 2);
  }
  html.v3-js body.v3 .v3-cl-foglio[data-foglio="1"] { --z-dx: 3; --z-sx: 1; }
  html.v3-js body.v3 .v3-cl-foglio[data-foglio="2"] { --z-dx: 2; --z-sx: 2; }
  html.v3-js body.v3 .v3-cl-foglio[data-foglio="3"] { --z-dx: 1; --z-sx: 3; }
  html.v3-js body.v3 .v3-cl-foglio.is-girato { transform: rotateY(-180deg); z-index: var(--z-sx); }
  html.v3-js body.v3 .v3-cl-pagina { grid-area: 1 / 1; aspect-ratio: auto; box-shadow: 0 18px 40px rgba(13, 14, 16, .5); backface-visibility: hidden; -webkit-backface-visibility: hidden; max-height: calc(50cqw * 2.4); transition: max-height var(--t-tratto) var(--ease-rotta); }
  html.v3-js body.v3 .v3-cl-libro[data-spread="0"] .v3-cl-pagina { max-height: calc(50cqw * 1.414); }
  html.v3-js body.v3 .v3-cl-retro { transform: rotateY(180deg); }
  html.v3-js body.v3 .v3-cl-pagina--testo { padding: 28px 30px; }
  html.v3-js body.v3 .v3-cl-pagina--testo .v3-scaletta li { padding-block: 7px; }
  html.v3-js body.v3 .v3-cl-pagina--testo .v3-giorno-sotto { margin-bottom: 12px; }
  html.v3-js body.v3 .v3-cl-album { flex: 1 1 auto; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  html.v3-js body.v3 .v3-cl-polaroid { min-height: 0; }
  html.v3-js body.v3 .v3-cl-scatto { aspect-ratio: auto; flex: 1 1 auto; min-height: 150px; }
  html.v3-js body.v3 .v3-cl-pagina--testo .v3-striscia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.v3-js body.v3 .v3-cl-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* l'ombra della costola: sul lato che guarda il centro del libro */
  html.v3-js body.v3 .v3-cl-fronte::after,
  html.v3-js body.v3 .v3-cl-retro::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; z-index: 3; }
  html.v3-js body.v3 .v3-cl-fronte::after { left: 0; background: linear-gradient(to right, rgba(13, 14, 16, .22), rgba(13, 14, 16, 0)); }
  html.v3-js body.v3 .v3-cl-retro::after { right: 0; background: linear-gradient(to left, rgba(13, 14, 16, .22), rgba(13, 14, 16, 0)); }
}

/* Riduci movimento: nessuna rotazione, niente scorrimento animato; il cambio di pagina e' una dissolvenza breve. */
@keyframes v3-cl-dissolvi { from { opacity: .15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.v3-js body.v3 .v3-cl-fogli,
  html.v3-js body.v3 .v3-cl-foglio,
  html.v3-js body.v3 .v3-cl-pagina,
  html.v3-js body.v3 .v3-cl-apertura-testo { transition: none; scroll-behavior: auto; }
  html.v3-js body.v3 .v3-cl-libro.is-cambia .v3-cl-fogli { animation: v3-cl-dissolvi var(--t-soffio) var(--ease-rotta) both; }
}

/* --- i comandi: Prec, Succ, dove sei --- */
body.v3 .v3-cl-comandi { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "prec stato succ" "punti punti punti"; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s4); }
body.v3 .v3-cl-comandi[hidden] { display: none; }
body.v3 .v3-cl-tasto { min-width: 0; min-height: 48px; padding: 14px 16px; }
body.v3 .v3-cl-tasto--prec { grid-area: prec; }
body.v3 .v3-cl-tasto--succ { grid-area: succ; }
body.v3 .v3-cl-tasto:not(:disabled):hover { color: var(--brand-avorio); border-color: var(--brand-avorio); background: rgba(242, 236, 223, .1); }
body.v3 .v3-cl-tasto:disabled { background: var(--brand-campo-scuro); border-color: var(--brand-campo-scuro); color: var(--brand-testo-menu); cursor: not-allowed; }
body.v3 .v3-cl-stato { grid-area: stato; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; text-align: center; font-family: var(--sans); }
body.v3 .v3-cl-numero { font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--brand-avorio); font-variant-numeric: lining-nums; }
body.v3 .v3-cl-nome { font-size: 12px; line-height: 1.3; letter-spacing: .06em; color: var(--brand-testo-menu); max-width: 18ch; }
body.v3 .v3-cl-punti { grid-area: punti; display: flex; justify-content: center; flex-wrap: wrap; gap: 0; }
body.v3 .v3-cl-punto { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; }
body.v3 .v3-cl-punto::before { content: ""; display: block; width: 10px; height: 10px; border: 1.5px solid var(--brand-testo-menu); background: transparent; transition: background var(--t-soffio) var(--ease-rotta), border-color var(--t-soffio) var(--ease-rotta); }
body.v3 .v3-cl-punto[aria-current="true"]::before { background: var(--brand-avorio); border-color: var(--brand-avorio); }
body.v3 .v3-cl-punto:hover::before { border-color: var(--brand-avorio); }
body.v3 .v3-cl-punto:focus-visible { outline: 2px solid var(--brand-oro); outline-offset: -2px; }
@media (min-width: 1024px) {
  body.v3 .v3-cl-comandi { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "prec succ stato punti"; gap: var(--s4) var(--s5); margin-top: var(--s5); }
  body.v3 .v3-cl-tasto { min-width: 112px; }
  body.v3 .v3-cl-stato { flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; }
  body.v3 .v3-cl-nome { max-width: none; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body.v3 .v3-cl-punto::before, body.v3 .v3-cl-tasto { transition: none !important; }
}

body.v3 .v3-cl-avvertenza { margin-top: var(--s5); }

/* ==========================================================================
   I tre livelli
   ========================================================================== */
body.v3 .v3-cl-livelli-sezione { padding-top: clamp(56px, 8vw, 104px); }
body.v3 .v3-cl-livelli { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 768px) { body.v3 .v3-cl-livelli { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
/* D-97: due schede (la guida e l'aggiunta), non piu' tre livelli: due colonne, larghezza di lettura contenuta. */
@media (min-width: 768px) { body.v3 .v3-cl-livelli--due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; } }
body.v3 .v3-cl-livello { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); background: var(--brand-superficie-chiara); border: 1px solid var(--brand-filetto-chiaro); }
body.v3 .v3-cl-livello-nome { margin: 0 0 var(--s3); font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 2.2vw, 2rem); line-height: 1.1; color: var(--brand-noir); }
body.v3 .v3-cl-livello-desc { margin: 0 0 var(--s5); font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--brand-testo-card); }
body.v3 .v3-cl-livello-prezzo { margin: auto 0 0; padding-top: var(--s4); border-top: 1px solid var(--brand-filetto-chiaro); font-family: var(--serif); font-weight: 500; font-size: 2.2rem; line-height: 1.05; font-variant-numeric: lining-nums; color: var(--brand-noir); }
body.v3 .v3-cl-da { font-style: italic; font-weight: 400; font-size: .62em; margin-right: .15em; }
/* Giro di correzione 1 di D-97 (L3): il «+» delle Esperienze speciali come su /prezzi. */
body.v3 .v3-cl-da.v3-cl-piu { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: .7em; color: var(--brand-oro-testo); }
body.v3 .v3-cl-livello-nota { margin: 6px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--brand-grigio-caldo); }
body.v3 .v3-cl-livelli-riga { max-width: none; }
body.v3 .v3-cl-inline { color: var(--brand-oro-testo); text-underline-offset: 3px; }
body.v3 .v3-cl-inline:hover { color: var(--brand-noir); }
body.v3 .v3-cl-inline:focus-visible { outline: 2px solid var(--brand-noir); outline-offset: 2px; }

/* ==========================================================================
   Le domande: <details>, leggibili anche senza JavaScript
   ========================================================================== */
body.v3 .v3-cl-domande { padding-top: 0; }
body.v3 .v3-cl-domande .v3-in { padding-top: clamp(40px, 6vw, 72px); }
body.v3 .v3-cl-faq { max-width: 860px; border-bottom: 1px solid var(--brand-filetto-chiaro); }
body.v3 .v3-cl-faq details { border-top: 1px solid var(--brand-filetto-chiaro); }
body.v3 .v3-cl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding: 14px 0; list-style: none; cursor: pointer; font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; color: var(--brand-noir); }
body.v3 .v3-cl-faq summary::-webkit-details-marker { display: none; }
body.v3 .v3-cl-faq summary::after { content: "+"; flex: 0 0 auto; font-family: var(--sans); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--brand-oro-testo); transition: transform var(--t-soffio) var(--ease-rotta); }
body.v3 .v3-cl-faq details[open] summary::after { transform: rotate(45deg); }
body.v3 .v3-cl-faq summary:hover { color: var(--brand-oro-testo); }
body.v3 .v3-cl-faq summary:focus-visible { outline: 2px solid var(--brand-noir); outline-offset: 2px; }
body.v3 .v3-cl-faq details > p { margin: 0 0 var(--s5); max-width: 62ch; font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--brand-testo-card); }
@media (max-width: 1023px) {
  body.v3 .v3-cl-faq summary { cursor: default; }
  body.v3 .v3-cl-faq summary::after { content: none; }
}
@media (prefers-reduced-motion: reduce) { body.v3 .v3-cl-faq summary::after { transition: none; } }

/* ==========================================================================
   Chiusura
   ========================================================================== */
body.v3 .v3-cl-chiusura-in { max-width: 640px; }
body.v3 .v3-cl-chiusura .v3-p { margin-bottom: var(--s6); }