/* Deploy 2026-05-09 v2 — includes elementor height fix */
/**
 * Joga Joga — Design System Completo para WordPress
 * Sessao 54 — 2026-05-06 (.jj-demo__thumb-image adicionado)
 * Fonte canonica: docs/design/jogajoga-tokens.css + docs/design/jogajoga-components.css
 */

/* ============================================================
   FOXIZ LAYOUT WIDTH OVERRIDE
   Define larguras canônicas dos containers do Foxiz.
   Aplica a todas as páginas, posts, single-* templates e
   conteúdo de Elementor que usa containers Foxiz.
   Padrão JJ: 1200px com padding 40px (desktop) / 20px (mobile).
   NUNCA fazer override por página — usar essas variáveis.
   Documentação: docs/design/foxiz-layout-system.md
   ============================================================ */
:root {
  --rb-width: 1200px;        /* layout principal — .rb-container */
  --rb-s-width: 1200px;      /* variação — .rb-s-container */
  --rb-small-width: 1200px;  /* páginas / leitura — .rb-small-container */
  --s-content-width: 1200px; /* conteúdo interno de posts */
}

.rb-container,
.rb-s-container,
.rb-small-container {
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .rb-container,
  .rb-s-container,
  .rb-small-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
   TOKENS
   ============================================================ */
/* ============================================================
   JOGA JOGA — DESIGN SYSTEM TOKENS
   Drop into WordPress (Customizer › Additional CSS, or theme).
   Elementor: variables work in any "Custom CSS" field and on
   any property by typing var(--jj-…).
   ============================================================ */

:root {
  /* ---------- BRAND CORE ---------- */
  --jj-yellow:        #FFCC1A;   /* primary action, accents */
  --jj-yellow-deep:   #F5B400;   /* hover / shadow base */
  --jj-yellow-soft:   #FFE57A;   /* highlights, glows */
  --jj-yellow-tint:   #FFF4C2;   /* tinted bg, lo-fi panels */

  --jj-ink:           #0B0B0E;   /* primary surface (deep black) */
  --jj-ink-2:         #14141A;   /* card bg on dark */
  --jj-ink-3:         #1E1E26;   /* elevated card on dark */
  --jj-ink-4:         #2A2A33;   /* dividers / chrome */

  --jj-cream:         #FAFAF7;   /* main bg light mode */
  --jj-paper:         #FFFFFF;   /* card bg light mode */
  --jj-fog:           #EEEEE7;   /* subtle dividers */

  --jj-purple:        #6B3FD4;   /* secondary accent (chip) */
  --jj-purple-deep:   #4A2AA0;
  --jj-purple-soft:   #C9B7F5;

  /* ---------- TEXT ---------- */
  --jj-text:          #16161B;
  --jj-text-2:        #4A4A55;
  --jj-text-3:        #7A7A85;
  --jj-text-on-dark:  #F5F5F0;
  --jj-text-on-dark-2:#9C9CA8;

  /* ---------- SIGNAL ---------- */
  --jj-win:           #1FA971;   /* positive, green-ticks, odds-up */
  --jj-win-soft:      #D7F2E5;
  --jj-loss:          #E03A3A;   /* negative, hot, alerts */
  --jj-loss-soft:     #FBDADA;
  --jj-info:          #2D7BD9;
  --jj-info-soft:     #DCEAFB;
  --jj-hot:           #FF6A00;   /* "quente" / featured */

  /* ---------- TYPE ---------- */
  --jj-font-display:  "Bricolage Grotesque", "Sora", system-ui, sans-serif;
  --jj-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --jj-font-mono:     "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* fluid type scale */
  --jj-fs-xs:   12px;
  --jj-fs-sm:   14px;
  --jj-fs-md:   16px;
  --jj-fs-lg:   18px;
  --jj-fs-xl:   22px;
  --jj-fs-2xl:  clamp(26px, 2.4vw, 32px);
  --jj-fs-3xl:  clamp(32px, 3.4vw, 44px);
  --jj-fs-4xl:  clamp(42px, 5vw, 64px);
  --jj-fs-hero: clamp(56px, 7vw, 92px);

  --jj-lh-tight: 1.05;
  --jj-lh-snug:  1.25;
  --jj-lh-base:  1.55;

  /* ---------- SPACING (4-pt) ---------- */
  --jj-s-1:  4px;
  --jj-s-2:  8px;
  --jj-s-3:  12px;
  --jj-s-4:  16px;
  --jj-s-5:  20px;
  --jj-s-6:  24px;
  --jj-s-8:  32px;
  --jj-s-10: 40px;
  --jj-s-12: 48px;
  --jj-s-16: 64px;
  --jj-s-20: 80px;

  /* ---------- RADIUS ---------- */
  --jj-r-xs:  4px;
  --jj-r-sm:  8px;
  --jj-r-md:  12px;
  --jj-r-lg:  16px;
  --jj-r-xl:  20px;
  --jj-r-2xl: 28px;
  --jj-r-pill: 999px;

  /* ---------- SHADOWS (signature "lift" + glow) ---------- */
  --jj-shadow-sm:  0 1px 2px rgba(11,11,14,.08), 0 1px 1px rgba(11,11,14,.04);
  --jj-shadow-md:  0 4px 14px rgba(11,11,14,.10), 0 2px 4px rgba(11,11,14,.06);
  --jj-shadow-lg:  0 18px 40px rgba(11,11,14,.16), 0 6px 12px rgba(11,11,14,.08);
  --jj-shadow-pop: 0 6px 0 0 var(--jj-ink);                 /* the chunky cartoon offset */
  --jj-shadow-pop-yellow: 0 6px 0 0 var(--jj-yellow-deep);  /* same, in brand */
  --jj-glow-yellow: 0 0 0 4px rgba(255,204,26,.20), 0 10px 30px rgba(255,204,26,.35);
  --jj-glow-purple: 0 0 0 4px rgba(107,63,212,.22), 0 10px 30px rgba(107,63,212,.35);

  /* ---------- BORDERS ---------- */
  --jj-border:        1px solid rgba(11,11,14,.10);
  --jj-border-strong: 1.5px solid var(--jj-ink);
  --jj-border-yellow: 2px solid var(--jj-yellow);
  --jj-border-dark:   1px solid rgba(255,255,255,.08);

  /* ---------- MOTION ---------- */
  --jj-ease: cubic-bezier(.2,.8,.2,1);
  --jj-dur-fast: 120ms;
  --jj-dur-base: 220ms;
  --jj-dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  --jj-maxw: 1200px;
  --jj-gutter: clamp(16px, 3vw, 32px);
}

/* dark surface block — wrap a section with class .jj-dark */
.jj-dark {
  --jj-text: var(--jj-text-on-dark);
  --jj-text-2: var(--jj-text-on-dark-2);
  --jj-paper: var(--jj-ink-2);
  --jj-fog: var(--jj-ink-4);
  --jj-cream: var(--jj-ink);
  --jj-border: 1px solid rgba(255,255,255,.08);
  background: var(--jj-ink);
  color: var(--jj-text-on-dark);
}

/* ============================================================
   COMPONENTS
   ============================================================ */
/* ============================================================
   JOGA JOGA — COMPONENT CLASSES
   Pair with jogajoga-tokens.css. All classes are .jj-*
   so they will not collide with Elementor or theme styles.
   ============================================================ */

/* ---------- BASE ---------- */
.jj { font-family: var(--jj-font-body); color: var(--jj-text); line-height: var(--jj-lh-base); }
.jj-h1, .jj-h2, .jj-h3, .jj-h4 {
  font-family: var(--jj-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--jj-lh-tight);
  margin: 0;
}
.jj-h1 { font-size: var(--jj-fs-hero); font-style: italic; }
.jj-h2 { font-size: var(--jj-fs-4xl); font-style: italic; }
.jj-h3 { font-size: var(--jj-fs-2xl); }
.jj-h4 { font-size: var(--jj-fs-xl); }

.jj-eyebrow {
  font-family: var(--jj-font-mono);
  font-size: var(--jj-fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jj-text-3);
}

.jj-lead { font-size: var(--jj-fs-lg); color: var(--jj-text-2); max-width: 60ch; }

/* highlight underline — yellow swipe behind text */
.jj-mark {
  background: linear-gradient(transparent 60%, var(--jj-yellow) 60%);
  padding: 0 .12em;
}

/* ---------- BUTTONS (refined: subtle gradient, soft drop shadow, uppercase sans) ---------- */
.jj-btn {
  --jj-btn-bg: linear-gradient(180deg, #FFD740 0%, #FFCC1A 50%, #F5B400 100%);
  --jj-btn-fg: #0B0B0E;
  --jj-btn-border: transparent;
  --jj-btn-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 14px rgba(245,180,0,.32);
  --jj-btn-inner: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(120,72,0,.18);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--jj-font-body);
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1;
  padding: 13px 22px;
  border-radius: 10px;
  border: 1.5px solid var(--jj-btn-border);
  background: var(--jj-btn-bg);
  color: var(--jj-btn-fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--jj-btn-inner), var(--jj-btn-shadow);
  transition: transform var(--jj-dur-fast) var(--jj-ease),
              box-shadow var(--jj-dur-base) var(--jj-ease),
              filter var(--jj-dur-fast) var(--jj-ease);
}
.jj-btn:hover  { transform: translateY(-1px); filter: brightness(1.03); box-shadow: var(--jj-btn-inner), 0 2px 4px rgba(0,0,0,.18), 0 10px 22px rgba(245,180,0,.42); }
.jj-btn:active { transform: translateY(0); filter: brightness(.96); }
.jj-btn:focus-visible { outline: 0; box-shadow: var(--jj-btn-inner), var(--jj-btn-shadow), 0 0 0 3px rgba(255,204,26,.45); }

/* Sizes */
.jj-btn--lg { padding: 16px 28px; font-size: 14px; border-radius: 12px; }
.jj-btn--sm { padding: 9px 14px; font-size: 11px; border-radius: 8px; letter-spacing: .08em; }

/* Ghost — outlined on dark (matches the SEE ALL reference) */
.jj-btn--ghost {
  --jj-btn-bg: transparent;
  --jj-btn-fg: #FFFFFF;
  --jj-btn-border: rgba(255,255,255,.55);
  --jj-btn-shadow: 0 1px 2px rgba(0,0,0,.25);
  --jj-btn-inner: inset 0 0 0 0 transparent;
}
.jj-btn--ghost:hover { --jj-btn-border: #FFFFFF; filter: none; background: rgba(255,255,255,.06); }

/* Ghost on light surfaces — flips to dark text/border */
.demo:not(.demo--dark) .jj-btn--ghost,
body:not(.jj-dark) .ds-main .jj-btn--ghost:not(.hero .jj-btn--ghost) {
  --jj-btn-fg: var(--jj-ink);
  --jj-btn-border: rgba(11,11,14,.55);
}
.demo:not(.demo--dark) .jj-btn--ghost:hover { --jj-btn-border: var(--jj-ink); background: rgba(11,11,14,.04); }

/* Dark — solid black, yellow text */
.jj-btn--dark {
  --jj-btn-bg: linear-gradient(180deg, #2A2A33 0%, #14141A 60%, #0B0B0E 100%);
  --jj-btn-fg: var(--jj-yellow);
  --jj-btn-border: transparent;
  --jj-btn-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.32);
  --jj-btn-inner: inset 0 1px 0 rgba(255,255,255,.08);
}
.jj-btn--dark:hover { filter: brightness(1.15); }

/* Play CTA — same yellow, with arrow */
.jj-btn--play { padding-right: 20px; }
.jj-btn--play::after {
  content: ""; width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
  transition: transform var(--jj-dur-base) var(--jj-ease);
}
.jj-btn--play:hover::after { transform: translateX(3px); }

/* Quiet — text button */
.jj-btn--quiet {
  --jj-btn-bg: transparent;
  --jj-btn-fg: var(--jj-text-2);
  --jj-btn-border: transparent;
  --jj-btn-shadow: none;
  --jj-btn-inner: none;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 14px;
}
.jj-btn--quiet:hover { --jj-btn-fg: var(--jj-ink); background: rgba(11,11,14,.05); transform: none; filter: none; box-shadow: none; }
.jj-btn--quiet:active { transform: none; }
.demo--dark .jj-btn--quiet, .hero .jj-btn--quiet { --jj-btn-fg: rgba(255,255,255,.7); }
.demo--dark .jj-btn--quiet:hover, .hero .jj-btn--quiet:hover { --jj-btn-fg: #fff; background: rgba(255,255,255,.06); }

/* ---------- BADGES ---------- */
.jj-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--jj-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--jj-r-pill);
  background: var(--jj-yellow-tint);
  color: var(--jj-ink);
  border: 1px solid rgba(11,11,14,.10);
  white-space: nowrap;
}
.jj-badge--solid    { background: var(--jj-yellow); border-color: var(--jj-ink); }
.jj-badge--dark     { background: var(--jj-ink); color: var(--jj-yellow); border-color: var(--jj-ink); }
.jj-badge--purple   { background: var(--jj-purple-soft); color: var(--jj-purple-deep); border-color: rgba(74,42,160,.25); }
.jj-badge--win      { background: var(--jj-win-soft);    color: var(--jj-win);         border-color: rgba(31,169,113,.25); }
.jj-badge--loss     { background: var(--jj-loss-soft);   color: var(--jj-loss);        border-color: rgba(224,58,58,.25); }
.jj-badge--hot {
  background: linear-gradient(90deg, var(--jj-hot) 0%, #FF8B33 100%);
  color: #fff; border-color: transparent;
}
.jj-badge--hot::before { content: "🔥"; }
.jj-badge--new {
  background: var(--jj-ink); color: var(--jj-yellow);
}
.jj-badge--new::before { content: ""; width:6px; height:6px; border-radius:50%; background: var(--jj-yellow); box-shadow: 0 0 0 3px rgba(255,204,26,.3); animation: jjPulse 1.6s infinite; }
@keyframes jjPulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }

/* ---------- CARDS ---------- */
.jj-card {
  background: var(--jj-paper);
  border-radius: var(--jj-r-lg);
  border: var(--jj-border);
  padding: var(--jj-s-6);
  transition: transform var(--jj-dur-base) var(--jj-ease), box-shadow var(--jj-dur-base) var(--jj-ease);
}
.jj-card:hover { transform: translateY(-2px); box-shadow: var(--jj-shadow-lg); }

.jj-card--pop {
  border: 1.5px solid var(--jj-ink);
  box-shadow: var(--jj-shadow-pop);
  border-radius: var(--jj-r-lg);
}
.jj-card--pop:hover { transform: translateY(-3px); box-shadow: 0 9px 0 0 var(--jj-ink); }

.jj-card--dark {
  background: var(--jj-ink-2);
  color: var(--jj-text-on-dark);
  border: 1px solid var(--jj-ink-4);
}

.jj-card--featured {
  position: relative; overflow: hidden;
  background: var(--jj-ink);
  color: var(--jj-text-on-dark);
  border: 1.5px solid var(--jj-yellow);
  border-radius: var(--jj-r-lg);
  padding: var(--jj-s-6);
}
.jj-card--featured::before {
  content: "";
  position: absolute; inset: -40% -40% auto auto; width: 280px; height: 280px;
  background: radial-gradient(closest-side, rgba(255,204,26,.45), transparent 70%);
  pointer-events: none;
}

/* ============================================================
   CASINO CARDS — Joga Joga
   Layout inspirado em Casino.Guru / Bonus.com,
   mas adaptado à marca: amarelo Joga Joga + tinta + Bricolage,
   reusando o .jj-btn .jj-btn--play como CTA.

   Layouts:
     .jj-casino-card--square    — tile vertical compacto (uso primário)
     .jj-casino-card--wide      — barra horizontal (editorial inline)
     .jj-casino-card--review    — review row com painel CTA destacado
   Tema:
     dark-first (default)
     .jj-casino-card--light     — fundo claro (papel)
   ============================================================ */
.jj-casino-card {
  /* dark theme by default — usando a paleta de tintas Joga Joga */
  --cc-bg: var(--jj-ink-2);
  --cc-bg-soft: var(--jj-ink);
  --cc-fg: var(--jj-text-on-dark);
  --cc-fg-muted: var(--jj-text-on-dark-3);
  --cc-border: rgba(255,255,255,.08);
  --cc-divider: rgba(255,255,255,.08);
  --cc-accent-top: var(--jj-yellow);
  --cc-gift: var(--jj-yellow);
  --cc-star: var(--jj-yellow-deep);
  --cc-terms: rgba(255,255,255,.45);

  position: relative;
  background: var(--cc-bg);
  color: var(--cc-fg);
  border: 1px solid var(--cc-border);
  border-radius: var(--jj-r-md);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--jj-dur-fast) var(--jj-ease), box-shadow var(--jj-dur-base) var(--jj-ease);
}
.jj-casino-card::before {
  /* faixa amarela decorativa no topo — assinatura da marca */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--cc-accent-top);
  z-index: 1;
}
.jj-casino-card:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }

