/*
 * Lotto G: la home con la grafica nuova (e, dal passo 5.4, /vendi).
 *
 * Il foglio entra in pagina solo sulla home e solo con la grafica nuova
 * (shop/g/home/stylesheets.html.twig), dopo rivendimi.css e rivendimi-g.css:
 * ne usa i gettoni (--rv-*), i caratteri e le classi comuni (rv-wrap, rv-sq,
 * rv-ic, rv-occhiello, rv-lnk). Ogni passo del piano aggiunge una sezione
 * "=== passo N: ... ===". L'ultima e' quella del passo M.
 *
 * Le classi sono quelle del mockup con il prefisso rv-; le regole globali del
 * mockup (a{color:inherit}, body{margin:0}, scroll-padding-top) non si
 * portano. Nessun url(): immagini e video passano da asset() nei template
 * (?v=, Cloudflare). Le transizioni e le animazioni valgono sempre, anche
 * con "Riduci movimento" acceso sul dispositivo (decisione del committente
 * del 21/10, piano §6, passo M): fino al passo M stavano dentro
 * @media (prefers-reduced-motion: no-preference).
 */

/* === passo 3.1: apertura, pannello di ricerca, striscia per chi vende === */

/* --- Pulsanti --------------------------------------------------------- */

/*
 * I pulsanti del mockup: alti almeno 48 px, maiuscoletto spaziato, angoli
 * vivi. Il nero al passaggio entra in diagonale da sinistra (solo con il
 * mouse).
 */
.rv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--rv-font-testo);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .07em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    background-size: 300% 100%;
    background-position: 100% 0;
}

.rv-btn-ink {
    background-color: var(--rv-ink);
    background-image: linear-gradient(104deg, var(--rv-ink-passaggio) 0 45%, var(--rv-ink) 55% 100%);
    color: #fff;
}

.rv-btn-ink:hover,
.rv-btn-ink:focus {
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .rv-btn:hover {
        background-position: 0 0;
    }
}

/* --- Apertura ---------------------------------------------------------- */

/*
 * Il video (o l'immagine ferma) a tutta larghezza, con la velatura scura a
 * sinistra e in basso; sopra, il testo bianco e il pannello di ricerca, che
 * scavalca il fondo di 72 px. L'immagine ferma e il video stanno nello
 * stesso riquadro al pixel: il video copre l'immagine solo quando gira
 * (rv-video-on, dallo script).
 */
.rv-apertura {
    position: relative;
    padding-top: clamp(36px, 6vh, 72px);
    color: #fff;
}

.rv-apertura-media {
    position: absolute;
    inset: 0 0 72px 0;
    overflow: hidden;
    background: var(--rv-night);
}

.rv-apertura-poster,
.rv-apertura-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.rv-apertura-video {
    background: transparent;
    opacity: 0;
}

.rv-video-on .rv-apertura-video {
    opacity: 1;
}

.rv-apertura-velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 12, 16, .66) 0%, rgba(8, 12, 16, .48) 45%, rgba(8, 12, 16, .18) 75%, rgba(8, 12, 16, .05) 100%),
        linear-gradient(0deg, rgba(8, 12, 16, .5) 0%, rgba(8, 12, 16, 0) 45%);
}

/*
 * Il pulsante di pausa del video, 44x44, in alto a destra sopra il video.
 * Il fondo dietro e' il video, che cambia: il contorno di fuoco e' bianco
 * sopra un anello ink del pulsante, come quello del collegamento per
 * saltare (rilievo R2a-1), e si vede qualunque cosa ci sia dietro.
 */
.rv-apertura-pausa {
    --rv-fuoco: #fff;
}

.rv-apertura-pausa {
    position: absolute;
    top: 16px;
    right: var(--rv-gut);
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(11, 13, 16, .55);
    color: #fff;
}

.rv-apertura-pausa:hover {
    background: rgba(11, 13, 16, .8);
}

.rv-apertura-pausa:focus-visible {
    outline: 2px solid var(--rv-fuoco);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--rv-ink);
}

.rv-apertura-pausa .rv-se-fermo,
.rv-apertura-pausa.rv-fermata .rv-se-gira {
    display: none;
}

.rv-apertura-pausa.rv-fermata .rv-se-fermo {
    display: block;
}

.rv-apertura-in {
    position: relative;
    z-index: 1;
}

.rv-apertura-testo {
    max-width: 760px;
    padding-bottom: 36px;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .25);
}

/*
 * L'occhiello lascia libero l'angolo del pulsante del video (rilievo
 * R31-1). Il pulsante sta in alto a destra, alla stessa altezza
 * dell'occhiello, e con il fuoco ha l'anello di 6 px: a 320 px la fine
 * della riga passava sotto il pulsante, e l'anello copriva la "I" di
 * "NUOVI". A destra l'occhiello tiene 56 px (44 del pulsante, 6
 * dell'anello, 6 di aria): dove non ci sta, va a capo su due righe pari.
 * Vale con ogni testo e ogni carattere, ed e' fisso: il pulsante compare
 * dopo il load, e lo spazio che si aprisse allora sposterebbe la pagina.
 * L'H1 comincia gia' sotto l'anello: almeno 36 px di margine sopra, 19,6
 * dell'occhiello e 12 sotto fanno 67,6, contro i 16 + 44 + 6 = 66 del
 * pulsante con l'anello.
 */
.rv-apertura-occhiello {
    margin-bottom: 12px;
    padding-right: 56px;
    color: #fff;
    text-wrap: balance;
}

/* L'H1 della home in Orbitron 800 (D6), il primo dei titoli della home. */
.rv-apertura-h1 {
    margin: 0;
    color: #fff;
    font-family: var(--rv-font-titoli);
    font-size: clamp(32px, calc(21.6px + 2.667vw), 60px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.rv-apertura-lead {
    max-width: 640px;
    margin: 16px 0 0;
    font-size: clamp(17px, calc(15.6px + .42vw), 21px);
    line-height: 1.45;
}

/* --- Pannello di ricerca ------------------------------------------------ */

/*
 * Veicolo e codice affiancati (S4), con "oppure" in mezzo, da 1280 px in su;
 * sotto, uno sopra l'altro. Senza la striscia delle linguette del mockup.
 * Le tre tendine del veicolo hanno la stessa larghezza: con 3/4/5 la marca
 * si tagliava a 1280 ("Seleziona la ...", difetto del mockup).
 * Il mockup affiancava le due ricerche fino a 1101 px: con i testi veri, fra
 * 1101 e 1279 px "Scegli prima il modello" e il segnaposto del codice si
 * tagliavano (le tendine larghe 128-164 px, il testo 155-163; il campo del
 * codice 142-196, il segnaposto 180). Da 768 a 900 px la versione va sotto
 * marca e modello, per la stessa ragione.
 */
.rv-pannello {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 8fr) auto minmax(0, 4fr);
    gap: 28px;
    align-items: start;
    padding: 24px 28px 26px;
    background: #fff;
    color: var(--rv-ink);
    box-shadow: 0 18px 50px rgba(11, 13, 16, .2);
    text-shadow: none;
}

.rv-pannello-t {
    margin: 0;
    color: var(--rv-ink);
    font-family: var(--rv-font-titoli);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.rv-pannello-aiuto {
    margin: 4px 0 14px;
    color: var(--rv-ink2);
    font-size: 15px;
    line-height: 1.45;
}

.rv-pv-campi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.rv-fld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rv-fld label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.rv-selw {
    position: relative;
    min-width: 0;
}

.rv-selw select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--rv-campo);
    border-radius: 0;
    background: #fff;
    color: var(--rv-ink);
    font-family: var(--rv-font-testo);
    font-size: 16px;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.rv-selw select:disabled {
    background: var(--rv-surf);
    color: var(--rv-meta);
    cursor: not-allowed;
}

.rv-selw .rv-ic {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -8px;
    pointer-events: none;
}

.rv-pv-piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}

.rv-scelta {
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
    color: var(--rv-ink2);
    font-size: 15px;
    line-height: 1.45;
}

.rv-scelta b {
    color: var(--rv-ink);
    font-weight: 600;
}

.rv-oppure {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 10px;
    color: var(--rv-meta);
    font-size: 14px;
}

.rv-oppure::before,
.rv-oppure::after {
    content: "";
    flex: 1;
    width: 1px;
    background: var(--rv-line);
}

.rv-pc-riga {
    display: flex;
    gap: 8px;
}

.rv-inp {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--rv-campo);
    border-radius: 0;
    background: #fff;
    color: var(--rv-ink);
    font-family: var(--rv-font-codice);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .02em;
}

.rv-inp::placeholder {
    color: var(--rv-meta);
    opacity: 1;
}

/* Il campo di testo mostra il contorno a ogni fuoco, anche col mouse: si
   vede dove si sta scrivendo (passo 1b). */
.rv-inp:focus {
    border-color: var(--rv-ink);
    outline: 2px solid var(--rv-fuoco);
    outline-offset: 2px;
}

