/* ============================================================================
   Home
   ----------------------------------------------------------------------------
   UNA REGOLA SOPRA TUTTE: il bianco e' il materiale, il colore e' la
   punteggiatura. Le sezioni si alternano — bianco, bianco, colore, bianco —
   e il colore arriva una volta sola nel punto in cui la pagina deve cambiare
   respiro, non a ogni blocco. E' quello che fa sembrare una pagina lunga una
   pagina costruita invece che una pagina riempita.

   IL MOVIMENTO, E PERCHE' NON E' DECORAZIONE
   ------------------------------------------
   Tre tipi, uno per mestiere:

   1. L'ENTRATA. Ogni blocco sale di sedici pixel e si accende quando arriva
      in schermo, con un ritardo progressivo dentro la stessa griglia. Non e'
      per far muovere le cose: e' per dire che sono UN gruppo, e per dare
      all'occhio un ordine di lettura in una griglia che altrimenti si guarda
      a caso.
   2. LA PARALLASSE della fotografia grande, dove il browser la sa fare da
      solo con animation-timeline. Costa zero JavaScript e da' profondita'
      alla prima schermata.
   3. IL NASTRO delle misure. Non si ferma e non chiede niente: dice in un
      secondo "qui ci sono tutte", che e' una frase che nessuno leggerebbe
      se fosse scritta.

   Con prefers-reduced-motion non si muove niente e la pagina resta intera:
   ogni animazione parte da uno stato che e' gia' quello finale.
   ========================================================================= */

/* ── L'entrata, per tutta la pagina ────────────────────────────────────────
   Nasce spenta solo se il JavaScript ha dichiarato di esserci (rt-js): senza,
   la pagina e' visibile e basta. Una pagina che nasce invisibile e aspetta
   uno script e' una pagina bianca ogni volta che lo script non arriva.    */

html.rt-js [data-rt-entra] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 70ms),
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 70ms);
}
html.rt-js [data-rt-entra].e-dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.rt-js [data-rt-entra],
  html.rt-js [data-rt-entra].e-dentro { opacity: 1; transform: none; transition: none; }
}

/* La testata di sezione — .rt-testa — sta in components.css: da quando la
   fascia della carta vive anche fuori dalla home le serve un foglio che si
   carichi dappertutto. Qui restano solo le varianti che usa solo la home. */

/* Titolo a sinistra e pulsante a destra, allineati in basso: il pulsante
   appartiene alla riga del titolo, non alla griglia che segue. */
.rt-testa--riga {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rt-s6);
  max-width: none;
}
@media (max-width: 760px) {
  .rt-testa--riga { display: block; }
  .rt-testa--riga .rt-btn { margin-block-start: var(--rt-s5); }
}

.rt-btn--scuro {
  background: var(--rt-ink);
  color: var(--rt-superficie);
}
.rt-btn--scuro:hover,
.rt-btn--scuro:focus,
.rt-btn--scuro:focus-visible,
.rt-btn--scuro:active { background: var(--rt-ink-2); color: var(--rt-superficie); }

/* ════════════════════════════════════════════════════════════════════════
   1. IL PRIMO SCHERMO
   ----------------------------------------------------------------------------
   A TUTTA LARGHEZZA. Il riquadro arrotondato dentro il contenitore lasciava
   due margini bianchi ai lati e faceva sembrare la prima schermata un
   pannello appoggiato sulla pagina invece della pagina stessa. Qui la
   fascia va da bordo a bordo come la testata, e il contenuto dentro si
   allinea alla testata — stessa colonna del marchio e del carrello.

   A sinistra la promessa e le prove, a destra il prodotto con i suoi due
   bolli incolonnati.

   NIENTE GALLEGGIAMENTO. I rotoli salivano e scendevano di dieci pixel
   ogni nove secondi: un movimento troppo piccolo per essere una scelta e
   troppo visibile per passare inosservato — si legge come un difetto di
   rendering, non come vita. L'unico movimento rimasto e' la parallasse
   che segue il puntatore: risponde a chi guarda, quindi ha un perche'.

   NIENTE PALLINI BLU sulla fotografia. Erano tre bersagli che si aprivano
   solo al passaggio del mouse — invisibili sul telefono, e sul desktop
   indistinguibili da tre bottoni messi li' per sbaglio. Le misure stanno
   gia' nelle pastiglie sotto i bottoni, che si leggono senza doverci
   passare sopra.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-hero {
  padding-block: clamp(0.75rem, 1.6vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--rt-superficie);
}

/* DUE LARGHEZZE DIVERSE, ed e' tutto il punto.

   LO SFONDO va da bordo a bordo del monitor, meno il margine bianco che
   fa vedere gli angoli arrotondati: e' il riquadro, e deve respirare
   quanto lo schermo.

   IL CONTENUTO no. Resta nella colonna del sito — la stessa di tutte le
   sezioni sotto — e si centra dentro il riquadro. Al primo giro avevo
   allargato tutti e due, e su uno schermo grande veniva fuori il
   disastro: i rotoli alti mezzo metro e il testo inchiodato all'angolo
   in alto a sinistra, con due metri di niente in mezzo. Una colonna di
   testo non diventa piu' leggibile perche' lo schermo e' piu' largo:
   diventa solo piu' lontana da se stessa. */
/* LA CARD ESCE DI 8px DALLA COLONNA, non ci sta dentro.
   Il contenuto della hero deve cadere sulla stessa verticale di testata e
   sezioni, cioe' a var(--rt-gutter) dal bordo. Ma fra quel bordo e il
   contenuto ci sono due cose, il margine bianco della card e il suo
   padding: se il margine vale gia' un gutter intero, qualunque padding
   spinge il contenuto piu' dentro e l'allineamento non esiste. Qui i due
   pezzi sommano al gutter: 12 di margine + 8 di padding = 20. */
.rt-hero > .rt-contenitore { max-width: none; padding-inline: var(--rt-s3); }
.rt-eroe__dentro {
  width: 100%;
  /* La colonna del sito TOLTI I SUOI MARGINI: e' la larghezza del
     CONTENUTO di .rt-contenitore, non la sua scatola. Con 1600 netti il
     testo della hero cadeva venti pixel piu' a sinistra delle sezioni
     sotto, e in una pagina che si scorre quei venti pixel si vedono.
     Cosi' invece, su schermo largo, la prima riga del titolo sta sulla
     stessa verticale di tutto il resto: verificato a 1920 e a 2560,
     x=180 e x=500 su tutti e due. */
  max-width: calc(var(--rt-larghezza) - 2 * var(--rt-gutter));
  margin-inline: auto;
}

/* UN OGGETTO SULLA PAGINA, NON UNA FASCIA.
   Per un giro l'avevo fatta andare da bordo a bordo. Misurato sul sito
   vero: la card ha 45 pixel di margine a sinistra E a destra sullo
   schermo del telefono, e gli angoli arrotondati. Senza quel margine il
   bianco della pagina sparisce, e senza il bianco intorno il grigio non
   e' piu' il fondo di un oggetto: e' solo una pagina grigia. E' per
   questo che "lo sfondo di prima era meglio" — non era il grigio a
   essere diverso, era il bianco che gli stava intorno. */
