@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

/* VIPCLICK Unified Black, Ivory & Gold Theme — v20261113d */
:root {
  --vc-canvas: #090a0b;
  --vc-surface: #111214;
  --vc-surface-soft: #151618;
  --vc-ink: #f4f3ef;
  --vc-muted: #b6b2a9;
  --vc-line: rgba(208, 170, 94, .20);
  --vc-amber: #d6b365;
  --vc-amber-deep: #ad8338;
  --vc-shadow: 0 22px 58px rgba(0, 0, 0, .42);
  --vc-motion: cubic-bezier(.2, .72, .2, 1);
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background-color: #090a0b;
  scrollbar-color: #796844 #090a0b !important;
}

html::-webkit-scrollbar, body::-webkit-scrollbar { display: block !important; width: 8px !important; height: 8px !important; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #090a0b !important; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: #6f5f3d !important; border: 2px solid #090a0b; border-radius: 99px; }

*:not(html):not(body)::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body:has(.planos-cards-reveal) main,
body:has(.planos-cards-reveal) > div.relative.flex.min-h-screen,
body:has(.planos-cards-reveal) .relative.flex.min-h-screen,
body:not(:has(.cockpit-container)) > div.relative.flex.min-h-screen {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ==========================================================================
   PUBLIC SITE PAGES (everything except the client cockpit dashboard)
   ========================================================================== */
body:not(:has(.cockpit-container)) {
  background-color: #090a0b !important;
  color: #f4f3ef !important;
  color-scheme: dark;
}
body:not(:has(.cockpit-container)) > div.relative.flex.min-h-screen {
  background-color: #090a0b !important;
  color: #f4f3ef !important;
}
body:not(:has(.cockpit-container)) ::selection {
  color: #111214;
  background: #d6b365;
}

/* Full-width Edge-to-Edge Header & Navigation Bar */
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  color: #f4f3ef !important;
  background: rgba(11, 12, 14, .94) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(208, 170, 94, .20) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0)[data-vc-scrolled="true"] {
  background: rgba(10, 11, 13, .98) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .54) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) #vc-ann {
  display: none !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) > div.mx-auto {
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 1400px) !important;
  height: var(--vc-header-height, 60px) !important;
  padding-inline: clamp(16px, 3vw, 36px) !important;
  color: #f4f3ef !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