.jj-casino-card--light {
  --cc-bg: var(--jj-paper);
  --cc-bg-soft: var(--jj-cream);
  --cc-fg: var(--jj-ink);
  --cc-fg-muted: var(--jj-text-3);
  --cc-border: rgba(11,11,14,.10);
  --cc-divider: rgba(11,11,14,.10);
  --cc-terms: rgba(11,11,14,.45);
}
.jj-casino-card--light:hover { box-shadow: 0 6px 18px rgba(11,11,14,.10); }

/* ---------- shared atoms ---------- */
.jj-casino-card__logo {
  display: grid; place-items: center;
  padding: 22px 16px 14px;
  background: var(--cc-bg);
}
.jj-casino-card__logo > * {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--jj-font-display);
  font-weight: 800; font-style: italic;
  font-size: 22px; letter-spacing: -.02em;
  color: var(--cc-fg);
  line-height: 1;
}
.jj-casino-card__logo img { max-height: 32px; width: auto; }

/* quick-stat lines: 🎁 bônus  ·  ⭐ perk */
.jj-casino-card__stats {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}
.jj-casino-card__stat {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--jj-font-body);
  font-size: 15px; font-weight: 600;
  color: var(--cc-fg);
  line-height: 1.2;
  margin: 0;
}
.jj-casino-card__stat-icon {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.jj-casino-card__stat-icon svg { width: 20px; height: 20px; }
.jj-casino-card__stat--gift .jj-casino-card__stat-icon { color: var(--cc-gift); }
.jj-casino-card__stat--star .jj-casino-card__stat-icon { color: var(--cc-star); }

/* CTA bloco — usa .jj-btn da marca, sem reinventar */
.jj-casino-card__cta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 16px;
}
.jj-casino-card__cta .jj-btn {
  width: 100%;
  min-width: 0;
}