.rv-norm {
    margin: 8px 0 0;
    color: var(--rv-ink2);
    font-size: 15px;
    line-height: 1.45;
}

.rv-norm code {
    padding: 2px 6px;
    background: var(--rv-surf);
    color: var(--rv-ink);
    font-family: var(--rv-font-codice);
    font-size: .94em;
    font-weight: 500;
}

/* --- Striscia per chi vende --------------------------------------------- */

/* Fascia B del mockup: grigio chiaro, il quadratino rosso prima del titolo,
   il pulsante doppio nero. */
.rv-striscia {
    margin-top: 40px;
    background: var(--rv-surf);
    color: var(--rv-ink);
}

.rv-striscia-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 84px;
    padding-block: 14px;
}

.rv-striscia-testo {
    max-width: 880px;
}

.rv-striscia-t {
    margin: 0;
    font-family: var(--rv-font-titoli);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.rv-striscia-t::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 12px;
    background: var(--rv-red);
    vertical-align: .12em;
}

.rv-striscia-s {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.5;
}

.rv-striscia-invito {
    margin: 8px 0 0;
}

.rv-duo {
    display: inline-flex;
    flex: none;
    align-items: stretch;
    border: 1px solid var(--rv-ink);
    color: var(--rv-ink);
    text-decoration: none;
}

.rv-duo:hover {
    color: var(--rv-ink);
}

.rv-duo span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rv-duo .rv-duo-a {
    background: var(--rv-ink);
    color: #fff;
}

.rv-duo .rv-duo-b {
    background-image: linear-gradient(104deg, var(--rv-ink) 0 45%, transparent 55% 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
}

@media (hover: hover) and (pointer: fine) {
    .rv-duo:hover .rv-duo-b {
        background-position: 0 0;
        color: #fff;
    }
}

/* --- Larghezze ------------------------------------------------------------ */

@media (max-width: 1279px) {
    .rv-pannello {
        grid-template-columns: minmax(0, 1fr);
    }

    .rv-oppure {
        flex-direction: row;
    }

    .rv-oppure::before,
    .rv-oppure::after {
        width: auto;
        height: 1px;
    }
}

@media (max-width: 1023px) {
    .rv-striscia-in {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 900px) {
    .rv-pv-campi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rv-pv-campi > :last-child {
        grid-column: 1 / -1;
    }
}

/*
 * Al telefono: video e immagine ferma 4:5 in alto (i file 720x900), sotto il
 * fondo notte; i campi uno sotto l'altro e i pulsanti a tutta larghezza. Il
 * campo del codice resta alto 48 px: nel mockup, in colonna, flex:1 lo
 * schiacciava a 23.
 */
@media (max-width: 767px) {
    .rv-apertura-media {
        bottom: 40px;
    }

    .rv-apertura-poster,
    .rv-apertura-video {
        bottom: auto;
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .rv-apertura-testo {
        padding-bottom: 28px;
    }

    .rv-pannello {
        gap: 18px;
        padding: 20px;
        box-shadow: 0 12px 30px rgba(11, 13, 16, .18);
    }

    .rv-pv-campi {
        grid-template-columns: minmax(0, 1fr);
    }

    .rv-pc-riga {
        flex-direction: column;
    }

    .rv-inp {
        flex: none;
    }

    .rv-pv-piede .rv-btn,
    .rv-pc-riga .rv-btn {
        width: 100%;
    }

    .rv-striscia {
        margin-top: 28px;
    }

    .rv-duo {
        align-self: stretch;
    }

    .rv-duo span {
        flex: 1;
        justify-content: center;
        padding: 0 12px;
    }
}

/* Le transizioni (piano §6: dal passo M sempre). */
.rv-btn,
.rv-duo .rv-duo-b {
    transition: background-position .4s ease-out, color .4s ease, border-color .4s ease;
}

.rv-apertura-video {
    transition: opacity .6s ease;
}

/* === passo 3.2: categorie e nastro dei fatti =========================== */

/*
 * Le cinque tessere rotonde delle categorie (shop/g/home/categorie.html.twig)
 * e il nastro scuro dei fatti (shop/g/home/nastro.html.twig). Da qui in poi
 * le sezioni della home hanno la stessa testa: un H2 in Orbitron (D6,
 * SEO-03), la riga sotto e il collegamento a destra.
 */
:root {
    /* La distanza fra le sezioni della home (--gap del mockup): 84 px a
       1280, 64 al telefono. */
    --rv-gap: clamp(64px, 6.6vw, 96px);
}

.rv-sez {
    margin-top: var(--rv-gap);
}

.rv-sez-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 32px;
}

/* Il titolo delle sezioni della home: il livello d4 del mockup. */
.rv-sez-t {
    margin: 0;
    color: var(--rv-ink);
    font-family: var(--rv-font-titoli);
    font-size: clamp(21px, calc(18.03px + .762vw), 29px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.01em;
}

.rv-sez-s {
    max-width: 60ch;
    margin: 8px 0 0;
    color: var(--rv-ink2);
}

/* --- Categorie ----------------------------------------------------------- */

/*
 * Da 1024 px in su cinque colonne; sotto, una fila che scorre di lato e si
 * ferma su ogni tessera (sotto, "Larghezze").
 */
.rv-cats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* La tessera e' un collegamento a blocco: Chromium disegna il contorno di
   fuoco intorno a tutta la tessera (con un collegamento in linea, e dei
   blocchi dentro, non lo disegnerebbe). */
.rv-cat > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--rv-ink);
    text-align: center;
    text-decoration: none;
}

.rv-cat > a:hover {
    color: var(--rv-ink);
}

.rv-cat-fw {
    position: relative;
    display: block;
    width: min(200px, 100%);
}

/* Il cerchio grigio: l'unico angolo tondo della sezione, ed e' un cerchio. */
.rv-cat-fig {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--rv-surf);
    overflow: hidden;
}

.rv-cat > a:focus-visible .rv-cat-fig {
    background: var(--rv-surf2);
}

.rv-cat-il {
    display: block;
    width: 70%;
    height: 70%;
}

/* Il tratto delle illustrazioni: nero, con il dettaglio nel rosso del
   logo. */