img[src*="brand-logo"],
body img[src*="brand-logo"],
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) img[src*="brand-logo"] {
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  --tw-shadow: 0 0 #0000 !important;
  filter: drop-shadow(0 4px 8px rgba(214, 179, 101, .22)) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) img[src*="brand-logo"] {
  width: 40px !important;
  height: 40px !important;
  transform: translateY(-3.5px) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a.group:hover img[src*="brand-logo"] {
  transform: translateY(-3.5px) scale(1.05) !important;
}

/* Header links, brand wordmark, cart, login & mobile hamburger */
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a:not([href*="register"]),
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a:not([href*="register"]) span,
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav button,
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav button span {
  color: #e6e3da !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a:not([href*="register"]) span[class*="F5A623"],
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a:is([aria-label*="Página" i], [aria-label*="Home" i]) > span > span {
  color: #e5c77f !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav > a:hover,
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav > div > button:hover {
  color: #e5c77f !important;
  background: rgba(214, 179, 101, .10) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a:is([aria-label*="Carrinho" i], [aria-label*="Carrito" i], [aria-label*="Cart" i]),
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a[href="/login"] {
  color: #f4f3ef !important;
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(208, 170, 94, .26) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a:is([aria-label*="Carrinho" i], [aria-label*="Carrito" i], [aria-label*="Cart" i]):hover,
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a[href="/login"]:hover {
  color: #e5c77f !important;
  border-color: rgba(214, 179, 101, .55) !important;
  background: rgba(214, 179, 101, .12) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a[href*="register"],
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) a[href*="register"] * {
  color: #15120b !important;
  background: linear-gradient(110deg, #e5c77f, #bd9142) !important;
  border: 1px solid rgba(255, 229, 165, .28) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) button:is([aria-label*="menu" i], [aria-label*="menú" i]) {
  color: #f4f3ef !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(208, 170, 94, .22) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) button:is([aria-label*="menu" i], [aria-label*="menú" i]) span > span {
  background-color: #f4f3ef !important;
}

/* Produtos dropdown menu (compact obsidian & gold across Home + subpages) */
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .rounded-2xl,
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .vc-prod-menu {
  background: rgba(14, 15, 18, .98) !important;
  border: 1px solid rgba(208, 170, 94, .26) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .74) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .rounded-2xl a {
  background: #141518 !important;
  border: 1px solid rgba(208, 170, 94, .10) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .rounded-2xl a:hover {
  background: #191a1e !important;
  border-color: rgba(214, 179, 101, .36) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .rounded-2xl a .font-heading {
  color: #f4f3ef !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .rounded-2xl a:hover .font-heading {
  color: #e5c77f !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .rounded-2xl a p {
  color: #9e998e !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .rounded-2xl span[class*="emerald"] {
  color: #6ee7b7 !important;
  background-color: rgba(16, 185, 129, .14) !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .rounded-2xl span[class*="emerald"] > span {
  background-color: #34d399 !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .vc-prod-menu a[href="/checkout"] {
  background: transparent !important;
  border: 0 !important;
  color: #e5c77f !important;
}

/* Global typography & CLEAN OBSIDIAN MASTER CANVAS (zero repeating patterns, edge-faded section scenes melt invisibly) */
html body:not(:has(.cockpit-container)) main {
  background-color: #090a0b !important;
  background-image: none !important;
  color: #f4f3ef !important;
}
/* Auth / Support / Info standalone routes (/login, /suporte, etc.) get minimalist PUBG dark hangar atmosphere */
html body:not(:has(#inicio)):not(:has(.vc-esp-page)):not(:has(#comparativo)):not(:has(.planos-cards-reveal)):not(:has(.cockpit-container)) main {
  background-color: #090a0b !important;
  background-image:
    radial-gradient(ellipse 68% 60% at 50% 45%, rgba(9, 10, 11, .76) 0%, rgba(9, 10, 11, .34) 72%, #090a0b 100%),
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .20) 20%, rgba(9, 10, 11, .28) 78%, #090a0b 100%),
    url('/section-pubg-hangar.jpg?v=20261113n') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
body:not(:has(.cockpit-container)) :is(h1, h2, h3, h4, .section-title) {
  color: #f4f3ef !important;
}
body:not(:has(.cockpit-container)) .section-title span {
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #f0d592 0%, #d6b365 55%, #b88a36 100%) !important;
  -webkit-background-clip: text !important;
}
body:not(:has(.cockpit-container)) .text-brand,
body:not(:has(.cockpit-container)) .section-kicker {
  color: #e2c47f !important;
}
body:not(:has(.cockpit-container)) :is(p, li, .section-copy) {
  color: #b6b2a9 !important;
}

/* Override light backgrounds (scoped so #inicio atmospheric layers never turn into opaque boxes!) */
body:not(:has(.cockpit-container)) main :not(#inicio):not(#inicio *) > [class*="bg-white"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="bg-white"],
body:not(:has(.cockpit-container)) > div > main ~ section [class*="bg-white"],
body:not(:has(.cockpit-container)) [class*="bg-white"]:not(main):not(section):not(#inicio *) {
  background-color: #111214 !important;
}
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="bg-slate-50"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="bg-gray-50"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="bg-zinc-50"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="bg-slate-100"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="bg-gray-100"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="bg-zinc-100"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="F8FAFC"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="F1F5F9"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="F5F7FA"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="F8F7F4"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="EDF2F7"],
body:not(:has(.cockpit-container)) [class*="F8FAFC"]:not(main):not(section):not(#inicio *):not(#inicio),
body:not(:has(.cockpit-container)) [class*="F1F5F9"]:not(main):not(section):not(#inicio *):not(#inicio) {
  background-color: #151618 !important;
  background-image: none !important;
}
body:not(:has(.cockpit-container)) section:not(#inicio)[class*="EEF3F8"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="EEF3F8"],
body:not(:has(.cockpit-container)) [class*="EEF3F8"]:not(main):not(#inicio):not(#inicio *),
body:not(:has(.cockpit-container)) [class*="F3F4F6"]:not(main):not(#inicio *),
body:not(:has(.cockpit-container)) [class*="F9FAFB"]:not(main):not(#inicio *) {
  background-color: transparent !important;
  background-image: none !important;
}
body:not(:has(.cockpit-container)) [class*="FDFBF7"]:not(main):not(section):not(#inicio *) {
  background-color: #111214 !important;
  background-image: none !important;
}
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="from-white"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="from-[#EEF3F8]"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="via-[#EEF3F8]"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="via-[#F8FAFC]"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="to-[#EEF3F8]"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="to-[#F8FAFC]"],
body:not(:has(.cockpit-container)) section:not(#inicio) [class*="from-amber-50"] {
  --tw-gradient-from: #111214 !important;
  --tw-gradient-via: #0e0f11 !important;
  --tw-gradient-to: #090a0b !important;
}

/* Purge unintended blue / sky / indigo / cyan tokens across public pages (keep floating Discord widget brand icon) */
body:not(:has(.cockpit-container)) [class*="text-sky-"],
body:not(:has(.cockpit-container)) [class*="text-indigo-"],
body:not(:has(.cockpit-container)) [class*="text-blue-"],
body:not(:has(.cockpit-container)) [class*="text-cyan-"] {
  color: #e5c77f !important;
}
body:not(:has(.cockpit-container)) [class*="text-sky-100"] {
  color: #dcd6c8 !important;
}
body:not(:has(.cockpit-container)) [class*="bg-sky-"],
body:not(:has(.cockpit-container)) [class*="bg-indigo-"]:not(a[href*="discord.gg"]),
body:not(:has(.cockpit-container)) [class*="bg-blue-"],
body:not(:has(.cockpit-container)) [class*="bg-cyan-"] {
  background-color: rgba(214, 179, 101, .12) !important;
}
body:not(:has(.cockpit-container)) [class*="border-sky-"],
body:not(:has(.cockpit-container)) [class*="border-indigo-"],
body:not(:has(.cockpit-container)) [class*="border-blue-"],
body:not(:has(.cockpit-container)) [class*="border-cyan-"] {
  border-color: rgba(214, 179, 101, .30) !important;
}
body:not(:has(.cockpit-container)) [class*="from-blue-"],
body:not(:has(.cockpit-container)) [class*="from-indigo-"],
body:not(:has(.cockpit-container)) [class*="from-cyan-"],
body:not(:has(.cockpit-container)) [class*="via-indigo-"],
body:not(:has(.cockpit-container)) [class*="to-blue-"],
body:not(:has(.cockpit-container)) [class*="to-indigo-"],
body:not(:has(.cockpit-container)) [class*="to-sky-"] {
  --tw-gradient-from: #d6b365 !important;
  --tw-gradient-via: #c59c4a !important;
  --tw-gradient-to: #ad8338 !important;
}

/* Pastel callouts & status pills */
body:not(:has(.cockpit-container)) [class*="bg-amber-50"] {
  background-color: rgba(214, 179, 101, .11) !important;
  border-color: rgba(214, 179, 101, .32) !important;
  color: #f3d796 !important;
}
body:not(:has(.cockpit-container)) [class*="bg-amber-50"] strong,
body:not(:has(.cockpit-container)) [class*="bg-amber-50"] p,
body:not(:has(.cockpit-container)) [class*="bg-amber-50"] span {
  color: #f7e4b2 !important;
}
body:not(:has(.cockpit-container)) [class*="bg-emerald-50"] {
  background-color: rgba(16, 185, 129, .12) !important;
  border-color: rgba(52, 211, 153, .28) !important;
  color: #6ee7b7 !important;
}
body:not(:has(.cockpit-container)) [class*="bg-emerald-50"] strong,
body:not(:has(.cockpit-container)) [class*="bg-emerald-50"] p,
body:not(:has(.cockpit-container)) [class*="bg-emerald-50"] span {
  color: #a7f3d0 !important;
}
body:not(:has(.cockpit-container)) [class*="bg-rose-50"],
body:not(:has(.cockpit-container)) [class*="bg-red-50"] {
  background-color: rgba(244, 63, 94, .12) !important;
  border-color: rgba(251, 113, 133, .28) !important;
  color: #fda4af !important;
}
body:not(:has(.cockpit-container)) [class*="bg-rose-50"] strong,
body:not(:has(.cockpit-container)) [class*="bg-rose-50"] p,
body:not(:has(.cockpit-container)) [class*="bg-red-50"] p {
  color: #fecdd3 !important;
}

/* Override dark slate ink classes */
body:not(:has(.cockpit-container)) :is(
  [class*="text-[#0F172A]"],
  [class*="text-[#0B0D13]"],
  [class*="text-[#111827]"],
  [class*="text-[#1E293B]"],
  [class*="text-slate-900"],
  [class*="text-slate-800"],
  [class*="text-gray-900"],
  [class*="text-black"]
) {
  color: #f4f3ef !important;
}
body:not(:has(.cockpit-container)) :is(
  [class*="text-[#334155]"],
  [class*="text-[#475569]"],
  [class*="text-[#64748B]"],
  [class*="text-slate-700"],
  [class*="text-slate-600"],
  [class*="text-slate-500"],
  [class*="text-gray-700"],
  [class*="text-gray-600"]
) {
  color: #b6b2a9 !important;
}
body:not(:has(.cockpit-container)) :is([class*="text-[#D4A034]"], [class*="text-[#B67E06]"], [class*="text-[#D48806]"], [class*="text-amber-7"], [class*="text-amber-8"]) {
  color: #e5c77f !important;
}

/* Keep dark ink inside primary gold buttons & gold arrow inside dark button circles */
body:not(:has(.cockpit-container)) :is(
  a[class*="from-[#F5B025]"],
  button[class*="from-[#F5B025]"],
  a[class*="from-[#FFB800]"],
  button[class*="from-[#FFB800]"],
  a[class*="bg-[#F5A623]"],
  button[class*="bg-[#F5A623]"],
  a.button-sheen,
  button.button-sheen
),
body:not(:has(.cockpit-container)) :is(
  a[class*="from-[#F5B025]"],
  button[class*="from-[#F5B025]"],
  a[class*="from-[#FFB800]"],
  button[class*="from-[#FFB800]"],
  a[class*="bg-[#F5A623]"],
  button[class*="bg-[#F5A623]"],
  a.button-sheen,
  button.button-sheen
) * {
  color: #15120b !important;
}
body:not(:has(.cockpit-container)) :is(a.button-sheen, button.button-sheen) :is([class*="bg-[#0"], [class*="bg-black"], [class*="bg-slate-9"]),
body:not(:has(.cockpit-container)) :is(a.button-sheen, button.button-sheen) :is([class*="bg-[#0"], [class*="bg-black"], [class*="bg-slate-9"]) * {
  background-color: #111214 !important;
  color: #e5c77f !important;
  stroke: #e5c77f !important;
}
body:not(:has(.cockpit-container)) :is(
  a[class*="from-[#F5B025]"],
  button[class*="from-[#F5B025]"],
  a[class*="from-[#FFB800]"],
  button[class*="from-[#FFB800]"],
  a[class*="bg-[#F5A623]"],
  button[class*="bg-[#F5A623]"],
  a.button-sheen,
  button.button-sheen
) {
  background: linear-gradient(110deg, #e5c77f, #bd9142) !important;
  border-color: rgba(255, 229, 165, .32) !important;
}

/* Borders & shadows */
body:not(:has(.cockpit-container)) [class*="DCE4EC"],
body:not(:has(.cockpit-container)) [class*="E2E8F0"],
body:not(:has(.cockpit-container)) [class*="CBD5E1"],
body:not(:has(.cockpit-container)) [class*="F1F5F9"],
body:not(:has(.cockpit-container)) [class*="border-slate-2"],
body:not(:has(.cockpit-container)) [class*="border-white"],
body:not(:has(.cockpit-container)) [class*="border-black/"],
body:not(:has(.cockpit-container)) [class*="border-amber-2"],
body:not(:has(.cockpit-container)) [class*="border-amber-3"],
body:not(:has(.cockpit-container)) [class*="border-emerald-2"] {
  border-color: rgba(208, 170, 94, .20) !important;
}
body:not(:has(.cockpit-container)) [class*="FFFFFF"] { box-shadow: none !important; }
body:not(:has(.cockpit-container)) :is([class^="shadow-["], [class*=" shadow-["]):not(#inicio span):not(img) { box-shadow: 0 12px 32px rgba(0, 0, 0, .34) !important; }

/* FAQ accordions & details: clip inner expanded box to rounded outer corner, kill white shadow leaks */
body:not(:has(.cockpit-container)) details {
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 16px !important;
  border: 1px solid rgba(208, 170, 94, .22) !important;
  background: linear-gradient(155deg, rgba(20, 21, 24, .96), rgba(13, 14, 17, .98)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42) !important;
}
body:not(:has(.cockpit-container)) details[open] {
  border-color: rgba(229, 199, 127, .42) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .52), 0 0 22px rgba(214, 179, 101, .09) !important;
}
body:not(:has(.cockpit-container)) details > div,
body:not(:has(.cockpit-container)) details > div > div,
body:not(:has(.cockpit-container)) details > p,
body:not(:has(.cockpit-container)) details p {
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, .07) !important;
  color: #b6b2a9 !important;
}
body:not(:has(.cockpit-container)) details > summary {
  color: #f4f3ef !important;
  background: transparent !important;
}
body:not(:has(.cockpit-container)) .card-hover-lift.rounded-2xl {
  overflow: hidden !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42) !important;
}

/* Dark Inputs, Checkout Inputs (beats site-system & autofill), Cards & Video Frames */
html body:not(:has(.cockpit-container)) :is(input, select, textarea),
html body:not(:has(.cockpit-container)):has(.planos-cards-reveal) main aside :is(input, select, textarea) {
  color: #f4f3ef !important;
  background: #151618 !important;
  background-color: #151618 !important;
  background-image: none !important;
  border-color: rgba(208, 170, 94, .28) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45) !important;
  color-scheme: dark;
}
html body:not(:has(.cockpit-container)) :is(input, select, textarea):focus {
  border-color: rgba(229, 199, 127, .65) !important;
  outline: none !important;
}
html body:not(:has(.cockpit-container)) input::placeholder,
html body:not(:has(.cockpit-container)) textarea::placeholder {
  color: #7d7970 !important;
}
html body:not(:has(.cockpit-container)) input:-webkit-autofill,
html body:not(:has(.cockpit-container)) input:-webkit-autofill:hover,
html body:not(:has(.cockpit-container)) input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f3ef !important;
  -webkit-box-shadow: 0 0 0 1000px #151618 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}
body:not(:has(.cockpit-container)) div.rounded-3xl:has(video) {
  color: #f4f3ef !important;
  border: 1px solid rgba(208, 170, 94, .24) !important;
  background: #111214 !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .46) !important;
}
body:not(:has(.cockpit-container)) div.rounded-3xl:has(video) > div,
body:not(:has(.cockpit-container)) video {
  background: #090a0b !important;
}

/* ==========================================================================
   HOMEPAGE HERO STAGE (#inicio) — Cinematic Battlefield Depth & Vivid Gold Type
   ========================================================================== */
html body:not(:has(.cockpit-container)) #inicio {
  position: relative !important;
  background-color: #090a0b !important;
  background-image:
    linear-gradient(90deg, rgba(9, 10, 11, .46) 0%, rgba(9, 10, 11, .12) 34%, rgba(9, 10, 11, .12) 68%, rgba(9, 10, 11, .34) 100%),
    linear-gradient(180deg, rgba(9, 10, 11, .10) 0%, rgba(9, 10, 11, .18) 54%, rgba(9, 10, 11, .84) 86%, #090a0b 100%),
    url('/hero-backdrop.jpg?v=20261113l') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-bottom: 0 !important;
  color: #f4f3ef !important;
}
@keyframes vcHeroMetalSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes vcHeroGlowPulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
/* Slide-only monotonic transition keyframes (MACRO PUBG <-> ESP PUBG; ZERO idle motion or end-bounce on operator) */
@keyframes vcSlideCharInNext {
  0% { opacity: 0; transform: translate3d(18vw, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vcSlideCharOutNext {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(-18vw, 0, 0); }
}
@keyframes vcSlideCharInPrev {
  0% { opacity: 0; transform: translate3d(-18vw, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vcSlideCharOutPrev {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(18vw, 0, 0); }
}
@keyframes vcSlideTypoInNext {
  0% { opacity: 0; transform: translate3d(20vw, 0, 0) scale(1.06); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes vcSlideTypoOutNext {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-20vw, 0, 0) scale(0.94); }
}
@keyframes vcSlideTypoInPrev {
  0% { opacity: 0; transform: translate3d(-20vw, 0, 0) scale(1.06); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes vcSlideTypoOutPrev {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(20vw, 0, 0) scale(0.94); }
}
@keyframes vcSlideContentInNext {
  0% { opacity: 0; transform: translate3d(28px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vcSlideContentOutNext {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(-28px, 0, 0); }
}
@keyframes vcSlideContentInPrev {
  0% { opacity: 0; transform: translate3d(-28px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vcSlideContentOutPrev {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(28px, 0, 0); }
}
@keyframes vcSlideLaserSweep {
  0% { transform: translate3d(-115%, 0, 0) skewX(-22deg); opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 0.94; }
  100% { transform: translate3d(420%, 0, 0) skewX(-22deg); opacity: 0; }
}
@keyframes vcSlideFlashPulse {
  0% { opacity: 0; transform: scale(0.76); }
  22% { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.38); }
}

html body:not(:has(.cockpit-container)) #inicio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 68% 60% at 50% 42%, rgba(245, 166, 35, .20) 0%, rgba(194, 114, 14, .08) 48%, rgba(9, 10, 11, 0) 78%);
  animation: vcHeroGlowPulse 6s ease-in-out infinite;
}
html body:not(:has(.cockpit-container)) #inicio::after {
  display: none !important;
}
/* Hide ALL legacy square/circular blur divs in #inicio so zero composited seam rectangles ever appear */
body:not(:has(.cockpit-container)) #inicio div[class*="from-white"],
body:not(:has(.cockpit-container)) #inicio div[class*="38BDF8"],
body:not(:has(.cockpit-container)) #inicio div[class*="blur-[75px]"],
body:not(:has(.cockpit-container)) #inicio div[class*="blur-[60px]"],
body:not(:has(.cockpit-container)) #inicio div[class*="from-[#F5B025]/25"],
body:not(:has(.cockpit-container)) #inicio div[class*="from-[#D6B365]"] {
  display: none !important;
}
/* Hero bottom atmospheric fade (dissolves cleanly into the shared main backdrop without any line) */
body:not(:has(.cockpit-container)) #inicio div[class*="h-32"][class*="EEF3F8"],
body:not(:has(.cockpit-container)) #inicio div[class*="h-28"][class*="EEF3F8"] {
  height: 11.5rem !important;
  background-color: transparent !important;
  background-image: linear-gradient(to top, #090a0b 0%, rgba(9, 10, 11, .92) 28%, rgba(9, 10, 11, .44) 68%, rgba(9, 10, 11, 0) 100%) !important;
}
/* Hero pills & badges inside #inicio */
body:not(:has(.cockpit-container)) #inicio :is(a[class*="bg-white"], div[class*="bg-white"], span[class*="bg-white"]) {
  background-color: rgba(16, 17, 21, .92) !important;
  border-color: rgba(245, 166, 35, .34) !important;
}
/* Living Metallic Layered Typography (Top MACRO/ESP larger & molten animated gold; PUBG brushed champagne-titanium sheen) */
body:not(:has(.cockpit-container)) #inicio div[class*="z-[2]"][class*="flex-col"] {
  padding-bottom: 52px !important;
}
body:not(:has(.cockpit-container)) #inicio span[class*="clamp(140px"],
body:not(:has(.cockpit-container)) #inicio span[class*="text-[70px]"] {
  font-family: 'Montserrat', 'Sora', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(166px, 18.2vw, 262px) !important;
  line-height: 0.86 !important;
  background-color: transparent !important;
  background-image: linear-gradient(115deg, #D97706 0%, #FFB800 30%, #FFF7CC 50%, #F59E0B 72%, #92400E 100%) !important;
  background-size: 240% 100% !important;
  animation: vcHeroMetalSheen 5.5s ease-in-out infinite !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 transparent !important;
  letter-spacing: 0.02em !important;
  opacity: 0.96 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}
body:not(:has(.cockpit-container)) #inicio span[class*="clamp(150px"],
body:not(:has(.cockpit-container)) #inicio span[class*="text-[82px]"] {
  font-family: 'Montserrat', 'Sora', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(118px, 12.8vw, 182px) !important;
  line-height: 0.88 !important;
  margin-top: 4px !important;
  background-color: transparent !important;
  background-image: linear-gradient(115deg, rgba(168, 152, 124, .76) 0%, rgba(235, 224, 200, .92) 32%, rgba(255, 248, 225, .96) 50%, rgba(214, 192, 148, .86) 68%, rgba(128, 114, 92, .62) 100%) !important;
  background-size: 240% 100% !important;
  animation: vcHeroMetalSheen 5.5s ease-in-out infinite reverse !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 transparent !important;
  letter-spacing: 0.08em !important;
  opacity: 0.90 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}
@media (max-width: 1023px) {
  html body:not(:has(.cockpit-container)) #inicio {
    background-image:
      linear-gradient(90deg, rgba(9, 10, 11, .34) 0%, rgba(9, 10, 11, .06) 50%, rgba(9, 10, 11, .34) 100%),
      linear-gradient(180deg, rgba(9, 10, 11, .08) 0px, rgba(9, 10, 11, .20) 240px, rgba(9, 10, 11, .84) 345px, #090a0b 384px, #090a0b 100%),
      url('/hero-backdrop.jpg?v=20261113l') !important;
    background-position: center top !important;
    background-size: 100% 100%, 100% 100%, auto 420px !important;
    background-repeat: no-repeat !important;
  }
  html body:not(:has(.cockpit-container)) #inicio::before {
    height: 384px !important;
    bottom: auto !important;
    background: radial-gradient(ellipse 74% 62% at 50% 44%, rgba(245, 166, 35, .18) 0%, rgba(194, 114, 14, .06) 46%, rgba(9, 10, 11, 0) 74%) !important;
  }
  body:not(:has(.cockpit-container)) #inicio .lg\:hidden div[class*="h-[98%]"] {
    height: 100% !important;
  }
  body:not(:has(.cockpit-container)) #inicio div[class*="h-28"][class*="EEF3F8"] {
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    height: 84px !important;
    background-color: transparent !important;
    background-image: linear-gradient(to top, #090a0b 0%, rgba(9, 10, 11, .78) 28%, rgba(9, 10, 11, .26) 64%, rgba(9, 10, 11, 0) 100%) !important;
  }
  body:not(:has(.cockpit-container)) #inicio span[class*="text-[70px]"] {
    font-size: clamp(66px, 19vw, 128px) !important;
    line-height: 0.86 !important;
    letter-spacing: 0.02em !important;
  }
  body:not(:has(.cockpit-container)) #inicio span[class*="text-[82px]"] {
    font-size: clamp(46px, 13.5vw, 88px) !important;
    line-height: 0.90 !important;
    letter-spacing: 0.08em !important;
    margin-top: 4px !important;
  }
  body:not(:has(.cockpit-container)) #inicio > div > button:is([aria-label*="anterior" i], [aria-label*="previous" i]),
  body:not(:has(.cockpit-container)) #inicio > div > button:is([aria-label*="próximo" i], [aria-label*="siguiente" i], [aria-label*="next" i]) {
    top: 204px !important;
    width: 38px !important;
    height: 38px !important;
  }
  body:not(:has(.cockpit-container)) #inicio > div > button:is([aria-label*="anterior" i], [aria-label*="previous" i]) { left: 8px !important; }
  body:not(:has(.cockpit-container)) #inicio > div > button:is([aria-label*="próximo" i], [aria-label*="siguiente" i], [aria-label*="next" i]) { right: 8px !important; }
  body:not(:has(.cockpit-container)) #inicio > div > div.lg\:hidden {
    padding-bottom: 32px !important;
  }
}
/* Hero character integration: ZERO idle effect, filter, mask, or GPU layer box on ALL hero <img> (desktop + mobile) */
body:not(:has(.cockpit-container)) #inicio img,
body:not(:has(.cockpit-container)) #inicio .hero-character,
body:not(:has(.cockpit-container)) #inicio:hover img,
body:not(:has(.cockpit-container)) #inicio:hover .hero-character {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body:not(:has(.cockpit-container)) #inicio .hero-character,
body:not(:has(.cockpit-container)) #inicio:hover .hero-character {
  height: 97% !important;
  max-height: 97% !important;
}
body:not(:has(.cockpit-container)) #inicio img.hero-character[src*="pubg-soldier-esp-v2"],
body:not(:has(.cockpit-container)) #inicio:hover img.hero-character[src*="pubg-soldier-esp-v2"] {
  height: 102% !important;
  max-height: none !important;
  margin-bottom: -14px !important;
}
/* Transition-only crisp dead-stop FPS choreography when switching MACRO PUBG <-> ESP PUBG */
body:not(:has(.cockpit-container)) #inicio :is([style*="deskCharInNext"], [style*="charInNext"]) {
  animation: vcSlideCharInNext 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskCharOutNext"], [style*="charOutNext"]) {
  animation: vcSlideCharOutNext 0.24s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskCharInPrev"], [style*="charInPrev"]) {
  animation: vcSlideCharInPrev 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskCharOutPrev"], [style*="charOutPrev"]) {
  animation: vcSlideCharOutPrev 0.24s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskTypoInNext"], [style*="typoInNext"]) {
  animation: vcSlideTypoInNext 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.02s both !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskTypoOutNext"], [style*="typoOutNext"]) {
  animation: vcSlideTypoOutNext 0.24s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskTypoInPrev"], [style*="typoInPrev"]) {
  animation: vcSlideTypoInPrev 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.02s both !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskTypoOutPrev"], [style*="typoOutPrev"]) {
  animation: vcSlideTypoOutPrev 0.24s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskContentInNext"], [style*="contentInNext"]) {
  animation: vcSlideContentInNext 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskContentOutNext"], [style*="contentOutNext"]) {
  animation: vcSlideContentOutNext 0.22s ease-in forwards !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskContentInPrev"], [style*="contentInPrev"]) {
  animation: vcSlideContentInPrev 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both !important;
}
body:not(:has(.cockpit-container)) #inicio :is([style*="deskContentOutPrev"], [style*="contentOutPrev"]) {
  animation: vcSlideContentOutPrev 0.22s ease-in forwards !important;
}
body:not(:has(.cockpit-container)) #inicio [style*="tacticalLaserSweep"] {
  position: relative !important;
  width: 560px !important;
  filter: none !important;
  background: linear-gradient(90deg, transparent 0%, rgba(9, 10, 11, .52) 24%, rgba(245, 176, 37, .42) 47%, rgba(255, 249, 224, .88) 50%, rgba(245, 176, 37, .34) 55%, rgba(214, 179, 101, .06) 76%, transparent 100%) !important;
  animation: vcSlideLaserSweep 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
body:not(:has(.cockpit-container)) #inicio [style*="tacticalLaserSweep"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 248, 220, .98) 28%, rgba(255, 214, 110, .98) 72%, transparent 100%);
  box-shadow: 0 0 26px 6px rgba(245, 176, 37, .75);
}
body:not(:has(.cockpit-container)) #inicio [style*="flashPulse"] {
  background:
    radial-gradient(circle at 50% 45%, transparent 0%, rgba(255, 224, 130, .36) 24%, rgba(245, 176, 37, .20) 32%, transparent 50%),
    radial-gradient(ellipse 75% 65% at 50% 45%, rgba(245, 176, 37, .28) 0%, rgba(214, 148, 32, .12) 48%, transparent 80%) !important;
  animation: vcSlideFlashPulse 0.66s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
body:not(:has(.cockpit-container)) #inicio button:is([aria-label*="próximo" i], [aria-label*="siguiente" i], [aria-label*="next" i], [aria-label*="anterior" i], [aria-label*="previous" i]) {
  color: #f4d27d !important;
  background: rgba(14, 15, 19, .92) !important;
  background-image: none !important;
  border: 1px solid rgba(245, 166, 35, .44) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .48) !important;
}
body:not(:has(.cockpit-container)) #inicio button:is([aria-label*="próximo" i], [aria-label*="siguiente" i], [aria-label*="next" i], [aria-label*="anterior" i], [aria-label*="previous" i]):hover {
  color: #fff3cc !important;
  background: rgba(30, 24, 14, .96) !important;
  background-image: none !important;
  border-color: rgba(245, 166, 35, .82) !important;
}
body:not(:has(.cockpit-container)) #inicio button:is([aria-label*="próximo" i], [aria-label*="siguiente" i], [aria-label*="next" i], [aria-label*="anterior" i], [aria-label*="previous" i]) svg {
  color: #f5b025 !important;
  stroke: #f5b025 !important;
}