.jj-casino-card__terms {
  font-family: var(--jj-font-body);
  font-size: 11px; color: var(--cc-terms);
  text-align: center; margin: 0;
  letter-spacing: .02em;
}

/* "HOT!" faixa diagonal — vermelho da marca (loss) */
.jj-casino-card__hot {
  position: absolute; top: 0; left: 0;
  width: 76px; height: 76px;
  z-index: 3; pointer-events: none;
  overflow: hidden;
}
.jj-casino-card__hot::before {
  content: "HOT!";
  position: absolute;
  top: 14px; left: -22px;
  width: 100px;
  transform: rotate(-45deg);
  background: var(--jj-loss);
  color: #fff;
  font-family: var(--jj-font-display);
  font-weight: 800; font-style: italic;
  font-size: 12px; letter-spacing: .04em;
  text-align: center; padding: 4px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* rank number badge (uso opcional em rankings) */
.jj-casino-card__rank {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  background: var(--jj-yellow); color: var(--jj-ink);
  font-family: var(--jj-font-display); font-weight: 800; font-style: italic;
  font-size: 11px; letter-spacing: .04em;
  border-radius: 999px;
}

/* ============================================================
   LAYOUT: SQUARE (tile vertical compacto, padrão das refs)
   ============================================================ */
.jj-casino-card--square {
  display: grid;
  grid-template-rows: auto auto auto;
  width: 100%;
  max-width: 240px;
}
.jj-casino-card--square .jj-casino-card__logo { padding-top: 26px; padding-bottom: 16px; }
.jj-casino-card--square .jj-casino-card__stats { padding: 0 16px 14px; }
.jj-casino-card--square .jj-casino-card__cta { padding: 0 16px 14px; gap: 6px; }

/* ============================================================
   LAYOUT: WIDE (barra horizontal — logo | bonus inline | CTA)
   ============================================================ */
.jj-casino-card--wide {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr auto;
  align-items: center;
  gap: 0;
  padding: 0;
  min-height: 88px;
}
.jj-casino-card--wide .jj-casino-card__logo {
  padding: 16px 24px;
  border-right: 1px solid var(--cc-divider);
  align-self: stretch;
}
.jj-casino-card--wide .jj-casino-card__stats {
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  flex-wrap: wrap;
}
.jj-casino-card--wide .jj-casino-card__stat { font-size: 16px; }
.jj-casino-card--wide .jj-casino-card__stat--gift .jj-casino-card__stat-icon svg { width: 20px; height: 20px; }
.jj-casino-card--wide .jj-casino-card__cta {
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 16px 20px;
}
.jj-casino-card--wide .jj-casino-card__cta .jj-btn {
  width: auto;
  min-width: 130px;
}
.jj-casino-card--wide .jj-casino-card__terms { display: none; }

/* ============================================================
   LAYOUT: REVIEW (review row — claro, com painel CTA cinza)
   ============================================================ */
.jj-casino-card--review {
  display: grid;
  grid-template-columns: 160px 1fr 280px;
  align-items: stretch;
  border-radius: 6px;
}
.jj-casino-card--review::before { display: none; }
.jj-casino-card--review .jj-casino-card__logo {
  padding: 22px;
  background: var(--cc-bg);
  align-self: stretch;
}
.jj-casino-card--review .jj-casino-card__logo > * {
  flex-direction: column; gap: 8px;
  font-size: 18px;
}
.jj-casino-card--review .jj-casino-card__rating-stars {
  display: inline-flex;
  background: var(--cc-bg-soft);
  border-radius: 999px;
  padding: 3px 10px;
  gap: 1px;
}
.jj-casino-card--review .jj-casino-card__rating-stars svg {
  width: 11px; height: 11px; color: var(--cc-star);
}
.jj-casino-card--review .jj-casino-card__body {
  padding: 22px 26px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px;
  min-width: 0;
}
.jj-casino-card--review .jj-casino-card__body-label {
  font-size: 12px; color: var(--cc-fg-muted); margin: 0;
}
.jj-casino-card--review .jj-casino-card__body-headline {
  font-family: var(--jj-font-display); font-weight: 800;
  font-size: 22px; letter-spacing: -.01em; line-height: 1.15;
  color: var(--cc-fg); margin: 0;
}
.jj-casino-card--review .jj-casino-card__body-sub {
  font-size: 14px; color: var(--cc-fg); margin: 0;
}
.jj-casino-card--review .jj-casino-card__body-fine {
  font-size: 12px; color: var(--cc-fg-muted); margin: 4px 0 0; line-height: 1.5;
}
.jj-casino-card--review .jj-casino-card__body-fine a {
  color: var(--jj-loss); text-decoration: underline; text-underline-offset: 2px;
}
.jj-casino-card--review .jj-casino-card__cta {
  background: var(--cc-bg-soft);
  border-left: 1px solid var(--cc-divider);
  padding: 22px;
  align-items: center; justify-content: center; gap: 12px;
}
.jj-casino-card--review .jj-casino-card__review-link {
  font-size: 13px; font-weight: 600;
  color: var(--cc-fg-muted);
  text-decoration: underline; text-underline-offset: 3px;
  text-align: center;
}
.jj-casino-card--review .jj-casino-card__review-link:hover { color: var(--cc-fg); }
.jj-casino-card--review .jj-casino-card__cta-note {
  font-size: 11px; color: var(--cc-fg-muted); margin: 0; text-align: center;
}
.jj-casino-card--review .jj-casino-card__cta .jj-btn {
  width: auto; min-width: 140px;
}

/* responsive collapse */
/* ============================================================
   LAYOUT: WIDE-RICH (review row com benefícios + rating + rank)
   Inspirado em listas comparativas (ex: Casino.Guru rank list)
   Mostra: nº ranking · logo + rating · oferta · pílulas de
   benefícios · CTA · disclosure de afiliado.
   ============================================================ */
.jj-casino-card--wide-rich {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  align-items: center;
  gap: 0;
  padding: 0;
  min-height: 120px;
}
.jj-casino-card--wide-rich .jj-casino-card__logo {
  padding: 22px 24px;
  border-right: 1px solid var(--cc-divider);
  align-self: stretch;
  position: relative;
}
.jj-casino-card--wide-rich .jj-casino-card__logo > * {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.jj-casino-card--wide-rich .jj-casino-card__rank-num {
  position: absolute;
  top: 8px; left: 12px;
  font-family: var(--jj-font-display);
  font-weight: 800; font-style: italic;
  font-size: 13px;
  color: var(--cc-fg-muted);
  letter-spacing: -.01em;
}
.jj-casino-card--wide-rich .jj-casino-card__rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--cc-bg-soft);
  border: 1px solid var(--cc-divider);
  border-radius: 999px;
  font-family: var(--jj-font-display);
  font-weight: 800; font-style: italic;
  font-size: 12px; letter-spacing: .02em;
  color: var(--cc-fg);
}
.jj-casino-card--wide-rich .jj-casino-card__rating-pill svg {
  width: 12px; height: 12px;
  color: var(--jj-yellow); flex-shrink: 0;
}

