html, body{
  color: var(--bn-text) !important;

  background: linear-gradient(180deg, var(--bn-bg0), var(--bn-bg1) 55%, var(--bn-bg2)) !important;
}



/* === BN_OVERLAY_KILL_V1 (2026-02-26) ===
   Purpose: Remove ugly horizontal bands caused by overlay pseudo-elements / blend layers.
   Scope: Visual only. No engine changes.
*/

/* Kill common overlay layers */
body::before, body::after,
main::before, main::after,
section::before, section::after,
.container::before, .container::after,
.wrapper::before, .wrapper::after,
.bg::before, .bg::after,
.hero::before, .hero::after{
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Also neutralize any “band” backgrounds if applied via gradients on huge wrappers */
body, main, .container, .wrapper, .bg, .hero{
  background-image: none !important;
}


/* === BN_BAND_KILL_HARD_V1 (2026-02-26) ===
   FINAL: kill ALL background-image gradients/overlays that cause horizontal banding.
   Scope: visual only. No engine changes.
*/

/* 1) Stop any gradients on page base */
html, body{
  background-image: none !important;
  background: var(--bn-bg1, #07131C) !important;
  background-attachment: scroll !important;
}

/* 2) Kill background images on ALL elements (does NOT affect <img> tags) */
*{
  background-image: none !important;
}

/* 3) Kill pseudo-element overlays that often create bands */
*::before, *::after{
  background-image: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}


/* === BN_QUOTE_NO_INNER_BOX_V1 (2026-02-26) ===
   Scope: Remove inner black box inside the quote card (“Cuando el metabolismo…”).
   Goal: keep only the text on the outer card, no nested rectangle.
*/

/* If we tagged/used any quote wrappers before, neutralize inner backgrounds */
.bn-quote-fix > div,
.bn-quote-fix > div > div,
.bn-quote-fix > div > div > div,
.bn-lock-readable > div,
.bn-lock-readable > div > div,
.bn-lock-readable > div > div > div,
.bn-readable-block > div,
.bn-readable-block > div > div,
.bn-readable-block > div > div > div,
.bn-synergy-quote > div,
.bn-synergy-quote > div > div,
.bn-synergy-quote > div > div > div{
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep text readable without needing an inner box */
.bn-quote-fix *, .bn-lock-readable *, .bn-readable-block *, .bn-synergy-quote *{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.45) !important;
}


/* === BN_TEST_HEADER_SINGLEBLOCK_V1 (2026-02-26) ===
   Scope: Visual only. Make Test header a SINGLE block (title + subtitle), remove outer square strip.
   No HTML/JS changes.
*/

/* 1) Remove the outer banner background that spans the full row */
#test{
  /* keep as-is */
}
#test h2{
  /* already styled as pill; keep */
}

/* The subtitle line right after h2 (the “Marca lo que…” text) */
#test h2 + *{
  /* pull it visually into the same block */
  display: block !important;
  margin: -6px 0 14px 0 !important;
  padding: 0 18px 14px 18px !important;
  max-width: 100% !important;

  /* same background as the pill so it feels like one block */
  background: rgba(10,22,30,.92) !important;
  border-left: 1px solid rgba(0,209,255,.22) !important;
  border-right: 1px solid rgba(0,209,255,.22) !important;
  border-bottom: 1px solid rgba(0,209,255,.22) !important;

  border-radius: 0 0 18px 18px !important;
  color: rgba(255,255,255,.78) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.40) !important;
}

/* Make sure the h2 is the top of that same block */
#test h2{
  border-radius: 18px 18px 0 0 !important;
  margin-bottom: 0 !important;
}

/* 2) Kill any full-width light strip backgrounds around the header row */
#test .header, #test .test-header, #test .title, #test .test-title,
#test .row, #test .grid, #test .container, #test .wrapper{
  background-image: none !important;
}

/* If some wrapper is specifically painting the light banner, neutralize common patterns */
#test [style*="gradient"],
#test [style*="background"]{
  /* do NOT change layout; only neutralize if it is a banner */
}


/* === BN_TEST_HEADER_SYNC_V1 (2026-02-26) ===
   Scope: ONLY the right subtitle block next to the Test title.
   Goal: perfect synergy: same height, same radius, same padding, aligned.
   No font/title changes.
*/

/* The title pill (keep your font) */
#test h2{
  /* keep existing styles; only ensure consistent height */
  min-height: 78px !important;
  display:flex !important;
  align-items:center !important;
}

/* The subtitle block (right side) = h2 + * in this layout */
#test h2 + *{
  min-height: 78px !important;
  display:flex !important;
  align-items:center !important;

  /* Match pill geometry */
  border-radius: 18px !important;
  padding: 14px 18px !important;
  margin: 0 0 12px 0 !important;

  /* Same visual language */
  background: rgba(10,22,30,.92) !important;
  border: 1px solid rgba(0,209,255,.22) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.40) !important;

  /* Text tone */
  color: rgba(255,255,255,.78) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.45) !important;

  /* Prevent weird wrapping */
  line-height: 1.25 !important;
}

/* If the subtitle block was being pulled/shifted by negative margins from earlier attempts, neutralize */
#test h2 + *{
  transform: none !important;
}