/* [1.5.911] Página do projeto de videoclipe no site: estrutura, lista, cabeçalho, «E agora?», Etapa, O que falta,
   primitivas de cartão (.pjs-card…) e relógios (data-pjs-clock), prefixo pjs-. Dono: tarefa B1a.
   Desenho do handoff do titular (dist/design_handoff_site_projeto_videoclipe; spec §2-§13, §23). Tudo dentro de #rmbz-vip.
   As primitivas vx- (bolacha, tons, keyframes, movimento reduzido) vêm de vip-expressive.css e não se redefinem aqui. */

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   1. PRIMITIVAS DE CARTÃO (usadas também por vip-project-cards.css e vip-project-chat.css)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
#rmbz-vip .pjs-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px; min-width:0; padding:24px; border:0; border-radius:32px; background:var(--surface); color:var(--text); }
#rmbz-vip .pjs-card--lg{ padding:26px 28px; }
#rmbz-vip .pjs-card--soft{ background:var(--tone-soft,var(--elev)); }
/* O conteúdo fica por cima das bolachas decorativas e do brilho (:where para não pesar na especificidade). */
#rmbz-vip .pjs-card > :where(:not(.vx-deco):not(.vx-sheen)){ position:relative; }
#rmbz-vip .pjs-card-head{ display:flex; align-items:center; gap:12px; min-width:0; }
#rmbz-vip .pjs-card-head > .pjs-card-titles{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
#rmbz-vip .pjs-sq{ width:48px; height:48px; flex:none; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:var(--tone-soft,var(--elev)); color:var(--tone-ink,var(--text2)); }
#rmbz-vip .pjs-sq > .ms{ font-size:24px; font-variation-settings:'FILL' 1; }
#rmbz-vip .pjs-sq--surface{ background:var(--surface); }
#rmbz-vip .pjs-kicker{ font:700 12px/1.3 'Geist',system-ui,sans-serif; color:var(--muted); }
#rmbz-vip .pjs-h{ margin:0; font:800 20px/1.1 'Bricolage Grotesque','Geist',sans-serif; color:var(--text); letter-spacing:-.2px; }
#rmbz-vip .pjs-sub{ margin:0; font:400 12.5px/1.45 'Geist',system-ui,sans-serif; color:var(--text2); }

