/* ===========================================================================
   AURIAS STORE v3 — DESIGN SYSTEM
   ---------------------------------------------------------------------------
   The single source of visual truth for the Aurias Tebex theme (Exo base).
   Loaded AFTER store.css/generic.css in head.twig so it wins specificity ties.

   Authority: docs/v3/DESIGN-SPEC.md  (§2 tokens, §4.1 home, §8 "less noise").
   Brand:     docs/aurias-world/style.md §1  — canonical HEX, DO NOT invent new.

   Philosophy (v2 "Forge" identity — near-black + amber + lava):
     · One accent treatment: the lava→amber gradient CTA carries the amber glow.
       Lava red is the secondary/danger color. Tier colors live ONLY in the
       rank table / tier badges.
     · Elevation by surface lift + soft shadow; the ONE glow is the primary CTA.
     · Whitespace is a feature; Unbounded/Inter type hierarchy does the work.
     · Motion is a whisper: 160ms hover lifts; honor prefers-reduced-motion.

   Section map:
     1.  Tokens (:root)
     2.  Reset / base / typography
     3.  Layout primitives (.wrap, two-column, sections)
     4.  Buttons (.btn family)
     5.  Chips / IP-copy / badges
     6.  Cards (.card, product card)
     7.  Header / nav chrome
     8.  Hero
     9.  Category grid (home tiles)
     10. "Why support" copy block + trust strip
     11. Sidebar module cards (.widget family)
     12. Rank comparison table (.rank-table, per-tier accents)
     13. Forms / inputs
     14. Empty-state
     15. Footer
     16. Reduced motion + focus
   =========================================================================== */

/* ===========================================================================
   1. TOKENS  (DESIGN-SPEC §2 — every value is canonical brand)
   =========================================================================== */
:root {
  /* --- 2.1 Color — v2 "Forge" identity: near-black + amber + lava --- */
  --bg:            #13131C;                    /* page bg (near-black)          */
  --bg-raised:     #1A1A24;                    /* cards / sidebar surfaces      */
  --bg-raised-2:   #22222E;                    /* hover / nested surfaces       */
  --line:          rgba(255,255,255,.08);      /* hairline border               */
  --line-strong:   rgba(255,255,255,.16);      /* emphasised hairline           */
  --text:          #F8FAFC;                    /* primary text                  */
  --text-dim:      #94A3B8;                    /* secondary text / muted        */
  --text-mute:     #94A3B8;                    /* captions / meta               */

  /* amber = primary accent (mapped onto v3's --gold* token names) */
  --gold:          #F59E0B;                    /* primary accent (amber) base   */
  --gold-peak:     #FBBF24;                    /* accent highlight / hover      */
  --gold-soft:     #FBBF24;                    /* accent text on dark           */

  /* === BRAND FREEZE (M3) — navbar/chrome accent, NUNCA cambia por página ===
     La navbar es identidad de marca constante [D6]. El bridge --color-primary*
     y el .site-sale-banner del header referencian estos literales (no --gold),
     así que overridear --gold por body.page-* recolorea SOLO el contenido. */
  --brand:         #F59E0B;                    /* navbar accent (amber, frozen) */
  --brand-peak:    #FBBF24;                    /* navbar accent hover (frozen)  */
  --brand-grad:    linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%); /* REFINE: sale-banner fill — ámbar cálido (sin lava; coherencia con hero/badge, aprobado dueño) */

  --gold-grad:     var(--gradient-primary);    /* primary CTA fill = lava→amber */
  --gold-grad-h:   var(--gradient-primary);    /* hover handled via glow shadow */

  /* lava red = secondary/danger accent */
  --accent-lava:       #DC2626;                /* lava red                      */
  --accent-lava-hover: #EF4444;
  --accent-lava-fg:    #FFFFFF;
  --orange:        #F59E0B;                    /* warm secondary (= amber)      */

  /* the v2 brand mark + primary CTA fill — REFINE: ámbar cálido (sin lava; aprobado dueño 2026-06-10) */
  --gradient-primary: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);

  /* amber-glow signature on the primary CTA */
  --shadow-glow-cta:   0 0 24px rgba(245,158,11,.55), 0 0 4px rgba(220,38,38,.4);
  --shadow-glow-cta-h: 0 0 32px rgba(245,158,11,.7),  0 0 6px rgba(220,38,38,.5);

  /* M3: glow del CTA de CONTENIDO (sigue el acento por página; default = ámbar).
     El chrome (chip-pulse, cart, bottomnav) conserva su rgba ámbar literal. */
  --cta-glow:      var(--shadow-glow-cta);
  --cta-glow-h:    var(--shadow-glow-cta-h);

  --color-price:   #FBBF24;                    /* price text (amber highlight)  */
  --primary-fg:    #0A0A0F;                    /* near-black ink on amber CTA   */

  --success:       #22C55E;                    /* "in basket" / positive        */
  --danger:        #DC2626;                    /* errors, sale strike emphasis  */
  --warning:       #F59E0B;                    /* warning                       */
  --info:          #3B82F6;                    /* info                          */
  --discord:       #5865F2;                    /* Discord button ONLY           */
  --discord-dark:  #4450da;

  /* Tier colors — canonical, NEVER harmonized; rank-table contexts ONLY */
  --tier-atlas:    #00FF5B;                    /* Atlas  (green)                */
  --tier-verus:    #FFD115;                    /* Verus  (gold)                 */
  --tier-zeus:     #29C4F7;                    /* Zeus   (cyan)                 */

  /* --- 2.2 Type — v2 Forge: Unbounded / Inter / JetBrains Mono --- */
  --font-display:  'Unbounded', system-ui, sans-serif;   /* hero/headings/rank names */
  --font-body:     'Inter', system-ui, sans-serif;       /* everything else          */
  --font-mono:     'JetBrains Mono', ui-monospace, monospace; /* code / IP / numerics */
  --font-accent:   'Inter', system-ui, sans-serif;       /* tagline (no serif now)   */

  --fs-xs:    .75rem;     /* 12 */
  --fs-sm:    .875rem;    /* 14 */
  --fs-base:  1rem;       /* 16 */
  --fs-lg:    1.125rem;   /* 18 */
  --fs-xl:    1.375rem;   /* 22 */
  --fs-2xl:   1.75rem;    /* 28 */
  --fs-3xl:   2.5rem;     /* 40 */
  --fs-hero:  3.5rem;     /* 56 */
  --lh-body:  1.6;
  --lh-display: 1.15;

  /* --- 2.3 Space --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* --- Shape --- */
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* --- Elevation (soft shadow, NOT glow) --- */
  --shadow:    0 8px 30px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.30);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.45);

  /* --- Motion --- */
  --t:        160ms cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* --- Bridge: feed Exo/main.js the colors it expects via --color-* --- */
  --color-primary:        var(--brand);       /* M3: navbar frozen, NO var(--gold) */
  --color-primary-hover:  var(--brand-peak);   /* M3: navbar frozen, NO var(--gold) */
  --color-primary-text:   var(--primary-fg);  /* near-black ink on amber CTA   */
  --color-secondary:      var(--gold-soft);

  /* layout */
  --wrap-max:    1280px;
  --aside-w:     340px;
  --sidebar-width: 340px;   /* alias Exo reads for .site-content-widgets columns */
  --header-h:    72px;

  /* === M1 bridge: alias de tokens v2 → Forge (para portar el navbar v2 verbatim) === */
  --color-primary-fg: var(--primary-fg);
  --color-bg: var(--bg);
  --color-surface: var(--bg-raised);
  --color-surface-2: var(--bg-raised-2);
  --color-accent: var(--accent-lava);
  --color-text: var(--text);
  --color-text-muted: var(--text-dim);
  --color-border: var(--line);
  --color-border-strong: var(--line-strong);
  --space-1: var(--s-1);
  --space-2: var(--s-2);
  --space-3: var(--s-3);
  --space-4: var(--s-4);
  --space-5: var(--s-5);
  --space-6: var(--s-6);
  --text-sm: var(--fs-sm);
  --text-xs: var(--fs-xs, 0.8125rem);
  --radius-md: var(--r);
  --radius-pill: var(--r-pill);
  --content-max-width: var(--wrap-max);
  /* fondos/textos de acento + glow + base (referidos por el CSS v2; faltaban) */
  --color-accent-fg: var(--accent-lava-fg);   /* texto del badge sobre pill lava; store-v3 define --accent-lava-fg:#FFFFFF (style.css:61) */
  --text-base: var(--fs-base);
  --shadow-glow-amber: var(--shadow-glow-cta);
  --shadow-glow-cta-focus: var(--shadow-glow-cta);
}

/* ===========================================================================
   2. RESET / BASE / TYPOGRAPHY
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* subtle top glow band — a faint amber wash, restrained */
  background-image:
    radial-gradient(1200px 600px at 50% -200px, rgba(245,158,11,.06), transparent 70%);
  background-attachment: fixed;
}

/* J1: Exo aplica la "Background image" de Appearance también en body::before (fondo
   SITE-WIDE), duplicando la imagen del hero y asomándola SOBRE la navbar al estar
   arriba (la 2ª imagen no intencional que se va al scrollear). La anulamos: el hero
   conserva su propia imagen (--bg-image en .hero-bg); el resto del sitio queda con el
   near-black + glow ámbar del body. */
body.theme-aurias::before { background-image: none !important; }

/* J1: navbar PEGADA al borde superior (sin banda near-black arriba ni entre la navbar
   y el hero). `.site` es flex-column con `gap:48px` (de Exo): el sentinel (1er item,
   h:0) generaba 48px SOBRE el header, y otros 48px lo separaban del hero. Sacamos el
   sentinel del flujo (el header pasa a ser el 1er item → sin gap arriba) y cancelamos
   el gap inferior del header con margin negativo (el hero queda pegado a la navbar).
   El ritmo hero↔content↔footer (gap 48) se conserva. El sentinel sigue en el top para
   el IntersectionObserver de is-scrolled. El margin negativo que cancela el gap
   INFERIOR del header vive en la regla full-bleed `body.theme-aurias .site-header`
   (más abajo, `margin: 0 0 -48px`) — aquí solo sacamos el sentinel del flujo. */
#header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

img { max-width: 100%; display: block; }

a { color: var(--gold-soft); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--gold-peak); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: .01em;
  margin: 0 0 var(--s-4);
  color: var(--text);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

strong { color: var(--text); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }

::selection { background: rgba(245,158,11,.30); color: var(--text); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 var(--s-3);
}

.text-content h2 { font-size: var(--fs-2xl); margin-top: var(--s-6); }
.text-content h3 { font-size: var(--fs-xl); margin-top: var(--s-6); }
.text-content p  { color: var(--text-dim); }
.text-content ul { color: var(--text-dim); padding-left: var(--s-6); margin: 0 0 var(--s-4); }
.text-content li { margin-bottom: var(--s-2); }

/* ===========================================================================
   3. LAYOUT PRIMITIVES
   =========================================================================== */
.site { display: flex; flex-direction: column; min-height: 100vh; align-items: stretch; }
/* ^ M4: override Exo's `.site{align-items:flex-start}` (shared.css) que encogía
   hero/footer a su contenido y dejaba la mitad derecha vacía. Stretch = los hijos
   directos (.hero, .site-content, .site-footer) llenan el ancho; su *-inner centra. */

.wrap { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--s-6); }

.section { padding: var(--s-12) 0; }
.section + .section { padding-top: 0; }

