/* =========================================================================
   Revenge Motors — sistema tipografico e dettagli
   Il tema arrivava con Sora a peso 400 ovunque: titoli senza peso e testo
   grigio chiaro su nero. Qui si imposta la gerarchia, il contrasto e gli
   accenti rossi. Il rosso e' accento, non campitura: il marchio e' nero.
   ========================================================================= */

:root {
  --rm-nero:        #080E10;
  --rm-nero-2:      #101517;

  /* Il rosso del marchio, campionato dal logo: un bordeaux cupo.
     Serve per le campiture ampie, dove un rosso acceso urlerebbe. */
  --rm-bordeaux:    #781824;

  /* Rosso acceso per i piccoli accenti: filetti, trattini, pulsanti.
     Sul nero deve staccare, e il bordeaux da solo non stacca. */
  --rm-rosso:       #DC0025;
  --rm-rosso-cupo:  #A8001C;
  --rm-testo:       #C6CBCC;
  --rm-testo-forte: #FFFFFF;
  --rm-tenue:       #A0A6A8;
  --rm-bordo:       rgba(255, 255, 255, 0.14);

  --rm-titoli: 'Oswald', 'Barlow Condensed', Impact, sans-serif;
  --rm-corpo:  'Barlow', system-ui, -apple-system, sans-serif;
}

/* --- corpo del testo --------------------------------------------------- */

body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-icon-list .elementor-icon-list-text,
.the7-elementor-widget p,
li, td, label, input, textarea, select {
  font-family: var(--rm-corpo) !important;
}

body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--rm-testo);
  -webkit-font-smoothing: antialiased;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-size: 18px;
  line-height: 1.72;
  color: var(--rm-testo);
}

/* Il centrato lungo e' la cosa che fa sembrare un sito "da template":
   i paragrafi vanno a bandiera e con una misura leggibile.
   Serve il forzante: Elementor scrive l'allineamento per singolo widget. */
.elementor-widget-text-editor,
.elementor-widget-text-editor > .elementor-widget-container,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  text-align: left !important;
}

.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  color: var(--rm-testo) !important;
}

.elementor-widget-text-editor p {
  max-width: 68ch;
  margin-bottom: 1.15em;
}

.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* --- titoli ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.the7-heading-title {
  font-family: var(--rm-titoli) !important;
  text-transform: uppercase;
  color: var(--rm-testo-forte);
  letter-spacing: 0.015em;
}

/* Le dimensioni NON sono forzate: dove Elementor ha deciso una misura per il
   singolo widget la sua regola e' piu' specifica e vince (hero compreso).
   Queste valgono come base dove non e' stato impostato nulla. */

h1, .elementor-widget-heading h1.elementor-heading-title {
  font-weight: 700 !important;
  font-size: clamp(42px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: 0.005em;
}

/* Attenzione: in questo tema quasi tutti i titoli sono marcati H3, quindi
   NON si imposta la dimensione per tag — si schiaccerebbe anche l'hero.
   Le misure si mettono sul singolo widget nei dati Elementor. */

h2, .elementor-widget-heading h2.elementor-heading-title,
.the7-heading h2 {
  font-weight: 600 !important;
  line-height: 1.1;
}

h3, .elementor-widget-heading h3.elementor-heading-title,
.the7-heading h3 {
  font-weight: 600 !important;
  line-height: 1.22;
}

h4, h5, h6 {
  font-weight: 500 !important;
  letter-spacing: 0.06em;
}

/* I titoli di sezione non sono widget Elementor ma widget The7
   (.elementor-widget-the7-heading > h2.the7-heading-title): le regole sui
   widget heading di Elementor non li raggiungono.
   Sono quelli seguiti da un blocco di testo: vanno a bandiera come il testo
   che introducono e portano il filetto rosso. Le chiamate all'azione hanno
   un altro titolo come fratello, quindi restano centrate. */
.rm-titolo-sezione .the7-heading-title,
.rm-titolo-sezione .elementor-heading-title {
  text-align: left !important;
  font-size: clamp(30px, 3.4vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
}

/* Titoli delle card: stessa famiglia, ma piccoli e senza filetto. */
.rm-titolo-card .the7-heading-title,
.rm-titolo-card .elementor-heading-title {
  text-align: left !important;
  font-size: clamp(18px, 1.35vw, 21px) !important;
  line-height: 1.24 !important;
  letter-spacing: 0.04em !important;
  color: var(--rm-testo-forte) !important;
}

.rm-titolo-sezione .the7-heading-title::after,
.rm-titolo-sezione .elementor-heading-title::after {
  content: '';
  display: block;
  width: 62px;
  height: 3px;
  margin-top: 22px;
  background: var(--rm-rosso);
}

/* --- pulsanti ---------------------------------------------------------- */

/* Il demo Creative Dark usa pulsanti a pillola, piccoli e compatti
   (raggio 100px, 14px, padding 8px 18px). Squadrarli e ingrandirli, come
   avevo fatto, snatura l'impianto del tema. */
.elementor-button,
.the7-button,
.the7_button_widget a,
a.dt-btn,
button[type="submit"] {
  font-family: var(--rm-titoli) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 14px 34px !important;
  background-color: var(--rm-rosso) !important;
  color: #FFFFFF !important;
  border: none !important;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.elementor-button:hover,
.the7-button:hover,
.the7_button_widget a:hover,
a.dt-btn:hover {
  background-color: #FFFFFF !important;
  color: var(--rm-nero-2) !important;
}

.elementor-button:hover,
.the7-button:hover,
.the7_button_widget a:hover,
a.dt-btn:hover {
  transform: translateY(-1px);
}

/* --- modulo contatti ---------------------------------------------------- */

.rm-modulo { margin-top: 24px; display: grid; gap: 16px; max-width: 620px; }
.rm-modulo .rm-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rm-modulo label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rm-tenue);
}
.rm-modulo label span { color: var(--rm-rosso); }
.rm-modulo input,
.rm-modulo select,
.rm-modulo textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  background: #0C1113;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
}
.rm-modulo input:focus,
.rm-modulo select:focus,
.rm-modulo textarea:focus {
  outline: none;
  border-color: var(--rm-rosso);
}
.rm-modulo textarea { resize: vertical; }

