/* =====================================================================
   UITUIT - RICETTA INTERATTIVA (il film della ricetta)
   Una «sala cinema»: cornice notte con filo d'oro, il film, la barra del
   tempo con le tacche dei passaggi, le etichette degli ingredienti sugli
   oggetti, una didascalia per passaggio e sotto l'elenco completo
   «Ingredienti e attrezzi». Niente bottoni play/pausa.
   Il lettore ha colori suoi (--rv-...): resta scuro anche quando la pagina
   di lettura è chiara («carta calda»), come una foto incorniciata.
   Le decorazioni dentro il testo di Carlo (bottone «Guarda questo
   passaggio», filo d'oro del passo) si adattano al tema della pagina:
   ricetta-video.js guarda il colore del testo e scrive data-rv-tema.
   data-rv-spiega="sopra": etichette e didascalie sul film (schermi larghi);
   "sotto": numeri sul film, nomi e didascalie sotto (telefono).
   ===================================================================== */

.rv {
  --rv-notte: #07080c; --rv-notte-2: #0e1119; --rv-notte-3: #171b27;
  --rv-crema: #F3E9DC; --rv-bianco: #FFF6EA; --rv-tenue: #B9AD9D;
  --rv-oro: #D9A441; --rv-oro-chiaro: #F3D28B;
  --rv-titoli: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --rv-testo: Poppins, 'Segoe UI', system-ui, sans-serif;
  --rv-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --rv-entra: cubic-bezier(.22, 1, .36, 1);
  --rv-alto: var(--alto, 68px);
  --rv-ombra: 0 60px 110px -55px rgba(0, 0, 0, .95), 0 0 100px -40px rgba(217, 164, 65, .42);
  position: relative; z-index: 1;
  padding: 0 var(--margine, 20px) clamp(36px, 6vw, 76px);
  scroll-margin-top: calc(var(--rv-alto) + 12px);
}
/* Su carta chiara l'ombra è calda e morbida, non un buco nero */
.rv[data-rv-tema="chiaro"] { --rv-ombra: 0 50px 90px -50px rgba(52, 32, 12, .6), 0 22px 44px -32px rgba(52, 32, 12, .45); }
.rv [hidden] { display: none !important; }
.rv-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* sul telefono i bottoni rispondono subito (niente attesa del doppio tocco) */
.rv button, .rv-guarda { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* L'apertura dell'articolo, quando sotto c'è il film: titolo al centro, come il cartellone di una prima */
.apertura.con-film { padding-bottom: clamp(16px, 2vw, 24px); }
.apertura.con-film .apertura-dentro { display: block; max-width: 1000px; min-height: 0; text-align: center; }
.apertura.con-film .apertura-cat, .apertura.con-film .apertura-meta { justify-content: center; }
.apertura.con-film .apertura-cat { margin-bottom: 14px; }
.apertura.con-film .apertura-titolo { margin-bottom: .26em; }
@media (min-width: 1024px) { .apertura.con-film { padding-top: clamp(16px, 2vw, 28px); } }

/* ---------- La cornice ---------- */
.rv-cornice {
  /* larga quanto basta perché film e barra stiano nella prima schermata */
  width: min(100%, max(620px, min(1180px, calc((100svh - var(--rv-alto) - 345px) * 16 / 9))));
  margin: 0 auto; position: relative; isolation: isolate; overflow: hidden;
  border-radius: 26px; color: var(--rv-crema); font-family: var(--rv-testo);
  background:
    radial-gradient(120% 50% at 50% 100%, rgba(217, 164, 65, .08), transparent 62%),
    linear-gradient(180deg, var(--rv-notte-2), var(--rv-notte));
  box-shadow: 0 0 0 1px rgba(243, 210, 139, .28), inset 0 1px 0 rgba(255, 255, 255, .06), var(--rv-ombra);
  animation: rvEntra 1.2s var(--rv-entra) both .3s;
}
@keyframes rvEntra { from { opacity: 0; transform: perspective(1400px) translate3d(0, 34px, -40px) rotateX(7deg); } }

/* ---------- Lo schermo ---------- */
.rv-schermo { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.rv-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
/* luce da sala: angoli più scuri, un velo in basso per la didascalia */
.rv-velo {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 8, 12, .3) 0%, rgba(7, 8, 12, 0) 22%, rgba(7, 8, 12, 0) 66%, rgba(7, 8, 12, .55) 100%),
    radial-gradient(130% 110% at 50% 45%, transparent 62%, rgba(7, 8, 12, .45));
}
.rv-strato { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* Le etichette degli ingredienti: un punto sull'oggetto, un filo, una targhetta (nome e dose) */
.rv-segno { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .35s ease; will-change: transform; }
.rv-segno.rv-su { opacity: 1; }
.rv-segno::before {
  content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rv-oro-chiaro); box-shadow: 0 0 0 3px rgba(7, 8, 12, .55), 0 0 12px rgba(243, 210, 139, .9);
}
.rv-segno.rv-ultima::before { box-shadow: 0 0 0 3px rgba(7, 8, 12, .55), 0 0 0 7px rgba(243, 210, 139, .28), 0 0 16px rgba(243, 210, 139, 1); }
.rv-segno-n { display: none; }
.rv-targa {
  position: absolute; display: grid; justify-items: center; gap: 1px; padding: 5px 10px 6px; border-radius: 9px; white-space: nowrap;
  background: rgba(7, 8, 12, .7); border: 1px solid rgba(243, 210, 139, .38); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s ease, translate .45s var(--rv-entra);
}
.rv-segno.rv-su .rv-targa { opacity: 1; translate: 0 0; }
.rv-targa-nome { font: 500 .9375rem/1.2 var(--rv-testo); color: var(--rv-bianco); letter-spacing: .01em; }
.rv-targa-dose { font: 600 .875rem/1.2 var(--rv-mono); color: var(--rv-oro-chiaro); letter-spacing: .06em; }
/* il filo tra il punto e la targhetta */
.rv-targa::after { content: ""; position: absolute; background: linear-gradient(var(--rv-oro-chiaro), rgba(243, 210, 139, .5)); }
.rv-lato-sopra .rv-targa { left: 0; bottom: calc(5px + var(--stelo, 11px)); transform: translateX(-50%); translate: 0 5px; }
.rv-lato-sopra .rv-targa::after { left: 50%; top: 100%; width: 1px; height: var(--stelo, 11px); }
.rv-lato-sinistra .rv-targa { right: calc(5px + var(--stelo, 11px)); top: 0; transform: translateY(-50%); translate: 5px 0; justify-items: end; }
.rv-lato-sinistra .rv-targa::after { left: 100%; top: 50%; width: var(--stelo, 11px); height: 1px; }