.section-head { margin-bottom: var(--s-8); }
.section-head h2 { margin-bottom: var(--s-2); }
.section-head p  { color: var(--text-dim); max-width: 60ch; }

/* Two-column: main rail + sticky aside (the best-in-class architecture).
   Column/order logic is owned by Exo's shared.css media queries (it sets
   grid-template-columns + .store-sidebar order based on body.is-sidebar-right).
   We set sidebar-position=Right in config → Exo emits `1fr var(--sidebar-width)`
   + order:1, i.e. main rail LEFT, aside RIGHT (DESIGN-SPEC §4.1). We only
   supply surfaces + sticky behaviour here, and keep --sidebar-width in sync. */
.site-content {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--s-12) var(--s-6) var(--s-16);
}
.site-content-widgets { gap: var(--s-12); }

.store-sidebar { display: grid; gap: var(--s-6); }
@media (min-width: 1025px) {
  .store-sidebar { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* ===========================================================================
   4. BUTTONS  (gold is the ONLY CTA color)
   =========================================================================== */
.btn,
a.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t), background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
  text-align: center;
}
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-tertiary:active,
.btn-gold:active,
.btn-ghost:active,
.btn-discord:active { transform: scale(.97); }

/* Primary CTA — the v2 signature: lava→amber gradient fill + amber glow + ink
   text. Exo's .btn-primary maps here for free. */
.btn-gold,
.btn-primary {
  background: var(--gradient-primary);
  color: var(--primary-fg);
  border-color: transparent;
  box-shadow: var(--cta-glow);
}
.btn-gold:hover,
.btn-primary:hover { background: var(--gradient-primary); color: var(--primary-fg); transform: translateY(-1px); box-shadow: var(--cta-glow-h); }

/* Ghost — secondary CTA: lava-tinted outline, subtle. Exo's .btn-secondary maps here. */
.btn-ghost,
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover,
.btn-secondary:hover { background: var(--bg-raised-2); color: #fff; border-color: var(--accent-lava); transform: translateY(-1px); }

/* Tertiary — quiet text/icon control. Exo's .btn-tertiary maps here. */
.btn-tertiary {
  background: transparent;
  color: var(--text-dim);
  border-color: transparent;
  padding: 10px 14px;
}
.btn-tertiary:hover { color: var(--text); background: var(--bg-raised-2); }

/* Discord — the ONE place blurple appears. */
.btn-discord {
  background: var(--discord);
  color: #fff;
  border-color: rgba(88,101,242,.6);
}
.btn-discord:hover { background: var(--discord-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-lg { padding: 16px 30px; font-size: var(--fs-base); }
.btn-sm { padding: 9px 14px; font-size: var(--fs-xs); }
.btn-wide, .btn.wide, .wide { width: 100%; }
.btn-half, .half { width: calc(50% - 4px); }

button[disabled], a[disabled], .btn[disabled] {
  opacity: .45; cursor: not-allowed; pointer-events: none; filter: grayscale(.3);
}
[hidden] { display: none !important; }

/* ===========================================================================
   5. CHIPS / IP-COPY / BADGES
   =========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t);
}

/* IP copy chip — the server address, click-to-copy */
.ip-copy {
  cursor: pointer;
  color: var(--text);
}
.ip-copy:hover { border-color: var(--gold); background: var(--bg-raised-2); transform: translateY(-1px); }
.ip-copy .ip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.ip-copy .ip-addr { font-family: var(--font-mono); letter-spacing: .01em; }
.ip-copy .ip-hint { color: var(--text-mute); font-size: var(--fs-xs); font-weight: 600; }
.ip-copy.copied .ip-hint { color: var(--success); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--bg-raised-2);
  color: var(--text-dim);
}
.badge-popular {
  background: var(--gradient-primary);
  color: var(--primary-fg);
  border-color: transparent;
}
.badge-success { background: rgba(34,197,94,.12);  color: var(--success); border-color: rgba(34,197,94,.35); }
.badge-danger  { background: rgba(220,38,38,.12);  color: var(--danger);  border-color: rgba(220,38,38,.35); }

/* ===========================================================================
   6. CARDS
   =========================================================================== */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}
.card-pad { padding: var(--s-6); }

/* Product card (category grid + featured module). Exo class = .store-product */
.store-product {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.store-product:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.store-product .image-link { display: block; position: relative; }
.store-product .image {
  width: 100%;
  aspect-ratio: 4 / 3;          /* zona más cuadrada → el arte (casi cuadrado) llena más */
  object-fit: contain;          /* imagen COMPLETA, sin recortar */
  padding: var(--s-3);          /* aire mínimo alrededor del arte */
  background: var(--bg-raised); /* mismo fondo que la tarjeta → letterbox invisible */
}
/* La zona de imagen de las TARJETAS (crest/placeholder incluidos) iguala el 4/3
   para que todas las cards midan lo mismo; la global .image-crest/.image-default
   (usada en la página de paquete) queda intacta en 16/10. */
.store-product .image-crest,
.store-product .image-default { aspect-ratio: 4 / 3; }
/* Branded placeholder (amber-line frame + crest) — never the stock person icon */
.store-product .image-default,
.image-default {
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120px 120px at 50% 46%, rgba(245,158,11,.10), transparent 70%),
    linear-gradient(160deg, var(--bg-raised-2), var(--bg-raised));
  position: relative;
}
.image-default::after {
  content: "◆";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  color: rgba(245,158,11,.30);
}
.store-product .product-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin: 0;
  padding: var(--s-4) var(--s-4) var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.store-product .product-title a { color: var(--text); }
.store-product .product-title a:hover { color: var(--gold-soft); }
.store-product .countdown {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* product-actions: price line + add/subscribe controls */
.product-actions {
  padding: 0 var(--s-4) var(--s-4);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.product-actions .price {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xl);
  font-family: var(--font-mono);
  color: var(--text);
}
.product-actions .price strong {
  color: var(--color-price);
  font-weight: 700;
  text-shadow: 0 0 18px rgba(251,191,36,.55);
}
.product-actions .price .discount {
  color: var(--text-mute);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  margin-right: var(--s-2);
}
.product-actions .price .discount strong { color: var(--text-mute); font-weight: 500; }

/* M4 #1 (v2): la CAUSA real es shared.css:1594 `.store-product-full .actions .wide
   { flex: 0 1 240px }` (especificidad 0,3,0) que daba 240px de alto al botón Añadir
   en la página de paquete. Override con MISMA especificidad (gana por orden de carga,
   style.css va después de shared.css). Cubre también el buybox en modo modal. */
.store-product-full .actions .add,
.store-product-full .actions .subscribe,
.store-product-full .actions .wide,
.package-buybox .product-actions .add,
.package-buybox .product-actions .subscribe {
  flex: 0 0 auto !important;   /* gana sí o sí a shared.css:1594 (override de vendor) */
  height: auto !important;
  min-height: 0;
}

/* qty stepper in cards */
.quantity-field {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.quantity-field .quantity {
  width: 100%; text-align: center; background: var(--bg);
  border: 0; color: var(--text); font-family: var(--font-body); font-weight: 600;
  -moz-appearance: textfield;
}
.quantity-field .adjust {
  background: var(--bg-raised-2); border: 0; color: var(--text-dim);
  padding: 0 16px; cursor: pointer; font-size: var(--fs-lg);
}
.quantity-field .adjust:hover { color: var(--text); background: var(--bg); }
.quantity-field .open-basket { background: var(--bg); border: 0; color: var(--text-dim); padding: 0 var(--s-3); cursor: pointer; }

/* ===========================================================================
   7. HEADER / NAV CHROME
   =========================================================================== */
/* NOTE: Exo's shared.css turns .site-header-inner into a 355px absolutely-
   positioned banner at >960px (and a tall stacked block at <=960px). We fully
   override it into a compact sticky bar. Overrides are scoped to `.theme-aurias`
   + wrapped in matching media queries so they beat Exo's media-query rules. */
.theme-aurias .site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);  /* J1: navbar OPACA sobre el hero (decisión del dueño) — sin translucidez que "corte" la imagen */
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
body.theme-aurias.is-navigation-horizontal .site-header-inner,
body.theme-aurias .site-header-inner {
  width: 100%; max-width: var(--wrap-max); margin: 0 auto;
  min-height: var(--header-h);
  height: auto;
  padding: var(--s-3) var(--s-6);
  display: flex; align-items: center; gap: var(--s-5, 20px);
  position: static;
}

/* Neutralize Exo's absolute positioning on header children at all widths */
@media (min-width: 0px) {
  .theme-aurias .site-header-inner .actions,
  .theme-aurias .site-header-inner .log-in,
  .theme-aurias .site-header-inner .user-actions,
  .theme-aurias .site-header-inner .site-title,
  .theme-aurias .site-header-inner .info {
    position: static;
    inset: auto;
    top: auto; left: auto; right: auto; bottom: auto;
    margin: 0;
    width: auto;
    max-width: none;
    height: auto;
    line-height: normal;
    text-align: left;
    font-size: inherit;
    font-weight: inherit;
  }
  .theme-aurias .site-header-inner .site-title { width: auto; }
}

/* Brand lockup: crest (lava→amber gradient mark) + Unbounded wordmark */
.theme-aurias .site-title.site-brand { display: inline-flex; flex: none; margin: 0; }
.site-brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.site-brand .crest {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gradient-primary);
  color: var(--primary-fg); font-size: 1.1rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.site-brand .crest img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-sm); }
.site-brand .wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text);
  line-height: 1;
}
.site-title { margin: 0; }

/* primary nav (horizontal). Override Exo's .menu (wrap + brighter-bg block). */
.theme-aurias .site-navigation.navigation-horizontal { margin: 0; flex: 0 1 auto; min-width: 0; }
.theme-aurias .navigation-horizontal .menu,
.navigation-horizontal .navigation-list {
  display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s-1);
  justify-content: flex-start;
  list-style: none; margin: 0; padding: 0;
  background: transparent;
  font-size: var(--fs-sm); font-weight: 600; line-height: normal;
}
.theme-aurias .navigation-horizontal .menu > li > a { padding: 9px 12px; }
.theme-aurias .navigation-horizontal > ul > li > a { max-width: none; }
/* CMS page links (Preguntas/Soporte) stay in the footer + mobile drawer, not
   the desktop primary nav — keeps it to the 5 spec items + room for the IP chip
   (DESIGN-SPEC §4.1 / §8 "less noise"). The .nav-cms-page class is added in the
   template's store.pages loop. */
@media (min-width: 721px) {
  .theme-aurias .navigation-horizontal .menu > li.nav-cms-page { display: none; }
}
.navigation-horizontal .navigation-list > li { position: relative; }
.navigation-horizontal .navigation-list a {
  display: inline-flex; align-items: center;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: color var(--t), background var(--t);
}
.navigation-horizontal .navigation-list a:hover { color: var(--text); background: var(--bg-raised-2); }
.navigation-horizontal .navigation-list .link-active,
.navigation-horizontal .navigation-list .active > a { color: var(--gold-soft); }
.navigation-horizontal .navigation-list .active > a::after {
  content: ""; display: block; height: 2px; margin-top: 6px; border-radius: 2px;
  background: var(--gold-grad);
}

/* subcategory dropdown */
.navigation-horizontal .has-children > ul {
  position: absolute; top: 100%; left: 0; min-width: 180px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: var(--s-2);
  list-style: none; margin: var(--s-2) 0 0;
  display: none;
}
.navigation-horizontal .has-children:hover > ul { display: block; }
.navigation-horizontal .has-children > ul a { display: block; }