.jj-casino-card--wide-rich .jj-casino-card__body {
  padding: 18px 24px;
  display: flex; flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.jj-casino-card--wide-rich .jj-casino-card__body-question {
  font-family: var(--jj-font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--cc-fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0;
}
.jj-casino-card--wide-rich .jj-casino-card__body-question:hover { color: var(--cc-fg); }
.jj-casino-card--wide-rich .jj-casino-card__body-offer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--jj-font-display);
  font-weight: 800;
  font-size: 18px; letter-spacing: -.01em; line-height: 1.25;
  color: var(--cc-fg);
  margin: 0;
}
.jj-casino-card--wide-rich .jj-casino-card__body-offer svg {
  width: 20px; height: 20px;
  color: var(--cc-gift);
  flex-shrink: 0;
  margin-top: 2px;
}
.jj-casino-card--wide-rich .jj-casino-card__perks {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.jj-casino-card--wide-rich .jj-casino-card__perk {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: var(--cc-bg-soft);
  border: 1px solid var(--cc-divider);
  border-radius: 6px;
  font-family: var(--jj-font-body);
  font-size: 11px; font-weight: 600;
  color: var(--cc-fg-muted);
  letter-spacing: .01em;
}
.jj-casino-card--wide-rich .jj-casino-card__perk svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

.jj-casino-card--wide-rich .jj-casino-card__cta {
  padding: 18px 22px;
  align-items: center;
  gap: 6px;
  border-left: 1px solid var(--cc-divider);
  align-self: stretch;
  justify-content: center;
}
.jj-casino-card--wide-rich .jj-casino-card__cta .jj-btn { width: 100%; min-width: 0; }
.jj-casino-card--wide-rich .jj-casino-card__affiliate {
  font-family: var(--jj-font-body);
  font-size: 11px;
  color: var(--cc-fg-muted);
  margin: 0;
  text-align: center;
  letter-spacing: .01em;
}
.jj-cta-card .jj-casino-card__affiliate {
  font-family: var(--jj-font-body);
  font-size: 10px;
  color: var(--jj-text-3);
  margin: 2px 0 0;
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.3;
}
.jj-casino-card--wide-rich .jj-casino-card__responsible {
  position: absolute;
  bottom: 6px; left: 14px;
  font-family: var(--jj-font-body);
  font-size: 10px;
  color: var(--cc-fg-muted);
  margin: 0;
  letter-spacing: .02em;
}

/* responsive collapse */
@media (max-width: 760px) {
  .jj-casino-card--wide { grid-template-columns: 1fr; }
  .jj-casino-card--wide .jj-casino-card__logo { border-right: 0; border-bottom: 1px solid var(--cc-divider); justify-content: flex-start; }
  .jj-casino-card--wide .jj-casino-card__stats { padding: 14px 20px; gap: 14px; flex-direction: column; align-items: flex-start; }
  .jj-casino-card--wide .jj-casino-card__cta { padding: 0 20px 16px; }
  .jj-casino-card--wide .jj-casino-card__cta .jj-btn { width: 100%; }

  .jj-casino-card--review { grid-template-columns: 1fr; }
  .jj-casino-card--review .jj-casino-card__cta { border-left: 0; border-top: 1px solid var(--cc-divider); }

  .jj-casino-card--wide-rich { grid-template-columns: 1fr; }
  .jj-casino-card--wide-rich .jj-casino-card__logo { border-right: 0; border-bottom: 1px solid var(--cc-divider); }
  .jj-casino-card--wide-rich .jj-casino-card__cta { border-left: 0; border-top: 1px solid var(--cc-divider); }
}

/* mini game tile (slot card) */
.jj-game-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--jj-r-md);
  overflow: hidden;
  background: linear-gradient(160deg, #2A2A33 0%, #14141A 100%);
  border: 1px solid var(--jj-ink-4);
  cursor: pointer;
  transition: transform var(--jj-dur-base) var(--jj-ease);
}
.jj-game-tile:hover { transform: translateY(-3px); }
.jj-game-tile__title {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  color: #fff; font-family: var(--jj-font-display); font-weight: 700; font-size: 13px;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.jj-game-tile__badge {
  position: absolute; top: 8px; left: 8px;
}

/* ============================================================
   INFO BOXES — segue o mesmo padrão dos cards de operadores:
   superfície flat, faixa amarela no topo (assinatura da marca),
   tema escuro por padrão e .jj-info--light para fundo claro.
   Variants semânticas: tip (default, amarelo) · win · warn · note
   Variant de tema: --light
   Variant de layout: --inline (para alertas curtos onde 2 colunas
   economiza espaço vertical; o default é stacked com ícone+título
   na linha de cima e body em linha cheia abaixo).

   Estrutura HTML obrigatória:
   <div class="jj-info">
     <div class="jj-info__head">
       <span class="jj-info__icon">...svg...</span>
       <p class="jj-info__title">Título</p>
     </div>
     <p class="jj-info__body">Body em largura cheia</p>
   </div>
   ============================================================ */
.jj-info {
  /* tema escuro por padrão */
  --info-bg: var(--jj-ink-2);
  --info-fg: var(--jj-text-on-dark);
  --info-fg-muted: var(--jj-text-on-dark-2);
  --info-divider: var(--jj-ink-4);
  --info-accent: var(--jj-yellow);
  --info-icon-fg: var(--jj-ink);
  position: relative;
  display: block;
  padding: 18px 20px 20px;
  background: var(--info-bg);
  color: var(--info-fg);
  border-radius: 6px;
  overflow: hidden;
}
.jj-info::before {
  /* faixa de cor no topo — assinatura da marca + sinal semântico */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--info-accent);
  z-index: 1;
}
.jj-info__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.jj-info__icon {
  width: 44px; height: 44px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--info-accent);
  color: var(--info-icon-fg);
  flex-shrink: 0;
}
.jj-info__icon svg { width: 22px; height: 22px; }
.jj-info__title {
  font-family: var(--jj-font-display);
  font-weight: 800;
  font-size: 16px;
  margin: 0;
  letter-spacing: -.005em;
  color: var(--info-fg);
}
.jj-info__body  {
  font-family: var(--jj-font-body);
  font-size: 14px;
  color: var(--info-fg-muted);
  margin: 0;
  line-height: 1.55;
}

/* variants semânticas — só trocam a cor da faixa+ícone */
.jj-info--win  { --info-accent: var(--jj-win);  --info-icon-fg: #fff; }
.jj-info--warn { --info-accent: var(--jj-loss); --info-icon-fg: #fff; }
.jj-info--note { --info-accent: var(--jj-info); --info-icon-fg: #fff; }

/* variant de tema */
.jj-info--light {
  --info-bg: var(--jj-paper);
  --info-fg: var(--jj-ink);
  --info-fg-muted: var(--jj-text-2);
  --info-divider: var(--jj-fog);
  border: 1px solid var(--jj-fog);
}

/* variant de layout — 2 colunas (ícone à esquerda, head+body à direita)
   uso: alertas curtos onde economizar espaço vertical importa */
.jj-info--inline {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 18px 20px;
}
.jj-info--inline .jj-info__head {
  display: contents; /* desfaz o bloco; ícone vai pra coluna 1, título pra coluna 2 */
  margin: 0;
}
.jj-info--inline .jj-info__title { margin: 2px 0 4px; }
.jj-info--inline .jj-info__body { grid-column: 2; }

/* ---------- RATING ---------- */
.jj-rating { display: inline-flex; align-items: center; gap: 4px; }
.jj-rating__star {
  width: 18px; height: 18px;
  color: var(--jj-yellow);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
.jj-rating__star--off { color: var(--jj-fog); }
.jj-rating__score {
  font-family: var(--jj-font-display); font-weight: 800;
  font-size: var(--jj-fs-md); margin-left: 6px;
}
.jj-rating__count { font-size: var(--jj-fs-xs); color: var(--jj-text-3); margin-left: 4px; }

/* big rating chip — used on operator cards */
.jj-rating-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: 8px 10px;
  background: var(--jj-ink); color: var(--jj-yellow);
  border-radius: var(--jj-r-md);
  font-family: var(--jj-font-display); font-style: italic;
  line-height: 1;
}
.jj-rating-chip__score { font-size: 28px; font-weight: 900; }
.jj-rating-chip__max   { font-size: 11px; opacity: .7; margin-top: 4px; font-style: normal; letter-spacing: .04em; }

/* ---------- TABLES ---------- */
.jj-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--jj-fs-sm);
  background: var(--jj-paper);
  border: 1.5px solid var(--jj-ink);
  border-radius: var(--jj-r-md);
  overflow: hidden;
}
.jj-table thead th {
  background: var(--jj-ink); color: var(--jj-yellow);
  font-family: var(--jj-font-display); font-weight: 800; font-size: var(--jj-fs-sm);
  text-align: left;
  padding: 12px 16px;
  letter-spacing: 0.02em;
}
.jj-table tbody td {
  padding: 14px 16px;
  border-top: 1px solid var(--jj-fog);
  vertical-align: middle;
}
.jj-table tbody tr:nth-child(even) td { background: rgba(255,204,26,.05); }
.jj-table tbody tr:hover td { background: rgba(255,204,26,.12); }
.jj-table .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.jj-table .pos { color: var(--jj-win); font-weight: 700; }
.jj-table .neg { color: var(--jj-loss); font-weight: 700; }

/* ---------- ODDS / TICKETS ---------- */
.jj-odd {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--jj-font-mono);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--jj-r-sm);
  background: var(--jj-ink);
  color: var(--jj-yellow);
  font-size: var(--jj-fs-sm);
  letter-spacing: 0.02em;
}
.jj-odd--up   { color: var(--jj-win); background: #0E1A14; }
.jj-odd--down { color: var(--jj-loss); background: #1A0E0E; }

/* ---------- INPUTS ---------- */
.jj-input, .jj-select, .jj-textarea {
  width: 100%;
  font-family: var(--jj-font-body);
  font-size: var(--jj-fs-md);
  padding: 12px 14px;
  background: var(--jj-paper);
  border: 1.5px solid rgba(11,11,14,.18);
  border-radius: var(--jj-r-sm);
  color: var(--jj-text);
  transition: border-color var(--jj-dur-fast) var(--jj-ease), box-shadow var(--jj-dur-fast) var(--jj-ease);
}
.jj-input:focus, .jj-select:focus, .jj-textarea:focus {
  outline: none;
  border-color: var(--jj-ink);
  box-shadow: 0 0 0 4px rgba(255,204,26,.4);
}

.jj-search {
  position: relative;
}
.jj-search input {
  padding-left: 42px;
  background: var(--jj-paper);
  border-radius: var(--jj-r-pill);
}
.jj-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--jj-text-3); pointer-events: none;
}

/* ---------- TABS / PILLS ---------- */
.jj-pills { display: inline-flex; padding: 4px; background: var(--jj-fog); border-radius: var(--jj-r-pill); gap: 2px; }
.jj-pill {
  border: 0; background: transparent;
  padding: 8px 16px;
  border-radius: var(--jj-r-pill);
  font-family: var(--jj-font-body); font-size: var(--jj-fs-sm); font-weight: 600;
  color: var(--jj-text-2); cursor: pointer;
}
.jj-pill[aria-selected="true"], .jj-pill.is-active {
  background: var(--jj-ink); color: var(--jj-yellow);
  box-shadow: var(--jj-shadow-sm);
}