.rt-eroe {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.75rem, 4vw, 4rem);
  /* IL FIANCO DELLA CARD SI CALCOLA, NON SI SCEGLIE.
     E' esattamente quello che serve a far coincidere il contenuto della
     card con la colonna del sito — la stessa di testata e sezioni — e
     cresce da solo con lo schermo. Sotto la larghezza della colonna il
     calcolo diventa negativo e subentra il minimo di 8px, che insieme ai
     12px di margine della card fa il gutter del sito: anche li', dove la
     card e la colonna sono larghe uguali, le verticali coincidono. */
  padding-inline: max(var(--rt-s2), calc((100% - (var(--rt-larghezza) - 2 * var(--rt-gutter))) / 2));
  border-radius: var(--rt-r-2xl);
  /* Il fondale da studio, ricostruito in CSS: vedi --rt-fondo-studio in
     tokens.css, dove c'e' anche come e' stato misurato. */
  background: var(--rt-fondo-studio);
  /* L'ISOLAMENTO STA QUI, non sulla figura.
     Tiene l'ombra della foto e le animazioni d'ingresso dentro un
     contesto di impilamento che ha un fondo opaco sotto: senza, un
     eventuale blend dei figli si calcolerebbe contro il trasparente. */
  isolation: isolate;
}

.rt-eroe__dentro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: center;

  /* La scrive home.js seguendo lo scorrimento, e solo dove non c'e' il
     puntatore. Qui vale zero: senza JavaScript non si muove niente e
     non manca niente. */
  --rt-py: 0;
}

/* ── La colonna di sinistra ────────────────────────────────────────────*/

/* ── Il sigillo ────────────────────────────────────────────────────────
   Era una pastiglia azzurra piena con dentro tre parole: si leggeva come
   un'etichetta decorativa, e una promessa sul prezzo detta con
   un'etichetta decorativa non la crede nessuno.

   Qui ha la forma del bollo di garanzia — fondo bianco, bordo sottile,
   un disco con la spunta — perche' quella forma la gente la riconosce
   prima di leggere le parole. Il disco e' pieno e azzurro: e' l'unica
   cosa colorata, e tiene l'occhio.                                     */

.rt-eroe__sigillo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  /* Il fianco destro e' piu' largo del sinistro perche' a sinistra c'e'
     il disco, che porta gia' il suo spazio: a pari padding la pastiglia
     sembrava sbilanciata a sinistra. */
  padding: var(--rt-s1) var(--rt-s4) var(--rt-s1) var(--rt-s1);
  border: 1px solid color-mix(in srgb, var(--rt-blu) 20%, transparent);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie);
  /* Due ombre: una corta e stretta che stacca il sigillo dal fondo
     grigio della card, una lunga e tenue che gli da' peso. */
  box-shadow:
    0 1px 2px rgba(11, 18, 32, 0.06),
    0 8px 20px -10px color-mix(in srgb, var(--rt-blu) 45%, transparent);
  overflow: hidden;
}

.rt-eroe__sigillo-bollo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--rt-blu);
  color: #fff;
}

.rt-eroe__sigillo-t {
  color: var(--rt-blu-scuro);
  font-size: 0.6875rem;
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
}

/* IL RIFLESSO.
   Una lama di luce che attraversa il sigillo ogni nove secondi e ci mette
   poco piu' di un secondo: il resto del tempo non succede niente. Nove
   secondi e non tre perche' una cosa che si muove spesso, sopra una
   pagina che si legge, smette di essere un dettaglio e diventa un
   disturbo — e perche' il senso e' che l'occhio la incroci una volta,
   non che la guardi.

   Vive in un elemento suo e non in un ::after del sigillo: il sigillo e'
   un flex con dentro il disco e il testo, e un pseudo-elemento ci
   entrerebbe come terza colonna. */
.rt-eroe__sigillo-luce {
  position: absolute;
  inset: 0;
  /* La lama la muove lo SFONDO, non l'elemento.
     Prima era un elemento stretto spinto fuori dal riquadro con
     translateX: funzionava, ma il suo rettangolo finiva a coordinate
     negative — clippato dal sigillo, invisibile, e comunque un oggetto
     fuori dalla pagina. Il collaudo lo segnalava, e aveva ragione: una
     scatola fuori dallo schermo e' una scatola fuori dallo schermo,
     anche quando non si vede. Qui la scatola non si muove: scorre la
     posizione di un gradiente largo il triplo. */
  background-image: linear-gradient(100deg,
    transparent 42%,
    color-mix(in srgb, var(--rt-blu) 16%, transparent) 50%,
    transparent 58%);
  background-size: 300% 100%;
  background-position: 150% 0;
  background-repeat: no-repeat;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.rt-js .rt-eroe__sigillo-luce {
    animation: rt-sigillo-luce 9s cubic-bezier(0.4, 0, 0.3, 1) 2.4s infinite;
  }
  @keyframes rt-sigillo-luce {
    0%   { background-position: 150% 0; }
    /* 13% di nove secondi: la lama passa in poco piu' di un secondo e
       per gli altri otto il sigillo sta fermo. Nove e non tre perche'
       una cosa che si muove spesso, sopra una pagina che si legge,
       smette di essere un dettaglio e diventa un disturbo. */
    13%  { background-position: -50% 0; }
    100% { background-position: -50% 0; }
  }
}

.rt-eroe__titolo {
  margin: var(--rt-s5) 0 0;
  font-size: clamp(1.875rem, 3vw, 3.25rem);
  font-weight: var(--rt-peso-titolo);
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--rt-ink);
}
/* Le due ricerche che ci riguardano davvero stanno nella prima riga del
   titolo, e qui prendono il blu del marchio: chi arriva da Google deve
   ritrovare in cima, e a colpo d'occhio, la cosa che ha cercato.
   Il peso resta quello del titolo — un <b> dentro un titolo gia' grassetto
   non deve diventare piu' nero del resto, se no sembra un errore. */
.rt-chiave { color: var(--rt-blu); font-weight: inherit; }

.rt-su-riga { display: block; overflow: hidden; }
.rt-su-riga > span { display: block; }