/* header actions cluster (right side) */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex: none; }
.header-actions .currency-chip { padding: 8px 12px; }

/* legacy Exo header.twig .info blocks (server / discord) restyled as chips */
.site-header .actions { display: contents; }
.toggle-navigation { display: none; }

.user-actions { display: inline-flex; align-items: center; gap: var(--s-3); }
.user-name { font-size: var(--fs-sm); }
.user-name .text-hover { display: none; }
.user-name:hover .text { display: none; }
.user-name:hover .text-hover { display: inline; }

/* currency selector */
.currency-select {
  background: var(--bg-raised); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: var(--r); padding: 9px 12px; font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.currency-select:hover { border-color: var(--gold); color: var(--text); }

/* sale banner */
.site-sale-banner {
  margin: 0; text-align: center; padding: 9px var(--s-6);
  background: var(--brand-grad); color: var(--primary-fg);   /* M3: frozen — header chrome, no sigue el acento de página [D6] */
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
}

/* ===========================================================================
   8. HERO
   =========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--bg);
  /* Layers: optional admin bg-image on top, then an always-on Aurias glow base
     (amber top-right + lava bottom-left) so the hero looks rich WITH or WITHOUT a photo. */
  background-image:
    var(--bg-image, none),
    radial-gradient(115% 115% at 82% -12%, rgba(245,158,11,.20), transparent 55%),
    radial-gradient(95% 95% at 8% 112%, rgba(220,38,38,.16), transparent 55%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  /* J1: scrim RECENTRADO para el hero centrado (M4). Capas (top→bottom):
     1) tinte cálido Forge (esq. sup-der), 2) fade vertical que funde con --bg,
     3) oscurecimiento RADIAL centrado detrás del texto (legibilidad sobre
        cualquier captura, clara u oscura), 4) viñeta de bordes que funde la foto
        con el near-black del tema. Cero HEX nuevo (mismos rgba Forge). */
  background:
    radial-gradient(70% 80% at 85% 0%, rgba(245,158,11,.10), transparent 60%),
    linear-gradient(180deg, rgba(19,19,28,.45), rgba(19,19,28,.78) 62%, var(--bg)),
    radial-gradient(60% 70% at 50% 45%, rgba(19,19,28,.80), rgba(19,19,28,.30) 70%, transparent),
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.30));
}
.hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--wrap-max); margin: 0 auto;
  padding: var(--s-24) var(--s-6) var(--s-16);
  max-width: min(var(--wrap-max), 100%);
}
/* M4: hero CENTRADO (decisión del dueño) — copy centrado en la banda full-width */
.hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.05;
  margin-bottom: var(--s-4);
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.hero h1 .accent {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-tagline {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: var(--fs-xl);
  color: var(--text-dim);
  margin-bottom: var(--s-8);
  line-height: 1.4;
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); margin-bottom: var(--s-8); }
.hero-ip { display: inline-flex; }
.hero-rule {
  width: 120px; height: 3px; border-radius: 2px;
  background: var(--gold-grad); margin: 0 auto var(--s-6);  /* M4: centrado */
}

/* ===========================================================================
   9. CATEGORY GRID (home tiles)
   =========================================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
.category-tile {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-raised-2));
  overflow: hidden;
  color: var(--text);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
/* MEDIA — bloque de imagen ARRIBA (ya no full-bleed). Sin imagen real se ve el crest. */
.category-tile .tile-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(245,158,11,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-raised-2), var(--bg));
}
/* La imagen real se pinta encima del crest; cuando --tile-img se omite queda transparente. */
.category-tile .tile-media::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image: var(--tile-img, none);
  background-size: cover; background-position: center;
  transition: transform var(--t), opacity var(--t);
}
/* Velo inferior sutil para sentar el borde de la imagen contra la costura del body. */
.category-tile .tile-media::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(19,19,28,.55));
}
/* Crest de marca para el caso SIN imagen (monograma Aurias, tenue). */
.category-tile .tile-media__crest {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1;
  color: rgba(245,158,11,.22);
  text-shadow: 0 2px 18px rgba(245,158,11,.12);
  user-select: none;
}
/* BODY — texto DEBAJO de la imagen. */
.category-tile .tile-body {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-5) var(--s-6);
}
.category-tile .tile-label {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text);
  line-height: 1.15;
}
.category-tile .tile-meta { color: var(--gold-soft); font-size: var(--fs-sm); font-weight: 600; }
.category-tile.is-soon .tile-meta { color: var(--text-mute); }
.category-tile:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.category-tile:hover .tile-media::before { transform: scale(1.04); }

/* Featured row (native featuredPackage cards in a row) */
.featured-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6); }

/* ===========================================================================
   10. "WHY SUPPORT" COPY BLOCK + TRUST STRIP
   =========================================================================== */
.why-block {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-8);
}
.why-intro {
  max-width: 70ch;
  margin: var(--s-3) 0 var(--s-8);
  color: var(--text-dim);
  font-size: var(--fs-lg);
  line-height: 1.6;
}
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-6); }
/* M4 D2: las why-items ahora EN CAJA (como las trust-items) — las 6 tarjetas en caja */
.why-item {
  background: var(--bg-raised-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.why-item .why-icon {
  width: 40px; height: 40px; border-radius: var(--r);
  display: grid; place-items: center; margin-bottom: var(--s-3);
  background: var(--bg); border: 1px solid var(--line);
  color: var(--gold-soft);
}
/* M4 D1: glifos bedrock → SVGs line-style (heredan el acento por página vía currentColor) */
.why-item .why-icon svg { width: 22px; height: 22px; display: block; }
.why-item h4 { font-family: var(--font-display); margin-bottom: var(--s-2); }
.why-item p  { color: var(--text-dim); font-size: var(--fs-sm); }

.trust-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4); margin-top: var(--s-8);
}
.trust-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.trust-item .ti-glyph {
  flex: none; width: 40px; height: 40px; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--gold-soft);
}
.trust-item .ti-glyph svg { width: 22px; height: 22px; display: block; }   /* M4 D1: SVG */
.trust-item .ti-text strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); }
.trust-item .ti-text span { color: var(--text-mute); font-size: var(--fs-xs); }

/* ===========================================================================
   11. SIDEBAR MODULE CARDS  (.widget family — Exo module.*.html markup)
   =========================================================================== */
.widget {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.widget-title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.widget-content { color: var(--text-dim); font-size: var(--fs-sm); }
.widget-content h6 {
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700;
  color: var(--text); margin: 0 0 var(--s-1); cursor: pointer;
}
.widget-content p { margin: 0; }

/* server status */
.widget-server-status .widget-content h6:hover { color: var(--gold-soft); }
.widget-server-status .widget-content p { color: var(--text-dim); margin-top: var(--s-2); }
.widget-server-status .widget-content p strong { color: var(--success); }

/* goal / community goal progress */
.progress {
  height: 12px; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--line);
  overflow: hidden; margin: var(--s-2) 0 var(--s-3);
}
.progress-bar {
  height: 100%; border-radius: var(--r-pill);
  background: var(--gold-grad);
  transition: width 600ms var(--ease-out);
}
.progress-bar.striped {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,.12) 50%, rgba(255,255,255,.12) 75%, transparent 75%, transparent),
    var(--gold-grad);
  background-size: 1rem 1rem, auto;
}
.progress-bar.striped.animated { animation: progress-stripes 1s linear infinite; }
@keyframes progress-stripes { from { background-position: 1rem 0, 0 0; } to { background-position: 0 0, 0 0; } }
.widget-goal .widget-content p,
.widget-community-goal .widget-content p { color: var(--text-dim); }
.widget-goal .widget-content p strong,
.widget-community-goal .widget-content p strong { color: var(--gold-soft); }
.goal-image { border-radius: var(--r); margin-bottom: var(--s-3); width: 100%; }

/* top donator */
.widget-top-donator .widget-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); }
.widget-top-donator .avatar {
  width: 56px; height: 56px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--bg-raised-2);
}
.widget-top-donator .username { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0; cursor: default; }
.widget-top-donator p strong { color: var(--gold-soft); }
.widget-top-donator .empty,
.widget-recent .empty { color: var(--text-mute); font-style: italic; }

/* recent payments */
.widget-recent .purchases { display: grid; gap: var(--s-3); }
.widget-recent .purchase { display: flex; align-items: center; gap: var(--s-3); }
.widget-recent .purchase .avatar {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg-raised-2); flex: none;
}
.widget-recent .purchase .info { min-width: 0; }
.widget-recent .purchase .username { font-size: var(--fs-sm); font-weight: 700; margin: 0; color: var(--text); cursor: default; }
.widget-recent .purchase p { font-size: var(--fs-xs); color: var(--text-mute); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.widget-recent .purchase .price strong { color: var(--gold-soft); }
.widget-recent .purchase time { font-size: var(--fs-xs); color: var(--text-mute); }
.widget-recent .sep { color: var(--text-mute); }

/* featured package widget wraps a product card */
.widget-featured .widget-content { padding: 0; }
.widget-featured .store-product { box-shadow: none; }

/* gift card form */
.widget-gift-card form { display: grid; gap: var(--s-3); }
.gift-card-input { width: 100%; }
.alert { padding: var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-sm); margin: 0; }
.alert-danger  { background: rgba(220,38,38,.12);  color: var(--danger);  }
.alert-warning { background: rgba(245,158,11,.12); color: var(--warning); }

/* ===========================================================================
   12. RANK COMPARISON TABLE  (DESIGN-SPEC §5 — per-tier accents)
   Built in category.html (rank table). Tier colors live ONLY here.
   =========================================================================== */
.rank-table {
  --tier-accent: var(--gold);                 /* per-column override below     */
}
.rank-table-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-raised);
}
.rank-col-head {
  padding: var(--s-6);
  text-align: center;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.rank-col-head.tier-atlas { --tier-accent: var(--tier-atlas); }
.rank-col-head.tier-verus { --tier-accent: var(--tier-verus); }
.rank-col-head.tier-zeus  { --tier-accent: var(--tier-zeus);  }
.rank-col-head .tier-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--tier-accent);
  margin: var(--s-2) 0 var(--s-1);
}
.rank-col-head .tier-price { font-size: var(--fs-2xl); font-family: var(--font-display); color: var(--text); }
.rank-col-head .tier-price small { font-size: var(--fs-sm); color: var(--text-mute); font-family: var(--font-body); }
/* M4 #3: el badge straddleaba el título "Verus" (lo tapaba ~20px). Lo subo a
   horcajadas del borde superior (ribbon) y el header featured recibe más padding-top
   (1257/1310) para que el título quede holgadamente debajo. */
.rank-col-head .badge-popular { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); }
.rank-col-head.is-featured { background: linear-gradient(180deg, rgba(255,209,21,.06), transparent); }
.rank-col-head.is-featured::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255,209,21,.4);
}
.rank-feature-label,
.rank-cell {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.rank-feature-label { color: var(--text-dim); font-weight: 600; }
.rank-cell { text-align: center; color: var(--text); }
.rank-cell .yes { color: var(--success); font-weight: 700; }
.rank-cell .no  { color: var(--text-mute); }
.rank-table-cta { padding: var(--s-4); text-align: center; }

/* ===========================================================================
   13. FORMS / INPUTS
   =========================================================================== */
input[type="text"], input[type="number"], input[type="email"], select, textarea {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  transition: border-color var(--t), box-shadow var(--t);
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}

/* ===========================================================================
   14. EMPTY-STATE  (Kits / Beneficios "Próximamente")
   =========================================================================== */
.empty-state {
  text-align: center;
  padding: var(--s-16) var(--s-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}
.empty-state .es-crest {
  width: 64px; height: 64px; margin: 0 auto var(--s-6);
  display: grid; place-items: center; border-radius: var(--r-lg);
  background: var(--bg-raised-2); border: 1px solid var(--line);
  color: var(--gold-soft); font-size: 1.8rem;
}
.empty-state h3 { font-family: var(--font-display); }
.empty-state p { color: var(--text-dim); max-width: 44ch; margin: 0 auto var(--s-6); }

/* ===========================================================================
   15. FOOTER
   =========================================================================== */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}
.site-footer-inner {
  width: 100%; max-width: var(--wrap-max); margin: 0 auto;
  padding: var(--s-12) var(--s-6);
  display: grid; gap: var(--s-8);
}
.footer-top {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-8);
}