/* ==========================================================================
   SEAMLESS UNIFIED FLOW ACROSS ALL SECTIONS (Zero horizontal lines or mismatched crops)
   ========================================================================== */
html body:not(:has(.cockpit-container)) main > section:not(#inicio),
html body:not(:has(.cockpit-container)) section:not(#inicio)[class*="F8FAFC"],
html body:not(:has(.cockpit-container)) section:not(#inicio)[class*="EEF3F8"] {
  background-color: #090a0b !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
/* Home Section 2 (Por que VipClick): deep obsidian + subtle amber horizon aura bridging smoothly from Hero */
html body:not(:has(.cockpit-container)) main > #inicio + section {
  background-color: #090a0b !important;
  background-image: radial-gradient(ellipse 70% 52% at 50% 42%, rgba(214, 179, 101, .06), transparent 72%) !important;
}
/* Home Section 3 (PUBG Automatic): cohesive dark PUBG Armory workbench (M416 / Beryl / Kar98k / Lv3 Helmet), full edge dissolve */
html body:not(:has(.cockpit-container)) main > #inicio + section + section {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .38) 26%, rgba(9, 10, 11, .38) 74%, #090a0b 100%),
    linear-gradient(90deg, #090a0b 0%, rgba(9, 10, 11, .18) 18%, rgba(9, 10, 11, .18) 82%, #090a0b 100%),
    url('/section-pubg-armory.jpg?v=20261113n') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
/* Home Section 4 (ESP PUBG): cohesive misty Pochinki nocturnal overlook fading seamlessly top & bottom */
html body:not(:has(.cockpit-container)) main > #inicio + section + section + section {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .34) 26%, rgba(9, 10, 11, .34) 74%, #090a0b 100%),
    linear-gradient(90deg, #090a0b 0%, rgba(9, 10, 11, .16) 16%, rgba(9, 10, 11, .16) 84%, #090a0b 100%),
    url('/section-pubg-esp-night.jpg?v=20261113n') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
/* Home Section 5 (Avaliações): distant dark Erangel ridge silhouette */
html body:not(:has(.cockpit-container)) main > #inicio + section + section + section + section {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .38) 26%, rgba(9, 10, 11, .42) 74%, #090a0b 100%),
    url('/section-backdrop-tactical.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
/* Home Section 6 (Perguntas Frequentes): dark PUBG Hangar Lobby framing FAQ subtly */
html body:not(:has(.cockpit-container)) main > #inicio + section + section + section + section + section {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .48) 24%, rgba(9, 10, 11, .54) 78%, #090a0b 100%),
    url('/section-pubg-hangar.jpg?v=20261113n') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:has(.planos-cards-reveal) {
  background-color: #090a0b !important;
  background-image:
    radial-gradient(ellipse 76% 62% at 50% 44%, rgba(9, 10, 11, .64) 0%, rgba(9, 10, 11, .28) 72%, #090a0b 100%),
    linear-gradient(180deg, rgba(9, 10, 11, .38) 0%, rgba(9, 10, 11, .26) 50%, #090a0b 100%),
    url('/section-pubg-hangar.jpg?v=20261113n') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
body:not(:has(.cockpit-container)) #inicio + section {
  position: relative !important;
  background: transparent !important;
}
body:not(:has(.cockpit-container)) #inicio + section::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 110px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, 0) 100%) !important;
}
body:not(:has(.cockpit-container)) #inicio + section [style*="opacity"] {
  opacity: 1 !important;
  transform: none !important;
}
body:not(:has(.cockpit-container)) #inicio + section article.luxury-card-hover {
  position: relative !important;
  background: linear-gradient(160deg, rgba(20, 21, 26, .92), rgba(12, 13, 16, .97)) !important;
  border: 1px solid rgba(245, 166, 35, .22) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(229, 199, 127, .16) !important;
  padding: 26px !important;
}
body:not(:has(.cockpit-container)) #inicio + section article.luxury-card-hover::before {
  display: none !important;
}
body:not(:has(.cockpit-container)) #inicio + section article.luxury-card-hover span.rounded-xl {
  background: linear-gradient(135deg, #FFB81C 0%, #D97706 100%) !important;
  border: 1px solid rgba(255, 224, 130, .45) !important;
  color: #090a0b !important;
  box-shadow: 0 8px 20px rgba(245, 166, 35, .28) !important;
}
body:not(:has(.cockpit-container)) #inicio + section article.luxury-card-hover span.rounded-xl svg {
  color: #090a0b !important;
  stroke: #090a0b !important;
}
body:not(:has(.cockpit-container)) #inicio + section article.luxury-card-hover span[class*="tracking-"] {
  background: transparent !important;
  color: rgba(245, 184, 72, .52) !important;
}
body:not(:has(.cockpit-container)) #inicio + section article.luxury-card-hover:hover {
  border-color: rgba(245, 176, 37, .48) !important;
  transform: translateY(-3px);
}
/* Frame the two Home product showcases (PUBG Automatic & ESP PUBG) into crisp structured panels */
body:not(:has(.cockpit-container)) #inicio ~ section:has(video) .grid.items-center {
  border: 1px solid rgba(208, 170, 94, .20) !important;
  border-radius: 28px !important;
  background: linear-gradient(155deg, rgba(19, 20, 23, .95), rgba(11, 12, 14, .98)) !important;
  padding: clamp(22px, 3vw, 40px) !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .04) !important;
}
@media (min-width: 1024px) {
  body:not(:has(.cockpit-container)) #inicio ~ section:has(video) .grid.items-center > div:has(.section-kicker) {
    align-items: flex-start !important;
    text-align: left !important;
  }
  body:not(:has(.cockpit-container)) #inicio ~ section:has(video) .grid.items-center > div:has(.section-kicker) .section-title,
  body:not(:has(.cockpit-container)) #inicio ~ section:has(video) .grid.items-center > div:has(.section-kicker) .section-copy {
    text-align: left !important;
    margin-inline: 0 !important;
  }
  body:not(:has(.cockpit-container)) #inicio ~ section:has(video) .grid.items-center > div:has(.section-kicker) > div:last-child {
    justify-content: flex-start !important;
  }
}
body:not(:has(.cockpit-container)) main .card-hover-lift { background: #111214 !important; }

/* Dark Obsidian/Gold radar & HUD overrides (remove light cyan glow boxes) */
body:not(:has(.cockpit-container)) .fx-radar {
  background:
    radial-gradient(circle, transparent 32%, rgba(214, 179, 101, .28) 33%, transparent 34.5%),
    radial-gradient(circle, transparent 64%, rgba(214, 179, 101, .28) 65%, transparent 66.5%),
    linear-gradient(rgba(214, 179, 101, .20), rgba(214, 179, 101, .20)) 50%/100% 1px no-repeat,
    linear-gradient(rgba(214, 179, 101, .20), rgba(214, 179, 101, .20)) 50%/1px 100% no-repeat,
    radial-gradient(circle, #141619 0%, #090a0b 75%) !important;
  box-shadow: inset 0 0 0 1px rgba(214, 179, 101, .35), 0 6px 16px rgba(0, 0, 0, .4) !important;
}
body:not(:has(.cockpit-container)) .fx-radar-sweep {
  background: conic-gradient(rgba(229, 199, 127, .48), transparent 24%) !important;
}
body:not(:has(.cockpit-container)) .fx-hud:after {
  display: none !important;
}

/* ============================================================================
   /esp-pubg — Complete Obsidian & Gold Product Architecture (zero uncompiled JIT dependencies)
   ============================================================================ */
.vc-esp-page {
  min-height: 100vh;
  background: transparent !important;
  color: #f4f3ef !important;
  padding-top: 64px;
}
.vc-esp-sec {
  position: relative;
  padding: 52px 0;
  border-bottom: 0;
  background: transparent !important;
}
.vc-esp-sec-alt {
  background: transparent !important;
}
.vc-esp-sec-hero {
  position: relative;
  overflow: hidden;
  padding: 44px 0 56px;
  border-bottom: 0;
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, rgba(9, 10, 11, .24) 0%, rgba(9, 10, 11, .34) 64%, #090a0b 100%),
    linear-gradient(90deg, #090a0b 0%, rgba(9, 10, 11, .18) 18%, rgba(9, 10, 11, .18) 82%, #090a0b 100%),
    url('/section-pubg-esp-night.jpg?v=20261113n') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.vc-esp-wrap {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
}
.vc-esp-wrap-narrow {
  max-width: 920px;
  margin-inline: auto;
  padding-inline: 20px;
}
.vc-esp-hero-grid,
.vc-esp-video-card,
.vc-esp-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 28px;
}
.vc-esp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(214, 179, 101, .34);
  background: rgba(214, 179, 101, .10);
  color: #e5c77f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vc-esp-dot-gold {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #e5c77f;
  box-shadow: 0 0 10px rgba(229, 199, 127, .75);
}
.vc-esp-dot-green {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, .7);
}
.vc-esp-hero-title {
  margin-top: 16px;
  font-family: var(--font-heading), Sora, sans-serif;
  font-size: clamp(2.5rem, 4.8vw, 3.85rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #f4f3ef;
}
.vc-esp-gold-word {
  color: #e5c77f !important;
  background: linear-gradient(135deg, #f3d796 0%, #d6b365 55%, #b88a36 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vc-esp-lead {
  margin-top: 14px;
  max-width: 540px;
  font-size: 15px;
  line-height: 1.65;
  color: #b6b2a9 !important;
}
.vc-esp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.vc-esp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 9999px;
  border: 1px solid rgba(214, 179, 101, .24);
  background: #121317;
  color: #e5c77f;
  font-size: 12px;
  font-weight: 600;
}
.vc-esp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 460px;
  margin-top: 24px;
}
.vc-esp-stat-tile {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #121317;
  padding: 12px 14px;
  text-align: left;
}
.vc-esp-stat-tile strong {
  display: block;
  font-family: var(--font-heading), Sora, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #f4f3ef;
}
.vc-esp-stat-tile span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #9e998e;
}

/* Flagship License Card */
.vc-esp-license-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(214, 179, 101, .34);
  background: linear-gradient(180deg, #14151a 0%, #101115 100%);
  padding: 26px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(229, 199, 127, .22);
}
.vc-esp-license-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(229, 199, 127, .85) 50%, transparent 95%);
}
.vc-esp-license-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.vc-esp-shield-box {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  border: 1px solid rgba(214, 179, 101, .34);
  background: rgba(214, 179, 101, .12);
  color: #e5c77f;
}
.vc-esp-pill-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(214, 179, 101, .14);
  border: 1px solid rgba(214, 179, 101, .28);
  color: #e5c77f;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vc-esp-price {
  font-family: var(--font-heading), Sora, sans-serif;
  font-size: 30px;
  font-weight: 900;
  color: #e5c77f;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vc-esp-price small {
  font-size: 14px;
  font-weight: 700;
  color: #9e998e;
}
.vc-esp-checks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
}
.vc-esp-check-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .03);
  color: #e2ddd2;
  font-size: 12.5px;
  font-weight: 600;
}
.vc-esp-check-mark {
  color: #34d399;
  font-weight: 900;
  font-size: 13px;
}
.vc-esp-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.vc-esp-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 13px 20px;
  border-radius: 13px;
  background: linear-gradient(135deg, #f3d796 0%, #d6b365 55%, #b88a36 100%) !important;
  color: #090a0b !important;
  font-family: var(--font-heading), Sora, sans-serif;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(214, 179, 101, .28);
  transition: transform .18s ease, filter .18s ease;
}
.vc-esp-btn-gold:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.vc-esp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-radius: 13px;
  border: 1px solid rgba(214, 179, 101, .30);
  background: rgba(255, 255, 255, .03);
  color: #f4f3ef !important;
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color .18s ease, background-color .18s ease;
}
.vc-esp-btn-ghost:hover {
  border-color: rgba(229, 199, 127, .65);
  background: rgba(214, 179, 101, .08);
}

