/* ═══════════════════════════════════════════════════════════════════════════
   rk.css — Blackrack unified identity layer (2026-08-14)

   Purpose: make every page read as the official identity introduced on
   index.html (commit 336a0b0): night #03090e / ivory #f2efeb / amber #d99a3d,
   Gambarino display, Space Mono, flat surfaces, subtle 1px edges, no glass,
   no glow, no gradient buttons, no cyber grid.

   Load order (matches index.html): inline page CSS → theme.css → premium.css
   → THIS SHEET LAST. Re-pins carry !important so they win regardless of
   source order, exactly like index.html's #rk-theme-overrides block.

   Pages with their own rk-* styles (index.html) already implement the system
   natively; the re-pin section below is harmless there (same values).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Brand tokens, dark + light ─────────────────────────────────────── */

:root, html[data-theme="dark"]{
  --rk-night:  #03090e;
  --rk-surf1:  #071219;
  --rk-surf2:  #0b1a24;
  --rk-surf3:  #0f212c;
  --rk-ink:    #f2efeb;
  --rk-ink-80: rgba(242,239,235,.82);
  --rk-ink-60: rgba(242,239,235,.60);
  --rk-ink-40: rgba(242,239,235,.48);
  --rk-ink-18: rgba(242,239,235,.16);
  --rk-ink-10: rgba(242,239,235,.09);
  --rk-amber:  #d99a3d;
  --rk-amber-ink: #d99a3d;
  --rk-amber-dim: rgba(217,154,61,.55);
  --rk-amber-14:  rgba(217,154,61,.16);
  --rk-green:  #5fa877;
  --rk-edge:    rgba(148,178,198,.16);
  --rk-edge-hi: rgba(217,154,61,.4);
  --rk-mono: "Space Mono", monospace;
  --rk-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --rk-display: "Gambarino", Georgia, serif;

  /* legacy token bridge: cyan pages keep their markup but resolve to brand */
  --bg:   #03090e !important;
  --bg2:  #071219 !important;
  --card: #0b1a24 !important;
  --surface: #0b1a24 !important;
  --ink:  #f2efeb !important;
  --text: #f2efeb !important;
  --text-muted: rgba(242,239,235,.62) !important;
  --muted: rgba(242,239,235,.62) !important;
  --dim:  rgba(242,239,235,.42) !important;
  --border: rgba(148,178,198,.16) !important;
  --bhi:  rgba(217,154,61,.42) !important;
  --border-hi: rgba(217,154,61,.5) !important;
  --accent: #d99a3d !important;
  --accent2: #d99a3d !important;
  --accent-hover: #c68c37 !important;
  --ok:   #5fa877 !important;
  --warn: #d9b23d !important;
  --err:  #d97a6a !important;
  --danger: #d97a6a !important;
  --shadow: none !important;
  --shadow-tight: none !important;
  --blue-wash: rgba(217,154,61,.14) !important;
  --br-control-border: rgba(148,178,198,.16) !important;
  --br-control-border-hover: rgba(217,154,61,.42) !important;
  --br-control-bg: rgba(217,154,61,.05) !important;
  --br-control-bg-hover: rgba(217,154,61,.10) !important;
  --br-control-bg-active: rgba(217,154,61,.16) !important;
  --br-control-text: rgba(242,239,235,.62) !important;
  --br-control-text-strong: #f2efeb !important;
  --br-focus-ring: 0 0 0 2px rgba(217,154,61,.45) !important;
}