/* Brand lockup: real store.logo (◆ fallback) + Unbounded wordmark + one-line tagline. */
.footer-brand { display: grid; gap: var(--s-2); min-width: 0; }
.footer-brand__lockup { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.footer-brand__logo {
  width: 34px; height: 34px; flex: none;
  object-fit: contain; border-radius: var(--r-sm);
}
.footer-brand .crest {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--gradient-primary);
  color: var(--primary-fg); font-size: 1.1rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.footer-brand .wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text);
  line-height: 1;
}
.footer-brand__tagline {
  margin: 0; max-width: 42ch;
  color: var(--text-mute);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Trust row: inline monochrome card brands, one muted tone, no chips. */
.we-accept {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  list-style: none; margin: 0; padding: 0;
  color: var(--text-mute);
}
.we-accept li { display: inline-flex; align-items: center; }
.we-accept__mark {
  height: 22px; width: auto; display: block;
  fill: currentColor; opacity: .8;
  transition: opacity var(--t);
}
.we-accept li:hover .we-accept__mark { opacity: 1; }
.we-accept .we-accept-label {
  color: var(--text-mute); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}

/* Full-width hairline between the brand/payments band and the bottom band. */
.footer-rule { border: 0; height: 1px; margin: 0; background: var(--line); }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); }
.footer-links a { color: var(--text-dim); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: color var(--t); }
.footer-links a:hover { color: var(--gold-soft); }
.copyright { color: var(--text-mute); font-size: var(--fs-xs); margin: 0; }

/* ===========================================================================
   16. RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  /* Exo stacks .site-content-widgets to flex-column here; aside becomes a row. */
  .store-sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  :root { --fs-hero: 2.4rem; --fs-3xl: 1.9rem; --fs-2xl: 1.5rem; }
  .site-header-inner { flex-wrap: wrap; gap: var(--s-3); }
  .toggle-navigation {
    display: inline-flex; order: -1;
    width: 42px; height: 42px; font-size: 0; position: relative;
  }
  .toggle-navigation::before { content: "☰"; font-size: 1.3rem; }
  .navigation-horizontal .navigation-list { flex-wrap: wrap; }
  .header-actions { margin-left: auto; }
  .store-sidebar { grid-template-columns: 1fr; }
  .category-grid, .why-grid, .trust-strip { grid-template-columns: 1fr; }
  .hero-inner { padding: var(--s-16) var(--s-6) var(--s-12); }
  .rank-table-grid { grid-template-columns: 1fr; }   /* stacks, no scroll-jail  */
  .rank-feature-label, .rank-cell { text-align: left; }
}

/* ===========================================================================
   17. MOTION + FOCUS A11Y
   =========================================================================== */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
@media (hover: none) {
  .store-product:hover, .category-tile:hover, .card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn:active, .store-product:hover, .category-tile:hover,
  .btn-gold:hover, .btn-primary:hover, .btn-ghost:hover { transform: none; }
}

/* ===========================================================================
   ===========================================================================
   WAVE 1 ADDITIONS (category page + rank table + branded product art)
   Owner: category.html / package-entry.twig agent. Appended per file-ownership
   rule. Reuses §1 tokens + §6/§12 base classes; introduces no new HEX.
   ===========================================================================
   =========================================================================== */

/* ---------------------------------------------------------------------------
   W1.A — BRANDED PRODUCT-CARD ART (package-entry.twig)
   Replaces the stock person-icon with a gold-hairline framed crest + monogram.
   Tier cards (rank packages) tint the crest with the canonical tier color; all
   other cards use gold. Tier color here is a *crest accent only* — it never
   becomes a CTA color (gold stays the only CTA), so it stays within the
   "tier colors only in tier contexts" rule.
   --------------------------------------------------------------------------- */
.store-product .image-crest,
.image-crest {
  --crest-accent: var(--gold);
  width: 100%;
  aspect-ratio: 16 / 10;
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(140px 140px at 50% 44%, color-mix(in srgb, var(--crest-accent) 14%, transparent), transparent 70%),
    linear-gradient(160deg, var(--bg-raised-2), var(--bg-raised));
  overflow: hidden;
}
/* faint geometric backdrop — a quiet diamond lattice, not noise */
.image-crest::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(45deg, var(--line) 1px, transparent 1px),
    linear-gradient(-45deg, var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 78%);
}
.image-crest .crest-frame {
  position: relative; z-index: 1;
  width: 88px; height: 88px;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  box-shadow:
    inset 0 0 0 1px rgba(19,19,28,.6),
    0 6px 18px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--bg);
}
/* gold (or tier) hairline ring around the frame */
.image-crest .crest-frame::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: calc(var(--r-lg) + 6px);
  border: 1px solid color-mix(in srgb, var(--crest-accent) 38%, transparent);
}
.image-crest .crest-monogram {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--crest-accent);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* tier accents (rank cards) — canonical tier colors, crest-only */
.image-crest.crest-atlas { --crest-accent: var(--tier-atlas); }
.image-crest.crest-verus { --crest-accent: var(--tier-verus); }
.image-crest.crest-zeus  { --crest-accent: var(--tier-zeus); }

/* fallback for browsers without color-mix(): the §1 --line tokens already carry
   a gold tint, so the frame ring + bg stay on-brand even if the accent drops. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .image-crest { background: linear-gradient(160deg, var(--bg-raised-2), var(--bg-raised)); }
  .image-crest .crest-frame::after { border-color: var(--line-strong); }
}

/* card badges (overlaid on the art) + not-purchasable veil */
.store-product .image-link { position: relative; }
.store-product .card-badge {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
}
.store-product .card-badge-sale { left: auto; right: var(--s-3); }
.store-product .card-veil {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: rgba(19,19,28,.62);
  backdrop-filter: blur(1px);
}
.store-product.is-unavailable { opacity: .55; }
.store-product.is-unavailable:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
.store-product.is-unavailable .product-title a { color: var(--text-dim); }
/* Desaturate the art/crest so an unavailable card reads as "off". */
.store-product.is-unavailable .image,
.store-product.is-unavailable .image-crest,
.store-product.is-unavailable .image-default { filter: grayscale(1) brightness(.85); }
/* Mute the price — no amber glow on a dead card. */
.store-product.is-unavailable .product-actions .price,
.store-product.is-unavailable .product-actions .price strong {
  color: var(--text-mute);
  text-shadow: none;
}
/* Neutralize the CTA. The anchors carry a bare `disabled` attr; the global
   a[disabled] rule (§4) only dims them while .btn-primary keeps its lava→amber
   fill, so they still look clickable. Here we flatten them to a muted, clearly
   inert surface and harden pointer-events. */
.store-product.is-unavailable .product-actions .add[disabled],
.store-product.is-unavailable .product-actions .subscribe[disabled],
.store-product.is-unavailable .product-actions a.btn-primary[disabled],
.store-product.is-unavailable .product-actions a.btn-secondary[disabled] {
  background: var(--bg-raised-2) !important;
  color: var(--text-mute) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  opacity: .65;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}

/* ---------------------------------------------------------------------------
   W1.B — CATEGORY PAGE LAYOUT
   The category two-column body reuses Exo's .site-content-widgets grid (set up
   by shared.css + style.css §3). Here: header rhythm + the responsive product
   grid (1/2/3 col) that the cards live in.
   --------------------------------------------------------------------------- */
.category-head { margin-bottom: var(--s-8); }
.category-head h1 { margin-bottom: var(--s-3); }
.category-head .category-description { color: var(--text-dim); max-width: 64ch; }
.category-head .category-description p:last-child { margin-bottom: 0; }

/* Responsive product grid — 3-up desktop, 2-up tablet, 1-up phone. Works for
   both grid + list displayType (Exo emits .store-products-grid/-list). */
.product-grid,
.store-products-grid,
.store-products-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  align-items: stretch;
}
.product-grid > .store-product,
.store-products-grid > .store-product,
.store-products-list > .store-product { height: 100%; }

