/* ============================================================================
   Esmeralda Noir — premium elevation pass · v5.2 (Fable 5 stage 2, 2026-07-02)
   Loaded AFTER main.css. Additive only: refines the existing Esmeralda tokens
   toward a jewel-dark fintech polish (ref: crypto.signals quality bar, MelateBot
   emerald identity). Keeps all component logic; raises typography, depth,
   atmosphere, motion. Theme-aware (dark default + light override at the end).
   v5 (impl5 block at the end): container/kicker repairs, one-ball system,
   nav active states + SVG theme toggle, band grades, chart labels, 44px targets.
   ============================================================================ */

:root {
  /* Distinctive type pairing — off the overused Space Grotesk.
     Bricolage Grotesque = characterful display + gorgeous tabular numerals;
     General Sans = clean, warm body. */
  --font-head: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'General Sans', 'Manrope', system-ui, sans-serif;
  --font-num:  'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;

  /* Jackpot gold — MelateBot's signature accent for bolsa / winnings. */
  --gold:        #F4C95B;
  --gold-bright: #FFE08A;
  --gold-soft:   rgba(244,201,91,.14);
  --gold-grad:   linear-gradient(135deg,#FFE08A 0%,#F4C95B 45%,#E0A93B 100%);

  /* Richer depth + emerald glow */
  --noir-glow:   0 0 0 1px rgba(52,200,146,.05), 0 18px 50px -18px rgba(0,0,0,.7);
  --noir-edge:   inset 0 1px 0 rgba(255,255,255,.06);
  --emerald-grad:linear-gradient(135deg, var(--esmeralda-400) 0%, var(--esmeralda-600) 100%);
}

/* ---- Atmosphere: layered ink background with emerald light + fine grain ---- */
body {
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(24,184,129,.10) 0%, transparent 42%),
    radial-gradient(90% 70% at 100% 6%, rgba(20,163,114,.07) 0%, transparent 45%),
    radial-gradient(120% 120% at 80% 110%, rgba(8,52,38,.55) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  letter-spacing: -.005em;
}
/* fine dot-grain veil for texture (sits above bg, below content) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 4px 4px; mix-blend-mode: screen; opacity: .6;
}
.app, .content, .content--auth, .appbar, .footer { position: relative; z-index: 1; }

/* ---- Typography: display headings + crisp tabular numerals ----
   Bricolage Grotesque is a WIDE display face; at bold/semibold on real headlines it
   reads heavy and hard to scan. Cap heading weight to Medium (500) and ease the
   tight tracking — app-wide readability fix. (Numbers stay bold below; they're
   short + benefit from the impact.) */
h1, h2, h3, .brand, .mb-h1, .mb-h2, .mb-h3,
.hero__title, .section-title, .page-heading, .section-heading,
.mb-display, .mb-title, .card-title {
  font-family: var(--font-head);
  font-weight: 500 !important;
  letter-spacing: -.008em;
  font-feature-settings: "ss01" 1;
}
.hero__title { line-height: 1.05; }
.mb-num, .num, .amount, .jackpot, .stat-value, .kpi-value {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; font-weight: 600;
}
/* tiny uppercased kicker label, ref-style */
.kicker, .mb-kicker, .overline {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em;
  font-size: 11px; font-weight: 600; color: var(--text-subtle);
}

/* ---- Brand: emerald → gold sheen ---- */
.brand .accent, .side__brand b i {
  background: linear-gradient(120deg, var(--esmeralda-300), var(--gold-bright));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.side__brand .m, .appbar .brand::before {
  /* keep existing mark; just a touch of glow handled below */
}

/* ---- Cards: glass-edged, layered depth, hairline gradient border ---- */
.card, .mb-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--noir-edge), var(--noir-glow);
  position: relative;
}
/* interactive cards lift on hover */
a.card:hover, .card--hover:hover, .mb-card--hover:hover {
  transform: translateY(-2px);
  border-color: rgba(52,200,146,.28);
  box-shadow: var(--noir-edge), 0 24px 60px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(52,200,146,.10);
  transition: transform var(--dur-base) var(--ease-emphasized), box-shadow var(--dur-base), border-color var(--dur-base);
}

/* ---- Hero / jackpot card: the signature surface (bolsa in gold) ---- */
.mb-hero, .jackpot-card, .hero-card {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(24,184,129,.16) 0%, transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 30%),
    var(--surface);
  border: 1px solid rgba(52,200,146,.18);
  border-radius: 22px;
  box-shadow: var(--noir-edge), 0 24px 70px -24px rgba(0,0,0,.8), var(--shadow-glow-accent);
  padding: 22px 24px;
}
.mb-hero .amount, .jackpot-card .amount, .mb-jackpot__amount {
  font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 7vw, 60px); line-height: .98; letter-spacing: -.03em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-shadow: 0 2px 30px rgba(244,201,91,.18);
}

/* ---- Buttons: emerald gradient + glow, crisp press ---- */
.btn-primary, .btn-primary.btn-sm, .mb-btn--primary {
  background: var(--emerald-grad);
  color: var(--on-accent); font-family: var(--font-body); font-weight: 600;
  border: none; border-radius: 12px;
  box-shadow: 0 6px 20px -6px rgba(24,184,129,.5), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base), filter var(--dur-base);
}
.btn-primary:hover, .btn-primary.btn-sm:hover, .mb-btn--primary:hover {
  transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 12px 30px -8px rgba(24,184,129,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:active { transform: translateY(0); }
.btn-block { border-radius: 12px; }
.btn-ghost, .mb-btn--ghost {
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 12px; backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--line-strong); }

/* ---- Inputs: refined dark wells with emerald focus glow ---- */
.fld, .mb-input, .mb-select, input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  background: rgba(0,0,0,.22); border: 1px solid var(--line);
  border-radius: 12px; transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
}
.fld:focus, .mb-input:focus, .mb-select:focus,
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--esmeralda-400);
  box-shadow: 0 0 0 4px rgba(24,184,129,.16); background: rgba(0,0,0,.3);
}
.lab { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--text-muted); letter-spacing: .01em; }

/* ---- Lottery balls: gradient fill, depth, ring ---- */
.mb-ball {
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, var(--surface-2), var(--elevated));
  border: 1px solid var(--line-strong);
  box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums;
}
.mb-ball--add {
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.4), rgba(255,255,255,0) 55%),
    var(--emerald-grad);
  color: var(--on-accent); border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 20px rgba(24,184,129,.45), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---- Segmented pill tabs (ref: Watchlist / Gainers / Losers) ---- */
.seg, .pill-tabs, .mb-seg {
  display: inline-flex; gap: 2px; padding: 4px;
  background: rgba(0,0,0,.28); border: 1px solid var(--line);
  border-radius: 999px;
}
.seg > a, .seg > button, .pill-tabs > a, .pill-tabs > button, .mb-seg > * {
  border: none; background: transparent; color: var(--text-muted);
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: color var(--dur-base), background var(--dur-base);
}
.seg > .is-active, .pill-tabs > .is-active, .mb-seg > .is-active,
.seg > [aria-selected="true"], .pill-tabs > [aria-selected="true"] {
  background: linear-gradient(180deg, var(--surface-2), var(--elevated));
  color: var(--text-strong); box-shadow: var(--noir-edge), 0 2px 8px rgba(0,0,0,.4);
}

/* ---- Sidebar + nav: subtle gradient + active glow ---- */
.side {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--esmeralda-900) 8%), var(--surface));
  border-right: 1px solid var(--line);
}
.navlink { border-radius: 11px; transition: background var(--dur-base), color var(--dur-base); }
.navlink:hover { background: rgba(255,255,255,.04); }
.navlink--active {
  color: var(--text-strong);
  background: linear-gradient(180deg, rgba(24,184,129,.18), rgba(24,184,129,.06));
  box-shadow: inset 0 0 0 1px rgba(52,200,146,.22), var(--noir-edge);
}
.userchip .av {
  background: linear-gradient(135deg, var(--esmeralda-400), var(--esmeralda-700));
  color: var(--on-accent); font-family: var(--font-head); font-weight: 600;
  box-shadow: 0 4px 14px rgba(24,184,129,.4);
}

/* ---- Appbar: deeper glass ---- */
.appbar { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(1.2); }

/* ---- Auth pages: centered premium card ---- */
.content--auth { padding-top: 6vh; }
.content--auth .card, .content--auth .narrow > .card {
  box-shadow: var(--noir-edge), 0 30px 80px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(52,200,146,.06);
}

/* ---- Pills / chips / badges ---- */
.chip, .badge, .pill {
  font-family: var(--font-body); font-weight: 600; letter-spacing: .01em;
  border-radius: 999px;
}