.rv-il,
.rv-il-r,
.rv-il-bar {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rv-il {
    stroke: var(--rv-ink);
    stroke-width: 2.6;
}

.rv-il-r {
    stroke: var(--rv-red);
    stroke-width: 2.6;
}

.rv-il-bar {
    stroke: var(--rv-ink);
    stroke-width: 11;
}

.rv-il-rf {
    fill: var(--rv-red);
    stroke: none;
}

.rv-il-f {
    fill: var(--rv-ink);
    stroke: none;
}

/* L'etichetta nera sul cerchio: le sottocategorie in vendita. */
.rv-chip {
    position: absolute;
    top: -8px;
    left: -8px;
    padding: 7px 9px;
    background: var(--rv-night);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Il nome della categoria, un H3 in Orbitron (D6), il livello d6 del
   mockup. Va a capo anche dentro una parola lunga: in una tessera stretta
   "Attrezzatura" non deve uscire. */
.rv-cat-t {
    max-width: 100%;
    margin: 20px 0 6px;
    font-family: var(--rv-font-titoli);
    font-size: clamp(17px, calc(15.51px + .381vw), 21px);
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
}

.rv-cat-testo {
    max-width: 24ch;
    margin: 0 0 10px;
    color: var(--rv-ink2);
    font-size: 14px;
    line-height: 1.45;
}

/* "Vedi la categoria" e la freccia stanno su una riga anche nella tessera
   piu' stretta (136 px): 111 px di testo, 6 di spazio, 16 di freccia. */
.rv-cat-vedi {
    gap: 6px;
    font-size: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .rv-cat > a:hover .rv-cat-fig {
        background: var(--rv-surf2);
    }
}

/* --- Nastro dei fatti ------------------------------------------------------ */

/*
 * Una fascia scura (la sfumatura notte del mockup). Nell'HTML e senza
 * script e' un elenco fermo, centrato, che va a capo (nel mockup restava
 * una fetta tagliata): senza script non c'e' il pulsante di pausa, e
 * niente scorre. Lo script della home accende rv-gira, anche con "Riduci
 * movimento" acceso (passo M): allora le voci stanno su una riga e
 * scorrono (sotto).
 *
 * Il pulsante di pausa e' l'ultimo elemento della fascia, fuori dalla
 * striscia che scorre: il testo non gli passa mai sotto.
 */
.rv-nastro {
    --rv-fuoco: #fff;
}

.rv-nastro {
    display: flex;
    align-items: center;
    margin-top: var(--rv-gap);
    background: linear-gradient(56deg, var(--rv-night) 8%, #262B33 64%);
    color: #fff;
}

.rv-nastro-vista {
    flex: 1;
    min-width: 0;
}

.rv-nastro-g {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 12px 40px;
    margin: 0;
    padding: 24px var(--rv-gut);
    list-style: none;
}

.rv-nastro-doppia {
    display: none;
}

.rv-nastro-i {
    text-align: center;
}

/* Il rombo rosso prima di ogni voce: fra una voce e l'altra, anche dove la
   serie ricomincia. */
.rv-nastro-i::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 20px;
    background: var(--rv-red);
    transform: rotate(45deg);
    vertical-align: .12em;
}

.rv-nastro-i b {
    font-family: var(--rv-font-titoli);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.rv-nastro-i span {
    color: #C9CDD4;
    font-size: 20px;
}

/* Il pulsante di pausa, 44x44 come quello del video (piano §6). Lo mostra
   lo script, solo quando il nastro scorre. */
.rv-nastro-pausa {
    width: 44px;
    height: 44px;
    margin-inline: 8px var(--rv-gut);
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(11, 13, 16, .75);
    color: #fff;
}

.rv-nastro-pausa:hover {
    background: var(--rv-night);
}

.rv-nastro-pausa .rv-se-fermo,
.rv-nastro-pausa.rv-fermata .rv-se-gira {
    display: none;
}

.rv-nastro-pausa.rv-fermata .rv-se-fermo {
    display: block;
}

/* --- Larghezze ------------------------------------------------------------ */

/*
 * Sotto i 1024 px le tessere sono una fila che scorre di lato e si ferma su
 * ogni tessera. La fila arriva ai bordi dello schermo e la prima tessera
 * comincia al margine della pagina; a 400 px se ne vedono due e mezza (la
 * meta' dice che la fila continua), e la tessera resta fra 136 e 220 px. Il
 * margine sopra e sotto tiene l'etichetta (8 px fuori dal cerchio) e il
 * contorno di fuoco (4 px fuori dalla tessera) dentro la fila, che li
 * taglierebbe.
 */
@media (max-width: 1023px) {
    .rv-cats {
        display: flex;
        gap: 16px;
        margin-inline: calc(-1 * var(--rv-gut));
        padding: 8px var(--rv-gut);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: var(--rv-gut);
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .rv-cat {
        flex: 0 0 clamp(136px, calc((100% + var(--rv-gut) - 32px) / 2.5), 220px);
        scroll-snap-align: start;
    }
}

@media (max-width: 767px) {
    .rv-nastro-i b {
        font-size: 22px;
    }

    .rv-nastro-i span {
        font-size: 16px;
    }
}

/*
 * Il movimento (piano §6: dal passo M sempre, anche con "Riduci
 * movimento"): le transizioni delle tessere e il nastro che scorre. Il nastro scorre solo
 * con rv-gira, che accende lo script insieme al pulsante di pausa: senza
 * script resta l'elenco fermo, e niente si muove senza una pausa a portata
 * di mano (WCAG 2.2.2). Si ferma con il pulsante (rv-fermo) e, finche' il
 * pulsante non si usa, anche al passaggio del mouse e quando il fuoco e' sul
 * pulsante. Dopo il primo uso lo script accende rv-scelto e decide solo il
 * pulsante (rilievo R32-2): il pulsante premuto tiene il fuoco, e al dito
 * anche il passaggio, e "Fai scorrere il nastro" lasciava il nastro fermo.
 * La serie e' doppia: a meta' del giro la seconda e' dove era la prima, e
 * il giro ricomincia senza salto.
 */
.rv-cat-fig {
    transition: background-color .3s ease;
}

.rv-cat-il {
    transition: transform .4s cubic-bezier(.38, .41, .27, 1);
}

.rv-nastro.rv-gira .rv-nastro-vista {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.rv-nastro.rv-gira .rv-nastro-binario {
    display: flex;
    width: max-content;
    animation: rv-nastro 60s linear infinite;
}

.rv-nastro.rv-gira .rv-nastro-g,
.rv-nastro.rv-gira .rv-nastro-doppia {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 48px;
    height: 96px;
    padding: 0 48px 0 0;
}

.rv-nastro.rv-gira .rv-nastro-i {
    white-space: nowrap;
}

.rv-nastro:not(.rv-scelto):hover .rv-nastro-binario,
.rv-nastro:not(.rv-scelto):focus-within .rv-nastro-binario,
.rv-nastro.rv-fermo .rv-nastro-binario {
    animation-play-state: paused;
}

@keyframes rv-nastro {
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    .rv-nastro.rv-gira .rv-nastro-g,
    .rv-nastro.rv-gira .rv-nastro-doppia {
        gap: 32px;
        height: 72px;
        padding-right: 32px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .rv-cat > a:hover .rv-cat-il {
        transform: scale(1.03);
    }
}

/* === passo 3.3: mosaico "Pezzi che possono ancora servire" ============== */

/*
 * Quattro tessere (shop/g/home/mosaico.html.twig), ognuna un collegamento
 * intero: il riuso (la foto con il riquadro rosso), le due ricerche (le
 * tendine finte, la targhetta del codice) e i fondi di magazzino (fascia
 * grigia B, riquadro nero). Da 1024 px in su la griglia 4x2 del mockup: il
 * riuso a sinistra su due righe, le ricerche in alto a destra, i fondi di
 * magazzino sotto; sotto i 1024 px una colonna.
 *
 * I riquadri "Riuso" e "Nuovi" stanno nel flusso, in cima alla tessera
 * (margin-bottom: auto), non sopra il testo: la tessera cresce con il
 * contenuto e il riquadro non copre mai titolo e testo. Nel mockup erano in
 * posizione assoluta, e a 400 px, con la tessera del riuso in 4:3, il
 * riquadro copriva le prime righe.
 *
 * Il fuoco e' il contorno ink di sempre: sta fuori dalla tessera, sul
 * bianco della pagina, anche intorno alle due tessere scure (il mockup lo
 * faceva bianco su tutte le .dk, cioe' bianco sul bianco).
 */
.rv-mos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* La tessera e' un collegamento a blocco (flex): Chromium disegna il
   contorno di fuoco intorno a tutta la tessera. --rv-pad e' il margine
   interno, che serve anche alla sfumatura sotto il testo del riuso. */
.rv-tile {
    --rv-pad: 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    padding: var(--rv-pad);
    text-decoration: none;
}

.rv-tile:hover {
    text-decoration: none;
}

.rv-tile-corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* I due titoli (H3) e i titoli delle ricerche (paragrafi, MOS-06 e
   MOS-07): Orbitron (D6), il livello d6 del mockup. */
.rv-tile-t {
    margin: 0;
    color: inherit;
    font-family: var(--rv-font-titoli);
    font-size: clamp(17px, calc(15.51px + .381vw), 21px);
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.rv-tile-testo {
    max-width: 44ch;
    margin: 0;
}

/* "Vedi i ricambi in vendita" e gli altri: il colore della tessera; al
   passaggio sulla tessera la sottolineatura si ingrossa, come sul
   collegamento da solo. Un blocco con la freccia in linea: quando va a capo
   ("Hai fondi di magazzino? Vendi su Rivendimi" al telefono) la freccia
   segue l'ultima parola (.rv-lnk-coda, qui sotto), invece di restare sul
   bordo destro della tessera. */
.rv-tile .rv-lnk,
.rv-tile .rv-lnk:hover {
    display: block;
    color: inherit;
    font-size: 15px;
}

.rv-tile .rv-lnk .rv-ic {
    margin-left: 6px;
}

/* L'ultima parola e la freccia (la macro riga() di _mosaico.html.twig):
   fra un testo e uno svg in linea il browser puo' andare a capo, e a
   396-416 px la freccia di "Hai fondi di magazzino? Vendi su Rivendimi"
   restava da sola sulla riga sotto (rilievo R33-1). Cosi' la riga va a capo
   solo fra le parole, e la freccia scende con l'ultima. */
.rv-tile .rv-lnk-coda {
    white-space: nowrap;
}

.rv-tile:hover .rv-lnk {
    text-decoration-thickness: 2px;
}

/* I riquadri "Ricambi usati / Riuso" e "Fondi di magazzino / Nuovi". */
.rv-tile-riquadro {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 6px;
    max-width: 100%;
    margin-bottom: auto;
    padding: 16px 20px;
    color: #fff;
}

.rv-tile-riquadro small {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.rv-tile-riquadro b {
    font-family: var(--rv-font-titoli);
    font-size: 80px;
    font-weight: 800;
    line-height: .9;
    text-transform: uppercase;
}

/* Il rosso pieno del logo: il bianco ci fa 5,2:1 (TokenContrastTest). */
.rv-tile-riquadro-rosso {
    background: var(--rv-red);
}

.rv-tile-riquadro-nero {
    background: var(--rv-ink);
}

/* --- Il riuso ------------------------------------------------------------ */

.rv-t1 {
    --rv-pad: 36px;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    min-height: 560px;
    overflow: hidden;
    background: var(--rv-night);
    color: #fff;
}

.rv-t1:hover {
    color: #fff;
}

.rv-t1-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

/* La velatura del mockup: scura in basso, quasi niente in alto. */
.rv-t1-velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 12, 16, .9) 0%, rgba(8, 12, 16, .45) 50%, rgba(8, 12, 16, .05) 100%);
}

.rv-t1 > .rv-tile-riquadro {
    position: relative;
}

/*
 * Il testo bianco sta sempre su una sfumatura sua, che parte 72 px sopra il
 * titolo e arriva ai bordi della tessera: almeno 0,8 di notte sotto ogni
 * riga, qualunque punto della foto ci sia dietro (il cofano chiaro della
 * ventola) e quanto alta sia la tessera. Nel mockup il testo stava sulla
 * sola velatura, che a meta' tessera e' 0,45: con la tessera bassa del
 * telefono le prime righe finivano sul chiaro. I 72 px sopra il titolo
 * lasciano vedere la foto anche quando la tessera e' alta quanto il
 * contenuto.
 */
.rv-t1 > .rv-tile-corpo {
    position: relative;
    z-index: 1;
    margin-top: 72px;
}

.rv-t1 > .rv-tile-corpo::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -72px calc(-1 * var(--rv-pad)) calc(-1 * var(--rv-pad));
    background: linear-gradient(180deg, rgba(8, 12, 16, 0) 0, rgba(8, 12, 16, .8) 72px, rgba(8, 12, 16, .8) 100%);
}

/* Il titolo del riuso: il livello d4, come i titoli delle sezioni. */
.rv-t1-t {
    font-size: clamp(21px, calc(18.03px + .762vw), 29px);
    line-height: 1.28;
    letter-spacing: -.01em;
}

/* --- Le due ricerche ------------------------------------------------------ */

.rv-t2 {
    grid-column: 3;
    grid-row: 1;
    border: 1px solid var(--rv-ink);
    background: #fff;
    color: var(--rv-ink);
}

.rv-t2:hover {
    color: var(--rv-ink);
}

.rv-t3 {
    container-type: inline-size;
    grid-column: 4;
    grid-row: 1;
    background: var(--rv-night);
    color: #fff;
}

.rv-t3:hover {
    color: #fff;
}

/*
 * Le proporzioni del mockup (16:15) come altezza minima, calcolata sulla
 * larghezza della colonna (100cqw e' la larghezza della griglia, meno i tre
 * spazi da 24 px, diviso quattro): se il contenuto non ci sta (con una
 * riga in piu' nel titolo) la tessera cresce, e le due tessere della riga
 * restano alte uguali. Con aspect-ratio no: la tessera che il contenuto
 * allungava diventava piu' alta dell'altra, e allungata anche l'altra
 * diventava piu' larga della sua colonna. Un browser senza le unita' cq
 * tiene l'altezza del contenuto.
 */
.rv-mos {
    container-type: inline-size;
}

.rv-t2,
.rv-t3 {
    min-height: calc((100cqw - 72px) / 4 * 15 / 16);
}

/* Le tre tendine finte del veicolo: solo disegnate (aria-hidden). */
.rv-tendine {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: auto;
}

.rv-tendine span {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--rv-line);
    color: var(--rv-ink2);
    font-size: 14px;
}

.rv-tendine i {
    display: grid;
    flex: none;
    place-items: center;
    width: 20px;
    height: 20px;
    background: var(--rv-ink);
    color: #fff;
    font-family: var(--rv-font-titoli);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.rv-tendine .rv-ic {
    margin-left: auto;
}

/*
 * La targhetta del codice, in JetBrains Mono, su una riga. Il corpo del
 * mockup (da 18 a 24 px con la finestra), ma mai piu' largo della tessera:
 * fra 1024 e 1100 px la tessera e' larga 159-177 px dentro i margini, e a
 * 18 px "1K0 615 301 AA" (14 caratteri da 0,62 em) piu' i 28 px del margine
 * interno ne voleva 180. 100cqw e' la larghezza dentro la tessera (.rv-t3 e'
 * un contenitore); un browser senza le unita' cq tiene il corpo del
 * mockup.
 */
.rv-targhetta {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 6px;
    max-width: 100%;
    margin-bottom: auto;
}

.rv-targhetta small {
    color: #C9CDD4;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rv-targhetta b {
    padding: 12px 14px;
    background: var(--rv-surf);
    color: var(--rv-ink);
    font-family: var(--rv-font-codice);
    font-size: clamp(18px, 1.6vw, 24px);
    font-size: min(clamp(18px, 1.6vw, 24px), calc((100cqw - 28px) / 9));
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* --- I fondi di magazzino (fascia grigia B) ------------------------------ */

.rv-t4 {
    grid-column: 3 / 5;
    grid-row: 2;
    min-height: 360px;
    background: var(--rv-surf);
    color: var(--rv-ink);
}

.rv-t4:hover {
    color: var(--rv-ink);
}

.rv-t4 .rv-tile-riquadro b {
    font-size: 52px;
}

/* --- Larghezze ------------------------------------------------------------ */

/*
 * Sotto i 1024 px una colonna: ogni tessera alta quanto il contenuto, con il
 * riquadro in cima e il testo sotto (mai sovrapposti); il riuso tiene 72 px
 * di foto fra il riquadro e il titolo.
 */
@media (max-width: 1023px) {
    .rv-mos {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .rv-tile,
    .rv-t1 {
        --rv-pad: 24px;
        gap: 24px;
        grid-column: auto;
        grid-row: auto;
        min-height: 0;
    }


    .rv-tile-riquadro {
        padding: 12px 16px;
    }

    .rv-tile-riquadro b {
        font-size: 52px;
    }

    .rv-t4 .rv-tile-riquadro b {
        font-size: 40px;
    }
}

/*
 * Il movimento (piano §6: dal passo M sempre): al passaggio del mouse la
 * foto del riuso cresce del 3% (0,4 s), come nel mockup.
 */
.rv-t1-foto {
    transition: transform .4s cubic-bezier(.38, .41, .27, 1);
}

@media (hover: hover) and (pointer: fine) {
    .rv-t1:hover .rv-t1-foto {
        transform: scale(1.03);
    }
}

/* === passo 3.4: riquadro degli annunci e ricerca per marca ============== */

/*
 * Il riquadro "Come sono fatti gli annunci" (shop/g/home/annunci.html.twig):
 * la fascia grigia B del mockup, da sola, perche' il carosello degli ultimi
 * annunci non c'e' (D1). Nel mockup era una colonna di 350 px accanto al
 * carosello; da solo, da 1024 px in su, e' una fascia a due colonne:
 * l'icona, l'occhiello e il titolo a sinistra, il testo e il pulsante nero a
 * destra, allineati in basso. Sotto i 1024 px una colonna.
 */
.rv-ann {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px 48px;
    align-items: end;
    padding: 32px 40px;
    background: var(--rv-surf);
    color: var(--rv-ink);
}

.rv-ann-testa {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

/* L'etichetta rossa del mockup (decorativa, aria-hidden). */
.rv-ann-ic {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    color: var(--rv-red);
    stroke-width: 1.6;
}

/* L'occhiello delle fasce B: ink, non rosso (nel mockup .sub senza colore). */
.rv-ann-occhiello {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Il titolo va a capo in righe pari ("Che pezzo è, e / da dove viene",
   come nel mockup), non con "viene" da solo sulla seconda. */
.rv-ann .rv-sez-t {
    text-wrap: balance;
}

.rv-ann-corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    min-width: 0;
}

.rv-ann-testo {
    max-width: 60ch;
    margin: 0;
}

/*
 * "Cerca i ricambi per marca" (shop/g/home/marche.html.twig). Il titolo e' il
 * livello d3 del mockup, un gradino sopra gli altri titoli della home.
 */
.rv-sez-t-grande {
    font-size: clamp(24px, calc(19.91px + 1.048vw), 35px);
    line-height: 1.25;
}

.rv-marche-hd {
    align-items: flex-start;
}

/* I tre contatori: ogni cifra nel suo riquadro rosso, l'etichetta sotto.
   Un solo rosso, quello del logo (S2: il mockup ne usava uno piu' scuro), e angoli
   vivi (passo 1b: il mockup li arrotondava di 4 px). Il bianco sul rosso fa
   5,2:1 (TokenContrastTest). */
.rv-contatori {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rv-ctr {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rv-cifre {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.rv-cifra,
.rv-cifra-punto {
    font-family: var(--rv-font-titoli);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.rv-cifra {
    display: grid;
    place-items: center;
    width: 44px;
    height: 56px;
    background: var(--rv-red);
    color: #fff;
}

.rv-cifra-punto {
    width: 8px;
    color: var(--rv-red);
}

.rv-ctr-l {
    max-width: 22ch;
    color: var(--rv-ink2);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Le marche: collegamenti alla ricerca per veicolo, alti 44 px. */
.rv-marche-elenco {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.rv-marca,
.rv-marche-tutte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--rv-line);
    border-radius: 0;
    background: #fff;
    color: var(--rv-ink);
    font-family: var(--rv-font-testo);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.rv-marca:hover {
    color: var(--rv-ink);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .rv-marca:hover,
    .rv-marche-tutte:hover {
        border-color: var(--rv-ink);
        background: var(--rv-surf);
    }
}

/* "Mostra tutte le marche (25)": serve solo al telefono, e lo mostra lo
   script (senza JavaScript le marche si vedono tutte). Il testo sta al
   centro del pulsante: nel mockup stava in alto. */
.rv-marche-tutte {
    display: none;
    margin-top: 16px;
    cursor: pointer;
}

/* La nota sulle motorizzazioni che mancano (MAR-04), con l'icona "i". */
.rv-marche-nota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 70ch;
    margin: 24px 0 0;
    color: var(--rv-ink2);
    font-size: 15px;
    line-height: 1.5;
}

.rv-marche-nota .rv-ic {
    margin-top: 1px;
}

/* --- Larghezze ------------------------------------------------------------ */

@media (max-width: 1023px) {
    .rv-ann {
        grid-template-columns: minmax(0, 1fr);
        padding: 32px 24px;
    }
}

/*
 * Al telefono i contatori vanno in colonna, con le cifre del mockup (34x42),
 * e delle marche si vedono le prime dieci finche' non si preme "Mostra tutte
 * le marche": lo script mette rv-chiuse sull'elenco e mostra il pulsante.
 */
@media (max-width: 767px) {
    .rv-contatori {
        flex-direction: column;
    }

    .rv-cifra {
        width: 34px;
        height: 42px;
    }

    .rv-cifra,
    .rv-cifra-punto {
        font-size: 24px;
    }

    .rv-marche-elenco.rv-chiuse .rv-marca-x {
        display: none;
    }

    .rv-marche-tutte:not([hidden]) {
        display: inline-flex;
    }
}

/* Il bordo e il fondo cambiano al passaggio in 0,2 s, come nel mockup. */
.rv-marca,
.rv-marche-tutte {
    transition: border-color .2s, background-color .2s;
}

/* === passo 3.5: come si compra, video del piazzale, come si vende ======= */

/*
 * Tre sezioni, una dopo l'altra, sotto la ricerca per marca:
 * - "Come si compra" (shop/g/home/come_si_compra.html.twig): il riquadro
 *   bianco con i tre passi sopra la foto del banco; al telefono la foto e'
 *   una fascia in cima e il riquadro sta sotto, sul grigio;
 * - il piazzale (piazzale.html.twig): il testo centrato sopra il video, con
 *   la velatura; al telefono solo l'immagine ferma;
 * - "Come si vende" (come_si_vende.html.twig): tre schede a foto piena.
 *   Nell'HTML sono una fila che scorre di lato (cosi' senza script e al
 *   telefono); fuori dal telefono lo script ne fa una presentazione
 *   (rv-ss-attiva), una scheda alla volta con i pallini e il giro ogni 6
 *   secondi, con il suo pulsante di pausa.
 * Per il video e la presentazione il telefono lo decide lo script (TELEFONO
 * in rivendimi-g-home.js): sotto i 768 px, ma anche girato in orizzontale
 * (rilievo R35-1). Il foglio guarda solo la larghezza: un telefono girato
 * ha la fila alta 600 px, come da 768 px, con la scheda dopo in parte.
 * Il piazzale e le schede sono scuri: li' il contorno di fuoco e' bianco.
 */

/* Il titolo d2 del mockup ("Come si compra", "Come si vende"), un gradino
   sopra le altre sezioni della home. */
.rv-sez-t-d2 {
    font-size: clamp(26px, calc(20.43px + 1.429vw), 41px);
    line-height: 1.25;
}

/* --- Pulsanti -------------------------------------------------------------- */

/*
 * Tre varianti del pulsante della home, angoli vivi e riempimento in
 * diagonale al passaggio come il nero (passo 3.1):
 * - rv-btn-bordo: bordo e testo ink, al passaggio pieno ink con il testo
 *   bianco ("Come funziona nel dettaglio"). Il mockup lo faceva rosso
 *   scuro: sul sito i pulsanti sono neri (passo 1b), e il rosso resta un
 *   accento;
 * - rv-btn-bianco: bianco con il testo ink sui fondi scuri, al passaggio il
 *   grigio surf2, come il pulsante del riquadro scuro di oggi;
 * - rv-btn-bordo-bianco: bordo e testo bianchi sui fondi scuri ("Vuoi
 *   entrare nel test?", dal passo 6), al passaggio pieno bianco con il testo
 *   ink.
 */
.rv-btn-bordo {
    border-color: var(--rv-ink);
    background-color: transparent;
    background-image: linear-gradient(104deg, var(--rv-ink) 0 45%, transparent 55% 100%);
    color: var(--rv-ink);
}

.rv-btn-bordo:hover,
.rv-btn-bordo:focus {
    color: var(--rv-ink);
}

.rv-btn-bianco {
    background-color: #fff;
    background-image: linear-gradient(104deg, var(--rv-surf2) 0 45%, #fff 55% 100%);
    color: var(--rv-ink);
}

.rv-btn-bianco:hover,
.rv-btn-bianco:focus {
    color: var(--rv-ink);
}

.rv-btn-bordo-bianco {
    border-color: #fff;
    background-color: transparent;
    background-image: linear-gradient(104deg, #fff 0 45%, transparent 55% 100%);
    color: #fff;
}

.rv-btn-bordo-bianco:hover,
.rv-btn-bordo-bianco:focus {
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .rv-btn-bordo:hover {
        color: #fff;
    }

    .rv-btn-bordo-bianco:hover {
        color: var(--rv-ink);
    }
}

/* --- Come si compra -------------------------------------------------------- */

/*
 * Da 768 px: la foto del banco a tutta larghezza (piu' alta della sezione
 * del 16%, per la parallasse), sopra il riquadro bianco largo al massimo
 * 600 px. I numeri dei passi nel rosso del logo (S2: il mockup usava un
 * secondo rosso), angoli vivi; il bianco sul rosso fa 5,2:1.
 *
 * La foto sta in un fondo suo (.rv-compra-fondo), che taglia quel che ne
 * esce con overflow: clip, non hidden: hidden ne fa un contenitore che
 * scorre, e la parallasse (animation-timeline: view()) seguirebbe quello,
 * che non scorre mai, invece della pagina (nel mockup la foto restava
 * ferma). Dove clip non c'e' vale hidden, e li' non c'e' nemmeno la
 * parallasse. Il fondo non ha testo: la sezione non taglia niente.
 */
.rv-compra {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 680px;
    margin-top: var(--rv-gap);
    background: var(--rv-night);
}

.rv-compra-fondo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    overflow: clip;
}

.rv-compra-foto {
    position: absolute;
    top: -8%;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 116%;
    object-fit: cover;
}

.rv-compra-in {
    position: relative;
    width: 100%;
}

.rv-compra-box {
    max-width: 600px;
    margin-block: 64px;
    padding: 48px;
    background: #fff;
    color: var(--rv-ink);
}

.rv-compra-box .rv-occhiello {
    margin-bottom: 12px;
}

.rv-passo {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.rv-passo-n {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--rv-red);
    color: #fff;
    font-family: var(--rv-font-titoli);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

/* I titoli dei passi (H3): Orbitron (D6), il livello d6 del mockup. */
.rv-passo-t {
    margin: 2px 0 6px;
    color: var(--rv-ink);
    font-family: var(--rv-font-titoli);
    font-size: clamp(17px, calc(15.51px + .381vw), 21px);
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.rv-passo-testo {
    margin: 0;
    color: var(--rv-ink2);
}

/* La riga della contestazione, con lo scudo (decorativo). */
.rv-compra-scudo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rv-line);
    color: var(--rv-ink2);
    font-size: 15px;
    line-height: 1.5;
}

.rv-compra-scudo .rv-ic {
    margin-top: 1px;
}

.rv-compra-box .rv-btn {
    margin-top: 28px;
}

/* --- Piazzale -------------------------------------------------------------- */

/*
 * Il video (o l'immagine ferma) a tutta larghezza, con la velatura del
 * mockup (0,58, piu' scura al centro), e sopra il testo centrato. Il video
 * copre l'immagine ferma solo quando gira (rv-video-on, dallo script). Il
 * pulsante di pausa sta in basso a destra, nei 72 px sotto il testo: non ci
 * passa sopra. Fondo che cambia: contorno bianco sopra un anello ink, come
 * il pulsante del video dell'apertura.
 */
.rv-piazzale {
    --rv-fuoco: #fff;
}

.rv-piazzale {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(520px, 70svh, 680px);
    margin-top: var(--rv-gap);
    overflow: hidden;
    background: var(--rv-night);
    color: #fff;
    text-align: center;
}

.rv-piazzale-media {
    position: absolute;
    inset: 0;
}

.rv-piazzale-poster,
.rv-piazzale-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.rv-piazzale-video {
    background: transparent;
    opacity: 0;
}

.rv-piazzale.rv-video-on .rv-piazzale-video {
    opacity: 1;
}

.rv-piazzale-velo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 60% at 50% 50%, rgba(8, 12, 16, .25) 0%, rgba(8, 12, 16, 0) 100%),
        rgba(8, 12, 16, .58);
}

.rv-piazzale-in {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 900px;
    padding-block: 72px;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .3);
}

.rv-piazzale-occhiello {
    color: #fff;
    text-wrap: balance;
}

/* L'H2 della sezione: Orbitron (D6), il livello d1 del mockup. */
.rv-piazzale-t {
    margin: 0;
    color: #fff;
    font-family: var(--rv-font-titoli);
    font-size: clamp(29px, calc(21.2px + 2vw), 50px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.rv-piazzale-testo {
    max-width: 680px;
    margin: 0;
    font-size: clamp(17px, calc(15.6px + .42vw), 21px);
    line-height: 1.45;
}

.rv-piazzale-nota {
    max-width: 760px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.rv-piazzale-pulsanti {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    text-shadow: none;
}

.rv-piazzale-pausa {
    position: absolute;
    right: var(--rv-gut);
    bottom: 20px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(11, 13, 16, .55);
    color: #fff;
}

.rv-piazzale-pausa:hover {
    background: rgba(11, 13, 16, .8);
}

.rv-piazzale-pausa:focus-visible {
    outline: 2px solid var(--rv-fuoco);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--rv-ink);
}

.rv-piazzale-pausa .rv-se-fermo,
.rv-piazzale-pausa.rv-fermata .rv-se-gira {
    display: none;
}

.rv-piazzale-pausa.rv-fermata .rv-se-fermo {
    display: block;
}

/* --- Come si vende ---------------------------------------------------------- */

/*
 * La fila (nell'HTML, senza script e al telefono): ogni scheda e' larga
 * quanto la pagina meno 40 px, cosi' la successiva si vede in parte e dice
 * che la fila continua; si ferma su ogni scheda. Testo in basso, velatura
 * dal basso. Alta almeno 520 px, 600 da 768: quanto la presentazione,
 * quindi quando lo script la accende la pagina non si sposta. La barra di
 * scorrimento non c'e' (come nel mockup): la sua altezza cambierebbe
 * l'altezza della fila al passaggio alla presentazione.
 *
 * Il testo bianco sta sulla foto: il bianco fa 4,5:1 solo se dietro la
 * velatura e' almeno 0,56, anche sul pixel piu' chiaro (le foto hanno parti
 * quasi bianche, come la ventola delle cataste di motori). La velatura del
 * mockup a meta' scheda era 0,45 (dal basso) e, nella presentazione, 0,12-0,55
 * sotto la fine delle righe. Qui:
 * - nella fila il testo ha una sfumatura sua, come il riuso del mosaico
 *   (passo 3.3): 0,88 in fondo, almeno 0,7 fino alla cima del testo, e poi a
 *   zero in 72 px; il numero "01 / 03" (#C9CDD4) ci fa almeno 4,8:1;
 * - nella presentazione la velatura da sinistra e' almeno 0,62 fino a
 *   700 px, dove finiscono le righe (64 px di margine e al massimo 572 di
 *   testo), e scende a 0,12 solo dopo.
 */
.rv-ss {
    --rv-fuoco: #fff;
}

.rv-ss {
    position: relative;
}

.rv-ss-schede {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.rv-ss-schede::-webkit-scrollbar {
    display: none;
}

.rv-ss-scheda {
    position: relative;
    display: flex;
    flex: 0 0 calc(100% - 40px);
    align-items: flex-end;
    min-height: 520px;
    overflow: hidden;
    background: var(--rv-night);
    color: #fff;
    scroll-snap-align: start;
}

.rv-ss-foto {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.rv-ss-velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 12, 16, .88) 0%, rgba(8, 12, 16, .45) 60%, rgba(8, 12, 16, .15) 100%);
}

.rv-ss-testo {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 24px 24px 32px;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .3);
}

.rv-ss-testo::before {
    content: "";
    position: absolute;
    inset: -72px 0 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(8, 12, 16, .88) 0%, rgba(8, 12, 16, .7) calc(100% - 72px), rgba(8, 12, 16, 0) 100%);
    pointer-events: none;
}

/* "01 / 03": nascosto ai lettori, che sentono "1 di 3" dalla scheda. */
.rv-ss-n {
    color: #C9CDD4;
    font-family: var(--rv-font-codice);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

/* I titoli delle schede (H3): Orbitron (D6), il livello d2 del mockup. */
.rv-ss-t,
.rv-ss-p {
    max-width: 572px;
}

.rv-ss-t {
    margin: 0;
    color: #fff;
    font-family: var(--rv-font-titoli);
    font-size: clamp(26px, calc(20.43px + 1.429vw), 41px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.rv-ss-p {
    margin: 0;
    font-size: clamp(17px, calc(15.6px + .42vw), 20px);
    line-height: 1.5;
}

.rv-ss-testo .rv-btn {
    text-shadow: none;
}

/*
 * La presentazione (rv-ss-attiva, dallo script, solo fuori dal telefono):
 * le schede stanno tutte nella stessa cella di griglia, quindi la
 * presentazione e' alta quanto la scheda piu' lunga e cambiare scheda non
 * sposta la pagina; si vede quella corrente (rv-on), le altre sono
 * trasparenti, inert e aria-hidden. Velatura da sinistra, testo a sinistra
 * al centro, i comandi in basso a sinistra nei 96 px sotto il testo.
 */
.rv-ss-attiva .rv-ss-schede {
    display: grid;
    gap: 0;
    overflow: hidden;
    scroll-snap-type: none;
}

.rv-ss-attiva .rv-ss-scheda {
    grid-area: 1 / 1;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
}

.rv-ss-attiva .rv-ss-scheda.rv-on {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

.rv-ss-attiva .rv-ss-velo {
    background: linear-gradient(90deg, rgba(8, 12, 16, .82) 0, rgba(8, 12, 16, .62) 700px, rgba(8, 12, 16, .12) 100%);
}

.rv-ss-attiva .rv-ss-testo {
    justify-content: center;
    padding: 64px 64px 96px;
}

.rv-ss-attiva .rv-ss-testo::before {
    display: none;
}

.rv-ss-cmd {
    position: absolute;
    left: 32px;
    bottom: 24px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
}

.rv-ss-punto {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
}

.rv-ss-punto svg {
    width: 22px;
    height: 22px;
    transform: rotate(-90deg);
}

.rv-ss-traccia,
.rv-ss-anello {
    fill: none;
    stroke-width: 2;
}

.rv-ss-traccia {
    stroke: rgba(255, 255, 255, .35);
}

/* L'anello del pallino corrente si disegna in 6 s mentre la presentazione
   gira (sotto): la circonferenza e' 2 x pi x 8 = 50,27. */
.rv-ss-anello {
    stroke: #fff;
    stroke-dasharray: 50.27;
    stroke-dashoffset: 50.27;
}

.rv-ss-pip {
    fill: rgba(255, 255, 255, .7);
}

.rv-ss-punto[aria-current="true"] .rv-ss-pip {
    fill: #fff;
}

.rv-ss-pausa {
    width: 44px;
    height: 44px;
    color: #fff;
}

.rv-ss-pausa .rv-se-fermo,
.rv-ss-pausa.rv-fermata .rv-se-gira {
    display: none;
}

.rv-ss-pausa.rv-fermata .rv-se-fermo {
    display: block;
}

/* --- Larghezze ------------------------------------------------------------ */

@media (min-width: 768px) {
    .rv-ss-scheda {
        min-height: 600px;
    }
}

/*
 * Al telefono: la foto del banco e' una fascia alta 220 px in cima, ferma,
 * e il riquadro sta sotto, sul grigio, con i numeri 44x44; il piazzale e'
 * alto almeno 440 px, con i pulsanti uno sotto l'altro a tutta larghezza;
 * le schede hanno il pulsante a tutta larghezza.
 */
@media (max-width: 767px) {
    .rv-compra {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        background: var(--rv-surf);
    }

    .rv-compra-fondo {
        position: relative;
        height: 220px;
    }

    .rv-compra-foto {
        top: 0;
        height: 100%;
    }

    .rv-compra-box {
        max-width: none;
        margin: 0;
        padding: 28px 0 40px;
        background: var(--rv-surf);
    }

    .rv-passo {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 16px;
    }

    .rv-passo-n {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

    .rv-piazzale {
        min-height: max(440px, 64svh);
    }

    .rv-piazzale-pulsanti {
        flex-direction: column;
        align-self: stretch;
    }

    .rv-piazzale-pulsanti .rv-btn,
    .rv-ss-testo .rv-btn {
        width: 100%;
    }
}

/*
 * Il movimento (piano §6: dal passo M sempre, anche con "Riduci
 * movimento"):
 * - la parallasse della foto di "Come si compra", da 768 px e solo dove il
 *   browser sa legare un'animazione allo scorrimento (animation-timeline:
 *   view()); altrove la foto sta ferma;
 * - nella presentazione la scheda entra da destra ed esce a sinistra in
 *   0,6 s, il testo sale di 24 px, e l'anello del pallino corrente si
 *   disegna in 6 s mentre gira (rv-gira, dallo script);
 * - il video del piazzale compare sopra l'immagine ferma in 0,6 s.
 */
@media (min-width: 768px) {
    @supports (animation-timeline: view()) {
        .rv-compra-foto {
            animation: rv-parallasse linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}

@keyframes rv-parallasse {
    from {
        transform: translateY(-6%) scale(1.12);
    }

    to {
        transform: translateY(6%) scale(1.12);
    }
}

.rv-piazzale-video {
    transition: opacity .6s ease;
}

.rv-ss-attiva .rv-ss-scheda {
    transform: translateX(120px);
    transition: transform .6s cubic-bezier(.215, .61, .355, 1), opacity .6s cubic-bezier(.215, .61, .355, 1);
}

.rv-ss-attiva .rv-ss-scheda.rv-on {
    transform: none;
}

.rv-ss-attiva .rv-ss-scheda.rv-off {
    transform: translateX(-60px);
}

/* Il testo sale di 24 px: si spostano le righe, non il blocco del
   testo, che e' alto quanto la scheda e ne uscirebbe (la scheda lo
   taglierebbe, e conterebbe come testo tagliato). Le righe stanno nei
   96 px di margine sotto. */
.rv-ss-attiva .rv-ss-testo > * {
    opacity: 0;
    transform: translateY(24px);
    transition: transform 1s cubic-bezier(.165, .84, .44, 1), opacity .3s ease-out;
}

.rv-ss-attiva .rv-on .rv-ss-testo > * {
    opacity: 1;
    transform: none;
    transition: transform 1s cubic-bezier(.165, .84, .44, 1), opacity .7s ease-out .3s;
}

.rv-ss.rv-gira .rv-ss-punto[aria-current="true"] .rv-ss-anello {
    animation: rv-anello 6s linear forwards;
}

@keyframes rv-anello {
    to {
        stroke-dashoffset: 0;
    }
}

/* === passo 3.6: fasce, regole, striscia del codice ===================== */

/*
 * Le ultime tre sezioni della home, sotto "Come si vende":
 * - le fasce per chi vende (shop/g/home/fasce.html.twig), il prezzario
 *   chiaro del mockup: fondo bianco con un filo sopra, quattro schede
 *   confrontabili, i segnali positivi in verde (S3: #187A48, 4,8:1 sul suo
 *   fondo). Da 1100 px quattro in fila, sotto due per due, sotto i 480 una
 *   per riga. L'interruttore mensile/annuale dice quale prezzo e' quello
 *   grande; l'altro resta scritto sotto, con lo script e senza (rv-mese,
 *   rv-anno): cosi' le schede non cambiano altezza quando lo script parte;
 * - le regole (regole.html.twig) sul grigio surf: tre colonne da 1024 px,
 *   due sotto, una sotto i 768 con un filo fra le regole;
 * - la striscia "Hai il codice del pezzo?" (striscia_codice.html.twig),
 *   fascia grigia B con il quadratino rosso, come la striscia per chi vende.
 *   Viene subito dopo le regole, sullo stesso grigio: la separa un filo.
 * Il riquadro per chi vende di oggi non c'e' piu' con la grafica nuova (la
 * guardia su homepage/venditori.html.twig): via anche la regola del passo
 * 3.5 che gli dava lo spazio sopra.
 */

/* --- Fasce -------------------------------------------------------------- */

.rv-fasce {
    margin-top: var(--rv-gap);
    padding-block: var(--rv-gap);
    border-top: 1px solid var(--rv-line);
    background: #fff;
    color: var(--rv-ink);
}

.rv-fasce-testa {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px 64px;
    align-items: end;
}

/* L'occhiello grigio del prezzario (.plans .sub del mockup), non rosso. */
.rv-fasce-occhiello {
    margin: 0 0 12px;
    color: var(--rv-ink2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.rv-fasce .rv-sez-t {
    text-wrap: balance;
}

.rv-fasce-testo {
    max-width: 62ch;
    margin: 16px 0 0;
    color: var(--rv-ink2);
    font-size: 18px;
    line-height: 1.5;
}

.rv-fasce-riquadro {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 62ch;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid var(--rv-line);
    background: var(--rv-surf);
}

.rv-fasce-riquadro p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.rv-fasce-riquadro .rv-ok {
    margin-top: 2px;
    color: var(--rv-green);
}

/*
 * L'interruttore: due pulsanti con aria-pressed, quello scelto pieno ink.
 * Tiene il suo posto anche prima dello script, invisibile (senza script non
 * farebbe niente): quando lo script lo accende (rv-fasce-pronte) la pagina
 * non si sposta.
 */
.rv-fasce-periodo {
    display: inline-flex;
    justify-self: end;
    border: 1px solid var(--rv-ink);
    background: #fff;
    visibility: hidden;
}

.rv-fasce-pronte .rv-fasce-periodo {
    visibility: visible;
}

.rv-fasce-periodo button {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--rv-ink);
    font-family: var(--rv-font-testo);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.rv-fasce-periodo button[aria-pressed="true"] {
    background: var(--rv-ink);
    color: #fff;
}

/*
 * Il fuoco sta dentro il pulsante, nel colore del suo testo: ink sul
 * pulsante bianco, bianco su quello pieno ink. Fuori, il contorno ink delle
 * altre pagine cadrebbe per un lato sul pulsante accanto, che puo' essere
 * pieno ink, e li' sparirebbe; sopra e sotto coprirebbe il bordo del gruppo.
 * Come i pulsanti della barra degli avvisi (rilievo R2a-2). Fra il contorno
 * e il testo restano almeno 10 px.
 */
.rv-fasce-periodo button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

.rv-fasce-elenco {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.rv-fascia {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 28px 24px 26px;
    border: 1px solid var(--rv-line);
    background: #fff;
    color: var(--rv-ink);
    container-type: inline-size;
}

.rv-fascia-n {
    margin: 0;
    color: var(--rv-ink);
    font-family: var(--rv-font-titoli);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
}

.rv-fascia-chi {
    min-height: 2.8em;
    margin: 6px 0 0;
    color: var(--rv-ink2);
    font-size: 14px;
    line-height: 1.4;
}

/*
 * Il prezzo, 40 px come nel mockup, ma mai piu' largo della scheda: la
 * misura segue la larghezza della scheda (17cqi, la scheda e' un
 * contenitore). Da 1100 a circa 1250 px le schede sono quattro in fila e
 * strette: "548,90 €", l'annuale della Premium, a 40 px era largo 215 px in
 * 190 e usciva; ora scende fino a 32 px. 40 px dove c'e' posto (da 768 a
 * 1099 e da 1250). Senza le unita' dei contenitori resta 40 px.
 */
.rv-fascia-p {
    margin: 0;
    color: var(--rv-ink);
    font-family: var(--rv-font-titoli);
    font-size: 40px;
    font-size: clamp(24px, 17cqi, 40px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.rv-fascia-per,
.rv-fascia-altro {
    margin: 4px 0 0;
    color: var(--rv-ink2);
    font-size: 14px;
    line-height: 1.4;
}

.rv-fascia-altro {
    margin-top: 6px;
}

/* Il periodo che non e' quello scelto (lo sceglie l'interruttore, sopra). */
.rv-fascia .rv-anno,
.rv-fasce-annuale .rv-fascia .rv-mese {
    display: none;
}

.rv-fasce-annuale .rv-fascia .rv-anno {
    display: inline;
}

/* L'etichetta verde della prova, sul suo fondo (4,8:1). */
.rv-fascia-gratis {
    display: inline-block;
    margin: 10px 0 0;
    padding: 6px 9px;
    background: var(--rv-green-fondo);
    color: var(--rv-green);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.rv-fascia-l {
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--rv-line);
    border-bottom: 1px solid var(--rv-line);
    color: var(--rv-ink2);
    font-size: 15px;
    line-height: 1.4;
}

.rv-fascia-l b {
    display: block;
    margin-bottom: 2px;
    color: var(--rv-ink);
    font-family: var(--rv-font-titoli);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.rv-fascia-voci {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.35;
}

.rv-pf {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.rv-pf .rv-ic {
    margin-top: 2px;
    color: var(--rv-green);
}

.rv-pf-no,
.rv-pf-no .rv-ic {
    color: var(--rv-meta);
}

.rv-fasce-piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;
}

.rv-fasce-piede p {
    max-width: 70ch;
    margin: 0;
    color: var(--rv-ink2);
    font-size: 15px;
}

/* Al passaggio la scheda si stacca: bordo ink e ombra (la salita, sotto). */
@media (hover: hover) and (pointer: fine) {
    .rv-fascia:hover {
        border-color: var(--rv-ink);
        box-shadow: 0 20px 44px rgba(11, 13, 16, .1);
    }
}

/* --- Regole --------------------------------------------------------------- */

.rv-regole {
    margin-top: var(--rv-gap);
    padding-block: var(--rv-gap);
    background: var(--rv-surf);
    color: var(--rv-ink);
}

.rv-regole-elenco {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 48px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.rv-regola {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 16px;
}

.rv-regola-ic {
    width: 32px;
    height: 32px;
    color: var(--rv-red-dk);
    stroke-width: 1.6;
}

.rv-regola-t {
    margin: 2px 0 8px;
    color: var(--rv-ink);
    font-family: var(--rv-font-titoli);
    font-size: clamp(18px, calc(16.9px + .3vw), 22px);
    font-weight: 800;
    line-height: 1.25;
}

.rv-regola p {
    margin: 0;
    color: var(--rv-ink2);
    font-size: 15px;
    line-height: 1.5;
}

.rv-regola-lnk {
    margin-top: 8px;
    font-size: 14px;
}

/* --- Striscia del codice -------------------------------------------------- */

/* Fascia B: grigio surf, il quadratino rosso, campo e pulsante neri. Sullo
   stesso grigio delle regole: il filo sopra le separa. */
.rv-scod {
    border-top: 1px solid var(--rv-line);
    background: var(--rv-surf);
    color: var(--rv-ink);
}

.rv-scod-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 28px;
    padding-block: 24px;
}

.rv-scod-t {
    margin: 0;
    font-family: var(--rv-font-titoli);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.rv-scod-t::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 12px;
    background: var(--rv-red);
    vertical-align: .12em;
}

.rv-scod-s {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.5;
}

.rv-scod-modulo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
}

.rv-scod-campo .rv-inp {
    flex: none;
    width: 360px;
    max-width: 100%;
    border-color: var(--rv-ink);
}

/* "Cercheremo ...": sotto campo e pulsante, sulla sua riga. Il codice sul
   grigio piu' scuro (il grigio della fascia e' quello del codice). */
.rv-scod-norm {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
}

.rv-scod-norm code {
    background: var(--rv-surf2);
}

/* --- Larghezze ------------------------------------------------------------ */

@media (max-width: 1099px) {
    .rv-fasce-testa {
        grid-template-columns: minmax(0, 1fr);
    }

    .rv-fasce-periodo {
        justify-self: start;
    }

    .rv-fasce-elenco {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .rv-regole-elenco {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Al telefono: schede piu' strette (margine 20/16, prezzo 30 px, limite
 * 22 px), il pulsante del piede a tutta larghezza; le regole in colonna con
 * un filo fra l'una e l'altra; la striscia del codice in colonna, a
 * sinistra, con campo e pulsante a tutta larghezza (il campo resta alto
 * 48 px).
 */
@media (max-width: 767px) {
    .rv-fasce-elenco {
        gap: 12px;
    }

    .rv-fascia {
        padding: 20px 16px;
    }

    .rv-fascia-p {
        font-size: 30px;
        font-size: clamp(24px, 17cqi, 30px);
    }

    .rv-fascia-l b {
        font-size: 22px;
    }

    .rv-fascia-voci {
        font-size: 14px;
    }

    .rv-fasce-piede .rv-btn {
        width: 100%;
    }

    .rv-regole-elenco {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .rv-regola {
        padding-block: 20px;
        border-bottom: 1px solid var(--rv-line);
    }

    .rv-scod-in {
        flex-direction: column;
        align-items: stretch;
    }

    .rv-scod-modulo {
        flex-direction: column;
        align-items: stretch;
    }

    .rv-scod-campo .rv-inp {
        width: 100%;
    }

    .rv-scod-norm {
        text-align: left;
    }
}

@media (max-width: 479px) {
    .rv-fasce-elenco {
        grid-template-columns: minmax(0, 1fr);
    }

    .rv-fascia-chi {
        min-height: 0;
    }
}

/*
 * Il movimento (piano §6: dal passo M sempre): la scheda delle fasce sale
 * di 4 px al passaggio (0,4 s, la curva expo del mockup) e l'icona della
 * regola cresce del 12%.
 */
.rv-fascia {
    transition: border-color .3s ease, box-shadow .3s ease, transform .4s var(--rv-e-expo);
}

.rv-regola-ic {
    transition: transform .3s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .rv-fascia:hover {
        transform: translateY(-4px);
    }

    .rv-regola:hover .rv-regola-ic {
        transform: scale(1.12);
    }
}

/* === passo 5.2b: l'interruttore delle fasce fissato al telefono ======= */

/*
 * Decisione del committente del 21/10 ("Selettore prezzi"): al telefono
 * l'interruttore Mensile | Annuale resta in alto, sotto l'intestazione
 * compatta, mentre si scorrono le schede delle fasce, e si stacca quando la
 * sezione finisce. Il telefono e' quello degli script della home (TELEFONO,
 * rilievo R35-1): sotto i 768 px, o con il dito e la finestra alta al
 * massimo 500 px (girato in orizzontale); in tutti e due i casi sotto i
 * 1024 px, dove l'intestazione e' quella del telefono e introduzione e
 * interruttore stanno gia' uno sopra l'altro (sotto i 1100 px).
 *
 * - In alto resta rv-fasce-barra, la fascia bianca larga quanto lo schermo
 *   che porta l'interruttore: le schede scorrono sotto una fascia pulita,
 *   non accanto ai due pulsanti. Sopra e sotto altri 8 px di bianco, fatti
 *   con l'ombra, che non occupa posto.
 * - sticky tiene un elemento dentro il suo contenitore, e l'interruttore
 *   sta nella testa delle fasce, con l'introduzione. Al telefono la testa
 *   non ha una scatola sua (display: contents): il contenitore diventa
 *   .rv-wrap, cioe' testa, schede e piede. Nella testa i due stavano in una
 *   griglia a una colonna con 24 px fra l'uno e l'altro: ora quei 24 px
 *   sono il margine sopra la fascia, e niente si sposta (passo52b.js,
 *   "posto").
 * - Dove si ferma. Fermo in fondo al suo contenitore, un elemento sticky
 *   copre quel che c'e' li', qui il pulsante del piede. Per questo .rv-wrap
 *   finisce con 62 px vuoti (la fascia, 46 px, e 16 px d'aria), presi dal
 *   margine interno in fondo alla sezione, che passa da 64 a 2 px: la
 *   sezione resta alta uguale, e la fascia si posa nel bianco sotto il
 *   piede e se ne va con la sezione.
 * - Sotto quale intestazione. Compatta (scendendo, rv-compatta) e' alta
 *   quanto la riga del menu, del logo e delle icone, 58 px: la misura lo
 *   script della home in --rv-fasce-hd-compatta. Intera (risalendo, o
 *   aperta con la lente) e' alta --rv-hd-visibile meno 8 px: la variabile
 *   la scrive gia' lo script dell'intestazione (passo 2b), e gli 8 px sono
 *   quelli del bianco sopra la fascia. La fascia segue i due stati con top,
 *   che conta solo quando e' ferma in alto, alla velocita' del taglio
 *   dell'intestazione (.35 s). Dove :has non c'e'
 *   resta sotto l'intestazione intera: con la compatta resta uno spazio, ma
 *   la fascia non finisce mai sotto l'intestazione.
 * - Solo con lo script (rv-fasce-pronte): senza, l'interruttore e'
 *   invisibile e non fa niente, e non c'e' niente da tenere in alto. La
 *   testa senza scatola e il posto in fondo valgono anche senza script, e
 *   non spostano niente.
 * - Il pulsante del piede raggiunto con Tab non si ferma sotto la fascia
 *   (WCAG 2.4.11): al suo scroll-margin-top, quello di tutta la pagina
 *   (passo 2b), si aggiungono la fascia e il bianco sotto.
 * - z-index 10: sopra le schede, sotto l'intestazione (1030) e quindi sotto
 *   il menu del telefono, e sotto il carrello laterale.
 */
.rv-fasce-barra {
    display: contents;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) and (max-width: 1023px) {
    .rv-fasce-testa {
        display: contents;
    }

    .rv-fasce-barra {
        display: block;
        margin: 24px calc(-1 * var(--rv-gut)) 0;
        padding-inline: var(--rv-gut);
        background: #fff;
        box-shadow: 0 -8px 0 #fff, 0 8px 0 #fff;
    }

    .rv-fasce-periodo {
        display: flex;
        width: fit-content;
    }

    .rv-fasce > .rv-wrap::after {
        content: "";
        display: block;
        height: 62px;
    }

    .rv-fasce {
        padding-bottom: calc(var(--rv-gap) - 62px);
    }

    .rv-fasce-pronte .rv-fasce-barra {
        position: sticky;
        top: var(--rv-hd-visibile, 125px);
        z-index: 10;
    }

    :root:has(.rv-hd.rv-compatta) .rv-fasce-pronte .rv-fasce-barra {
        top: calc(var(--rv-fasce-hd-compatta, 58px) + 8px);
    }

    .rv-fasce-piede .rv-btn {
        scroll-margin-top: calc(var(--rv-hd-visibile, 125px) + 54px);
    }
}

.rv-fasce-pronte .rv-fasce-barra {
    transition: top .35s var(--rv-e-expo);
}