/* Esca per i robot: invisibile a chi naviga davvero. */
.rm-modulo .rm-esca { position: absolute; left: -9999px; }

.rm-modulo .rm-consenso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rm-tenue);
}
.rm-modulo .rm-consenso input { width: auto; margin: 3px 0 0; }
.rm-modulo .rm-consenso a { color: #fff; text-decoration: underline; }

.rm-modulo .rm-invia {
  justify-self: start;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 34px;
  border: none;
  border-radius: 100px;
  background: var(--rm-rosso);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.rm-modulo .rm-invia:hover { background: #fff; color: var(--rm-nero-2); }

.rm-avviso {
  padding: 14px 18px;
  border-left: 3px solid var(--rm-rosso);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 16px;
}
.rm-avviso-ok { border-left-color: #2FBF71; }

@media (max-width: 700px) {
  .rm-modulo .rm-riga { grid-template-columns: 1fr; }
}

/* --- fascia titolo del tema --------------------------------------------- */

/* La fascia col nome della pagina non e' un elemento del tema ma un widget
   dentro il template Elementor "singola pagina" (elementor-5343): per questo
   le regole sulle classi di The7 non la raggiungevano.
   Ogni pagina ha ora il proprio hero, quindi la fascia lo duplicherebbe. */
/* ATTENZIONE: si nasconde SOLO il widget del titolo (dace4f3).
   Il contenitore 2efe158 avvolge anche il contenuto della pagina:
   nasconderlo lasciava le pagine interne con la sola testata e il footer. */
.elementor-location-single .elementor-element-dace4f3 {
  display: none !important;
}

/* Sotto il titolo il template teneva due spaziatori, 200px e 100px, per dare
   aria alla fascia. Senza fascia restavano 300px di vuoto sopra l'hero. */
.elementor-location-single .elementor-element-16755,
.elementor-location-single .elementor-element-3e0d6f1 {
  display: none !important;
}

/* Tolto il titolo, il contenitore lasciava una fascia vuota con il proprio
   sfondo e la propria spaziatura: si azzera senza nasconderlo. */
.elementor-location-single .elementor-element-2efe158 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Le classi del tema restano coperte, nel caso venga usato un altro layout. */
.page-title,
#page-title,
.the7-page-title,
.dt-page-title,
.page-title-inner {
  display: none !important;
}

/* --- logo --------------------------------------------------------------- */

/* Lo stemma e' circolare: alla misura pensata per un logo orizzontale
   risulterebbe minuscolo. */
/* Versione orizzontale: stemma + marchio scritto. A parita' di altezza
   occupa molto piu' spazio dello stemma tondo, quindi si legge da lontano. */
.masthead .branding img,
.masthead img[src*="logo-revenge"],
.the7-logo-widget img,
img[src*="logo-revenge"] {
  height: auto !important;
  max-height: 68px !important;
  width: auto !important;
  max-width: none !important;
}

/* --- testata: la targa del marchio (proposta A) ------------------------- */

/* Il marchio sta dentro una targa bordata che sborda sotto la barra, come
   un'insegna imbullonata al muro. La targa e' il widget del logo stesso: il
   template Elementor resta uno solo, qui si veste. */
/* Il margine negativo in basso e' quello che fa sbordare la targa: senza,
   la riga si allungherebbe per contenerla e non scavalcherebbe niente.
   E' abbondante apposta, cosi' vale sia per il logo Revenge sia per lo
   stemma Capital Custom, che e' piu' alto. */
.elementor-location-header .elementor-widget-the7-logo-widget {
  align-self: flex-start;
  margin-top: -1px;
  /* Il forzante serve: Elementor dichiara margin-block-end:0 su
     ".e-con .elementor-widget.elementor-widget", tre classi contro due,
     e senza questo la targa non sborderebbe. */
  margin-bottom: -40px !important;
  position: relative;
  z-index: 3;
  background: #0C1113;
  border: 1px solid var(--rm-bordo);
  border-top: 0;
  padding: 16px 30px 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.elementor-location-header .elementor-widget-the7-logo-widget::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--rm-rosso);
}

/* Elementor scrive una larghezza fissa sul contenitore del logo
   (".the7-logo-wrap{width:150px}", impostata nel template quando il logo era
   alto 68px). Noi dimensioniamo per altezza, e il logo orizzontale a 88px e'
   largo 336: senza questo sborda dalla targa e la scavalca a destra.
   Il contenitore deve vestire l'immagine, non il contrario. */
.elementor-location-header .the7-logo-wrap {
  width: auto !important;
  max-width: none !important;
  aspect-ratio: auto !important;
}

/* Dentro la targa il logo puo' crescere: era 68px, ora 88. La regola generale
   piu' sopra vale ancora per il logo del piede, che resta piccolo.
   Il rapporto d'aspetto e il "cover" vanno tolti: The7 li imposta sulla
   misura del logo configurato nel template, e qualsiasi file con proporzioni
   diverse verrebbe ritagliato sopra e sotto invece che rimpicciolito. */
.elementor-location-header .the7-logo-wrap img {
  max-height: 88px !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  display: block;
}

/* Agganciata: la targa rientra nella barra e il marchio cala, cosi' la
   testata che ti seque restando sottile. */
/* Agganciata la targa non sborda piu': riempie esattamente la barra da 70px
   (50 di logo piu' 9 e 10 di respiro piu' il bordo). */
.the7-e-sticky.the7-e-sticky-effects .elementor-widget-the7-logo-widget {
  padding: 9px 20px 10px;
  box-shadow: none;
}

.the7-e-sticky.the7-e-sticky-effects .the7-logo-wrap img {
  max-height: 50px !important;
}

/* Nel reparto moto la testata mostra il marchio Capital Custom (vedi
   revenge-marchio.php). Da quando e' anche lui una versione orizzontale
   (1193x320 contro 1222x320) non serve piu' una misura sua: prende le stesse
   regole del Revenge e la targa non cambia forma cambiando reparto.
   La classe resta come aggancio, se un domani servisse distinguerli. */

/* Sul telefono il logo orizzontale a 52px sarebbe largo 199, e con i 36 di
   respiro la targa arriverebbe a 237 su 345 disponibili: accanto ci sono
   ancora menu e icona. Si resta a 46px, la misura che aveva prima. */
@media (max-width: 900px) {
  .elementor-location-header .elementor-widget-the7-logo-widget {
    padding: 10px 18px 12px;
  }
  .elementor-location-header .the7-logo-wrap img { max-height: 46px !important; }
  .masthead .branding img { max-height: 46px !important; }
}

/* --- menu di testata --------------------------------------------------- */

/* Banda rossa sopra la voce attiva: segnala dove ti trovi senza affidarsi
   al solo colore del testo, che su fondo scuro si nota poco. */
.masthead .main-nav > li,
.main-nav > li,
.the7_nav-menu .menu-item {
  position: relative;
}

.masthead .main-nav > li.act > a::before,
.masthead .main-nav > li.current-menu-item > a::before,
.main-nav > li.act > a::before,
.main-nav > li.current-menu-item > a::before,
.the7_nav-menu .menu-item.current-menu-item > a::before,
.the7_nav-menu .menu-item.current_page_item > a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 4px;
  background: var(--rm-rosso);
}

.masthead .main-nav > li > a:hover::before,
.main-nav > li > a:hover::before,
.the7_nav-menu .menu-item > a:hover::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 4px;
  background: rgba(220, 0, 37, 0.45);
}

.masthead .menu-text,
.main-nav .menu-text,
.the7_nav-menu .menu-text {
  font-family: var(--rm-titoli) !important;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* --- respiro fra le sezioni -------------------------------------------- */

[data-elementor-type="wp-page"] > .e-con > .e-con-inner,
[data-elementor-type="wp-page"] > .elementor-element > .e-con-inner {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

/* --- elenchi puntati dentro i blocchi ---------------------------------- */

.elementor-widget-text-editor ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1.1em;
  display: grid;
  gap: 0.42em;
}

.elementor-widget-text-editor ul li {
  position: relative;
  padding-left: 22px;
  color: var(--rm-testo);
}

.elementor-widget-text-editor ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 2px;
  background: var(--rm-rosso);
}

/* --- blocchi immagine + testo ------------------------------------------ */

/* Erano verdi e la sostituzione della palette li ha resi rossi: i titoli
   restano bianchi, il rosso serve agli accenti. */
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-image-box .elementor-image-box-title a {
  color: var(--rm-testo-forte) !important;
  letter-spacing: 0.02em;
}

.elementor-widget-image-box .elementor-image-box-description,
.elementor-widget-image-box .elementor-image-box-description p,
.elementor-widget-image-box .elementor-image-box-description li {
  text-align: left !important;
  color: var(--rm-testo) !important;
  font-size: 17px;
  line-height: 1.68;
}

.elementor-widget-image-box .elementor-image-box-description ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1.1em;
  display: grid;
  gap: 0.4em;
}