@media (max-width: 1024px) {
  .product-grid,
  .store-products-grid,
  .store-products-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .product-grid,
  .store-products-grid,
  .store-products-list { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   W1.C — RANK COMPARISON TABLE — extensions to §12
   §12 already defines .rank-table(-grid), .rank-col-head, .rank-feature-label,
   .rank-cell, tier accents, badge, is-featured + the <=720px stack. Here we add:
   the corner cell, per-tier column tints, command sub-labels, the featured
   column's vertical emphasis spanning all rows, and a proper MOBILE STACK that
   turns the grid into per-tier cards (no horizontal scroll-jail).
   --------------------------------------------------------------------------- */
.rank-section { padding-top: 0; }

.rank-table-grid .rank-corner {
  background: var(--bg-raised-2);
  font-family: var(--font-display);
  letter-spacing: .04em;
}

/* tier-tinted column headers (top accent bar in each tier color) */
.rank-col-head.tier-atlas { box-shadow: inset 0 3px 0 0 var(--tier-atlas); }
.rank-col-head.tier-verus { box-shadow: inset 0 3px 0 0 var(--tier-verus); }
.rank-col-head.tier-zeus  { box-shadow: inset 0 3px 0 0 var(--tier-zeus); }
.rank-col-head .tier-price { margin: var(--s-1) 0 var(--s-3); }
.rank-col-head .rank-table-cta { padding: 0; }

/* the popular badge sits above the tier name; give the verus header room */
.rank-col-head.is-featured { padding-top: var(--s-8); }

/* command chips inside feature labels */
.rank-feature-label .rank-cmd {
  display: inline-block;
  margin-left: var(--s-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--gold-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1px 7px;
  letter-spacing: 0;
}

/* featured (Verus) column: a continuous subtle gold wash + side rails down
   every cell, so the emphasis reads as one column, not striped cells. */
.rank-cell.is-featured {
  background: linear-gradient(180deg, rgba(255,209,21,.05), rgba(255,209,21,.05));
  box-shadow: inset 1px 0 0 rgba(255,209,21,.28), inset -1px 0 0 rgba(255,209,21,.28);
  color: var(--text);
  font-weight: 600;
}
.rank-cell.rank-last,
.rank-feature-label.rank-last { border-bottom: 0; }
/* close the featured column's gold rail at the bottom */
.rank-cell.is-featured.rank-last { box-shadow: inset 1px 0 0 rgba(255,209,21,.28), inset -1px 0 0 rgba(255,209,21,.28), inset 0 -2px 0 rgba(255,209,21,.34); }

.rank-cell .yes { color: var(--success); font-weight: 700; }
.rank-cell .no  { color: var(--text-mute); }

/* per-cell tier label (hidden on desktop; shown when the grid collapses) */
.rank-cell .rank-cell-tier { display: none; }

/* ---- MOBILE: stack to per-tier cards, NOT a scroll-jail ----
   §16 already flips .rank-table-grid to a single column at <=720px. We turn
   each region into a readable stack: feature labels become section headers and
   every value cell shows which tier it belongs to via its data-tier attribute. */
@media (max-width: 720px) {
  .rank-table-grid {
    border-radius: var(--r-lg);
    gap: 0;
  }
  .rank-corner { display: none; }

  .rank-col-head {
    text-align: left;
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-bottom: 1px solid var(--line-strong);
  }
  .rank-col-head .rank-table-cta { margin-top: var(--s-2); }
  .rank-col-head.is-featured { padding-top: var(--s-8); }

  .rank-feature-label {
    background: var(--bg-raised-2);
    margin-top: var(--s-2);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    color: var(--text);
    border-top: 1px solid var(--line);
  }
  .rank-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
  }
  /* prepend the tier name to each value cell so a stacked column is legible */
  .rank-cell::before {
    content: attr(data-tier);
    font-weight: 600;
    color: var(--text-mute);
    margin-right: var(--s-4);
  }
  /* neutralize the desktop column rails when stacked */
  .rank-cell.is-featured,
  .rank-cell.is-featured.rank-last {
    box-shadow: none;
    background: linear-gradient(90deg, rgba(255,209,21,.05), transparent);
  }
}

/* ===================================================================
   M1 — Navbar marketplace v2 (portado de store/ sobre tokens Forge)
   Resuelve vía el bridge de :root (--color-* → tokens Forge).
   =================================================================== */

.site-header {
  position: fixed; top: var(--announcement-h, 0px); left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, backdrop-filter 240ms ease, border-color 240ms ease, top 180ms ease;
}
.site-header.is-scrolled {
  background: var(--bg);  /* J1: scrolled también OPACO near-black (igual que reposo) — no slate translúcido que deja "cortar" el hero */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.site-header__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header__logo { flex: 0 0 auto; display: inline-flex; }
.site-header__logo img { height: 40px; width: auto; display: block; }

.site-header__hamburger { display: none; }

/* Primary nav */
.site-nav { flex: 1 1 auto; }
.site-nav__list { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.site-nav__item a {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  transition: background 160ms ease, color 160ms ease;
}
.site-nav__item a:hover { background: var(--color-surface); }
.site-nav__item.is-active a { color: var(--color-primary-hover); background: var(--color-surface); }

/* Right cluster */
.site-header__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Server chip */
.site-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.site-chip:hover { border-color: var(--color-border-strong); }
.site-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  animation: chip-pulse 2s infinite;
}
.site-chip__count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.site-chip__hint  { color: var(--color-text-muted); }   /* M4 #C: "· Copiar IP" (antes sr-only leakeado) */

/* M4 #B: Discord como BOTÓN de marca (blurple #5865F2 + logo), no link de texto.
   Color fijo de Discord (excepción a la paleta por página). */
.site-discord {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-3);
  background: var(--discord); color: #fff;
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  transition: background var(--t), transform 80ms ease, box-shadow var(--t);
}
.site-discord:hover { background: var(--discord-dark, #4450da); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(88,101,242,.35); }
.site-discord:active { transform: scale(.97); }
.site-discord__logo { flex: none; }
@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* Username widget */
.site-username {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-3) 0 4px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.site-username:hover { border-color: var(--color-border-strong); background: var(--color-surface); }
.site-username__avatar { width: 28px; height: 28px; border-radius: 50%; }

/* Cart icon */
.site-cart {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 160ms ease, transform 80ms ease, box-shadow 160ms ease;
}
.site-cart:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-glow-amber); }
.site-cart:active { transform: scale(0.97); }
.site-cart__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-size: 0.75rem; font-weight: 700;
  line-height: 18px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.site-cart__badge.is-empty { display: none; }

/* Mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.mobile-drawer.is-open { pointer-events: auto; visibility: visible; }
.mobile-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.7);
  opacity: 0;
  transition: opacity 240ms ease;
}
.mobile-drawer.is-open .mobile-drawer__backdrop { opacity: 1; }
.mobile-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  padding: var(--space-5);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column; gap: var(--space-5);
  overflow-y: auto;
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__close {
  align-self: flex-end;
  width: 40px; height: 40px;
  background: transparent; border: none;
  color: var(--color-text);
  font-size: 1.75rem; line-height: 1;
  cursor: pointer;
}
.mobile-drawer__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-drawer__nav a {
  display: block; padding: var(--space-3);
  color: var(--color-text); text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}
.mobile-drawer__nav a:hover { background: var(--color-surface); }
.mobile-drawer__nav li.is-active a { color: var(--color-primary); background: var(--color-surface); }
.mobile-drawer__chip { align-self: flex-start; }
body.drawer-open { overflow: hidden; }

/* Mobile breakpoint */
@media (max-width: 768px) {
  :root { --header-h: 56px; }
  .site-header__inner { padding: 0 var(--space-3); gap: var(--space-3); }
  .site-header__logo img { height: 32px; }
  .site-header__hamburger {
    display: inline-flex; flex-direction: column; justify-content: space-between;
    width: 40px; height: 40px; padding: 10px 8px;
    background: transparent; border: none; cursor: pointer;
  }
  .site-header__hamburger span { display: block; height: 2px; background: var(--color-text); border-radius: 1px; }
  .site-nav { display: none; }
  .site-chip,
  .site-username__name { display: none; }
  .site-header__right { gap: var(--space-1); margin-left: auto; }
}

/* .site-bottomnav (mobile bottom navigation) */
.site-bottomnav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  display: none;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(0);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-bottomnav[data-bottomnav-visible="0"] {
  transform: translateY(100%);
}

.site-bottomnav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  height: var(--bottom-nav-h, 64px);
}

.site-bottomnav__item {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.site-bottomnav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 6px 4px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms ease;
  font-family: var(--font-body);
}

.site-bottomnav__link:hover,
.site-bottomnav__link:focus-visible {
  color: var(--color-text);
}

.site-bottomnav__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  box-shadow: var(--shadow-glow-cta-focus);
}

.site-bottomnav__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform 200ms ease;
}

.site-bottomnav__link:active .site-bottomnav__icon {
  transform: scale(0.92);
}

.site-bottomnav__icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

.site-bottomnav__label {
  font-size: 0.6875rem; /* 11px */
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

/* ---- Active state ------------------------------------------------------ */
.site-bottomnav__link[aria-current="page"] {
  color: var(--color-primary);
}

.site-bottomnav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

/* ---- Cart badge -------------------------------------------------------- */
.site-bottomnav__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-family: var(--font-body);
  font-size: 0.625rem; /* 10px */
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--color-accent-fg);
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95);
}

.site-bottomnav__badge[hidden] {
  display: none !important;
}

/* ---- Mobile gate + body padding reservation --------------------------- */
@media (max-width: 640px) {
  .site-bottomnav {
    display: block;
  }
  body:has(#site-bottomnav) {
    padding-bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom));
  }
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-bottomnav,
  .site-bottomnav__icon,
  .site-bottomnav__link {
    transition: none !important;
  }
}

/* store-v3 mantiene el header sticky (no fixed) — anula el position:fixed del CSS v2.
   z-index:100 hace que el header v2 gane sobre el chrome legacy de Exo (.theme-aurias
   .site-header, z-index:40) y quede por encima de filtros/contenido sticky al hacer scroll. */
body.theme-aurias .site-header {
  position: sticky; top: 0; z-index: 100;
  /* J1: navbar a SANGRE COMPLETA — anula el inset flotante de shared.css de Exo
     (max-width 1376 + margin 0 63px) que dejaba huecos laterales por donde el hero
     a sangre completa asomaba ("el corte"). El contenido interno (.site-header__inner)
     mantiene su propio max-width centrado, así que solo la BARRA se extiende borde a borde. */
  max-width: none; margin: 0 0 -48px; width: 100%;  /* J1: bottom -48px cancela el gap:48 de .site bajo el header → hero pegado a la navbar */
}

/* La .site-navigation de Exo (solo se emite si nav-style==horizontal; en el live,
   que está en modo vertical, ni se renderiza) queda reemplazada por .site-nav v2.
   REGLA ÚNICA de la que depende la señal exo_nav_hidden del verificador (C1).
   NO usar selectores con #header/.site-header-inner: el header v2 no los tiene. */
body.theme-aurias .site-navigation { display: none !important; }

/* Feedback de "copiado" del chip de IP (reemplaza el 'Copied!' de Exo que ya no usamos).
   El IIFE añade .is-copied 1.5s; mostramos un tooltip sin tocar el innerHTML del chip. */
.site-chip { position: relative; }
.site-chip.is-copied::after {
  content: "¡Copiado!"; position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); background: var(--bg-raised-2); color: var(--text);
  font-size: var(--fs-xs, .8125rem); padding: 2px 8px; border-radius: var(--r-sm);
  white-space: nowrap; pointer-events: none;
}

/* === M2: banner CTA de rangos en home ===================================== */
.rank-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-8) var(--s-12);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.rank-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-primary);
  opacity: 0.08;
  pointer-events: none;
}
.rank-cta-copy { position: relative; z-index: 1; }
.rank-cta-copy h2 { margin: var(--s-1) 0 var(--s-2); }
.rank-cta-copy p { color: var(--text-dim); max-width: 52ch; margin: 0; }
.rank-cta .btn { position: relative; z-index: 1; flex: 0 0 auto; }
@media (max-width: 720px) {
  .rank-cta { flex-direction: column; align-items: flex-start; padding: var(--s-6); }
}

/* ===========================================================================
   17. PER-PAGE ACCENT ENGINE  (M3 — "colores por página")
   ---------------------------------------------------------------------------
   Recolorea SOLO el contenido. La navbar/chrome usa --color-primary* = --brand
   (congelado en §1) y el sale-banner del header usa --brand-grad → NUNCA cambian
   aquí [D6]. SÍ siguen el acento por página (son contenido, intencional): los
   botones/precios/hero/banners, los widgets del sidebar (aside) y el hover de
   los links del footer (.footer-links a:hover usa --gold-soft).

   Cómo funciona: cada bloque redefine la familia de acento de CONTENIDO. Para
   afinar una página, el dueño edita UN solo hex (--gold) — peak/soft/gradiente/
   glow/precio derivan vía color-mix (Chrome soporta color-mix in srgb).

   NO se overridean home / rangos / paquete: usan los literales ámbar globales
   (cero regresión sobre el look Forge aprobado). Sus selectores quedan
   documentados abajo, comentados, como ranura editable.

   Hexes canónicos (no inventar nuevos — style.md §1): jade #2ED196 (economía),
   cian #44D9F9 (Zeus/pago), azul #3B82F6 (info), naranja #FFA600, púrpura
   #BD31EA (cosmético).
   =========================================================================== */

