/* ============================================================
   MOBILE EXPRESS DENIA — COMPLETE THEME SYSTEM v2.0
   Premium dark aesthetic (React-Bits inspired) + clean light
   ============================================================ */

/* ── LIGHT MODE (default) ─────────────────────────────────── */
:root {
  /* SURFACES */
  --mx-surface-primary:    #ffffff;
  --mx-surface-secondary:  #F5F5F7;
  --mx-surface-tertiary:   #f3f4f6;
  --mx-surface-elevated:   #ffffff;
  --mx-surface-inverse:    #0B0F1C;

  /* TEXT */
  --mx-text-primary:       #101014;
  --mx-text-secondary:     #5d5d66;
  --mx-text-tertiary:      #8a8a94;
  --mx-text-inverse:       #ffffff;
  --mx-text-on-accent:     #ffffff;
  --mx-text-on-amber:      #111111;

  /* BORDERS */
  --mx-border-default:     #e6e6ea;
  --mx-border-subtle:      #f0f0f4;
  --mx-border-strong:      #c8c8d0;
  --mx-border-accent:      #0A58FF;

  /* ACCENTS */
  --mx-accent-primary:     #0A58FF;
  --mx-accent-secondary:   #7C3AED;
  --mx-accent-amber:       #FFD400;
  --mx-accent-whatsapp:    #25D366;

  /* SEMANTIC */
  --mx-success:            #16a34a;
  --mx-success-soft:       #e8f7ee;
  --mx-success-text:       #0a6b2d;
  --mx-warning:            #d97706;
  --mx-warning-soft:       #fff4de;
  --mx-warning-text:       #8a5a00;
  --mx-error:              #e11d48;
  --mx-error-soft:         #ffe4e6;
  --mx-error-text:         #be123c;
  --mx-info:               #0A58FF;
  --mx-info-soft:          #e8f0fe;
  --mx-info-text:          #0A58FF;

  /* SHADOWS */
  --mx-shadow-xs:          0 1px 3px rgba(0,0,0,.04);
  --mx-shadow-sm:          0 2px 8px rgba(0,0,0,.06);
  --mx-shadow-md:          0 8px 32px rgba(0,0,0,.10);
  --mx-shadow-lg:          0 20px 60px rgba(0,0,0,.15);
  --mx-shadow-xl:          0 30px 80px rgba(0,0,0,.22);

  /* GLASS */
  --mx-glass-bg:           rgba(255,255,255,.72);
  --mx-glass-bg-strong:    rgba(255,255,255,.88);
  --mx-glass-border:       rgba(255,255,255,.45);
  --mx-glass-blur:         16px;
  --mx-glass-saturate:     1.2;

  /* GRADIENTS */
  --mx-grad-hero:          linear-gradient(135deg, #0B0D12 55%, #1A2230);
  --mx-grad-accent:        linear-gradient(135deg, #0A58FF, #7C3AED);
  --mx-grad-amber:         linear-gradient(135deg, #FFD400, #FFA500);
  --mx-grad-surface:       linear-gradient(180deg, var(--mx-surface-secondary), var(--mx-surface-primary));
  --mx-grad-card-hover:    linear-gradient(135deg, rgba(10,88,255,.04), rgba(124,58,237,.04));

  /* HERO (always dark) */
  --mx-hero-bg:            #0B0D12;
  --mx-hero-text:          #ffffff;
  --mx-hero-text-dim:      #bcc3d2;
  --mx-hero-accent:        rgba(255,255,255,.13);

  /* CANVAS / BODY LEGACY (compat) */
  --bg:                    var(--mx-surface-primary);
  --bg2:                   var(--mx-surface-secondary);
  --ink:                   var(--mx-text-primary);
  --mut:                   var(--mx-text-secondary);
  --line:                  var(--mx-border-default);
  --acc:                   var(--mx-accent-primary);
  --volt:                  var(--mx-accent-amber);
  --wa:                    var(--mx-accent-whatsapp);
  --head:                  var(--mx-glass-bg);
  --field:                 var(--mx-surface-tertiary);
  --shadow:                var(--mx-shadow-md);
  --r:                     18px;
  --max:                   1480px;
  --h1:                    68px;
  --h2:                    58px;
  --radius-pill:           999px;

  /* TRANSITION */
  --mx-transition-theme:  300ms cubic-bezier(.4,0,.2,1);
}

/* ── DARK MODE ────────────────────────────────────────────── */
[data-theme="dark"] {
  /* SURFACES */
  --mx-surface-primary:    #0B0F1C;
  --mx-surface-secondary:  #121828;
  --mx-surface-tertiary:   #161c2e;
  --mx-surface-elevated:   #1a2236;
  --mx-surface-inverse:    #F4F4F5;

  /* TEXT */
  --mx-text-primary:       #F4F4F5;
  --mx-text-secondary:     #9aa1b0;
  --mx-text-tertiary:      #6b7280;
  --mx-text-inverse:       #0B0F1C;
  --mx-text-on-accent:     #ffffff;
  --mx-text-on-amber:      #111111;

  /* BORDERS */
  --mx-border-default:     #242c40;
  --mx-border-subtle:      #1e2536;
  --mx-border-strong:      #3a4560;
  --mx-border-accent:      #5B8CFF;

  /* ACCENTS */
  --mx-accent-primary:     #5B8CFF;
  --mx-accent-secondary:   #A78BFA;
  --mx-accent-amber:       #FFD400;
  --mx-accent-whatsapp:    #25D366;

  /* SEMANTIC */
  --mx-success:            #4ade80;
  --mx-success-soft:       rgba(74,222,128,.12);
  --mx-success-text:       #4ade80;
  --mx-warning:            #fbbf24;
  --mx-warning-soft:       rgba(251,191,36,.12);
  --mx-warning-text:       #fbbf24;
  --mx-error:              #fb7185;
  --mx-error-soft:         rgba(251,113,133,.12);
  --mx-error-text:         #fb7185;
  --mx-info:               #5B8CFF;
  --mx-info-soft:          rgba(91,140,255,.12);
  --mx-info-text:          #5B8CFF;

  /* SHADOWS */
  --mx-shadow-xs:          0 1px 3px rgba(0,0,0,.20);
  --mx-shadow-sm:          0 2px 8px rgba(0,0,0,.30);
  --mx-shadow-md:          0 8px 32px rgba(0,0,0,.40);
  --mx-shadow-lg:          0 20px 60px rgba(0,0,0,.55);
  --mx-shadow-xl:          0 30px 80px rgba(0,0,0,.65);

  /* GLASS */
  --mx-glass-bg:           rgba(11,15,28,.72);
  --mx-glass-bg-strong:    rgba(11,15,28,.88);
  --mx-glass-border:       rgba(255,255,255,.10);
  --mx-glass-blur:         16px;
  --mx-glass-saturate:     1.2;

  /* GRADIENTS */
  --mx-grad-hero:          linear-gradient(135deg, #0B0D12 55%, #1A2230);
  --mx-grad-accent:        linear-gradient(135deg, #5B8CFF, #A78BFA);
  --mx-grad-amber:         linear-gradient(135deg, #FFD400, #FFA500);
  --mx-grad-surface:       linear-gradient(180deg, var(--mx-surface-secondary), var(--mx-surface-primary));
  --mx-grad-card-hover:    linear-gradient(135deg, rgba(91,140,255,.06), rgba(167,139,250,.06));

  /* HERO (same as light — always dark) */
  --mx-hero-bg:            #0B0D12;
  --mx-hero-text:          #ffffff;
  --mx-hero-text-dim:      #bcc3d2;
  --mx-hero-accent:        rgba(255,255,255,.13);

  /* CANVAS / BODY LEGACY (compat) */
  --bg:                    var(--mx-surface-primary);
  --bg2:                   var(--mx-surface-secondary);
  --ink:                   var(--mx-text-primary);
  --mut:                   var(--mx-text-secondary);
  --line:                  var(--mx-border-default);
  --acc:                   var(--mx-accent-primary);
  --volt:                  var(--mx-accent-amber);
  --wa:                    var(--mx-accent-whatsapp);
  --head:                  var(--mx-glass-bg);
  --field:                 var(--mx-surface-tertiary);
  --shadow:                var(--mx-shadow-md);
}

/* ── SMOOTH THEME TRANSITION ──────────────────────────────── */
html,
html body,
html header,
html .wrap,
html footer,
html .hero,
html .card,
html .btn,
html .iconbtn,
html .chip,
html .offer,
html .dev,
html .av,
html .model,
html .pill2,
html .modal,
html .modal-bg,
html .searchbar input,
html .faq details,
html .rev,
html .band-soft,
html .band-ink,
html .stats-band,
html .quote,
html .resbox,
html .sticky,
html .fab,
html .mx-footer,
html .mx-ck,
html .mx-ck-panel,
html .topmarq,
html .hero-ticker {
  transition:
    background-color var(--mx-transition-theme),
    color var(--mx-transition-theme),
    border-color var(--mx-transition-theme),
    box-shadow var(--mx-transition-theme);
}

/* ── THEME TOGGLE BUTTON ──────────────────────────────────── */
#theme,
#themeBtn {
  transition: transform .4s cubic-bezier(.2,.7,.2,1.4);
}
#theme:hover,
#themeBtn:hover {
  transform: rotate(40deg) scale(1.08);
}
#themeBtn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
}

/* ── HERO: ALWAYS DARK (React-Bits style) ─────────────────── */
.hero {
  background: var(--mx-grad-hero);
  color: var(--mx-hero-text);
  box-shadow: 0 30px 80px rgba(10,15,28,.28);
}

/* Hero text tokens (scoped, theme-independent) */
.hero h1, .hero h2 {
  color: var(--mx-hero-text);
}
.hero p {
  color: var(--mx-hero-text-dim);
}
.hero .kicker-volt {
  color: var(--mx-accent-amber);
}
.hero .btn {
  background: var(--mx-accent-amber);
  color: var(--mx-text-on-amber);
}
.hero .btn.ghost {
  background: transparent;
  color: var(--mx-hero-text);
  border-color: rgba(255,255,255,.35);
}
.hero .btn.blue {
  background: var(--mx-accent-primary);
  color: var(--mx-text-on-accent);
}
.hero .dots button {
  background: rgba(255,255,255,.35);
}
.hero .dots button.on {
  background: var(--mx-accent-amber);
  box-shadow: 0 0 12px rgba(255,212,0,.65);
}
.hero .arrows button {
  background: rgba(255,255,255,.12);
  color: var(--mx-hero-text);
  border-color: rgba(255,255,255,.25);
}
.hero .phone3d {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}
.hero .slide .cta-row .btn {
  transition: transform .25s, box-shadow .25s;
}
.hero .slide p {
  color: var(--mx-hero-text-dim);
}
.hero .trust {
  color: #d6dbe6;
}
.hero .chip {
  background: #fff;
  color: #111;
}
.hero .crack {
  color: var(--mx-accent-amber);
  border-color: rgba(255,212,0,.5);
}
.hero .slide-count {
  color: rgba(255,255,255,.65);
}
.hero .slide-count b {
  color: var(--mx-accent-amber);
}
.hero .hero-status {
  background: rgba(10,15,28,.45);
  border-color: rgba(255,255,255,.22);
}

/* Hero beam / mesh / orbs (always dark canvas) */
.hero::before {
  background: radial-gradient(620px 420px at 12% 18%,rgba(10,88,255,.5),transparent 60%),
              radial-gradient(520px 400px at 88% 22%,rgba(124,58,237,.42),transparent 62%),
              radial-gradient(760px 520px at 50% 108%,rgba(255,212,0,.16),transparent 62%);
}
.hero-grid {
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 42%,#000 25%,transparent 78%);
  mask-image: radial-gradient(72% 72% at 50% 42%,#000 25%,transparent 78%);
  opacity: .55;
}
.hero-word {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.13);
}
.hero-spot {
  background: radial-gradient(480px circle at var(--hx,70%) var(--hy,30%),rgba(91,140,255,.14),transparent 65%);
  mix-blend-mode: screen;
}
.shafts {
  background-image: repeating-linear-gradient(100deg,transparent 0 46px,rgba(255,255,255,.055) 46px 52px,transparent 52px 110px,rgba(226,232,240,.10) 110px 118px,transparent 118px 190px);
}
.toplight {
  background: conic-gradient(from 180deg at 50% -12%,transparent 0deg,rgba(255,255,255,.11) 12deg,transparent 26deg,transparent 334deg,rgba(255,255,255,.11) 348deg,transparent 360deg);
}
.orb.o1 { background: #fff; box-shadow: 0 0 18px 4px rgba(255,255,255,.5); }
.orb.o2 { background: #cbd5e1; box-shadow: 0 0 14px 3px rgba(203,213,225,.55); }
.orb.o3 { background: #f1f5f9; box-shadow: 0 0 16px 4px rgba(241,245,249,.5); }

/* ── HERO → LIGHT CONTENT TRANSITION ──────────────────────── */
/* The hero has rounded corners and sits inside .wrap.
   The transition from dark hero to light content is natural:
   hero has border-radius:26px, the next section has no dark bg.
   Add a subtle gradient fade below hero for visual continuity: */
.hero + .hero-ticker {
  margin-top: 2px;
}
.hero + .hero-ticker,
.hero + .stats-band {
  position: relative;
}
/* Optional: very subtle bottom glow on hero for light mode continuity */
[data-theme="light"] .hero::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .05;
}

/* ── STATS BAND (always dark) ─────────────────────────────── */
.stats-band {
  background: linear-gradient(135deg, #0A0F1C, #1b2a52);
  color: #fff;
}
.stats-band .dim-light {
  color: #bcc3d2;
}
.stats-band .mx-ic--glass {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}

/* ── FOOTER (always dark) ─────────────────────────────────── */
.mx-footer {
  background: #0A0F1C;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ── GLASSMORPHISM SYSTEM ─────────────────────────────────── */
/* Works in both themes via tokens. Same class, different values. */
.glass {
  background: var(--mx-glass-bg);
  backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturate));
  border: 1px solid var(--mx-glass-border);
}

.glass-strong {
  background: var(--mx-glass-bg-strong);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--mx-glass-border);
}

.glass-card {
  background: var(--mx-glass-bg);
  backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturate));
  border: 1px solid var(--mx-glass-border);
  border-radius: var(--r);
  box-shadow: var(--mx-shadow-md);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mx-shadow-lg);
  border-color: var(--mx-accent-primary);
}

/* Header already uses glass — map tokens */
header {
  background: var(--mx-glass-bg);
  backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturate));
  border-bottom: 1px solid var(--mx-border-default);
}