.elementor-widget-image-box .elementor-image-box-description ul li {
  position: relative;
  padding-left: 22px;
}

.elementor-widget-image-box .elementor-image-box-description ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 2px;
  background: var(--rm-rosso);
}

/* La freccetta ereditata dal demo e' un <svg> figlio diretto del pulsante,
   non un'icona con classe: va presa cosi'. */
a.box-button > svg,
.elementor-button > svg,
.the7-button > svg {
  display: none !important;
}

/* --- hero --------------------------------------------------------------- */

/* Il testo bianco cadeva sulla carrozzeria chiara dell'auto. La velatura
   passa da piatta a sfumata: piu' densa dove sta il testo, leggera in basso
   per non spegnere la foto. */
.elementor-element-2388733::before {
  background: linear-gradient(
    180deg,
    rgba(8, 14, 16, 0.86) 0%,
    rgba(8, 14, 16, 0.72) 45%,
    rgba(8, 14, 16, 0.55) 100%
  ) !important;
  opacity: 1 !important;
}

/* Sottotitolo dell'hero: era alla stessa misura dei richiami sotto. */
.elementor-element-ee78305 + .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(15px, 1.35vw, 19px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  color: #E6E9EA !important;
}

/* I tre richiami sotto il sottotitolo. */
.elementor-element-d1eb24e .elementor-heading-title {
  font-size: clamp(13px, 1.05vw, 15px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  color: #9FA5A7 !important;
}

/* --- ritmo verticale e incolonnamento ----------------------------------- */

/* Il blocco di testo era piu' stretto del titolo e centrato nel contenitore:
   i due bordi sinistri non coincidevano (60px contro 127px). Il testo si
   aggancia al margine del titolo, la misura di lettura resta sui paragrafi. */
.rm-titolo-sezione + .elementor-widget-text-editor {
  margin-top: 26px;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: none !important;
}

.elementor-widget-the7-heading + .elementor-widget-text-editor {
  margin-top: 26px;
}

/* --- titoli dei blocchi reparto ----------------------------------------- */

/* Erano centrati sopra una descrizione a bandiera. */
.elementor-widget-image-box .elementor-image-box-title {
  text-align: left !important;
}

.elementor-widget-image-box .elementor-image-box-content {
  text-align: left !important;
}

/* --- chiamata all'azione ------------------------------------------------ */

/* Il titolo era rosso scuro su fondo rosso: illeggibile. */
.elementor-element-ddae20e .the7-heading-title,
.elementor-element-ddae20e .elementor-heading-title {
  color: #FFFFFF !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  letter-spacing: 0.2em !important;
  opacity: 0.9;
}

.elementor-element-a19ca73 .the7-heading-title,
.elementor-element-a19ca73 .elementor-heading-title {
  color: #FFFFFF !important;
  text-transform: none;
}

/* La campitura era un rosso acceso a tutta larghezza: troppo urlata e
   lontana dal marchio. Passa al bordeaux del logo. */
.elementor-element-d481998,
.elementor-element-d481998 > .e-con-inner,
.elementor-element-4dd5033 {
  background-color: var(--rm-bordeaux) !important;
  background-image: none !important;
}

/* Su fondo bordeaux i pulsanti bianchi leggono meglio del rosso su rosso. */
.elementor-element-d481998 .elementor-button,
.elementor-element-d481998 .the7-button {
  background-color: #FFFFFF !important;
  color: var(--rm-nero-2) !important;
}

.elementor-element-d481998 .elementor-button:hover,
.elementor-element-d481998 .the7-button:hover {
  background-color: var(--rm-nero-2) !important;
  color: #FFFFFF !important;
}

/* --- elenchi ------------------------------------------------------------ */

/* Solo gli elenchi dentro i testi redazionali: prendere tutti gli "ul"
   dei widget significa colpire anche il menu di navigazione. */
.elementor-widget-text-editor ul,
.elementor-image-box-description ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.elementor-widget-text-editor ul > li,
.elementor-image-box-description ul > li {
  position: relative;
  padding-left: 22px;
  list-style: none !important;
}

.elementor-widget-text-editor ul > li::marker,
.elementor-image-box-description ul > li::marker {
  content: '';
}

.elementor-widget-text-editor ul > li::before,
.elementor-image-box-description ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 2px;
  background: var(--rm-rosso);
}