/* ---------- AVATAR / STREAMER ---------- */
.jj-avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--jj-yellow); object-fit: cover; background: var(--jj-fog); }
.jj-avatar--live { box-shadow: 0 0 0 3px var(--jj-paper), 0 0 0 5px var(--jj-loss); }

.jj-streamer-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--jj-r-md);
  background: var(--jj-paper); border: var(--jj-border);
}
.jj-streamer-card__name { font-weight: 700; font-size: var(--jj-fs-md); margin: 0; }
.jj-streamer-card__meta { font-size: var(--jj-fs-xs); color: var(--jj-text-3); margin: 2px 0 0; display:flex; gap:8px; align-items:center; }

/* ---------- DIVIDERS ---------- */
.jj-divider { height: 1px; background: var(--jj-fog); border: 0; margin: var(--jj-s-6) 0; }
.jj-divider--strong { background: var(--jj-ink); height: 2px; }
.jj-divider--zigzag {
  height: 8px; border: 0;
  background:
    linear-gradient(135deg, var(--jj-yellow) 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(225deg, var(--jj-yellow) 25%, transparent 25%) -8px 0/16px 16px;
}

/* ---------- BREADCRUMB ---------- */
.jj-crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--jj-fs-sm); color: var(--jj-text-3); align-items: center; }
.jj-crumbs a { color: var(--jj-text-2); text-decoration: none; }
.jj-crumbs a:hover { color: var(--jj-ink); text-decoration: underline; }
.jj-crumbs__sep::before { content: "/"; opacity: .4; }

/* ---------- ARTICLE / CONTENT ---------- */
.jj-prose {
  max-width: none;
  font-size: var(--jj-fs-md);
  line-height: 1.7;
  color: var(--jj-text);
}
.jj-prose > * + * { margin-top: 0; }
.jj-prose h2 {
  font-family: var(--jj-font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  margin: 32px 0 12px;
  letter-spacing: -.01em;
}
.jj-prose > h2:first-child { margin-top: 0; }
.jj-prose h3 {
  font-family: var(--jj-font-display);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 800;
  margin: 22px 0 8px;
}
.jj-prose p  { margin: 0 0 1em; }
.jj-prose a  { color: var(--jj-ink); text-decoration: underline; text-decoration-color: var(--jj-yellow); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.jj-prose a:hover { background: var(--jj-yellow); }
.jj-prose ul li::marker { color: var(--jj-yellow-deep); }
.jj-prose blockquote {
  border-left: 4px solid var(--jj-yellow);
  padding: 4px 0 4px 20px; margin: 1.4em 0;
  font-style: italic; color: var(--jj-text-2);
  font-family: var(--jj-font-display); font-size: var(--jj-fs-lg);
}



/* ============================================================
   ============================================================
   MIGRAÇÃO Sessão 51 (CSS Audit) — 2026-05-05
   Componentes do single-slot.php migrados do mockup aprovado.
   Auditados para usar tokens canonicos via var(--jj-*).
   ============================================================
   ============================================================ */


/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.jj-page {
  max-width: 1180px;
  margin: 0 auto;
}


/* ============================================================
   LAYOUT GRID (single-column body abaixo do hero)
   ============================================================ */
.jj-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.jj-layout__main {
  min-width: 0;
}


/* ============================================================
   SECTION — wrapper de seção editorial
   ============================================================ */
.jj-section { padding: 24px 16px; }
.jj-section > * + * { margin-top: 18px; }
.jj-section > .jj-section-eyebrow + .jj-section-title { margin-top: 0; }
.jj-section > .jj-section-title + .jj-section-intro { margin-top: -4px; }
.jj-section .jj-table { margin: 0; }
.jj-section .jj-table + p,
.jj-section p + .jj-table { margin-top: 14px; }

.jj-section-eyebrow {
  display: block;
  margin-bottom: 12px;
}
.jj-section-title {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(34px, 5.5vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--jj-text);
  margin: 0 0 20px;
}
.jj-section-title + .jj-section-intro { margin-top: -12px; }
.jj-section-intro {
  font-size: 15px;
  color: var(--jj-text-2);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: none;
}


/* ============================================================
   HERO — bloco de abertura com fundo escuro e ornamentos radiais
   ============================================================ */
.jj-hero {
  position: relative;
  overflow: hidden;
  background: var(--jj-ink);
  color: var(--jj-text-on-dark);
}
.jj-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 460px;
  height: 460px;
  background: radial-gradient(closest-side, rgba(255, 204, 26, .45), transparent 70%);
  pointer-events: none;
}
.jj-hero::after {
  content: "";
  position: absolute;
  left: -100px;
  bottom: -160px;
  width: 360px;
  height: 360px;
  background: radial-gradient(closest-side, rgba(107, 63, 212, .4), transparent 70%);
  pointer-events: none;
}
.jj-hero__inner {
  position: relative;
  z-index: 1;
}
.jj-hero__body {
  padding: 24px 16px 28px;
  position: relative;
  z-index: 1;
}
.jj-hero__title-block {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.jj-hero__title {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(32px, 7.5vw, 64px);
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--jj-text-on-dark);
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jj-hero__title em {
  color: var(--jj-yellow);
  font-style: italic;
  font-weight: 800;
}
.jj-hero__chip {
  flex-shrink: 0;
  background: var(--jj-yellow);
  color: var(--jj-ink);
  padding: 12px 18px;
  border-radius: var(--jj-r-md);
  text-align: center;
  border: 2px solid var(--jj-ink);
  box-shadow: var(--jj-shadow-pop);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
}
.jj-hero__chip-num {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  display: block;
  letter-spacing: -.02em;
}
.jj-hero__chip-max {
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  display: block;
  color: rgba(11, 11, 14, .7);
  margin-top: 2px;
}
.jj-hero__chip-label {
  font-family: var(--jj-font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
  color: rgba(11, 11, 14, .6);
  margin-bottom: 3px;
  font-weight: 600;
}
.jj-hero__provider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--jj-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--jj-yellow);
  text-decoration: none;
  margin: 0 0 22px;
}
.jj-hero__legal {
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--jj-text-on-dark-2);
  text-align: center;
  margin-top: 14px;
}


/* ============================================================
   INFO CARD — card no hero com header amarelo e body de stats
   ============================================================ */
.jj-info-card {
  background: var(--jj-ink-3);
  border: 1px solid var(--jj-ink-4);
  border-radius: var(--jj-r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.jj-info-card__header {
  background: var(--jj-yellow);
  color: var(--jj-ink);
  padding: 8px 16px 10px;
  text-align: center;
  border-bottom: 2px solid var(--jj-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.jj-info-card__header-eyebrow {
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(11, 11, 14, .7);
  font-weight: 700;
}
.jj-info-card__header-score {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--jj-ink);
}
.jj-info-card__header-score-max {
  font-family: var(--jj-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: rgba(11, 11, 14, .65);
  margin-left: 4px;
  letter-spacing: .04em;
}
.jj-info-card__body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.jj-info-card__body .jj-hero-stats {
  margin: 0;
  border-radius: var(--jj-r-md);
  border: 1px solid var(--jj-ink-4);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.jj-info-card__body .jj-hero-stat {
  border: none;
  border-right: 1px solid var(--jj-ink-4);
  border-bottom: 1px solid var(--jj-ink-4);
  border-radius: 0;
  padding: 12px 8px;
}
.jj-info-card__body .jj-hero-stat:nth-child(2n) { border-right: 0; }
.jj-info-card__body .jj-hero-stat:nth-last-child(-n+2) { border-bottom: 0; }


/* ============================================================
   HERO STATS — grid responsivo de stats reutilizável
   ============================================================ */
.jj-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.jj-hero-stat {
  background: var(--jj-ink-2);
  border: 1px solid var(--jj-ink-4);
  border-radius: var(--jj-r-md);
  padding: 10px 12px;
  text-align: center;
}
.jj-hero-stat__key {
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jj-text-on-dark-2);
  margin-bottom: 6px;
  display: block;
}
.jj-hero-stat__val {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.02em;
  display: block;
  color: var(--jj-text-on-dark);
}
.jj-hero-stat__val.win { color: var(--jj-win); }
.jj-hero-stat__val.yel { color: var(--jj-yellow); }
.jj-hero-stat__val.wt  { color: var(--jj-text-on-dark); }


/* ============================================================
   TOC CARD — índice expansível
   ============================================================ */
.jj-toc-card {
  background: var(--jj-paper);
  border: 1.5px solid var(--jj-ink-4);
  border-radius: var(--jj-r-lg);
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
}
.jj-toc-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--jj-yellow);
}
.jj-toc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.jj-toc-card__head-text {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}
.jj-toc-card__title {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--jj-text);
  margin: 0;
}
.jj-toc-card__count {
  font-family: var(--jj-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--jj-text-3);
}
.jj-toc-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--jj-text-2);
  transition: transform var(--jj-dur-base) var(--jj-ease);
}
.jj-toc-card__toggle svg {
  width: 16px;
  height: 16px;
}
.jj-toc-card.is-open .jj-toc-card__toggle { transform: rotate(180deg); }
.jj-toc-card__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: none;
  grid-template-columns: 1fr;
  gap: 0 18px;
}
.jj-toc-card.is-open .jj-toc-card__list { display: grid; }
.jj-toc-card__item { margin: 0; }
.jj-toc-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  color: var(--jj-text);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--jj-ink-5, rgba(11, 11, 14, .06));
  transition: color var(--jj-dur-fast) var(--jj-ease);
}
.jj-toc-card__link:hover { color: var(--jj-yellow-deep); }
.jj-toc-card__link-text { flex: 1; }
.jj-toc-card__link-arrow {
  color: var(--jj-text-3);
  font-size: 12px;
  transition: transform var(--jj-dur-fast) var(--jj-ease);
}
.jj-toc-card__link:hover .jj-toc-card__link-arrow {
  color: var(--jj-yellow-deep);
  transform: translateX(2px);
}


