/* =============================================================
   LE TRE OFFERTE — l'apertura della home (i pannelli: dal 01/11/2026 sera, assets/css/apertura.css),
   /blades-club/ (premi a scelta, invito), /dovedi-priyatel/ e gli strumenti da provare (01/11/2026, ramo
   a-home-offerte; HTML in inc/offerte.php, parts/apertura.php, negozio/club.php, offerte/amico.php; script in
   assets/js/offerte.js).
   Lo stile è quello della home e di /junior (contenuti/stile-lusso.md): nero profondo, il rosso del marchio come
   luce, filetti da 1 px, Barlow Condensed 700 per titoli e cifre, Inter per il testo.
   Regole: si anima solo transform e opacity; prefers-reduced-motion ferma tutto; nessun backdrop-filter;
   testo rosso = #fb3d48 (accent-red-testo), pieni = #B0111E; mai testo sotto il bianco .56 su nero;
   ogni cosa toccabile ≥ 44 px; il fuoco da tastiera si vede sempre.
   ============================================================= */

.of-tool, .of-page, .of-teaser, .ap {
  --of-red:     var(--accent-red, #B0111E);
  --of-red-hi:  var(--accent-red-testo, #fb3d48);
  --of-t2:      rgba(255, 255, 255, .72);
  --of-t3:      rgba(255, 255, 255, .56);
  --of-line:    rgba(255, 255, 255, .12);
  --of-line-2:  rgba(255, 255, 255, .07);
  --of-ease:    cubic-bezier(.16, 1, .3, 1);
  --of-display: 'Barlow Condensed', sans-serif;
  --of-bronze:  #dc9d6e;
  --of-silver:  #d3d8df;
  --of-gold:    #e8c98d;
}

/* =============================================================
   I PRODOTTI DEL CLUB A CARTE (blades_off_mazzo_prodotti, il mazzo del tema a colori). La sezione «Оферти» della
   home non c'è più (01/11/2026 sera: l'apertura, assets/css/apertura.css): oggi nessuna pagina stampa il mazzo dei
   prodotti, la funzione e il suo aspetto restano pronti.
   ============================================================= */
/* la didascalia della carta prodotto: punti in alto, nome e prezzo da socio in basso (sopra la foto chiara, su fondo scuro) */
.of-mz .mz-cap.of-mz__cap {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px;
  padding: 14px 14px 13px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, .2) 38%, rgba(10, 10, 10, .9) 100%);
}
.of-mz__punti {
  margin-bottom: 4px; padding: 5px 10px; border-radius: 999px;
  background: var(--of-red); color: #fff; font: 600 11px/1.2 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.of-mz__nome { font: 700 21px/1.02 var(--of-display); text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.of-mz__u { text-transform: none; }
.of-mz__prezzo { display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; color: #fff; }
.of-mz__prezzo b { font: 700 26px/1 var(--of-display); }
.of-mz__prezzo i { font-style: normal; font-weight: 700; font-size: 14px; color: var(--of-red-hi); margin-left: -6px; }
.of-mz__prezzo s { font-size: 13px; color: rgba(255, 255, 255, .78); }

/* le due corsie dell'invito: il tuo amico / tu */
.of-corsie { display: grid; gap: 12px; margin-top: 26px; }
.of-corsia { padding: 16px 16px 6px; border: 1px solid var(--of-line); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.of-corsia--tu { border-color: rgba(251, 61, 72, .4); background: rgba(176, 17, 30, .08); }
.of-corsia__chi { margin-bottom: 6px; font: 600 12px/1.3 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--of-t2); }
.of-corsia--tu .of-corsia__chi { color: var(--of-red-hi); }
.of-corsia__r { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--of-line-2); }
.of-corsia__r b { font: 700 19px/1.1 var(--of-display); text-transform: uppercase; color: #fff; letter-spacing: .01em; }
.of-corsia__r span { font-size: 14px; line-height: 1.5; color: var(--of-t2); }

/* =============================================================
   GLI STRUMENTI — comune
   ============================================================= */
.of-tool { color: #fff; }
.of-tool fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.of-tool__k {
  display: block; margin-bottom: 12px; padding: 0;
  font: 600 12px/1.4 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--of-t2);
}
.of-tool__nota { margin-top: 16px; font-size: 12.5px; line-height: 1.55; color: var(--of-t3); max-width: 40em; }
/* l'input vero resta (tastiera, lettore di schermo, senza JS), invisibile: si vede il disegno accanto */
.of-tool input[type="checkbox"], .of-tool input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}

/* ---------- l'ora junior ---------- */
.of-ora__scelte { border-top: 1px solid var(--of-line); }
.of-ora__scelte .of-tool__k { padding-top: 16px; }
.of-ora__fisso, .of-ora__voce {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 0;
  border-bottom: 1px solid var(--of-line); font: 700 19px/1.15 var(--of-display); text-transform: uppercase; color: #fff;
}
.of-ora__voce { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.of-ora__fisso small { margin-left: auto; font: 600 11px/1.2 'Inter', sans-serif; letter-spacing: .18em; color: var(--of-t3); }
.of-ora__box {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, .42); background: transparent; color: transparent;
  transition: none;
}
.of-ora__box svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.of-ora__voce input:checked + .of-ora__box { background: var(--of-red); border-color: var(--of-red); color: #fff; }
.of-ora__fisso .of-ora__box { background: rgba(176, 17, 30, .45); border-color: rgba(251, 61, 72, .6); color: #fff; }
.of-ora__voce input:focus-visible + .of-ora__box { outline: 2px solid #fff; outline-offset: 3px; }
.of-ora__voce:hover .of-ora__box { border-color: rgba(255, 255, 255, .8); }
.of-ora__conti { display: grid; gap: 16px; margin-top: 20px; }
.of-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 12px; }
.of-bar__k { font: 600 12px/1.3 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--of-t2); }
.of-bar--jr .of-bar__k { color: #fff; }
.of-bar__v { display: flex; align-items: flex-start; font: 700 34px/.85 var(--of-display); color: #fff; font-variant-numeric: tabular-nums; }
.of-bar__v i { font-style: normal; font-size: .42em; line-height: 1; margin-left: .08em; color: var(--of-red-hi); }
.of-bar--top .of-bar__v { color: rgba(255, 255, 255, .78); }
.of-bar__t { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.of-bar__f {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--w, 0));
  background: rgba(255, 255, 255, .42); transition: transform .7s var(--of-ease);
}
.of-bar--jr .of-bar__f { background: linear-gradient(90deg, #a00f1b, var(--of-red-hi)); box-shadow: 0 0 18px rgba(251, 61, 72, .45); }
.of-ora__esito { margin-top: 2px; font: 700 26px/1.05 var(--of-display); text-transform: uppercase; color: #fff; }
.of-ora__esito.is-risp { color: var(--of-red-hi); }

/* ---------- il selettore dei punti ---------- */
.of-chips + .of-chips { margin-top: 22px; }
.of-chips__fila { display: flex; flex-wrap: wrap; gap: 8px; }
.of-chip { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.of-chip span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .03);
  font: 600 14px/1.2 'Inter', sans-serif; color: #fff; white-space: nowrap;
  transition: transform .4s var(--of-ease);
}
.of-chip--num span { min-width: 64px; font-variant-numeric: tabular-nums; }
.of-chip:hover span { border-color: rgba(255, 255, 255, .5); }
.of-chip input:checked + span { background: var(--of-red); border-color: var(--of-red); box-shadow: 0 12px 26px -14px rgba(176, 17, 30, .95); }
.of-chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.of-chip:active span { transform: scale(.96); }
.of-sim__esito { margin-top: 26px; }
.of-sim__livello {
  position: relative; padding: 16px 18px 16px 22px; border-radius: 10px;
  border: 1px solid var(--of-line); background: rgba(255, 255, 255, .03);
}
.of-sim__livello::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 3px 3px 0; background: var(--of-bronze); }
.of-sim__livello--silver::before { background: var(--of-silver); }
.of-sim__livello--gold::before { background: var(--of-gold); }
.of-sim__lk { font: 600 11px/1.3 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--of-t2); }
.of-sim__lv { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.of-sim__lv b { font: 700 40px/.9 var(--of-display); text-transform: uppercase; color: var(--of-bronze); }
.of-sim__livello--silver .of-sim__lv b { color: var(--of-silver); }
.of-sim__livello--gold .of-sim__lv b { color: var(--of-gold); }
.of-sim__x { font: 700 26px/1 var(--of-display); color: #fff; }
/* i punti di OGNI visita (01/11 sera, il proprietario: «più viene, più punti prende» — mai quante visite mancano):
   la cifra grande, poi la scala dei tre livelli al prezzo scelto, accesa fino al tuo livello (scaleY, uno dopo l'altro) */
.of-sim__per { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-top: 14px; }
.of-sim__per b { display: inline-block; font: 700 54px/.85 var(--of-display); color: var(--of-red-hi); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.of-sim__per span { font: 600 12px/1.35 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.of-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.of-st__l { --c: var(--of-bronze); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.of-st__l--silver { --c: var(--of-silver); }
.of-st__l--gold { --c: var(--of-gold); }
.of-st__v { font: 700 26px/1 var(--of-display); color: var(--of-t2); font-variant-numeric: tabular-nums; }
.of-st__b {
  position: relative; display: block; height: calc(var(--h, 1) * 72px); overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3); border-radius: 6px 6px 3px 3px;
}
.of-st__f {
  position: absolute; inset: -1px; transform-origin: 50% 100%; transform: scaleY(0); opacity: .42;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .28)), var(--c);
  transition: transform .65s var(--of-ease), opacity .4s ease; transition-delay: calc(var(--i, 0) * 90ms);
}
.of-st__l.is-on .of-st__f { transform: scaleY(1); }
.of-st__l.is-cur .of-st__f { opacity: 1; }
.of-st__l.is-on .of-st__v { color: #fff; }
.of-st__l.is-cur .of-st__v { color: var(--c); }
.of-st__n { font: 700 15px/1.1 var(--of-display); letter-spacing: .02em; text-transform: uppercase; color: var(--of-t2); overflow-wrap: anywhere; }
.of-st__l.is-on .of-st__n { color: var(--c); }
.of-st__x { font: 600 11px/1.2 'Inter', sans-serif; letter-spacing: .08em; color: var(--of-t2); font-variant-numeric: tabular-nums; }
.of-sim__gain { margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: #fff; }
.of-sim__next { margin-top: 6px; font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--of-red-hi); }
.of-sim__livello--gold .of-sim__next { color: var(--of-gold); }
.of-sim__sk { margin: 24px 0 0; }
.of-scala { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--of-line); }
.of-scala__r {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-areas: "p t" "p q";
  align-items: center; column-gap: 14px; row-gap: 4px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--of-line);
}
.of-scala__p { grid-area: p; display: flex; flex-direction: column; gap: 2px; }
.of-scala__p b { font: 700 30px/.9 var(--of-display); color: #fff; font-variant-numeric: tabular-nums; }
.of-scala__p small { font: 600 10px/1.2 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--of-t3); }
.of-scala__t { grid-area: t; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.of-scala__n { font: 700 18px/1.12 var(--of-display); text-transform: uppercase; color: #fff; }
.of-scala__s { font-size: 13px; line-height: 1.4; color: var(--of-t2); }
.of-scala__q { grid-area: q; font: 600 12.5px/1.35 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--of-t2); text-wrap: balance; }
.of-scala__r.is-ora .of-scala__q { color: var(--of-red-hi); }
.of-scala__r.is-ora .of-scala__p b { color: var(--of-red-hi); }
/* il taglio gratis: il traguardo del Club, in oro (senza dire in quante visite) */
.of-scala__r.is-meta .of-scala__q, .of-scala__r.is-meta .of-scala__p b { color: var(--of-gold); }
.of-sim__closer { margin-top: 18px; font: 700 21px/1.12 var(--of-display); text-transform: uppercase; color: #fff; text-wrap: balance; }

/* ---------- il contatore degli amici ---------- */
.of-amici__conta { display: flex; align-items: center; justify-content: flex-start; gap: 18px; }
.of-amici__btn {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .4s var(--of-ease);
}
.of-amici__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.of-amici__btn:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); }
.of-amici__btn[data-of-amici-piu] { background: var(--of-red); border-color: var(--of-red); box-shadow: 0 14px 28px -14px rgba(176, 17, 30, .95); }
.of-amici__btn[data-of-amici-piu]:hover { background: #c3131f; }
.of-amici__btn:active { transform: scale(.94); }
.of-amici__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.of-amici__btn[aria-disabled="true"] { opacity: .35; cursor: default; box-shadow: none; }
.of-amici__btn[aria-disabled="true"]:hover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .26); }
.of-amici__btn[data-of-amici-piu][aria-disabled="true"]:hover { background: var(--of-red); border-color: var(--of-red); }
.of-amici__btn[aria-disabled="true"]:active { transform: none; }
.of-amici__n { min-width: 1.6ch; font: 700 72px/.9 var(--of-display); color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.of-amici__esito { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--of-line); }
.of-amici__pct { display: flex; align-items: flex-start; font: 700 clamp(84px, 24vw, 120px)/.8 var(--of-display); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.of-amici__pct i { font-style: normal; font-size: .36em; line-height: 1; margin: .06em 0 0 .06em; color: var(--of-red-hi); }
.of-metro { position: relative; height: 12px; margin: 22px 0 30px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.of-metro__f {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--w, 0));
  background: linear-gradient(90deg, #a00f1b, var(--of-red-hi)); transition: transform .7s var(--of-ease);
}
.of-metro.is-pieno .of-metro__f { box-shadow: 0 0 22px rgba(251, 61, 72, .55); }
.of-metro__m { position: absolute; top: calc(100% + 8px); font: 600 11px/1 'Inter', sans-serif; letter-spacing: .08em; color: var(--of-t2); transform: translateX(-50%); }
.of-metro__m::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 1px; height: 10px; background: rgba(255, 255, 255, .35); }
.of-metro__m--meta { left: 50%; }
.of-metro__m--max { left: auto; right: 0; transform: none; }
.of-metro__m--max::before { left: auto; right: 0; }
.of-amici__paga { font: 700 24px/1.1 var(--of-display); text-transform: uppercase; color: #fff; }
.of-amici__punti { margin-top: 6px; font: 600 14px/1.4 'Inter', sans-serif; color: var(--of-red-hi); }
.of-amici__nota { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--of-t2); }

/* =============================================================
   /dovedi-priyatel/ (e la scheda dell'invito su /blades-club/)
   ============================================================= */
.of-biglietto {   /* tre cifre in una tessera, come la carta del Club (negozio.css, .ng-tessera) */
  position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: 460px; margin: 0; padding: 8px 22px; list-style: none;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .16);
  background: radial-gradient(120% 90% at 0% 0%, rgba(251, 61, 72, .3), rgba(251, 61, 72, 0) 58%),
              linear-gradient(140deg, #222 0%, #0d0d0d 55%, #1b1b1b 100%);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .9), 0 18px 50px -22px rgba(176, 17, 30, .9), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.of-biglietto__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chi v" "t v"; align-items: center; column-gap: 16px; row-gap: 4px; padding: 18px 0; }
.of-biglietto__r + .of-biglietto__r { border-top: 1px dashed rgba(255, 255, 255, .18); }
.of-biglietto__chi { grid-area: chi; font: 600 12px/1.3 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--of-t2); }
.of-biglietto__r--tu .of-biglietto__chi { color: var(--of-red-hi); }
.of-biglietto__v { grid-area: v; display: flex; align-items: flex-start; color: #fff; }
.of-biglietto__v .ps-num { font: 700 clamp(48px, 13vw, 64px)/.85 var(--of-display); letter-spacing: -.02em; }
.of-biglietto__v .ps-cur { font: 700 22px/1 var(--of-display); color: var(--of-red-hi); margin-left: 2px; }
.of-biglietto__v small { align-self: flex-start; margin: 4px 6px 0 0; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--of-t2); }
.of-biglietto__t { grid-area: t; font-size: 14px; line-height: 1.45; color: var(--of-t2); }
.of-inf { width: 64px; height: 32px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* le tappe: una linea a sinistra (telefono), due colonne dal computer */
.of-tappe { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: of-tappa; }
.of-tappa {
  position: relative; counter-increment: of-tappa; padding: 20px 18px 8px 58px;
  border: 1px solid var(--of-line); border-radius: 10px; background: rgba(255, 255, 255, .02);
}
.of-tappa::before {
  content: counter(of-tappa, decimal-leading-zero); position: absolute; left: 18px; top: 18px;
  font: 700 26px/1 var(--of-display); color: var(--of-red-hi);
}
.of-tappa--hot { border-color: rgba(251, 61, 72, .55); background: radial-gradient(90% 70% at 100% 0%, rgba(176, 17, 30, .2), transparent 70%), rgba(255, 255, 255, .02); }
.of-tappa__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.of-tappa__t { font: 700 26px/1 var(--of-display); text-transform: uppercase; color: #fff; }
.of-tappa__tag {
  padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(251, 61, 72, .5); background: rgba(176, 17, 30, .16);
  font: 600 11px/1.2 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.of-tappa__quando { width: 100%; order: 3; font-size: 13px; color: var(--of-t2); }
.of-tappa__corsie { display: grid; }
.of-tappa__c { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--of-line-2); }
.of-tappa__c b { font: 600 11px/1.3 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--of-t2); }
.of-tappa__c--tu b { color: var(--of-red-hi); }
.of-tappa__c span { font-size: 15px; line-height: 1.55; color: #fff; }
.of-avviso {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; padding: 18px 18px;
  border: 1px solid rgba(251, 61, 72, .4); border-left: 4px solid var(--of-red-hi); border-radius: 10px; background: rgba(176, 17, 30, .1);
}
.of-avviso svg { flex: none; width: 24px; height: 24px; margin-top: 1px; fill: none; stroke: var(--of-red-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.of-avviso p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.of-avviso b { color: #fff; }

/* l'esempio in euro e il contatore */
.of-page .ps-head > .ps-lead { margin-top: 18px; }
.of-esempio { display: grid; gap: 28px; }
.of-conto { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--of-line); }
.of-conto__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chi v" "t t"; align-items: center; gap: 6px 16px; padding: 18px 0; border-bottom: 1px solid var(--of-line); }
.of-conto__chi { grid-area: chi; font: 600 12px/1.3 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--of-t2); }
.of-conto__r--tu .of-conto__chi { color: var(--of-red-hi); }
.of-conto__v { grid-area: v; display: flex; align-items: flex-start; gap: 0 8px; color: #fff; }
.of-conto__v .ps-num { font: 700 44px/.85 var(--of-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.of-conto__v .ps-cur { font: 700 18px/1 var(--of-display); color: var(--of-red-hi); margin-left: -6px; }
.of-conto__v s { align-self: center; font-size: 15px; color: rgba(255, 255, 255, .7); }
.of-conto__piu { align-self: center; margin-left: 6px; padding: 4px 10px; border-radius: 999px; background: var(--of-red); font: 600 12px/1.2 'Inter', sans-serif; letter-spacing: .08em; }
.of-conto__t { grid-area: t; font-size: 15px; line-height: 1.55; color: var(--of-t2); }
.of-esempio__tool { padding: 24px 20px 26px; border: 1px solid rgba(251, 61, 72, .45); border-radius: 10px; background: radial-gradient(90% 60% at 100% 0%, rgba(176, 17, 30, .18), transparent 70%), #0e0e0e; }
.of-esempio__t { margin-bottom: 18px; font: 700 clamp(26px, 7vw, 34px)/1 var(--of-display); text-transform: uppercase; color: #fff; }
.of-act-centro { margin-top: 36px; }

/* /blades-club/: la sezione dell'invito */
.of-teaser { display: grid; gap: 34px; }
.of-teaser__head .ps-h2 span { display: inline; }
.of-teaser__head .ps-lead { margin-top: 18px; }
.of-teaser__head .ps-links { margin-top: 22px; }
.of-biglietto--teaser { max-width: 520px; }

/* =============================================================
   TABLET (≥ 600)
   ============================================================= */
@media (min-width: 600px) {
  .of-corsie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-scala__r { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "p t q"; }
  .of-scala__q { text-align: right; max-width: 12em; }
  .of-tappa { padding: 24px 24px 10px 70px; }
  .of-tappa::before { left: 22px; top: 22px; font-size: 30px; }
  .of-esempio__tool { padding: 30px 30px 32px; }
}

/* =============================================================
   COMPUTER (≥ 900)
   ============================================================= */
@media (min-width: 900px) {
  .of-tappe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .of-esempio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .of-teaser { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
  .of-biglietto--teaser { justify-self: end; }
  .of-page .of-biglietto { justify-self: end; padding: 10px 28px; }
  /* /blades-club/: il selettore largo in due colonne pari — a sinistra le scelte e il risultato (livello, punti a
     visita, la scala), a destra i premi, la frase e la nota */
  .ps-page .of-sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .ps-page .of-sim__b > .of-sim__sk { margin-top: 0; }
}

/* telefoni stretti (320–359) */
@media (max-width: 359px) {
  .of-chip span { padding: 0 13px; font-size: 13px; }
  .of-amici__conta { gap: 12px; }
  .of-tappa { padding-left: 50px; }
}

/* ---------- la tessera del Club (01/11/2026 sera, l'apertura della home: l'idea della proposta B) ----------
   Tre scelte, una per livello; la tessera prende il metallo del livello (il colore cambia di colpo: classe) e i punti di
   ogni visita. La tessera si inclina appena e il riflesso passa (offerte.js, WAAPI: transform e opacity). */
.of-tes__fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.of-tes__chip { display: flex; }
.of-tes__chip span { width: 100%; min-height: 48px; padding: 0 8px; white-space: normal; text-align: center; line-height: 1.2; }
.of-tes__esito { margin-top: 18px; }
.of-tes__carta {
  --tes-metal: var(--of-silver); --tes-glow: rgba(211, 216, 223, .32);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca benv" "liv liv" "per per";
  align-items: start; gap: 6px 12px; max-width: 440px; padding: 18px 20px 20px; border-radius: 16px;
  border: 1px solid var(--tes-metal);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .028) 0 2px, rgba(255, 255, 255, 0) 2px 9px),
    radial-gradient(90% 70% at 100% 0%, var(--tes-glow), transparent 70%),
    linear-gradient(160deg, #1d1d1d, #0d0d0d 70%);
  box-shadow: 0 26px 50px -30px var(--tes-glow), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.of-tes__carta--bronze { --tes-metal: var(--of-bronze); --tes-glow: rgba(220, 157, 110, .3); }
.of-tes__carta--gold { --tes-metal: var(--of-gold); --tes-glow: rgba(232, 201, 141, .34); }
.of-tes__luce {
  position: absolute; top: 0; bottom: 0; left: 0; width: 42%; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
  transform: translateX(-60%) skewX(-18deg);
}
.of-tes__marca { grid-area: marca; margin: 0; font: 700 17px/1.1 var(--of-display); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.of-tes__benv { grid-area: benv; margin: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.of-tes__benv b { font: 700 26px/.9 var(--of-display); color: #fff; }
.of-tes__benv span { max-width: 12em; font: 600 10px/1.3 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--of-t2); }
.of-tes__liv { grid-area: liv; margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.of-tes__lk { width: 100%; font: 600 11px/1.3 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--of-t2); }
.of-tes__liv b { font: 700 40px/.95 var(--of-display); text-transform: uppercase; letter-spacing: .01em; color: var(--tes-metal); }
.of-tes__x { font: 700 22px/1 var(--of-display); color: #fff; }
.of-tes__per { grid-area: per; margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; }
.of-tes__per b { display: inline-block; font: 700 48px/.9 var(--of-display); color: #fff; font-variant-numeric: tabular-nums; }
.of-tes__per span { font: 600 12px/1.35 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.of-tes__gain { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #fff; }

/* =============================================================
   MOVIMENTO — solo transform/opacity; «riduci movimento» ferma tutto
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .of-bar__f, .of-metro__f, .of-chip span, .of-ora__box, .of-amici__btn, .of-sim__livello::before, .of-st__f { transition: none; }
}