/* ── CARD SYSTEM (theme-aware) ────────────────────────────── */
.card {
  background: var(--mx-surface-primary);
  border: 1px solid var(--mx-border-default);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  position: relative;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mx-shadow-lg);
  border-color: var(--mx-accent-primary);
}
.card .im {
  background: var(--mx-surface-secondary);
  color: var(--mx-text-secondary);
}
[data-theme="dark"] .card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(91,140,255,.35);
}

/* Card spotlight (radial hover glow) */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(10,88,255,.12), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 1;
}
.card:hover::before {
  opacity: 1;
}
.card .bd {
  position: relative;
  z-index: 2;
}
[data-theme="dark"] .card::before {
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(91,140,255,.15), transparent 60%);
}

/* ── GRADIENT SYSTEM ──────────────────────────────────────── */

/* Hero beam gradients (dark-only, theme-independent) */
.mx-grad-beam {
  background: radial-gradient(620px 420px at 12% 18%,rgba(10,88,255,.5),transparent 60%),
              radial-gradient(520px 400px at 88% 22%,rgba(124,58,237,.42),transparent 62%),
              radial-gradient(760px 520px at 50% 108%,rgba(255,212,0,.16),transparent 62%);
  pointer-events: none;
}

/* Section accent gradient (adapts to theme) */
.mx-grad-accent {
  background: var(--mx-grad-accent);
}