/* ---- Alerts: refined ---- */
.alert { border-radius: 14px; backdrop-filter: blur(6px); }
.alert.notice { background: var(--accent-soft); border: 1px solid rgba(52,200,146,.3); }

/* ---- Motion: orchestrated page-load reveal ---- */
@keyframes noir-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.content > * , .content--auth > * { animation: noir-rise var(--dur-slow) var(--ease-emphasized) both; }
.content > *:nth-child(1){animation-delay:.02s} .content > *:nth-child(2){animation-delay:.08s}
.content > *:nth-child(3){animation-delay:.14s} .content > *:nth-child(4){animation-delay:.2s}
.content > *:nth-child(5){animation-delay:.26s} .content > *:nth-child(6){animation-delay:.32s}

/* selection */
::selection { background: rgba(24,184,129,.3); color: var(--text-strong); }

/* ---- LIGHT theme atmosphere override ---- */
[data-theme="light"] body {
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(24,184,129,.10) 0%, transparent 42%),
    radial-gradient(90% 70% at 100% 6%, rgba(244,201,91,.08) 0%, transparent 45%),
    var(--bg);
}
[data-theme="light"] body::before { opacity: .25; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(14,19,17,.05) 1px, transparent 1px); }
[data-theme="light"] .fld, [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #fff; }
[data-theme="light"] .seg, [data-theme="light"] .pill-tabs { background: rgba(14,19,17,.05); }

@media (prefers-reduced-motion: reduce) {
  .content > *, .content--auth > * { animation: none; }
  a.card:hover, .card--hover:hover { transform: none; }
}

/* ============================================================================
   Flag language picker (ported from azdoctor, Esmeralda-tuned).
   Shows the CURRENT language (flag + code); menu lets you pick another.
   Progressive enhancement: .lang-pick links are visible no-JS, hidden once
   lang-select.js upgrades them into .lang-select.
   ============================================================================ */
.lang-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.lang-select { position: relative; display: inline-flex; }
.flag { display: inline-flex; width: 21px; height: 15px; border-radius: 3px; overflow: hidden; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); }
.flag svg { width: 100%; height: 100%; display: block; }

.lang-trigger {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--text-muted); cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 13px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.lang-trigger:hover { background: var(--surface-2); color: var(--text-strong); border-color: var(--line-strong); }
.lang-trigger:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(24,184,129,.16); }
.lang-code { letter-spacing: .04em; }
.lang-chevron { width: 11px; height: 11px; opacity: .7; transition: transform .18s ease; }
.lang-select.open .lang-chevron { transform: rotate(180deg); }
.lang-chevron-wrap, .lang-check-wrap { display: inline-flex; }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 190px; padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 42%), var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.75);
  animation: lang-pop .16s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lang-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.lang-menu.left { right: auto; left: 0; }

.lang-option {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
  background: transparent; border-radius: 10px; text-decoration: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  transition: background .12s ease, color .12s ease;
}
.lang-option:hover, .lang-option:focus-visible { background: rgba(255,255,255,.05); color: var(--text-strong); outline: none; }
.lang-name { flex: 1; white-space: nowrap; }
.lang-check { width: 14px; height: 14px; flex: none; opacity: 0; color: var(--esmeralda-300); transition: opacity .12s ease; }
.lang-option.active { color: var(--text-strong); }
.lang-option.active .lang-check { opacity: 1; }
.lang-option.active .flag { box-shadow: inset 0 0 0 1px rgba(52,200,146,.5), 0 0 0 2px rgba(24,184,129,.18); }

[data-theme="light"] .lang-option:hover, [data-theme="light"] .lang-option:focus-visible { background: rgba(14,19,17,.05); }
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } }

/* ============================================================
   v4 — generated imagery atmosphere (additive). Revert: drop the ?v=4 link.
   Emerald/gold generated art (images/atmosphere.png) layered behind the
   hero + closing CTA, masked into the ink so text stays readable.
   ============================================================ */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .40;
  background: url("/images/atmosphere.png") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  mix-blend-mode: screen;
}
.hero > * { position: relative; z-index: 1; }
[data-theme="light"] .hero::before { opacity: .14; mix-blend-mode: normal; }

.final-cta { position: relative; isolation: isolate; overflow: hidden; }
.final-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .50;
  background: url("/images/atmosphere.png") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 18%, transparent 78%);
          mask-image: radial-gradient(120% 120% at 50% 40%, #000 18%, transparent 78%);
  mix-blend-mode: screen;
}
[data-theme="light"] .final-cta::before { opacity: .12; mix-blend-mode: normal; }

/* ============================================================
   v5 — brand mark on the header (the logo, not just the browser tab).
   Revert: drop the ?v=5 link. Mark sits inside .brand before the wordmark.
   ============================================================ */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand-mark {
  width: 30px; height: 30px; flex: 0 0 auto; display: inline-block;
  border-radius: 8px; vertical-align: middle;
  filter: drop-shadow(0 2px 8px rgba(244,201,91,.18));
}
.site-header .brand-mark { transition: transform .25s ease; }
.site-header .brand:hover .brand-mark { transform: rotate(-4deg) scale(1.05); }

/* ============================================================================
   v7 — Blog post: Esmeralda Noir EDITORIAL reading experience.
   Scoped to .blog-post (+ the fixed progress bar). Additive; revert: drop the
   ?v=7 bump + this block. Uses the web token system (dark default / light override).
   v7 swaps the shared atmosphere band for a per-post PHOTOGRAPHIC hero
   (curated Pexels library, resolver in web/lib/blog/HeroImage.php).
   ============================================================================ */

/* Reading-progress bar — emerald→gold, pinned to the very top of the viewport. */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1000;
  background: linear-gradient(90deg, var(--esmeralda-400), var(--gold));
  box-shadow: 0 0 14px rgba(244,201,91,.45); transition: width .12s linear;
}

/* ---- Photographic hero band: per-post Pexels photo, emerald-graded ----
   The photo arrives as the inline --blog-hero custom property set per post in
   post.php (resolver: web/lib/blog/HeroImage.php). It is colour-graded toward
   brand emerald and scrimmed dark so the white title stays legible. The band is
   a dark "glass" header in BOTH themes by design — the body below adapts, the
   hero does not. ---- */
.blog-post { position: relative; }
.blog-post-header {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(320px, 52vh, 500px);
  padding: 4.75rem 0 2.6rem;
}
/* layer -2: photograph + emerald colour-grade, blended in one paint */
.blog-post-header::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(11,96,72,.45), rgba(11,96,72,.45)),
    var(--blog-hero, url("/images/blog-atmosphere.png"));
  background-size: cover, cover;
  background-position: center, var(--blog-hero-pos, center);
  background-blend-mode: color;
  transform: scale(1.045);
}
/* layer -1: legibility scrim + emerald corner glow + 3px gold seam at the foot */
.blog-post-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, #18b881, #F4C95B 55%, rgba(244,201,91,0) 95%),
    linear-gradient(180deg, rgba(7,12,10,.28) 0%, rgba(7,12,10,.50) 46%, rgba(6,11,9,.94) 100%),
    radial-gradient(120% 86% at 22% 12%, rgba(24,184,129,.30), transparent 60%);
  background-size: 100% 3px, 100% 100%, 100% 100%;
  background-position: bottom, center, center;
  background-repeat: no-repeat;
}
.blog-post-header > .container { position: relative; z-index: 1; }