html.rt-js .rt-su-riga > span {
  transform: translateY(105%);
  animation: rt-su-riga 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* I ritardi stanno in regole a parte e DOPO: la forma breve di
   "animation" riazzera animation-delay, quindi scritto dentro la riga
   sopra non varrebbe niente e le tre righe partirebbero insieme. */
html.rt-js .rt-su-riga:nth-child(1) > span { animation-delay: 60ms; }
html.rt-js .rt-su-riga:nth-child(2) > span { animation-delay: 150ms; }
html.rt-js .rt-su-riga:nth-child(3) > span { animation-delay: 240ms; }
@keyframes rt-su-riga { to { transform: none; } }

.rt-eroe__lede {
  margin: var(--rt-s5) 0 0;
  max-width: 46ch;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
  color: var(--rt-ink-2);
}
/* Le parole che contano prendono il blu: sono tre fermate per l'occhio
   dentro un paragrafo che altrimenti si salta. */
.rt-eroe__lede b { color: var(--rt-blu); font-weight: var(--rt-peso-medio); }

/* ── Il voto ───────────────────────────────────────────────────────────*/

.rt-eroe__voto {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin-block-start: var(--rt-s6);
  padding-block-start: var(--rt-s6);
  border-block-start: 1px solid var(--rt-linea);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
  text-decoration: none;
}
.rt-eroe__voto b {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink);
}
.rt-eroe__voto:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ── Le azioni ─────────────────────────────────────────────────────────*/

.rt-eroe__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s3);
  margin-block-start: var(--rt-s6);
}

/* I DUE BOTTONI HANNO LO STESSO PADDING, e non e' pignoleria.
   Qui c'era scritto il token --rt-s7, che NON ESISTE: la riga
   intera diventava invalida e il padding tornava al suo valore iniziale,
   cioe' zero. "Tutte le misure" aveva il testo appiccicato al bordo e
   sembrava rotto. Una variabile inventata non da' errore da nessuna
   parte: il browser scarta la dichiarazione in silenzio. Si scrivono
   solo token che esistono — la scala e' 1,2,3,4,5,6,8,10,12,16,20,24. */
/* I PULSANTI DELLA HOME HANNO UNA FORMA SOLA.
   "Tutto il catalogo", in testa alle sezioni, teneva la forma di base —
   angoli var(--rt-r-lg) e padding var(--rt-s4) — mentre i due della hero
   sono capsule con var(--rt-s5) di fianco: sulla stessa pagina si
   leggevano come due componenti diversi, e sul telefono il primo era
   anche piu' alto dei secondi. La geometria si scrive QUI una volta e
   vale per tutti e tre; il colore resta quello che era. */
.rt-eroe__azioni .rt-btn,
.rt-testa--riga .rt-btn {
  padding: var(--rt-s5) var(--rt-s8);
  border-radius: var(--rt-r-pill);
  font-size: var(--rt-t-base);
}
.rt-eroe__compra {
  letter-spacing: 0.01em;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--rt-blu) 70%, transparent);
}
.rt-eroe__compra svg { transition: transform var(--rt-transizione); }
.rt-eroe__compra:hover svg { transform: translateX(3px); }
.rt-eroe__azioni .rt-btn--fantasma { background: var(--rt-superficie); }

/* ── Le misure piu' chieste ────────────────────────────────────────────*/

.rt-eroe__misure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rt-s2);
  margin: var(--rt-s8) 0 0;
  padding: 0;
  list-style: none;
}
.rt-eroe__misure-et {
  margin-inline-end: var(--rt-s2);
  font-size: 0.625rem;
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
}
.rt-eroe__misure a {
  display: inline-block;
  padding: var(--rt-s2) var(--rt-s4);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie);
  color: var(--rt-ink-2);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-sm);
  text-decoration: none;
  transition: border-color var(--rt-transizione), color var(--rt-transizione), transform var(--rt-transizione);
}
.rt-eroe__misure a:hover {
  border-color: var(--rt-blu);
  color: var(--rt-blu-scuro);
  transform: translateY(-2px);
}

/* ── La scena ──────────────────────────────────────────────────────────
   Una riga vera: la fotografia prende lo spazio che resta, i due bolli
   stanno nella loro corsia a destra.

   PRIMA ERANO IN ASSOLUTO, uno al 6% e l'altro al 34%, con due rientri
   diversi dal bordo: sullo schermo si vedevano storti perche' LO ERANO.
   Due oggetti che devono sembrare allineati non si piazzano a mano con
   due percentuali: si mettono in colonna e ci pensa il layout. */

.rt-eroe__scena {
  /* I bolli si appendono QUI e non alla card: senza questo, il loro
     riquadro di riferimento diventava la card e finivano appiccicati al
     suo angolo arrotondato, che li tagliava. */
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.5rem);
}

/* NIENTE line-height: 0 qui.
   Serviva a togliere lo spazio che l'immagine in linea si porta sotto —
   ma l'immagine e' gia' display:block, quindi quello spazio non c'e'. E
   line-height si EREDITA: tutto il testo dentro la figura diventava alto
   zero. */