/* Card hover gradient overlay */
.mx-grad-hover {
  background: var(--mx-grad-card-hover);
  pointer-events: none;
}

/* Text gradient (works in both themes) */
.mx-text-gradient {
  background: var(--mx-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer signature line */
.mx-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mx-accent-primary), var(--mx-accent-secondary), var(--mx-accent-amber));
}

/* ── SEMANTIC BADGES (theme-aware) ────────────────────────── */
.b-new { background: #111; color: #fff; }
[data-theme="dark"] .b-new { background: #F4F4F5; color: #0B0F1C; }

.b-aaa { background: var(--mx-success-soft); color: var(--mx-success-text); }
.b-aa  { background: var(--mx-info-soft); color: var(--mx-info-text); }
.b-a   { background: var(--mx-warning-soft); color: var(--mx-warning-text); }
.b-off { background: var(--mx-accent-amber); color: #111; }

/* ── BANDS (full-bleed sections) ──────────────────────────── */
.band-soft {
  background: var(--mx-surface-secondary);
  border: 1px solid var(--mx-border-default);
}
.band-ink {
  background: var(--mx-surface-inverse);
  color: var(--mx-text-inverse);
  border-radius: 22px;
}
.band-ink .sub { opacity: .78; }
.band-ink .eyebrow { opacity: .9; }
.band-ink .redirect a { text-decoration: underline; }
.band-ink .card,
.band-ink .offer {
  background: var(--mx-surface-primary);
  color: var(--mx-text-primary);
}
.band-ink .link-volt { text-decoration: underline; }
[data-theme="dark"] .band-ink .link-volt { color: var(--mx-accent-primary); }

/* ── INPUTS (theme-aware) ─────────────────────────────────── */
.searchbar input {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-tertiary);
  color: var(--mx-text-primary);
}
.searchbar input:focus {
  border-color: var(--mx-accent-primary);
  background: var(--mx-surface-primary);
  box-shadow: 0 0 0 3px rgba(10,88,255,.25);
}
[data-theme="dark"] .searchbar input:focus {
  box-shadow: 0 0 0 3px rgba(91,140,255,.25);
}
.searchbar::before {
  border-color: var(--mx-text-tertiary);
}

select, input[type=text], input[type=tel] {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
  color: var(--mx-text-primary);
}

/* ── BUTTONS (theme-aware) ────────────────────────────────── */
.btn {
  background: var(--mx-accent-amber);
  color: var(--mx-text-on-amber);
  position: relative;
  overflow: hidden;
}
.btn:hover {
  box-shadow: 0 12px 40px rgba(255,212,0,.35);
}
.btn.blue {
  background: var(--mx-accent-primary);
  color: var(--mx-text-on-accent);
}
.btn.ghost {
  background: transparent;
  color: var(--mx-hero-text);
  border: 1px solid rgba(255,255,255,.35);
}
.btn.wa {
  background: var(--mx-accent-whatsapp);
  color: #fff;
}

.iconbtn {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
  color: var(--mx-text-primary);
}
.iconbtn:hover {
  box-shadow: var(--mx-shadow-sm);
}
.iconbtn.acc {
  background: var(--mx-accent-primary);
  border-color: var(--mx-accent-primary);
  color: var(--mx-text-on-accent);
}

/* ── NAVIGATION (theme-aware) ─────────────────────────────── */
nav.main a {
  color: var(--mx-text-primary);
}
nav.main a:hover {
  background: var(--mx-surface-secondary);
}
nav.main a.on {
  color: var(--mx-accent-primary);
}
.nav-pill {
  background: var(--mx-surface-secondary);
}

/* ── LANGUAGE SWITCHER (theme-aware) ──────────────────────── */
.lang button {
  color: var(--mx-text-primary);
}
.lang button:hover {
  background: var(--mx-surface-secondary);
}
.lang button.on {
  background: var(--mx-text-primary);
  color: var(--mx-surface-primary);
}
.lang {
  border-color: var(--mx-border-default);
}

/* ── CHIPS / PILLS (theme-aware) ──────────────────────────── */
.chips button, .chips select {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
  color: var(--mx-text-primary);
}
.chips button:hover {
  border-color: var(--mx-accent-primary);
  box-shadow: 0 8px 22px rgba(10,88,255,.14);
}
.chips button.on {
  background: var(--mx-text-primary);
  color: var(--mx-surface-primary);
}

.pill2 {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
  color: var(--mx-text-primary);
}
.pill2.sel {
  background: var(--mx-text-primary);
  color: var(--mx-surface-primary);
  border-color: var(--mx-text-primary);
}

/* ── DEVICE / AV CARDS (theme-aware) ──────────────────────── */
.dev {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
}
.dev:hover { transform: translateY(-3px); }
.dev.sel {
  border-color: var(--mx-accent-primary);
  box-shadow: 0 12px 32px rgba(10,88,255,.18);
}
.dev .e { color: var(--mx-accent-primary); }

.av {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
}
.av.sel {
  border-color: var(--mx-accent-primary);
  box-shadow: 0 10px 28px rgba(10,88,255,.16);
}
.av small { color: var(--mx-text-secondary); }

.model {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
  color: var(--mx-text-primary);
}
.model.sel {
  background: var(--mx-text-primary);
  color: var(--mx-surface-primary);
}

/* ── OFFERS (theme-aware) ─────────────────────────────────── */
.offer {
  border-color: var(--mx-accent-primary);
  background: var(--mx-surface-primary);
  color: var(--mx-text-primary);
}
.offers .offer:first-child {
  border-color: var(--mx-accent-amber);
  box-shadow: 0 0 0 1px var(--mx-accent-amber);
}

/* ── FAQ (theme-aware) ────────────────────────────────────── */
.faq details {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
}
.faq details[open] {
  border-color: var(--mx-accent-primary);
}
.faq summary::before {
  border-color: var(--mx-accent-primary);
  color: var(--mx-accent-primary);
}
.faq details[open] summary::before {
  background: var(--mx-accent-primary);
  color: #fff;
}

/* ── REVIEWS (theme-aware) ────────────────────────────────── */
.rev {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
}

/* ── QUOTE / RESULT BOX ───────────────────────────────────── */
.quote {
  background: var(--mx-surface-inverse);
  color: var(--mx-text-inverse);
}
.resbox {
  background: var(--mx-surface-inverse);
  color: var(--mx-text-inverse);
}

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty {
  border-color: var(--mx-border-default);
  color: var(--mx-text-secondary);
}

/* ── TABLE ────────────────────────────────────────────────── */
th { color: var(--mx-text-secondary); }
td { border-bottom-color: var(--mx-border-default); }
.mx-legal th { background: var(--mx-surface-secondary); }

/* ── DROPDOWN (theme-aware) ───────────────────────────────── */
.search-drop {
  background: var(--mx-surface-primary);
  border-color: var(--mx-border-default);
  box-shadow: var(--mx-shadow-md);
}
.search-drop a:hover {
  background: var(--mx-surface-secondary);
}
.search-drop a small {
  color: var(--mx-text-secondary);
}
.search-drop .sd-h {
  color: var(--mx-text-secondary);
}

/* ── MODAL (theme-aware) ──────────────────────────────────── */
.modal-bg {
  background: rgba(0,0,0,.5);
}
.modal {
  background: var(--mx-surface-primary);
  border-color: var(--mx-border-default);
  box-shadow: var(--mx-shadow-lg);
}
.modal .mgrid a {
  border-color: var(--mx-border-default);
  color: var(--mx-text-primary);
}
.modal .mgrid a:hover {
  border-color: var(--mx-accent-primary);
  box-shadow: 0 14px 34px rgba(10,88,255,.18);
}
.modal .mgrid a small {
  color: var(--mx-text-secondary);
}

/* ── CONSENT BANNER (theme-aware) ─────────────────────────── */
.mx-ck {
  background: var(--mx-surface-primary);
  border-color: var(--mx-border-default);
  box-shadow: var(--mx-shadow-lg);
}
.mx-ck p { color: var(--mx-text-secondary); }
.mx-ck-card {
  background: var(--mx-surface-primary);
  border-color: var(--mx-border-default);
  box-shadow: var(--mx-shadow-lg);
}
.mx-ck-card label.sw {
  border-color: var(--mx-border-default);
}

/* ── COOKIE FACADE (theme-aware) ──────────────────────────── */
.mx-facade {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-secondary);
}

/* ── ICONS (theme-aware) ──────────────────────────────────── */
.mx-ic {
  background: var(--mx-surface-secondary);
  border-color: var(--mx-border-default);
  color: var(--mx-accent-primary);
}
.mx-ic--glass {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}

/* ── TICKER (theme-aware) ─────────────────────────────────── */
.hero-ticker {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-secondary);
  color: var(--mx-text-secondary);
}
.hero-ticker .mq b {
  color: var(--mx-accent-primary);
}