/* --- sfondi decorativi ereditati ---------------------------------------- */

/* blurtop001-min.png (sul body) e blurfooter-min-1.png (nel footer) sono
   sfumature VERDI di ERMES. Essendo file grafici, la sostituzione della
   palette sui codici colore non poteva raggiungerli: si sostituiscono con
   gradienti nella tinta del marchio. */
/* Carta millimetrata: e' il fondo di tutto il sito nella direzione
   "Officina". Quadretto fine da 28px, riquadro marcato ogni 140px, e sotto
   resta l'alone bordeaux che c'era gia'. Il nero non e' piu' piatto da
   nessuna parte, ed e' quello che toglieva identita' alle pagine. */
body {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.030) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    radial-gradient(120% 70% at 50% 0%, rgba(120, 24, 36, 0.30) 0%, rgba(8, 14, 16, 0) 60%) !important;
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px, auto !important;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat !important;
  background-attachment: fixed !important;
  background-color: #05090B !important;
}

.elementor-element-b50161f {
  background-image: radial-gradient(
    100% 80% at 50% 100%,
    rgba(120, 24, 36, 0.26) 0%,
    rgba(8, 14, 16, 0) 65%
  ) !important;
  background-repeat: no-repeat !important;
}

/* --- barra della lingua ------------------------------------------------- */

/* Bandierine EN/FR/IT ereditate dal sito precedente: nascoste, non rimosse.
   Per rimetterle basta togliere questa regola. */
.gtranslate_wrapper,
.gt_switcher,
[class*="gtranslate_"] {
  display: none !important;
}

/* --- immagini ---------------------------------------------------------- */

.elementor-widget-image img,
.the7-image-widget img,
.elementor-widget-image-box img {
  filter: saturate(0.92) contrast(1.04);
}

/* =========================================================================
   Livello "Officina" — la direzione grafica approvata
   L'identita' viene dal posto: carta millimetrata da banco, targhette
   numerate, fasce di segnalazione, scacchi ripresi dal pavimento, note
   tecniche a monospazio. Qui sta il vocabolario condiviso: le pagine lo
   richiamano per classe invece di ridefinirselo ognuna nel proprio blocco.
   ========================================================================= */

:root {
  --rm-mono:  'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --rm-ambra: #E0A200;
}

/* Nota tecnica: la scritta piccola che accompagna foto, blocchi e recapiti.
   E' quella che fa sembrare la pagina una scheda di lavorazione. */
.of-nota {
  font-family: var(--rm-mono);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  line-height: 1.65;
  text-transform: uppercase;
  color: var(--rm-tenue);
}

.of-nota b { color: var(--rm-rosso); font-weight: 500; }

/* Targhetta numerata: apre ogni sezione, come su un quadro comandi.
   Sostituisce l'occhiello rosso, che da solo non reggeva la pagina. */
.of-targa {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rm-bordo);
  background: rgba(5, 9, 11, 0.72);
  vertical-align: middle;
}

.of-targa .n {
  font-family: var(--rm-titoli);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  color: #05090B;
  background: var(--rm-rosso);
  padding: 9px 13px;
}

.of-targa .t {
  font-family: var(--rm-titoli);
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E6EAEB;
  padding: 9px 18px;
  align-self: center;
}

/* Fascia di segnalazione: separa i blocchi come la banda su una porta. */
.of-fascia {
  height: 12px;
  background: repeating-linear-gradient(135deg, var(--rm-rosso) 0 14px, #0A1013 14px 28px);
}

.of-fascia-ambra {
  background: repeating-linear-gradient(135deg, var(--rm-ambra) 0 14px, #0A1013 14px 28px);
}

/* Scacchiera: ripresa dal pavimento dell'officina. */
.of-scacchi {
  height: 24px;
  background-image: conic-gradient(
    rgba(255, 255, 255, 0.09) 90deg,
    transparent 90deg 180deg,
    rgba(255, 255, 255, 0.09) 180deg 270deg,
    transparent 270deg
  );
  background-size: 24px 24px;
}

/* Squadre agli angoli: incornicia foto e riquadri senza chiuderli. */
.of-squadre { position: relative; }

.of-squadre::before,
.of-squadre::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--rm-rosso);
  pointer-events: none;
  z-index: 2;
}

.of-squadre::before { left: -1px;  top: -1px;    border-right: 0; border-bottom: 0; }
.of-squadre::after  { right: -1px; bottom: -1px; border-left: 0;  border-top: 0; }

/* --- striscia in cima al sito ------------------------------------------- */

/* Il blocco Elementor che contiene fascia e striscia non deve avere margini.
   Elementor lo scrive nel suo foglio legandolo all'identificativo del
   blocco; qui lo si ripete legandolo al contenuto, cosi' vale anche se
   l'identificativo cambia o se la pagina arriva da una cache vecchia.
   Senza: due fasce vuote sopra e sotto la striscia, viste da telefono. */
[data-elementor-type="header"] .e-con:has(> .elementor-element .of-striscia-testata) {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --gap: 0px;
  padding: 0 !important;
}

[data-elementor-type="header"] .elementor-element:has(> .of-striscia-testata),
[data-elementor-type="header"] .elementor-element:has(> .elementor-widget-container > .of-striscia-testata) {
  margin: 0 !important;
}