.rt-eroe__foto {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* LA FIGURA PRENDE TUTTA LA SUA COLONNA, LA FOTOGRAFIA NO.
   Serve a due cose che sembravano separate:

   - i BOLLI si appendono alla figura, quindi arrivano fino al bordo
     destro della colonna, cioe' sulla stessa verticale del carrello in
     testata e del bordo destro di tutte le sezioni. Prima la figura era
     larga 34rem e centrata nella colonna: i bolli restavano un centinaio
     di pixel dentro, e si vedeva che la hero finiva prima del resto;
   - i ROTOLI si spostano a sinistra, lontano dai bolli, perche'
     l'immagine resta della sua misura ma si appoggia al lato sinistro
     della colonna invece di stare in mezzo.

   Il tetto di 34rem resta sull'IMMAGINE: una fotografia di prodotto che
   cresce con lo schermo smette di essere una fotografia e diventa un
   poster — a 2560 la colonna di destra darebbe 790 pixel di rotoli. */
/* LA MISURA DELLA FOTOGRAFIA STA QUI, non sull'immagine.
   La posa e' il riquadro della fotografia, e l'ombra a terra ci si
   appende: cosi' resta larga quanto i rotoli a qualunque schermo, senza
   che la sua larghezza vada scritta una seconda volta. */
.rt-eroe__posa {
  position: relative;
  display: block;
  max-width: 34rem;
  margin-inline: 0 auto;
}

/* L'OMBRA A TERRA.
   Senza, i rotoli sembravano sospesi: il drop-shadow qui sotto segue la
   sagoma e sta DIETRO l'oggetto, quindi racconta un corpo illuminato,
   non un corpo appoggiato. Quello che manca e' l'ombra di contatto —
   scura e stretta sotto la base, che si allarga e si schiarisce
   allontanandosi. Sono due cose diverse e servono tutte e due.

   L'ellisse e' piu' stretta della fotografia e sborda di poco sotto il
   bordo, perche' la base dei rotoli sta li': il ritaglio e' a filo
   della merce, con quattro pixel di margine. */
.rt-eroe__posa::before,
.rt-eroe__posa::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* L'alone: largo quanto la merce, tenue, e' l'aria sotto l'oggetto.

   STA QUASI TUTTO SOTTO IL RIQUADRO, e non e' un dettaglio: la
   fotografia e' ritagliata a filo della merce, quindi il bordo basso del
   riquadro E' la base dei rotoli, e i rotoli sono opachi e disegnati
   sopra. Un'ellisse centrata sul bordo finisce per nove decimi dietro la
   carta: si vede solo la striscia che sporge, ed e' il motivo per cui il
   primo tentativo sembrava non esserci. */
.rt-eroe__posa::after {
  inset-inline: 0%;
  inset-block-end: -7%;
  height: 13%;
  background: radial-gradient(closest-side,
    rgba(11, 18, 32, 0.26) 0%,
    rgba(11, 18, 32, 0.13) 50%,
    rgba(11, 18, 32, 0) 100%);
  filter: blur(10px);
}

/* Il nucleo: stretto, scuro, poco sfocato. E' questo che fa il contatto —
   un'ombra sola e morbida resta un alone, e un alone non appoggia
   niente. Due strati perche' nella realta' sono due: la penombra larga e
   la linea buia dove il corpo tocca. */
.rt-eroe__posa::before {
  inset-inline: 11%;
  inset-block-end: -4%;
  height: 7%;
  background: radial-gradient(closest-side,
    rgba(11, 18, 32, 0.44) 0%,
    rgba(11, 18, 32, 0.22) 52%,
    rgba(11, 18, 32, 0) 100%);
  filter: blur(5px);
}

.rt-eroe__img {
  /* Sopra l'ombra: senza, l'ellisse — che e' posizionata — si
     disegnerebbe SOPRA l'immagine, che non lo e'. Nessun z-index
     negativo, che qui finirebbe dietro il fondo della card. */
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* L'ombra lunga la mette il CSS perche' lo scontorno se l'e' portata
     via. drop-shadow e non box-shadow: segue la SAGOMA dei rotoli,
     mentre box-shadow disegnerebbe l'ombra del rettangolo. Piu'
     leggera di prima, perche' adesso lavora in coppia con quella di
     contatto. */
  filter: drop-shadow(0 22px 30px rgba(11, 18, 32, 0.10));
  /* La parallasse, e solo quella dello scorrimento: quella del
     puntatore e' stata tolta perche' i rotoli che scivolavano sotto il
     mouse non raccontavano niente, rispondevano solo al fatto che il
     mouse era passato di li'. */
  transform: translate3d(0, calc(var(--rt-py) * var(--rt-amp, 1) * -8px), 0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── I bolli ───────────────────────────────────────────────────────────
   IN ALTO A DESTRA DELLA FOTOGRAFIA, uno sopra l'altro.

   Appesi alla scena finivano nel margine destro, FUORI dalla fotografia:
   occupavano la destra della card e facevano leggere i rotoli come
   spostati a sinistra, anche se il loro riquadro era centrato al pixel.
   Appesi alla figura sono un bollino sul prodotto, e il blocco torna uno
   solo e centrato.

   In assoluto non occupano altezza: sul telefono, dove il pulsante
   d'acquisto sta al limite della piega, sono settanta pixel risparmiati.

   Stessa misura e stesso bordo per tutti e due, allineati dal layout e
   non da due percentuali scelte a occhio.                              */

.rt-eroe__bolli {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  pointer-events: none;
}
.rt-eroe__bollo {
  display: block;
  width: clamp(3.25rem, 5vw, 4.75rem);
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(11, 18, 32, 0.10));
}

/* ── L'ENTRATA ─────────────────────────────────────────────────────────
   Il movimento sta tutto qui: una volta, al caricamento, e poi fermo.

   La fotografia sale e si apre; i due bolli arrivano dopo, in dissolvenza
   e sfalsati fra loro. Niente cicli infiniti: un movimento che non
   finisce mai, su un oggetto fermo, si legge come un difetto.

   NIENTE ANIMAZIONE SULLA FIGURA, solo sui figli: un'animazione che
   muove transform crea un contesto di impilamento, e ce ne siamo gia'
   pentiti una volta. Qui non ci servirebbe, ma la regola resta.       */

@media (prefers-reduced-motion: no-preference) {
  html.rt-js .rt-eroe__posa {
    animation: rt-entra-foto 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html.rt-js .rt-eroe__bollo {
    animation: rt-entra-bollo 820ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  /* I ritardi in regole a parte e DOPO: la forma breve di "animation"
     riazzera animation-delay. */
  html.rt-js .rt-eroe__bolli > .rt-eroe__bollo:nth-child(1) { animation-delay: 620ms; }
  html.rt-js .rt-eroe__bolli > .rt-eroe__bollo:nth-child(2) { animation-delay: 790ms; }

  /* Si muovono scale/translate/opacity e NON transform, che e' gia'
     preso dalla parallasse: la stessa proprieta' non puo' essere
     animata e guidata da una variabile nello stesso momento. */
  @keyframes rt-entra-foto {
    from { opacity: 0; scale: 0.92; translate: 0 28px; }
    to   { opacity: 1; scale: 1;    translate: 0 0; }
  }
  @keyframes rt-entra-bollo {
    from { opacity: 0; scale: 0.72; translate: 12px 0; }
    to   { opacity: 1; scale: 1;    translate: 0 0; }
  }
}

/* ── La riga dei servizi ───────────────────────────────────────────────*/

/* LE DUE COPIE DELLA RIGA SERVIZI.
   Stesso contenuto, due posti: sotto la card sul desktop, dentro la card
   sul telefono. Qui si decide quale delle due esiste — display:none, non
   visibility, cosi' quella spenta sparisce anche per chi legge con la
   voce e non si sente due volte la stessa riga. */
.rt-hero__servizi,
.rt-eroe__servizi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s3) clamp(1.25rem, 2.6vw, 2.5rem);
  margin: clamp(1rem, 2vw, 1.75rem) 0 0;
  /* Stesso fianco della card: la riga di rassicurazioni e' centrata, ma su
     uno schermo largo senza questo limite si allargherebbe oltre la colonna
     del sito e le voci agli estremi finirebbero fuori verticale. */
  padding: 0 max(var(--rt-s2), calc((100% - (var(--rt-larghezza) - 2 * var(--rt-gutter))) / 2));
  list-style: none;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
}
.rt-hero__servizi li,
.rt-eroe__servizi li { display: flex; align-items: center; gap: var(--rt-s2); }
.rt-hero__servizi b,
.rt-eroe__servizi b { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }
.rt-hero__servizi svg,
.rt-eroe__servizi svg { flex: none; color: var(--rt-blu); }

/* Fuori dal telefono esiste solo quella sotto la card. Scritto DOPO la
   regola condivisa e non prima: a parita' di specificita' vince chi e'
   scritto dopo, e messo sopra il display:flex se lo rimangiava. */
.rt-eroe__servizi { display: none; }

/* ── Schermi stretti ───────────────────────────────────────────────────*/

@media (max-width: 1000px) {
  .rt-eroe__dentro { grid-template-columns: 1fr; gap: var(--rt-s8); }
  /* Il prodotto va in cima: su uno schermo stretto e' lui a dire in un
     colpo d'occhio di che cosa si parla. */
  .rt-eroe__scena { order: -1; justify-content: center; }
  .rt-eroe__foto { flex: 0 1 min(36rem, 86%); }
  .rt-eroe__lede { max-width: none; }
}

@media (max-width: 760px) {
  /* Sul telefono tutto al centro: con una colonna sola il testo a
     bandiera lascia un vuoto a destra che sembra un errore. */
  .rt-eroe__dentro { text-align: center; }
  .rt-eroe__lede { margin-inline: auto; }
  .rt-eroe__voto,
  .rt-eroe__azioni,
  .rt-eroe__misure { justify-content: center; }

  /* LA PIEGA E' UN BUDGET, e sul telefono e' stretto.
     Alla prima prova questa hero era alta 991 pixel su uno schermo da
     780: il titolo cominciava a 520 e "Acquista ora" a 843, cioe'
     fuori. Non e' una questione di gusto, e' aritmetica — e si misura,
     non si guarda. Qui dentro ogni numero e' stato scelto per far stare
     titolo, promessa e bottone nel primo schermo. */
  .rt-eroe { padding: var(--rt-s6) var(--rt-s5) var(--rt-s8); }
  /* Lo stacco fra la fotografia e il testo scende da 32 a 24: su un
     telefono e' lo spazio piu' facile da restituire al pulsante, e otto
     pixel di vuoto in meno non li nota nessuno. */
  .rt-eroe__dentro { gap: var(--rt-s6); }
  .rt-eroe__scena { flex-direction: column; }
  /* LA FIGURA PRENDE TUTTA LA RIGA, LA FOTOGRAFIA NO.
     I bolli si appendono alla figura, e cosi' vanno a sedersi sul bordo
     destro della card — allineati a destra, non a meta' strada. La
     fotografia invece sta dentro, alla larghezza che il budget della
     piega le concede (vedi la regola qui sotto). */
  .rt-eroe__foto { flex: 0 0 auto; width: 100%; }
  /* 70 E' IL SALDO DI UN BUDGET, non una scelta estetica.
     La fotografia e' l'unica cosa comprimibile fra la testata e il
     pulsante d'acquisto, quindi la sua larghezza vale esattamente
     quanto spazio avanza. Misurato a 430x740 con la fotografia buona,
     che e' quasi quadrata (732x687): il pulsante finisce a 716 col 70%,
     a 723 col 72% e FUORI, a 751, con l'80%. Preso il 70, che lascia
     ventiquattro pixel di margine.
     Se cambia la proporzione della foto o un testo della hero questo
     numero va rimisurato, non si eredita: node tools/banco/z-budget.js */
  .rt-eroe__posa { width: 70%; margin-inline: auto; }
  /* I bolli restano in alto a destra, sopra la fotografia: in assoluto
     non rubano altezza, e sul telefono l'altezza e' tutto. */
  .rt-eroe__bollo { width: 2.75rem; }

  /* VIA LE PASTIGLIE DELLE MISURE.
     Erano tre righe di pastiglie fra il pulsante d'acquisto e il fondo
     della card: tanto spazio per una scorciatoia che su un telefono
     nessuno usa, perche' chi cerca una misura scrive nella ricerca.
     Il posto lo prendono le due voci che rispondono alle domande vere
     — quando arriva, quanto costa la spedizione. */
  .rt-eroe__misure { display: none; }

  /* LE DUE VOCI CHE CONTANO, al posto delle pastiglie.
     Quando arriva e quanto costa farselo mandare sono le due domande
     che uno si fa prima di comprare; omologazione, fattura e reso sono
     rassicurazioni, utili su uno schermo largo e di troppo qui, dove
     rubavano la riga alle prime due. Diventano due righe vere, con
     l'icona a sinistra, non cinque frammenti a capo. */
  /* QUI LE DUE RIGHE SI SCAMBIANO.
     Sul telefono la copia buona e' quella DENTRO la card: fuori, sul
     bianco, le due voci restavano sospese sotto il riquadro e si
     leggevano come un piede di pagina invece che come parte
     dell'offerta. */
  .rt-hero__servizi { display: none; }
  .rt-eroe__servizi {
    /* Centrate, come il resto della hero sul telefono: a bandiera a
       sinistra erano le uniche due righe fuori asse di tutta la
       schermata, e si vedeva. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rt-s3);
    /* Dentro la card il fianco lo da' gia' la card: il calcolo della
       colonna del sito qui non serve e stringerebbe le righe. */
    padding-inline: 0;
    margin-block-start: var(--rt-s5);
    /* Una riga sottile sopra: dentro la card, senza, le due voci si
       incollavano ai pulsanti e sembravano una terza fila di bottoni. */
    padding-block-start: var(--rt-s5);
    border-block-start: 1px solid color-mix(in srgb, var(--rt-ink) 10%, transparent);
    width: 100%;
    font-size: var(--rt-t-sm);
  }
  .rt-eroe__servizi li { gap: var(--rt-s3); }
  .rt-eroe__servizi li:not(.rt-hero__servizio--chiave) { display: none; }
  .rt-eroe__servizi svg { width: 20px; height: 20px; }

  .rt-eroe__titolo { font-size: clamp(1.5rem, 6.2vw, 2rem); margin-block-start: var(--rt-s4); }
  .rt-eroe__lede { margin-block-start: var(--rt-s4); font-size: 0.9375rem; }
  .rt-eroe__voto { margin-block-start: var(--rt-s5); padding-block-start: var(--rt-s5); }
  /* I DUE PULSANTI PIU' PICCOLI.
     Sulla scrivania un pulsante alto 68 pixel sta in una riga larga
     1500 e non pesa; sul telefono due pulsanti cosi' sono una fascia
     azzurra alta un sesto dello schermo, e quello che doveva essere un
     invito diventa un muro. 15 di corpo e 14 di padding verticale li
     riportano alla misura del testo che hanno intorno, restando ben
     sopra i 44 pixel che un dito chiede per non sbagliare bersaglio. */
  .rt-eroe__azioni { margin-block-start: var(--rt-s5); gap: var(--rt-s3); }
  .rt-eroe__azioni .rt-btn,
  .rt-testa--riga .rt-btn {
    padding: 0.875rem var(--rt-s6);
    font-size: var(--rt-t-sm);
  }
  .rt-eroe__azioni .rt-compra svg,
  .rt-eroe__compra svg { width: 16px; height: 16px; }
  .rt-eroe__misure { margin-block-start: var(--rt-s5); }
}

@media (max-width: 620px) {
  .rt-eroe { border-radius: var(--rt-r-xl); }
  .rt-eroe__dentro { gap: var(--rt-s5); }
  .rt-eroe__azioni .rt-btn { flex: 1 1 auto; justify-content: center; padding-inline: var(--rt-s5); }
  .rt-eroe__misure-et { flex-basis: 100%; margin: 0 0 var(--rt-s1); }
}

/* ── Telefoni piccoli ──────────────────────────────────────────────────
   Un iPhone SE ha 568 pixel di altezza, meno 56 di testata: 512 per
   dire cosa vendiamo, mostrarlo, e dare il pulsante. Misurato prima di
   questo blocco, la hero ne occupava 793 e "Acquista ora" cominciava a
   683, cioe' due schermate sotto.

   Qui si stringe quello che si puo' stringere senza togliere niente:
   la fotografia, il filetto delle recensioni e le distanze. Il testo
   resta tutto — su uno schermo piccolo si taglia lo spazio, non il
   contenuto.                                                          */

@media (max-width: 380px) {
  .rt-eroe { padding: var(--rt-s5) var(--rt-s4) var(--rt-s6); }
  .rt-eroe__dentro { gap: var(--rt-s4); }
  .rt-eroe__foto { width: 60%; }
  .rt-eroe__sigillo { padding-inline-end: var(--rt-s3); }
  .rt-eroe__sigillo-bollo { width: 1.25rem; height: 1.25rem; }
  .rt-eroe__sigillo-t { font-size: 0.625rem; }
  .rt-eroe__titolo { margin-block-start: var(--rt-s3); font-size: 1.375rem; line-height: 1.12; }
  .rt-eroe__lede { margin-block-start: var(--rt-s3); font-size: 0.875rem; line-height: 1.5; }
  /* Piu' piccolo e piu' stretto, ma SENZA white-space: nowrap — provato,
     e a 320 pixel la riga delle recensioni non ci sta: usciva dallo
     schermo, si portava dietro diciassette elementi fuori misura e
     sfondava la centratura della fotografia. Una riga che non ci sta
     non si costringe: si rimpicciolisce e la si lascia andare a capo. */
  .rt-eroe__voto {
    margin-block-start: var(--rt-s4);
    padding-block-start: var(--rt-s4);
    gap: var(--rt-s2);
    font-size: var(--rt-t-xs);
  }
  .rt-eroe__voto b { font-size: var(--rt-t-sm); }
  .rt-eroe__azioni { margin-block-start: var(--rt-s4); gap: var(--rt-s2); }
  .rt-eroe__azioni .rt-btn { padding-block: var(--rt-s4); }
  .rt-eroe__servizi {
    margin-block-start: var(--rt-s4);
    padding-block-start: var(--rt-s4);
    font-size: var(--rt-t-xs);
  }
}

/* Gli schermi corti davvero: un iPhone SE e' 320x568, e li' mancavano
   ancora trentanove pixel perche' "Acquista ora" entrasse tutto nel
   primo schermo. La regola guarda anche l'ALTEZZA, non solo la
   larghezza: un telefono stretto ma lungo non ha questo problema e non
   merita di vedere il prodotto rimpicciolito per niente. */
@media (max-width: 380px) and (max-height: 620px) {
  .rt-eroe { padding: var(--rt-s4) var(--rt-s4) var(--rt-s5); }
  .rt-eroe__dentro { gap: var(--rt-s3); }
  /* Anche qui misurato: col 52% il pulsante finisce a 515 su 568. */
  .rt-eroe__posa { width: 52%; }
  .rt-eroe__foto {
    width: 100%;
    /* I bolli si appendono al primo antenato posizionato: togliendo il
       posizionamento alla figura diventa la SCENA, e vanno a stare nel
       margine libero di fianco alla fotografia invece che sopra i
       rotoli. A meta' larghezza erano grandi un quarto dell'immagine e
       le finivano addosso — si vedeva solo a 320 pixel. */
    position: static;
  }
  .rt-eroe__bollo { width: 2.125rem; }
  .rt-eroe__titolo { font-size: 1.25rem; }
  .rt-eroe__lede { font-size: 0.8125rem; }
  .rt-eroe__voto { margin-block-start: var(--rt-s3); padding-block-start: var(--rt-s3); }
  .rt-eroe__azioni { margin-block-start: var(--rt-s3); }
  .rt-eroe__azioni .rt-btn { padding: var(--rt-s3) var(--rt-s5); font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-eroe__img,
  .rt-eroe__bollo { transform: none; transition: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   2. IL NASTRO DELLE MISURE
   Due file identiche affiancate che scorrono di meta' larghezza: quando la
   prima e' uscita, la seconda e' esattamente dov'era la prima, e il giro
   ricomincia senza salto. La seconda e' aria-hidden e fuori dal tabulatore
   — e' la stessa cosa scritta due volte, e chi legge con la voce non deve
   sentirla due volte.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-nastro {
  overflow: hidden;
  padding-block: var(--rt-s6);
  border-block: 1px solid var(--rt-linea);
  background: var(--rt-superficie);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rt-nastro__pista { display: flex; width: max-content; }
.rt-nastro__fila {
  display: flex;
  gap: var(--rt-s3);
  margin: 0;
  padding: 0 var(--rt-s3) 0 0;
  list-style: none;
}
html.rt-js .rt-nastro__pista { animation: rt-nastro 46s linear infinite; }
.rt-nastro:hover .rt-nastro__pista,
.rt-nastro:focus-within .rt-nastro__pista { animation-play-state: paused; }
@keyframes rt-nastro { to { transform: translateX(-50%); } }

.rt-nastro a {
  display: grid;
  gap: 1px;
  padding: var(--rt-s3) var(--rt-s5);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-md);
  color: var(--rt-ink);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-lg);
  font-weight: var(--rt-peso-medio);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--rt-transizione), background var(--rt-transizione), color var(--rt-transizione);
}
.rt-nastro a small {
  font-family: var(--rt-font);
  font-size: 0.625rem;
  letter-spacing: var(--rt-tracking-label);
  color: var(--rt-ink-3);
}
.rt-nastro a:hover { border-color: var(--rt-blu); background: var(--rt-blu-tenue); color: var(--rt-blu-scuro); }

@media (prefers-reduced-motion: reduce) {
  html.rt-js .rt-nastro__pista { animation: none; }
  /* Ferma diventa una riga che si scorre con il dito, non una riga
     tagliata a meta'. */
  .rt-nastro { overflow-x: auto; scrollbar-width: none; }
  .rt-nastro::-webkit-scrollbar { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   3. PER CHE MACCHINA
   Sei riquadri bianchi con l'angolo largo: la stessa forma delle card
   prodotto e dei pannelli delle pagine di categoria, perche' il sito deve
   avere UNA forma, non una per sezione.

   La fotografia sta in un riquadro tinto dentro la card e non a tutto
   sfondo: a tutto sfondo servirebbe un velo sotto il testo, e sei veli in
   fila su una pagina chiara la fanno diventare pesante. Qui il testo sta
   sul bianco e si legge senza trucchi.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-macchine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1100px) {
  /* Tre per riga: sei voci fanno due righe piene. Con auto-fill su un
     monitor largo ne verrebbero sei in fila, alte come francobolli. */
  .rt-macchine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rt-macchine > li { display: flex; }

.rt-macchine a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--rt-s5);
  width: 100%;
  padding: var(--rt-s5);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--rt-transizione), transform var(--rt-transizione), box-shadow var(--rt-transizione);
}
.rt-macchine a:hover,
.rt-macchine a:focus-visible {
  border-color: color-mix(in srgb, var(--rt-blu) 40%, var(--rt-linea));
  transform: translateY(-2px);
  box-shadow: var(--rt-ombra-2);
}

.rt-macchine__foto {
  flex: none;
  width: clamp(4.5rem, 9vw, 6rem);
  aspect-ratio: 1 / 1;
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie-2);
  overflow: hidden;
}
.rt-macchine__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dove non c'e' lo scatto, lo stesso quadrato tiene il disegno della
   macchina. Il quadrato resta perche' e' lui che allinea le sei righe:
   togliendolo la card si accorcia e la riga sembra rotta, non diversa. */
.rt-macchine__foto--icona {
  display: grid;
  place-items: center;
  color: var(--rt-ink-3);
}
.rt-macchine__foto--icona svg {
  width: 50%;
  height: 50%;
}

.rt-macchine__testo { display: grid; gap: 2px; min-width: 0; }
.rt-macchine__testo strong {
  font-size: var(--rt-t-lg);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
}
.rt-macchine__testo span {
  color: var(--rt-ink-3);
  font-size: var(--rt-t-sm);
  font-variant-numeric: tabular-nums;
}

.rt-macchine__vai {
  flex: none;
  color: var(--rt-blu);
  font-size: var(--rt-t-lg);
  transition: transform var(--rt-transizione);
}
.rt-macchine a:hover .rt-macchine__vai,
.rt-macchine a:focus-visible .rt-macchine__vai { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .rt-macchine a,
  .rt-macchine__vai { transition: none; }
  .rt-macchine a:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   4. I PIU' VENDUTI
   Le card sono quelle di assets/css/card.css: lo stesso riquadro che
   disegna il negozio, le categorie e i correlati. Qui c'e' la griglia, che
   e' della home, e basta.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-vetrina { background: var(--rt-superficie); }

.rt-vetrina__griglia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Il riquadro sta in assets/css/card.css: e' lo stesso del negozio, delle
   categorie e dei correlati. Qui resta solo la griglia, che e' della home:
   quattro colonne, due sotto i mille. */

@media (max-width: 1000px) {
  .rt-vetrina__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════════
   5. LA CARTA
   Il blocco sta in assets/css/fascia-carta.css e il markup in
   parti/fascia-carta.php: da quando chiude anche le pagine di categoria
   dei rotoli non e' piu' roba di home, ed e' caricato da inc/assets.php
   dove serve.
   ═══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   6. CHI LA USA
   Sei fotografie con la didascalia dentro, sul velo scuro in basso. Il
   testo sta sull'immagine e non sotto perche' sei card con testo sotto
   sono sei rettangoli; sei fotografie con una riga dentro sono sei posti.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-mestieri-sez { background: var(--rt-fondo); }

.rt-mestieri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-mestieri figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rt-r-xl);
  aspect-ratio: 4 / 3;
  background: var(--rt-superficie-2);
  isolation: isolate;
}
.rt-mestieri img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-mestieri li:hover img { transform: scale(1.05); }

.rt-mestieri figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  gap: var(--rt-s1);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--rt-ink) 88%, transparent) 0%,
    color-mix(in srgb, var(--rt-ink) 58%, transparent) 45%,
    transparent 100%);
  color: var(--rt-superficie);
}
.rt-mestieri figcaption strong {
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.015em;
}
.rt-mestieri figcaption span {
  font-size: var(--rt-t-sm);
  line-height: 1.4;
  color: color-mix(in srgb, var(--rt-superficie) 76%, transparent);
}