/* ============================================================
   DEMO CARD (3 camadas — skill 01c)
   1. Preview com play (jj-demo__thumb*)
   2. Modal de aviso (jj-demo-modal*)
   3. Iframe ativo (jj-demo-card__*)
   ============================================================ */
.jj-demo-wrap {
  padding: 24px 16px 0;
  position: relative;
  z-index: 1;
}
.jj-demo-wrap-desktop {
  padding: 0 16px;
  margin: 0 auto;
}
.jj-demo {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  max-height: 520px;
  border-radius: var(--jj-r-lg);
  overflow: hidden;
  background: var(--jj-ink);
  border: 1px solid rgba(255, 204, 26, .18);
  box-shadow:
    0 0 0 1px rgba(255, 204, 26, .06),
    0 24px 60px rgba(0, 0, 0, .5),
    0 0 80px rgba(255, 204, 26, .08);
}

/* Camada 1: preview */
.jj-demo__thumb {
  position: absolute;
  inset: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(
    ellipse at center,
    var(--jj-demo-thumb-from, #2a1f3d) 0%,
    var(--jj-demo-thumb-mid, #1a1024) 50%,
    var(--jj-demo-thumb-to, #0f0719) 100%
  );
}
.jj-demo__thumb-deco {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 204, 26, .18), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(255, 204, 26, .15), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 140, 0, .12), transparent 50%);
  pointer-events: none;
}
.jj-demo__thumb-pattern {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 20px,
    rgba(255, 204, 26, .03) 20px,
    rgba(255, 204, 26, .03) 21px
  );
  pointer-events: none;
}
.jj-demo__thumb-tigers {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 140px;
  opacity: .12;
  filter: saturate(1.5);
  pointer-events: none;
  line-height: 1;
}
.jj-demo__thumb-tigers span:nth-child(1) { transform: rotate(-8deg) translateY(20px); }
.jj-demo__thumb-tigers span:nth-child(3) { transform: rotate(8deg) translateY(20px); }
.jj-demo__thumb-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}
/* Imagem de capa do slot como fundo do thumb — opcional, via inline style */
.jj-demo__thumb-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.jj-demo__play {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.jj-demo__play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--jj-yellow);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 8px rgba(255, 204, 26, .18),
    0 0 40px rgba(255, 204, 26, .4);
  transition: transform .15s var(--jj-ease);
}
.jj-demo__play:hover .jj-demo__play-btn {
  transform: scale(1.08);
  box-shadow:
    0 0 0 12px rgba(255, 204, 26, .22),
    0 0 60px rgba(255, 204, 26, .55);
}
.jj-demo__play-btn svg {
  width: 22px;
  height: 22px;
  fill: var(--jj-ink);
  margin-left: 3px;
}
.jj-demo__play-hint {
  font-family: var(--jj-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.8);
} 0 2px 12px rgba(0, 0, 0, .7);
}
.jj-demo__play-title {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 20px;
  color: var(--jj-paper);
  letter-spacing: -.02em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .8);
  margin-top: -4px;
}
.jj-demo__play-legal {
  display: block;
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .9);
  margin-top: 6px;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,.95);
}

/* Estado vazio (sem demo URL) */
.jj-demo__unavailable {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--jj-ink-2), var(--jj-ink));
}
.jj-demo__unavailable p {
  font-family: var(--jj-font-mono);
  font-size: 13px;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--jj-text-on-dark-2);
  margin: 0;
  max-width: 360px;
}

/* Camada 2: modal */

/* ─────────────────────────────────────────────────────────────────────────────
   MODAL FULLSCREEN DA DEMO — jj-modal (camada 3: iframe por cima da página)
   Abre após confirmação do jj-demo-modal (modal regulatório).
   ───────────────────────────────────────────────────────────────────────────── */
.jj-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(6px);
  padding: 16px;
}
.jj-modal.is-open { display: flex; }
.jj-modal__disclaimer {
  display: none;
}
.jj-modal__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  background: var(--jj-ink);
  border-radius: var(--jj-r-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 204, 26, .2);
}
.jj-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  background: var(--jj-ink-3);
  color: var(--jj-text-on-dark);
  border: 1px solid var(--jj-ink-4);
  border-radius: var(--jj-r-pill);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
  z-index: 2;
}
.jj-modal__close:hover {
  background: var(--jj-yellow);
  color: var(--jj-ink);
  border-color: var(--jj-yellow);
}
.jj-modal__close svg { width: 18px; height: 18px; }
.jj-modal__inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
@media (max-width: 640px) {
  .jj-modal { padding: 8px; }
  .jj-modal__close { top: -40px; width: 32px; height: 32px; }
  .jj-modal__inner { max-height: 90vh; }
}

.jj-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.jj-demo-modal[open],
.jj-demo-modal.is-open { display: flex; }
.jj-demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .8);
  backdrop-filter: blur(8px);
}
.jj-demo-modal__content {
  position: relative;
  z-index: 1;
  background: var(--jj-paper);
  border-radius: var(--jj-r-lg);
  padding: 36px 28px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  text-align: center;
}
.jj-demo-modal__icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--jj-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  border: 3px solid var(--jj-ink);
}
.jj-demo-modal__title {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: var(--jj-text);
  margin: 0 0 10px;
}
.jj-demo-modal__lead {
  font-size: 15px;
  color: var(--jj-text-2);
  line-height: 1.5;
  margin: 0 0 20px;
}
.jj-demo-modal__list {
  text-align: left;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jj-demo-modal__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--jj-text-2);
  line-height: 1.4;
}
.jj-demo-modal__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--jj-yellow-deep);
  margin-top: 1px;
}
.jj-demo-modal__cta {
  width: 100%;
  justify-content: center;
}

/* Camada 3: iframe ativo */
.jj-demo-card--active .jj-demo-card__preview { display: none; }
.jj-demo-card__preview { display: block; }
.jj-demo-card__iframe-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--jj-ink);
  overflow: hidden;
}
.jj-demo-card__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.jj-demo-card__legal-running {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  background: var(--jj-ink);
  color: var(--jj-paper);
  font-family: var(--jj-font-body);
  font-size: 12px;
  line-height: 1.5;
  opacity: .85;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.jj-demo-card__legal-running svg {
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--jj-yellow);
}


/* ============================================================
   DISCLOSURE — accordion para ficha técnica completa
   ============================================================ */
.jj-disclosure-wrap {
  background: var(--jj-paper);
}
.jj-disclosure-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  background: var(--jj-paper);
  border: 1.5px solid var(--jj-ink);
  border-radius: var(--jj-r-lg);
  box-shadow: var(--jj-shadow-pop);
  position: relative;
  overflow: hidden;
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  color: var(--jj-text);
  transition: background var(--jj-dur-fast) var(--jj-ease);
}
.jj-disclosure-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--jj-yellow);
  z-index: 1;
}
.jj-disclosure-toggle:hover {
  background: rgba(11, 11, 14, .05);
}
.jj-disclosure-toggle__text {
  flex: 1;
  text-align: left;
}
.jj-disclosure-toggle__title {
  font-size: 15px;
}
.jj-disclosure-toggle__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--jj-text-2);
  transition: transform var(--jj-dur-base) var(--jj-ease);
}
.jj-disclosure-toggle__chevron svg {
  width: 16px;
  height: 16px;
}
.jj-disclosure-toggle[aria-expanded="true"] .jj-disclosure-toggle__chevron {
  transform: rotate(180deg);
}
.jj-disclosure-panel {
  display: none;
  margin-top: 12px;
  padding-top: 0;
}
.jj-disclosure-panel .jj-table { margin-bottom: 14px; }
.jj-disclosure-panel .jj-features-row { margin-top: 14px; }


/* ============================================================
   FEATURES ROW — pills de features dentro do disclosure
   ============================================================ */
.jj-features-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}


/* ============================================================
   VERDICT CARD — bloco de avaliação final
   ============================================================ */
.jj-verdict-card {
  background: var(--jj-paper);
  border: 2px solid var(--jj-ink);
  border-radius: var(--jj-r-lg);
  padding: 24px 24px 22px;
  box-shadow: var(--jj-shadow-pop);
  position: relative;
  overflow: hidden;
}
.jj-verdict-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--jj-yellow);
}
.jj-verdict-card__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.jj-verdict-card__chip {
  flex-shrink: 0;
  background: var(--jj-yellow);
  border: 2px solid var(--jj-ink);
  border-radius: var(--jj-r-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  box-shadow: var(--jj-shadow-pop);
}
.jj-verdict-card__chip-num {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: var(--jj-ink);
  letter-spacing: -.02em;
}
.jj-verdict-card__chip-max {
  font-family: var(--jj-font-mono);
  font-size: 10px;
  color: rgba(11, 11, 14, .7);
  margin-top: 2px;
  letter-spacing: .06em;
}
.jj-verdict-card__title-block {
  flex: 1;
  min-width: 0;
}
.jj-verdict-card__eyebrow {
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jj-text-3);
  font-weight: 600;
  margin: 0 0 4px;
}
.jj-verdict-card__title {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--jj-text);
  margin: 0;
}
.jj-verdict-card__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--jj-text-2);
  margin: 0;
}
.jj-verdict-card__text p { margin: 0 0 .9em; }
.jj-verdict-card__text p:last-child { margin: 0; }