/* Indirizzo e recapito sopra la testata, sotto la fascia di segnalazione. */
.of-striscia {
  background: rgba(220, 0, 37, 0.06);
  border-bottom: 1px solid var(--rm-bordo);
}

.of-striscia .dentro {
  width: min(1300px, 92vw);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 7px 0;
}

.of-striscia a { color: inherit; text-decoration: none; }
.of-striscia a:hover b { color: #fff; }

@media (max-width: 720px) {
  .of-striscia .dentro { justify-content: center; }
  .of-striscia .solo-largo { display: none; }
}

/* =========================================================================
   Pagine legali (privacy e cookie policy)
   Sono rese dal tema, non da Elementor: senza queste regole le tabelle
   escono grezze e i titoli non hanno respiro.
   ========================================================================= */

.rl-occhiello {
  font-family: var(--rm-mono);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-tenue);
}

.rl-tabella {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0 30px;
  /* Su schermi stretti la tabella scorre da sola invece di sfondare la pagina. */
  display: block;
  overflow-x: auto;
}

.rl-tabella th,
.rl-tabella td {
  border: 1px solid var(--rm-bordo);
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  line-height: 1.6;
}

.rl-tabella thead th {
  background: rgba(220, 0, 37, 0.10);
  font-family: var(--rm-titoli);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.rl-tabella tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }

/* Impianto delle pagine legali. Senza dati Elementor il tema le rende nude:
   testo attaccato al bordo, larghezza piena, e la targa del logo che sborda
   dalla testata finisce sopra le prime righe. */
.rl {
  width: min(880px, 92vw);
  margin-inline: auto;
  /* La testata occupa 160px e la targa ne sborda altri 21: si parte sotto. */
  padding: 210px 0 clamp(70px, 9vw, 120px);
  font-size: 18px;
  line-height: 1.75;
}

.rl > p,
.rl > ul,
.rl > ol { max-width: 72ch; }

.rl p { margin: 0 0 1.15em; }

.rl h2 {
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 600 !important;
  line-height: 1.12;
  margin: 54px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rm-bordo);
}

.rl h2::after {
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  background: var(--rm-rosso);
  margin-top: 14px;
  margin-bottom: -17px;
}

.rl h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  margin: 34px 0 12px;
  color: #fff;
}

.rl ul, .rl ol { margin: 0 0 1.3em; padding-left: 22px; }
.rl li { margin-bottom: 9px; }

.rl a { color: var(--rm-rosso); text-decoration: underline; text-underline-offset: 3px; }
.rl a:hover { color: #fff; }

.rl .rl-occhiello {
  border-left: 3px solid var(--rm-rosso);
  padding-left: 16px;
  margin-bottom: 34px;
}

@media (max-width: 900px) {
  .rl { padding-top: 130px; }
}

/* =========================================================================
   Menu mobile (revenge-menu-mobile.php)
   Sostituisce il popup di Elementor, che in pro-elements 3.35.0 non si apre.
   ========================================================================= */

.rm-mm { position: fixed; inset: 0; z-index: 99999; }
.rm-mm[hidden] { display: none; }

.rm-mm-velo {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 11, 0.72);
  opacity: 0;
  transition: opacity .28s ease;
}
.rm-mm.aperto .rm-mm-velo { opacity: 1; }

.rm-mm-pannello {
  position: absolute;
  top: 0;
  right: 0;
  width: min(340px, 86vw);
  height: 100%;
  background: #0A1013;
  border-left: 1px solid var(--rm-bordo);
  box-shadow: -18px 0 46px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
}
.rm-mm.aperto .rm-mm-pannello { transform: translateX(0); }

/* La fascia rossa in cima richiama quella della testata. */
.rm-mm-pannello::before {
  content: '';
  display: block;
  height: 8px;
  flex: none;
  background: repeating-linear-gradient(135deg, var(--rm-rosso) 0 12px, #0A1013 12px 24px);
}

.rm-mm-capo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rm-bordo);
}

.rm-mm-eti {
  font-family: var(--rm-mono);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rm-rosso);
}

.rm-mm-chiudi {
  background: none;
  border: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.rm-mm-voci { list-style: none; margin: 0; padding: 0; flex: 1; }

.rm-mm-voci a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  font-family: var(--rm-titoli);
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E6EAEB;
}

.rm-mm-voci a .n {
  font-family: var(--rm-mono);
  font-size: 12px;
  color: var(--rm-tenue);
  min-width: 20px;
}

.rm-mm-voci a.qui { color: #fff; }
.rm-mm-voci a.qui .n { color: var(--rm-rosso); }
.rm-mm-voci a.qui .t { box-shadow: inset 0 -2px 0 var(--rm-rosso); }
.rm-mm-voci a:active { background: rgba(255, 255, 255, 0.05); }

.rm-mm-piede { padding: 20px; display: grid; gap: 10px; }

.rm-mm-azione {
  display: block;
  text-align: center;
  font-family: var(--rm-titoli);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px;
  text-decoration: none;
  background: var(--rm-rosso);
  color: #05090B;
  border: 1px solid var(--rm-rosso);
}

.rm-mm-azione.vuota { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }

/* "Moto in vendita", lo stesso arancio del pulsante in testata. */
.rm-mm-azione.arancio { background: var(--rm-arancio, #F36B1C); border-color: var(--rm-arancio, #F36B1C); color: #fff; }

/* Schermi bassi: sui telefoni veri, tolte le barre del browser, restano
   560-650 pixel. Con le voci alla misura piena il pulsante "Moto in vendita"
   finiva sotto il bordo e andava cercato scorrendo il menu. Qui le voci si
   stringono quanto basta perche' entri senza scorrere; restano comode da
   toccare (almeno 50 pixel l'una). */
@media (max-height: 760px) {
  .rm-mm-voci a { padding-top: 11px; padding-bottom: 11px; }
  .rm-mm-piede { padding: 14px 20px; gap: 8px; }
  .rm-mm-azione { padding: 11px; }
}

@media (max-height: 620px) {
  .rm-mm-voci a { padding-top: 8px; padding-bottom: 8px; }
}

/* =========================================================================
   Mosaico e visore immagini (revenge-visore.php)
   Il visore di Elementor si appoggia allo stesso impianto dei popup, che in
   questo pacchetto e' incompleto: qui e' tutto nostro.
   ========================================================================= */

/* --- il mosaico --------------------------------------------------------- */

.of-mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Pochi pixel fra una foto e l'altra, come le griglie del resto del sito. */
  gap: 4px;
}

.of-mosaico a {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #0C1113;
}

.of-mosaico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il ritaglio pesca sopra la meta': dentro un riquadro 4/3 una foto
     verticale ne mostra circa la meta', e centrando il taglio si perdono le
     teste. Il soggetto, in una foto in piedi, sta quasi sempre in alto. */
  object-position: center 38%;
  display: block;
  filter: grayscale(0.35) contrast(1.06);
  transition: transform .5s ease, filter .4s ease;
}

.of-mosaico a:hover img { transform: scale(1.06); filter: grayscale(0) contrast(1.1); }

/* Segno che si puo' aprire: un angolo rosso che compare al passaggio. */
.of-mosaico a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  border-right: 3px solid var(--rm-rosso);
  border-bottom: 3px solid var(--rm-rosso);
  opacity: 0;
  transform: translate(6px, 6px);
  transition: opacity .3s ease, transform .3s ease;
}