@media (max-width: 900px) { .rt-mestieri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  /* UNA FILA CHE SI SCORRE COL DITO, agganciata: sei card in colonna sono
     sei schermate di scorrimento per una sezione di contorno.

     Le card diventano VERTICALI, 4:5 invece di 4:3. Su un telefono una
     card larga e bassa e' una striscia: la fotografia non ha spazio per
     mostrare il banco, e il titolo con la sua riga di spiegazione occupa
     meta' della striscia. In verticale la fotografia respira e la
     didascalia sta sul fondo senza coprirla.

     E si agganciano al CENTRO, non all'inizio: con l'aggancio iniziale
     la prima card era a filo del bordo sinistro e la successiva spariva,
     cosi' non si capiva che ce n'erano altre. Centrate, di quella dopo
     si vede sempre un dito — che e' l'invito a spingere. */
  .rt-mestieri {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    gap: var(--rt-s3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Il margine d'aggancio: quanto resta ai lati della card centrata.
       Senza, la prima e l'ultima non riescono ad arrivare al centro. */
    scroll-padding-inline: 12%;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-inline: 0;
  }
  .rt-mestieri::-webkit-scrollbar { display: none; }
  .rt-mestieri li { scroll-snap-align: center; }

  /* DENTRO IL CAROSELLO L'ENTRATA NON SI FA PER CARD.
     Ogni card nasce spenta e sedici pixel piu' in basso, e si raddrizza
     quando entra in schermo: su una griglia funziona, su una fila che
     scorre in ORIZZONTALE no. L'osservatore guarda lo schermo, e una
     card spostata a destra fuori dal bordo non e' in schermo: resta
     spenta e sedici pixel piu' bassa per sempre. Si vedeva benissimo —
     la card che sbucava da destra era piu' in basso delle altre, e
     saltava in posizione nel momento in cui il dito la portava dentro.

     Qui le card entrano con la sezione, tutte insieme: l'intestazione
     sopra ha gia' la sua entrata, e una fila che scorre non ha bisogno
     di animarsi card per card. Risolto nel foglio di stile e non nello
     script perche' una riga che annulla uno stato non puo' fallire,
     mentre un secondo osservatore puo' non scattare. */
  html.rt-js .rt-mestieri > li[data-rt-entra] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .rt-mestieri figure { aspect-ratio: 4 / 5; }
  .rt-mestieri figcaption {
    padding: clamp(3rem, 12vw, 5rem) var(--rt-s5) var(--rt-s5);
  }
  .rt-mestieri figcaption strong { font-size: 1.125rem; }
  .rt-mestieri figcaption span { font-size: var(--rt-t-sm); }
}

/* ── I puntini del carosello ───────────────────────────────────────────
   Li costruisce home.js contando le card: senza JavaScript non c'e' una
   fila di pallini che non risponde a niente, e la fila si scorre lo
   stesso col dito.

   Dicono due cose che la sola striscia non dice: quante ce ne sono, e a
   che punto si e'. Su una fila agganciata senza indicatore si scorre una
   volta e si smette, perche' niente dice che la fila finisce. */
.rt-mestieri__punti {
  display: none;
  justify-content: center;
  gap: var(--rt-s2);
  margin-block-start: var(--rt-s5);
  padding: 0;
  list-style: none;
}
@media (max-width: 640px) {
  html.rt-js .rt-mestieri__punti { display: flex; }
}
.rt-mestieri__punti button {
  display: block;
  /* Il bersaglio e' 24x24 ma il segno e' 7x7: un pallino di sette pixel
     non si centra col pollice, e allargare il segno lo farebbe diventare
     un bottone. L'area la da' il padding, il segno lo da' lo sfondo. */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rt-mestieri__punti span {
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rt-ink) 22%, transparent);
  transition: background 240ms ease, width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Quello attivo si allunga invece di cambiare solo colore: la differenza
   di forma si vede con la coda dell'occhio, quella di tono no. */
.rt-mestieri__punti .e-qui span {
  width: 20px;
  border-radius: var(--rt-r-pill);
  background: var(--rt-blu);
}
@media (prefers-reduced-motion: reduce) {
  .rt-mestieri { scroll-behavior: auto; }
  .rt-mestieri__punti span { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   7. COME SI COMPRA
   ═══════════════════════════════════════════════════════════════════════ */

.rt-passi-sez { background: var(--rt-superficie); }

.rt-passi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
.rt-passi li { padding-block-start: var(--rt-s6); border-block-start: 2px solid var(--rt-linea); }
.rt-passi__n {
  display: block;
  margin-block-end: var(--rt-s4);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-label);
  color: var(--rt-blu);
}
.rt-passi strong {
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.025em;
  color: var(--rt-ink);
}
.rt-passi p {
  margin: var(--rt-s3) 0 0;
  font-size: var(--rt-t-base);
  line-height: 1.55;
  color: var(--rt-ink-3);
}
.rt-passi .rt-stampa-righello { margin-block-start: var(--rt-s5); }
.rt-passi__scorciatoia {
  margin: var(--rt-s3) 0 0 !important;
  font-size: var(--rt-t-xs) !important;
  color: var(--rt-ink-3);
}
.rt-passi__scorciatoia kbd {
  padding: 1px 5px;
  border: 1px solid var(--rt-linea);
  border-block-end-width: 2px;
  border-radius: 5px;
  background: var(--rt-superficie);
  font-family: var(--rt-font);
  font-size: 0.92em;
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink-2);
}
@media (max-width: 760px) { .rt-passi { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   8. I NUMERI
   ═══════════════════════════════════════════════════════════════════════ */

.rt-numeri-sez {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--rt-grad-aurora);
}
/* Flex e non grid: le colonne possono essere quattro, tre o due (le
   recensioni e le misure compaiono solo se il dato esiste davvero), e una
   griglia a quattro colonne fisse lascerebbe un buco a destra. */
.rt-numeri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.rt-numeri > li { flex: 1 1 13rem; }
@media (max-width: 760px) { .rt-numeri > li { flex: 1 1 40%; } }
.rt-numeri b {
  display: block;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: var(--rt-peso-titolo);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--rt-ink);
}
.rt-numeri span {
  display: block;
  margin-block-start: var(--rt-s3);
  max-width: 24ch;
  margin-inline: auto;
  font-size: var(--rt-t-sm);
  line-height: 1.45;
  color: var(--rt-ink-2);
}

/* ════════════════════════════════════════════════════════════════════════
   9. LE DOMANDE
   ═══════════════════════════════════════════════════════════════════════ */

.rt-domande-sez { background: var(--rt-fondo); }

.rt-domande__g {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.rt-domande__lato {
  position: sticky;
  top: calc(var(--rt-altezza-header) + 2rem);
  margin-block-end: 0;
}
.rt-domande__lato .rt-btn { margin-block-start: var(--rt-s6); }

.rt-domanda {
  border-block-end: 1px solid var(--rt-linea);
}
.rt-domanda:first-child { border-block-start: 1px solid var(--rt-linea); }
.rt-domanda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s5);
  padding-block: var(--rt-s6);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--rt-ink);
  cursor: pointer;
  list-style: none;
}
.rt-domanda summary::-webkit-details-marker { display: none; }
/* Il segno: una croce che, aperta, perde la riga verticale e resta un
   meno. Disegnata e non scritta: il meno tipografico cambia larghezza su
   ogni sistema. */