/* ============================================================
   FAQ — perguntas frequentes em accordion (card style)
   Padrão aprovado: cada item é um card com background, borda e shadow.
   ============================================================ */
.jj-faq { margin: var(--jj-s-5) 0; }
.jj-faq__item {
  background: var(--jj-paper);
  border: var(--jj-border);
  border-radius: var(--jj-r-md);
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: var(--jj-shadow-sm);
}
.jj-faq__q {
  padding: 16px 18px;
  font-family: var(--jj-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--jj-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  letter-spacing: -.01em;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-style: italic;
}
.jj-faq__q svg {
  width: 18px;
  height: 18px;
  stroke: var(--jj-text-3);
  stroke-width: 2.5;
  fill: none;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.jj-faq__item.is-open .jj-faq__q svg { transform: rotate(180deg); }
.jj-faq__a {
  display: none;
  padding: 0 18px 16px;
  font-size: 14px;
  color: var(--jj-text-2);
  line-height: 1.7;
}
.jj-faq__item.is-open .jj-faq__a { display: block; }


/* ============================================================
   TIPS — bloco de dicas com items destacados
   ============================================================ */
.jj-tips {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jj-tip {
  background: var(--jj-paper);
  border: 1.5px solid var(--jj-ink-4);
  border-radius: var(--jj-r-md);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--jj-text-2);
  position: relative;
  padding-left: 20px;
}
.jj-tip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--jj-yellow);
  border-radius: 2px 0 0 2px;
}
.jj-tip strong {
  display: block;
  color: var(--jj-text);
  font-weight: 700;
  margin-bottom: 4px;
}


/* ============================================================
   CTA BAND — faixa de chamada final fundo escuro
   ============================================================ */
.jj-cta-band {
  background: var(--jj-ink);
  color: var(--jj-text-on-dark);
  padding: 32px 24px;
  border-radius: var(--jj-r-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.jj-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 204, 26, .12), transparent 70%);
  pointer-events: none;
}
.jj-cta-band__eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: var(--jj-yellow);
}
.jj-cta-band__title {
  position: relative;
  z-index: 1;
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  color: var(--jj-text-on-dark);
}
.jj-cta-band__title em {
  color: var(--jj-yellow);
  font-style: italic;
}
.jj-cta-band__cta {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}
.jj-cta-band__legal {
  position: relative;
  z-index: 1;
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--jj-text-on-dark-2);
  margin: 0;
}


/* ============================================================
   DISCLAIMER BLOCK — bloco final de avisos legais
   ============================================================ */
.jj-disclaimer-block {
  background: var(--jj-cream, rgba(11, 11, 14, .03));
  padding: 24px 16px;
  margin-top: 32px;
}
.jj-disclaimer-block__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.jj-disclaimer-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jj-disclaimer-block__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--jj-text-2);
}
.jj-disclaimer-block__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jj-text-3);
}
.jj-disclaimer-block__icon svg {
  width: 22px;
  height: 22px;
}
.jj-disclaimer-block__content { flex: 1; }
.jj-disclaimer-block__content strong {
  color: var(--jj-text);
  font-weight: 700;
}
.jj-disclaimer-block__content a {
  color: var(--jj-text);
  text-decoration: underline;
  text-decoration-color: var(--jj-yellow);
  text-decoration-thickness: 2px;
}


/* ============================================================
   GAME TILE — tile de slot relacionado
   ============================================================ */
.jj-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--jj-text);
}
.jj-tile__thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--jj-r-md);
  overflow: hidden;
  background: linear-gradient(160deg, var(--jj-ink-3) 0%, var(--jj-ink-2) 100%);
  border: 1px solid var(--jj-ink-4);
  transition: transform var(--jj-dur-base) var(--jj-ease);
}
.jj-tile:hover .jj-tile__thumb { transform: translateY(-3px); }
.jj-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jj-tile__name {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  margin: 0;
}
.jj-tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--jj-font-mono);
  font-size: 11px;
  color: var(--jj-text-3);
}
.jj-tile__rtp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.jj-tile__rtp-label {
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--jj-text-3);
}
.jj-tile__rtp-val {
  font-family: var(--jj-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--jj-text);
}
.jj-tile__rtp-val.is-good { color: var(--jj-win); }
.jj-tile__rtp-val.is-bad  { color: var(--jj-loss); }


/* ============================================================
   TILES GRID — grade responsiva de tiles
   ============================================================ */
.jj-tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}


/* ============================================================
   PROSCONS — bloco de prós e contras (já tem .jj-card no canônico)
   ============================================================ */
.jj-proscons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.jj-proscons__col { padding: 18px; }
.jj-proscons__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--jj-text);
  margin: 0 0 12px;
}
.jj-proscons__title em {
  color: var(--jj-text);
  font-style: italic;
}
.jj-proscons__title-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jj-proscons__title-icon.g { background: var(--jj-win); }
.jj-proscons__title-icon.r { background: var(--jj-loss); }
.jj-proscons__title-icon svg {
  width: 16px;
  height: 16px;
}
.jj-proscons__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jj-proscons__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jj-text-2);
}
.jj-proscons__list svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ============================================================
   CASINO CARDS WRAPPER — agrupa instancias do ACF Block
   ============================================================ */
.jj-casino-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}


/* ============================================================
   ALIAS legacy: .jj-info--warning -> .jj-info--warn
   Permite que código antigo funcione enquanto o template é
   atualizado para usar o nome canônico.
   ============================================================ */
.jj-info--warning {
  --info-accent: var(--jj-loss);
  --info-icon-fg: var(--jj-paper);
}


/* ============================================================
   RESPONSIVOS — ajustes desktop ≥640px e ≥1000px
   ============================================================ */
@media (min-width: 640px) {
  .jj-hero-stats { grid-template-columns: repeat(4, 1fr); }
  .jj-tiles-grid { grid-template-columns: repeat(3, 1fr); }
  .jj-proscons   { grid-template-columns: 1fr 1fr; }
  .jj-toc-card__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .jj-section { padding: 32px 0; }
  .jj-page    { padding: 0 32px; }
  .jj-demo-wrap { padding: 32px 32px 0; }
  .jj-hero__body {
    padding: 40px 32px 48px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .jj-tiles-grid { grid-template-columns: repeat(4, 1fr); }
  .jj-toc-card__list { grid-template-columns: repeat(3, 1fr); }

  .jj-layout {
    padding: 0 32px;
  }
  .jj-layout__main .jj-section {
    padding: 32px 0;
    border-top: 1px solid rgba(11, 11, 14, .06);
  }
  .jj-layout__main .jj-section:first-child {
    border-top: 0;
    padding-top: 24px;
  }

  /* Hero como grid 2 colunas no desktop */
  .jj-hero .jj-hero__body {
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-areas:
      "crumbs crumbs"
      "title  title"
      "demo   info"
      "demo   cta"
      "legal  legal";
    gap: 16px 24px;
    align-items: stretch;
  }
  .jj-hero .jj-hero__body > .jj-crumbs       { grid-area: crumbs; margin: 0; }
  .jj-hero .jj-hero__body > .jj-hero__title-block {
    grid-area: title;
    margin: 0;
    align-items: flex-end;
    gap: 14px;
  }
  .jj-hero .jj-hero__body > .jj-hero__title-block .jj-hero__title {
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 1;
    -webkit-line-clamp: 2;
  }
  .jj-hero .jj-hero__body > .jj-demo-wrap-desktop {
    grid-area: demo;
    padding: 0;
    margin: 0;
    height: 100%;
  }
  .jj-hero .jj-hero__body > .jj-demo-wrap-desktop .jj-demo {
    height: 100%;
    width: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: unset;
    margin: 0;
    border-radius: var(--jj-r-lg);
  }
  .jj-hero .jj-hero__body > .jj-info-card { grid-area: info; margin: 0; }
  .jj-hero .jj-hero__body > .jj-hero__legal {
    grid-area: legal;
    margin: 0;
    padding-top: 8px;
  }
}




/* ============================================================
   OP-BAR-102 — CTA inline (variant inline do ACF Block jj/casino-cta)
   Layout horizontal: brand (logo + texto) | perks | botão.
   Linha 2: aviso legal cobrindo largura total.
   
   Originalmente projetado para o hero do single-casa-apostas
   (full-width). Recebe layout vertical compacto automatico quando
   inserido dentro do .jj-hero (coluna direita ~380px no desktop).
   ============================================================ */

.jj-op-bar102 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 32px;
  row-gap: 6px;
  background: var(--jj-ink-2);
  border: 1px solid var(--jj-ink-4);
  border-top: 3px solid var(--jj-yellow);
  border-radius: var(--jj-r-md);
  padding: 18px 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* Coluna 1: logo + (eyebrow + nome) empilhados */
.jj-op-bar102-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.jj-op-bar102-logo {
  width: 60px;
  height: 60px;
  background: var(--jj-yellow);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jj-op-bar102-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.jj-op-bar102-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.jj-op-bar102-eyebrow {
  font-family: var(--jj-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--jj-text-on-dark);
  line-height: 1.1;
}
.jj-op-bar102-name {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 24px;
  color: var(--jj-text-on-dark);
  letter-spacing: -.02em;
  line-height: 1.05;
}

/* Coluna 2: perks lado a lado */
.jj-op-bar102-perks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.jj-op-bar102-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--jj-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--jj-text-on-dark);
  line-height: 1.2;
}
.jj-op-bar102-perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--jj-yellow);
  line-height: 1;
  flex-shrink: 0;
}
.jj-op-bar102-perk-text {
  color: var(--jj-text-on-dark);
}