/* hero text — light + legible over the photo, identical in both themes */
.blog-post-header .blog-post-meta a {
  font-family: var(--font-body); font-size: .9rem; color: rgba(238,246,242,.72);
  text-decoration: none; transition: color .15s;
}
.blog-post-header .blog-post-meta a:hover { color: #fff; }
.blog-kicker {
  display: inline-block; font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 700;
  color: #0E1311; padding: .36rem .8rem; margin: .2rem 0 1rem;
  background: linear-gradient(120deg, #FFDD83, #F4C95B); border-radius: 999px;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.5);
}
.blog-post-title {
  font-family: var(--font-head); font-weight: 500; color: #F6FAF8;
  font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.06; letter-spacing: -.024em;
  margin: .2rem 0 1rem; text-wrap: balance; text-shadow: 0 2px 34px rgba(0,0,0,.55);
}
.blog-post-date {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0;
  font-family: var(--font-body); font-size: .92rem; color: rgba(238,246,242,.82);
}
.blog-post-date > * + *::before { content: "·"; margin-right: .75rem; color: rgba(238,246,242,.5); }

/* subtle ken-burns drift on the photo (off when the user prefers reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .blog-post-header::before { animation: heroKen 26s ease-in-out infinite alternate; }
}
@keyframes heroKen { from { transform: scale(1.045); } to { transform: scale(1.12); } }

/* ---- Body prose ---- */
/* padding-block only — the tool pages reuse this class on .container-narrow
   itself; a `2.5rem 0` shorthand would zero the column's side padding. */
.blog-post-content { padding-block: 2.5rem 1.5rem; }
/* Unify the reading column across hero header, body AND footer so the title,
   kicker, meta and back-link line up exactly with the article text (the global
   .container-narrow is 760px; the body reads at 728px — match all three here). */
.blog-post .container-narrow { max-width: 728px; }
.blog-post-content > .container-narrow {
  font-family: var(--font-body); font-size: 1.07rem; line-height: 1.78; color: var(--text);
}
.blog-post-content p { margin: 1.2rem 0; color: var(--text); }
.blog-post-content > .container-narrow > p:first-of-type {
  font-size: 1.24rem; line-height: 1.62; color: var(--text-strong); margin-bottom: 1.6rem;
}
.blog-post-content strong { color: var(--text-strong); font-weight: 600; }
.blog-post-content h2 {
  font-family: var(--font-head); font-weight: 500; color: var(--text-strong);
  font-size: clamp(1.5rem, 2.7vw, 1.95rem); line-height: 1.2; letter-spacing: -.012em;
  margin: 2.8rem 0 1rem; padding-top: 1.5rem; position: relative;
}
.blog-post-content h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 3px;
  border-radius: 3px; background: var(--gold-grad); box-shadow: 0 0 12px rgba(244,201,91,.4);
}
.blog-post-content h3 {
  font-family: var(--font-head); font-weight: 500; color: var(--text-strong);
  font-size: 1.2rem; line-height: 1.35; margin: 1.9rem 0 .55rem;
}
.blog-post-content a {
  color: var(--accent-text); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-text) 38%, transparent); text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.blog-post-content a:hover { text-decoration-color: var(--accent-text); }

/* lists — gold diamond markers */
.blog-post-content ul { list-style: none; padding-left: 0; margin: 1.25rem 0; }
.blog-post-content ul li {
  position: relative; padding-left: 1.7rem; margin: .6rem 0; line-height: 1.72; color: var(--text);
}
.blog-post-content ul li::before {
  content: ""; position: absolute; left: .25rem; top: .62em; width: 7px; height: 7px;
  background: var(--gold-grad); transform: rotate(45deg); border-radius: 2px;
  box-shadow: 0 0 8px rgba(244,201,91,.45);
}
.blog-post-content ol { padding-left: 1.3rem; margin: 1.25rem 0; }
.blog-post-content ol li { margin: .55rem 0; line-height: 1.72; color: var(--text); padding-left: .3rem; }
.blog-post-content ol li::marker { color: var(--esmeralda-300); font-weight: 600; }

/* tables */
.blog-post-content table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.8rem 0; font-size: .98rem;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.blog-post-content th {
  background: var(--accent-soft); color: var(--text-strong);
  font-family: var(--font-head); font-weight: 500; text-align: left;
}
.blog-post-content th, .blog-post-content td {
  padding: .7rem .95rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.blog-post-content tbody tr:last-child td { border-bottom: 0; }
.blog-post-content tbody tr:hover td { background: rgba(255,255,255,.018); }

/* ---- "Guías relacionadas" → card grid (ul tagged in the view) ---- */
.blog-post-content ul.related-guides {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem;
  margin: 1.4rem 0; padding-left: 0;
}
.blog-post-content ul.related-guides li { padding: 0; margin: 0; }
.blog-post-content ul.related-guides li::before { display: none; }
.blog-post-content ul.related-guides li a {
  display: flex; align-items: center; gap: .6rem; height: 100%;
  padding: 1rem 1.15rem; border-radius: 14px; text-decoration: none;
  font-family: var(--font-body); font-weight: 600; color: var(--text-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 55%), var(--surface);
  border: 1px solid var(--line); transition: transform .18s, border-color .18s, box-shadow .18s;
}
.blog-post-content ul.related-guides li a::before {
  content: "→"; color: var(--accent-text); font-weight: 700; transition: transform .18s;
}
.blog-post-content ul.related-guides li a:hover {
  transform: translateY(-2px); border-color: rgba(52,200,146,.3);
  box-shadow: 0 18px 42px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(52,200,146,.1);
}
.blog-post-content ul.related-guides li a:hover::before { transform: translateX(3px); }

/* ---- Conclusion + CTA paragraph (the one linking /precios) → branded panel.
   :has() targets it deterministically — no per-post HTML rewrite needed. ---- */
.blog-post-content p:has(a[href="/precios"]) {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 2.4rem 0 1rem; padding: 1.7rem 1.8rem; border-radius: 20px;
  border: 1px solid rgba(52,200,146,.2); font-size: 1.05rem; color: var(--text);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(24,184,129,.15), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 42%), var(--surface);
  box-shadow: var(--noir-edge), 0 28px 80px -30px rgba(0,0,0,.85);
}
.blog-post-content p:has(a[href="/precios"])::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: url("/images/blog-atmosphere-cta.png") right center / cover no-repeat;
  -webkit-mask-image: radial-gradient(130% 130% at 100% 0%, #000 6%, transparent 66%);
          mask-image: radial-gradient(130% 130% at 100% 0%, #000 6%, transparent 66%);
  mix-blend-mode: screen;
}
[data-theme="light"] .blog-post-content p:has(a[href="/precios"])::before { opacity: .12; mix-blend-mode: normal; }
.blog-post-content p:has(a[href="/precios"]) a[href="/precios"] {
  color: var(--gold); font-weight: 700; text-decoration-color: rgba(244,201,91,.4);
}
.blog-post-content p:has(a[href="/precios"]) a[href="/precios"]:hover { text-decoration-color: var(--gold); }

/* entertainment disclaimer (the trailing <p> whose only child is <em>) — subtle box */
.blog-post-content p:has(> em:only-child) {
  margin-top: 1.8rem; padding: .9rem 1.1rem; border-radius: 12px;
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
}
.blog-post-content p:has(> em:only-child) em { font-style: normal; font-size: .9rem; color: var(--text-muted); }

/* ---- Footer ---- */
.blog-post-footer { padding: 2.5rem 0 1rem; margin-top: 1.5rem; border-top: 1px solid var(--line); }

/* ---- Motion: gentle staged reveal ---- */
@media (prefers-reduced-motion: no-preference) {
  .blog-post-header > .container, .blog-post-content > .container {
    animation: noir-rise var(--dur-slow, .5s) var(--ease-emphasized, cubic-bezier(.2,.7,.3,1)) both;
  }
  .blog-post-content > .container { animation-delay: .1s; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .blog-post-header { min-height: clamp(260px, 46vh, 360px); padding: 3.25rem 0 1.6rem; }
  .blog-post-content { padding-block: 1.8rem 1rem; }
  .blog-post-content ul.related-guides { grid-template-columns: 1fr; }
}

/* ============================================================================
   v8 — Results (/resultados) + Statistics (/estadisticas) landing pages.
   SEO funnels rendered from the read-only lottery_* gateway commands. Shared
   ball/chart primitives (mb-ball / mb-freq / mb-hist) + page layout. Token-based
   so both themes adapt. Additive; revert: drop this block.
   ============================================================================ */
.mbpage { max-width: 1100px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 20px clamp(3rem, 6vw, 5rem); }
.mbpage__head { text-align: center; max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.mbpage__kicker {
  display: inline-block; font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .15em; font-size: 11px; font-weight: 700; color: #0E1311;
  background: linear-gradient(120deg, #FFDD83, #F4C95B); padding: .36rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.mbpage__h1 {
  font-family: var(--font-head); font-weight: 500; letter-spacing: -.024em; line-height: 1.05;
  font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0 0 .85rem; color: var(--text-strong); text-wrap: balance;
}
.mbpage__sub { color: var(--text-muted); font-size: 1.12rem; line-height: 1.6; margin: 0; }

/* Photographic hero band (per-page Pexels photo via --mbhero, emerald-graded,
   dark-scrimmed, gold seam) — dark glass in both themes, like the blog hero. */
.mbhero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(300px, 44vh, 460px); padding: clamp(3rem, 7vw, 5.5rem) 20px;
}
.mbhero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(0deg, rgba(11,96,72,.45), rgba(11,96,72,.45)), var(--mbhero, url("/images/blog-atmosphere.png"));
  background-size: cover, cover; background-position: center, center; background-blend-mode: color;
  transform: scale(1.05);
}
.mbhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, #18b881, #F4C95B 55%, rgba(244,201,91,0) 95%),
    linear-gradient(180deg, rgba(7,12,10,.5) 0%, rgba(7,12,10,.55) 50%, rgba(6,11,9,.86) 100%),
    radial-gradient(92% 70% at 50% 38%, rgba(24,184,129,.26), transparent 62%);
  background-size: 100% 3px, 100% 100%, 100% 100%; background-position: bottom, center, center; background-repeat: no-repeat;
}
.mbhero__inner { position: relative; z-index: 1; max-width: 760px; }
.mbhero .mbpage__kicker { box-shadow: 0 6px 20px -6px rgba(0,0,0,.5); }
.mbhero__h1 {
  font-family: var(--font-head); font-weight: 500; color: #F6FAF8; letter-spacing: -.024em; line-height: 1.05;
  font-size: clamp(2.1rem, 5vw, 3.3rem); margin: .55rem 0 .85rem; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.mbhero__sub { color: rgba(238,246,242,.86); font-size: 1.14rem; line-height: 1.6; margin: 0; }
.mbhero__cta { margin-top: 1.5rem; }
.mbhero__btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.7rem; border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; text-decoration: none; color: #0E1311;
  background: linear-gradient(120deg, #6ee7b7, #FFE08A); box-shadow: 0 16px 38px -14px rgba(110,231,183,.55);
  transition: filter .15s, transform .15s;
}
.mbhero__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.mbhero + .mbpage { padding-top: clamp(1.8rem, 4vw, 3rem); }
@media (prefers-reduced-motion: no-preference) {
  .mbhero::before { animation: heroKen 26s ease-in-out infinite alternate; }
}

/* KPI strip */
.mb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; margin: 0 0 2.4rem; }
.mb-kpi {
  border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%), var(--surface);
}
.mb-kpi__v { font-family: var(--font-head); font-weight: 600; font-size: 1.55rem; color: var(--text-strong); line-height: 1.1; }
.mb-kpi__v .u { font-size: .9rem; color: var(--accent-text); font-weight: 500; }
.mb-kpi__l { color: var(--text-muted); font-size: .82rem; margin-top: .25rem; }