.of-mosaico a:hover::after { opacity: 1; transform: translate(0, 0); }

@media (max-width: 640px) { .of-mosaico { grid-template-columns: repeat(2, 1fr); } }

/* --- il visore ---------------------------------------------------------- */

.rm-visore { position: fixed; inset: 0; z-index: 100000; }
.rm-visore[hidden] { display: none; }

.rm-visore-velo {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 11, 0.94);
  opacity: 0;
  transition: opacity .25s ease;
}
.rm-visore.aperto .rm-visore-velo { opacity: 1; }

.rm-visore-corpo {
  position: absolute;
  inset: 48px 72px 60px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .25s ease, transform .25s ease;
}
.rm-visore.aperto .rm-visore-corpo { opacity: 1; transform: scale(1); }

.rm-visore-corpo img {
  max-width: 100%;
  max-height: calc(100% - 34px);
  object-fit: contain;
  border: 1px solid var(--rm-bordo);
}

.rm-visore-corpo figcaption {
  font-family: var(--rm-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--rm-tenue);
}

.rm-visore-chiudi,
.rm-visore-freccia {
  position: absolute;
  z-index: 2;
  background: rgba(12, 17, 19, 0.9);
  border: 1px solid var(--rm-bordo);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease;
}

.rm-visore-chiudi:hover,
.rm-visore-freccia:hover { background: var(--rm-rosso); border-color: var(--rm-rosso); }

.rm-visore-chiudi { top: 18px; right: 18px; width: 46px; height: 46px; font-size: 30px; }

.rm-visore-freccia {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 72px;
  font-size: 38px;
}
.rm-visore-freccia.indietro { left: 12px; }
.rm-visore-freccia.avanti { right: 12px; }

@media (max-width: 720px) {
  .rm-visore-corpo { inset: 60px 12px 76px; }
  .rm-visore-freccia { top: auto; bottom: 12px; transform: none; width: 64px; height: 48px; font-size: 30px; }
  .rm-visore-freccia.indietro { left: 50%; margin-left: -70px; }
  .rm-visore-freccia.avanti { right: 50%; margin-right: -70px; }
}

/* --- video in apertura della galleria ------------------------------------
   Tre riquadri affiancati, come il mosaico ma piu' alti. Il rapporto e' 16/9
   fisso: i video arrivano da telefoni e telecamere diverse, e senza un
   rapporto imposto la riga verrebbe a gradini. */
.of-video {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

/* Le colonne seguono il numero dei video: con uno o due, una griglia da tre
   lascerebbe il vuoto a destra. Il video singolo si tiene entro una misura
   leggibile invece di prendersi tutta la larghezza. */
.of-video.n1 { grid-template-columns: 1fr; max-width: 920px; margin-inline: auto; }
.of-video.n2 { grid-template-columns: repeat(2, 1fr); }

.of-video-uno {
  position: relative;
  margin: 0;
  /* Il rapporto arriva dalla pagina (attributo formato dello shortcode):
     16/9 e' solo il valore di partenza. */
  aspect-ratio: var(--of-video-rapporto, 16 / 9);
  background: #0C1113;
  overflow: hidden;
}

.of-video-uno video,
.of-video-uno iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  /* contain e non cover: i video arrivano dai telefoni, spesso verticali, e
     ritagliarli dentro un riquadro 16/9 vorrebbe dire buttarne via i due
     terzi. Le bande scure ai lati sono il male minore. */
  object-fit: contain;
}

/* Video unico: niente riquadro imposto, si mostra nella sua forma. Verticale
   o orizzontale che sia, l'altezza si ferma prima di occupare lo schermo. */
.of-video.n1 .of-video-uno {
  aspect-ratio: auto;
  background: transparent;
  display: flex;
  justify-content: center;
}

.of-video.n1 video,
.of-video.n1 iframe {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
}

.of-video.n1 iframe { width: 100%; aspect-ratio: 16 / 9; }

/* Riquadro di attesa, finche' i video veri non ci sono: si deve capire al
   primo sguardo che non e' contenuto definitivo. */
.of-video-uno.vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    repeating-linear-gradient(135deg,
      rgba(220, 0, 37, .16) 0 22px,
      transparent 22px 44px),
    #0C1113;
  border: 1px solid rgba(220, 0, 37, .45);
}