/* La didascalia del passaggio, in basso a sinistra (come i sottotitoli di un film) */
.rv-frase {
  position: absolute; left: clamp(16px, 3.4vw, 34px); bottom: clamp(14px, 3vw, 30px); max-width: min(62%, 30em); margin: 0;
  padding: 2px 0 4px 16px; border-left: 2px solid var(--rv-oro);
  font: italic 600 clamp(1.3rem, .75rem + 1.25vw, 1.9rem)/1.15 var(--rv-titoli); color: var(--rv-bianco); text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .7);
  opacity: 0; translate: 0 8px; transition: opacity .35s ease, translate .5s var(--rv-entra);
}
.rv-frase.rv-su { opacity: 1; translate: 0 0; }
.rv-frase.rv-destra { left: auto; right: clamp(16px, 3.4vw, 34px); padding: 2px 16px 4px 0; border-left: 0; border-right: 2px solid var(--rv-oro); text-align: right; }

/* La nota «Video generato con l'IA», in alto a destra sul film (sui telefoni solo «Video IA») */
.rv-nota { margin: 0; display: flex; align-items: center; gap: 9px; font: 400 .75rem/1.4 var(--rv-mono); letter-spacing: .04em; color: var(--rv-tenue); }
.rv-nota::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--rv-oro); transform: rotate(45deg); box-shadow: 0 0 8px rgba(217, 164, 65, .7); }
.rv-nota-sopra {
  position: absolute; z-index: 5; top: clamp(12px, 2.2vw, 22px); right: clamp(14px, 2.4vw, 26px); pointer-events: none;
  padding: 6px 12px; border-radius: 999px; color: #E9DDCD;
  background: rgba(7, 8, 12, .5); border: 1px solid rgba(243, 210, 139, .24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (max-width: 1023px) {
  .rv-nota-sopra { padding: 4px 10px; gap: 7px; font-size: .75rem; top: 10px; right: 10px; }
  .rv-nota-sopra::before { width: 5px; height: 5px; }
}

/* Solo se il telefono non lascia partire i video da soli: «Tocca per guardare» */
.rv-avvia {
  position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px 0 18px; border-radius: 999px;
  border: 1px solid rgba(243, 210, 139, .6); background: rgba(7, 8, 12, .6); color: var(--rv-bianco);
  font: italic 600 1.35rem/1 var(--rv-titoli); cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
}
.rv-avvia svg { width: 24px; height: 24px; fill: var(--rv-oro-chiaro); }
.rv-avvia:focus-visible { outline: 2px solid var(--rv-oro-chiaro); outline-offset: 3px; }

/* ---------- Il pannello sotto il film ---------- */
.rv-pannello {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "binario binario" "sotto sotto" "ora leggi" "elenco elenco" "piede piede";
  column-gap: 18px; align-items: start;
  padding: 10px clamp(18px, 2.6vw, 30px) 18px;
}

/* La barra del tempo: un segmento per passaggio (le tacche sono gli spazi tra i segmenti) */
.rv-binario { grid-area: binario; min-width: 0; container-type: inline-size; padding-bottom: 6px; border-bottom: 1px solid rgba(243, 210, 139, .14); }
.rv-barra {
  position: relative; display: flex; align-items: center; gap: 5px; height: 44px; cursor: pointer;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; border-radius: 10px;
}
.rv-barra:focus-visible { outline: 2px solid var(--rv-oro-chiaro); outline-offset: 2px; }
.rv-segmento {
  position: relative; flex: 1 1 0; min-width: 0; height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(243, 233, 220, .16); transition: transform .25s var(--rv-entra), background-color .25s ease;
}
.rv-segmento.rv-qui { background: rgba(243, 233, 220, .26); }
.rv-pieno { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--rv-oro), var(--rv-oro-chiaro)); }
.rv-cursore {
  position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #FFF4D6, var(--rv-oro-chiaro) 45%, var(--rv-oro));
  box-shadow: 0 0 0 4px rgba(217, 164, 65, .22), 0 0 18px rgba(243, 210, 139, .7);
  transition: scale .2s var(--rv-entra), box-shadow .2s ease;
}
.rv.rv-trascina .rv-segmento { transform: scaleY(1.6); }
.rv.rv-trascina .rv-cursore { scale: 1.3; box-shadow: 0 0 0 7px rgba(217, 164, 65, .22), 0 0 26px rgba(243, 210, 139, .9); }
@media (hover: hover) and (pointer: fine) {
  .rv-barra:hover .rv-segmento { transform: scaleY(1.6); }
  .rv-barra:hover .rv-cursore { scale: 1.15; }
}
/* L'anellino che si riempie nei 10 secondi di sosta (intorno al cursore e accanto al tempo) */
.rv-anello { position: absolute; width: 34px; height: 34px; left: 50%; top: 50%; margin: -17px 0 0 -17px; transform: rotate(-90deg); opacity: 0; transition: opacity .3s ease; overflow: visible; }
.rv-anello circle { fill: none; stroke-width: 2; }
.rv-anello-fondo { stroke: rgba(243, 210, 139, .22); }
.rv-anello-pieno { stroke: var(--rv-oro-chiaro); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.rv.rv-in-attesa .rv-anello { opacity: 1; }

/* I passaggi sotto la barra: numeri (stretto) o numero + nome breve (quando c'è spazio) */
.rv-capitoli { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.rv-capitoli li { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; margin: 0; padding: 0; }
.rv-capitoli li::before { content: none; }
.rv-capitolo {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 12px; background: none; color: var(--rv-tenue); cursor: pointer; font: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent; transition: color .2s ease;
}
.rv-capitolo-n {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  font: 600 .875rem/1 var(--rv-mono); border: 1px solid rgba(243, 210, 139, .24);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rv-rombo::before { content: ""; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.rv-capitolo.rv-fatto { color: #DCCFBE; }
.rv-capitolo.rv-fatto .rv-capitolo-n { border-color: rgba(243, 210, 139, .5); }
.rv-capitolo.rv-qui { color: var(--rv-bianco); }
.rv-capitolo.rv-qui .rv-capitolo-n { background: var(--rv-oro); border-color: var(--rv-oro); color: #17110a; box-shadow: 0 0 18px rgba(217, 164, 65, .6); }
.rv-capitolo-t { display: none; }
.rv-capitolo:focus-visible { outline: 2px solid var(--rv-oro-chiaro); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) { .rv-capitolo:hover { color: var(--rv-bianco); } .rv-capitolo:hover .rv-capitolo-n { border-color: var(--rv-oro-chiaro); } }
@container (min-width: 600px) {
  .rv-capitoli li { justify-content: flex-start; }
  .rv-capitolo { width: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 4px 6px 2px 0; }
  .rv-capitolo-n { display: flex; place-items: initial; align-items: center; width: auto; height: 13px; border: 0 !important; background: none !important; box-shadow: none !important; font-size: .6875rem; color: var(--rv-oro) !important; }
  .rv-rombo::before { width: 6px; height: 6px; }
  .rv-capitolo-t { display: block; min-width: 0; font: 400 .875rem/1.25 var(--rv-testo); }
  .rv-capitolo.rv-qui .rv-capitolo-t { font-weight: 500; }
}

/* Il passaggio in corso, il tempo, «riparte tra poco», «Leggi il passo nel testo» */
.rv-ora { grid-area: ora; min-width: 0; padding-top: 12px; }
.rv-ora p { margin: 0; }
.rv-ora-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font: 400 .8125rem/1.5 var(--rv-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--rv-oro-chiaro); min-height: 22px; }
.rv-tempo { color: var(--rv-tenue); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.rv-attesa { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-left: 24px; letter-spacing: .04em; text-transform: none; font: 400 .8125rem/1.4 var(--rv-testo); color: var(--rv-tenue); opacity: 0; transition: opacity .3s ease; }
.rv-attesa .rv-anello { width: 16px; height: 16px; left: 8px; margin: -8px 0 0 -8px; }
.rv-attesa .rv-anello circle { stroke-width: 3; }
.rv.rv-in-attesa .rv-attesa { opacity: 1; }
.rv-ora-t { margin-top: 2px !important; font: italic 600 clamp(1.45rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--rv-titoli); color: var(--rv-bianco); text-wrap: balance; }
.rv-leggi {
  grid-area: leggi; align-self: center; justify-self: end; margin-top: 12px;
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 20px; border-radius: 999px;
  border: 1px solid rgba(243, 210, 139, .45); background: rgba(217, 164, 65, .07); color: var(--rv-oro-chiaro);
  font: 500 .9375rem/1.2 var(--rv-testo); cursor: pointer; white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.rv-leggi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .rv-leggi:hover { border-color: var(--rv-oro-chiaro); background: rgba(217, 164, 65, .14); color: var(--rv-bianco); }
}
.rv-leggi:active { transform: scale(.97); }
.rv-leggi:focus-visible { outline: 2px solid var(--rv-oro-chiaro); outline-offset: 3px; }

/* Sotto il film (telefono): i nomi degli ingredienti a cascata, poi la didascalia di ogni passaggio */
.rv-sotto { grid-area: sotto; display: none; min-width: 0; }
.rv-sotto p { margin: 0; }
.rv-sotto-voci { display: none; flex-wrap: wrap; gap: 4px 12px; font: 400 .875rem/1.45 var(--rv-testo); color: var(--rv-crema); }
.rv-sotto-voce { opacity: .38; transition: opacity .3s ease; }
.rv-sotto-voce b { font: 600 .875rem/1 var(--rv-mono); color: var(--rv-oro); margin-right: 1px; }
.rv-sotto-voce.rv-su { opacity: 1; }
.rv-sotto-frase {
  display: none; padding-left: 14px; border-left: 2px solid var(--rv-oro);
  font: italic 600 1.3rem/1.2 var(--rv-titoli); color: var(--rv-bianco); opacity: 0; transition: opacity .3s ease;
}
.rv-sotto-frase.rv-su { opacity: 1; }
.rv-sotto-tutte { display: none; margin: 0; padding: 0; list-style: none; gap: 8px; }
.rv-sotto-tutte li { display: flex; gap: 12px; align-items: baseline; margin: 0; padding: 0; font: 400 1rem/1.45 var(--rv-testo); color: #DCCFBE; }
.rv-sotto-tutte li::before { content: none; }
.rv-sotto-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(243, 210, 139, .4); font: 600 .75rem/1 var(--rv-mono); color: var(--rv-oro); }
.rv-sotto-tutte li.rv-qui { color: var(--rv-bianco); }
.rv-sotto-tutte li.rv-qui .rv-sotto-n { background: var(--rv-oro); color: #17110a; border-color: var(--rv-oro); }
/* telefono: numeri sul film, nomi e didascalie qui sotto */
.rv[data-rv-spiega="sotto"] .rv-sotto { display: block; min-height: 64px; padding: 12px 0 6px; }
.rv[data-rv-spiega="sotto"][data-rv-capitolo="0"] .rv-sotto-voci { display: flex; }
.rv[data-rv-spiega="sotto"]:not([data-rv-capitolo="0"]) .rv-sotto-frase { display: block; }
.rv[data-rv-spiega="sotto"] .rv-targa, .rv[data-rv-spiega="sotto"] .rv-frase { display: none; }
.rv[data-rv-spiega="sotto"] .rv-segno::before { display: none; }
.rv[data-rv-spiega="sotto"] .rv-segno-n {
  display: grid; place-items: center; position: absolute; left: -12px; top: -28px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--rv-oro); color: #17110a; font: 700 .875rem/1 var(--rv-mono); box-shadow: 0 0 0 2px rgba(7, 8, 12, .6), 0 4px 10px rgba(0, 0, 0, .5);
}
/* il numero sta appena sopra l'oggetto (o alla sua sinistra), così non lo copre */
.rv[data-rv-spiega="sotto"] .rv-lato-sinistra .rv-segno-n { left: -28px; top: -12px; }
/* sul telefono, durante gli ingredienti la nota «Generato con l'IA» coprirebbe il pentolino:
   si nasconde un attimo (la frase intera resta nel piede del lettore) */
.rv-nota-sopra { transition: opacity .3s ease; }
.rv[data-rv-spiega="sotto"][data-rv-capitolo="0"] .rv-nota-sopra { opacity: 0; }
.rv[data-rv-spiega="sotto"] .rv-segno.rv-ultima .rv-segno-n { box-shadow: 0 0 0 2px rgba(7, 8, 12, .6), 0 0 0 5px rgba(243, 210, 139, .35), 0 0 14px rgba(243, 210, 139, .9); }
/* meno movimento: tutte le didascalie insieme sotto il film */
.rv.rv-poco-moto .rv-sotto { display: block; padding: 8px 0 10px; }
.rv.rv-poco-moto .rv-sotto-tutte { display: grid; }
.rv.rv-poco-moto .rv-sotto-frase, .rv.rv-poco-moto .rv-frase { display: none !important; }
.rv.rv-poco-moto[data-rv-spiega="sotto"] .rv-sotto-voci { display: none; }

/* L'elenco completo «Ingredienti e attrezzi» (si illumina voce per voce all'inizio del film) */
.rv-elenco { grid-area: elenco; margin-top: 16px; padding-top: 18px; border-top: 1px solid rgba(243, 210, 139, .14); min-width: 0; }
.rv-elenco p { margin: 0; }
.rv-elenco-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-bottom: 14px; }
.rv-elenco-titolo { font: italic 600 clamp(1.5rem, 1.2rem + .8vw, 1.85rem)/1.1 var(--rv-titoli); color: var(--rv-bianco); }
.rv-carte { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.rv-carte div { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(243, 210, 139, .26); background: rgba(217, 164, 65, .05); }
.rv-carte dt { font: 400 .6875rem/1.3 var(--rv-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rv-oro); }
.rv-carte dd { margin: 0; font: 500 .875rem/1.3 var(--rv-testo); color: var(--rv-bianco); }
.rv-elenco-colonne { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4px 34px; }
.rv-elenco-sotto { font: 400 .6875rem/1.4 var(--rv-mono) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--rv-oro); margin: 4px 0 6px !important; }
.rv-elenco-voci { margin: 0; padding: 0; list-style: none; }
.rv-elenco-voce { position: relative; margin: 0 0 2px; padding: 7px 10px 8px 46px; border-radius: 12px; transition: background-color .35s ease; }
.rv-elenco-voce::before { content: none; }
.rv-ev-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.rv-ev-n {
  position: absolute; left: 10px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(243, 210, 139, .4); font: 600 .75rem/1 var(--rv-mono); color: var(--rv-oro);
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.rv-ev-nome { font: 500 .9375rem/1.4 var(--rv-testo); color: var(--rv-crema); }
.rv-ev-dose { font: 600 .8125rem/1.4 var(--rv-mono); color: var(--rv-oro-chiaro); letter-spacing: .03em; }
.rv-ev-nota { font: 300 .875rem/1.45 var(--rv-testo); color: var(--rv-tenue); margin-top: 1px !important; }
.rv-elenco-voce.rv-acceso .rv-ev-n { background: var(--rv-oro); border-color: var(--rv-oro); color: #17110a; }
.rv-elenco-voce.rv-adesso { background: rgba(217, 164, 65, .11); }
.rv-elenco-voce.rv-adesso .rv-ev-n { box-shadow: 0 0 14px rgba(217, 164, 65, .7); }

.rv-piede { grid-area: piede; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.rv-aiuto { margin: 0; font: 400 .875rem/1.5 var(--rv-testo); color: var(--rv-tenue); }

/* ---------- Telefono e tablet stretto: film da bordo a bordo, barra comoda col pollice ---------- */
@media (max-width: 760px) {
  .rv { padding-inline: 0; }
  .rv-cornice { width: 100%; border-radius: 0; box-shadow: 0 -1px 0 rgba(243, 210, 139, .22), 0 1px 0 rgba(243, 210, 139, .22), var(--rv-ombra); }
  .rv-pannello {
    grid-template-columns: minmax(0, 1fr);
    /* la barra subito sotto il film: le scritte che cambiano altezza stanno dopo, così la barra non si sposta mai sotto il dito */
    grid-template-areas: "binario" "sotto" "ora" "leggi" "elenco" "piede";
    padding: 6px 16px 18px;
  }
  .rv-ora { padding-top: 6px; }
  .rv-ora-t { font-size: 1.4rem; }
  .rv-barra { height: 48px; }
  .rv-segmento { height: 5px; }
  .rv-leggi { justify-self: start; margin-top: 12px; }
  .rv-elenco-colonne { grid-template-columns: minmax(0, 1fr); }
  .rv-elenco-voce { padding-left: 42px; }
  .rv-ev-n { left: 6px; }
  .rv-aiuto { font-size: .875rem; }
}

/* =====================================================================
   NEL TESTO DI CARLO: il passo illuminato e il bottone «Guarda questo passaggio»
   (colori che funzionano sia sulla pagina scura sia su quella chiara)
   ===================================================================== */
.rv-testo {
  --rv-filo: #D9A441; --rv-filo-chiaro: #F3D28B; --rv-numero: #F3D28B;
  --rv-alone: rgba(217, 164, 65, .5); --rv-traccia: rgba(243, 210, 139, .16);
  --rv-titoli: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --rv-testo: Poppins, 'Segoe UI', system-ui, sans-serif;
  --rv-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --rv-entra: cubic-bezier(.22, 1, .36, 1);
}
.rv-testo[data-rv-tema="chiaro"] {
  --rv-filo: #A8741C; --rv-filo-chiaro: #D19B3E; --rv-numero: #85550F;
  --rv-alone: rgba(168, 116, 28, .3); --rv-traccia: rgba(133, 85, 15, .13);
}
/* La cornice del passo occupa tutta la larghezza; dentro, la colonna resta quella del testo */
.rv-testo .tratto > .rv-passo:not(.rv-passo-tratto) { max-width: none; margin-inline: 0; }
/* (foto, gallerie, tabelle e video tengono le loro regole, es. da bordo a bordo sul telefono) */
.rv-passo > :not(.rv-filo, figure, .galleria, .tabella, .video, .capitolo) { max-width: var(--misura, 42.5rem); margin-inline: auto; }
.rv-passo { position: relative; }
.rv-testo .rv-ancora { scroll-margin-top: calc(var(--alto, 68px) + 28px); }

/* Il titolo del passo («3 Gli spaghetti entrano crudi»): il numero in un cerchio */
.rv-testo p.rv-passo-titolo {
  display: flex; align-items: center; gap: .55em; margin-top: 1.9em; margin-bottom: .5em;
  font: 600 clamp(1.4rem, 1.15rem + .75vw, 1.75rem)/1.2 var(--titoli, var(--rv-titoli)); text-wrap: balance;
}
.rv-testo p.rv-passo-titolo:focus { outline: none; }
.rv-testo p.rv-passo-titolo:focus-visible { outline: 2px solid var(--rv-filo); outline-offset: 6px; }
.rv-testo .rv-passo-titolo > :is(strong, b):first-child {
  flex: none; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  border: 1px solid var(--rv-filo); color: var(--rv-numero); font: italic 600 .92em/1 var(--titoli, var(--rv-titoli));
  transition: background-color .45s ease, color .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.rv-passo.rv-acceso .rv-passo-titolo > :is(strong, b):first-child {
  background: var(--rv-filo); border-color: var(--rv-filo); color: #17110a;
  box-shadow: 0 0 0 5px var(--rv-traccia), 0 0 24px var(--rv-alone);
}
.rv-testo[data-rv-tema="chiaro"] .rv-passo.rv-acceso .rv-passo-titolo > :is(strong, b):first-child { color: #FFF8F2; }

/* Il filo d'oro: si accende accanto al passo che il film sta mostrando e si riempie con il passaggio */
.rv-filo {
  position: absolute; top: .4em; bottom: .6em; width: 2px; border-radius: 2px; pointer-events: none;
  left: calc(max(0px, (100% - var(--misura, 42.5rem)) / 2) - clamp(13px, 2.6vw, 32px));
  background: var(--rv-traccia); opacity: 0; transition: opacity .6s ease;
}
.rv-filo::before {
  content: ""; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; margin-left: -4px;
  background: var(--rv-filo); transform: rotate(45deg); box-shadow: 0 0 12px var(--rv-alone);
}
.rv-filo-pieno {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 0; transform: scaleY(0);
  background: linear-gradient(180deg, var(--rv-filo-chiaro), var(--rv-filo)); box-shadow: 0 0 14px var(--rv-alone);
}
.rv-passo.rv-acceso > .rv-filo { opacity: 1; }

/* «▶ Guarda questo passaggio»: un piccolo biglietto del cinema, scuro su ogni pagina */
.rv-testo .rv-guarda-riga { margin-top: -.1em; margin-bottom: 1.35em; }
.rv-guarda {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; max-width: 100%; padding: 5px 20px 5px 5px;
  border-radius: 999px; border: 1px solid rgba(243, 210, 139, .4); cursor: pointer; text-align: left;
  background: linear-gradient(135deg, #161a26, #0b0d14); color: #F3E9DC;
  font: 500 .9375rem/1.25 var(--rv-testo); letter-spacing: .005em;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .2s ease, box-shadow .25s ease, transform .16s var(--rv-entra);
}
.rv-guarda-mini { position: relative; flex: none; width: 66px; height: 38px; border-radius: 999px; overflow: hidden; background: #1c2030; }
.rv-guarda-mini img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; box-shadow: none; }
.rv-guarda-mini::after { content: ""; position: absolute; inset: 0; background: rgba(7, 8, 12, .32); }
.rv-guarda-mini svg { position: absolute; z-index: 1; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -7px; fill: #F3D28B; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.rv-guarda-t { min-width: 0; white-space: nowrap; }
.rv-guarda.rv-ora { border-color: #D9A441; box-shadow: 0 0 0 4px rgba(217, 164, 65, .16), 0 14px 30px -18px rgba(0, 0, 0, .75); }
.rv-guarda:active { transform: scale(.97); }
.rv-guarda:focus-visible { outline: 2px solid var(--rv-filo); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rv-guarda:hover { border-color: #F3D28B; box-shadow: 0 0 0 4px rgba(217, 164, 65, .14), 0 18px 34px -18px rgba(0, 0, 0, .8); }
}

/* ---------- Meno movimento: niente entrate in profondità, niente scivolamenti ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv-cornice { animation: rvDissolvenza .5s ease both; }
  .rv-segmento, .rv-cursore, .rv-targa, .rv-frase, .rv-segno, .rv-sotto-voce, .rv-sotto-frase, .rv-elenco-voce, .rv-ev-n { transition: none; }
  .rv-targa, .rv-frase { translate: 0 0 !important; }
  .rv.rv-trascina .rv-segmento, .rv-barra:hover .rv-segmento { transform: none; }
}
@keyframes rvDissolvenza { from { opacity: 0; } }

/* ---------- Stampa: resta il testo ---------- */
@media print {
  .rv, .rv-guarda-riga, .rv-filo { display: none !important; }
}