/* --- Dinero y XP → jade (economía / mercado) ----------------------------- */
body.cat-dinero-xp {
  --gold:             #2ED196;
  --gold-peak:        color-mix(in srgb, #2ED196 70%, #fff);
  --gold-soft:        color-mix(in srgb, #2ED196 82%, #fff);
  --color-price:      color-mix(in srgb, #2ED196 78%, #fff);
  --gradient-primary: linear-gradient(90deg, color-mix(in srgb, #2ED196 78%, #000) 0%, #2ED196 100%);
  --cta-glow:         0 0 24px color-mix(in srgb, #2ED196 55%, transparent);
  --cta-glow-h:       0 0 32px color-mix(in srgb, #2ED196 70%, transparent);
}

/* --- Cómo Pagar → cian (confianza / pago) -------------------------------- */
body.page-cms.cms-como-pagar {
  --gold:             #44D9F9;
  --gold-peak:        color-mix(in srgb, #44D9F9 70%, #fff);
  --gold-soft:        color-mix(in srgb, #44D9F9 82%, #fff);
  --color-price:      color-mix(in srgb, #44D9F9 78%, #fff);
  --gradient-primary: linear-gradient(90deg, color-mix(in srgb, #44D9F9 78%, #000) 0%, #44D9F9 100%);
  --cta-glow:         0 0 24px color-mix(in srgb, #44D9F9 55%, transparent);
  --cta-glow-h:       0 0 32px color-mix(in srgb, #44D9F9 70%, transparent);
}

/* --- FAQ → azul info (calmo) --------------------------------------------- */
body.page-cms.cms-faqs {
  --gold:             #3B82F6;
  --gold-peak:        color-mix(in srgb, #3B82F6 70%, #fff);
  --gold-soft:        color-mix(in srgb, #3B82F6 82%, #fff);
  --color-price:      color-mix(in srgb, #3B82F6 78%, #fff);
  --gradient-primary: linear-gradient(90deg, color-mix(in srgb, #3B82F6 78%, #000) 0%, #3B82F6 100%);
  --cta-glow:         0 0 24px color-mix(in srgb, #3B82F6 55%, transparent);
  --cta-glow-h:       0 0 32px color-mix(in srgb, #3B82F6 70%, transparent);
}

/* --- CMS backdrop + reading card (page-cms) — Forge consistency ----------
   Las páginas CMS no tienen hero, así que el fondo quedaba near-black plano y la
   .cms-prose (bg-raised + line + shadow-sm) apenas se despegaba. Le damos al body
   el MISMO glow Forge del hero (.hero-bg: ámbar arr-der + lava abj-izq) a alpha bajo
   y a página completa, compuesto SOBRE el wash superior heredado del body. El acento
   per-página (cian/azul en --gold) NO se toca: el backdrop del sitio siempre es ámbar.
   Cero HEX nuevo (mismos rgba Forge que .hero-bg / body). */
body.page-cms {
  background-image:
    radial-gradient(90% 70% at 88% -6%, rgba(245,158,11,.10), transparent 58%),
    radial-gradient(80% 70% at 6% 108%, rgba(220,38,38,.08), transparent 60%),
    radial-gradient(1200px 600px at 50% -200px, rgba(245,158,11,.06), transparent 70%);
}
/* Carta de lectura: súbela del fondo para que se lea como superficie deliberada,
   no como hueco negro. Más específica que el .cms-prose del <style> de la plantilla. */
body.page-cms .cms-prose {
  background:
    linear-gradient(180deg, var(--bg-raised-2), var(--bg-raised));
  border-color: var(--line-strong);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(245,158,11,.06);
}

/* --- Marca (ámbar) — ranuras editables, SIN override por diseño ----------
   Descomentar y poner un hex en --gold solo si se quiere apartar del ámbar.
   body.page-index   { --gold: #F59E0B; }     (home / hub)
   body.cat-3046146  { --gold: #F59E0B; }     (rangos / tiers en la tabla)
   body.page-package { --gold: #F59E0B; }     (paquete)
--- */

/* --- Placeholders (categorías aún no creadas en vivo) --------------------
   Cuando existan Kits/Beneficios, sustituir <slug> por su category.slug real
   (visible en body.className tras crearlas) y descomentar.
   body.cat-<slug-kits>       { --gold: #FFA600; }   (naranja / cálido)
   body.cat-<slug-beneficios> { --gold: #BD31EA; }   (púrpura / cosmético)
--- */

/* ===========================================================================
   18. PRODUCT MODAL  (M4 — Exo store-product-popup; el modal al clic en una card)
   ---------------------------------------------------------------------------
   Rediseño 2-columnas (decisión del dueño): IZQUIERDA = PNG del rango FLOTANTE
   (fondo transparente, drop-shadow) centrado verticalmente + debajo precio,
   "Añadir" y "Regalar"; DERECHA = la descripción (mismo tamaño), con scroll
   interno para que ambas columnas queden parejas y la imagen quede centrada.
   !important sobreescribe shared.css (Exo) + el scoped de package.html.
   =========================================================================== */
/* tope global de la imagen (también protege la página directa /package) */
.package-media-col img,
.package-media-col .image {
  max-height: 300px !important; width: auto !important; max-width: 100% !important;
  margin: 0 auto !important; display: block !important; object-fit: contain !important;
}
.store-product-popup-content {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  grid-template-areas: "title title" "buy descr" !important;
  column-gap: 64px !important;          /* separación clara panel↔detalles (whitespace, sin línea) */
  row-gap: 24px !important;
  align-items: center !important;       /* panel izq centrado verticalmente vs detalles */
  max-width: 1040px !important; width: min(1040px, 94vw) !important;
  max-height: 86vh !important;
  padding: 40px 48px 44px !important;   /* generoso: nada pegado al borde */
}
.store-product-popup-content .popup-close { grid-area: title; justify-self: end; align-self: start; }
.store-product-popup-content .product-title { grid-area: title !important; text-align: left !important; margin: 0 !important; }
.store-product-popup-content .package-layout {
  grid-area: buy !important; display: flex !important; flex-direction: column !important;
  gap: 20px !important; margin: 0 !important; align-self: center !important;
}
.store-product-popup-content .package-description {
  grid-area: descr !important; max-width: none !important; margin: 0 !important;
  max-height: 72vh !important; overflow-y: auto !important; padding-right: 16px !important;
}
/* media: PNG flotante, sin marco ni fondo (transparente), con sombra suave */
.store-product-popup-content .package-media-col { display: block !important; min-width: 0 !important; }
.store-product-popup-content .package-media-col .image,
.store-product-popup-content .package-media-col img {
  border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  max-height: 300px !important; width: auto !important; max-width: 100% !important;
  margin: 0 auto !important; display: block !important; object-fit: contain !important;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45)) !important;
}
/* buybox sin tarjeta pesada: stack centrado bajo la imagen */
.store-product-popup-content .package-info-col,
.store-product-popup-content .package-buybox {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; position: static !important;
}
/* botones sin panel: el fondo NEGRO de .product-actions (Exo) → transparente,
   para que se vea el fondo del modal (sin "interruptor" visual) [dueño]. */
.store-product-popup-content .product-actions {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  gap: var(--s-3) !important; text-align: center !important; background: transparent !important;
}
.store-product-popup-content .product-actions .price { text-align: center !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
.store-product-popup-content .quantity-field { background: transparent !important; }
/* nota de opciones: abajo, sutil — viñeta tenue, texto muted, centrado */
.store-product-popup-content .package-options-note {
  background: transparent !important; border: 0 !important; padding: 0 !important; margin-top: var(--s-1) !important;
  justify-content: center !important; font-size: var(--fs-xs) !important; color: var(--text-mute) !important;
}
.store-product-popup-content .package-options-note .opt-glyph { color: var(--text-mute) !important; font-size: 1em !important; }
/* "Regalar": Exo lo rompía con un icono btn-glyph + ocultaba el texto → forzar texto
   visible + estilo ghost transparente (visible sobre el fondo del modal) [dueño]. */
.store-product-popup-content .gift {
  display: inline-flex !important; height: auto !important; min-height: 42px !important;
  width: 100% !important; padding: 11px 16px !important; flex: 0 0 auto !important;
  opacity: 1 !important; font-size: var(--fs-sm) !important; gap: var(--s-2) !important;
  text-indent: 0 !important; overflow: visible !important; white-space: nowrap !important;
  background: transparent !important; background-image: none !important;
  -webkit-mask: none !important; mask: none !important;
  border: 1px solid var(--accent-lava) !important; color: var(--text) !important;
}
.store-product-popup-content .gift:hover { background: var(--bg-raised-2) !important; }
.store-product-popup-content .gift::before,
.store-product-popup-content .gift::after { content: none !important; display: none !important; background: none !important; }

/* ===========================================================================
   J2 — Rangos: tabs de tier (móvil) + barra CTA fija + realce columna popular
   =========================================================================== */

/* Altura nominal de la barra CTA fija (contenido sin safe-area). Se usa para
   reservar el espacio en el body (C2) y debe ser >= la altura real renderizada
   (padding 2×var(--s-3)=24 + fila fs-lg/btn-sm ~40 + border 1 ≈ 65px → 72 con holgura). */
:root { --rank-buybar-h: 72px; }

/* Tabs + barra: ocultos por defecto (desktop y/o sin JS). Se muestran solo en
   móvil CON .js-tabs (progressive enhancement). */
.rank-tabs,
.rank-buybar { display: none; }

.rank-tabs {
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-1);
}
.rank-tab {
  flex: 1 1 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.rank-tab.is-active {
  background: var(--gradient-primary);
  color: var(--primary-fg);
  box-shadow: var(--shadow-sm);
}

.rank-buybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 201;                /* sobre el bottom-nav (200), que además se oculta en rangos */
  background: var(--bg);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 20px rgba(0,0,0,.35);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
}
.rank-buybar-row {
  display: none;              /* CSS muestra solo la del data-active (abajo) */
  align-items: center;
  gap: var(--s-3);
}
.rank-buybar-row .rbb-tier {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text);
}
.rank-buybar-row .rbb-price {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-price);
}
.rank-buybar-row .btn { flex: 0 0 auto; }

/* ---- MÓVIL: tabs activos (≤720px, solo con .js-tabs) ---- */
@media (max-width: 720px) {
  .rank-table.js-tabs .rank-tabs { display: flex; }
  .rank-table.js-tabs .rank-buybar { display: block; }

  /* la barra muestra solo la fila del tier activo */
  .rank-table.js-tabs[data-active="Atlas"] .rank-buybar-row[data-tier="Atlas"],
  .rank-table.js-tabs[data-active="Verus"] .rank-buybar-row[data-tier="Verus"],
  .rank-table.js-tabs[data-active="Zeus"]  .rank-buybar-row[data-tier="Zeus"] { display: flex; }

  /* con tabs activos: ocultar los 3 col-heads apilados (precio/CTA viven en la barra)
     y mostrar solo las celdas del tier activo */
  .rank-table.js-tabs .rank-col-head { display: none; }
  .rank-table.js-tabs[data-active="Atlas"] .rank-cell:not([data-tier="Atlas"]),
  .rank-table.js-tabs[data-active="Verus"] .rank-cell:not([data-tier="Verus"]),
  .rank-table.js-tabs[data-active="Zeus"]  .rank-cell:not([data-tier="Zeus"]) { display: none; }

  /* el tab ya indica el tier → quitar el prefijo data-tier de la celda */
  .rank-table.js-tabs .rank-cell::before { content: none; }

  /* La barra CTA REEMPLAZA el bottom-nav SOLO cuando los tabs están activos (con JS).
     REVIEW-FIX: gateado a :has(.rank-table.js-tabs) — sin JS el usuario conserva el
     bottom-nav (y la tabla apilada como fallback), no se queda sin ninguno de los dos.
     La navegación sigue disponible por la navbar sticky al subir. */
  body.cat-3046146:has(.rank-table.js-tabs) .site-bottomnav { display: none !important; }

  /* REVIEW-FIX (css major #1 + #2): reservar el espacio de la barra fija en el BODY,
     UNA sola vez y con la altura real (incluye safe-area). El !important vence a la
     reserva existente del bottom-nav `body:has(#site-bottomnav)` (especificidad (1,0,1)
     por el id), que de otro modo sumaría ~64px muertos a ≤640px aunque el bottom-nav
     esté display:none (el :has matchea por EXISTENCIA del elemento). NO se usa
     padding-bottom mágico en .rank-table. Solo cuando hay .js-tabs (la barra activa). */
  body.cat-3046146:has(.rank-table.js-tabs) {
    padding-bottom: calc(var(--rank-buybar-h, 72px) + env(safe-area-inset-bottom)) !important;
  }
}

/* ---- DESKTOP (≥721px): realce de la columna popular (Verus) ----
   Refuerza el wash sutil actual (.05/.06) para que el ojo baje por TODA la columna
   ancla, no solo vea el badge. Gold rgba + --tier-verus (sin HEX nuevo). */
@media (min-width: 721px) {
  .rank-col-head.is-featured {
    background: linear-gradient(180deg, rgba(255,209,21,.14), rgba(255,209,21,.04));
    box-shadow: inset 0 3px 0 0 var(--tier-verus), 0 -8px 26px rgba(255,209,21,.10);
    border-radius: var(--r) var(--r) 0 0;
  }
  .rank-cell.is-featured {
    background: rgba(255,209,21,.085);
    box-shadow: inset 1px 0 0 rgba(255,209,21,.42), inset -1px 0 0 rgba(255,209,21,.42);
  }
  .rank-cell.is-featured.rank-last {
    box-shadow:
      inset 1px 0 0 rgba(255,209,21,.42),
      inset -1px 0 0 rgba(255,209,21,.42),
      inset 0 -2px 0 rgba(255,209,21,.5);
    border-radius: 0 0 var(--r) var(--r);
  }
}

/* ===========================================================================
   J2.1 — Afinado del rango (post-J2): badge sin clip + CTA por color de tier
   =========================================================================== */

/* (1) El badge "MÁS POPULAR" se clipeaba: estaba a top:-13px y sobresalía por
   ENCIMA del .rank-table-grid (que tiene overflow:hidden para las esquinas
   redondeadas, :988). Lo bajamos DENTRO del header; is-featured recibe más
   padding-top para que el título "Verus" quede holgado debajo del badge. */
.rank-col-head .badge-popular {
  top: var(--s-1); z-index: 2;
  white-space: nowrap;                /* 1 línea — el wrap a 2 lo hacía "gordo" (48px) */
  padding: 3px 11px; font-size: 10px; line-height: 1.4; letter-spacing: .05em;
}
/* sin extra de padding-top → Verus alineado con Atlas/Zeus; el badge slim cabe en el
   espacio del margin-top del título (era var(--s-12), bajaba el título 24px). */
.rank-col-head.is-featured { padding-top: var(--s-6); }

/* (2) CTA "Obtener" con la gradiente del rango (verde/oro/cian), no el ámbar Forge.
   --tier-accent ya está por col-head (:997-999); lo replicamos en las filas de la
   barra CTA móvil. Configurable: cambiar los tokens --tier-* recolorea botón +
   gradiente + glow + hover. Texto near-black (var(--bg)) legible sobre los 3 hues. */
.rank-buybar-row[data-tier="Atlas"] { --tier-accent: var(--tier-atlas); }
.rank-buybar-row[data-tier="Verus"] { --tier-accent: var(--tier-verus); }
.rank-buybar-row[data-tier="Zeus"]  { --tier-accent: var(--tier-zeus); }

.rank-col-head .rank-table-cta .btn-gold,
.rank-buybar-row .btn-gold {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tier-accent) 85%, #000) 0%, var(--tier-accent) 100%);
  color: var(--bg);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--tier-accent) 36%, transparent);
}
.rank-col-head .rank-table-cta .btn-gold:hover,
.rank-buybar-row .btn-gold:hover {
  background: linear-gradient(135deg, var(--tier-accent) 0%, color-mix(in srgb, var(--tier-accent) 70%, #fff) 100%);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--tier-accent) 52%, transparent);
  color: var(--bg);
}

/* ===========================================================================
   J3 — Modal de paquete: chip de prefijo MC + lista de beneficios sin emoji
   =========================================================================== */

/* Chip inline de comando (/home, /vault…). REVIEW-FIX (twig major): NO existía
   regla `code` en el tema → los <code> salían sin estilo. Además estilamos el
   ELEMENTO <code> (no solo .mc-prefix) para que, si el WYSIWYG de Tebex borra
   class="mc-prefix" al guardar, el prefijo siga viéndose como chip mono. */
.package-description code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--bg-raised-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  color: var(--text);
}

/* Chip de prefijo in-game: variante de bloque del chip (línea de "chat" MC),
   self-contained (funciona sobre <code class="mc-prefix"> o <span>). El COLOR del
   prefijo lo ponen spans inline (style="color:#…") en el contenido. */
.package-description .mc-prefix {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  margin: var(--s-1) 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Lista de beneficios limpia: SOLO las listas nuevas con class="benefits" reciben
   el marcador "✓". REVIEW-FIX (css major): gatear a .benefits evita el doble
   marcador ✓🟩✅ si una descripción vieja aún trae emoji. El `/ ""` oculta el ✓
   del árbol de accesibilidad (es decorativo). */
.package-description ul.benefits {
  list-style: none;
  padding-left: 0;
}
.package-description ul.benefits li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--text);
}
.package-description ul.benefits li::before {
  content: "✓" / "";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success);
  font-weight: 700;
}

/* ===========================================================================
   J4 — Pasada de afinado (bundle 2026-06-10): gradiente ámbar cálido / hero
   compacto + Categorías al frente / botón por color de tier / descripción rica.
   Plan: docs/superpowers/plans/2026-06-10-tebex-store-refine-bundle.md
   =========================================================================== */

/* --- §J4.A — badge "MÁS POPULAR" con más cuerpo que el hero (135deg + glow tenue).
   El hero mantiene el gradiente plano/sutil de §8 (--gold-grad). Mismo ámbar cálido.
   El badge vive en la tabla de rangos (.rank-col-head, category.html), no en el hero. */
.badge-popular {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  box-shadow: 0 2px 10px rgba(245,158,11,.30);
}

/* --- §J4.B — hero compacto (menos landing) + Categorías como sección líder.
   `.hero--compact` está EN el elemento .hero → selector `.hero.hero--compact h1`
   (0,2,1 vence a `.hero h1` §8:747). NO `.hero--compact .hero h1` (anidación fantasma). */
.hero--compact .hero-inner { padding: var(--s-12) var(--s-6) var(--s-8); }
.hero.hero--compact h1 { font-size: var(--fs-3xl); }   /* 56px (--fs-hero) → 40px */
.hero--compact .hero-tagline { font-size: var(--fs-lg); margin-bottom: var(--s-6); }
.hero--compact .hero-rule { margin-bottom: var(--s-5); }

.section--lead .section-head h2 { font-size: var(--fs-2xl); }
/* Sección líder: media un poco más alta + etiqueta mayor (adapta el viejo override
   de min-height/label al nuevo modelo media-arriba / texto-abajo). */
.section--lead .category-tile .tile-media { aspect-ratio: 16 / 11; }
.section--lead .category-tile .tile-media__crest { font-size: clamp(2.8rem, 7vw, 4.2rem); }
.section--lead .category-tile .tile-body { padding: var(--s-6); }
.section--lead .category-tile .tile-label { font-size: var(--fs-2xl); }
@media (max-width: 720px) {
  .section--lead .category-tile .tile-media { aspect-ratio: 16 / 9; }
  .hero.hero--compact h1 { font-size: var(--fs-2xl); }
}

/* --- §J4.C — botón de compra coloreado por el tier del paquete (modal + página directa).
   Scope en .package-layout (hijo que SOBREVIVE a la extracción del modal; el wrapper
   .package-detail se descarta — ver coldfire-twig §3.5). Espeja J2.1. Config por --tier-*. */
.package-layout.pkg-atlas { --tier-accent: var(--tier-atlas); }
.package-layout.pkg-verus { --tier-accent: var(--tier-verus); }
.package-layout.pkg-zeus  { --tier-accent: var(--tier-zeus); }

.package-layout[class*="pkg-"] .product-actions .btn-primary,
.package-layout[class*="pkg-"] .product-actions .add,
.package-layout[class*="pkg-"] .product-actions .subscribe {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tier-accent) 85%, #000) 0%, var(--tier-accent) 100%) !important;
  color: var(--bg) !important;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--tier-accent) 36%, transparent) !important;
}
.package-layout[class*="pkg-"] .product-actions .btn-primary:hover,
.package-layout[class*="pkg-"] .product-actions .add:hover,
.package-layout[class*="pkg-"] .product-actions .subscribe:hover {
  background: linear-gradient(135deg, var(--tier-accent) 0%, color-mix(in srgb, var(--tier-accent) 70%, #fff) 100%) !important;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--tier-accent) 52%, transparent) !important;
  color: var(--bg) !important;
}

/* --- §J4.D — descripción de paquete rica: secciones (h3), tagline, cierre, delivery.
   El tier se mapea en .package-description.pkg-<tier> (la clase viaja en ESE elemento,
   que sobrevive al modal). Sin tier → --gold-soft (en modal = ámbar :root). Sin emoji. */
.package-description.pkg-atlas { --tier-accent: var(--tier-atlas); }
.package-description.pkg-verus { --tier-accent: var(--tier-verus); }
.package-description.pkg-zeus  { --tier-accent: var(--tier-zeus); }
.package-description { --descr-accent: var(--tier-accent, var(--gold-soft)); }

.package-description h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--descr-accent);
  margin: var(--s-6) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  letter-spacing: .01em;
}
.package-description h3:first-child { margin-top: 0; }

.package-description .pkg-tagline {
  text-align: center; font-style: italic; color: var(--text-dim);
  font-size: var(--fs-base); margin: 0 0 var(--s-5);
}
.package-description .pkg-close {
  text-align: center; font-style: italic; color: var(--descr-accent);
  margin: var(--s-6) 0 var(--s-2); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.package-description .pkg-delivery {
  text-align: center; font-size: var(--fs-xs); color: var(--text-mute); margin: 0;
}

/* marker ✓ de beneficios sigue el acento del tier (override del §J3 success) */
.package-description ul.benefits li::before { color: var(--descr-accent); }

/* ===========================================================================
   J5 — Cómo Pagar: logos de tarjetas (tiles claros) + chips de texto LatAm
   + flujo "¿Cómo compro?" numerado. El acento --gold en esta página = cian
   #44D9F9 (M3 §17 cms-como-pagar). Plan: docs/superpowers/plans/2026-06-11-tebex-j5-como-pagar.md
   =========================================================================== */
/* generic.css centra .store-text h2/h3 → forzar izquierda (alinear con grilla/pasos) */
.cms-prose h2, .cms-prose h3 { text-align: left; }

.cms-prose .pay-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); margin: var(--s-5) 0 var(--s-2); }

/* Tarjetas/wallets: tiles claros (#F8FAFC, no #fff puro) para logos color legibles */
.cms-prose ul.pay-grid { list-style: none; padding: 0; margin: 0 0 var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cms-prose ul.pay-grid > li {
  margin: 0;                                   /* neutraliza .text-content li margin-bottom (§2) */
  background: #F8FAFC; border: 1px solid rgba(0,0,0,.08); border-radius: var(--r-sm);
  height: 44px; min-width: 64px; padding: 6px 12px; display: inline-grid; place-items: center;
}
.cms-prose ul.pay-grid > li img { max-height: 24px; max-width: 100%; object-fit: contain; display: block; }

/* Métodos LatAm: chips de texto uniformes, acento cian de página */
.cms-prose ul.pay-chips { list-style: none; padding: 0; margin: 0 0 var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cms-prose ul.pay-chips > li {
  margin: 0;
  background: color-mix(in srgb, var(--gold) 10%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--text); border-radius: var(--r-pill);
  padding: 7px 14px; font-size: var(--fs-sm); font-weight: 600;
}

/* Flujo "¿Cómo compro?": círculo cian numerado (counter) + conector vertical */
.cms-prose ol.cms-steps { list-style: none; counter-reset: step; padding-left: 0; margin: var(--s-6) 0; }
.cms-prose ol.cms-steps > li {
  position: relative; counter-increment: step; display: block; margin: 0;
  padding-left: calc(var(--s-12) + var(--s-3)); padding-bottom: var(--s-6); min-height: 40px;
}
.cms-prose ol.cms-steps > li:last-child { padding-bottom: 0; }
.cms-prose ol.cms-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: var(--bg); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent);
}
.cms-prose ol.cms-steps > li::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--line-strong); }
.cms-prose ol.cms-steps > li:last-child::after { display: none; }

/* ===========================================================================
   19. CART DRAWER  (cart-polish — el popup deslizante del carrito)
   ---------------------------------------------------------------------------
   main.js (openBasket ~L1025) inyecta SOLO los HIJOS de form.basket en
   .popup-content.basket-popup-content.basket vía getBySelectorFromHTML
   (append(...result.children), L1115). El <style> de checkout.html es HERMANO
   del form → NUNCA se inyecta. Por tanto dentro del drawer NO existe el nodo
   form.basket: el único hijo directo inyectado (carrito con items) es
   .checkout-grid; en vacío son .basket-header[hidden] + .empty-state. Solo
   aplican las reglas stock `.basket .basket-*` de shared.css (otro DOM Exo) →
   carrito apretado, sin tarjetas, × flotante y "Pagar" recortado. Igual que
   §18 (product modal), reconstruimos el look aquí, en style.css (global →
   siempre carga en el popup), scopeado a .basket-popup-content para NO tocar
   la página /checkout (que sí carga su propio <style>). Sin HEX nuevos:
   tokens :root + rgba() de RGB existentes. Hooks de main.js intactos
   (.basket-item, .quantity-field, button.checkout, .basket-redeem .redeemed,
   .basket-checkout .total, .basket-header[data-ident] oculto-no-removido).
   =========================================================================== */

/* ---- DRAWER SHELL: cómodo, anclado a la derecha, full-height -------------- */
.basket-popup .popup-scroll-cont { align-items: stretch !important; justify-content: flex-end !important; padding: 0 !important; }
.basket-popup-content {
  width: min(480px, 100vw) !important;
  max-width: 480px !important;
  margin: 0 0 0 auto !important;        /* pega el drawer al borde derecho */
  min-height: 100dvh !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;                /* el padding vive en cada bloque */
  background: var(--bg-raised) !important;
  border-left: 1px solid var(--line) !important;
  box-shadow: -24px 0 60px rgba(0,0,0,.45) !important;
}

/* ---- STICKY HEADER: título "Tu pedido" + la × del popup en su barra ------- */
.basket-popup-content::before {
  content: "Tu pedido";
  position: sticky; top: 0; z-index: 3;
  display: block; flex: none;
  padding: var(--s-5) var(--s-6);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700;
  color: var(--gold-soft); letter-spacing: -.01em;
}
.basket-popup-content .popup-close {
  position: absolute !important; top: var(--s-3) !important; right: var(--s-4) !important;
  width: 40px !important; height: 40px !important; z-index: 4 !important;
  border-radius: var(--r-sm) !important; opacity: .6 !important;
}
.basket-popup-content .popup-close:hover { opacity: 1 !important; background: rgba(245,158,11,.12) !important; }

/* ---- columna que crece = .checkout-grid (hijo directo inyectado), NO form --
   FIX-REVISIÓN: form.basket no existe en el popup (solo se inyectan sus hijos);
   el contenedor que debe llenar la altura y dar contexto al body scrollable +
   footer anclado es .checkout-grid. */
.basket-popup-content .basket-header { display: none !important; }   /* hook presente (data-ident); barra stock fea oculta */
.basket-popup-content .checkout-grid {
  flex: 1 1 auto !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 0 !important;
}
.basket-popup-content .basket-panel,
.basket-popup-content .summary-panel {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
}
.basket-popup-content .basket-panel { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; position: static !important; padding: var(--s-5) var(--s-6) var(--s-6) !important; }

/* ---- conteo + subtotal corriente ----------------------------------------- */
.basket-popup-content .basket-second-header {
  display: flex !important; align-items: baseline !important; justify-content: space-between !important;
  gap: var(--s-3) !important; padding: 0 0 var(--s-4) !important; margin: 0 0 var(--s-4) !important;
  background: transparent !important; text-align: left !important;
  border-bottom: 1px solid var(--line) !important; font-weight: 600 !important;
}
.basket-popup-content .basket-second-header .count { color: var(--text-dim); font-size: var(--fs-sm); }
.basket-popup-content .basket-second-header .total { font-family: var(--font-display); font-size: var(--fs-base) !important; }
.basket-popup-content .basket-second-header .total strong { color: var(--gold-soft); font-weight: 700 !important; }

/* ---- líneas del carrito: tarjeta --bg con borde --line ------------------- */
.basket-popup-content .basket-content { flex: none !important; overflow: visible !important; }
.basket-popup-content .basket-items { display: flex !important; flex-direction: column !important; gap: var(--s-3) !important; padding: 0 !important; }
.basket-popup-content .basket-item {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas: "info qty" "info remove" !important;
  align-items: center !important; gap: var(--s-2) var(--s-4) !important;
  width: 100% !important; padding: var(--s-4) !important;
  background: var(--bg) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r) !important; transition: border-color var(--t) !important;
}
.basket-popup-content .basket-item:hover { border-color: var(--line-strong) !important; }
.basket-popup-content .basket-item .info { grid-area: info !important; min-width: 0 !important; margin: 0 !important; }
.basket-popup-content .basket-item .title { font-family: var(--font-display); font-size: var(--fs-base) !important; font-weight: 600 !important; margin: 0 0 var(--s-1) !important; }
.basket-popup-content .basket-item .title a { color: var(--text); }
.basket-popup-content .basket-item .title a:hover { color: var(--gold-soft); }
.basket-popup-content .basket-item .options { list-style: none !important; margin: 0 0 var(--s-2) !important; padding: 0 !important; }
.basket-popup-content .basket-item .options li { display: block; font-size: var(--fs-xs); color: var(--text-mute); padding: 1px 0; }
.basket-popup-content .basket-item .options li::before { content: none !important; }
.basket-popup-content .basket-item .options li strong { color: var(--text-dim); font-weight: 600; }
.basket-popup-content .basket-item .price { color: var(--text) !important; font-family: var(--font-display); font-size: var(--fs-base) !important; }
.basket-popup-content .basket-item .price strong { color: var(--gold-soft); font-size: 1em !important; font-weight: 700 !important; }
.basket-popup-content .basket-item .quantity-field { grid-area: qty !important; --btn-size: auto; width: 116px !important; justify-self: end !important; }
.basket-popup-content .basket-item .quantity-field .quantity { width: 40px !important; padding: 8px 0 !important; }
.basket-popup-content .basket-item .quantity-field .adjust { padding: 0 12px !important; }
.basket-popup-content .basket-item .remove {
  grid-area: remove !important; justify-self: end !important; flex: none !important;
  --btn-size: auto; --btn-icon: none;
  padding: 6px 12px !important; font-size: var(--fs-xs) !important;
  color: var(--text-mute) !important; background: transparent !important; border-color: transparent !important;
}
.basket-popup-content .basket-item .remove:hover { color: var(--danger) !important; background: rgba(220,38,38,.10) !important; border-color: rgba(220,38,38,.30) !important; }

/* ---- cupón / tarjeta de regalo ------------------------------------------- */
.basket-popup-content .basket-redeem { margin-top: var(--s-5) !important; padding-top: var(--s-5) !important; border-top: 1px solid var(--line) !important; }
.basket-popup-content .basket-redeem .redeem-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); margin: 0 0 var(--s-2); }
.basket-popup-content .basket-redeem .redeem-form { display: flex; gap: var(--s-2); }
.basket-popup-content .basket-redeem .redeem-form input { flex: 1; min-width: 0; }
.basket-popup-content .basket-redeem .redeem-hint { font-size: var(--fs-xs); color: var(--text-mute); margin: var(--s-2) 0 0; }
.basket-popup-content .basket-redeem .redeemed { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.basket-popup-content .basket-redeem .redeemed .chip { padding: 6px 12px; font-size: var(--fs-xs); }
.basket-popup-content .basket-redeem .redeemed .chip a { color: var(--text-mute); font-weight: 700; line-height: 1; }
.basket-popup-content .basket-redeem .redeemed .chip a:hover { color: var(--danger); }

/* ---- FOOTER ANCLADO: resumen + acuerdo + Pagar (siempre visible) ---------
   .summary-panel es hijo de .checkout-grid (que ya es flex-column flex:1 con
   .basket-panel scrolleando) → sticky bottom queda pineado al fondo del drawer. */
.basket-popup-content .summary-panel {
  position: sticky !important; bottom: 0 !important; z-index: 2; flex: none !important;
  padding: var(--s-5) var(--s-6) !important;
  background: var(--bg-raised) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -16px 32px rgba(19,19,28,.6) !important;
}
.basket-popup-content .summary-panel h2 { display: none !important; }   /* el título del drawer ya dice "Tu pedido" */
.basket-popup-content .summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-dim); padding: 2px 0; }
.basket-popup-content .summary-total,
.basket-popup-content .basket-checkout {
  display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: var(--s-3) !important;
  margin: var(--s-2) 0 var(--s-1) !important; padding: var(--s-3) 0 0 !important;
  border-top: 1px solid var(--line) !important;
}
.basket-popup-content .summary-total .lbl { font-family: var(--font-display); font-size: var(--fs-base); color: var(--text); }
.basket-popup-content .summary-total .total { font-family: var(--font-display); font-size: var(--fs-xl) !important; }
.basket-popup-content .summary-total .total strong { color: var(--gold-soft); font-weight: 700 !important; }
.basket-popup-content .summary-tax-note { font-size: var(--fs-xs); color: var(--text-mute); margin: 0 0 var(--s-3); }
.basket-popup-content .agreement { display: flex; align-items: flex-start; gap: var(--s-3); margin: var(--s-3) 0; cursor: pointer; }
.basket-popup-content .agreement .agreement-text { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.5; }
.basket-popup-content .agreement .agreement-text a { color: var(--gold-soft); }
.basket-popup-content .checkout-pay { width: 100% !important; margin-top: var(--s-1) !important; }
.basket-popup-content .checkout-pay-note { font-size: var(--fs-xs); color: var(--text-mute); text-align: center; margin: var(--s-2) 0 0; }

/* ---- carrito vacío: centrado y cómodo dentro del drawer ------------------ */
.basket-popup-content .empty-state { margin: auto !important; padding: var(--s-12) var(--s-6) !important; }
.basket-popup-content .basket-empty { margin: auto; padding: var(--s-12); text-align: center; color: var(--text-dim); }

/* ---- móvil: el drawer ocupa el ancho completo ---------------------------- */
@media (max-width: 520px) {
  .basket-popup-content { width: 100vw !important; max-width: 100vw !important; border-left: 0 !important; }
}