.of-video-uno.vuoto .n {
  font-family: 'Oswald', sans-serif;
  font-size: 46px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.of-video-uno.vuoto .t {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  color: var(--rm-rosso);
}

@media (max-width: 900px) { .of-video { grid-template-columns: 1fr; } }

/* =========================================================================
   Moto in vendita — elenco e scheda (revenge-vendita-viste.php)
   Ricalca il mockup approvato. Tutto sotto .rv, cosi' non tocca altro.
   ========================================================================= */

.rv { color: var(--rm-testo); font-size: 17px; line-height: 1.6; }
.rv * { box-sizing: border-box; }
/* Stessa misura delle altre pagine (Gallery, Harley-Davidson): 1300 pixel. */
.rv .rv-w { width: min(1300px, 92vw); margin-inline: auto; }
.rv h1, .rv h2, .rv h3 {
  font-family: var(--rm-titoli);
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
  margin: 0;
  letter-spacing: normal;
}
.rv a { text-decoration: none; }

/* --- apertura --- */
.rv-eroe { position: relative; overflow: hidden; }
.rv-eroe-img { position: absolute; inset: 0; background: center 55% / cover no-repeat; filter: grayscale(.75) contrast(1.12); }
.rv-eroe-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,9,11,.93), rgba(5,9,11,.74) 50%, rgba(5,9,11,.97)); }
.rv-eroe .rv-w { position: relative; padding: 150px 0 72px; }
.rv .rv-eroe h1 { font-size: clamp(38px, 5.6vw, 76px); font-weight: 700; margin: 28px 0 18px; }
.rv-eroe p { max-width: 58ch; margin: 0; font-size: 20px; color: #D2D7D8; }
.rv-filetto { width: 62px; height: 3px; background: var(--rm-rosso); margin-top: 22px; }
.rv-regole { display: flex; gap: 12px 28px; flex-wrap: wrap; margin-top: 28px; }
.rv-regole span { font-family: var(--rm-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-tenue); }
.rv-regole span::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--rm-rosso); margin-right: 9px; vertical-align: 1px; }

/* --- elenco --- */
.rv-elenco { padding: clamp(48px, 6vw, 72px) 0 clamp(70px, 8vw, 100px); }
.rv-filtri { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--rm-bordo); }
.rv-filtri-gruppo { display: flex; gap: 6px; flex-wrap: wrap; }
.rv .rv-filtri button {
  font-family: var(--rm-titoli) !important;
  font-size: 13px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: #E6EAEB; background: transparent; border: 1px solid var(--rm-bordo); border-radius: 0;
  padding: 9px 14px; margin: 0; cursor: pointer; line-height: 1.2; box-shadow: none; min-height: 0;
  transition: border-color .2s, background .2s;
}
.rv .rv-filtri button:hover { border-color: var(--rm-rosso); }
.rv .rv-filtri button.su { background: var(--rm-rosso); border-color: var(--rm-rosso); color: #05090B; }
.rv .rv-filtri button small { font-family: var(--rm-mono); font-size: 11px; opacity: .75; margin-left: 6px; letter-spacing: 0; }

.rv-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rv-card { display: flex; flex-direction: column; background: rgba(12,17,19,.88); border: 1px solid var(--rm-bordo); color: inherit; transition: border-color .25s; }
.rv-card[hidden] { display: none; }
a.rv-card:hover { border-color: rgba(220,0,37,.55); color: inherit; }
.rv-card-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0C1113; }
.rv-card-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; filter: saturate(.92) contrast(1.04); transition: transform .5s ease; }
a.rv-card:hover .rv-card-foto img { transform: scale(1.04); }
.rv-card-chiusa .rv-card-foto img { filter: grayscale(1) brightness(.5); }
.rv-senza-foto { position: absolute; inset: 0; display: grid; place-items: center; }