html[data-theme="light"]{
  --rk-night:  #f2efeb;
  --rk-surf1:  #eae4da;
  --rk-surf2:  #e3dcd0;
  --rk-surf3:  #dcd3c3;
  --rk-ink:    #0d1219;
  --rk-ink-80: rgba(13,18,25,.84);
  --rk-ink-60: rgba(13,18,25,.64);
  --rk-ink-40: rgba(13,18,25,.65);
  --rk-ink-18: rgba(13,18,25,.16);
  --rk-ink-10: rgba(13,18,25,.08);
  --rk-amber:  #d99a3d;
  --rk-amber-ink: #a86f1f;
  --rk-amber-dim: rgba(168,111,31,.55);
  --rk-amber-14:  rgba(217,154,61,.14);
  --rk-green:  #3f7d55;
  --rk-edge:    rgba(13,18,25,.14);
  --rk-edge-hi: rgba(168,111,31,.4);

  --bg:   #f2efeb !important;
  --bg2:  #eae4da !important;
  --card: #e3dcd0 !important;
  --surface: #e3dcd0 !important;
  --ink:  #0d1219 !important;
  --text: #0d1219 !important;
  --text-muted: rgba(13,18,25,.64) !important;
  --muted: rgba(13,18,25,.64) !important;
  --dim:  rgba(13,18,25,.48) !important;
  --border: rgba(13,18,25,.14) !important;
  --bhi:  rgba(168,111,31,.42) !important;
  --border-hi: rgba(168,111,31,.5) !important;
  --accent: #a86f1f !important;
  --accent2: #a86f1f !important;
  --accent-hover: #8a5b18 !important;
  --ok:   #3f7d55 !important;
  --warn: #8a6d1f !important;
  --err:  #a85b4a !important;
  --danger: #a85b4a !important;
  --shadow: none !important;
  --shadow-tight: none !important;
  --blue-wash: rgba(168,111,31,.12) !important;
  --br-control-border: rgba(13,18,25,.14) !important;
  --br-control-border-hover: rgba(168,111,31,.42) !important;
  --br-control-bg: rgba(168,111,31,.06) !important;
  --br-control-bg-hover: rgba(168,111,31,.12) !important;
  --br-control-bg-active: rgba(168,111,31,.18) !important;
  --br-control-text: rgba(13,18,25,.64) !important;
  --br-control-text-strong: #0d1219 !important;
  --br-focus-ring: 0 0 0 2px rgba(168,111,31,.4) !important;
}

/* color-scheme hint for form controls in each theme */
:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }


/* ─── 2. Body base — always the brand surface ───────────────────────────── */

body{
  background: var(--rk-night) !important;
  color: var(--rk-ink) !important;
  font-family: var(--rk-sans) !important;
}


/* ─── 3. Shell / grid / atmosphere ──────────────────────────────────────── */

/* kill the fixed 44px cyber-grid + blue radial washes; leave one subtle
   amber radial near the top, like index's hero atmosphere */