/* Coluna 3: botão */
.jj-op-bar102-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jj-op-bar102-cta .jj-btn {
  min-width: 160px;
}

/* Linha 2: aviso legal full-width */
.jj-op-bar102-legal {
  grid-column: 1 / -1;
  font-family: var(--jj-font-mono);
  font-size: 11px;
  color: var(--jj-text-on-dark-2);
  text-align: center;
  letter-spacing: .04em;
  font-weight: 500;
  line-height: 1.3;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin: 0;
}


/* ============================================================
   Mobile (≤780px) — comportamento original do mockup v39:
   logo+texto vertical | perks vertical | CTA full embaixo
   ============================================================ */
@media (max-width: 780px) {
  .jj-op-bar102 {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 14px 18px;
    padding: 20px 18px;
    text-align: left;
  }
  .jj-op-bar102-brand {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    justify-content: center;
  }
  .jj-op-bar102-brand-text {
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .jj-op-bar102-eyebrow { font-size: 12px; }
  .jj-op-bar102-name    { font-size: 22px; }
  .jj-op-bar102-perks {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .jj-op-bar102-perk {
    justify-content: flex-start;
    font-size: 13.5px;
  }
  .jj-op-bar102-cta {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    align-items: center;
    margin-top: 4px;
    gap: 14px;
  }
  .jj-op-bar102-cta .jj-btn {
    width: 100%;
    min-width: 0;
  }
}


/* ============================================================
   .jj-op-bar102 dentro do .jj-hero (single-slot)
   No desktop o hero é grid 2 colunas e o CTA fica numa coluna
   estreita (~380px). Adapta para layout vertical empilhado.
   ============================================================ */
@media (min-width: 1000px) {
  .jj-hero .jj-op-bar102 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px 16px;
    text-align: center;
  }
  .jj-hero .jj-op-bar102-brand {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  .jj-hero .jj-op-bar102-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    padding: 4px;
  }
  .jj-hero .jj-op-bar102-brand-text {
    align-items: flex-start;
    text-align: left;
    gap: 2px;
  }
  .jj-hero .jj-op-bar102-eyebrow { font-size: 11px; }
  .jj-hero .jj-op-bar102-name    { font-size: 20px; }
  .jj-hero .jj-op-bar102-perks {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    text-align: left;
  }
  .jj-hero .jj-op-bar102-perk {
    font-size: 13px;
    width: 100%;
  }
  .jj-hero .jj-op-bar102-cta {
    width: 100%;
  }
  .jj-hero .jj-op-bar102-cta .jj-btn {
    width: 100%;
    min-width: 0;
  }
  .jj-hero .jj-op-bar102-legal {
    font-size: 10px;
    padding-top: 6px;
    border-top-color: rgba(255, 255, 255, .06);
  }
}


/* ============================================================
   CTA CARD — variante vertical para o hero do single-slot
   Usado na coluna direita estreita (~380px) do hero em desktop.
   Card claro com borda amarela contendo: logo (placeholder ou img)
   + eyebrow + headline + sub + botao full-width.
   ============================================================ */

.jj-cta-card {
  background: var(--jj-paper);
  border: 2px solid var(--jj-yellow);
  border-radius: var(--jj-r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--jj-shadow-pop);
}
.jj-cta-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jj-cta-card__logo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--jj-ink);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.jj-cta-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.jj-cta-card__info {
  flex: 1;
  min-width: 0;
}
.jj-cta-card__eyebrow {
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jj-text-3);
  font-weight: 600;
  margin: 0 0 2px;
}
.jj-cta-card__headline {
  font-family: var(--jj-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--jj-text);
  margin: 0 0 4px;
}
.jj-cta-card__sub {
  font-size: 12px;
  color: var(--jj-text-2);
  margin: 0;
  line-height: 1.4;
}
.jj-cta-card__btn {
  width: 100%;
  justify-content: center;
}

.jj-cta-card__legal {
  font-family: var(--jj-font-mono);
  font-size: 10px;
  letter-spacing: .03em;
  color: var(--jj-text-3);
  text-align: center;
  margin: 4px 0 0;
  line-height: 1.4;
}


/* ============================================================
   HERO LAYOUT — single-slot
   Mobile-first: tudo empilhado.
   Desktop (>=1000px): grid 2 colunas com areas.
   ============================================================ */

/* Mobile: empilhado, espacamento entre blocos */
.jj-hero .jj-hero__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.jj-hero .jj-hero__body > .jj-demo-wrap-desktop {
  padding: 0;
}
.jj-hero .jj-hero__body > .jj-demo-wrap-desktop .jj-demo {
  margin: 0;
  max-width: none;
}
.jj-hero__body > .jj-crumbs,
.jj-hero__body > .jj-hero__title-block,
.jj-hero__body > .jj-hero__legal {
  margin-bottom: 0;
}
.jj-hero__body > .jj-hero__title-block {
  margin-top: 6px;
}

/* Desktop: hero grid 2 colunas (1fr | 380px) */
@media (min-width: 1000px) {
  .jj-hero .jj-hero__body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px;
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-areas:
      "crumbs crumbs"
      "title  title"
      "demo   info"
      "demo   cta"
      "legal  legal";
    gap: 16px 24px;
    align-items: stretch;
  }
  .jj-hero .jj-hero__body > .jj-crumbs {
    grid-area: crumbs;
    margin: 0;
  }
  .jj-hero .jj-hero__body > .jj-hero__title-block {
    grid-area: title;
    margin: 0;
    align-items: flex-end;
    gap: 14px;
  }
  .jj-hero .jj-hero__body > .jj-hero__title-block .jj-hero__title {
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 1;
  }
  .jj-hero .jj-hero__body > .jj-demo-wrap-desktop {
    grid-area: demo;
    padding: 0;
    margin: 0;
    height: 100%;
  }
  .jj-hero .jj-hero__body > .jj-demo-wrap-desktop .jj-demo {
    height: 100%;
    width: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: unset;
    margin: 0;
    border-radius: var(--jj-r-lg);
  }
  .jj-hero .jj-hero__body > .jj-info-card {
    grid-area: info;
    margin: 0;
  }
  .jj-hero .jj-hero__body > .jj-cta-card {
    grid-area: cta;
    margin: 0;
  }
  .jj-hero .jj-hero__body > .jj-hero__legal {
    grid-area: legal;
    margin: 0;
    padding-top: 8px;
  }
}


/* ============================================================
   FOXIZ NAVIGATION OVERRIDES
   Migrado do Custom CSS do kit Elementor (post-7.css) em sessão 62.
   Estes estilos sobrescrevem a navegação nativa do Foxiz com tokens JJ.
   Inclui: header desktop, dropdowns, mobile menu, badge 18+.
   ============================================================ */
.rb-nav > li > a,
.rb-menu > li > a {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #F5F5F0 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  transition: color 180ms ease, background 180ms ease !important;
}

.rb-nav > li > a:hover,
.rb-menu > li > a:hover {
  color: #FFCC1A !important;
  background: rgba(255,204,26,0.08) !important;
}

.rb-nav > li.current-menu-item > a,
.rb-menu > li.current-menu-item > a {
  color: #FFCC1A !important;
}

/* Esconder more menu (3 pontinhos) */
.rb-more-menu-btn,
.rb-more-nav,
li.rb-more-item {
  display: none !important;
}

/* Submenu */
.rb-dropdown, .sub-menu, .rb-mega-dropdown {
  background: #14141A !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important;
}

.rb-dropdown li a, .sub-menu li a {
  color: #F5F5F0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.rb-dropdown li a:hover, .sub-menu li a:hover {
  color: #FFCC1A !important;
  background: rgba(255,204,26,0.08) !important;
}

/* Badge 18+ */
.rb-header-end::after {
  content: '18+';
  display: inline-flex;
  align-items: center;
  background: #E03A3A;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 5px;
  line-height: 1;
  margin-left: 8px;
}

/* Sticky com blur */
.rb-is-sticky .rb-header-inner {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Mobile */
.rb-mobile-header {
  background: #0B0B0E !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.rb-mobile-header .rb-header-inner {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.mobile-menu-wrap, .mobile-menu-overlay, .rb-mobile-nav {
  background: #0B0B0E !important;
}

.mobile-menu li a, .rb-mobile-menu li a {
  color: #F5F5F0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.mobile-menu li a:hover { color: #FFCC1A !important; }


/* Fix: elementor placeholder nao usado no single-slot */
.elementor-theme-builder-content-area { height: 0 !important; overflow: hidden; }