/* Selos (36 px) e chips (32 px): tom pela classe vx-t-* do próprio selo. */
#rmbz-vip .pjs-pill{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px 0 10px; border-radius:100px; background:var(--tone-soft,var(--surface)); color:var(--tone-ink,var(--text)); font:700 12.5px/1 'Geist',system-ui,sans-serif; white-space:nowrap; max-width:100%; }
#rmbz-vip .pjs-pill > .ms{ font-size:18px; font-variation-settings:'FILL' 1; flex:none; }
#rmbz-vip .pjs-pill--surface{ background:var(--surface); color:var(--text); }
#rmbz-vip .pjs-pill--surface > .ms{ color:var(--tone-ink,var(--brand-ink)); }
#rmbz-vip .pjs-chip{ display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px 0 8px; border-radius:100px; background:var(--tone-soft,var(--elev)); color:var(--tone-ink,var(--text2)); font:700 12px/1 'Geist',system-ui,sans-serif; white-space:nowrap; max-width:100%; }
#rmbz-vip .pjs-chip > .ms{ font-size:17px; font-variation-settings:'FILL' 1; flex:none; }
#rmbz-vip .pjs-pill > .pjs-ellip, #rmbz-vip .pjs-chip > .pjs-ellip{ overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* Botões (44 px; contorno do ícone por omissão). */
#rmbz-vip .pjs-btn{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px 0 12px; border:0; border-radius:100px; background:var(--highest); color:var(--text); font:700 13px/1.15 'Geist',system-ui,sans-serif; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color calc(200ms*var(--k,1)) var(--ease-effect,ease), transform calc(150ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-btn > .ms{ font-size:19px; flex:none; }
#rmbz-vip a.pjs-btn, #rmbz-vip a.pjs-btn:hover{ color:var(--text); text-decoration:none; }
#rmbz-vip .pjs-btn:hover{ background:color-mix(in srgb,var(--highest) 82%,var(--text)); }
#rmbz-vip .pjs-btn[disabled], #rmbz-vip .pjs-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
#rmbz-vip .pjs-btn--brand, #rmbz-vip a.pjs-btn--brand, #rmbz-vip a.pjs-btn--brand:hover{ background:var(--brand); color:var(--on-brand); }
#rmbz-vip .pjs-btn--brand:hover{ background:color-mix(in srgb,var(--brand) 88%,#000); }
#rmbz-vip .pjs-btn--info, #rmbz-vip a.pjs-btn--info, #rmbz-vip a.pjs-btn--info:hover{ background:var(--info); color:#FFFFFF; }
#rmbz-vip .pjs-btn--info:hover{ background:color-mix(in srgb,var(--info) 88%,#000); }
#rmbz-vip .pjs-btn--danger, #rmbz-vip a.pjs-btn--danger, #rmbz-vip a.pjs-btn--danger:hover{ background:var(--danger); color:#FFFFFF; }
#rmbz-vip .pjs-btn--danger:hover{ background:color-mix(in srgb,var(--danger) 88%,#000); }
#rmbz-vip .pjs-btn--surface, #rmbz-vip a.pjs-btn--surface, #rmbz-vip a.pjs-btn--surface:hover{ background:var(--surface); color:var(--text); }
#rmbz-vip .pjs-btn--fill > .ms, #rmbz-vip .pjs-btn--brand > .ms, #rmbz-vip .pjs-btn--info > .ms, #rmbz-vip .pjs-btn--danger > .ms{ font-variation-settings:'FILL' 1; }
/* Botão de pagar (60 px, sombra Brand; encolhe para um círculo enquanto a página nova não chega). */
#rmbz-vip .pjs-btn--pay{ position:relative; overflow:hidden; flex:none; height:60px; min-height:60px; width:250px; max-width:100%; padding:0 22px; border-radius:100px; background:var(--brand); color:var(--on-brand); font:700 15.5px/1 'Geist',system-ui,sans-serif; gap:8px; box-shadow:0 8px 22px var(--brand-shadow,rgba(245,185,0,.4));
  transition:width calc(400ms*var(--k,1)) var(--spring-fast,ease), border-radius calc(400ms*var(--k,1)) var(--spring-fast,ease), padding calc(400ms*var(--k,1)) var(--spring-fast,ease), background-color calc(250ms*var(--k,1)) var(--ease-effect,ease), box-shadow calc(250ms*var(--k,1)) var(--ease-effect,ease), transform calc(120ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip a.pjs-btn--pay, #rmbz-vip a.pjs-btn--pay:hover{ color:var(--on-brand); }
#rmbz-vip .pjs-btn--pay > .ms{ font-size:22px; font-variation-settings:'FILL' 1; }
#rmbz-vip .pjs-btn--pay:hover{ background:color-mix(in srgb,var(--brand) 90%,#000); }
#rmbz-vip .pjs-btn--pay:active{ transform:scale(.97); }
#rmbz-vip .pjs-btn--pay.is-receipt, #rmbz-vip a.pjs-btn--pay.is-receipt, #rmbz-vip a.pjs-btn--pay.is-receipt:hover{ background:var(--surface); color:var(--text); box-shadow:none; }
#rmbz-vip .pjs-btn--pay .pjs-btn-load{ display:none; }
#rmbz-vip .pjs-btn--pay.is-loading{ width:60px; padding:0; border-radius:50%; background:var(--brand); color:var(--on-brand); box-shadow:0 8px 22px var(--brand-shadow,rgba(245,185,0,.4)); pointer-events:none; }
#rmbz-vip .pjs-btn--pay.is-loading > :not(.pjs-btn-load){ display:none; }
#rmbz-vip .pjs-btn--pay.is-loading .pjs-btn-load{ display:block; }

/* Linha com círculo de 36 px (contrato, documentos, dias de filmagem). */
#rmbz-vip .pjs-row{ display:flex; align-items:center; gap:12px; min-width:0; padding:12px 14px; border-radius:18px; background:var(--elev); }
#rmbz-vip .pjs-row-ico{ width:36px; height:36px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--tone,var(--muted)); color:var(--tone-on,#FFFFFF); }
#rmbz-vip .pjs-row-ico > .ms{ font-size:19px; font-variation-settings:'FILL' 1; }
#rmbz-vip .pjs-row-copy{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
#rmbz-vip .pjs-row-copy > b{ font:700 13.5px/1.3 'Geist',system-ui,sans-serif; color:var(--text); }
#rmbz-vip .pjs-row-copy > small{ font:400 12px/1.4 'Geist',system-ui,sans-serif; color:var(--text2); }

/* Aviso dentro de um cartão (ícone + texto no tom). */
#rmbz-vip .pjs-note{ display:flex; align-items:flex-start; gap:8px; padding:12px 14px; border-radius:18px; background:var(--tone-soft,var(--elev)); color:var(--tone-ink,var(--text2)); font:500 13px/1.45 'Geist',system-ui,sans-serif; }
#rmbz-vip .pjs-note > .ms{ font-size:18px; flex:none; margin-top:1px; font-variation-settings:'FILL' 1; }
#rmbz-vip .pjs-note b{ font-weight:700; }

/* Linha de dois cartões lado a lado. */
#rmbz-vip .pjs-row2{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; min-width:0; }
#rmbz-vip .pjs-row2 > *{ min-width:0; }

/* ── Relógios (contrato único data-pjs-clock): caixas de largura fixa em JetBrains Mono, sem mudar de largura ao contar.
   Por omissão o desenho do prazo de pagamento (fundo e valor no tom do contentor); --sm é o do «Término previsto». ── */
#rmbz-vip .pjs-clock{ display:flex; gap:5px; flex:none; }
#rmbz-vip .pjs-clock-box{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:52px; padding:8px 4px; border-radius:14px; background:var(--tone-soft,var(--elev)); transition:background-color calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-clock-v{ display:block; min-width:2.2ch; text-align:center; font:700 20px/1.1 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:var(--tone-ink,var(--text)); transition:color calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-clock-u{ display:block; font:600 10px/1.2 'Geist',system-ui,sans-serif; font-style:normal; color:var(--text2); }
#rmbz-vip .pjs-clock--sm{ gap:4px; }
#rmbz-vip .pjs-clock--sm .pjs-clock-box{ min-width:46px; padding:6px 4px; border-radius:12px; background:var(--surface); }
#rmbz-vip .pjs-clock--sm .pjs-clock-v{ font-size:18px; color:var(--text); }
#rmbz-vip .pjs-clock--sm .pjs-clock-u{ font-size:9.5px; color:var(--muted); }
/* Barra do prazo (o que resta, a encolher). */
#rmbz-vip .pjs-bar{ position:relative; flex:1 1 auto; height:8px; border-radius:8px; background:var(--highest); overflow:hidden; }
#rmbz-vip .pjs-bar > i{ display:block; height:100%; border-radius:8px; background:var(--tone,var(--warning)); transition:width calc(900ms*var(--k,1)) linear, background-color calc(300ms*var(--k,1)) var(--ease-effect,ease); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   2. SECÇÃO E ESTRUTURA (spec §8: ≥ 1080 lateral de 440 px fixa; 700-1079 e < 700 lateral por baixo, a toda a largura)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Tokens que as partes antigas da secção usavam e que o painel não define (INV A9). */
#rmbz-vip [data-sect="projetos"]{ --card:var(--surface); --muted-soft:var(--elev); }
/* No detalhe o cabeçalho da secção sai (o título é o do projeto); na lista continua. */
#rmbz-vip:has(.pjs-detail) .vip-page-head{ display:none; }
html body #rmbz-vip .wrap:has(.pjs-detail){ max-width:1320px; padding:16px 32px 64px; }
#rmbz-vip .pjs{ display:flex; flex-direction:column; gap:20px; min-width:0; color:var(--text); font-family:'Geist',system-ui,sans-serif; }
#rmbz-vip .pjs h2, #rmbz-vip .pjs h3, #rmbz-vip .pjs p{ margin:0; }
#rmbz-vip .pjs-detail{ display:flex; flex-direction:column; gap:20px; min-width:0; }
#rmbz-vip .pjs-cols{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; min-width:0; }
#rmbz-vip .pjs-main{ flex:1 1 600px; min-width:0; display:flex; flex-direction:column; gap:20px; }
#rmbz-vip .pjs-side{ flex:1 1 100%; min-width:0; display:flex; flex-direction:column; gap:20px; }
#rmbz-vip .pjs-detail.is-single .pjs-main{ flex-basis:100%; }
#rmbz-vip .pjs-program:empty{ display:none; }
@media (min-width:1080px){
  #rmbz-vip .pjs-side{ flex:1 1 360px; max-width:440px; position:sticky; top:16px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   3. CABEÇALHO DO PROJETO (C, spec §10)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
#rmbz-vip .pjs-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:8px 0 4px; min-width:0; }
#rmbz-vip .pjs-back, #rmbz-vip a.pjs-back{ width:48px; height:48px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--highest); color:var(--text); text-decoration:none; transition:background-color calc(200ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-back:hover{ background:color-mix(in srgb,var(--highest) 82%,var(--text)); color:var(--text); }
#rmbz-vip .pjs-back > .ms{ font-size:24px; }
#rmbz-vip .pjs-head-titles{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:4px; }
#rmbz-vip .pjs-head-kicker, #rmbz-vip .pjs-lcard-kicker{ display:flex; align-items:center; gap:6px; font:700 12.5px/1.2 'Geist',system-ui,sans-serif; color:var(--brand-ink); }
#rmbz-vip .pjs-head-kicker > .ms, #rmbz-vip .pjs-lcard-kicker > .ms{ font-size:17px; }
#rmbz-vip .pjs-head-dot{ width:8px; height:8px; flex:none; border-radius:50%; background:var(--pj,var(--brand)); box-shadow:0 0 0 3px color-mix(in srgb,var(--pj,var(--brand)) 22%,transparent); }
#rmbz-vip .pjs-head-title{ font:800 44px/1 'Bricolage Grotesque','Geist',sans-serif; letter-spacing:-1px; color:var(--text); overflow-wrap:anywhere; }
#rmbz-vip .pjs-head-pills{ display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
#rmbz-vip .pjs-paychip, #rmbz-vip .pjs-paychip > .ms{ transition:background-color calc(300ms*var(--k,1)) var(--ease-effect,ease), color calc(300ms*var(--k,1)) var(--ease-effect,ease); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   4. «E AGORA?» (A, spec §11): tom do estado no fundo e nas bolachas; brilho; ícone de 84 px; botão de 60 px
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
#rmbz-vip .pjs-hero{ gap:22px; background:var(--tone-soft); container:pjs-hero / inline-size; transition:background-color calc(400ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-hero-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; min-width:0; }
#rmbz-vip .pjs-hero-ico .vx-cookie__bg{ transition:background-color calc(400ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-hero-ico .ms{ font-size:38px; }
#rmbz-vip .pjs-hero-copy{ flex:1 1 280px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
#rmbz-vip .pjs-hero-kicker{ display:flex; align-items:center; gap:6px; font:700 12.5px/1.2 'Geist',system-ui,sans-serif; color:var(--tone-ink); }
#rmbz-vip .pjs-hero-kicker > .ms{ font-size:17px; }
#rmbz-vip .pjs-hero-title{ font:800 32px/1.05 'Bricolage Grotesque','Geist',sans-serif; letter-spacing:-.6px; color:var(--text); overflow-wrap:anywhere; text-wrap:balance; }
#rmbz-vip .pjs-hero-text{ font:400 14.5px/1.5 'Geist',system-ui,sans-serif; color:var(--text2); text-wrap:pretty; }
#rmbz-vip .pjs-hero-notify{ display:inline-flex; align-items:center; gap:6px; margin-top:2px; font:600 12.5px/1.3 'Geist',system-ui,sans-serif; color:var(--tone-ink); }
#rmbz-vip .pjs-hero-notify > .ms{ font-size:17px; }
#rmbz-vip .pjs-live-pill{ align-self:flex-start; }
#rmbz-vip .pjs-live-pill .vx-live-dot{ --tone:var(--danger); }
#rmbz-vip .pjs-hero-cta{ flex:0 1 auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; min-width:0; max-width:100%; }
#rmbz-vip .pjs-btn--hero{ min-height:52px; padding:0 20px 0 16px; font-size:14.5px; }
#rmbz-vip .pjs-btn--hero > .ms{ font-size:21px; font-variation-settings:'FILL' 1; }
#rmbz-vip .pjs-pay-form{ margin:0; display:flex; max-width:100%; }
#rmbz-vip .pjs-hero-locked{ display:flex; align-items:flex-start; gap:6px; max-width:320px; font:500 13px/1.45 'Geist',system-ui,sans-serif; color:var(--text2); }
#rmbz-vip .pjs-hero-locked > .ms{ font-size:18px; color:var(--tone-ink); flex:none; }
#rmbz-vip .pjs-hero-paybar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; }
#rmbz-vip .pjs-hero-facts{ display:flex; flex-direction:column; gap:8px; }
#rmbz-vip .pjs-live-clock{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
#rmbz-vip .pjs-live-clock-v{ min-width:8ch; text-align:right; font:700 30px/1.05 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:var(--text); }
#rmbz-vip .pjs-live-clock-l{ font:600 12px/1.3 'Geist',system-ui,sans-serif; color:var(--text2); }

/* ── Prazo de pagamento dado pela administração (spec §11.4). Último dia: tudo a vermelho e contorno. ── */
#rmbz-vip .pjs-dl{ position:relative; display:flex; flex-direction:column; gap:12px; padding:16px 18px; border-radius:24px; background:var(--surface); box-shadow:0 0 0 2px transparent; transition:box-shadow calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-dl.is-last-day{ --tone:var(--danger); --tone-soft:var(--danger-soft); --tone-ink:var(--danger-ink); box-shadow:0 0 0 2px var(--danger); }
#rmbz-vip .pjs-dl.is-closed{ box-shadow:0 0 0 2px var(--danger); }
#rmbz-vip .pjs-dl-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; }
#rmbz-vip .pjs-dl-ico .ms{ font-size:24px; }
#rmbz-vip .pjs-dl-ico .vx-cookie__bg{ transition:background-color calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-dl-copy{ flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px; }
#rmbz-vip .pjs-dl-kicker{ display:flex; align-items:center; gap:5px; font:700 12px/1.25 'Geist',system-ui,sans-serif; color:var(--tone-ink); }
#rmbz-vip .pjs-dl-kicker > .ms{ font-size:16px; }
#rmbz-vip .pjs-dl-title{ font:800 18px/1.15 'Bricolage Grotesque','Geist',sans-serif; color:var(--text); }
#rmbz-vip .pjs-dl-warn{ display:flex; align-items:center; gap:5px; font:400 12.5px/1.4 'Geist',system-ui,sans-serif; color:var(--text2); }
#rmbz-vip .pjs-dl-warn > .ms{ font-size:15px; color:var(--danger); flex:none; }
#rmbz-vip .pjs-dl-bar{ display:flex; align-items:center; gap:10px; min-width:0; }
#rmbz-vip .pjs-dl-total{ font:600 11.5px/1.2 'Geist',system-ui,sans-serif; color:var(--text2); white-space:nowrap; }
#rmbz-vip .pjs-dl-zero{ display:flex; align-items:center; gap:6px; font:600 12.5px/1.4 'Geist',system-ui,sans-serif; color:var(--danger-ink); }
#rmbz-vip .pjs-dl-zero > .ms{ font-size:17px; animation:vx-spin calc(1.2s*var(--k,1)) linear infinite; }
#rmbz-vip .pjs-dl.is-waiting .pjs-clock-v{ color:var(--text2); }

/* ── Caixas de valores (spec §11.5; O31: 4 colunas com o cartão ≥ 820 px, 2 abaixo) ── */
#rmbz-vip .pjs-money-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-width:0; }
@container pjs-hero (min-width:764px){ #rmbz-vip .pjs-money-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
#rmbz-vip .pjs-money{ display:flex; align-items:center; gap:12px; min-width:0; padding:14px; border-radius:20px; background:var(--surface); }
#rmbz-vip .pjs-money-ico{ width:42px; height:42px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--tone-soft); color:var(--tone-ink); transition:background-color calc(300ms*var(--k,1)) var(--ease-effect,ease), color calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-money-ico > .ms{ font-size:21px; }
#rmbz-vip .pjs-money-copy{ min-width:0; display:flex; flex-direction:column; gap:2px; }
#rmbz-vip .pjs-money-v{ font:700 16px/1.2 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text); transition:color calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-money.is-ink .pjs-money-v{ color:var(--tone-ink); }
#rmbz-vip .pjs-money-l{ font:400 12px/1.3 'Geist',system-ui,sans-serif; color:var(--text2); }
@container pjs-hero (max-width:419px){
  #rmbz-vip .pjs-money{ flex-direction:column; align-items:flex-start; gap:8px; padding:12px; }
  #rmbz-vip .pjs-money-ico{ width:36px; height:36px; }
  #rmbz-vip .pjs-money-ico > .ms{ font-size:19px; }
  #rmbz-vip .pjs-money-v{ font-size:14px; white-space:normal; overflow-wrap:anywhere; }
}
#rmbz-vip .pjs-assumed{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:20px; background:var(--surface); }
#rmbz-vip .pjs-assumed-t{ font:700 12px/1.3 'Geist',system-ui,sans-serif; color:var(--muted); }
#rmbz-vip .pjs-assumed-row{ display:flex; align-items:center; gap:8px; min-width:0; font:500 13px/1.35 'Geist',system-ui,sans-serif; color:var(--text); }
#rmbz-vip .pjs-assumed-row > .ms{ font-size:18px; color:var(--tone-ink); flex:none; }
#rmbz-vip .pjs-assumed-d{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
#rmbz-vip .pjs-assumed-v{ font:700 13px/1.2 'JetBrains Mono',monospace; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   5. ETAPA (E, spec §12): anel de 92 px e 5 passos (feito, atual a rodar, por fazer); linha até ao passo atual
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
#rmbz-vip .pjs-stage{ gap:26px; }
#rmbz-vip .pjs-stage-top{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; min-width:0; }
#rmbz-vip .pjs-ring{ position:relative; width:92px; height:92px; flex:none; }
#rmbz-vip .pjs-ring svg{ display:block; transform:rotate(-90deg); }
#rmbz-vip .pjs-ring-track{ fill:none; stroke:var(--highest); stroke-width:8; }
#rmbz-vip .pjs-ring-val{ fill:none; stroke:var(--tone,var(--info)); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset calc(900ms*var(--k,1)) var(--spring-slow,ease), stroke calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:800 24px/1 'Bricolage Grotesque','Geist',sans-serif; color:var(--tone-ink); }
#rmbz-vip .pjs-stage-copy{ flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:4px; }
#rmbz-vip .pjs-stage-kicker{ display:flex; align-items:center; gap:5px; font:700 12.5px/1.2 'Geist',system-ui,sans-serif; color:var(--tone-ink); }
#rmbz-vip .pjs-stage-kicker > .ms{ font-size:17px; }
#rmbz-vip .pjs-stage-title{ font:800 28px/1.05 'Bricolage Grotesque','Geist',sans-serif; letter-spacing:-.5px; color:var(--text); }
#rmbz-vip .pjs-stage-desc{ font:400 14px/1.5 'Geist',system-ui,sans-serif; color:var(--text2); }
#rmbz-vip .pjs-stage-next{ display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 14px 0 10px; border-radius:100px; background:var(--elev); font:600 13px/1.2 'Geist',system-ui,sans-serif; color:var(--text2); }
#rmbz-vip .pjs-stage-next > .ms{ font-size:18px; }
#rmbz-vip .pjs-steps{ position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:start; }
#rmbz-vip .pjs-steps-rail{ position:absolute; left:10%; right:10%; top:26px; height:5px; border-radius:5px; background:var(--highest); }
#rmbz-vip .pjs-steps-line{ position:absolute; left:10%; top:26px; height:5px; border-radius:5px; background:linear-gradient(90deg,var(--success),var(--tone,var(--info))); transition:width calc(900ms*var(--k,1)) var(--spring-slow,ease); }
#rmbz-vip .pjs-step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
#rmbz-vip .pjs-step-ico{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; }
#rmbz-vip .pjs-step .vx-cookie{ --s:56px; transition:background-color calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-step:not(.is-cur) .vx-cookie{ --s:40px; border-radius:50%; box-shadow:0 0 0 5px var(--surface); }
#rmbz-vip .pjs-step:not(.is-cur) .vx-cookie__bg{ display:none; }
#rmbz-vip .pjs-step.is-done .vx-cookie{ background:var(--success); color:#FFFFFF; }
#rmbz-vip .pjs-step.is-todo .vx-cookie{ background:var(--elev); color:var(--muted); }
#rmbz-vip .pjs-step.is-cur .vx-cookie__fg{ animation:vx-breathe calc(2.4s*var(--k,1)) ease-in-out infinite; }
#rmbz-vip .pjs-step-check{ display:none; font-size:22px; font-variation-settings:'FILL' 1; }
#rmbz-vip .pjs-step-glyph{ font-size:26px; font-variation-settings:'FILL' 1; }
#rmbz-vip .pjs-step.is-todo .pjs-step-glyph{ font-size:20px; font-variation-settings:'FILL' 0; }
#rmbz-vip .pjs-step.is-done .pjs-step-glyph{ display:none; }
#rmbz-vip .pjs-step.is-done .pjs-step-check{ display:inline-flex; }
#rmbz-vip .pjs-step-label{ font:600 13px/1.2 'Geist',system-ui,sans-serif; text-align:center; color:var(--muted); overflow-wrap:anywhere; hyphens:auto; }
#rmbz-vip .pjs-step.is-cur .pjs-step-label{ font-weight:700; color:var(--tone-ink); }
#rmbz-vip .pjs-step.is-done .pjs-step-label{ color:var(--success-ink); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   6. O QUE FALTA (F, spec §13; O31: 4 colunas com o cartão ≥ 640 px, 2 abaixo)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
#rmbz-vip .pjs-todo{ gap:20px; container:pjs-todo / inline-size; }
#rmbz-vip .pjs-todo-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; }
#rmbz-vip .pjs-avatars{ display:flex; flex:none; }
#rmbz-vip .pjs-av{ width:42px; height:42px; flex:none; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:var(--tone); color:var(--tone-on,#FFFFFF); box-shadow:0 0 0 3px var(--surface); }
#rmbz-vip .pjs-av + .pjs-av{ margin-left:-12px; }
#rmbz-vip .pjs-av > img{ width:100%; height:100%; object-fit:cover; display:block; }
#rmbz-vip .pjs-av > .ms{ font-size:21px; }
#rmbz-vip .pjs-av > b{ font:800 14px/1 'Bricolage Grotesque','Geist',sans-serif; }
#rmbz-vip .pjs-todo-copy{ flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px; }
#rmbz-vip .pjs-todo-title{ font:800 21px/1.1 'Bricolage Grotesque','Geist',sans-serif; color:var(--text); }
#rmbz-vip .pjs-todo-line{ display:flex; align-items:center; gap:5px; font:400 13px/1.4 'Geist',system-ui,sans-serif; color:var(--text2); }
#rmbz-vip .pjs-todo-spin{ font-size:16px; color:var(--info); flex:none; animation:vx-spin calc(3s*var(--k,1)) linear infinite; }
#rmbz-vip .pjs-todo-count{ display:flex; align-items:baseline; gap:2px; padding:8px 14px; border-radius:100px; background:var(--success-soft); color:var(--success-ink); flex:none; }
#rmbz-vip .pjs-todo-count > b{ font:800 20px/1 'Bricolage Grotesque','Geist',sans-serif; }
#rmbz-vip .pjs-todo-count > span{ font:600 12.5px/1 'Geist',system-ui,sans-serif; }
#rmbz-vip .pjs-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@container pjs-todo (min-width:584px){ #rmbz-vip .pjs-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
#rmbz-vip .pjs-tile{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; min-width:0; padding:16px 8px 14px; border-radius:22px; background:var(--elev); box-shadow:0 0 0 2px transparent; transition:background-color calc(300ms*var(--k,1)) var(--ease-effect,ease), box-shadow calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-tile.is-done{ background:var(--success-soft); }
#rmbz-vip .pjs-tile.is-mine{ background:var(--warning-soft); box-shadow:0 0 0 2px var(--warning); }
#rmbz-vip .pjs-tile-ico{ position:relative; width:48px; height:48px; flex:none; display:flex; align-items:center; justify-content:center; }
#rmbz-vip .pjs-tile .vx-cookie{ border-radius:50%; transition:background-color calc(300ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip .pjs-tile:not(.is-mine) .vx-cookie__bg{ display:none; }
#rmbz-vip .pjs-tile.is-done .vx-cookie{ background:var(--success-soft); color:var(--success-ink); }
#rmbz-vip .pjs-tile.is-team .vx-cookie{ background:var(--elev); color:var(--muted); }
#rmbz-vip .pjs-tile .vx-cookie .ms{ font-size:23px; font-variation-settings:'FILL' 1; }
#rmbz-vip .pjs-tile.is-team .vx-cookie .ms{ font-variation-settings:'FILL' 0; }
#rmbz-vip .pjs-tile.is-mine .vx-cookie__fg{ animation:vx-breathe calc(2.4s*var(--k,1)) ease-in-out infinite; }
#rmbz-vip .pjs-tile-check{ position:absolute; right:-4px; bottom:-4px; width:22px; height:22px; border-radius:50%; display:none; align-items:center; justify-content:center; background:var(--success); color:#FFFFFF; box-shadow:0 0 0 2.5px var(--surface); }
#rmbz-vip .pjs-tile-check > .ms{ font-size:14px; }
#rmbz-vip .pjs-tile.is-done .pjs-tile-check{ display:flex; }
#rmbz-vip .pjs-tile-t{ font:700 12.5px/1.25 'Geist',system-ui,sans-serif; color:var(--text); text-wrap:balance; overflow-wrap:anywhere; }
#rmbz-vip .pjs-tile-hint{ font:400 12px/1.35 'Geist',system-ui,sans-serif; color:var(--text2); text-wrap:pretty; }
#rmbz-vip .pjs-tile-s{ display:none; align-items:center; gap:3px; font:600 11px/1.2 'Geist',system-ui,sans-serif; }
#rmbz-vip .pjs-tile-s > .ms{ font-size:13px; }
#rmbz-vip .pjs-tile.is-done .pjs-tile-s--done{ display:flex; color:var(--success-ink); }
#rmbz-vip .pjs-tile.is-mine .pjs-tile-s--mine{ display:flex; color:var(--warning-ink); }
#rmbz-vip .pjs-tile.is-team .pjs-tile-s--team{ display:flex; color:var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   7. LISTA, CONCLUÍDOS E VAZIO
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
#rmbz-vip .pjs-list{ display:flex; flex-direction:column; gap:16px; min-width:0; }
#rmbz-vip .pjs-list-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr)); gap:14px; min-width:0; }
#rmbz-vip .pjs-lcard, #rmbz-vip a.pjs-lcard{ position:relative; display:flex; align-items:center; gap:16px; min-width:0; padding:20px; border-radius:28px; background:var(--surface); color:var(--text); text-decoration:none; transition:background-color calc(200ms*var(--k,1)) var(--ease-effect,ease), transform calc(150ms*var(--k,1)) var(--ease-effect,ease); }
#rmbz-vip a.pjs-lcard:hover{ background:color-mix(in srgb,var(--surface) 94%,var(--text)); color:var(--text); }
#rmbz-vip a.pjs-lcard:active{ transform:scale(.99); }
#rmbz-vip .pjs-lcard.is-live{ box-shadow:0 0 0 2px var(--danger); }
#rmbz-vip .pjs-lcard-ico .ms{ font-size:30px; }
#rmbz-vip .pjs-lcard-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
#rmbz-vip .pjs-lcard-title{ font:800 22px/1.1 'Bricolage Grotesque','Geist',sans-serif; letter-spacing:-.3px; color:var(--text); overflow-wrap:anywhere; }
#rmbz-vip .pjs-lcard-pills{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
#rmbz-vip .pjs-chip--surface{ background:var(--elev); color:var(--text); }
#rmbz-vip .pjs-chip--surface > .ms{ color:var(--tone-ink,var(--brand-ink)); }
#rmbz-vip .pjs-chip .vx-live-dot{ --tone:var(--danger); }
#rmbz-vip .pjs-lcard-next{ display:flex; align-items:center; gap:6px; min-width:0; font:600 13px/1.35 'Geist',system-ui,sans-serif; color:var(--tone-ink); }
#rmbz-vip .pjs-lcard-next > .ms{ font-size:17px; flex:none; }
#rmbz-vip .pjs-lcard-go{ width:40px; height:40px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--highest); color:var(--text); }
#rmbz-vip .pjs-lcard-go > .ms{ font-size:20px; }
#rmbz-vip .pjs-list-h{ display:flex; align-items:center; gap:8px; margin:8px 0 0; font:800 20px/1.15 'Bricolage Grotesque','Geist',sans-serif; color:var(--text); }
#rmbz-vip .pjs-list-h > .ms{ font-size:22px; color:var(--success-ink); }
#rmbz-vip .pjs-dcard{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; padding:18px 20px; border-radius:28px; background:var(--surface); }
#rmbz-vip .pjs-dcard-ico{ width:48px; height:48px; flex:none; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:var(--tone-soft); color:var(--tone-ink); }
#rmbz-vip .pjs-dcard-ico > .ms{ font-size:24px; }
#rmbz-vip .pjs-dcard-copy{ flex:1 1 180px; min-width:0; display:flex; flex-direction:column; gap:2px; }
#rmbz-vip .pjs-dcard-title{ font:800 18px/1.15 'Bricolage Grotesque','Geist',sans-serif; color:var(--text); overflow-wrap:anywhere; }
#rmbz-vip .pjs-dcard-sub{ font:400 12.5px/1.4 'Geist',system-ui,sans-serif; color:var(--text2); }
#rmbz-vip .pjs-dcard-actions{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
#rmbz-vip .pjs-dcard-actions .rvu-brand-icon{ flex:none; }
#rmbz-vip .pjs-empty{ align-items:flex-start; }
#rmbz-vip .pjs--list nav[aria-label="Paginação"] .chip{ min-height:44px; display:inline-flex; align-items:center; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   8. PAUSA FORA DO ECRÃ E LARGURAS
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* As animações próprias deste ficheiro também param fora do ecrã (o IntersectionObserver põe .vx-paused). */
#rmbz-vip .vx-paused .pjs-todo-spin,
#rmbz-vip .vx-paused .pjs-tile .vx-cookie__fg,
#rmbz-vip .vx-paused .pjs-step .vx-cookie__fg,
#rmbz-vip .vx-paused .pjs-dl-zero > .ms{ animation-play-state:paused; }

/* Telemóvel (< 700 px): margens de 14 px, cartões 20/18 px, título 34 px, botão de pagar a toda a largura (spec §8.1). */
@media (max-width:699px){
  html body #rmbz-vip .wrap:has(.pjs-detail){ padding:14px 14px 32px; }
  #rmbz-vip .pjs-card--lg{ padding:20px 18px; }
  #rmbz-vip .pjs-head-title{ font-size:34px; }
  #rmbz-vip .pjs-hero-cta{ flex:1 1 100%; justify-content:stretch; }
  #rmbz-vip .pjs-hero-cta > *, #rmbz-vip .pjs-hero-paybar > *{ flex:1 1 100%; }
  #rmbz-vip .pjs-hero-cta .pjs-btn, #rmbz-vip .pjs-hero-paybar .pjs-btn{ width:100%; }
  #rmbz-vip .pjs-pay-form{ flex:1 1 100%; justify-content:center; }
  #rmbz-vip .pjs-btn--pay{ width:100%; }
  #rmbz-vip .pjs-hero-locked{ max-width:none; }
  #rmbz-vip .pjs-dl-copy{ flex-basis:160px; }
  #rmbz-vip .pjs-live-clock{ flex:1 1 100%; align-items:flex-start; }
  #rmbz-vip .pjs-live-clock-v{ text-align:left; }
  #rmbz-vip .pjs-step-label{ font-size:11.5px; }
  #rmbz-vip .pjs-lcard{ padding:16px; gap:12px; border-radius:24px; }
  #rmbz-vip .pjs-lcard-ico{ --s:52px !important; }
  #rmbz-vip .pjs-lcard-title{ font-size:19px; }
  #rmbz-vip .pjs-lcard-go{ display:none; }
}
@media (max-width:420px){
  #rmbz-vip .pjs-clock{ gap:4px; }
  #rmbz-vip .pjs-clock-box{ min-width:46px; padding:7px 3px; }
  #rmbz-vip .pjs-clock-v{ font-size:18px; }
  #rmbz-vip .pjs-step-label{ font-size:10.5px; }
  #rmbz-vip .pjs-step-ico{ width:48px; height:48px; }
  #rmbz-vip .pjs-step .vx-cookie{ --s:48px; }
  #rmbz-vip .pjs-step:not(.is-cur) .vx-cookie{ --s:36px; }
  #rmbz-vip .pjs-steps-rail, #rmbz-vip .pjs-steps-line{ top:22px; }
  #rmbz-vip .pjs-hero-title{ font-size:28px; }
  #rmbz-vip .pjs-dl{ padding:14px; }
  #rmbz-vip .pjs-dl-top{ gap:12px; }
  #rmbz-vip .pjs-dl-copy{ flex-basis:140px; }
}
/* Regresso depois de pagar: o estado anterior desenha-se sem transição; as transições correm só na passagem ao real. */
#rmbz-vip .pjs-notrans, #rmbz-vip .pjs-notrans *{ transition:none !important; }