/* Per-game card */
.mbgame {
  border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.2rem, 2.5vw, 1.9rem); margin-bottom: 1.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent 55%), var(--surface);
  box-shadow: var(--noir-edge), 0 30px 70px -40px rgba(0,0,0,.7);
}
.mbgame__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.mbgame__title { font-family: var(--font-head); font-weight: 500; font-size: 1.5rem; color: var(--text-strong); margin: 0; display: flex; align-items: center; gap: .6rem; }
.mbgame__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(244,201,91,.6); }
.mbgame__meta { color: var(--text-muted); font-size: .86rem; }
.mbgame__more { color: var(--esmeralda-300); font-weight: 600; text-decoration: none; font-size: .9rem; white-space: nowrap; }
.mbgame__more:hover { text-decoration: underline; }

/* Lottery balls */
.mb-balls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* impl5: ONE ball system — true circles (width == height, no min-width+padding)
   with the .gen-ball gloss (radial highlight + inset bottom shade). */
.mb-ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; min-width: 0; padding: 0; flex: none;
  border-radius: 50%; font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  color: var(--text-strong);
  background: radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.24), transparent 55%), var(--accent-soft);
  border: 1px solid rgba(52,200,146,.28);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10), 0 4px 10px -4px rgba(0,0,0,.38);
}
.mb-ball--hot { color: #1a1407; border-color: rgba(244,201,91,.5);
  background: radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.5), transparent 55%), linear-gradient(140deg, #FFE08A, #F4C95B); }
.mb-ball--cold { color: var(--text-muted); background: rgba(255,255,255,.03); border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.mb-ball--extra { color: var(--gold); background: rgba(244,201,91,.1); border-color: rgba(244,201,91,.45); border-style: dashed; box-shadow: none; }
.mb-ball.sm { width: 1.95rem; height: 1.95rem; font-size: .86rem; }
/* home hero/AI cards (.mb-draw context) keep their designed 40px size */
.mb-draw .mb-ball { width: 40px; height: 40px; font-size: 1.02rem; }
.mb-plus { color: var(--text-subtle); font-size: 1.1rem; padding: 0 .15rem; }

/* Latest draw highlight */
.mb-latest { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; padding: 1rem 0 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.mb-latest__when { font-size: .82rem; color: var(--text-muted); }
.mb-latest__when b { color: var(--text-strong); font-weight: 600; }
.mb-latest__bolsa { margin-left: auto; text-align: right; }
.mb-latest__bolsa .v { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--esmeralda-300); }
.mb-latest__bolsa .l { display: block; font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* Recent-draws table */
.mb-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mb-table th { text-align: left; font-family: var(--font-head); font-weight: 500; color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding: .5rem .6rem; }
.mb-table td { padding: .55rem .6rem; border-top: 1px solid var(--line); vertical-align: middle; }
.mb-table tbody tr:hover td { background: rgba(255,255,255,.018); }
.mb-table .num { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.mb-table .bolsa { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }

/* Stats: frequency chart + tiles */
.mb-freq { width: 100%; height: clamp(120px, 18vw, 160px); display: block; color: var(--text); margin: .4rem 0 1rem; }
.mb-hist { width: 100%; max-width: 320px; height: auto; color: var(--text); }
.mb-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
.mb-tile { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; background: rgba(255,255,255,.015); }
.mb-tile__h { font-family: var(--font-head); font-weight: 500; font-size: .96rem; color: var(--text-strong); margin: 0 0 .7rem; display: flex; align-items: center; gap: .45rem; }
.mb-tile__h .tag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .15rem .45rem; border-radius: 999px; }
.mb-tile__h .tag--hot { color: #1a1407; background: linear-gradient(120deg, #FFE08A, #F4C95B); }
.mb-tile__h .tag--cold { color: var(--text-muted); background: rgba(255,255,255,.06); }
.mb-tile__row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.mb-tile__row .ago { font-size: .7rem; color: var(--text-subtle); margin-left: .1rem; }
.mb-bignum { font-family: var(--font-head); font-weight: 600; font-size: 2rem; color: var(--text-strong); line-height: 1; }
.mb-bignum .u { font-size: .85rem; color: var(--text-muted); font-weight: 500; }

/* CTA panel + disclaimer (shared with the page bottom) */
.mb-cta {
  position: relative; overflow: hidden; margin-top: 2.4rem; padding: 1.8rem 1.9rem; border-radius: 20px;
  border: 1px solid rgba(52,200,146,.22); text-align: center;
  background: radial-gradient(120% 150% at 0% 0%, rgba(24,184,129,.16), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%), var(--surface);
  box-shadow: var(--noir-edge), 0 28px 80px -32px rgba(0,0,0,.8);
}
.mb-cta__h { font-family: var(--font-head); font-weight: 500; font-size: 1.4rem; color: var(--text-strong); margin: 0 0 .5rem; }
.mb-cta__p { color: var(--text-muted); margin: 0 auto 1.1rem; max-width: 560px; line-height: 1.55; }
.mb-cta__btn {
  display: inline-block; padding: .8rem 1.6rem; border-radius: 999px; text-decoration: none; font-weight: 700;
  color: #0E1311; background: linear-gradient(120deg, #6ee7b7, #FFE08A); box-shadow: 0 14px 34px -14px rgba(110,231,183,.5);
}
.mb-cta__btn:hover { filter: brightness(1.05); }
.mb-note { margin-top: 1.6rem; text-align: center; color: var(--text-subtle); font-size: .9rem; font-style: italic; }

@media (max-width: 640px) {
  .mbgame__head { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .mb-latest__bolsa { margin-left: 0; text-align: left; }
  .mb-table .hide-sm { display: none; }
}

/* ============================================================================
   v9 — Results/Stats BEAUTIFY. Per-game TABS (CSS-only) replace the four stacked
   cards: one game shown large + focused. /resultados = featured latest draw +
   historic grid; /estadisticas = bold frequency chart + hot/cold + patterns.
   Emerald+gold only (subtle 2-tone per game). Additive; revert: drop this block.
   ============================================================================ */
/* subtle on-brand per-game accent (emerald or gold, alternating) */
.mbpanel[data-game="melate"],     .mb-feat[data-game="melate"]     { --g: #34c892; --g2: #6ee7b7; }
.mbpanel[data-game="revancha"],   .mb-feat[data-game="revancha"]   { --g: #F4C95B; --g2: #FFE08A; }
.mbpanel[data-game="revanchita"], .mb-feat[data-game="revanchita"] { --g: #34c892; --g2: #6ee7b7; }
.mbpanel[data-game="retro"],      .mb-feat[data-game="retro"]      { --g: #F4C95B; --g2: #FFE08A; }

/* ---- Tabs (radio + general-sibling + nth-of-type; no JS) ---- */
.mbtabs { position: relative; }
.mbtabs__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mbtabs__nav { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.7rem; }
.mbtabs__nav label {
  cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.35rem; border-radius: 999px; font-family: var(--font-head); font-weight: 500;
  font-size: 1rem; color: var(--text-muted); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%), var(--surface);
  transition: color .18s, border-color .18s, box-shadow .18s, background .18s;
}
.mbtabs__nav label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle); transition: background .18s; }
.mbtabs__nav label:hover { color: var(--text-strong); border-color: rgba(52,200,146,.35); }
.mbtabs__body > .mbpanel { display: none; }
#rg-1:checked ~ .mbtabs__body > .mbpanel:nth-of-type(1),
#rg-2:checked ~ .mbtabs__body > .mbpanel:nth-of-type(2),
#rg-3:checked ~ .mbtabs__body > .mbpanel:nth-of-type(3),
#rg-4:checked ~ .mbtabs__body > .mbpanel:nth-of-type(4) {
  display: block; animation: noir-rise .45s var(--ease-emphasized, cubic-bezier(.2,.7,.3,1)) both;
}
#rg-1:checked ~ .mbtabs__nav label:nth-of-type(1),
#rg-2:checked ~ .mbtabs__nav label:nth-of-type(2),
#rg-3:checked ~ .mbtabs__nav label:nth-of-type(3),
#rg-4:checked ~ .mbtabs__nav label:nth-of-type(4) {
  color: #0E1311; background: linear-gradient(120deg, #6ee7b7, #FFE08A); border-color: transparent;
  box-shadow: 0 12px 28px -12px rgba(110,231,183,.55);
}
#rg-1:checked ~ .mbtabs__nav label:nth-of-type(1)::before,
#rg-2:checked ~ .mbtabs__nav label:nth-of-type(2)::before,
#rg-3:checked ~ .mbtabs__nav label:nth-of-type(3)::before,
#rg-4:checked ~ .mbtabs__nav label:nth-of-type(4)::before { background: #0E1311; }
.mbtabs__radio:focus-visible ~ .mbtabs__nav label { outline: none; }

/* ---- Featured latest draw (/resultados) ---- */
.mb-feat {
  position: relative; overflow: hidden; border-radius: 22px; padding: clamp(1.4rem, 3vw, 2.2rem);
  margin-bottom: 1.6rem; border: 1px solid color-mix(in srgb, var(--g) 32%, var(--line));
  background:
    radial-gradient(120% 130% at 88% -10%, color-mix(in srgb, var(--g) 20%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%), var(--surface);
  box-shadow: var(--noir-edge), 0 36px 90px -44px rgba(0,0,0,.85);
}
.mb-feat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--g), var(--g2) 60%, transparent 96%); }
.mb-feat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.mb-feat__label { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--g); }
.mb-feat__date { color: var(--text-muted); font-size: .9rem; }
.mb-feat__balls { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.mb-feat__balls .mb-ball {
  width: 3rem; height: 3rem; font-size: 1.32rem;
  background: radial-gradient(130% 130% at 30% 22%, rgba(255,255,255,.16), transparent 55%), color-mix(in srgb, var(--g) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--g) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px -12px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion: no-preference) {
  .mbpanel:nth-of-type(n) .mb-feat__balls .mb-ball { animation: noir-rise .5s var(--ease-emphasized, cubic-bezier(.2,.7,.3,1)) both; }
  .mb-feat__balls .mb-ball:nth-child(1){animation-delay:.02s}.mb-feat__balls .mb-ball:nth-child(2){animation-delay:.06s}
  .mb-feat__balls .mb-ball:nth-child(3){animation-delay:.10s}.mb-feat__balls .mb-ball:nth-child(4){animation-delay:.14s}
  .mb-feat__balls .mb-ball:nth-child(5){animation-delay:.18s}.mb-feat__balls .mb-ball:nth-child(6){animation-delay:.22s}
}
.mb-feat__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.mb-feat__bolsa b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.7rem; color: var(--text-strong); line-height: 1; }
.mb-feat__bolsa span { font-size: .76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.mb-feat__more { color: var(--g); font-weight: 600; text-decoration: none; white-space: nowrap; }
.mb-feat__more:hover { text-decoration: underline; }

/* ---- Historic grid (/resultados) ---- */
.mb-histh { font-family: var(--font-head); font-weight: 500; font-size: 1.12rem; color: var(--text-strong); margin: 0 0 1rem; display: flex; align-items: center; gap: .55rem; }
.mb-histh::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--gold-grad, linear-gradient(90deg, #34c892, #F4C95B)); }
.mb-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: .6rem; }
.mb-drow {
  display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(255,255,255,.014); transition: border-color .15s, background .15s;
}
.mb-drow:hover { border-color: rgba(52,200,146,.28); background: rgba(255,255,255,.03); }
.mb-drow__d { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--text-muted); min-width: 92px; line-height: 1.25; }
.mb-drow__d b { display: block; color: var(--text-strong); font-weight: 600; font-size: .82rem; }
.mb-drow__b { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.mb-drow__j { margin-left: auto; font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--esmeralda-300); white-space: nowrap; }

/* ---- Stats panel (/estadisticas) ---- */
.mb-stathead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.mb-stathead__m { color: var(--text-muted); font-size: .88rem; }
.mb-stathead a { color: var(--accent-text); font-weight: 600; text-decoration: none; font-size: .9rem; }
.mb-stathead a:hover { text-decoration: underline; }
.mb-freqcard {
  border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.2rem .7rem; margin: 1rem 0 1.3rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%), var(--surface);
}
.mb-freqcard .mb-freq { height: clamp(150px, 22vw, 210px); }
.mb-freqlegend { display: flex; gap: 1.2rem; justify-content: flex-end; font-size: .76rem; color: var(--text-muted); padding-top: .3rem; }
.mb-freqlegend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.mb-freqlegend .e { background: linear-gradient(180deg, #34c892, #0f6a4c); }
.mb-freqlegend .g { background: linear-gradient(180deg, #FFE08A, #F4C95B); }
.mb-hotcold { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.3rem; }
.mb-hc { border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; background: rgba(255,255,255,.014); }
.mb-hc__h { font-family: var(--font-head); font-weight: 500; font-size: 1rem; color: var(--text-strong); margin: 0 0 .85rem; display: flex; align-items: center; gap: .5rem; }
.mb-hc__h .tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .16rem .5rem; border-radius: 999px; }
.mb-hc__h .tag--hot { color: #1a1407; background: linear-gradient(120deg, #FFE08A, #F4C95B); }
.mb-hc__h .tag--cold { color: var(--text-muted); background: rgba(255,255,255,.06); }
.mb-hc__row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.mb-hc__item { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; }
.mb-hc__item small { font-size: .66rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.mb-patterns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.mb-pat { border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; background: rgba(255,255,255,.014); text-align: center; }
.mb-pat__h { font-family: var(--font-head); font-weight: 500; font-size: .92rem; color: var(--text-strong); margin: 0 0 .7rem; }
.mb-pat .mb-bignum { font-size: 2.3rem; }
.mb-pat__hint { font-size: .76rem; color: var(--text-subtle); margin-top: .4rem; line-height: 1.4; }

@media (max-width: 720px) {
  .mb-hotcold { grid-template-columns: 1fr; }
  .mb-history { grid-template-columns: 1fr; }
  .mb-feat__balls .mb-ball { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
}

/* ============================================================================
   v10 — Site search (/buscar). Esmeralda Noir search field + button.
   Reuses .blog-header / .blog-grid / .blog-card from the blog index.
   ============================================================================ */
.search-header .search-form {
  display: flex;
  gap: .6rem;
  max-width: 640px;
  margin: 1.4rem auto 0;
}
.search-header .search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .85rem 1.1rem;
  font-size: 1.02rem;
  font-family: inherit;
  color: var(--mb-ink, #EAF1ED);
  background: color-mix(in oklab, var(--mb-surface, #16201B) 92%, #000 8%);
  border: 1px solid color-mix(in oklab, var(--mb-emerald, #18B881) 28%, transparent);
  border-radius: 12px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.search-header .search-input::placeholder { color: color-mix(in oklab, var(--mb-ink, #EAF1ED) 45%, transparent); }
.search-header .search-input:focus {
  border-color: var(--mb-emerald, #18B881);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mb-emerald, #18B881) 22%, transparent);
  background: color-mix(in oklab, var(--mb-surface, #16201B) 86%, #000 14%);
}
.search-header .search-btn {
  flex: 0 0 auto;
  padding: .85rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: #0E1311;
  background: linear-gradient(120deg, #6ee7b7, #F4C95B);
  border: 0;
  border-radius: 12px;
  transition: transform .12s ease, filter .18s ease;
}
.search-header .search-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.search-header .search-btn:active { transform: translateY(0); }

@media (max-width: 560px) {
  .search-header .search-form { flex-direction: column; }
  .search-header .search-btn { width: 100%; }
}

/* ============================================================================
   v11 — Free number generator (/generador). Esmeralda lottery balls + tool card.
   ============================================================================ */
.gen-section { padding: 1.5rem 0 0.5rem; }
.gen-tool {
  background:
    radial-gradient(120% 90% at 12% -10%, color-mix(in oklab, var(--mb-emerald,#18B881) 16%, transparent), transparent 46%),
    radial-gradient(90% 80% at 100% 110%, color-mix(in oklab, var(--mb-gold,#F4C95B) 12%, transparent), transparent 52%),
    color-mix(in oklab, var(--mb-surface,#16201B) 90%, #000 10%);
  border: 1px solid color-mix(in oklab, var(--mb-emerald,#18B881) 24%, transparent);
  border-radius: 20px;
  padding: 1.8rem 1.6rem 2rem;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.55);
}
.gen-pick-label {
  font-family: 'Space Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 3px; font-size: .72rem;
  color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 56%, transparent);
  text-align: center; margin: 0 0 .85rem;
}
.gen-games { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.6rem; }
.gen-pill {
  font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  padding: .5rem 1.05rem; border-radius: 999px;
  color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 82%, transparent);
  background: color-mix(in oklab, var(--mb-surface,#16201B) 70%, #000 30%);
  border: 1px solid color-mix(in oklab, var(--mb-emerald,#18B881) 22%, transparent);
  transition: all .16s ease;
}
.gen-pill:hover { border-color: color-mix(in oklab, var(--mb-emerald,#18B881) 50%, transparent); }
.gen-pill.is-active {
  color: #0E1311; border-color: transparent;
  background: linear-gradient(120deg, #6ee7b7, #FFE08A);
}
.gen-display {
  display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; justify-content: center;
  min-height: 88px; margin-bottom: 1.5rem;
}
.gen-ball {
  --bd: #6ee7b7;
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.5rem;
  color: #08110D;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.85), transparent 55%),
    linear-gradient(160deg, #8df0c4, #18B881);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.18), 0 6px 14px -6px rgba(24,184,129,.6);
}
.gen-ball--adic {
  color: #1a1407;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.9), transparent 55%),
    linear-gradient(160deg, #FFE08A, #E0A93B);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.2), 0 6px 14px -6px rgba(224,169,59,.6);
}
.gen-sep { font-size: 1.6rem; font-weight: 300; color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 40%, transparent); padding: 0 .1rem; }
.gen-display.is-pop .gen-ball { animation: genpop .34s cubic-bezier(.2,1.3,.5,1) both; }
.gen-display.is-pop .gen-ball:nth-child(2) { animation-delay: .04s; }
.gen-display.is-pop .gen-ball:nth-child(3) { animation-delay: .08s; }
.gen-display.is-pop .gen-ball:nth-child(4) { animation-delay: .12s; }
.gen-display.is-pop .gen-ball:nth-child(5) { animation-delay: .16s; }
.gen-display.is-pop .gen-ball:nth-child(6) { animation-delay: .20s; }
@keyframes genpop { 0% { transform: scale(.3) translateY(8px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gen-display.is-pop .gen-ball { animation: none; } }
.gen-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.gen-go {
  font-family: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer;
  padding: .85rem 2rem; border: 0; border-radius: 12px; color: #0E1311;
  background: linear-gradient(120deg, #6ee7b7, #F4C95B);
  transition: transform .12s ease, filter .18s ease;
}
.gen-go:hover { filter: brightness(1.05); transform: translateY(-1px); }
.gen-copy {
  font-family: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer;
  padding: .85rem 1.5rem; border-radius: 12px;
  color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 88%, transparent);
  background: transparent; border: 1px solid color-mix(in oklab, var(--mb-emerald,#18B881) 40%, transparent);
  transition: all .16s ease;
}
.gen-copy:hover { border-color: var(--mb-emerald,#18B881); }
.gen-note { text-align: center; font-size: .92rem; color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 60%, transparent); margin: 1.1rem auto 0; max-width: 56ch; }
.gen-article { padding-top: 2.2rem; }
.gen-cta-btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: .8rem 1.7rem; border-radius: 12px; color: #0E1311 !important;
  background: linear-gradient(120deg, #6ee7b7, #F4C95B);
}
@media (max-width: 480px) { .gen-ball { width: 52px; height: 52px; font-size: 1.3rem; } }

/* ============================================================================
   v12 — Ticket checker (/verificar). Number grid + match result. Reuses
   .gen-tool / .gen-ball / .gen-display / .gen-actions from v11.
   ============================================================================ */
.vf-count { font-family: 'Space Mono', ui-monospace, monospace; color: color-mix(in oklab, var(--mb-gold,#F4C95B) 85%, #fff); }
.vf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: .4rem; margin: 0 0 1.4rem;
}
.vf-num {
  font-family: inherit; font-weight: 600; font-size: .98rem; cursor: pointer;
  aspect-ratio: 1 / 1; border-radius: 10px;
  color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 80%, transparent);
  background: color-mix(in oklab, var(--mb-surface,#16201B) 72%, #000 28%);
  border: 1px solid color-mix(in oklab, var(--mb-emerald,#18B881) 18%, transparent);
  transition: transform .1s ease, background .14s ease, color .14s ease, border-color .14s ease;
}
.vf-num:hover { border-color: color-mix(in oklab, var(--mb-emerald,#18B881) 55%, transparent); }
.vf-num.is-on {
  color: #08110D; border-color: transparent; transform: translateY(-1px);
  background: radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.7), transparent 55%), linear-gradient(160deg, #8df0c4, #18B881);
  box-shadow: 0 5px 12px -6px rgba(24,184,129,.6);
}
.vf-drawrow { display: flex; align-items: center; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.3rem; }
.vf-drawlabel { font-size: .9rem; color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 70%, transparent); }
.vf-draw {
  font-family: inherit; font-size: .95rem; padding: .55rem .8rem; border-radius: 10px;
  color: var(--mb-ink,#EAF1ED);
  background: color-mix(in oklab, var(--mb-surface,#16201B) 84%, #000 16%);
  border: 1px solid color-mix(in oklab, var(--mb-emerald,#18B881) 26%, transparent);
}
.vf-result { margin-top: 1.5rem; text-align: center; }
.vf-result:empty { display: none; }
.vf-res-head { font-size: .85rem; text-transform: uppercase; letter-spacing: 1.5px; color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 55%, transparent); margin: 0 0 .8rem; }
.vf-result .gen-display { min-height: 0; margin-bottom: 1rem; }
.gen-ball.is-miss { filter: grayscale(.7) brightness(.62); opacity: .65; }
.gen-ball.is-hit  { box-shadow: 0 0 0 3px color-mix(in oklab, var(--mb-gold,#F4C95B) 75%, transparent), inset 0 -3px 6px rgba(0,0,0,.18); }
.vf-score   { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.5rem; margin: .2rem 0; color: var(--mb-ink,#EAF1ED); }
.vf-verdict { font-size: 1.05rem; font-weight: 600; color: color-mix(in oklab, var(--mb-emerald,#18B881) 70%, var(--mb-ink,#EAF1ED)); margin: .1rem 0 .6rem; }
.vf-note    { font-size: .85rem; color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 55%, transparent); max-width: 52ch; margin: 0 auto; }
.vf-warn    { font-size: 1rem; color: color-mix(in oklab, var(--mb-gold,#F4C95B) 80%, #fff); }

/* ============================================================================
   v13 — Próximo sorteo (/proximo-sorteo). Countdown cards.
   ============================================================================ */
.pr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1rem; }
.pr-card {
  background:
    radial-gradient(120% 90% at 12% -10%, color-mix(in oklab, var(--mb-emerald,#18B881) 15%, transparent), transparent 48%),
    color-mix(in oklab, var(--mb-surface,#16201B) 90%, #000 10%);
  border: 1px solid color-mix(in oklab, var(--mb-emerald,#18B881) 24%, transparent);
  border-radius: 18px; padding: 1.5rem 1.4rem; text-align: center;
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.5);
}
.pr-game {
  display: inline-block; font-family: 'Space Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 2px; font-size: .72rem; font-weight: 700;
  color: #08110D; padding: .3rem .8rem; border-radius: 999px;
  background: linear-gradient(120deg, #6ee7b7, #FFE08A); margin-bottom: .7rem;
}
.pr-when { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--mb-ink,#EAF1ED); margin: 0 0 1.1rem; }
.pr-cd { display: flex; justify-content: center; gap: .7rem; }
.pr-cd[hidden] { display: none; }
.pr-cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.pr-cd-num {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 2.3rem; line-height: 1;
  color: var(--mb-ink,#EAF1ED);
  background: color-mix(in oklab, var(--mb-surface,#16201B) 64%, #000 36%);
  border: 1px solid color-mix(in oklab, var(--mb-emerald,#18B881) 22%, transparent);
  border-radius: 12px; padding: .5rem .35rem; min-width: 56px;
}
.pr-cd-lab { font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 52%, transparent); margin-top: .4rem; }
.pr-live { font-weight: 700; font-size: 1.15rem; color: var(--mb-gold,#F4C95B); margin: .6rem 0; }
.pr-live[hidden] { display: none; }
.pr-bolsa { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .15rem; }
.pr-bolsa-lab { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 48%, transparent); }
.pr-bolsa-row { font-size: .95rem; color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 82%, transparent); }
.pr-bolsa-row strong { color: var(--mb-gold,#F4C95B); }
.pr-bolsa-meta { font-size: .74rem; color: color-mix(in oklab, var(--mb-ink,#EAF1ED) 42%, transparent); margin-top: .2rem; }
@media (max-width: 620px) {
  .pr-cards { grid-template-columns: 1fr; }
  .pr-cd-num { font-size: 1.9rem; min-width: 48px; }
  .pr-cd-unit { min-width: 48px; }
}

/* ============================================================================
   impl5 — Fable 5 WEB STAGE 1 repair pass (2026-07-01). Additive; revert:
   drop this block + the ?v bump on the stylesheet links.
   1) gold kicker pill on the tool pages  2) nav active state + hover underline
   3) inline-SVG theme toggle  4) photo-band emerald grade + full scrims
   5) blog-thumb grade  6) /resultados history restack  7) freq-chart scroll
   8) 44px touch targets.
   ============================================================================ */

/* ---- Tool-page hero repairs (/generador /verificar /proximo-sorteo) ---- */
.gen-hero { text-align: center; }
.gen-kicker {
  display: inline-block; font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .15em; font-size: 11px; font-weight: 700; color: #0E1311;
  background: linear-gradient(120deg, #FFDD83, #F4C95B); padding: .36rem .8rem;
  border-radius: 999px; margin-bottom: .9rem; box-shadow: 0 6px 20px -6px rgba(0,0,0,.5);
}
.blog-heading { line-height: 1.08; }

/* ---- Header nav: active page + a hover that is more than a color swap ---- */
@media (min-width: 1101px) {
  .main-nav a { position: relative; padding: .4rem 0; }
  .main-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    border-radius: 2px; background: var(--accent);
    opacity: 0; transform: scaleX(.4); transform-origin: left center;
    transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  }
  .main-nav a:hover { color: var(--text-strong); }
  .main-nav a:hover::after { opacity: .55; transform: scaleX(1); }
  .main-nav a[aria-current="page"] { color: var(--text-strong); }
  .main-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
}
@media (max-width: 1100px) {
  .nav-toggle:checked ~ .main-nav a[aria-current="page"] {
    color: var(--accent-text); box-shadow: inset 3px 0 0 var(--accent); padding-left: .6rem;
  }
}

/* ---- Theme toggle: inline SVG sun/moon (the '(' text glyph is retired) ---- */
.theme-toggle-icon { display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle-icon svg { width: 16px; height: 16px; display: none; }
:root:not([data-theme="light"]) .theme-toggle-icon .tt-sun { display: block; }
[data-theme="light"] .theme-toggle-icon .tt-moon { display: block; }

/* ---- Photo bands: emerald grade + FULL scrim in BOTH themes (bands are
   intentional dark moments). Fixes the ::before duotone/scrim collision by
   moving the coins grade onto the <img> itself. ---- */
.band .mb-media--duo > img {
  filter: sepia(1) hue-rotate(110deg) saturate(1.4) brightness(.9) contrast(1.05);
}
.band .mb-media--duo::after { content: none; }   /* screen veil washed the grade out */
.band .mb-media--duo::before { mix-blend-mode: normal; opacity: 1; }  /* ::before is the SCRIM here — undo duo's multiply/.62 so it lands full-strength */
.band .mb-media--tint::after {                    /* joy band: emerald color-grade layer */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(11,96,72,.45); mix-blend-mode: color;
}
.band .mb-media--scrim-l::before {
  background: linear-gradient(90deg, rgba(7,11,9,.94) 0%, rgba(7,11,9,.72) 46%, rgba(7,11,9,.34) 100%) !important;
}
.band .mb-media--scrim-b::before {
  background: linear-gradient(0deg, rgba(7,11,9,.94) 6%, rgba(7,11,9,.62) 44%, rgba(7,11,9,.28) 100%) !important;
}

/* ---- Blog index thumbs: emerald grade so mixed Pexels art reads as one set ---- */
.blog-card-thumb { position: relative; }
.blog-card-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(11,96,72,.45); mix-blend-mode: color;
}

/* ---- /resultados history: compact one-row draws (desktop) + designed
   mobile restack (meta+prize header line, full-width ball row) ---- */
.mb-drow .mb-ball { width: 26px; height: 26px; font-size: .72rem; }
@media (max-width: 640px) {
  .mb-drow { flex-wrap: wrap; row-gap: .55rem; padding: .8rem .9rem; }
  .mb-drow__d { display: flex; align-items: baseline; gap: .45rem; min-width: 0; flex: 1 1 auto; }
  .mb-drow__d b { display: inline; }
  .mb-drow__j { font-size: .95rem; font-weight: 600; color: var(--gold); }
  .mb-drow__b { flex: 1 1 100%; order: 3; gap: .3rem; }
  .mb-drow .mb-ball { width: 36px; height: 36px; font-size: .92rem; }
}

/* ---- /estadisticas frequency chart: labelled axis + mobile scroll ---- */
.mb-freq { height: auto; aspect-ratio: 1060 / 168; }
.mb-freqcard .mb-freq { height: auto; }
.mb-freqscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.mb-freqscroll .mb-freq { min-width: 640px; }
@media (max-width: 640px) {
  .mb-freqcard { position: relative; overflow: hidden; }
  .mb-freqcard::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px; pointer-events: none;
    background: linear-gradient(90deg, rgba(23,31,27,0), var(--surface));
  }
}

/* ---- Touch targets → ≥44px boxes (negative margins preserve the layout) ---- */
.footer-nav a, .footer-legal a { display: inline-block; padding: .55rem .45rem; margin: -.3rem -.2rem; }
.mb-pill-toggle button { min-height: 44px; padding: 10px 18px; }
.blog-card-link { display: inline-block; padding-block: .6rem; margin-block: -.35rem; }
.blog-post-header .blog-post-meta a { display: inline-block; padding-block: .6rem; margin-block: -.45rem; }

/* ============================================================================
   impl5 STAGE 2 — Fable 5 WEB elevation pass (2026-07-02). Additive; revert:
   drop this block + the view edits. Extends the Tier-A mbhero family to every
   route, pricing persuasion, home hero final 10%, FAQ accordions, 4-col footer,
   blog-post ball row.
   ============================================================================ */

/* ---- mbhero variant for secondary pages (tools/pricing/faq/blog index) ---- */
.mbhero--short { min-height: clamp(250px, 36vh, 380px); padding: clamp(2.6rem, 6vw, 4.5rem) 20px; }
.mbhero .search-form { margin: 1.4rem auto 0; max-width: 640px; display: flex; gap: .6rem; }
.mbhero + .gen-section { padding-top: clamp(1.8rem, 4vw, 2.8rem); }

/* ---- Pricing persuasion ---- */
/* AHORRA pill rides the Anual segment instead of floating beside the toggle */
.mb-pill-toggle button { position: relative; }
.mb-save-pill {
  position: absolute; top: -12px; right: -10px; white-space: nowrap;
  font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #1a1407; background: linear-gradient(120deg, #FFE08A, #F4C95B);
  padding: .18rem .5rem; border-radius: 999px; pointer-events: none;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
/* trial offer: fine print promoted to a gold banner chip between toggle & grid */
.pricing-trial {
  display: flex; align-items: center; gap: .6rem; width: fit-content;
  margin: 0 0 26px; padding: .62rem 1.1rem; border-radius: 12px;
  color: var(--gold-bright, #FFE08A); font-weight: 600; font-size: .95rem;
  border: 1px solid rgba(244,201,91,.34);
  background: linear-gradient(120deg, rgba(244,201,91,.12), rgba(244,201,91,.04));
}
.pricing-trial svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
[data-theme="light"] .pricing-trial { color: #7a5b10; background: linear-gradient(120deg, rgba(244,201,91,.2), rgba(244,201,91,.08)); }
/* Pro breaks the ghost-button monotony with a gold-outline CTA */
.mb-btn--goldline {
  color: var(--gold); border: 1px solid rgba(244,201,91,.55); background: transparent;
}
.mb-btn--goldline:hover { background: rgba(244,201,91,.12); border-color: var(--gold); color: var(--gold-bright); }
[data-theme="light"] .mb-btn--goldline { color: #8a6410; border-color: rgba(176,128,24,.55); }
[data-theme="light"] .mb-btn--goldline:hover { background: rgba(244,201,91,.18); color: #6d4f0d; }
/* the FREE card renders no price-note (its tagline already says it) */
.price-note:empty { display: none; }
/* "Todos los planes incluyen" checklist strip */
.pricing-includes {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.6rem;
  margin-top: 26px; padding: 1.05rem 1.3rem; border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%), var(--surface);
}
.pricing-includes__t {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent-text);
}
.pricing-includes__list { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.pricing-includes__list li { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-muted); font-size: .92rem; }
.pricing-includes__list svg { width: 15px; height: 15px; flex: none; color: var(--accent-text); }

/* ---- Home hero final 10% ---- */
/* aurora turned up: felt, not seen — but actually felt now */
.mb-aurora::before, .mb-aurora::after { filter: blur(100px); }
.mb-aurora::before { opacity: .7; }
.mb-aurora::after { opacity: .3; }
/* gold record stat in the trust row */
.hero__trust-gold { display: flex; flex-direction: column; gap: 2px; }
.hero__trust-gold b {
  font-family: var(--font-head); font-size: 22px; font-variant-numeric: tabular-nums;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
.hero__trust-gold span { font-size: 12.5px; color: var(--text-subtle); }
/* steps: display numerals + hover lift */
.step__n {
  font-family: var(--font-head); font-size: 40px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.step { transition: transform var(--dur-base, .2s) var(--ease-standard, ease), border-color var(--dur-base, .2s), box-shadow var(--dur-base, .2s); }
.steps .step:hover { transform: translateY(-4px); border-color: rgba(52,200,146,.32); box-shadow: 0 22px 50px -24px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .steps .step:hover { transform: none; } }
/* the AI aside card repeats the section paragraph verbatim when columns stack */
@media (max-width: 860px) { .feat .mb-ai__blurb { display: none; } }
/* home blog preview + /blog index: featured newest post spans 2 columns with
   display type (QA fix pass 2026-07-02 extends the shipped home treatment) */
@media (min-width: 768px) {
  .blog-preview-grid .blog-card--featured,
  .blog-grid .blog-card--featured { grid-column: span 2; }
  .blog-preview-grid .blog-card--featured .blog-card-title,
  .blog-grid .blog-card--featured .blog-card-title { font-size: 1.45rem; line-height: 1.2; }
}

/* ---- FAQ (.faqx): grouped gold-marker accordions ---- */
.faqx { max-width: 860px; }
.faqx__group {
  font-family: var(--font-head); font-weight: 500; font-size: 1.18rem; color: var(--text-strong);
  margin: 2.1rem 0 .95rem; display: flex; align-items: center; gap: .55rem;
}
.faqx__group:first-of-type { margin-top: 0; }
.faqx__group::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #34c892, #F4C95B); }
.faqx__list { display: flex; flex-direction: column; gap: .75rem; }
.faqx__item {
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%), var(--surface);
  transition: border-color .18s;
}
.faqx__item:hover { border-color: rgba(52,200,146,.3); }
.faqx__item[open] { border-color: rgba(52,200,146,.34); }
.faqx__item summary {
  cursor: pointer; padding: 1.05rem 1.3rem; font-family: var(--font-head); font-weight: 500;
  font-size: 1.08rem; color: var(--text-strong); list-style-position: inside;
}
.faqx__item summary::marker { color: var(--gold); }
.faqx__item summary::-webkit-details-marker { color: var(--gold); }
.faqx__item p { margin: 0; padding: 0 1.3rem 1.2rem 2.35rem; color: var(--text-muted); line-height: 1.62; }
@media (prefers-reduced-motion: no-preference) {
  .faqx__item[open] p { animation: noir-rise .3s var(--ease-emphasized, cubic-bezier(.2,.7,.3,1)) both; }
}

/* ---- Footer: 4 columns under a gold seam ---- */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #18b881, #F4C95B 55%, rgba(244,201,91,0) 96%);
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem;
  padding: 1.2rem 0 1.8rem; margin-bottom: 1.2rem; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.site-footer .container { text-align: left; }
.site-footer .footer-disclaimer, .site-footer .footer-copyright { text-align: center; }
.footer-col--brand .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.footer-col--brand .brand-name { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--text-on-dark, #fff); }
.footer-col--brand .footer-tagline { margin-top: .7rem; font-weight: 400; color: #9ca3af; max-width: 26ch; }
.footer-col__h {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--esmeralda-300); margin: 0 0 .55rem;
}
.footer-col a {
  display: block; width: fit-content; color: var(--text-on-dark, #d1d5db); font-size: .9rem;
  text-decoration: none; padding-block: .55rem; transition: color .15s;
}
.footer-col a:hover { color: var(--esmeralda-300); }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Blog post: winning-numbers ball row + gold money numerals ---- */
.post-draw {
  margin: 1.4rem 0 1.8rem; padding: 1.25rem 1.35rem; border-radius: 18px;
  border: 1px solid rgba(52,200,146,.24);
  background: radial-gradient(120% 140% at 0% 0%, rgba(24,184,129,.12), transparent 55%), var(--surface);
  box-shadow: var(--noir-edge), 0 22px 60px -30px rgba(0,0,0,.6);
}
.post-draw .mb-balls { gap: .5rem; }
.post-draw .mb-ball { width: 2.6rem; height: 2.6rem; font-size: 1.08rem; }
.post-draw__meta { list-style: none; margin: 1rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--line); }
.blog-post-content .post-draw__meta li { margin: .3rem 0; padding-left: 0; font-size: .95rem; color: var(--text-muted); }
.blog-post-content .post-draw__meta li::before { content: none; }
.blog-post-content .post-draw__meta li::marker { content: none; }
.mb-goldnum, .blog-post-content .mb-goldnum {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold);
}
[data-theme="light"] .mb-goldnum, [data-theme="light"] .blog-post-content .mb-goldnum { color: #8a6410; }
@media (max-width: 480px) { .post-draw .mb-ball { width: 2.2rem; height: 2.2rem; font-size: .95rem; } }

/* ---- Pricing page: hero band already opens the page; tighten the first section ---- */
.sec--tight { padding-top: 44px; }

/* ============================================================================
   impl5 STAGE 3 — QA fix pass (2026-07-02). Additive; revert: drop this block
   + the ?v bump. Light-theme gold/mint legibility set, 44px drawer toggle,
   390px ball-row fit, /precios FAQ family, /estadisticas chart labels.
   ============================================================================ */

/* ---- LIGHT theme: gold-on-white is invisible; use the established light gold ---- */
[data-theme="light"] .mb-ball--extra {
  color: #8a6410; border-color: rgba(176,128,24,.55);
}
[data-theme="light"] .hero__trust-gold b {
  background: none; -webkit-text-fill-color: #8a6410; color: #8a6410;
}
[data-theme="light"] .blog-post-content p:has(a[href="/precios"]) a[href="/precios"] {
  color: #8a6410; text-decoration-color: rgba(176,128,24,.45);
}
[data-theme="light"] .blog-post-content p:has(a[href="/precios"]) a[href="/precios"]:hover {
  text-decoration-color: #8a6410;
}

/* ---- /estadisticas frequency chart: hot-number labels via class so the fill
   is themeable (SVG is inline; Charts.php emits class="fq-hot") ---- */
.mb-freq .fq-hot { fill: #F4C95B; }
[data-theme="light"] .mb-freq .fq-hot { fill: #8a6410; }

/* ---- Mobile drawer: theme toggle joins the 44px touch-target floor ---- */
@media (max-width: 1100px) {
  .theme-toggle { min-width: 44px; min-height: 44px; }
}

/* ---- Blog post 390px: 6 balls + '+' + adicional stay on one row ---- */
@media (max-width: 480px) {
  .post-draw { padding: 1.1rem 1rem; }
  .post-draw .mb-balls { gap: .4rem; }
}
/* the plus + adicional pair never wraps apart from each other */
.post-draw__extra { display: inline-flex; align-items: center; gap: inherit; }

/* ---- /precios FAQ: the shipped /faq accordion family, embedded in a .sec ---- */
.faqx--inpage { max-width: 860px; margin-inline: auto; }
.faqx--inpage .mbpage__kicker { display: inline-block; margin-bottom: .9rem; }