/* ── BEFORE/AFTER (always dark canvas) ────────────────────── */
.ba {
  background: #000;
}

/* ── COUPON FULLSCREEN (always dark) ──────────────────────── */
.coupon-full {
  background: #0A0F1C;
  color: #fff;
}

/* ── CONSENT CHECK ────────────────────────────────────────── */
.mx-consent-check {
  background: var(--mx-surface-secondary);
  border-color: var(--mx-border-default);
  color: var(--mx-text-secondary);
}
.mx-consent-check input {
  accent-color: var(--mx-accent-primary);
}
.mx-consent-check a {
  color: var(--mx-accent-primary);
}

/* ── WIDGETS (always dark) ────────────────────────────────── */
.widget {
  color: #fff;
}

/* ── KEYBOARD FOCUS ───────────────────────────────────────── */
:focus-visible {
  outline-color: var(--mx-accent-primary);
}

/* ── LINK UNDERLINE ANIMATION ─────────────────────────────── */
.go {
  color: var(--mx-accent-primary);
}

/* ── STICKY BAR ───────────────────────────────────────────── */
.sticky {
  background: var(--mx-glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top-color: var(--mx-border-default);
}
.sticky .s1 { color: var(--mx-text-primary); }
.sticky .s2 { background: var(--mx-accent-whatsapp); color: #fff; }
.sticky .s3 { background: var(--mx-text-primary); color: var(--mx-surface-primary); }

/* ── FAB (WhatsApp) ───────────────────────────────────────── */
.fab {
  background: var(--mx-accent-whatsapp);
  color: #fff;
}

/* ── TO-TOP BUTTON ────────────────────────────────────────── */
#toTop {
  background: var(--mx-text-primary);
  color: var(--mx-surface-primary);
  border-color: var(--mx-border-default);
}

/* ── LEGAL PAGES ──────────────────────────────────────────── */
.mx-i18n-legal details {
  border-color: var(--mx-border-default);
  background: var(--mx-surface-primary);
}
.mx-legal p, .mx-legal li { color: var(--mx-text-primary); }
.mx-legal .mut { color: var(--mx-text-secondary); }

/* ── DARK MODE OVERRIDES FOR SPECIAL ELEMENTS ─────────────── */
[data-theme="dark"] .card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(91,140,255,.35);
}
[data-theme="dark"] .searchbar input:focus {
  box-shadow: 0 0 0 3px rgba(91,140,255,.25);
}
[data-theme="dark"] .chips button:hover {
  box-shadow: 0 8px 22px rgba(91,140,255,.2);
}
[data-theme="dark"] .dev.sel {
  box-shadow: 0 12px 32px rgba(91,140,255,.25);
}
[data-theme="dark"] .av.sel {
  box-shadow: 0 10px 28px rgba(91,140,255,.22);
}

/* ── SCROLLBAR (elegante en ambos temas) ─────────────────────── */
html{scrollbar-width:thin;scrollbar-color:#c3c8d2 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c3c8d2;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#9aa1b0;border:3px solid transparent;background-clip:padding-box}
[data-theme="dark"]{scrollbar-color:#3a4560 transparent}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a4560;border:3px solid transparent;background-clip:padding-box}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#565f78;border:3px solid transparent;background-clip:padding-box}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}