.rt-domanda summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--rt-ink-3), var(--rt-ink-3)) center / 14px 2px no-repeat,
    linear-gradient(var(--rt-ink-3), var(--rt-ink-3)) center / 2px 14px no-repeat;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-domanda[open] summary::after {
  background: linear-gradient(var(--rt-blu), var(--rt-blu)) center / 14px 2px no-repeat;
  transform: rotate(180deg);
}
.rt-domanda > div { padding-block-end: var(--rt-s6); }
.rt-domanda p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--rt-t-base);
  line-height: 1.6;
  color: var(--rt-ink-2);
}
.rt-domanda p b { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }

@media (max-width: 900px) {
  .rt-domande__g { grid-template-columns: 1fr; }
  .rt-domande__lato { position: static; margin-block-end: var(--rt-s8); }
}

/* ════════════════════════════════════════════════════════════════════════
   10. LA CHIUSURA
   ═══════════════════════════════════════════════════════════════════════ */

.rt-chiusa-sez { background: var(--rt-superficie); }

/* La pagina finisce come finisce uno scontrino: strappata.
   Gli angoli in basso tornano vivi perche' un angolo arrotondato sopra una
   dentellatura non e' uno strappo, e' un adesivo. */
.rt-chiusa {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem) clamp(3.5rem, 8vw, 7rem);
  border-radius: var(--rt-r-2xl) var(--rt-r-2xl) 0 0;
  background: var(--rt-grad-aurora);
  text-align: center;

  /* La dentellatura e' una MASCHERA, non due gradienti sovrapposti.
     Al primo tentativo avevo incrociato un gradiente a 135 gradi e uno a
     225: si intersecano, e il risultato era una fila di rombi — un
     merletto, non uno strappo. Una conica ancorata in basso ritaglia
     triangoli veri dal bordo, che e' quello che fa uno strappo: toglie
     carta. */
  --rt-dente: 20px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
                50% / var(--rt-dente) 100% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
                50% / var(--rt-dente) 100% repeat-x;
}
/* Una luce morbida in alto a sinistra, come sulle card del bento: senza,
   il gradiente e' una tinta e si vede che e' una tinta. */
.rt-chiusa::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(62% 80% at 18% 0%, rgba(255, 255, 255, 0.85), transparent 62%);
}
.rt-chiusa > * { position: relative; }
.rt-chiusa h2 {
  margin: var(--rt-s4) 0 0;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: var(--rt-peso-titolo);
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}
.rt-chiusa p {
  margin: var(--rt-s5) auto 0;
  max-width: 48ch;
  font-size: var(--rt-t-lg);
  line-height: 1.5;
  color: var(--rt-ink-2);
}
.rt-chiusa__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rt-s3);
  margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
}