.shell{ background: var(--rk-night) !important; }
.shell::before{
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: radial-gradient(ellipse 60% 46% at 72% 4%, rgba(217,154,61,.07), transparent 70%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* other fixed/grid pattern layers used on some pages */
.bg-grid::before, .bg-grid::after,
.hiw-grid::before, .hiw-grid::after{ background: none !important; display: none !important; }


/* ─── 4. Glass → flat brand surfaces ────────────────────────────────────── */

/* premium.css + inline glass cards: strip blur, white overlay, glow hover,
   lift/scale; flat plate with subtle inner top highlight, like .rk-plate */
.entry-card, .product-card, .price-card, .case-card, .faq-card, .cta-card,
.footer-card, .drawer-tools, .nav-drawer, .panel, .plan, .skill-card,
.hiw-card, .trust-item, .faq-item, .ranked-item, .comp-item, .hstep,
.form-panel, .doc-card, .doc-listing{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--rk-surf2) !important;
  border: 1px solid var(--rk-edge) !important;
  box-shadow: inset 0 1px 0 rgba(242,239,235,.055) !important;
  transform: none !important;
  transition: background-color .3s ease, border-color .3s ease !important;
}
html[data-theme="light"] .entry-card, html[data-theme="light"] .product-card,
html[data-theme="light"] .price-card, html[data-theme="light"] .case-card,
html[data-theme="light"] .faq-card, html[data-theme="light"] .cta-card,
html[data-theme="light"] .footer-card, html[data-theme="light"] .panel,
html[data-theme="light"] .plan, html[data-theme="light"] .skill-card,
html[data-theme="light"] .hiw-card, html[data-theme="light"] .trust-item,
html[data-theme="light"] .faq-item, html[data-theme="light"] .ranked-item,
html[data-theme="light"] .comp-item, html[data-theme="light"] .hstep,
html[data-theme="light"] .form-panel, html[data-theme="light"] .doc-card,
html[data-theme="light"] .doc-listing{
  background: var(--rk-surf2) !important;
  border: 1px solid var(--rk-edge) !important;
  box-shadow: none !important;
}
/* hover: edge brightens to amber, no lift, no scale */
.entry-card:hover, .product-card:hover, .price-card:hover, .case-card:hover,
.faq-card:hover, .cta-card:hover, .footer-card:hover, .panel:hover, .plan:hover,
.skill-card:hover, .hiw-card:hover, .trust-item:hover, .faq-item:hover,
.ranked-item:hover, .comp-item:hover, .hstep:hover, .form-panel:hover,
html[data-theme="light"] .entry-card:hover, html[data-theme="light"] .product-card:hover,
html[data-theme="light"] .price-card:hover, html[data-theme="light"] .case-card:hover,
html[data-theme="light"] .faq-card:hover, html[data-theme="light"] .cta-card:hover{
  background: var(--rk-surf3) !important;
  border-color: var(--rk-edge-hi) !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(242,239,235,.055) !important;
  filter: none !important;
}
/* plan feature rows keep a hairline separator */
.price-card__features, .plan ul, .plan ol{ border-top: 1px solid var(--rk-edge); }


/* ─── 5. Buttons — flat ink→amber system ────────────────────────────────── */

.btn, .btn--primary, .btn--ghost, .btn-submit, .btn-link--primary,
.btn-funnel, .btn-funnel-back, .btn-alt, .cta-primary, .cta-secondary,
.btn-whatsapp, .btn-link{
  font-family: var(--rk-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  filter: none !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
.btn.btn--primary,
html[data-theme="dark"] .btn--primary,
html[data-theme="light"] .btn--primary{
  background: var(--rk-ink) !important;
  color: var(--rk-night) !important;
  border: 1px solid var(--rk-ink) !important;
  transform: none !important;
}
.btn--primary:hover, .btn--primary:focus-visible{
  background: var(--rk-amber) !important;
  color: #03090e !important;
  border-color: var(--rk-amber) !important;
  box-shadow: none !important; transform: none !important; filter: none !important;
}
.btn--primary:active{ background: #c07f2a !important; border-color: #c07f2a !important; }
.btn--primary::before, .btn--primary::after,
.btn-submit::before, .btn-submit::after,
.btn-link--primary::before, .btn-link--primary::after,
.cta-primary::before, .cta-primary::after{
  opacity: 0 !important; content: none !important; display: none !important;
}
/* ghost / secondary buttons: outline style, brand edge */
.btn--ghost, .btn-alt, .btn-funnel-back, .cta-secondary{
  background: transparent !important;
  border: 1px solid var(--rk-edge) !important;
  color: var(--rk-ink-60) !important;
}
.btn--ghost:hover, .btn-alt:hover, .btn-funnel-back:hover, .cta-secondary:hover,
.btn--ghost:focus-visible, .btn-alt:focus-visible{
  color: var(--rk-amber) !important;
  border-color: var(--rk-amber-dim) !important;
  background: transparent !important;
}
/* funnel / quiz primary buttons */
.btn-funnel{ background: var(--rk-ink) !important; color: var(--rk-night) !important; border: 1px solid var(--rk-ink) !important; }
.btn-funnel:hover{ background: var(--rk-amber) !important; color: #03090e !important; border-color: var(--rk-amber) !important; }
.btn-whatsapp{ background: var(--rk-green) !important; color: #03090e !important; border: 1px solid var(--rk-green) !important; }
.btn-whatsapp:hover{ background: #4f9166 !important; border-color: #4f9166 !important; }
.btn-link, .btn-link--primary{ background: none !important; border: none !important; }
.btn-link--primary{ color: var(--rk-amber) !important; }
.btn-link--primary:hover{ color: #c68c37 !important; }

/* demo-tab pills */
.demo-tab{
  background: transparent !important;
  border: 1px solid var(--rk-edge) !important;
  color: var(--rk-ink-60) !important;
  box-shadow: none !important;
}
.demo-tab.active{
  background: var(--rk-amber-14) !important;
  border-color: var(--rk-amber-dim) !important;
  color: var(--rk-ink) !important;
  box-shadow: none !important;
}

/* legacy .nav-cta / drawer CTA (defensive) */
.nav-cta, .drawer-cta-a{
  background: var(--rk-amber-14) !important;
  border: 1px solid var(--rk-amber-dim) !important;
  color: var(--rk-ink) !important;
  box-shadow: none !important;
}

/* consent banner buttons */
.br-consent-btn.br-consent-btn--primary,
html[data-theme="dark"] .br-consent-btn.br-consent-btn--primary,
html[data-theme="light"] .br-consent-btn.br-consent-btn--primary{
  border-color: var(--rk-ink) !important; background: var(--rk-ink) !important;
  color: var(--rk-night) !important; box-shadow: none !important;
}
.br-consent-btn.br-consent-btn--primary:hover,
.br-consent-btn.br-consent-btn--primary:focus-visible,
html[data-theme="dark"] .br-consent-btn.br-consent-btn--primary:hover,
html[data-theme="light"] .br-consent-btn.br-consent-btn--primary:hover{
  border-color: var(--rk-amber) !important; background: var(--rk-amber) !important;
  color: #03090e !important; box-shadow: none !important; filter: none !important;
}
.br-consent-btn.br-consent-btn--ghost,
.br-consent-btn.br-consent-btn--text,
html[data-theme="light"] .br-consent-btn.br-consent-btn--ghost,
html[data-theme="light"] .br-consent-btn.br-consent-btn--text{
  background: transparent !important; border-color: var(--rk-edge) !important;
  color: var(--rk-ink-60) !important; box-shadow: none !important;
}
.br-consent-btn.br-consent-btn--ghost:hover,
.br-consent-btn.br-consent-btn--text:hover,
html[data-theme="light"] .br-consent-btn.br-consent-btn--ghost:hover,
html[data-theme="light"] .br-consent-btn.br-consent-btn--text:hover{
  color: var(--rk-amber-ink) !important; border-color: var(--rk-amber-dim) !important;
}
.br-consent-links a{ color: var(--rk-ink-60) !important; }
.br-consent-links a:hover{ color: var(--rk-amber-ink) !important; }


/* ─── 6. Typography — Gambarino display headings ────────────────────────── */

/* map the common per-page heading classes to the display font */
.hero-h1, .page-h1, .doc-title, .success-title, .section-title, .guide-h2,
.cta-h2, .cta-title, .compare-title, .guarantee-title{
  font-family: var(--rk-display) !important;
  font-weight: 400 !important;
  letter-spacing: .002em !important;
  color: var(--rk-ink) !important;
  text-shadow: none !important;
}
.hero-h1 em, .page-h1 em, .doc-title em, .section-title em{
  color: var(--rk-amber) !important; font-style: italic !important;
}
.hero-h1, .page-h1{ line-height: 1.06 !important; }

/* legacy gradient-text headline treatment → plain ivory */
.grad, .grad-text, .accent-text{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--rk-ink) !important;
  color: var(--rk-ink) !important;
}


/* ─── 7. Nav — align with index's structural CSS ─────────────────────────── */

/* nav-a underline: solid amber, no gradient; hover lift disabled */
.nav-a::after{ background: var(--rk-amber) !important; }
.nav-a:hover, .nav-a.active{
  color: var(--rk-ink) !important;
  text-shadow: none !important;
  transform: none !important;
}
/* nav glass tone + height — matches index (4.25rem vs legacy 3.8rem) */
.nav{
  background: rgba(3,9,14,.74) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--rk-edge) !important;
  box-shadow: none !important;
}
.nav-inner{ height: 4.25rem !important; }
.nav-a{ height: 4.23rem !important; }
/* drawer offset must track the taller nav (legacy pages pin it at 3.8rem) */
.nav-drawer{ top: 4.25rem !important; }

/* mobile-nav.css cyan literals */
.drawer-cta-a{
  border-color: var(--rk-amber-dim) !important;
  background: var(--rk-amber-14) !important;
  color: var(--rk-ink) !important;
}
.drawer-chip.active,
html[lang="en"] .drawer-chip[data-set-lang="en"],
html[lang="es"] .drawer-chip[data-set-lang="es"]{
  border-color: var(--rk-amber-dim) !important;
  color: var(--rk-ink) !important;
  background: var(--rk-amber-14) !important;
}
.nav-drawer .drawer-select.cur-select:hover,
.nav-drawer .drawer-select.cur-select:focus{
  color: var(--rk-amber) !important;
  border-color: var(--rk-amber-dim) !important;
  background-color: transparent !important;
}

/* lang buttons in nav */
.lang-btn{
  border: 1px solid var(--rk-edge) !important;
  color: var(--rk-ink-60) !important;
  background: transparent !important;
}
.lang-btn.active{
  border-color: var(--rk-amber-dim) !important;
  color: var(--rk-ink) !important;
  background: var(--rk-amber-14) !important;
}
.lang-btn:hover{ color: var(--rk-ink) !important; border-color: var(--rk-edge-hi) !important; }

/* theme-toggle (injected by theme.js into .nav-utils/.drawer-tools/.br-region) */
.theme-toggle{
  font-family: var(--rk-mono) !important;
  background: transparent !important;
  border: 1px solid var(--rk-edge) !important;
  color: var(--rk-ink-60) !important;
  box-shadow: none !important;
}
.theme-toggle:hover{
  background: var(--rk-amber-14) !important;
  border-color: var(--rk-amber-dim) !important;
  color: var(--rk-amber-ink) !important;
}

/* light theme: nav glass tinted paper */
html[data-theme="light"] .nav{
  background: rgba(242,239,235,.88) !important;
  border-bottom-color: var(--rk-edge) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .nav-drawer{
  background: rgba(242,239,235,.97) !important;
  border-top-color: var(--rk-edge) !important;
}
html[data-theme="light"] .nav-a::after{ background: var(--rk-amber-ink) !important; }
html[data-theme="light"] .nav-burger span{ background: var(--rk-ink) !important; }
html[data-theme="light"] .nav-utils .lang-btn,
html[data-theme="light"] .nav-drawer .drawer-chip,
html[data-theme="light"] .nav .nav-burger,
html[data-theme="light"] .nav-utils .theme-toggle,
html[data-theme="light"] .drawer-tools .theme-toggle{
  background: transparent !important;
  border-color: var(--rk-edge) !important;
  color: var(--rk-ink-60) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .nav-utils .lang-btn.active,
html[data-theme="light"][lang="en"] .nav-drawer .drawer-chip[data-set-lang="en"],
html[data-theme="light"][lang="es"] .nav-drawer .drawer-chip[data-set-lang="es"]{
  background: var(--rk-amber-14) !important;
  border-color: var(--rk-amber-dim) !important;
  color: var(--rk-ink) !important;
}
html[data-theme="light"] .nav-utils .theme-toggle:hover,
html[data-theme="light"] .drawer-tools .theme-toggle:hover{
  background: var(--rk-amber-14) !important;
  border-color: var(--rk-amber-dim) !important;
  color: var(--rk-amber-ink) !important;
}


/* ─── 8. Misc literal cyan remnants (defensive) ─────────────────────────── */

.footer-a{ color: var(--rk-ink-60) !important; }
.footer-a:hover{ color: var(--rk-amber) !important; }
.footer-mark{ font-family: var(--rk-display) !important; }
.vs-highlight{ border-color: var(--rk-edge-hi) !important; box-shadow: none !important; }


/* ─── 9. Selection color ────────────────────────────────────────────────── */

::selection{ background: rgba(217,154,61,.30); }