/* Panels (Video Theater & Showcase) */
.vc-esp-panel {
  border-radius: 24px;
  border: 1px solid rgba(214, 179, 101, .22);
  background: linear-gradient(180deg, #131418 0%, #0f1014 100%);
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.vc-esp-video-frame {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(214, 179, 101, .26);
  background: #070809;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .65);
}
.vc-esp-tabs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.vc-esp-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: #121317;
  color: #9e998e;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
}
.vc-esp-tab:hover {
  border-color: rgba(214, 179, 101, .45);
  color: #f4f3ef;
}
.vc-esp-tab.is-active {
  border-color: #d6b365;
  background: rgba(214, 179, 101, .14);
  color: #f4f3ef;
  box-shadow: 0 6px 20px rgba(214, 179, 101, .14);
}
.vc-esp-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .24);
}
.vc-esp-tab.is-active .vc-esp-tab-dot {
  background: #e5c77f;
  box-shadow: 0 0 8px rgba(229, 199, 127, .85);
}
.vc-esp-media-box {
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(214, 179, 101, .24);
  background: #08090a;
}
.vc-esp-media-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.vc-esp-meta-list {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12.5px;
}

/* Engineering Feature Cards */
.vc-esp-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 36px;
}
.vc-esp-feature-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #131418 0%, #0f1014 100%);
  padding: 24px;
  transition: transform .18s ease, border-color .18s ease;
}
.vc-esp-feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 179, 101, .35);
}
.vc-esp-feature-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(214, 179, 101, .30);
  background: rgba(214, 179, 101, .10);
  color: #e5c77f;
}

/* Comparison Matrix */
.vc-esp-compare-table {
  margin-top: 32px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(214, 179, 101, .22);
  background: #111216;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.vc-esp-compare-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  padding: 15px 22px;
  background: #16171d;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f4f3ef;
}
.vc-esp-compare-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 13px;
}
.vc-esp-compare-row:first-child {
  border-top: none;
}
.vc-esp-badge-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, .14);
  border: 1px solid rgba(52, 211, 153, .30);
  color: #34d399;
  font-size: 12px;
  font-weight: 900;
}
.vc-esp-badge-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: rgba(244, 63, 94, .14);
  border: 1px solid rgba(251, 113, 133, .28);
  color: #fb7185;
  font-size: 12px;
  font-weight: 900;
}

/* FAQ Accordion */
.vc-esp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.vc-esp-faq-item {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #111216;
  transition: border-color .18s ease;
}
.vc-esp-faq-item.is-open {
  border-color: rgba(214, 179, 101, .34);
}
.vc-esp-faq-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  font-size: 14.5px;
  font-weight: 700;
  color: #f4f3ef;
  background: transparent;
  cursor: pointer;
}
.vc-esp-faq-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid rgba(214, 179, 101, .28);
  background: rgba(214, 179, 101, .10);
  color: #e5c77f;
  font-size: 13px;
  font-weight: 900;
}
.vc-esp-faq-body {
  padding: 16px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 13px;
  line-height: 1.65;
  color: #b6b2a9;
}

@media (min-width: 640px) {
  .vc-esp-checks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-esp-cta-row { flex-direction: row; }
  .vc-esp-media-box { height: 350px; }
  .vc-esp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .vc-esp-sec-hero { padding: 56px 0 68px; }
  .vc-esp-hero-grid { grid-template-columns: 1.06fr 0.94fr; gap: 48px; }
  .vc-esp-video-card { grid-template-columns: 0.85fr 1.15fr; gap: 40px; }
  .vc-esp-video-frame { margin-left: auto; margin-right: 0; }
  .vc-esp-showcase-grid { grid-template-columns: 1.08fr 0.92fr; gap: 36px; }
  .vc-esp-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* /guias: never clip header or h1 inside lg:h-svh */
body:has(.tab-header-reveal) main {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  padding-top: 96px !important;
  padding-bottom: 56px !important;
}

/* Checkout / Planos (/checkout) — Seamless unified canvas edge-to-edge */
html:has(.planos-cards-reveal) {
  background: #090a0b !important;
}
body:has(.planos-cards-reveal) > div.relative.flex.min-h-screen,
html body:has(.planos-cards-reveal) main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
body:has(.planos-cards-reveal) .golden-curtain-stage,
body:has(.planos-cards-reveal) .golden-curtain-bloom {
  display: none !important;
}
body:has(.planos-cards-reveal) [class*="bg-[#06070A]"] {
  background: #090a0b !important;
  color: #f4f3ef !important;
}
body:has(.planos-cards-reveal) .relative.flex.min-h-screen.flex-col {
  justify-content: flex-start !important;
}
body:has(.planos-cards-reveal) .planos-cards-reveal > div > div:first-child {
  background: #111214 !important;
  border-color: rgba(208, 170, 94, .22) !important;
}
body:has(.planos-cards-reveal) .planos-cards-reveal button.group {
  color: #f4f3ef !important;
  background: linear-gradient(145deg, #161618, #111214) !important;
  border-color: rgba(208, 170, 94, .22) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34) !important;
}
body:has(.planos-cards-reveal) .planos-cards-reveal button.group:hover {
  background: #1b1a16 !important;
  border-color: rgba(214, 179, 101, .52) !important;
}
body:has(.planos-cards-reveal) .planos-cards-reveal button.group[class*="border-amber-400/85"] {
  background: linear-gradient(145deg, #211c12, #121316) !important;
  border-color: #d6b365 !important;
  box-shadow: 0 0 0 1px rgba(214, 179, 101, .28), 0 16px 38px rgba(0, 0, 0, .48) !important;
}
body:has(.planos-cards-reveal) .planos-cards-reveal button.group [class*="text-[#FFB800]"] {
  color: #e8cb86 !important;
}
body:has(.planos-cards-reveal) .planos-cards-reveal button.group [class*="text-emerald"] {
  color: #6ee7b7 !important;
}
body:has(.planos-cards-reveal) .planos-cards-reveal aside {
  color: #f4f3ef !important;
  background: #111214 !important;
  border: 1px solid rgba(208, 170, 94, .22) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .44) !important;
}
body:has(.planos-cards-reveal) [class*="0A0D14"],
body:has(.planos-cards-reveal) [class*="0B0D13"]:not(h1):not(span) {
  color: #f4f3ef !important;
  background-color: #111214 !important;
  border-color: rgba(208, 170, 94, .22) !important;
}

/* Footer */
body:not(:has(.cockpit-container)) footer {
  color: #f4f3ef !important;
  background: #0d0e10 !important;
  border-top: 1px solid rgba(208, 170, 94, .18) !important;
}
body:not(:has(.cockpit-container)) footer h3 { color: #f4f3ef !important; }
body:not(:has(.cockpit-container)) footer a { color: #b6b2a9 !important; }
body:not(:has(.cockpit-container)) footer a:hover { color: #e5c77f !important; }

/* Hide legacy holiday overlays */
#holiday-snow-canvas, #gift-confetti-canvas, .bg-soldier-art, .holiday-garland, .garland-bulb {
  display: none !important;
}

/* ==========================================================================
   CLIENT COCKPIT (/dashboard) — Unified Header & Obsidian-Gold cockpit
   ========================================================================== */
body:has(.cockpit-container) {
  --vc-canvas: #090a0b;
  --vc-surface: #111214;
  --vc-surface-soft: #17181a;
  --vc-ink: #f4f3ef;
  --vc-muted: #a4a39e;
  --vc-line: rgba(232, 220, 187, .16);
  --vc-amber: #d0aa5e;
  --vc-amber-deep: #e2c47f;
  background: #090a0b !important;
  color: #f4f3ef !important;
  color-scheme: dark;
}
body:has(.cockpit-container) .festive-top-bar,
body:has(.cockpit-container) .golden-curtain-stage,
body:has(.cockpit-container) #holiday-garland-wrap {
  display: none !important;
}
body:has(.cockpit-container) header.vc-dash-header {
  position: relative;
  z-index: 40;
  width: 100%;
  height: 60px;
  color: #f4f3ef !important;
  background: rgba(11, 12, 14, .95) !important;
  border-bottom: 1px solid rgba(208, 170, 94, .20) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
body:has(.cockpit-container) .vc-dash-header-inner {
  width: min(100%, 1400px);
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body:has(.cockpit-container) .vc-dash-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
body:has(.cockpit-container) .vc-dash-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transform: translateY(-3.5px);
  filter: drop-shadow(0 4px 8px rgba(214, 179, 101, .22));
}
body:has(.cockpit-container) .vc-dash-wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #f4f3ef;
}
body:has(.cockpit-container) .vc-dash-wordmark span {
  color: #e5c77f;
}
body:has(.cockpit-container) .vc-dash-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
body:has(.cockpit-container) .vc-dash-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #e6e3da;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .18s, color .18s;
}
body:has(.cockpit-container) .vc-dash-nav-link:hover {
  color: #e5c77f;
  background: rgba(214, 179, 101, .10);
}
body:has(.cockpit-container) .vc-dash-prod-wrap {
  position: relative;
}
body:has(.cockpit-container) .vc-dash-dropdown {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  width: 390px;
  max-width: 92vw;
  transform: translateX(-50%);
  padding-top: 8px;
  z-index: 60;
}
body:has(.cockpit-container) .vc-dash-prod-wrap:hover .vc-dash-dropdown,
body:has(.cockpit-container) .vc-dash-prod-wrap.open .vc-dash-dropdown {
  display: block;
}
body:has(.cockpit-container) .vc-dash-dropdown-box {
  border-radius: 16px;
  border: 1px solid rgba(208, 170, 94, .26);
  background: rgba(14, 15, 18, .98);
  padding: 8px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .74);
  backdrop-filter: blur(18px);
}
body:has(.cockpit-container) .vc-dash-drop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9b968c;
}
body:has(.cockpit-container) .vc-dash-drop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(208, 170, 94, .12);
  background: #141518;
  text-decoration: none;
  transition: border-color .18s, background .18s;
  margin-bottom: 6px;
}
body:has(.cockpit-container) .vc-dash-drop-item:hover {
  background: #191a1e;
  border-color: rgba(214, 179, 101, .38);
}
body:has(.cockpit-container) .vc-dash-drop-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #f4f3ef;
}
body:has(.cockpit-container) .vc-dash-drop-sub {
  font-size: 11px;
  color: #9e998e;
  margin-top: 2px;
}
body:has(.cockpit-container) .vc-dash-drop-price {
  font-size: 12px;
  font-weight: 700;
  color: #e5c77f;
  white-space: nowrap;
}
body:has(.cockpit-container) .vc-dash-drop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(208, 170, 94, .16);
  padding: 8px 10px 2px;
  font-size: 11px;
  color: #9b968c;
}
body:has(.cockpit-container) .vc-dash-drop-foot a {
  color: #e5c77f;
  font-weight: 700;
  text-decoration: none;
}
body:has(.cockpit-container) .vc-dash-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
body:has(.cockpit-container) .vc-dash-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(208, 170, 94, .26);
  background: rgba(255, 255, 255, .05);
  color: #f4f3ef;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
body:has(.cockpit-container) .vc-dash-icon-btn:hover {
  color: #e5c77f;
  border-color: rgba(214, 179, 101, .55);
  background: rgba(214, 179, 101, .12);
}
@keyframes vcVipOrbitalSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes vcAvatarRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes vcBadgeSweep {
  0% { background-position: 180% 50%; }
  45%, 100% { background-position: -80% 50%; }
}
@keyframes vcAvatarGoldHalo {
  0%, 100% {
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, .62),
      inset 0 -3px 6px rgba(92, 56, 4, .58),
      0 0 0 2px rgba(214, 179, 101, .28),
      0 0 22px rgba(245, 166, 35, .34);
  }
  50% {
    box-shadow:
      inset 0 2px 4px rgba(255, 255, 255, .75),
      inset 0 -3px 6px rgba(92, 56, 4, .52),
      0 0 0 3px rgba(245, 214, 134, .46),
      0 0 34px rgba(245, 166, 35, .62);
  }
}
@keyframes vcOnlineBeacon {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .75), 0 0 10px rgba(16, 185, 129, .85); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0), 0 0 10px rgba(16, 185, 129, .85); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 10px rgba(16, 185, 129, .85); }
}
html:has(.cockpit-container) {
  background: #090a0b !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(214, 179, 101, .35) #090a0b !important;
}
html body:has(.cockpit-container) {
  background-color: #090a0b !important;
  background-image: none !important;
  position: relative !important;
}
html body:has(.cockpit-container)::before {
  content: "" !important;
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .74 !important;
  background-color: #090a0b !important;
  background-image:
    linear-gradient(90deg, rgba(9, 10, 11, .95) 0%, rgba(9, 10, 11, .84) 48%, rgba(9, 10, 11, .46) 78%, rgba(9, 10, 11, .40) 100%),
    linear-gradient(180deg, rgba(9, 10, 11, .30) 0%, rgba(9, 10, 11, .16) 14%, rgba(9, 10, 11, .28) 84%, #090a0b 100%),
    url('/section-pubg-dashboard.jpg?v=20261113p') !important;
  background-position: right top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
body:has(.cockpit-container) .vc-modern-edge {
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(214, 179, 101, .65) 50%, transparent 100%) !important;
  box-shadow: none !important;
}
body:has(.cockpit-container) .cockpit-container {
  background: transparent !important;
  height: calc(100vh - 68px) !important;
  max-height: calc(100vh - 68px) !important;
}
body:has(.cockpit-container) :is([class*="border-white"], [class*="ring-white"]) {
  border-color: rgba(214, 179, 101, .22) !important;
  --tw-ring-color: rgba(214, 179, 101, .24) !important;
}
body:has(.cockpit-container) [class*="bg-white"] {
  background-color: rgba(18, 19, 22, .88) !important;
}
body:has(.cockpit-container) .cockpit-sidebar {
  color: #f4f3ef !important;
  background: linear-gradient(155deg, rgba(20, 21, 24, .88), rgba(12, 13, 15, .92) 68%) !important;
  border-color: rgba(214, 179, 101, .20) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .52) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
/* Full Access VIP card: dual-beam liquid gold conic bezel, precision orbital avatar ring & metallic foil pass */
body:has(.cockpit-container) .avatar-solar-box {
  position: relative !important;
  overflow: hidden !important;
  padding: 16px 12px 14px !important;
  border-radius: 16px !important;
  border: 0 !important;
  background: rgba(214, 179, 101, .18) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .62), 0 0 32px rgba(214, 179, 101, .16) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
body:has(.cockpit-container) .avatar-solar-box:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .70), 0 0 40px rgba(229, 199, 127, .28) !important;
}
body:has(.cockpit-container) .avatar-solar-box::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 240% !important;
  height: 240% !important;
  background: conic-gradient(
    from 0deg,
    rgba(214, 179, 101, .08) 0deg 50deg,
    rgba(214, 179, 101, .34) 85deg,
    #fff4c8 112deg,
    #f5b025 134deg,
    rgba(214, 179, 101, .08) 168deg 230deg,
    rgba(214, 179, 101, .30) 265deg,
    #fff0b3 292deg,
    #d69d35 314deg,
    rgba(214, 179, 101, .08) 352deg 360deg
  ) !important;
  animation: vcVipOrbitalSpin 4.6s linear infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body:has(.cockpit-container) .avatar-solar-box::after {
  content: "" !important;
  position: absolute !important;
  inset: 1.75px !important;
  border-radius: 14.25px !important;
  background-color: #0d0e12 !important;
  background-image:
    radial-gradient(120% 80% at 50% -6%, rgba(229, 199, 127, .24) 0%, rgba(28, 24, 15, .86) 46%, rgba(12, 13, 17, .98) 100%),
    radial-gradient(rgba(229, 199, 127, .12) 1px, transparent 1px) !important;
  background-size: 100% 100%, 14px 14px !important;
  background-position: center, 0 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 229, 165, .18), inset 0 -12px 24px rgba(0, 0, 0, .45) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