.rv-stato {
  font-family: var(--rm-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; background: rgba(5,9,11,.88); border: 1px solid var(--rm-bordo); color: #fff; white-space: nowrap;
}
.rv-card-foto .rv-stato { position: absolute; left: 12px; top: 12px; z-index: 3; }
.rv-stato::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: #fff; vertical-align: 1px; }
.rv-stato-trattativa { color: var(--rm-ambra); border-color: rgba(224,162,0,.5); }
.rv-stato-trattativa::before { background: var(--rm-ambra); }
.rv-stato-venduta { background: var(--rm-rosso); border-color: var(--rm-rosso); }

.rv-timbro { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.rv-timbro span {
  font-family: var(--rm-titoli); font-size: 34px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rm-rosso); border: 3px solid var(--rm-rosso); padding: 4px 18px; transform: rotate(-8deg); background: rgba(5,9,11,.4);
}

.rv-card-corpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rv .rv-card h3 { font-size: 24px; font-weight: 600; letter-spacing: .01em; }
.rv-dati { display: flex; border-block: 1px solid var(--rm-bordo); margin-top: 4px; }
.rv-dati span { flex: 1; font-family: var(--rm-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-tenue); padding: 9px 4px; text-align: center; }
.rv-dati span + span { border-left: 1px solid var(--rm-bordo); }
.rv-dati span b { display: block; font-family: var(--rm-titoli); font-size: 17px; letter-spacing: .03em; color: #fff; font-weight: 500; }
.rv-card-piede { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.rv-prezzo { font-family: var(--rm-titoli); font-size: 26px; color: #fff; font-weight: 600; letter-spacing: .02em; line-height: 1.1; }
.rv-prezzo-testo { font-size: 15px; letter-spacing: .14em; color: var(--rm-testo); font-weight: 500; text-transform: uppercase; }
.rv-vai { font-family: var(--rm-titoli); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--rm-rosso); white-space: nowrap; }
.rv-vai::after { content: " \2192"; }

.rv-vuoto { padding: 60px 0; text-align: center; display: grid; gap: 22px; justify-items: center; }

/* --- pulsanti --- */
.rv .rv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--rm-titoli); font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 20px; border: 1px solid rgba(255,255,255,.32); color: #fff; background: transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.rv .rv-btn:hover { background: #fff; color: #05090B; border-color: #fff; }
.rv .rv-btn-pieno { background: var(--rm-rosso); border-color: var(--rm-rosso); }

/* --- scheda --- */
.rv-dettaglio { padding: 140px 0 clamp(70px, 8vw, 100px); }
.rv-briciole { margin-bottom: 28px; }
.rv-briciole a { color: var(--rm-testo); }
.rv-briciole a:hover { color: #fff; }
.rv-dett-alto { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }

.rv .rv-grande {
  display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: #0C1113; overflow: visible; cursor: zoom-in;
}
.rv .rv-grande img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv .rv-grande-vuota { display: grid; place-items: center; cursor: default; }
.rv-miniature { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.rv .rv-miniature button {
  position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; margin: 0; border: 1px solid transparent; border-radius: 0;
  background: #0C1113; overflow: hidden; cursor: pointer; opacity: .65; transition: opacity .2s, border-color .2s;
}
.rv .rv-miniature button:hover { opacity: 1; }
.rv .rv-miniature button.su { border-color: var(--rm-rosso); opacity: 1; }
.rv .rv-miniature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv .rv-miniature .rv-altre { opacity: 1; }
.rv .rv-miniature .rv-altre img { filter: brightness(.35); }
.rv-altre span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--rm-mono); font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.rv-suggerimento { margin: 10px 0 0; }

.rv-info-su { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rv .rv-info h1 { font-size: clamp(34px, 4vw, 54px); font-weight: 700; margin: 20px 0 8px; }
.rv-cartellino { margin: 24px 0; padding: 18px 22px; border: 1px solid var(--rm-bordo); background: rgba(12,17,19,.88); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.rv-cartellino small { display: block; font-size: 11.5px; }
.rv-prezzo-grande { font-size: 40px; }
.rv-prezzo-grande.rv-prezzo-testo { font-size: 18px; }

.rv table.rv-tecnica { width: 100%; border-collapse: collapse; border: 0; margin: 0; }
.rv .rv-tecnica th, .rv .rv-tecnica td { padding: 11px 0; border: 0; border-bottom: 1px solid var(--rm-bordo); text-align: left; vertical-align: top; background: transparent; }
.rv .rv-tecnica th { width: 42%; font-family: var(--rm-mono) !important; font-weight: 400; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-tenue); }
.rv .rv-tecnica td { font-family: var(--rm-titoli) !important; font-size: 18px; color: #fff; letter-spacing: .02em; }

.rv-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.rv-azioni .rv-btn-pieno { grid-column: 1 / -1; }
.rv-avviso-venduta { margin-top: 24px; padding: 20px 22px; border: 1px solid rgba(220,0,37,.45); background: rgba(220,0,37,.06); }
.rv-avviso-venduta p { margin: 0 0 14px; color: #fff; }

.rv-dett-basso { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; padding-top: 54px; border-top: 1px solid var(--rm-bordo); }
.rv-dett-basso.rv-una-colonna { grid-template-columns: minmax(0, 720px); }
.rv .rv-dett-basso h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; margin: 24px 0 20px; }
.rv-testo p { margin: 0 0 14px; max-width: 60ch; }

/* Modulo: quello della pagina Contatti, piu' il riquadro della moto. */
.rv .rv-modulo { max-width: none; margin-top: 0; background: rgba(12,17,19,.9); border: 1px solid var(--rm-bordo); padding: 30px; position: relative; }
.rv-rif { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid rgba(220,0,37,.4); background: rgba(220,0,37,.06); }
.rv .rv-rif img { width: 74px; height: 56px; object-fit: cover; display: block; flex: none; }
.rv-rif b { display: block; font-family: var(--rm-titoli); font-size: 17px; color: #fff; font-weight: 500; letter-spacing: .02em; }
.rv-nota-recapito { margin: -6px 0 0; font-size: 12px; }
/* Il sito rende a pillola ogni pulsante di invio, con !important: qui il
   mockup approvato lo vuole squadrato e a tutta larghezza, come gli altri. */
.rv .rv-modulo .rv-invia { justify-self: stretch; width: 100%; border-radius: 0 !important; padding: 16px 20px !important; letter-spacing: .16em !important; }

@media (max-width: 980px) {
  .rv-griglia { grid-template-columns: 1fr 1fr; }
  .rv-dett-alto, .rv-dett-basso { grid-template-columns: 1fr; gap: 34px; }
  .rv-eroe .rv-w { padding-top: 110px; }
  .rv-dettaglio { padding-top: 110px; }
}
@media (max-width: 640px) {
  .rv-griglia { grid-template-columns: 1fr; }
  .rv-azioni { grid-template-columns: 1fr; }
  .rv .rv-modulo { padding: 20px; }
  .rv-prezzo-grande { font-size: 32px; }
}

/* --- pulsante "Moto in vendita" in testata --------------------------------
   Gemello dello "Scrivici" (stesso widget, stesse misure), in arancio.
   Il sito forza il rosso su ogni .elementor-button con !important: per
   cambiarne il colore serve la stessa forza e un selettore piu' preciso. */
:root { --rm-arancio: #F36B1C; }

/* Lo spazio fra i due pulsanti lo da' gia' il contenitore (15px). */

/* Con "Moto in vendita" su due righe i pulsanti affiancati lasciano al
   menu lo spazio per stare su due righe da 1200 pixel in su (misurato a
   1200, 1280, 1366). Sotto, la testata si allungherebbe (1100) o il menu si
   sbriciolerebbe sopra il titolo (1024): li' i pulsanti si impilano, piu'
   compatti, e l'arancio torna su una riga sola perche' la colonna resti
   pulita. Nella riga della testata (100px) ci stanno. */
@media (max-width: 1199px) {
  .elementor-element-403745c:has(.rm-pulsante-vendita) {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .elementor-element-403745c:has(.rm-pulsante-vendita) .elementor-button {
    display: flex;
    justify-content: center;
    padding: 9px 18px !important;
    font-size: 12.5px !important;
  }
  .elementor-element-403745c .elementor-widget.rm-pulsante-vendita .elementor-button {
    white-space: nowrap;
    width: auto;
    line-height: 1.25;
    padding: 9px 18px !important;
  }
}

.elementor-widget.rm-pulsante-vendita .elementor-button {
  background-color: var(--rm-arancio) !important;
  color: #FFFFFF !important;
}

/* Su due righe, "MOTO IN / VENDITA": il pulsante si stringe e ruba meno
   spazio al menu. Nel testo fra MOTO e IN c'e' uno spazio che non va a
   capo, e la larghezza minima spezza la riga nell'unico punto rimasto.
   Carattere, interlinea e margini sono calcolati perche' resti alto
   quanto lo Scrivici accanto. */
.elementor-widget.rm-pulsante-vendita .elementor-button {
  white-space: normal;
  width: min-content;
  text-align: center;
  line-height: 1.05;
  font-size: 13.5px !important;
  padding: 7px 24px !important;
}

.elementor-widget.rm-pulsante-vendita .elementor-button:hover {
  background-color: #FFFFFF !important;
  color: var(--rm-nero-2) !important;
}