body:has(.cockpit-container) .avatar-solar-box > * {
  position: relative !important;
  z-index: 2 !important;
}
body:has(.cockpit-container) .solar-avatar-disc {
  color: #161006 !important;
  background: linear-gradient(145deg, #fff2bf 0%, #f5c256 42%, #c98e27 78%, #8f5f10 100%) !important;
  border: 2px solid rgba(255, 241, 188, .82) !important;
  animation: vcAvatarGoldHalo 3.2s ease-in-out infinite !important;
  text-shadow: 0 1px 0 rgba(255, 244, 200, .45) !important;
}
body:has(.cockpit-container) .solar-avatar-disc::before {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: 50% !important;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 45deg,
    rgba(253, 230, 138, .85) 80deg 115deg,
    transparent 145deg 225deg,
    rgba(214, 179, 101, .75) 260deg 295deg,
    transparent 325deg 360deg
  ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.2px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.2px)) !important;
  animation: vcAvatarRingSpin 6.5s linear infinite !important;
  z-index: -1 !important;
}
body:has(.cockpit-container) .solar-beacon-online {
  border: 2px solid #0e0f12 !important;
  background: #10b981 !important;
  animation: vcOnlineBeacon 2.2s cubic-bezier(0.24, 0, 0.38, 1) infinite !important;
}
body:has(.cockpit-container) .badge-full-access {
  color: #fff2c6 !important;
  background: linear-gradient(112deg, #17130c 12%, #2c2212 36%, rgba(248, 214, 130, .58) 50%, #2c2212 64%, #17130c 88%) !important;
  background-size: 230% 100% !important;
  animation: vcBadgeSweep 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  border: 1px solid rgba(235, 200, 122, .62) !important;
  box-shadow: 0 4px 18px rgba(214, 179, 101, .24), inset 0 1px 0 rgba(255, 236, 178, .22) !important;
  letter-spacing: 0.55px !important;
}
body:has(.cockpit-container) .user-profile-name,
body:has(.cockpit-container) .stage-title,
body:has(.cockpit-container) .section-headline,
body:has(.cockpit-container) .section-headline span,
body:has(.cockpit-container) .pane-card-title { color: #f4f3ef !important; }
body:has(.cockpit-container) .user-profile-email,
body:has(.cockpit-container) .cred-label,
body:has(.cockpit-container) .pane-card-sub,
body:has(.cockpit-container) .product-tile-meta { color: #a4a39e !important; }
body:has(.cockpit-container) .nav-menu-btn { color: #c0bfb9 !important; }
body:has(.cockpit-container) .nav-menu-btn:hover { color: #f4f3ef !important; background: rgba(255, 255, 255, .06) !important; }
body:has(.cockpit-container) .nav-menu-btn.active {
  color: #f5e4bd !important;
  background: rgba(208, 170, 94, .14) !important;
  box-shadow: inset 3px 0 0 #d0aa5e !important;
}
body:has(.cockpit-container) .nav-menu-btn.active .nav-menu-btn-icon { color: #e2c47f !important; }
body:has(.cockpit-container) .nav-menu-pill-count,
body:has(.cockpit-container) .festive-tag-pill {
  color: #edd9ab !important;
  background: rgba(208, 170, 94, .12) !important;
  border-color: rgba(208, 170, 94, .28) !important;
}
body:has(.cockpit-container) .btn-discord-pill,
body:has(.cockpit-container) .stat-pill,
body:has(.cockpit-container) .credential-slim-bar {
  color: #e9e8e3 !important;
  background: rgba(18, 19, 22, .84) !important;
  border-color: rgba(232, 220, 187, .16) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(12px) !important;
}
body:has(.cockpit-container) .cred-email-badge {
  color: #f4f3ef !important;
  background: rgba(26, 27, 31, .92) !important;
  border-color: rgba(232, 220, 187, .16) !important;
}
body:has(.cockpit-container) .btn-copy-gold {
  color: #15130e !important;
  background: linear-gradient(110deg, #e0c27a, #c8a04a) !important;
  box-shadow: 0 6px 16px rgba(198, 151, 55, .15) !important;
}
body:has(.cockpit-container) .product-compact-tile,
body:has(.cockpit-container) .quick-action-tile,
body:has(.cockpit-container) .pane-card,
body:has(.cockpit-container) .step-card,
body:has(.cockpit-container) .order-row-item {
  color: #f4f3ef !important;
  background: linear-gradient(150deg, rgba(21, 22, 25, .86), rgba(14, 15, 18, .92)) !important;
  border-color: rgba(232, 220, 187, .18) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(12px) !important;
}
body:has(.cockpit-container) .product-tile-name { color: #f7f6f1 !important; }
body:has(.cockpit-container) .product-real-thumb {
  width: 82px !important;
  height: 82px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid rgba(208, 170, 94, .48) !important;
  background: #090a0b !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .32) !important;
}
body:has(.cockpit-container) .order-row-item .product-real-thumb {
  width: 42px !important;
  height: 42px !important;
  border-radius: 9px !important;
}
body:has(.cockpit-container) #pane-hwid .pane-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 22px 24px !important;
}
body:has(.cockpit-container) #pane-hwid .pane-card > div[style*="max-width"] {
  width: 100% !important;
  max-width: 660px !important;
  margin: 14px auto 4px !important;
}
body:has(.cockpit-container) #pane-hwid .btn-hwid-execute {
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 11px 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
body:has(.cockpit-container) .badge-status-active {
  color: #e7cf9d !important;
  background: rgba(208, 170, 94, .12) !important;
  border-color: rgba(208, 170, 94, .24) !important;
}
body:has(.cockpit-container) .btn-tile-download {
  color: #17140d !important;
  background: linear-gradient(110deg, #e0c27a, #c8a04a) !important;
  border: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 8px 14px !important;
}
body:has(.cockpit-container) .footer-telemetry-bar {
  color: #a4a39e !important;
  background: rgba(15, 16, 19, .86) !important;
  border-color: rgba(232, 220, 187, .14) !important;
  backdrop-filter: blur(12px) !important;
}
body:has(.cockpit-container) .tele-val { color: #f4f3ef !important; }
body:has(.cockpit-container) footer {
  color: #f4f3ef !important;
  background: #0d0e10 !important;
  border-top: 1px solid rgba(208, 170, 94, .18) !important;
}
body:has(.cockpit-container) footer h3 { color: #f4f3ef !important; }
body:has(.cockpit-container) footer a { color: #b6b2a9 !important; }
body:has(.cockpit-container) footer a:hover { color: #e5c77f !important; }

body:has(.cockpit-container) .bg-soldier-art {
  display: none !important;
}
@media (max-width: 900px) {
  html:has(.cockpit-container),
  html body:has(.cockpit-container) {
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body:has(.cockpit-container)::before {
    background-position: center top !important;
    opacity: .34 !important;
  }
  body:has(.cockpit-container) .cockpit-container,
  body:has(.cockpit-container) .cockpit-main-stage,
  body:has(.cockpit-container) .tab-panel-container {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body:has(.cockpit-container) .cockpit-container {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 14px 12px 44px !important;
    gap: 14px !important;
  }
  body:has(.cockpit-container) .cockpit-sidebar {
    height: auto !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }
  body:has(.cockpit-container) .sidebar-nav-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 10px !important;
    overflow: visible !important;
  }
  body:has(.cockpit-container) .nav-menu-btn {
    width: 100% !important;
    min-height: 38px !important;
    padding: 6px 9px !important;
    font-size: 11.5px !important;
  }
  body:has(.cockpit-container) .nav-menu-btn-content {
    min-width: 0 !important;
    gap: 6px !important;
  }
  body:has(.cockpit-container) .nav-menu-btn-content span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body:has(.cockpit-container) .sidebar-discord-box {
    margin-top: 10px !important;
  }
}
@media (max-width: 767px) {
  body:has(.cockpit-container) .vc-dash-nav { display: none !important; }
  body:has(.cockpit-container) .vc-dash-header-inner {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  body:has(.cockpit-container) .vc-dash-wordmark { font-size: 16px !important; }
  body:has(.cockpit-container) .vc-dash-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  body:has(.cockpit-container) .nav-user-pill {
    white-space: nowrap !important;
    padding: 4px 10px 4px 5px !important;
    font-size: 11.5px !important;
    gap: 6px !important;
  }
  body:has(.cockpit-container) .main-stage-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  body:has(.cockpit-container) .stage-quick-stats {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body:has(.cockpit-container) .credential-slim-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  body:has(.cockpit-container) .products-compact-grid,
  body:has(.cockpit-container) .quick-actions-row,
  body:has(.cockpit-container) .steps-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  body:has(.cockpit-container) .product-compact-tile {
    padding: 12px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  body:has(.cockpit-container) .product-tile-right {
    margin-left: auto !important;
    gap: 8px !important;
  }
  body:has(.cockpit-container) .footer-telemetry-bar,
  body:has(.cockpit-container) .order-row-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  body:has(.cockpit-container) #pane-hwid .pane-card {
    padding: 16px 14px !important;
  }
  body:has(.cockpit-container) #pane-hwid .btn-hwid-execute {
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: 11.5px !important;
    padding: 10px 14px !important;
  }
}
@media (max-width: 639px) {
  body:has(.cockpit-container) .product-real-thumb { width: 68px !important; height: 68px !important; }
}

/* /esp-pubg varied lower sections (seamless edge dissolve between Pochinki, Tactical Hills & Hangar) */
html body:not(:has(.cockpit-container)) .vc-esp-page > .vc-esp-sec:nth-of-type(3) {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .38) 26%, rgba(9, 10, 11, .38) 74%, #090a0b 100%),
    linear-gradient(90deg, #090a0b 0%, rgba(9, 10, 11, .16) 16%, rgba(9, 10, 11, .16) 84%, #090a0b 100%),
    url('/section-backdrop-tactical.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:not(:has(.cockpit-container)) .vc-esp-page > .vc-esp-sec:nth-of-type(6) {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .46) 24%, rgba(9, 10, 11, .52) 76%, #090a0b 100%),
    linear-gradient(90deg, #090a0b 0%, rgba(9, 10, 11, .16) 16%, rgba(9, 10, 11, .16) 84%, #090a0b 100%),
    url('/section-pubg-hangar.jpg?v=20261113n') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
/* /macro-para-pubg Hero & Showcase: Clean open-bleed atmospheric backdrops & precision obsidian media bezels */
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section {
  position: relative !important;
  overflow: hidden !important;
  border-bottom-color: rgba(214, 179, 101, .08) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:not(:first-of-type) {
  padding-top: clamp(52px, 5.6vw, 78px) !important;
  padding-bottom: clamp(52px, 5.6vw, 78px) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:first-of-type {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, rgba(9, 10, 11, .34) 0%, rgba(9, 10, 11, .44) 64%, #090a0b 100%),
    linear-gradient(90deg, #090a0b 0%, rgba(9, 10, 11, .18) 18%, rgba(9, 10, 11, .18) 82%, #090a0b 100%),
    url('/section-pubg-armory.jpg?v=20261113aj') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:first-of-type button.rounded-2xl {
  background: rgba(16, 18, 23, .88) !important;
  border: 1px solid rgba(208, 170, 94, .22) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .44) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:first-of-type button.rounded-2xl:hover {
  background: rgba(26, 29, 36, .94) !important;
  border-color: rgba(229, 199, 127, .52) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:first-of-type button.rounded-2xl[class*="border-[#F5B025]"] {
  background: linear-gradient(145deg, rgba(35, 29, 18, .94), rgba(16, 17, 21, .96)) !important;
  border-color: rgba(214, 179, 101, .82) !important;
  box-shadow: 0 0 0 1px rgba(214, 179, 101, .22), 0 16px 34px rgba(0, 0, 0, .54) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:first-of-type a[href*="register"],
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos a[href*="register"] {
  color: #f4f3ef !important;
  background: rgba(18, 20, 26, .90) !important;
  border: 1px solid rgba(208, 170, 94, .30) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .40) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:first-of-type a[href*="register"]:hover,
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos a[href*="register"]:hover {
  border-color: rgba(229, 199, 127, .65) !important;
  background: rgba(214, 179, 101, .14) !important;
}

/* Open editorial flow — no giant section wrapper boxes or square corner brackets */
html body:not(:has(.cockpit-container)):has(#comparativo) :is(#comparativo, #deteccao-ultrarrapida, #rapid-fire, #fastloot) > div,
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos > div,
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos > div > div {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Never let fast programmatic/wheel scrolling leave scroll-reveal sections stuck at opacity:0 */
html body:not(:has(.cockpit-container)):has(#comparativo) :is(#recursos > div > div, #fastloot > div, :is(main, div.min-h-screen) > section:nth-of-type(7) > div) {
  opacity: 1 !important;
  transform: none !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(#comparativo, #deteccao-ultrarrapida, #recursos, #rapid-fire, #fastloot) :is(h2, h3) {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .75) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(#comparativo, #deteccao-ultrarrapida, #recursos, #rapid-fire, #fastloot) p {
  color: #ccc7bc !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .65) !important;
}

/* Toggle pills (#comparativo & #recursos) */
html body:not(:has(.cockpit-container)):has(#comparativo) :is(#comparativo, #recursos) div.inline-flex,
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos div.grid.rounded-2xl {
  background: rgba(11, 13, 18, .88) !important;
  border: 1px solid rgba(214, 179, 101, .24) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(#comparativo, #recursos) div.inline-flex button:not([class*="from-[#FFB800]"]),
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos div.grid.rounded-2xl button:not([class*="from-[#FFB800]"]) {
  color: #b6b2a9 !important;
  background: transparent !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(#comparativo, #recursos) div.inline-flex button:not([class*="from-[#FFB800]"]):hover,
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos div.grid.rounded-2xl button:not([class*="from-[#FFB800]"]):hover {
  color: #f4f3ef !important;
  background: rgba(214, 179, 101, .12) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(#comparativo, #recursos) button[class*="from-[#FFB800]"] {
  color: #15120b !important;
  background: linear-gradient(110deg, #e5c77f, #bd9142) !important;
  box-shadow: 0 6px 16px rgba(214, 179, 101, .26) !important;
}

/* Precision thin-rim obsidian frames strictly around video/mockup cards (concentric 20px / 17px radii) */
html body:not(:has(.cockpit-container)):has(#comparativo) :is(section:first-of-type, #deteccao-ultrarrapida, #recursos, #rapid-fire, #fastloot) div.rounded-3xl {
  padding: 3px !important;
  border-radius: 20px !important;
  background: linear-gradient(150deg, rgba(229, 199, 127, .24) 0%, rgba(28, 31, 40, .92) 32%, rgba(12, 14, 18, .98) 100%) !important;
  border: 1px solid rgba(214, 179, 101, .26) !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .74), 0 0 0 1px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 224, 155, .14) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(section:first-of-type, #deteccao-ultrarrapida, #recursos, #rapid-fire, #fastloot) div.rounded-3xl > div.rounded-2xl,
html body:not(:has(.cockpit-container)):has(#comparativo) :is(#deteccao-ultrarrapida, #rapid-fire) div.rounded-3xl > div.aspect-video {
  border-radius: 17px !important;
  overflow: hidden !important;
}

/* #comparativo flagship side-by-side comparison cards */
html body:not(:has(.cockpit-container)):has(#comparativo) #comparativo article {
  border-radius: 18px !important;
  background: rgba(11, 13, 17, .92) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) #comparativo article:first-of-type > div:first-child {
  background: rgba(255, 255, 255, .025) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) #comparativo article:first-of-type > div:first-child > span:last-child {
  background: rgba(255, 255, 255, .05) !important;
  color: #b6b2a9 !important;
  border-color: rgba(255, 255, 255, .10) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) #comparativo article:nth-of-type(2) {
  border-color: rgba(52, 211, 153, .34) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .74), 0 0 36px rgba(16, 185, 129, .10), inset 0 1px 0 rgba(110, 231, 183, .12) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) #comparativo article:nth-of-type(2) > div:first-child {
  background: rgba(16, 185, 129, .08) !important;
  border-bottom: 1px solid rgba(52, 211, 153, .18) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) #comparativo article:nth-of-type(2) span[class*="emerald"] {
  color: #6ee7b7 !important;
  background-color: rgba(16, 185, 129, .14) !important;
  border-color: rgba(52, 211, 153, .26) !important;
}

/* #recursos clean open layout — right column flows openly over dark command backdrop */
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos .tab-switch-fade {
  gap: clamp(24px, 3vw, 36px) !important;
  align-items: center !important;
}
@media (min-width: 1024px) {
  html body:not(:has(.cockpit-container)):has(#comparativo) #recursos .tab-switch-fade {
    grid-template-columns: 1.32fr 0.68fr !important;
  }
}
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos .tab-switch-fade > div:last-child {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Edge-to-edge full-bleed atmospheric tactical backdrops across ALL 8 sections of /macro-para-pubg */
html body:not(:has(.cockpit-container)):has(#comparativo) #comparativo {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .56) 20%, rgba(9, 10, 11, .60) 80%, #090a0b 100%),
    radial-gradient(ellipse 85% 65% at 50% 45%, rgba(9, 10, 11, .28) 0%, rgba(9, 10, 11, .72) 100%),
    url('/section-macro-range.jpg?v=20261113aj') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(3) {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .54) 22%, rgba(9, 10, 11, .60) 78%, #090a0b 100%),
    linear-gradient(90deg, rgba(9, 10, 11, .80) 0%, rgba(9, 10, 11, .48) 48%, rgba(9, 10, 11, .24) 100%),
    url('/section-backdrop-arsenal.jpg?v=20261113aj') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) #deteccao-ultrarrapida .luxury-card-hover {
  background: rgba(14, 16, 21, .78) !important;
  border: 1px solid rgba(214, 179, 101, .20) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) #recursos {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .50) 18%, rgba(9, 10, 11, .56) 82%, #090a0b 100%),
    radial-gradient(ellipse 75% 65% at 70% 55%, rgba(9, 10, 11, .72) 0%, rgba(9, 10, 11, .26) 100%),
    url('/section-macro-command.jpg?v=20261113aj') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) #rapid-fire {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .56) 20%, rgba(9, 10, 11, .62) 80%, #090a0b 100%),
    linear-gradient(90deg, rgba(9, 10, 11, .82) 0%, rgba(9, 10, 11, .46) 52%, rgba(9, 10, 11, .26) 100%),
    url('/hero-backdrop.jpg?v=20261113aj') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) #fastloot {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .56) 20%, rgba(9, 10, 11, .62) 80%, #090a0b 100%),
    linear-gradient(90deg, rgba(9, 10, 11, .24) 0%, rgba(9, 10, 11, .52) 48%, rgba(9, 10, 11, .84) 100%),
    url('/section-macro-range.jpg?v=20261113aj') !important;
  background-position: center bottom !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(7) {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .54) 20%, rgba(9, 10, 11, .60) 80%, #090a0b 100%),
    url('/section-macro-command.jpg?v=20261113aj') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(7) > div {
  max-width: 960px !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(7) div.rounded-3xl {
  border-radius: 20px !important;
  background: rgba(13, 15, 20, .86) !important;
  border: 1px solid rgba(214, 179, 101, .26) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 28px 68px rgba(0, 0, 0, .70), inset 0 1px 0 rgba(255, 224, 155, .10) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(7) div.rounded-3xl > div:first-child {
  background: linear-gradient(90deg, rgba(28, 30, 38, .96), rgba(18, 20, 26, .96)) !important;
  border-bottom: 1px solid rgba(214, 179, 101, .22) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(7) .divide-y > div {
  border-color: rgba(255, 255, 255, .07) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(7) .divide-y > div:nth-child(even) {
  background-color: rgba(255, 255, 255, .022) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(7) .divide-y > div:hover {
  background-color: rgba(214, 179, 101, .08) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(7) span[class*="bg-emerald-100"] {
  background-color: rgba(16, 185, 129, .20) !important;
  color: #34d399 !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(8) {
  background-color: #090a0b !important;
  background-image:
    linear-gradient(180deg, #090a0b 0%, rgba(9, 10, 11, .40) 20%, rgba(9, 10, 11, .56) 78%, #090a0b 100%),
    url('/section-pubg-hangar.jpg?v=20261113n') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(8) details.group {
  background: rgba(14, 16, 22, .84) !important;
  border: 1px solid rgba(214, 179, 101, .20) !important;
  backdrop-filter: blur(10px) !important;
}
html body:not(:has(.cockpit-container)):has(#comparativo) :is(main, div.min-h-screen) > section:nth-of-type(8) details.group[open] {
  border-color: rgba(214, 179, 101, .44) !important;
}
@media (max-width: 639px) {
  html body:not(:has(.cockpit-container)):has(#comparativo) :is(section:first-of-type, #deteccao-ultrarrapida, #recursos, #rapid-fire, #fastloot) div.rounded-3xl {
    border-radius: 16px !important;
  }
  html body:not(:has(.cockpit-container)):has(#comparativo) :is(section:first-of-type, #deteccao-ultrarrapida, #recursos, #rapid-fire, #fastloot) div.rounded-3xl > div.rounded-2xl,
  html body:not(:has(.cockpit-container)):has(#comparativo) :is(#deteccao-ultrarrapida, #rapid-fire) div.rounded-3xl > div.aspect-video {
    border-radius: 13px !important;
  }
}

/* ===========================
   VIPCLICK CHRISTMAS HEADER SANTA
   =========================== */
#vc-santa-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none !important;
  user-select: none !important;
  overflow: hidden;
}

#vc-santa-sky[hidden] {
  display: none !important;
}

.vc-santa-rig {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  pointer-events: none !important;
  will-change: transform, opacity;
  opacity: 0;
  transform: translate3d(-140px, 8px, 0);
}

.vc-santa-sprite {
  width: 100%;
  transform-origin: center center;
  will-change: transform;
}

.vc-santa-media {
  display: block;
  width: 100%;
  height: auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.vc-santa-spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  pointer-events: none !important;
  background: radial-gradient(circle, #fff8d6 0%, #f5b83d 55%, rgba(245, 184, 61, 0) 100%);
  box-shadow: 0 0 6px rgba(245, 184, 61, .68);
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  .vc-santa-rig {
    width: 82px;
  }

  .vc-santa-spark {
    width: 2.5px;
    height: 2.5px;
  }
}

/* ===========================
   REAL NEXT.JS CLIENT DASHBOARD (/dashboard .vip-shell)
   =========================== */
body:has(.vip-shell) main {
  min-height: calc(100vh - 60px) !important;
  padding-top: 86px !important;
  background-color: #090a0b !important;
  background-image:
    radial-gradient(ellipse 72% 56% at 50% 24%, rgba(214, 179, 101, .06) 0%, rgba(9, 10, 11, .78) 62%, #090a0b 100%),
    linear-gradient(180deg, rgba(9, 10, 11, .84) 0%, rgba(9, 10, 11, .94) 100%),
    url('/section-pubg-dashboard.jpg?v=20261113p') !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body:has(.vip-shell) .vip-member,
body:has(.vip-shell) .vip-member-special {
  background: linear-gradient(145deg, rgba(22, 23, 27, .96) 0%, rgba(12, 13, 16, .98) 100%) !important;
  background-image: linear-gradient(145deg, rgba(22, 23, 27, .96) 0%, rgba(12, 13, 16, .98) 100%) !important;
  border: 1px solid rgba(214, 179, 101, .30) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .52) !important;
  color: #f4f3ef !important;
}

body:has(.vip-shell) .vip-member button {
  background: rgba(255, 255, 255, .05) !important;
  background-image: none !important;
  border: 1px solid rgba(214, 179, 101, .26) !important;
  color: #f4f3ef !important;
}

body:has(.vip-shell) .vip-member button:hover {
  background: rgba(214, 179, 101, .14) !important;
  border-color: rgba(214, 179, 101, .55) !important;
  color: #f4f3ef !important;
}

body:has(.vip-shell) .vip-tabs {
  background: rgba(15, 16, 19, .95) !important;
  background-image: none !important;
  border: 1px solid rgba(214, 179, 101, .22) !important;
}

body:has(.vip-shell) .vip-tabs button:not([class*="from-[#FFB800]"]) {
  color: #b6b2a9 !important;
  background: transparent !important;
}

body:has(.vip-shell) .vip-tabs button:not([class*="from-[#FFB800]"]):hover {
  color: #f4f3ef !important;
  background: rgba(214, 179, 101, .10) !important;
}

body:has(.vip-shell) .vip-shell :is([class*="bg-white"], [class*="bg-[#F8FAFC]"], [class*="bg-slate-50"], [class*="bg-slate-100"]):not(button[class*="from-[#FFB800]"]):not(a[class*="from-[#FFB800]"]) {
  background-color: #121317 !important;
  background-image: none !important;
  border-color: rgba(208, 170, 94, .22) !important;
}

body:has(.vip-shell) .vip-shell :is([class*="from-amber-50"], [class*="from-emerald-50"], [class*="via-white"], .vip-license-card) {
  background: linear-gradient(135deg, rgba(214, 179, 101, .11) 0%, rgba(17, 18, 22, .97) 58%, rgba(13, 14, 17, .98) 100%) !important;
  background-image: linear-gradient(135deg, rgba(214, 179, 101, .11) 0%, rgba(17, 18, 22, .97) 58%, rgba(13, 14, 17, .98) 100%) !important;
  border-color: rgba(214, 179, 101, .34) !important;
  color: #f4f3ef !important;
}

body:has(.vip-shell) .vip-shell button[class*="from-amber-50"] span.bg-\[\#0F172A\],
body:has(.vip-shell) .vip-shell [role="button"][class*="from-amber-50"] span[class*="bg-[#0F172A]"] {
  background: linear-gradient(110deg, #e5c77f, #bd9142) !important;
  color: #15120b !important;
}

body:has(.vip-shell) .vip-shell :is([class*="text-[#B45309]"], [class*="text-[#D48806]"], [class*="text-amber-7"], [class*="text-amber-8"], [class*="text-amber-9"]):not(button[class*="from-[#FFB800]"] *):not(a[class*="from-[#FFB800]"] *) {
  color: #e5c77f !important;
}

body:has(.vip-shell) .vip-shell :is([class*="text-emerald-7"], [class*="text-emerald-6"]) {
  color: #34d399 !important;
}

body:has(.vip-shell) .vip-shell [class*="bg-amber-50"]:not([class*="from-amber-50"]):not(button),
body:has(.vip-shell) .vip-shell [class*="bg-amber-100"] {
  background-color: rgba(214, 179, 101, .14) !important;
  border-color: rgba(214, 179, 101, .32) !important;
  color: #f3d796 !important;
}

/* ==========================================================================
   MOBILE & NARROW-VIEWPORT RESPONSIVE POLISH (<= 1023px / 767px / 480px)
   Fixes right-edge clipping (<= 360px), mobile card centering & FAB clearance.
   Desktop (>= 1024px) & Client Cockpit (/dashboard) remain untouched.
   ========================================================================== */
@media (max-width: 1023px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* Prevent CSS Grid tracks from blowing out horizontally below viewport width */
  body:not(:has(.cockpit-container)) main,
  body:not(:has(.cockpit-container)) main section,
  body:not(:has(.cockpit-container)) main section > div,
  body:not(:has(.cockpit-container)) main .grid > *,
  body:not(:has(.cockpit-container)) main [class*="grid-cols"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* /duvidas: allow vertical growth, wrap category tabs, stop right-edge clipping */
  body:has(.tab-header-reveal) main {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding-top: 82px !important;
    padding-bottom: 84px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body:has(.tab-header-reveal) .tab-body-reveal,
  body:has(.tab-header-reveal) .tab-body-reveal > .grid,
  body:has(.tab-header-reveal) .tab-body-reveal > .grid > *,
  body:has(.tab-header-reveal) .tab-body-reveal aside,
  body:has(.tab-header-reveal) .tab-body-reveal nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:has(.tab-header-reveal) nav:is([aria-label*="dúvidas" i], [aria-label*="preguntas" i], [aria-label*="FAQ" i], [aria-label*="categories" i]) > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body:has(.tab-header-reveal) nav:is([aria-label*="dúvidas" i], [aria-label*="preguntas" i], [aria-label*="FAQ" i], [aria-label*="categories" i]) button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 9px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }

  body:has(.tab-header-reveal) nav:is([aria-label*="dúvidas" i], [aria-label*="preguntas" i], [aria-label*="FAQ" i], [aria-label*="categories" i]) button > span:first-child {
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  body:has(.tab-header-reveal) .tab-body-reveal button {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:has(.tab-header-reveal) .tab-body-reveal h2,
  body:has(.tab-header-reveal) .tab-body-reveal p,
  body:has(.tab-header-reveal) .tab-body-reveal span {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* /checkout: prevent plan rows, price & right aside from slicing off horizontally */
  body:has(.planos-cards-reveal) main {
    min-width: 0 !important;
    overflow-x: clip !important;
    padding-top: 76px !important;
    padding-bottom: 84px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal,
  body:has(.planos-cards-reveal) .planos-cards-reveal > *,
  body:has(.planos-cards-reveal) .planos-cards-reveal > div > div,
  body:has(.planos-cards-reveal) .planos-cards-reveal aside,
  body:has(.planos-cards-reveal) .planos-cards-reveal aside > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal button.group {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal button.group > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal button.group > div:first-child * {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal button.group > div:last-child {
    flex-shrink: 0 !important;
    text-align: right !important;
  }

  /* /macro-para-pubg: center hero copy, features & detail blocks on tablet/mobile */
  body:has(#comparativo) main > section:first-of-type .grid > div:last-child {
    align-items: center !important;
    text-align: center !important;
  }

  body:has(#comparativo) main > section:first-of-type .grid > div:last-child > div:first-child,
  body:has(#comparativo) main > section:first-of-type .grid > div:last-child > div:last-child {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  body:has(#comparativo) main > section:first-of-type .grid > div:last-child p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:has(#comparativo) #deteccao-ultrarrapida .grid > div:first-child,
  body:has(#comparativo) #recursos .tab-switch-fade > div:last-child,
  body:has(#comparativo) #fastloot .grid > div {
    text-align: center !important;
  }

  body:has(#comparativo) #deteccao-ultrarrapida .section-copy,
  body:has(#comparativo) #recursos .section-copy,
  body:has(#comparativo) #fastloot .section-copy {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:has(#comparativo) #recursos .tab-switch-fade > div:last-child > div,
  body:has(#comparativo) #fastloot .grid > div > div {
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  /* Home: center 'Por que VipClick' 01/02/03 benefit cards cleanly */
  body:has(#inicio) main section .sm\:grid-cols-3 article.luxury-card-hover {
    text-align: center !important;
    align-items: center !important;
    padding: 20px 18px !important;
  }

  body:has(#inicio) main section .sm\:grid-cols-3 article.luxury-card-hover > div:first-child {
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body:has(#inicio) main section .sm\:grid-cols-3 article.luxury-card-hover > div:first-child > span:last-child {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    padding: 3px 9px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(214, 179, 101, .28) !important;
    background: rgba(214, 179, 101, .10) !important;
    color: #e5c77f !important;
  }

  body:has(#inicio) main section .sm\:grid-cols-3 article.luxury-card-hover p,
  body:has(#inicio) main section .sm\:grid-cols-3 article.luxury-card-hover h3 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Home: guarantee centered mobile alignment inside catalog/spotlight cards */
  body:has(#inicio) main section:nth-of-type(2) article,
  body:has(#inicio) main section:nth-of-type(3) article {
    text-align: center !important;
  }

  /* /macro-para-pubg: prevent awkward line-break inside '#comparativo' status badge */
  body:has(#comparativo) #comparativo article > div:first-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }

  body:has(#comparativo) #comparativo article > div:first-child > span:last-child {
    font-size: 9.5px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
  }

  /* Footer: balanced centered mobile layout & generous bottom clearance above FABs */
  body:not(:has(.cockpit-container)) footer > div {
    padding-top: 38px !important;
    padding-bottom: 84px !important;
  }

  body:not(:has(.cockpit-container)) footer > div > div:first-child {
    gap: 28px !important;
    padding-bottom: 28px !important;
    text-align: center !important;
  }

  body:not(:has(.cockpit-container)) footer > div > div:first-child > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body:not(:has(.cockpit-container)) footer > div > div:first-child > div p {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body:not(:has(.cockpit-container)) footer > div > div:first-child > div > div {
    align-items: center !important;
  }

  body:not(:has(.cockpit-container)) footer > div > div:last-child {
    padding-right: 0 !important;
    padding-top: 20px !important;
    text-align: center !important;
    align-items: center !important;
  }
}

@media (max-width: 639px) {
  /* Sleeker mobile FABs so they don't swallow screen corner */
  body:not(:has(.cockpit-container)) div.fixed.bottom-3.right-3.z-50 {
    bottom: 10px !important;
    right: 10px !important;
    gap: 6px !important;
  }

  body:not(:has(.cockpit-container)) div.fixed.bottom-3.right-3.z-50 a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  body:not(:has(.cockpit-container)) div.fixed.bottom-3.right-3.z-50 a svg {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 480px) {
  /* Ultra-narrow viewports (~305px-420px): keep checkout aside & trust pills inside frame */
  body:has(.planos-cards-reveal) .planos-cards-reveal aside {
    padding: 14px 12px !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal aside > div:first-child,
  body:has(.planos-cards-reveal) .planos-cards-reveal aside .mb-1 {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal aside label {
    font-size: 8.5px !important;
    letter-spacing: 0.04em !important;
    white-space: normal !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal .grid-cols-3 {
    padding: 7px 5px !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal .grid-cols-3 > div {
    min-width: 0 !important;
    padding: 0 3px !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal .grid-cols-3 strong {
    font-size: 9px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  body:has(.planos-cards-reveal) .planos-cards-reveal .grid-cols-3 span {
    font-size: 7.5px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  /* /duvidas ultra-narrow: wrap 1-column category pills cleanly if < 340px */
  body:has(.tab-header-reveal) nav:is([aria-label*="dúvidas" i], [aria-label*="preguntas" i], [aria-label*="FAQ" i], [aria-label*="categories" i]) button {
    padding: 7px 8px !important;
    font-size: 10.5px !important;
  }
}

/* ==========================================================================
   SEO HUB, INTERACTIVE TOOLS (/ferramentas), GUIDES & MULTILINGUAL (/es, /en)
   ========================================================================== */
.vc-growth-page,
.vc-growth-page *,
.vc-growth-page *::before,
.vc-growth-page *::after {
  box-sizing: border-box;
}
.vc-growth-page {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: #090a0b;
  color: #f4f3ef;
  font-family: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}
.vc-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.vc-growth-main {
  padding: 88px clamp(14px, 3vw, 32px) 64px;
  max-width: 1120px;
  margin: 0 auto;
}
.vc-growth-hero {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 30px;
}
.vc-kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 9999px;
  border: 1px solid rgba(214, 179, 101, .34);
  background: rgba(214, 179, 101, .09);
  color: #e5c77f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vc-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}
.vc-growth-hero h1 {
  margin: 14px 0 10px;
  font-family: 'Space Grotesk', 'Sora', sans-serif;
  font-size: clamp(26px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #f4f3ef;
}
.vc-growth-hero h1 span {
  background: linear-gradient(95deg, #f6dfa5 0%, #e5c77f 45%, #c79a42 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vc-growth-hero p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #b6b2a9;
  margin: 0 auto;
  max-width: 650px;
}
.vc-pulse-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 16px;
  margin: 18px auto 0;
  padding: 10px 16px;
  max-width: 720px;
  border-radius: 16px;
  border: 1px solid rgba(208, 170, 94, .20);
  background: rgba(17, 18, 22, .9);
  font-size: 12px;
  color: #cbd5e1;
}
.vc-pulse-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.vc-pulse-item strong {
  color: #e5c77f;
}
.vc-lang-pills {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
}
.vc-lang-pills a {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  color: #9ca3af;
  text-decoration: none;
  transition: all .16s ease;
}
.vc-lang-pills a.is-current,
.vc-lang-pills a:hover {
  background: linear-gradient(110deg, #e5c77f, #bd9142);
  color: #111214;
}

.vc-gold-btn,
.vc-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.vc-gold-btn {
  background: linear-gradient(110deg, #f3d796, #d0aa5e);
  color: #14110b !important;
  border: 1px solid rgba(255, 234, 178, .55);
  box-shadow: 0 10px 26px rgba(208, 170, 94, .26);
}
.vc-gold-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.vc-ghost-btn {
  background: rgba(255, 255, 255, .04);
  color: #f4f3ef !important;
  border: 1px solid rgba(208, 170, 94, .28);
}
.vc-ghost-btn:hover { border-color: rgba(229, 199, 127, .6); background: rgba(214, 179, 101, .10); }

/* Interactive Tools App (/ferramentas, /es/ferramentas, /en/tools) */
.vc-lab-shell {
  border-radius: 24px;
  border: 1px solid rgba(208, 170, 94, .24);
  background: linear-gradient(180deg, #131418 0%, #0e0f13 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
  padding: clamp(16px, 3vw, 28px);
}
.vc-lab-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: #0a0b0e;
  border: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 24px;
}
.vc-lab-tab {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all .18s ease;
}
.vc-lab-tab:hover { color: #f4f3ef; background: rgba(255, 255, 255, .04); }
.vc-lab-tab.is-active {
  background: linear-gradient(110deg, #e5c77f, #bd9142);
  color: #14110b;
  box-shadow: 0 6px 18px rgba(208, 170, 94, .26);
}
.vc-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
}
.vc-lab-box {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #0c0d11;
  padding: 18px;
  min-width: 0;
}
.vc-lab-box h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: #f4f3ef;
}
.vc-field {
  margin-bottom: 14px;
}
.vc-field label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #b6b2a9;
  margin-bottom: 6px;
}
.vc-field label strong { color: #e5c77f; }
.vc-input,
.vc-select {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(208, 170, 94, .24);
  background: #14161c;
  color: #f4f3ef;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 700;
  outline: none;
}
.vc-input:focus,
.vc-select:focus { border-color: #e5c77f; }
.vc-dpi-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.vc-dpi-pill {
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #14161c;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.vc-dpi-pill.is-active {
  border-color: #e5c77f;
  background: rgba(214, 179, 101, .16);
  color: #f5da99;
}
.vc-kpi-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.vc-kpi-mini {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(214, 179, 101, .22);
  background: rgba(214, 179, 101, .07);
  text-align: center;
}
.vc-kpi-mini span { display: block; font-size: 11px; color: #b6b2a9; font-weight: 700; }
.vc-kpi-mini strong { display: block; font-size: 20px; font-weight: 900; color: #e5c77f; margin-top: 2px; }
.vc-scope-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.vc-scope-cell {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: #13151b;
  padding: 10px 8px;
  text-align: center;
}
.vc-scope-cell span { display: block; font-size: 10.5px; color: #9ca3af; font-weight: 700; }
.vc-scope-cell strong { display: block; font-size: 16px; color: #f4f3ef; font-weight: 800; margin-top: 3px; }
.vc-lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* TTK Comparator & Spray Canvas */
.vc-ttk-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.vc-ttk-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.vc-ttk-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #0c0d11;
  padding: 16px;
}
.vc-ttk-card.is-best {
  border-color: rgba(52, 211, 153, .45);
  background: linear-gradient(155deg, rgba(16, 185, 129, .09), #0c0d11 65%);
}
.vc-ttk-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.vc-ttk-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #e5c77f;
}
.vc-ttk-top h4 { margin: 2px 0 0; font-size: 18px; font-weight: 900; color: #f4f3ef; }
.vc-ttk-val { text-align: right; }
.vc-ttk-val strong { display: block; font-size: 20px; font-weight: 900; color: #34d399; }
.vc-ttk-val span { font-size: 10.5px; color: #9ca3af; font-weight: 700; }
.vc-ttk-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.vc-ttk-metrics > div {
  border-radius: 10px;
  background: #13151b;
  padding: 8px 10px;
}
.vc-ttk-metrics span { display: block; font-size: 10.5px; color: #9ca3af; }
.vc-ttk-metrics strong { font-size: 14px; color: #f4f3ef; }
.vc-spray-box {
  border-radius: 16px;
  border: 1px solid rgba(214, 179, 101, .22);
  background: #0a0b0e;
  padding: 12px;
}
#vc-spray-canvas {
  display: block;
  width: 100%;
  height: 220px;
}

/* PC Readiness Checker */
.vc-pc-score {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(52, 211, 153, .35);
  background: rgba(16, 185, 129, .08);
  margin: 18px 0 14px;
}
.vc-pc-ring {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 2px solid #34d399;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vc-pc-ring strong { font-size: 20px; font-weight: 900; color: #34d399; line-height: 1; }
.vc-pc-ring span { font-size: 9px; font-weight: 800; color: #a7f3d0; letter-spacing: 0.08em; }
.vc-pc-score h4 { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: #f4f3ef; }
.vc-pc-score p { margin: 0; font-size: 12.5px; color: #cbd5e1; }
.vc-pc-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.vc-pc-specs > div {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #12141a;
  padding: 12px;
  min-width: 0;
}
.vc-pc-specs span { display: block; font-size: 10.5px; color: #9ca3af; font-weight: 700; }
.vc-pc-specs strong { display: block; font-size: 13px; color: #e5c77f; margin-top: 3px; overflow-wrap: anywhere; }
.vc-pc-cta-wrap { display: flex; flex-wrap: wrap; gap: 10px; }

/* SEO Bridge & Guide Articles */
.vc-seo-bridge-band {
  background: #090a0b;
  padding: 28px clamp(14px, 3vw, 32px) 44px;
}
.vc-seo-bridge {
  max-width: 1040px;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid rgba(214, 179, 101, .28);
  background: linear-gradient(135deg, rgba(214, 179, 101, .10), #111216 65%);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.vc-bridge-kicker {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e5c77f;
}
.vc-seo-bridge h3 { margin: 4px 0; font-size: 17px; font-weight: 800; color: #f4f3ef; }
.vc-seo-bridge p { margin: 0; font-size: 13px; color: #b6b2a9; max-width: 600px; }
.vc-bridge-links { display: flex; flex-wrap: wrap; gap: 10px; }

.vc-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.vc-guide-card {
  border-radius: 18px;
  border: 1px solid rgba(208, 170, 94, .22);
  background: #111216;
  padding: 20px;
  text-decoration: none;
  color: #f4f3ef;
  transition: transform .18s ease, border-color .18s ease;
}
.vc-guide-card:hover { transform: translateY(-2px); border-color: #e5c77f; }
.vc-guide-card span { font-size: 10.5px; font-weight: 800; color: #e5c77f; text-transform: uppercase; letter-spacing: 0.08em; }
.vc-guide-card h3 { margin: 6px 0 8px; font-size: 17px; font-weight: 800; color: #f4f3ef; }
.vc-guide-card p { margin: 0; font-size: 13px; color: #9ca3af; line-height: 1.55; }

.vc-article-card {
  border-radius: 22px;
  border: 1px solid rgba(208, 170, 94, .22);
  background: #111216;
  padding: clamp(18px, 3vw, 34px);
}
.vc-article-card h2 {
  margin: 24px 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: #e5c77f;
}
.vc-article-card p,
.vc-article-card li {
  font-size: 14.5px;
  line-height: 1.7;
  color: #cbd5e1;
}
.vc-article-card ul { padding-left: 20px; margin: 10px 0 16px; }
.vc-article-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 13px;
}
.vc-article-table th,
.vc-article-table td {
  border: 1px solid rgba(255, 255, 255, .10);
  padding: 10px 12px;
  text-align: left;
}
.vc-article-table th { background: rgba(214, 179, 101, .12); color: #e5c77f; }

.vc-intl-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.vc-intl-card {
  border-radius: 18px;
  border: 1px solid rgba(208, 170, 94, .22);
  background: #111216;
  padding: 20px;
}
.vc-intl-card h3 { margin: 8px 0 8px; font-size: 17px; font-weight: 800; color: #f4f3ef; }
.vc-intl-card p { margin: 0; font-size: 13px; line-height: 1.6; color: #9ca3af; }

.vc-lang-toast {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 48;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(214, 179, 101, .38);
  background: rgba(15, 16, 20, .95);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  font-size: 12px;
  font-weight: 700;
}
.vc-lang-toast a { color: #e5c77f; text-decoration: none; }
.vc-lang-toast button {
  background: transparent;
  border: 0;
  color: #9ca3af;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 900px) {
  .vc-lab-grid,
  .vc-ttk-cards,
  .vc-guide-grid,
  .vc-intl-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .vc-ttk-controls,
  .vc-pc-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .vc-lab-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
  .vc-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vc-ttk-controls,
  .vc-pc-specs,
  .vc-dpi-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vc-seo-bridge {
    flex-direction: column;
    text-align: center;
  }
  .vc-bridge-links,
  .vc-pc-cta-wrap,
  .vc-lab-actions {
    justify-content: center;
  }
  .vc-lang-toast {
    bottom: 62px;
    left: 10px;
    max-width: calc(100vw - 20px);
    font-size: 11px;
  }
}
@media (max-width: 440px) {
  .vc-growth-page .vc-site-header .vc-lang-pills { padding: 2px; gap: 2px; }
  .vc-growth-page .vc-site-header .vc-lang-pills a { padding: 3px 6px; font-size: 10px; }
  .vc-growth-page .vc-site-header img { width: 32px !important; height: 32px !important; }
  .vc-growth-hero h1 { font-size: 24px; }
}

/* ==========================================================================
   GLOBAL FULL-SITE LANGUAGE SWITCHER (.vc-lang-switcher) & VANILLA HOME UI
   ========================================================================== */
.vc-lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 60;
}
.vc-lang-desktop-pills {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid rgba(208, 170, 94, .26);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.vc-lang-pill {
  appearance: none;
  border: 0;
  background: transparent;
  color: #b6b2a9;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 9999px;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, transform .12s ease;
  white-space: nowrap;
}
.vc-lang-pill:hover {
  color: #f4f3ef;
  background: rgba(208, 170, 94, .14);
}
.vc-lang-pill.is-active,
.vc-lang-pill[aria-pressed="true"] {
  background: linear-gradient(110deg, #e5c77f, #bd9142);
  color: #111214 !important;
  box-shadow: 0 2px 10px rgba(214, 179, 101, .28);
}

.vc-lang-mobile-wrap {
  position: relative;
  display: none;
}
.vc-lang-mobile-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9999px;
  border: 1px solid rgba(208, 170, 94, .30);
  background: rgba(255, 255, 255, .05);
  color: #f4f3ef;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}
.vc-lang-mobile-btn svg {
  width: 12px;
  height: 12px;
  color: #d6b365;
  flex-shrink: 0;
}
.vc-lang-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 164px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(208, 170, 94, .34);
  background: rgba(15, 16, 20, .98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .65);
  backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  gap: 3px;
  z-index: 90;
}
.vc-lang-popover.is-open {
  display: flex;
}
.vc-lang-popover button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 9px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.vc-lang-popover button:hover {
  background: rgba(255, 255, 255, .06);
  color: #f4f3ef;
}
.vc-lang-popover button.is-active {
  background: rgba(214, 179, 101, .16);
  color: #e5c77f;
}
.vc-lang-drawer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(208, 170, 94, .22);
  background: rgba(255, 255, 255, .03);
}
.vc-lang-drawer-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b6b2a9;
}
.vc-lang-drawer-pills {
  display: inline-flex;
  gap: 4px;
}

@media (max-width: 639px) {
  .vc-lang-desktop-pills { display: none; }
  .vc-lang-mobile-wrap { display: inline-flex; }
}
@media (min-width: 640px) and (max-width: 720px) {
  .vc-lang-pill { padding: 5px 7px; font-size: 10.5px; }
}

/* Vanilla /es/ & /en/ Home Dropdown & Mobile Drawer */
.vc-home-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 300px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(208, 170, 94, .26);
  background: rgba(15, 16, 20, .98);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .62);
  backdrop-filter: blur(18px);
  z-index: 80;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.vc-home-dropdown.is-open {
  display: flex;
}
.vc-home-drop-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #f4f3ef;
  transition: background .15s ease;
}
.vc-home-drop-item:hover {
  background: rgba(214, 179, 101, .12);
}
.vc-home-drop-item strong {
  font-size: 13px;
  font-weight: 800;
  color: #f4f3ef;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vc-home-drop-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(214, 179, 101, .16);
  color: #e5c77f;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vc-home-drop-item span {
  font-size: 11.5px;
  color: #9ca3af;
}
.vc-home-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 68;
  background: rgba(5, 6, 8, .72);
  backdrop-filter: blur(6px);
  display: none;
}
.vc-home-drawer-backdrop.is-open {
  display: block;
}
.vc-home-drawer {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 69;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 16px;
  background: rgba(12, 13, 16, .98);
  border-bottom: 1px solid rgba(208, 170, 94, .24);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
  display: none;
  flex-direction: column;
  gap: 8px;
}
.vc-home-drawer.is-open {
  display: flex;
}
.vc-home-drawer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 12px;
  color: #f4f3ef;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
}
.vc-home-drawer a.is-primary {
  justify-content: center;
  background: linear-gradient(110deg, #f3d796, #d0aa5e);
  color: #14110b;
  border: 0;
  font-weight: 800;
}

/* =====================================================================
   OBSIDIAN & GOLD PROMO RIBBON + VAULT (Macro Detecção Vitalício R$ 400)
   ===================================================================== */
.vc-promo-ribbon {
  position: relative;
  z-index: 30;
  width: 100%;
  background: linear-gradient(90deg, #090a0b 0%, #17130a 50%, #090a0b 100%);
  border-bottom: 1px solid rgba(229, 199, 127, 0.34);
  box-shadow: 0 10px 28px rgba(9, 10, 11, 0.25);
  color: #f4f3ef;
}
.vc-pr-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 9px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.vc-pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(120deg, #ffb800, #d48806);
  color: #090a0b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vc-pr-copy {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #f4f3ef;
  line-height: 1.35;
  text-align: center;
}
.vc-pr-slots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(229, 199, 127, 0.12);
  border: 1px solid rgba(229, 199, 127, 0.4);
  color: #e5c77f;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.vc-pr-slots.is-sold-out {
  background: rgba(244, 63, 94, 0.14);
  border-color: rgba(244, 63, 94, 0.42);
  color: #fda4af;
}
.vc-pr-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  flex-shrink: 0;
}
.vc-pr-slots.is-sold-out .vc-pr-dot {
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
}
.vc-pr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(120deg, #f3d796, #d0aa5e);
  color: #14110b;
  font-size: 11.5px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(208, 170, 94, 0.3);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.vc-pr-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
}

.vc-promo-vault {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 80% 24%, rgba(255, 184, 0, 0.14), transparent 48%),
    linear-gradient(180deg, #090a0b 0%, #101114 50%, #090a0b 100%);
  border-top: 1px solid rgba(229, 199, 127, 0.28);
  border-bottom: 1px solid rgba(229, 199, 127, 0.28);
  padding: clamp(40px, 5vw, 64px) 16px;
  color: #f4f3ef;
}
.vc-pv-shell {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}
.vc-pv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(229, 199, 127, 0.36);
  background: rgba(229, 199, 127, 0.08);
  color: #e5c77f;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vc-pv-title {
  margin: 14px 0 0;
  font-family: var(--font-sora, "Sora", sans-serif);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.vc-pv-title-gold {
  background: linear-gradient(115deg, #ffe29a, #ffb800 55%, #d48806);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vc-pv-sub {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.62;
  color: #b6b2a9;
  max-width: 560px;
}
.vc-pv-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vc-pv-feat {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.vc-pv-feat strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #f4f3ef;
}
.vc-pv-feat span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #9b968c;
  line-height: 1.4;
}
.vc-pv-card {
  position: relative;
  border-radius: 24px;
  padding: 24px;
  background: radial-gradient(circle at 85% 0%, rgba(255, 184, 0, 0.14), transparent 52%), linear-gradient(155deg, #1a160d 0%, #101114 52%, #090a0d 100%);
  border: 1px solid rgba(255, 184, 0, 0.52);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255, 184, 0, 0.14), inset 0 1px 0 rgba(255, 224, 130, 0.24);
  overflow: hidden;
}
.vc-pv-card::before {
  content: "";
  position: absolute;
  inset: 0 16% auto 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 212, 102, 0.9), transparent);
  pointer-events: none;
}
.vc-pv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.vc-pv-tag {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e5c77f;
}
.vc-pv-price-row {
  margin-top: 16px;
}
.vc-pv-badge-price {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 184, 0, 0.34);
  background: rgba(255, 184, 0, 0.10);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f3d27d;
}
.vc-pv-price-flex {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.vc-pv-price {
  font-family: var(--font-sora, "Sora", sans-serif);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #ffb800;
  line-height: 1;
}
.vc-pv-unit {
  font-size: 12px;
  font-weight: 700;
  color: #c8c0ae;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vc-pv-meter {
  margin-top: 16px;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(229, 199, 127, 0.25);
}
.vc-pv-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #c8c0ae;
}
.vc-pv-meter-head strong {
  color: #ffb800;
  font-weight: 900;
}
.vc-pv-track {
  margin-top: 8px;
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.vc-pv-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb800, #e5c77f, #d48806);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.45);
  transition: width 0.5s ease;
}
.vc-pv-actions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vc-pv-actions .vc-gold-btn {
  width: 100%;
  text-align: center;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(120deg, #ffb800, #f5a623, #d48806);
  color: #090a0b;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(255, 184, 0, 0.28);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.vc-pv-actions .vc-gold-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.vc-pv-actions .vc-ghost-btn {
  width: 100%;
  text-align: center;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: #f4f3ef;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.vc-pv-actions .vc-ghost-btn:hover {
  border-color: rgba(229, 199, 127, 0.45);
  background: rgba(255, 255, 255, 0.06);
}
.vc-pv-foot {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #9b968c;
}
@media (max-width: 960px) {
  .vc-pv-shell {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (max-width: 640px) {
  .vc-pr-inner {
    padding: 8px 12px;
    gap: 6px 10px;
  }
  .vc-pr-copy {
    font-size: 11.5px;
  }
  .vc-pv-grid {
    grid-template-columns: 1fr;
  }
  .vc-pv-card {
    padding: 18px;
    border-radius: 20px;
  }
}

/* =====================================================================
   Promo Tier Button (/macro-para-pubg) & Header/Drawer Promo Cards
   Explicit colors/gradients independent of uncompiled Tailwind arbitrary classes
   ===================================================================== */
body:not(:has(.cockpit-container)) button.vc-macro-promo-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
  background: linear-gradient(125deg, #17130a 0%, #101113 54%, #090a0b 100%) !important;
  border: 1.5px solid rgba(214, 179, 101, 0.45) !important;
  color: #f4f3ef !important;
  box-shadow: 0 8px 22px rgba(10, 12, 16, 0.28) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body:not(:has(.cockpit-container)) button.vc-macro-promo-btn:hover {
  border-color: #ffb800 !important;
}
body:not(:has(.cockpit-container)) button.vc-macro-promo-btn.is-selected {
  background: linear-gradient(125deg, #211a0c 0%, #121318 52%, #090a0b 100%) !important;
  border-color: #ffb800 !important;
  box-shadow: 0 12px 30px rgba(212, 160, 52, 0.28), inset 0 1px 0 rgba(255, 218, 121, 0.22) !important;
}
body:not(:has(.cockpit-container)) .vc-macro-promo-radio {
  border-color: rgba(214, 179, 101, 0.5) !important;
  background: #18191d !important;
}
body:not(:has(.cockpit-container)) .vc-macro-promo-radio.is-selected {
  border-color: #ffb800 !important;
  background: linear-gradient(120deg, #ffb800, #d48806) !important;
  color: #090a0b !important;
}
body:not(:has(.cockpit-container)) .vc-macro-promo-radio.is-selected svg {
  color: #090a0b !important;
  stroke: #090a0b !important;
}
body:not(:has(.cockpit-container)) .vc-macro-promo-title {
  color: #ffffff !important;
}
body:not(:has(.cockpit-container)) .vc-macro-promo-pill {
  background: linear-gradient(120deg, #ffb800, #d48806) !important;
  color: #090a0b !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}
body:not(:has(.cockpit-container)) .vc-macro-promo-sub {
  color: #d6ceb8 !important;
}
body:not(:has(.cockpit-container)) .vc-macro-promo-tag {
  color: #e5c77f !important;
  letter-spacing: 0.12em !important;
}
body:not(:has(.cockpit-container)) .vc-macro-promo-old {
  color: #94a3b8 !important;
}
body:not(:has(.cockpit-container)) .vc-macro-promo-price {
  color: #ffb800 !important;
  text-shadow: 0 0 18px rgba(255, 184, 0, 0.22);
}

/* Desktop Produtos Dropdown Promo Card */
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .vc-prod-menu {
  min-width: 398px !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .vc-prod-menu a.vc-nav-promo-card {
  background: linear-gradient(125deg, #1d160b 0%, #13110c 52%, #0e0f12 100%) !important;
  border: 1px solid rgba(255, 184, 0, 0.55) !important;
  box-shadow: 0 6px 18px rgba(255, 184, 0, 0.16) !important;
  color: #f4f3ef !important;
}
body:not(:has(.cockpit-container)) :is(.vc-site-header, header.fixed.inset-x-0.top-0) nav .vc-prod-menu a.vc-nav-promo-card:hover {
  border-color: #ffb800 !important;
  background: linear-gradient(125deg, #241b0c 0%, #17140d 55%, #111216 100%) !important;
}
body:not(:has(.cockpit-container)) .vc-nav-promo-title {
  color: #f5db94 !important;
  white-space: nowrap !important;
}
body:not(:has(.cockpit-container)) a.vc-nav-promo-card:hover .vc-nav-promo-title {
  color: #ffb800 !important;
}
body:not(:has(.cockpit-container)) .vc-nav-promo-pill {
  background: linear-gradient(120deg, #ffb800, #d48806) !important;
  color: #090a0b !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
body:not(:has(.cockpit-container)) .vc-nav-promo-sub {
  color: #d1c7b2 !important;
}
body:not(:has(.cockpit-container)) .vc-nav-promo-price {
  color: #ffb800 !important;
}
body:not(:has(.cockpit-container)) .vc-nav-promo-arrow {
  color: #e5c77f !important;
}

/* Mobile Drawer Promo Card */
body:not(:has(.cockpit-container)) a.vc-drawer-promo-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  background: linear-gradient(125deg, #1c160b 0%, #111216 58%, #0b0c10 100%) !important;
  border: 1px solid rgba(255, 184, 0, 0.5) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  text-decoration: none !important;
}
body:not(:has(.cockpit-container)) .vc-drawer-promo-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
body:not(:has(.cockpit-container)) .vc-drawer-promo-title {
  color: #f7ecd0 !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
body:not(:has(.cockpit-container)) .vc-drawer-promo-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
body:not(:has(.cockpit-container)) .vc-drawer-promo-pill {
  background: linear-gradient(120deg, #ffb800, #d48806) !important;
  color: #090a0b !important;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.25;
}
body:not(:has(.cockpit-container)) .vc-drawer-promo-sub {
  color: #b8b0a0 !important;
  font-size: 10.5px;
  font-weight: 600;
}
body:not(:has(.cockpit-container)) .vc-drawer-promo-price {
  color: #ffb800 !important;
  font-size: 13.5px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}