/* Conexia — Dark Mode
   Paleta NEUTRA gris/negro (no navy blue).
   Default: modo claro. Toggle bottom-left. Brand gradient azul/morado se mantiene. */

/* ════════════ TOKENS DARK — escala gris desde negro ════════════ */
html[data-theme="dark"] {
  /* Backgrounds: del más oscuro al más claro */
  --cx-bg: #0d0d10;             /* base, casi negro con tinte mínimo */
  --cx-bg-soft: #16161b;        /* secciones soft */
  --cx-bg-mute: #1d1d23;        /* contraste medio */
  --cx-bg-dark: #050507;        /* hero/footer aún más oscuro */

  /* Líneas (un punto más claras que bg-mute) */
  --cx-line: #2a2a31;
  --cx-line-soft: #1f1f25;

  /* Texto (off-whites, NO blanco puro) */
  --cx-ink: #e7e7eb;            /* texto principal */
  --cx-ink-soft: #c8c8cf;       /* texto secundario */
  --cx-mute: #93939c;            /* texto muted (mejor contraste que en light) */
  --cx-mute-soft: #6f6f78;
  --cx-on-dark: #f0f0f4;
  --cx-on-dark-mute: rgba(231, 231, 235, .65);

  /* Shadows más oscuras */
  --cx-shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --cx-shadow-sm: 0 2px 6px rgba(0,0,0,.50);
  --cx-shadow:    0 4px 16px rgba(0,0,0,.55);
  --cx-shadow-lg: 0 10px 40px rgba(0,0,0,.60);
  --cx-shadow-xl: 0 20px 60px rgba(0,0,0,.65);

  /* Eyebrows más brillantes para mejor contraste sobre fondo oscuro */
  --cx-eyebrow-blue: #6b95ff;
  --cx-eyebrow-purple: #b09bff;
  --cx-eyebrow-gold: #d4a541;

  /* ════════════ FIX RAÍZ: vars LOCALES de las 12 páginas con <style> propio ════════════
     producto/{trunk,softphone,numeracion,lineas-moviles},
     conectividad/{fibra,fibra-standard,fibra-10g,5g,starlink,mpls-firewall},
     integraciones/{api,mcp}
     Estas páginas definen su propio sistema de vars SIN prefijo --cx- en su :root.
     Son exclusivas de estas páginas (ninguna CSS global usa bare --ink/--bg/--line).
     Como html[data-theme="dark"] (0,1,1) > :root (0,1,0), esto sobrescribe sus
     :root locales en dark mode → todo el texto/bordes/fondos-soft/iconos-pastel
     que use var(--ink|--bg|--line|--mute|--*-50) se vuelve dark AUTOMÁTICAMENTE.
     NO se tocan --blue/--purple (accents) porque funcionan sobre dark. */
  --ink: #e7e7eb;
  --ink-2: #c8c8cf;
  --ink-soft: #c8c8cf;
  --mute: #93939c;
  --muted: #93939c;
  --bg: #0d0d10;
  --bg-soft: #16161b;
  --bg-2: #1d1d23;
  --line: #2a2a31;
  --line-soft: #1f1f25;
  --blue-50: rgba(47,107,255,.16);
  --purple-50: rgba(167,139,250,.16);
  --green-soft: rgba(34,197,94,.16);
  --teal-soft: rgba(20,184,166,.16);
  --orange-soft: rgba(251,146,60,.16);
  --gold-soft: rgba(212,165,65,.18);
}

html[data-theme="dark"] body {
  background: var(--cx-bg);
  color: var(--cx-ink);
}

/* ════════════ FIX HARDCODED WHITE BACKGROUNDS ════════════ */
/* Pattern agresivo: cualquier elemento con background blanco inline → dark */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"] {
  background: var(--cx-bg-soft) !important;
  color: var(--cx-ink) !important;
  border-color: var(--cx-line) !important;
}
/* Específicamente sections deben usar bg base (no soft) para mantener jerarquía */
html[data-theme="dark"] section[style*="background:#fff"],
html[data-theme="dark"] section[style*="background: #fff"],
html[data-theme="dark"] section[style*="background:white"] {
  background: var(--cx-bg) !important;
}

/* ════════════ TEXTO DENTRO DE CARDS — forzar BLANCO no gris ════════════ */
html[data-theme="dark"] [style*="background:#fff"] *,
html[data-theme="dark"] [style*="background: #fff"] *,
html[data-theme="dark"] [style*="background-color:#fff"] *,
html[data-theme="dark"] [style*="background:white"] *,
html[data-theme="dark"] [style*="background: white"] * {
  color: var(--cx-ink) !important;
}
/* Excepción: links + spans con color explícito de brand quedan como están */
html[data-theme="dark"] [style*="background:#fff"] a:not([style*="color"]),
html[data-theme="dark"] [style*="background: #fff"] a:not([style*="color"]) {
  color: var(--cx-eyebrow-blue) !important;
}

/* ════════════ CARDS por clase (CSS, no inline) ════════════ */
/* Override generic para cualquier clase que termine en -card, -tile, -block */
html[data-theme="dark"] [class*="-card"]:not(.cx-cu-cursor):not(.cx-cu-ring):not(.cx-mx-spotlight),
html[data-theme="dark"] [class*="-tile"],
html[data-theme="dark"] [class*="-block"]:not(.cx-3d__shine),
html[data-theme="dark"] .cx-card,
html[data-theme="dark"] .cx-mock-logo,
html[data-theme="dark"] .cx-mock-logos > div,
html[data-theme="dark"] .cx-caso,
html[data-theme="dark"] .cx-hub-card,
html[data-theme="dark"] .cx-perfil,
html[data-theme="dark"] .cx-pilar,
html[data-theme="dark"] .cx-mock,
html[data-theme="dark"] .cx-mock-card,
html[data-theme="dark"] .pt-review,
html[data-theme="dark"] .pt-cta-card,
html[data-theme="dark"] .qs-svc-card,
html[data-theme="dark"] .qs-op__card,
html[data-theme="dark"] .qs-how__card,
html[data-theme="dark"] .qs-cred__card,
html[data-theme="dark"] .cv-pillar,
html[data-theme="dark"] .cv-prob,
html[data-theme="dark"] .cv-fam,
html[data-theme="dark"] .cv-level,
html[data-theme="dark"] .cv-numcard,
html[data-theme="dark"] .cv-ia-card,
html[data-theme="dark"] .cx-cv-funcard,
html[data-theme="dark"] .cx-cv-pillar,
html[data-theme="dark"] .err-quick__card {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
}

/* Texto interno de las cards: forzar bright */
html[data-theme="dark"] [class*="-card"] p,
html[data-theme="dark"] [class*="-card"] span,
html[data-theme="dark"] [class*="-card"] h1,
html[data-theme="dark"] [class*="-card"] h2,
html[data-theme="dark"] [class*="-card"] h3,
html[data-theme="dark"] [class*="-card"] h4,
html[data-theme="dark"] [class*="-card"] strong,
html[data-theme="dark"] .cx-caso *:not(a),
html[data-theme="dark"] .cx-mock *:not(a),
html[data-theme="dark"] .cx-mock-card *:not(a),
html[data-theme="dark"] .cx-perfil *:not(a),
html[data-theme="dark"] .cx-pilar *:not(a) {
  color: var(--cx-ink) !important;
}
/* Excepción: el span de pill / label / kpi con color brand se respeta */
html[data-theme="dark"] [class*="-card"] [class*="--blue"],
html[data-theme="dark"] [class*="-card"] [class*="--green"],
html[data-theme="dark"] [class*="-card"] [class*="--gold"],
html[data-theme="dark"] [class*="-card"] [class*="--purple"],
html[data-theme="dark"] [class*="-card"] [class*="--cyan"],
html[data-theme="dark"] [class*="-card"] [class*="cx-mock-pill"] {
  color: inherit !important;
}

/* Texto pequeño dentro de cards (label / mute) — ligeramente más apagado pero visible */
html[data-theme="dark"] [class*="-card"] [class*="__label"],
html[data-theme="dark"] [class*="-card"] [class*="__lbl"],
html[data-theme="dark"] [class*="-card"] [class*="__mute"],
html[data-theme="dark"] [class*="-card"] [class*="__sub"],
html[data-theme="dark"] .cx-mock-label,
html[data-theme="dark"] .cx-caso__label {
  color: var(--cx-ink-soft) !important;
}

/* ════════════ EXPLÍCITO: testimoniales home + cualquier figure con bg blanco ════════════ */
html[data-theme="dark"] .cx-quotes figure,
html[data-theme="dark"] figure[style*="background:#fff"],
html[data-theme="dark"] figure[style*="background: #fff"] {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
}
html[data-theme="dark"] .cx-quotes figure *,
html[data-theme="dark"] .cx-quotes blockquote {
  color: var(--cx-ink) !important;
}
html[data-theme="dark"] .cx-quotes figure span[style*="color:var(--cx-ink-soft"],
html[data-theme="dark"] .cx-quotes figure figcaption span:last-child {
  color: var(--cx-mute) !important;
}

/* Marquee section (la franja blanca con los logos de clientes) */
html[data-theme="dark"] section.cx-section[style*="background:#fff"] {
  background: var(--cx-bg) !important;
  border-color: var(--cx-line) !important;
}

/* Cards interiores con cualquier prefix o suffix */
html[data-theme="dark"] [class*="card"]:not(.cx-cu-cursor):not(.cx-cu-ring):not(.cx-mx-spotlight),
html[data-theme="dark"] [class*="__card"],
html[data-theme="dark"] .cx-mock-logos > * {
  background-color: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
}

/* ════════════ FIX SECCIONES BLANCAS adicionales detectadas ════════════ */
/* Home: franja de logos clientes (debajo de "Empresas que confían") */
html[data-theme="dark"] .cx-logos-grid,
html[data-theme="dark"] .cx-logos-grid > * {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
}
/* Casos de éxito: section ce-trust (banda blanca con logos/trust badges) */
html[data-theme="dark"] section.ce-trust,
html[data-theme="dark"] .ce-trust,
html[data-theme="dark"] .ce-trust__inner,
html[data-theme="dark"] .ce-trust > * {
  background: var(--cx-bg) !important;
  color: var(--cx-ink) !important;
  border-color: var(--cx-line) !important;
}
html[data-theme="dark"] .ce-trust * { color: var(--cx-ink) !important; }
/* Contacto: form */
html[data-theme="dark"] .ct-form,
html[data-theme="dark"] form.ct-form {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
}
html[data-theme="dark"] .ct-form label,
html[data-theme="dark"] .ct-form h2,
html[data-theme="dark"] .ct-form h3,
html[data-theme="dark"] .ct-form p {
  color: var(--cx-ink) !important;
}
html[data-theme="dark"] .ct-form > p,
html[data-theme="dark"] .ct-form__check label {
  color: var(--cx-mute) !important;
}
/* Cards de contacto laterales */
html[data-theme="dark"] .ct-card { background: var(--cx-bg-soft) !important; border-color: var(--cx-line) !important; }
html[data-theme="dark"] .ct-card * { color: var(--cx-ink) !important; }
html[data-theme="dark"] .ct-card__t { color: var(--cx-mute) !important; }
html[data-theme="dark"] .ct-card__s { color: var(--cx-mute) !important; }
html[data-theme="dark"] .ct-office { background: var(--cx-bg-mute) !important; border-color: var(--cx-line) !important; }
html[data-theme="dark"] .ct-office * { color: var(--cx-ink) !important; }
html[data-theme="dark"] .ct-office__t { color: var(--cx-mute) !important; }
html[data-theme="dark"] .ct-office__addr { color: var(--cx-mute) !important; }

/* ════════════ HERO MOCK (slides 2-5 home) ════════════ */
/* El .cx-mock es el contenedor principal del visual de los slides del hero.
   Tiene CSS hardcoded background:#fff. Override agresivo con specificity alta. */
html[data-theme="dark"] div.cx-mock,
html[data-theme="dark"] .cx-hero__visual .cx-mock,
html[data-theme="dark"] .cx-hero__slide .cx-mock {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
}
html[data-theme="dark"] .cx-mock-card,
html[data-theme="dark"] .cx-mock-call {
  background: var(--cx-bg-mute) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
}
html[data-theme="dark"] .cx-mock *:not(.cx-mock-pill):not([class*="cx-mock-pill--"]) {
  color: var(--cx-ink) !important;
}
html[data-theme="dark"] .cx-mock-label {
  color: var(--cx-mute) !important;
}
html[data-theme="dark"] .cx-mock-num,
html[data-theme="dark"] .cx-mock-name {
  color: var(--cx-ink) !important;
}
html[data-theme="dark"] .cx-mock-sub {
  color: var(--cx-mute) !important;
}
html[data-theme="dark"] .cx-mock-bar {
  background: var(--cx-bg) !important;
}

/* ════════════ NAVBAR ════════════ */
html[data-theme="dark"] .cx-nav {
  background: rgba(13, 13, 16, .85);
  border-bottom-color: var(--cx-line);
}
html[data-theme="dark"] .cx-nav__logo { color: var(--cx-ink); }
html[data-theme="dark"] .cx-nav__logo-img text,
html[data-theme="dark"] .cx-nav__logo svg text,
html[data-theme="dark"] .cx-nav__logo-img tspan,
html[data-theme="dark"] header svg text {
  fill: var(--cx-ink) !important;
}
/* Si el logo es un <img src=".svg">, intentar invertir (logos oscuros sobre dark) */
html[data-theme="dark"] .cx-nav__logo-img[src$=".svg"],
html[data-theme="dark"] img.cx-nav__logo-img {
  filter: brightness(0) invert(.95);
}
html[data-theme="dark"] .cx-nav__link { color: var(--cx-ink-soft); }
html[data-theme="dark"] .cx-nav__link:hover,
html[data-theme="dark"] .cx-nav__item--open > .cx-nav__link {
  background: var(--cx-bg-mute);
  color: var(--cx-ink);
}
html[data-theme="dark"] .cx-nav__phone {
  background: transparent;
  border-color: var(--cx-line);
  color: var(--cx-ink);
}
html[data-theme="dark"] .cx-nav__icon-btn {
  background: transparent;
  border-color: var(--cx-line);
  color: var(--cx-ink-soft);
}
html[data-theme="dark"] .cx-nav__lang { color: var(--cx-ink-soft); }
html[data-theme="dark"] .cx-megamenu {
  background: var(--cx-bg-soft);
  border-color: var(--cx-line);
}
html[data-theme="dark"] .cx-megamenu__item:hover { background: var(--cx-bg-mute); }
html[data-theme="dark"] .cx-megamenu__title { color: var(--cx-ink); }
html[data-theme="dark"] .cx-megamenu__desc { color: var(--cx-mute); }
html[data-theme="dark"] .cx-megamenu__col-title { color: var(--cx-mute); }
html[data-theme="dark"] .cx-megamenu__icon { background: var(--cx-bg-mute); }
html[data-theme="dark"] .cx-drawer { background: var(--cx-bg); }
html[data-theme="dark"] .cx-drawer__item:hover { background: var(--cx-bg-mute); }
html[data-theme="dark"] .cx-drawer__header { color: var(--cx-ink); }
html[data-theme="dark"] .cx-drawer__item-text { color: var(--cx-ink); }
html[data-theme="dark"] .cx-drawer__item-icon { background: var(--cx-bg-mute); }

/* ════════════ SECTIONS ════════════ */
html[data-theme="dark"] .cx-section--soft {
  background: var(--cx-bg-soft);
}
html[data-theme="dark"] .cx-section--dark {
  background: var(--cx-bg-dark);
}

/* ════════════ CARDS ════════════ */
html[data-theme="dark"] .cx-card,
html[data-theme="dark"] .cx-hub-card,
html[data-theme="dark"] .cx-perfil,
html[data-theme="dark"] .ce-card,
html[data-theme="dark"] .pt-review,
html[data-theme="dark"] .pt-cta-card,
html[data-theme="dark"] .qs-svc-card,
html[data-theme="dark"] .qs-op__card,
html[data-theme="dark"] .qs-how__card,
html[data-theme="dark"] .qs-cred__card,
html[data-theme="dark"] .sf-card,
html[data-theme="dark"] .cv-pillar,
html[data-theme="dark"] .cv-prob,
html[data-theme="dark"] .cv-fam,
html[data-theme="dark"] .cv-level,
html[data-theme="dark"] .cv-numcard,
html[data-theme="dark"] .cv-ia-card,
html[data-theme="dark"] .cx-cv-funcard,
html[data-theme="dark"] .cx-cv-card,
html[data-theme="dark"] .cx-cv-pillar,
html[data-theme="dark"] .bp-card,
html[data-theme="dark"] .lg-card,
html[data-theme="dark"] .sol-card,
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .ai-card,
html[data-theme="dark"] .cap-card,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .err-quick__card,
html[data-theme="dark"] .ce-card--featured,
html[data-theme="dark"] figure[style*="background:#fff"] {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line);
  color: var(--cx-ink);
}

/* ════════════ EYEBROWS / PILLS ════════════ */
html[data-theme="dark"] .cx-eyebrow { color: var(--cx-eyebrow-blue); }
html[data-theme="dark"] .cx-eyebrow--gold { color: var(--cx-eyebrow-gold); }
html[data-theme="dark"] .cx-eyebrow--purple { color: var(--cx-eyebrow-purple); }
html[data-theme="dark"] .cx3-pill {
  background: rgba(107, 149, 255, .12);
  color: var(--cx-eyebrow-blue);
}

/* ════════════ MARQUEE LOGOS ════════════ */
/* En light los logos son negros/grises; en dark deben invertirse o brillar */
html[data-theme="dark"] .cx-fx-marquee__item {
  filter: grayscale(100%) brightness(1.4) invert(0.85);
}
html[data-theme="dark"] .cx-fx-marquee__item:hover {
  filter: grayscale(0%) brightness(1.3) invert(0);
}

/* ════════════ COOKIE BANNER ════════════ */
html[data-theme="dark"] .cx-cc-banner {
  background: rgba(22, 22, 27, .96);
  border-color: var(--cx-line);
}
html[data-theme="dark"] .cx-cc-banner__title { color: var(--cx-ink); }
html[data-theme="dark"] .cx-cc-banner__text { color: var(--cx-mute); }
html[data-theme="dark"] .cx-cc-banner__actions { background: rgba(13,13,16,.6); border-top-color: var(--cx-line); }
html[data-theme="dark"] .cx-cc-btn--secondary { background: var(--cx-bg-mute); border-color: var(--cx-line); color: var(--cx-ink); }
html[data-theme="dark"] .cx-cc-btn--primary { background: var(--cx-ink); color: var(--cx-bg); }
html[data-theme="dark"] .cx-cc-btn--primary:hover { background: #fff; }
html[data-theme="dark"] .cx-cc-modal { background: rgba(22, 22, 27, .98); border-color: var(--cx-line); color: var(--cx-ink); }
html[data-theme="dark"] .cx-cc-modal__title { color: var(--cx-ink); }
html[data-theme="dark"] .cx-cc-card { background: var(--cx-bg-mute); border-color: var(--cx-line); }
html[data-theme="dark"] .cx-cc-card__icon { background: var(--cx-bg); color: var(--cx-ink-soft); }
html[data-theme="dark"] .cx-cc-modal__close { background: var(--cx-bg-mute); color: var(--cx-ink); border-color: var(--cx-line); }

/* ════════════ REVIEW MODAL (cx-modal) ════════════ */
html[data-theme="dark"] .cx-modal {
  background: var(--cx-bg-soft);
  color: var(--cx-ink);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.75), 0 0 0 1px var(--cx-line);
}
html[data-theme="dark"] .cx-modal__close { background: var(--cx-bg-mute); color: var(--cx-ink); border-color: var(--cx-line); }
html[data-theme="dark"] .cx-modal__media { background: var(--cx-bg-mute); border-color: var(--cx-line); }
html[data-theme="dark"] .cx-modal__author { color: var(--cx-ink); }
html[data-theme="dark"] .cx-modal__meta { color: var(--cx-mute); }
html[data-theme="dark"] .cx-modal__quote { color: var(--cx-ink); }
html[data-theme="dark"] .cx-modal__head { border-bottom-color: var(--cx-line); }

/* ════════════ CAROUSEL CONTROLS ════════════ */
html[data-theme="dark"] .cx-cu-carousel__btn { background: var(--cx-bg-mute); border-color: var(--cx-line); color: var(--cx-ink); }
html[data-theme="dark"] .cx-cu-carousel__btn:hover { border-color: var(--cx-eyebrow-blue); color: var(--cx-eyebrow-blue); }
html[data-theme="dark"] .cx-cu-carousel__dot { background: var(--cx-line); }

/* ════════════ INPUTS Y FORMS ════════════ */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--cx-bg-mute) !important;
  color: var(--cx-ink) !important;
  border-color: var(--cx-line) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--cx-mute); }

/* ════════════ BOTONES SECONDARY ════════════ */
html[data-theme="dark"] .cx-btn--secondary {
  background: var(--cx-bg-soft);
  color: var(--cx-ink);
  border-color: var(--cx-line);
}
html[data-theme="dark"] .cx-btn--secondary:hover {
  border-color: var(--cx-mute);
  background: var(--cx-bg-mute);
}

/* ════════════ STICKY CTA BAR ════════════ */
/* Ya es oscuro por defecto pero ajustamos al nuevo palette */
html[data-theme="dark"] .cx-cta-bar {
  background: linear-gradient(135deg, #050507 0%, #16161b 50%, #1d1d23 100%);
  border-top-color: var(--cx-line);
}

/* ════════════ STRONG en cv-fam y similares (texto destacado) ════════════ */
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
  color: var(--cx-ink);
}

/* ════════════ Footer ════════════ */
html[data-theme="dark"] .cx-foot {
  background: var(--cx-bg-dark);
  border-top: 1px solid var(--cx-line-soft);
}

/* ════════════ TOGGLE BUTTON ════════════ */
.cx-dm-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9040;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  color: #0c1430;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px -4px rgba(15, 23, 42, .18);
  transition: transform 240ms cubic-bezier(.34,1.56,.64,1), background 240ms ease, box-shadow 240ms ease, opacity 240ms ease;
  opacity: 0;
  transform: scale(.85);
  pointer-events: none;
}
.cx-dm-toggle.is-ready {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.cx-dm-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, .28);
}
html[data-theme="dark"] .cx-dm-toggle {
  background: var(--cx-bg-mute);
  color: var(--cx-ink);
  border-color: var(--cx-line);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .55);
}

.cx-dm-toggle__icon {
  width: 22px;
  height: 22px;
  position: relative;
}
.cx-dm-toggle__icon svg { position: absolute; inset: 0; transition: transform 460ms cubic-bezier(.34,1.56,.64,1), opacity 240ms ease; }
.cx-dm-toggle__sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.cx-dm-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
html[data-theme="dark"] .cx-dm-toggle__sun  { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-theme="dark"] .cx-dm-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .cx-dm-toggle, .cx-dm-toggle__icon svg { transition: opacity 200ms ease; }
}

/* Transición suave entre temas — solo afecta a body y elementos de UI específicos,
   NO a divs genéricos (rompía las transiciones de transform del carrusel hero, marquee, etc.) */
html.cx-dm-ready body {
  transition: background-color 280ms ease, color 280ms ease;
}
html.cx-dm-ready h1,
html.cx-dm-ready h2,
html.cx-dm-ready h3,
html.cx-dm-ready h4,
html.cx-dm-ready p,
html.cx-dm-ready a:not(.cx-btn):not(.cx-cta-wa):not(.cx-cta-bar__cta),
html.cx-dm-ready input,
html.cx-dm-ready textarea,
html.cx-dm-ready select,
html.cx-dm-ready label {
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease;
}

/* ════════════════════════════════════════════════════════════
   SOLUCIONES POR TAMAÑO — fix cards blancas en modo oscuro
   Pages: /soluciones/pymes/, /gran-empresa/, /autonomos/, /multisede/
   Estos estilos están definidos en <style> dentro de cada HTML,
   así que los attribute selectors `[style*="background:#fff"]`
   no los alcanzan. Necesitan rules específicas por clase.
   ════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .sol-hero__panel,
html[data-theme="dark"] .sol-hero__pill,
html[data-theme="dark"] .prob-card,
html[data-theme="dark"] .sol-card,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .svc-chip,
html[data-theme="dark"] .custom-prop__chip,
html[data-theme="dark"] .trust-card,
html[data-theme="dark"] .skyline,
html[data-theme="dark"] .cap-card,
html[data-theme="dark"] .fit-block,
html[data-theme="dark"] .layer,
html[data-theme="dark"] .cont-card,
html[data-theme="dark"] .spl-card,
html[data-theme="dark"] .ai-card,
html[data-theme="dark"] .sla-panel,
html[data-theme="dark"] .anywhere,
html[data-theme="dark"] .bigger__item,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .sites-diag,
html[data-theme="dark"] .need-card,
html[data-theme="dark"] .arch-card,
html[data-theme="dark"] .rep-dash {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb);
}

/* Text inside these cards needs light color (h3, h4, p, strong) */
html[data-theme="dark"] .sol-hero__panel h3,
html[data-theme="dark"] .sol-hero__panel h4,
html[data-theme="dark"] .sol-hero__panel strong,
html[data-theme="dark"] .prob-card h3,
html[data-theme="dark"] .prob-card h4,
html[data-theme="dark"] .sol-card h3,
html[data-theme="dark"] .sol-card h4,
html[data-theme="dark"] .case-card h3,
html[data-theme="dark"] .case-card h4,
html[data-theme="dark"] .svc-chip,
html[data-theme="dark"] .svc-chip h3,
html[data-theme="dark"] .svc-chip span,
html[data-theme="dark"] .custom-prop__chip,
html[data-theme="dark"] .trust-card h3,
html[data-theme="dark"] .trust-card h4,
html[data-theme="dark"] .skyline h3,
html[data-theme="dark"] .skyline h4,
html[data-theme="dark"] .skyline strong,
html[data-theme="dark"] .cap-card h3,
html[data-theme="dark"] .cap-card h4,
html[data-theme="dark"] .fit-block h2,
html[data-theme="dark"] .fit-block h3,
html[data-theme="dark"] .fit-block h4,
html[data-theme="dark"] .layer h3,
html[data-theme="dark"] .layer h4,
html[data-theme="dark"] .cont-card h3,
html[data-theme="dark"] .cont-card h4,
html[data-theme="dark"] .cont-card strong,
html[data-theme="dark"] .spl-card h3,
html[data-theme="dark"] .ai-card h3,
html[data-theme="dark"] .ai-card h4,
html[data-theme="dark"] .sla-panel h3,
html[data-theme="dark"] .sla-panel h4,
html[data-theme="dark"] .sla-panel strong,
html[data-theme="dark"] .anywhere h2,
html[data-theme="dark"] .anywhere h3,
html[data-theme="dark"] .anywhere p,
html[data-theme="dark"] .bigger__item,
html[data-theme="dark"] .plan-card h3,
html[data-theme="dark"] .plan-card h4,
html[data-theme="dark"] .sites-diag h3,
html[data-theme="dark"] .sites-diag strong,
html[data-theme="dark"] .need-card h3,
html[data-theme="dark"] .need-card h4,
html[data-theme="dark"] .arch-card h3,
html[data-theme="dark"] .arch-card h4,
html[data-theme="dark"] .rep-dash h3,
html[data-theme="dark"] .rep-dash h4,
html[data-theme="dark"] .rep-dash strong {
  color: var(--cx-ink, #e7e7eb);
}

/* Body / descripciones más mutadas dentro de las cards */
html[data-theme="dark"] .sol-hero__panel p,
html[data-theme="dark"] .prob-card p,
html[data-theme="dark"] .sol-card p,
html[data-theme="dark"] .case-card p,
html[data-theme="dark"] .trust-card p,
html[data-theme="dark"] .skyline p,
html[data-theme="dark"] .cap-card p,
html[data-theme="dark"] .layer p,
html[data-theme="dark"] .cont-card p,
html[data-theme="dark"] .spl-card p,
html[data-theme="dark"] .ai-card p,
html[data-theme="dark"] .sla-panel p,
html[data-theme="dark"] .plan-card p,
html[data-theme="dark"] .sites-diag p,
html[data-theme="dark"] .need-card p,
html[data-theme="dark"] .arch-card p,
html[data-theme="dark"] .rep-dash p {
  color: var(--cx-mute, #93939c);
}

/* Skyline / sites-diag / rep-dash: inner SVG strokes y fills */
html[data-theme="dark"] .sites-diag svg rect[fill="#fff"],
html[data-theme="dark"] .skyline svg rect[fill="#fff"],
html[data-theme="dark"] .rep-dash svg rect[fill="#fff"] {
  fill: var(--cx-bg-mute, #1d1d23);
}

/* SLA grid / sla-cell ya tienen fondo oscuro propio en .sla-cell, mantener */
html[data-theme="dark"] .sla-cell {
  background: var(--cx-bg-mute, #1d1d23);
  border-color: var(--cx-line, #2a2a31);
}
html[data-theme="dark"] .sla-cell strong { color: var(--cx-ink, #e7e7eb); }

/* Pills/chips inferiores tipo "Conectividad dedicada / Centralita unificada" */
html[data-theme="dark"] .sol-hero__pill { color: var(--cx-ink, #e7e7eb); }
html[data-theme="dark"] .svc-chip { color: var(--cx-ink, #e7e7eb); }
html[data-theme="dark"] .custom-prop__chip { color: var(--cx-ink, #e7e7eb); }
html[data-theme="dark"] .bigger__item { color: var(--cx-ink, #e7e7eb); }

/* "Hablemos de tu proyecto" / "¿Quieres profesionalizar...?" — gradient blue sections
   tienen botón blanco + chips blancas que deben ajustar:
   El botón blanco se queda blanco (contraste OK sobre azul), pero las chips
   en algunos casos también, sólo añadir hover suave si hace falta. */
html[data-theme="dark"] .final-cta,
html[data-theme="dark"] .single-prov {
  /* mantener sus gradientes propios — ya son oscuros */
  color: #fff;
}

/* ════════════ FIX — Soluciones por-tamaño v=10 ════════════
   Casos detectados (2026-05-29):
   - .single-prov (pymes) usa linear-gradient(135deg, var(--cx-ink), #1a2540).
     En dark --cx-ink → light → la card se ve gris claro. Forzar gradiente dark literal.
   - .sol-section--ink (gran-empresa) — mismo patrón.
   - .sol-hero gran-empresa tiene gradiente hardcoded #f8fafc → #eef2f9 (casi blanco),
     a diferencia de las otras 3 pages que usan var(--cx-bg-soft). Override.
   - .final-cta .cx-btn--primary y .single-prov .cx-btn--primary
     son background:#fff + color:var(--cx-ink). En dark, --cx-ink se vuelve light
     → texto invisible sobre blanco. Forzar accent cyan-blue + texto blanco. */
html[data-theme="dark"] .single-prov,
html[data-theme="dark"] .sol-section--ink {
  background: linear-gradient(135deg, #1a2540 0%, #0d1429 100%) !important;
  color: #fff !important;
}
html[data-theme="dark"] .single-prov h2,
html[data-theme="dark"] .single-prov p,
html[data-theme="dark"] .single-prov .single-prov__item-text,
html[data-theme="dark"] .sol-section--ink h2,
html[data-theme="dark"] .sol-section--ink p {
  color: #fff !important;
}

/* Hero gran-empresa: gradient claro hardcoded → dark */
html[data-theme="dark"] .sol-hero {
  background: var(--cx-bg, #0d0d10) !important;
  border-bottom-color: var(--cx-line-soft, #1f1f25) !important;
}

/* Botones blancos dentro de secciones CTA dark — usar cyan-blue brand */
html[data-theme="dark"] .final-cta .cx-btn--primary,
html[data-theme="dark"] .single-prov .cx-btn--primary,
html[data-theme="dark"] .sol-section--ink .cx-btn--primary {
  background: #0EA5E9 !important;
  color: #fff !important;
  border-color: #0EA5E9 !important;
}
html[data-theme="dark"] .final-cta .cx-btn--primary:hover,
html[data-theme="dark"] .single-prov .cx-btn--primary:hover,
html[data-theme="dark"] .sol-section--ink .cx-btn--primary:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
}

/* ════════════════════════════════════════════════════════════════════
   v=11 — Cobertura global de toda la web (2026-05-29)
   Aplica patrones aprendidos en por-tamaño al resto de páginas:
   - CTAs (varias clases: wf-cta, mp-cta, fg-cta, sf-cta, om-final, he-final__box,
     news-art-cta, blog-cta, bp-cta, ce-cta) — botón blanco → cyan-blue
   - .ben-block (multisede) — gradient ink invertido
   - Hero sections con gradientes claros hardcodeados
   - Clases con background:#fff que no captura el [class*="-card"] catch-all
   - Sub-sections / cards con gradientes light hardcodeados
   ════════════════════════════════════════════════════════════════════ */

/* CTA wrappers — armonizar TODOS los .cx-btn--primary blancos al cyan-blue brand */
html[data-theme="dark"] .wf-cta .cx-btn--primary,
html[data-theme="dark"] .wf-cta__actions .cx-btn--primary,
html[data-theme="dark"] .mp-cta .cx-btn--primary,
html[data-theme="dark"] .fg-cta .cx-btn--primary,
html[data-theme="dark"] .sf-cta .cx-btn--primary,
html[data-theme="dark"] .om-final .cx-btn--primary,
html[data-theme="dark"] .he-final__box .cx-btn--primary,
html[data-theme="dark"] .news-art-cta .cx-btn--primary,
html[data-theme="dark"] .blog-cta .cx-btn--primary,
html[data-theme="dark"] .bp-cta .cx-btn--primary,
html[data-theme="dark"] .ce-cta .cx-btn--primary,
html[data-theme="dark"] .au-final__right .cx-btn--primary {
  background: #0EA5E9 !important;
  color: #fff !important;
  border-color: #0EA5E9 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .wf-cta .cx-btn--primary:hover,
html[data-theme="dark"] .wf-cta__actions .cx-btn--primary:hover,
html[data-theme="dark"] .mp-cta .cx-btn--primary:hover,
html[data-theme="dark"] .fg-cta .cx-btn--primary:hover,
html[data-theme="dark"] .sf-cta .cx-btn--primary:hover,
html[data-theme="dark"] .om-final .cx-btn--primary:hover,
html[data-theme="dark"] .he-final__box .cx-btn--primary:hover,
html[data-theme="dark"] .news-art-cta .cx-btn--primary:hover,
html[data-theme="dark"] .blog-cta .cx-btn--primary:hover,
html[data-theme="dark"] .bp-cta .cx-btn--primary:hover,
html[data-theme="dark"] .ce-cta .cx-btn--primary:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
}

/* .ben-block (multisede) — mismo problema que .single-prov: gradient con var(--cx-ink) */
html[data-theme="dark"] .ben-block {
  background: linear-gradient(135deg, #1a2540 0%, #0d1429 100%) !important;
  color: #fff !important;
}
html[data-theme="dark"] .ben-block h2,
html[data-theme="dark"] .ben-block h3,
html[data-theme="dark"] .ben-block p,
html[data-theme="dark"] .ben-block strong {
  color: #fff !important;
}
html[data-theme="dark"] .ben-block .cx-btn--primary {
  background: #0EA5E9 !important;
  color: #fff !important;
  border-color: #0EA5E9 !important;
}

/* Hero sections con gradientes claros hardcodeados — forzar var(--cx-bg) */
html[data-theme="dark"] .cl-hero,
html[data-theme="dark"] .rec-hero,
html[data-theme="dark"] .fs-hero,
html[data-theme="dark"] .fo-hero,
html[data-theme="dark"] .sl-hero,
html[data-theme="dark"] .ig-hero,
html[data-theme="dark"] .xg-hero,
html[data-theme="dark"] .mp-hero,
html[data-theme="dark"] .cv-demo {
  background: var(--cx-bg, #0d0d10) !important;
}
/* Hero genéricos en producto/* — más selectivo para no pisar headers Next.js */
html[data-theme="dark"] section.cx-hero,
html[data-theme="dark"] body > main > .cx-hero {
  background: linear-gradient(180deg, var(--cx-bg-soft) 0%, var(--cx-bg) 100%) !important;
}

/* Sub-sections / cards con gradientes light hardcodeados → dark */
html[data-theme="dark"] .fs-price-main,
html[data-theme="dark"] .fs-ipfija-callout,
html[data-theme="dark"] .fs-hero-art,
html[data-theme="dark"] .fs-tagchip,
html[data-theme="dark"] .connect-block,
html[data-theme="dark"] .operator-block,
html[data-theme="dark"] .ig-cross,
html[data-theme="dark"] .ig-var-vis,
html[data-theme="dark"] .lm-dual-vis,
html[data-theme="dark"] .lm-dual-step,
html[data-theme="dark"] .lm-roam,
html[data-theme="dark"] .lm-andorra,
html[data-theme="dark"] .lm-sim-vis,
html[data-theme="dark"] .xg-net,
html[data-theme="dark"] .xg-olt-build,
html[data-theme="dark"] .xg-path-a,
html[data-theme="dark"] .xg-floor,
html[data-theme="dark"] .sl-backup,
html[data-theme="dark"] .fo-backups,
html[data-theme="dark"] .mp-foro,
html[data-theme="dark"] .mp-oro,
html[data-theme="dark"] .mcp-flow-node,
html[data-theme="dark"] .mcp-eco-layer,
html[data-theme="dark"] .qs-op__main,
html[data-theme="dark"] .ce-card--featured,
html[data-theme="dark"] .demo-card,
html[data-theme="dark"] .feature-card.highlight,
html[data-theme="dark"] .quality-item {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}

/* Mocks, paneles, FAQ items, visuales — patrones por sufijo/prefijo
   IMPORTANTE: excluir hero visuals que YA tienen gradientes navy/purple propios
   (xg-hero-visual, ig-hero-vis, lm-hero__visual, fo-hero-vis, mp-hero-visual)
   — esos están bien en ambos modos y no deben pisarse. */
html[data-theme="dark"] [class*="-mock"]:not(svg):not(image),
html[data-theme="dark"] [class*="__panel"],
html[data-theme="dark"] [class*="-faq__item"],
html[data-theme="dark"] [class*="-vis"]:not(svg):not([class*="hero"]):not(.cx-cv-funcard__ic):not([class*="-visual-"]),
html[data-theme="dark"] [class*="-visual"]:not(svg):not([class*="hero"]):not(.cx-hero__visual):not([class*="-visual-"]) {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}
/* Reforzar hero visuals — mantener su gradient nativo (transparent para no pisar) */
html[data-theme="dark"] .ig-hero-vis,
html[data-theme="dark"] .lm-hero__visual,
html[data-theme="dark"] .fo-hero-vis,
html[data-theme="dark"] .xg-hero-visual,
html[data-theme="dark"] .mp-hero-visual {
  background: inherit !important;
}
html[data-theme="dark"] [class*="-mock"] *:not(svg):not(path):not(circle):not(rect):not(line):not(g):not(text):not(tspan):not(a):not([class*="--"]),
html[data-theme="dark"] [class*="__panel"] *:not(svg):not(path):not(a):not([class*="--"]),
html[data-theme="dark"] [class*="-faq__item"] *:not(svg):not(path):not(a):not(button) {
  color: var(--cx-ink, #e7e7eb);
}

/* Clases específicas con background:#fff que el catch-all genérico no pilla */
html[data-theme="dark"] .ag-bot__chat,
html[data-theme="dark"] .ag-bot__chip,
html[data-theme="dark"] .ag-cal-mock,
html[data-theme="dark"] .ag-hero__confirm,
html[data-theme="dark"] .ag-ops__chip,
html[data-theme="dark"] .ag-ops__visual,
html[data-theme="dark"] .anywhere-item,
html[data-theme="dark"] .au-final__right,
html[data-theme="dark"] .au-flow__node,
html[data-theme="dark"] .au-tool,
html[data-theme="dark"] .au-tx-col,
html[data-theme="dark"] .au-tx-list__code,
html[data-theme="dark"] .bs-allow__col,
html[data-theme="dark"] .bs-chip,
html[data-theme="dark"] .bs-coverage__map,
html[data-theme="dark"] .cb-channel,
html[data-theme="dark"] .cb-mini__item,
html[data-theme="dark"] .cb-skill,
html[data-theme="dark"] .crm-logo,
html[data-theme="dark"] .cx-benefit,
html[data-theme="dark"] .cx-bono-detail,
html[data-theme="dark"] .cx-chip,
html[data-theme="dark"] .cx-diagram,
html[data-theme="dark"] .cx-feature,
html[data-theme="dark"] .cx-hero-badge,
html[data-theme="dark"] .cx-infra-visual,
html[data-theme="dark"] .cx-integ,
html[data-theme="dark"] .cx-modal,
html[data-theme="dark"] .cx-modal__close,
html[data-theme="dark"] .cx-tarifa-wrap,
html[data-theme="dark"] .err-help__contact,
html[data-theme="dark"] .flow-step,
html[data-theme="dark"] .fo-bvis,
html[data-theme="dark"] .fo-case,
html[data-theme="dark"] .fo-comp,
html[data-theme="dark"] .fo-conmut-vis,
html[data-theme="dark"] .fo-incl,
html[data-theme="dark"] .fo-logo,
html[data-theme="dark"] .fo-mod,
html[data-theme="dark"] .fo-uso,
html[data-theme="dark"] .fs-network,
html[data-theme="dark"] .fs-sector,
html[data-theme="dark"] .fs-table,
html[data-theme="dark"] .fs-use,
html[data-theme="dark"] .guardias-flow,
html[data-theme="dark"] .ig-ben,
html[data-theme="dark"] .ig-case,
html[data-theme="dark"] .ig-comp-wrap,
html[data-theme="dark"] .ig-cross-vis,
html[data-theme="dark"] .ig-hero-vis,
html[data-theme="dark"] .ig-var,
html[data-theme="dark"] .int-chip,
html[data-theme="dark"] .int-features,
html[data-theme="dark"] .integration,
html[data-theme="dark"] .it-item,
html[data-theme="dark"] .lead-flow__diagram,
html[data-theme="dark"] .lg-body,
html[data-theme="dark"] .lg-toc,
html[data-theme="dark"] .lm-bullet,
html[data-theme="dark"] .lm-case,
html[data-theme="dark"] .lm-hero__badge,
html[data-theme="dark"] .metrics-board,
html[data-theme="dark"] .metrics-panel,
html[data-theme="dark"] .mi-stats,
html[data-theme="dark"] .mp-case,
html[data-theme="dark"] .mp-fw-bullet,
html[data-theme="dark"] .mp-inc,
html[data-theme="dark"] .mp-tbl-wrap,
html[data-theme="dark"] .netmap,
html[data-theme="dark"] .om-chan__item,
html[data-theme="dark"] .om-flow__step,
html[data-theme="dark"] .om-kanban__col,
html[data-theme="dark"] .plat,
html[data-theme="dark"] .pt-benefit,
html[data-theme="dark"] .pt-logo,
html[data-theme="dark"] .pt-review__brandbadge,
html[data-theme="dark"] .pt-step,
html[data-theme="dark"] .recep,
html[data-theme="dark"] .sl-comp-wrap,
html[data-theme="dark"] .sl-rcard,
html[data-theme="dark"] .sl-twocard,
html[data-theme="dark"] .sl-use,
html[data-theme="dark"] .sol-hero__chip,
html[data-theme="dark"] .sol-hero__claim,
html[data-theme="dark"] .trace__timeline,
html[data-theme="dark"] .unified__visual,
html[data-theme="dark"] .usecase,
html[data-theme="dark"] .xg-case,
html[data-theme="dark"] .xg-compare,
html[data-theme="dark"] .xg-net-item,
html[data-theme="dark"] .xg-service {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb);
}

/* Texto interior dentro de esas clases — h3/h4/strong claro, p mute */
html[data-theme="dark"] .au-tool h3,
html[data-theme="dark"] .au-tool h4,
html[data-theme="dark"] .au-tool strong,
html[data-theme="dark"] .cx-benefit h3,
html[data-theme="dark"] .cx-benefit h4,
html[data-theme="dark"] .cx-benefit strong,
html[data-theme="dark"] .cx-feature h3,
html[data-theme="dark"] .cx-feature h4,
html[data-theme="dark"] .cx-feature strong,
html[data-theme="dark"] .lm-bullet h3,
html[data-theme="dark"] .lm-bullet h4,
html[data-theme="dark"] .lm-bullet strong,
html[data-theme="dark"] .pt-benefit h3,
html[data-theme="dark"] .pt-benefit h4,
html[data-theme="dark"] .pt-benefit strong,
html[data-theme="dark"] .integration h3,
html[data-theme="dark"] .integration h4,
html[data-theme="dark"] .integration strong,
html[data-theme="dark"] .usecase h3,
html[data-theme="dark"] .usecase h4,
html[data-theme="dark"] .usecase strong,
html[data-theme="dark"] .fs-use h3,
html[data-theme="dark"] .fs-use strong,
html[data-theme="dark"] .fs-sector h3,
html[data-theme="dark"] .fs-sector strong,
html[data-theme="dark"] .xg-case h3,
html[data-theme="dark"] .xg-case strong,
html[data-theme="dark"] .xg-service h3,
html[data-theme="dark"] .xg-service strong,
html[data-theme="dark"] .mp-case h3,
html[data-theme="dark"] .mp-case strong,
html[data-theme="dark"] .ig-case h3,
html[data-theme="dark"] .ig-case strong,
html[data-theme="dark"] .lm-case h3,
html[data-theme="dark"] .lm-case strong {
  color: var(--cx-ink, #e7e7eb);
}
html[data-theme="dark"] .au-tool p,
html[data-theme="dark"] .cx-benefit p,
html[data-theme="dark"] .cx-feature p,
html[data-theme="dark"] .lm-bullet p,
html[data-theme="dark"] .pt-benefit p,
html[data-theme="dark"] .integration p,
html[data-theme="dark"] .usecase p,
html[data-theme="dark"] .fs-use p,
html[data-theme="dark"] .fs-sector p,
html[data-theme="dark"] .xg-case p,
html[data-theme="dark"] .xg-service p,
html[data-theme="dark"] .mp-case p,
html[data-theme="dark"] .ig-case p,
html[data-theme="dark"] .lm-case p {
  color: var(--cx-mute, #93939c);
}

/* Modal cookies (.cx-modal) — texto debe ser legible */
html[data-theme="dark"] .cx-modal h2,
html[data-theme="dark"] .cx-modal h3,
html[data-theme="dark"] .cx-modal h4,
html[data-theme="dark"] .cx-modal p,
html[data-theme="dark"] .cx-modal label,
html[data-theme="dark"] .cx-modal strong {
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .cx-modal__close { color: var(--cx-ink, #e7e7eb) !important; }

/* ════════════════════════════════════════════════════════════════════
   v=12 — Cobertura de SVGs, tablas, formularios y logos (2026-05-29)
   Patrones detectados tras audit exhaustivo de SVGs internos:
   - <text> SVG con colores oscuros hardcoded → invisible en dark
   - <rect>/<circle> SVG con fill="#fff" + stroke light → invisible/feo
   - Tablas .mp-tbl / .fo-iptable con bg + cabeceras hardcoded
   - Form .ct-ms (multi-step contacto) con backdrop-blur blanco
   - Logos PNG/JPG sin filtro en casos-éxito y home
   ════════════════════════════════════════════════════════════════════ */

/* SVG <text>/<tspan> con colores oscuros → ink/mute claro */
html[data-theme="dark"] svg text[fill="#0c1430"],
html[data-theme="dark"] svg text[fill="#1a2552"],
html[data-theme="dark"] svg text[fill="#0f172a"],
html[data-theme="dark"] svg text[fill="#1f2937"],
html[data-theme="dark"] svg text[fill="#0a1430"],
html[data-theme="dark"] svg text[fill="#111827"],
html[data-theme="dark"] svg text[fill="#1e293b"],
html[data-theme="dark"] svg tspan[fill="#0c1430"],
html[data-theme="dark"] svg tspan[fill="#1a2552"],
html[data-theme="dark"] svg tspan[fill="#0f172a"] {
  fill: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] svg text[fill="#5f6b8a"],
html[data-theme="dark"] svg text[fill="#8892b0"],
html[data-theme="dark"] svg text[fill="#64748b"],
html[data-theme="dark"] svg text[fill="#94a3b8"],
html[data-theme="dark"] svg text[fill="#6b7393"],
html[data-theme="dark"] svg tspan[fill="#5f6b8a"],
html[data-theme="dark"] svg tspan[fill="#64748b"] {
  fill: var(--cx-mute, #93939c) !important;
}

/* SVG <rect>/<circle> blancos dentro de visuales → bg-mute */
html[data-theme="dark"] [class*="-vis"] svg rect[fill="#fff"],
html[data-theme="dark"] [class*="-vis"] svg rect[fill="#ffffff"],
html[data-theme="dark"] [class*="-vis"] svg circle[fill="#fff"],
html[data-theme="dark"] [class*="-mock"] svg rect[fill="#fff"],
html[data-theme="dark"] [class*="-mock"] svg circle[fill="#fff"],
html[data-theme="dark"] [class*="-visual"] svg rect[fill="#fff"],
html[data-theme="dark"] [class*="-visual"] svg circle[fill="#fff"],
html[data-theme="dark"] [class*="__panel"] svg rect[fill="#fff"],
html[data-theme="dark"] [class*="-diag"] svg rect[fill="#fff"],
html[data-theme="dark"] [class*="-net"] svg rect[fill="#fff"],
html[data-theme="dark"] [class*="-flow"] svg rect[fill="#fff"],
html[data-theme="dark"] svg rect[fill="#fff"][stroke="#e6e9f2"],
html[data-theme="dark"] svg rect[fill="#fff"][stroke="#eef0f8"],
html[data-theme="dark"] svg rect[fill="#fff"][stroke="#eef3ff"],
html[data-theme="dark"] svg rect[fill="#fff"][stroke="#cdd9ff"],
html[data-theme="dark"] svg circle[fill="#fff"][stroke="#e6e9f2"] {
  fill: var(--cx-bg-mute, #1d1d23) !important;
}

/* SVG strokes light grises → línea visible en dark */
html[data-theme="dark"] svg [stroke="#e6e9f2"],
html[data-theme="dark"] svg [stroke="#eef0f8"],
html[data-theme="dark"] svg [stroke="#eef3ff"],
html[data-theme="dark"] svg [stroke="#cdd9ff"],
html[data-theme="dark"] svg [stroke="#e2e8f0"],
html[data-theme="dark"] svg [stroke="#f1f5f9"] {
  stroke: var(--cx-line, #2a2a31) !important;
}
/* SVG stroke="#fff" sobre dark mute — convertir a línea visible */
html[data-theme="dark"] svg [stroke="#fff"]:not([stroke-opacity]):not([stroke="#fff"][fill="#0EA5E9"]) {
  stroke: var(--cx-line, #2a2a31) !important;
}

/* Tabla .mp-tbl (mpls-firewall comparativa) */
html[data-theme="dark"] .mp-tbl-wrap {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .mp-tbl thead th {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-mute, #93939c) !important;
}
html[data-theme="dark"] .mp-tbl tbody td {
  color: var(--cx-ink, #e7e7eb) !important;
  border-bottom-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .mp-tbl tbody td.hl {
  background: rgba(47,107,255,.12) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .mp-tbl .pill {
  background: var(--cx-bg, #0d0d10) !important;
  color: var(--cx-mute, #93939c) !important;
}
html[data-theme="dark"] .mp-tbl .pill.ok {
  background: rgba(22,163,74,.20) !important;
  color: #4ade80 !important;
}

/* Tabla .fo-iptable (fibra-oro IPs) — usa vars locales --ink/--muted */
html[data-theme="dark"] .fo-iptable th { color: var(--cx-mute, #93939c) !important; }
html[data-theme="dark"] .fo-iptable td {
  color: var(--cx-ink, #e7e7eb) !important;
  border-bottom-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .fo-iptable td:last-child { color: var(--cx-ink, #e7e7eb) !important; }

/* Form contacto multi-step (.ct-ms) — input con backdrop-blur blanco */
html[data-theme="dark"] .ct-ms__input {
  background: var(--cx-bg-mute, #1d1d23) !important;
  backdrop-filter: none !important;
  color: var(--cx-ink, #e7e7eb) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .ct-ms__input::placeholder {
  color: rgba(231,231,235,.45) !important;
}
html[data-theme="dark"] .ct-ms__step.is-done {
  background: rgba(231,231,235,.10) !important;
  color: var(--cx-mute, #93939c) !important;
}
html[data-theme="dark"] .ct-ms__step.is-done:hover {
  background: rgba(231,231,235,.16) !important;
}
html[data-theme="dark"] .ct-ms__link,
html[data-theme="dark"] .ct-ms__progress {
  background: rgba(231,231,235,.10) !important;
}
html[data-theme="dark"] .ct-ms__link { color: var(--cx-mute, #93939c) !important; }

/* Logos PNG/JPG en cards de casos-éxito y home — slight filter para integrar */
html[data-theme="dark"] .ce-card__logo-img,
html[data-theme="dark"] .cx-mock-logo img,
html[data-theme="dark"] .ce-trust img,
html[data-theme="dark"] [class*="__logo-img"]:not([src$=".svg"]):not([src$=".SVG"]) {
  filter: brightness(1.12) contrast(1.04) grayscale(12%);
}

/* Otras tablas genéricas — fallback para tablas con bg blanco no enumeradas */
html[data-theme="dark"] table:not([class*="dark"]):not([class*="-dark"]) {
  color: var(--cx-ink, #e7e7eb);
}
html[data-theme="dark"] table:not([class*="dark"]) th {
  background: var(--cx-bg-mute, #1d1d23);
  color: var(--cx-mute, #93939c);
  border-color: var(--cx-line, #2a2a31);
}
html[data-theme="dark"] table:not([class*="dark"]) td {
  border-color: var(--cx-line, #2a2a31);
}

/* ════════════════════════════════════════════════════════════════════
   v=13 — Fixes detectados por audit visual con Claude in Chrome (2026-05-29)
   - .mp-page (conectividad/mpls-firewall vieja, no la nueva en servicios/)
     tiene `.mp-page{background:#fff}` directo en el wrapper main.
   - .fg-path / .fg-path--pro / .fg-use (servicios/conectividad/fibra-10g)
     cards de paths/uses con bg blanco hardcoded.
   - .cx-showcase__tooltip tenía override en cx-showcase.css con bg light
     y texto que se vuelve light en dark → invisible. Corregido en cx-showcase.css.
   ════════════════════════════════════════════════════════════════════ */

/* Páginas con wrapper *-page{background:#fff} hardcoded — todas las 5 afectadas:
   /conectividad/{fibra,mpls-firewall,starlink}, /integraciones/mcp,
   /producto/lineas-moviles
   Patrón común: .XX-page bg:#fff, .XX-section.alt bg:var(--bg-soft local),
   .XX-btn-ghost bg:#fff */
html[data-theme="dark"] .fo-page,
html[data-theme="dark"] .mp-page,
html[data-theme="dark"] .sl-page,
html[data-theme="dark"] .mcp-page,
html[data-theme="dark"] .lm-page,
html[data-theme="dark"] main.fo-page,
html[data-theme="dark"] main.mp-page,
html[data-theme="dark"] main.sl-page,
html[data-theme="dark"] main.mcp-page,
html[data-theme="dark"] main.lm-page {
  background: var(--cx-bg, #0d0d10) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .fo-section.alt,
html[data-theme="dark"] .mp-section.alt,
html[data-theme="dark"] .sl-section.alt,
html[data-theme="dark"] .mcp-section.alt,
html[data-theme="dark"] .lm-section.alt {
  background: var(--cx-bg-soft, #16161b) !important;
}
html[data-theme="dark"] .fo-eyebrow,
html[data-theme="dark"] .mp-eyebrow,
html[data-theme="dark"] .sl-eyebrow,
html[data-theme="dark"] .mcp-eyebrow,
html[data-theme="dark"] .lm-eyebrow {
  background: rgba(47,107,255,.10) !important;
  color: #6b95ff !important;
}
html[data-theme="dark"] .fo-btn-ghost:not(.fo-cta-buttons .fo-btn-ghost),
html[data-theme="dark"] .mp-btn-ghost:not(.mp-cta-buttons .mp-btn-ghost),
html[data-theme="dark"] .sl-btn-ghost,
html[data-theme="dark"] .mcp-btn-ghost,
html[data-theme="dark"] .lm-btn-ghost:not(.lm-cta .lm-btn-ghost) {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v=14 — Page modules scoped overrides (2026-05-29)
   Las 5 páginas con módulo *-page (fo, mp, sl, mcp, lm) usan vars LOCAL:
     --ink: #0c1430; --bg: #fff; --bg-soft: #f8fafc; --blue-50: #eef3ff
   Como son locales, mi override de --cx-ink no alcanza. Hay que forzar
   COLOR + BG con selectores descendientes del wrapper.
   ════════════════════════════════════════════════════════════════════ */

/* Todos los headings + texto inline dentro de los wrappers *-page → ink claro */
html[data-theme="dark"] .fo-page h1,
html[data-theme="dark"] .fo-page h2,
html[data-theme="dark"] .fo-page h3,
html[data-theme="dark"] .fo-page h4,
html[data-theme="dark"] .fo-page h5,
html[data-theme="dark"] .fo-page h6,
html[data-theme="dark"] .fo-page p,
html[data-theme="dark"] .fo-page li,
html[data-theme="dark"] .fo-page strong,
html[data-theme="dark"] .fo-page summary,
html[data-theme="dark"] .fo-page td,
html[data-theme="dark"] .fo-page th,
html[data-theme="dark"] .mp-page h1,
html[data-theme="dark"] .mp-page h2,
html[data-theme="dark"] .mp-page h3,
html[data-theme="dark"] .mp-page h4,
html[data-theme="dark"] .mp-page h5,
html[data-theme="dark"] .mp-page h6,
html[data-theme="dark"] .mp-page p,
html[data-theme="dark"] .mp-page li,
html[data-theme="dark"] .mp-page strong,
html[data-theme="dark"] .mp-page summary,
html[data-theme="dark"] .mp-page td,
html[data-theme="dark"] .mp-page th,
html[data-theme="dark"] .sl-page h1,
html[data-theme="dark"] .sl-page h2,
html[data-theme="dark"] .sl-page h3,
html[data-theme="dark"] .sl-page h4,
html[data-theme="dark"] .sl-page h5,
html[data-theme="dark"] .sl-page h6,
html[data-theme="dark"] .sl-page p,
html[data-theme="dark"] .sl-page li,
html[data-theme="dark"] .sl-page strong,
html[data-theme="dark"] .sl-page summary,
html[data-theme="dark"] .sl-page td,
html[data-theme="dark"] .sl-page th,
html[data-theme="dark"] .mcp-page h1,
html[data-theme="dark"] .mcp-page h2,
html[data-theme="dark"] .mcp-page h3,
html[data-theme="dark"] .mcp-page h4,
html[data-theme="dark"] .mcp-page h5,
html[data-theme="dark"] .mcp-page h6,
html[data-theme="dark"] .mcp-page p,
html[data-theme="dark"] .mcp-page li,
html[data-theme="dark"] .mcp-page strong,
html[data-theme="dark"] .mcp-page summary,
html[data-theme="dark"] .mcp-page td,
html[data-theme="dark"] .mcp-page th,
html[data-theme="dark"] .mcp-page small,
html[data-theme="dark"] .lm-page h1,
html[data-theme="dark"] .lm-page h2,
html[data-theme="dark"] .lm-page h3,
html[data-theme="dark"] .lm-page h4,
html[data-theme="dark"] .lm-page h5,
html[data-theme="dark"] .lm-page h6,
html[data-theme="dark"] .lm-page p,
html[data-theme="dark"] .lm-page li,
html[data-theme="dark"] .lm-page strong,
html[data-theme="dark"] .lm-page summary,
html[data-theme="dark"] .lm-page td,
html[data-theme="dark"] .lm-page th {
  color: var(--cx-ink, #e7e7eb) !important;
}
/* Excepción: respetar gradients de texto (h1 .grad) */
html[data-theme="dark"] [class*="-page"] [class*="grad"],
html[data-theme="dark"] [class*="-page"] .grad {
  color: transparent !important;
}

/* Mute para texto secundario común en estas páginas */
html[data-theme="dark"] .fo-page .fo-lead,
html[data-theme="dark"] .mp-page .mp-lead,
html[data-theme="dark"] .sl-page .sl-lead,
html[data-theme="dark"] .mcp-page .mcp-lead,
html[data-theme="dark"] .lm-page .lm-lead,
html[data-theme="dark"] [class*="-page"] [class*="-desc"],
html[data-theme="dark"] [class*="-page"] [class*="-sub"]:not([class*="-h"]) {
  color: var(--cx-ink-soft, #c8c8cf) !important;
}

/* Icon containers pastel (var(--blue-50), var(--orange-soft), etc.) — forzar dark accent */
html[data-theme="dark"] [class*="-page"] [class*="-bicon"],
html[data-theme="dark"] [class*="-page"] [class*="-feat-ic"],
html[data-theme="dark"] [class*="-page"] [class*="-inc-ic"],
html[data-theme="dark"] [class*="-page"] [class*="-cap-ic"],
html[data-theme="dark"] [class*="-page"] [class*="-comp-ic"] {
  background: rgba(47,107,255,.16) !important;
  color: #6b95ff !important;
}

/* Backgrounds blancos hardcoded dentro de los page wrappers */
html[data-theme="dark"] .fo-page details,
html[data-theme="dark"] .mp-page details,
html[data-theme="dark"] .sl-page details,
html[data-theme="dark"] .mcp-page details,
html[data-theme="dark"] .lm-page details,
html[data-theme="dark"] .mcp-eco,
html[data-theme="dark"] .mcp-eco-layer,
html[data-theme="dark"] .mcp-ex,
html[data-theme="dark"] .mcp-ex-prompt,
html[data-theme="dark"] .lm-hero-badge,
html[data-theme="dark"] .fg-tbl-wrap,
html[data-theme="dark"] .fg-net__txt,
html[data-theme="dark"] [class*="-page"] table,
html[data-theme="dark"] [class*="-page"] td,
html[data-theme="dark"] [class*="-page"] th {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] [class*="-page"] th {
  background: var(--cx-bg-mute, #1d1d23) !important;
}

/* Eyebrow/pill genéricos en pages — texto azul brillante para mejor contraste */
html[data-theme="dark"] [class*="-page"] [class*="-eyebrow"],
html[data-theme="dark"] [class*="-page"] [class*="-pill"]:not([class*="--"]),
html[data-theme="dark"] [class*="-page"] [class*="-badge"]:not([class*="grad"]) {
  background: rgba(47,107,255,.16) !important;
  color: #9bb6ff !important;
  border-color: rgba(47,107,255,.30) !important;
}

/* Hero badges con bg blanco específico (.lm-hero-badge ya cubierto, refuerzo de texto interno) */
html[data-theme="dark"] .lm-hero-badge strong,
html[data-theme="dark"] .lm-hero-badge span {
  color: var(--cx-ink, #e7e7eb) !important;
}

/* SVG fills color local ink (#0c1430) en estas páginas */
html[data-theme="dark"] [class*="-page"] svg [fill="#0c1430"],
html[data-theme="dark"] [class*="-page"] svg [fill="#1a2552"],
html[data-theme="dark"] [class*="-page"] svg [fill="#0f172a"] {
  fill: var(--cx-ink, #e7e7eb) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v=15 — Feature cards + pills/tags/badges (2026-05-29)
   Tras v=14 los headings y wrappers funcionan, pero las CARDS DE FEATURES
   dentro de cada página siguen con background:#fff y los pills/badges
   con contraste roto.
   ════════════════════════════════════════════════════════════════════ */

/* Cards de features con bg blanco hardcoded */
html[data-theme="dark"] .mcp-cap,
html[data-theme="dark"] .mcp-ex,
html[data-theme="dark"] .mcp-eco-layer:not(.server),
html[data-theme="dark"] .mcp-eco-layer.assistants,
html[data-theme="dark"] .mcp-eco-layer.tools,
html[data-theme="dark"] .lm-bcard,
html[data-theme="dark"] .lm-feat {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}

/* Server variant del eco-layer YA tiene gradient azul propio — mantener */
html[data-theme="dark"] .mcp-eco-layer.server {
  background: linear-gradient(135deg, #2f6bff 0%, #0EA5E9 100%) !important;
  color: #fff !important;
}
html[data-theme="dark"] .mcp-eco-layer.server h4,
html[data-theme="dark"] .mcp-eco-layer.server p {
  color: rgba(255,255,255,.86) !important;
}

/* Pills dentro de .mcp-eco-layer (no server) → dark */
html[data-theme="dark"] .mcp-eco-pills span:not(.mcp-eco-layer.server .mcp-eco-pills span),
html[data-theme="dark"] .mcp-eco-layer:not(.server) .mcp-eco-pills span {
  background: var(--cx-bg-mute, #1d1d23) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}

/* lm-feat icon variants (.lm-feat.green/teal/purple .lm-feat-ic) */
html[data-theme="dark"] .lm-feat.green .lm-feat-ic {
  background: rgba(34,197,94,.16) !important;
  color: #4ade80 !important;
}
html[data-theme="dark"] .lm-feat.teal .lm-feat-ic {
  background: rgba(20,184,166,.16) !important;
  color: #2dd4bf !important;
}
html[data-theme="dark"] .lm-feat.purple .lm-feat-ic {
  background: rgba(167,139,250,.16) !important;
  color: #c4b5fd !important;
}

/* mcp-cap-ic.blue variant */
html[data-theme="dark"] .mcp-cap-ic.blue {
  background: rgba(47,107,255,.16) !important;
  color: #6b95ff !important;
}

/* Pills/tags genéricos en módulos *-page con bg light + texto light/oscuro mute */
html[data-theme="dark"] .mp-cmp-card .tag:not(.feat .tag) {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-mute, #93939c) !important;
}
html[data-theme="dark"] .mp-cmp-card.feat .tag {
  background: linear-gradient(135deg, #2f6bff, #0EA5E9) !important;
  color: #fff !important;
}

/* Badges dorados — mantener gradient gold pero asegurar contraste de texto */
html[data-theme="dark"] .mp-badge-gold,
html[data-theme="dark"] .fo-case-body .badge {
  background: linear-gradient(135deg, #fff3d4, #ffe9b3) !important;
  color: #7a5a10 !important;
  border-color: #ecd089 !important;
}

/* sl-backup-offer badge — ya tiene rgba blue pero el texto cdbcff es bajo contraste */
html[data-theme="dark"] .sl-backup-offer .badge {
  background: rgba(14,165,233,.22) !important;
  color: #93c5fd !important;
}

/* Badges azules de redundancia (.fo-red-card .badge / .fo-red-card.alt) — fine pero
   reforzar texto brillante */
html[data-theme="dark"] .fo-red-card .badge {
  background: rgba(47,107,255,.18) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .fo-red-card.alt .badge {
  background: rgba(47,107,255,.25) !important;
  color: #bfdbfe !important;
}

/* mcp-ex-prompt code block (font mono dashed border) */
html[data-theme="dark"] .mcp-ex-prompt {
  background: var(--cx-bg, #0d0d10) !important;
  border-color: var(--cx-line-soft, #1f1f25) !important;
  color: var(--cx-ink-soft, #c8c8cf) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v=16 — Cross-link cards, comparativa tables, pills, chips (2026-05-29)
   Tras v=15 quedan:
   - .fo-cross a / .mp-cross a / .mcp-rel / .mcp-step → background:#fff
   - .mcp-comp-wrap (tabla comparativa) + cells
   - .mcp-tri-card .tag.dev/.biz/.sec pastel chips
   - .lm-chip pill blanco
   - .cx-showcase__logo-btn → mantener bg light para logos legibles
   - Footer Next.js legalLink azul default
   ════════════════════════════════════════════════════════════════════ */

/* Cross-link cards (módulos pre-rediseño con .*-cross a) */
html[data-theme="dark"] .fo-cross a,
html[data-theme="dark"] .mp-cross a,
html[data-theme="dark"] .sl-cross a,
html[data-theme="dark"] .mcp-cross a,
html[data-theme="dark"] .lm-cross a,
html[data-theme="dark"] .mcp-rel,
html[data-theme="dark"] .mcp-step {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .fo-cross strong,
html[data-theme="dark"] .mp-cross strong,
html[data-theme="dark"] .mcp-rel strong,
html[data-theme="dark"] .mcp-step h4 {
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .fo-cross span,
html[data-theme="dark"] .mp-cross span,
html[data-theme="dark"] .mcp-rel p,
html[data-theme="dark"] .mcp-step p {
  color: var(--cx-mute, #93939c) !important;
}

/* Tabla comparativa MCP */
html[data-theme="dark"] .mcp-comp-wrap {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .mcp-comp th {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-mute, #93939c) !important;
  border-bottom-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .mcp-comp td {
  border-bottom-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .mcp-comp td:first-child {
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .mcp-comp td p {
  color: var(--cx-mute, #93939c) !important;
}

/* Channel pills (variantes mcp/api/wh) */
html[data-theme="dark"] .mcp-comp .channel-pill.mcp {
  background: rgba(167,139,250,.18) !important;
  color: #c4b5fd !important;
}
html[data-theme="dark"] .mcp-comp .channel-pill.api {
  background: rgba(47,107,255,.18) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .mcp-comp .channel-pill.wh {
  background: rgba(212,165,65,.18) !important;
  color: #fcd34d !important;
}

/* Tags pastel en .mcp-tri-card */
html[data-theme="dark"] .mcp-tri-card .tag.dev {
  background: rgba(167,139,250,.18) !important;
  color: #c4b5fd !important;
}
html[data-theme="dark"] .mcp-tri-card .tag.biz {
  background: rgba(47,107,255,.18) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .mcp-tri-card .tag.sec {
  background: rgba(34,197,94,.18) !important;
  color: #4ade80 !important;
}

/* .lm-chip — chip blanco con texto ink-soft + dot color */
html[data-theme="dark"] .lm-chip {
  background: var(--cx-bg-mute, #1d1d23) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink-soft, #c8c8cf) !important;
}
/* Dots de .lm-chip variants (o/g/p) — colores brillantes para dark */
html[data-theme="dark"] .lm-chip::before {
  background: #6b95ff !important;
}
html[data-theme="dark"] .lm-chip.o::before { background: #fb923c !important; }
html[data-theme="dark"] .lm-chip.g::before { background: #4ade80 !important; }
html[data-theme="dark"] .lm-chip.p::before { background: #c4b5fd !important; }

/* Showcase logo button — los logos partners/casos NECESITAN bg claro para
   ser legibles. Mantener bg slate-100 (no blanco puro) para integrar mejor. */
html[data-theme="dark"] .cx-showcase__logo-btn {
  background: #e5e7eb !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Footer Next.js legal links — color azul default del browser sobre footer dark */
html[data-theme="dark"] a[class*="Footer_legalLink"],
html[data-theme="dark"] [class*="Footer_legal"] a {
  color: var(--cx-mute, #93939c) !important;
}
html[data-theme="dark"] a[class*="Footer_legalLink"]:hover,
html[data-theme="dark"] [class*="Footer_legal"] a:hover {
  color: var(--cx-ink, #e7e7eb) !important;
}

/* FAQ tab activo — refuerzo de contraste si cx-stack no lo cubre */
html[data-theme="dark"] button.cx-faq__tab[aria-selected="true"],
html[data-theme="dark"] button.cx-faq__tab[data-active="true"] {
  color: var(--cx-ink, #e7e7eb) !important;
  background: var(--cx-bg-mute, #1d1d23) !important;
}
html[data-theme="dark"] button.cx-faq__tab {
  color: var(--cx-mute, #93939c) !important;
}

/* v=17 — cx-faq__sub subtítulo en FAQ con gradient text de bajo contraste en dark.
   El gradient va de --cx-faq-primary (blue) a rgba(59,130,246,.55) — muy débil
   sobre fondo dark. Forzar a colores brillantes. */
html[data-theme="dark"] .cx-faq__sub {
  background: linear-gradient(90deg, #93c5fd, #6b95ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════
   v=18 — Fibra Oro (servicios/conectividad/fibra-oro/) — 2026-05-29
   Detectado por usuario tras v=17: la página tiene cards con bg:#fff
   en CSS específico que el catch-all NO captura porque las clases
   no contienen "-card":
   - .fo-backup__node (4 cards laterales del diagrama backup)
   - .fo-backup__center (RB5009 central)
   - .fo-failover__visual (panel "Cae la fibra principal" etc.)
   - .fo-clients__item (logos de clientes "Clínica Baviera" etc.)
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .fo-backup__node,
html[data-theme="dark"] .fo-backup__center,
html[data-theme="dark"] .fo-failover__visual,
html[data-theme="dark"] .fo-clients__item {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .fo-backup__node h4,
html[data-theme="dark"] .fo-backup__node strong,
html[data-theme="dark"] .fo-backup__center h3,
html[data-theme="dark"] .fo-failover__step-text strong,
html[data-theme="dark"] .fo-clients__name {
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .fo-backup__node p,
html[data-theme="dark"] .fo-failover__step-text,
html[data-theme="dark"] .fo-clients__item .fo-clients__sector {
  color: var(--cx-mute, #93939c) !important;
}
/* Tag central "NÚCLEO" — gold soft pastel, mantener visible */
html[data-theme="dark"] .fo-backup__center-tag {
  background: rgba(212,165,65,.18) !important;
  color: #fcd34d !important;
}
/* Step number circle del failover — el gold-grad ya funciona, refuerzo texto */
html[data-theme="dark"] .fo-failover__step-arrow {
  background: var(--cx-line, #2a2a31) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v=18b — Catch-all BEM con `__` (no solo `-`). El v=11 cubría
   [class*="-vis"] pero no [class*="__visual"]. Esto explica por qué
   .fo-failover__visual, .fo-backup__node, .av-int__item, .sf-int__item,
   .fg-net__item, .wf-nums__item, .wf-crm__node, .sf-demo__panel y todos
   los demás BEM con doble-underscore no estaban cubiertos.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] [class*="__visual"]:not(svg):not([class*="hero"]):not(.cx-hero__visual),
html[data-theme="dark"] [class*="__vis"]:not(svg):not([class*="hero"]):not(.cx-cv-funcard__ic),
html[data-theme="dark"] [class*="__item"]:not([class*="hero"]):not([class*="--blue"]):not([class*="--green"]):not([class*="--purple"]):not([class*="--gold"]),
html[data-theme="dark"] [class*="__node"],
html[data-theme="dark"] [class*="__center"],
html[data-theme="dark"] [class*="__col"]:not(.cx-foot__col),
html[data-theme="dark"] [class*="__row"]:not([class*="hero"]),
html[data-theme="dark"] [class*="__step"]:not([class*="-num"]):not([class*="-text"]):not([class*="-arrow"]):not([class*="-ic"]) {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}
/* Texto interior */
html[data-theme="dark"] [class*="__item"] h3,
html[data-theme="dark"] [class*="__item"] h4,
html[data-theme="dark"] [class*="__item"] strong,
html[data-theme="dark"] [class*="__node"] h3,
html[data-theme="dark"] [class*="__node"] h4,
html[data-theme="dark"] [class*="__node"] strong {
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] [class*="__item"] p,
html[data-theme="dark"] [class*="__item"] span:not([class*="--"]),
html[data-theme="dark"] [class*="__node"] p {
  color: var(--cx-mute, #93939c);
}

/* ════════════════════════════════════════════════════════════════════
   v=19b — Issues residuales en /servicios/conectividad/fibra-oro/
   - .fo-ip-table (tabla rangos /29 /28 /27 /26) con bg blanco y celdas contraste bajo
   - .cx-chip variants (Centralitas/VPN/Cámaras/Sedes/Cloud) sin contraste visible
   - MikroTik RB5009 PNG sin transparencia (mitigación visual)
   ════════════════════════════════════════════════════════════════════ */

/* Tabla fo-ip-table — bg + cells */
html[data-theme="dark"] .fo-ip-table {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .fo-ip-table th {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-mute, #93939c) !important;
  border-bottom-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .fo-ip-table td {
  border-bottom-color: var(--cx-line-soft, #1f1f25) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .fo-ip-table td:first-child {
  color: #fcd34d !important;
}
html[data-theme="dark"] .fo-ip-table td:last-child {
  color: var(--cx-ink, #e7e7eb) !important;
}

/* cx-chip — añadir border para visibilidad en dark */
html[data-theme="dark"] .cx-chip {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink-soft, #c8c8cf) !important;
  border: 1px solid var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .cx-chip--blue {
  background: rgba(47,107,255,.18) !important;
  color: #93c5fd !important;
  border-color: rgba(47,107,255,.30) !important;
}
html[data-theme="dark"] .cx-chip--purple {
  background: rgba(14,165,233,.18) !important;
  color: #7dd3fc !important;
  border-color: rgba(14,165,233,.30) !important;
}
html[data-theme="dark"] .cx-chip--gold {
  background: rgba(212,165,65,.18) !important;
  color: #fcd34d !important;
  border-color: rgba(212,165,65,.30) !important;
}
html[data-theme="dark"] .cx-chip--green {
  background: rgba(22,163,74,.18) !important;
  color: #4ade80 !important;
  border-color: rgba(22,163,74,.30) !important;
}

/* MikroTik PNG con bg blanco — añadir slight border-radius + soft shadow para integrar */
html[data-theme="dark"] .fo-backup__center img,
html[data-theme="dark"] .fo-hero__device img[src*="mikrotik"],
html[data-theme="dark"] img[src*="mikrotik"],
html[data-theme="dark"] img[src*="rb5009"],
html[data-theme="dark"] img[src*="RB5009"] {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.30);
  background: #fff;
}

/* fibra-10g — paths y uses con bg:#fff hardcoded */
html[data-theme="dark"] .fg-path,
html[data-theme="dark"] .fg-path--pyme,
html[data-theme="dark"] .fg-path--pro,
html[data-theme="dark"] .fg-use {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .fg-path--pro {
  background: linear-gradient(180deg, var(--cx-bg-soft, #16161b) 0%, rgba(14,165,233,.06) 100%) !important;
}
html[data-theme="dark"] .fg-path h3,
html[data-theme="dark"] .fg-path__price-amount,
html[data-theme="dark"] .fg-use__txt {
  color: var(--cx-ink, #e7e7eb) !important;
}
html[data-theme="dark"] .fg-path ul li,
html[data-theme="dark"] .fg-path__desc {
  color: var(--cx-ink-soft, #c8c8cf) !important;
}
html[data-theme="dark"] .fg-path__price-unit {
  color: var(--cx-mute, #93939c) !important;
}

/* Form inputs/selects/textareas genéricos — fallback */
html[data-theme="dark"] input[type="text"]:not([class*="dark"]),
html[data-theme="dark"] input[type="email"]:not([class*="dark"]),
html[data-theme="dark"] input[type="tel"]:not([class*="dark"]),
html[data-theme="dark"] input[type="search"]:not([class*="dark"]),
html[data-theme="dark"] input[type="url"]:not([class*="dark"]),
html[data-theme="dark"] textarea:not([class*="dark"]),
html[data-theme="dark"] select:not([class*="dark"]) {
  background: var(--cx-bg-mute, #1d1d23);
  color: var(--cx-ink, #e7e7eb);
  border-color: var(--cx-line, #2a2a31);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(231,231,235,.40);
}


/* ════════════════════════════════════════════════════════════════════
   v=21 — AUDITORÍA EXHAUSTIVA (workflow 221 agentes, 126 páginas) 2026-05-29
   Findings confirmados adversarialmente + medium. Cada regla cubre un
   selector con valor LITERAL (#fff/gradient/hex/SVG) que NO captura ni el
   var-override global ni los catch-alls. Ver DARK_MODE_FIXES.md it.13.
   ════════════════════════════════════════════════════════════════════ */

  /* [C] conectividad/5g — .ig-faq */
  html[data-theme="dark"] .ig-page details.ig-faq{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important}

  /* [C] conectividad/fibra-10g — .xg-faq details */
  html[data-theme="dark"] .xg-faq details{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [C] conectividad/fibra — .fo-faq */
  html[data-theme="dark"] .fo-faq{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [C] conectividad/fibra-standard — .fs-btn-ghost */
  html[data-theme="dark"] .fs-btn-ghost {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }
  html[data-theme="dark"] .fs-btn-ghost:hover {
  border-color: var(--cx-eyebrow-blue, #6b95ff) !important;
  color: var(--cx-eyebrow-blue, #6b95ff) !important;
  }

  /* [C] conectividad/fibra-standard — .fs-tel-items li */
  html[data-theme="dark"] .fs-tel-items li{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important}
  html[data-theme="dark"] .fs-tel-items li strong{color:var(--cx-ink,#e7e7eb)!important}
  html[data-theme="dark"] .fs-tel-items li span.txt{color:var(--cx-mute,#93939c)!important}

  /* [C] conectividad/fibra-standard — .fs-faq */
  html[data-theme="dark"] .fs-faq{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important}
  html[data-theme="dark"] .fs-faq summary{color:var(--cx-ink,#e7e7eb)!important}
  html[data-theme="dark"] .fs-faq summary::after{color:var(--cx-mute,#93939c)!important}
  html[data-theme="dark"] .fs-faq .answer{color:var(--cx-mute,#93939c)!important}

  /* [C] conectividad/mpls-firewall — .mp-faq */
  html[data-theme="dark"] .mp-faq { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] conectividad/starlink — .sl-hero-chips span */
  html[data-theme="dark"] .sl-hero-chips span{background:var(--cx-bg-mute,#1d1d23)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important}

  /* [C] integraciones/api — .api-btn--secondary */
  html[data-theme="dark"] .api-btn--secondary:not(.api-final .api-btn--secondary){
  background: var(--cx-bg-soft, #16161b) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }
  html[data-theme="dark"] .api-btn--secondary:not(.api-final .api-btn--secondary):hover{
  background: var(--cx-bg-mute, #1d1d23) !important;
  border-color: var(--cx-mute, #93939c) !important;
  }

  /* [C] integraciones/api — .api-sec */
  html[data-theme="dark"] .api-sec {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb);
  }
  html[data-theme="dark"] .api-sec h3 { color: var(--cx-ink, #e7e7eb); }
  html[data-theme="dark"] .api-sec p { color: var(--cx-mute, #93939c); }

  /* [C] integraciones/api — .api-use */
  html[data-theme="dark"] .api-use{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [C] integraciones/mcp — .mcp-hero-chips span */
  html[data-theme="dark"] .mcp-hero-chips span,
  html[data-theme="dark"] .mcp-compat span {
  background: var(--cx-bg-mute, #1d1d23) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }

  /* [C] integraciones/mcp — .mcp-compat span */
  html[data-theme="dark"] .mcp-compat span{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important;box-shadow:none!important}

  /* [C] producto/centralita-virtual — html body #main-content .cx-cv-stair.cx-cv-stair */
  html[data-theme="dark"] .cx-cv-stair {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  
  html[data-theme="dark"] .cx-cv-stair--3 {
  background: linear-gradient(135deg, #16161b 0%, #1a2540 100%) !important;
  }
  html[data-theme="dark"] .cx-cv-stairh3 { color: var(--cx-ink, #f1f5f9) !important; }
  html[data-theme="dark"] .cx-cv-stairdesc { color: var(--cx-mute, #94a3b8) !important; }

  /* [C] producto/centralita-virtual — html body #main-content .cx-cv-stair--3.cx-cv-st */
  html body #main-content [data-theme="dark"] .cx-cv-stair--3.cx-cv-stair--3,html[data-theme="dark"] body #main-content .cx-cv-stair--3.cx-cv-stair--3{background:linear-gradient(135deg,rgba(20,28,46,.85) 0%,rgba(15,23,42,.92) 100%) !important;box-shadow:0 10px 30px -8px rgba(14,165,233,.25),0 22px 48px -16px rgba(74,109,255,.22) !important}

  /* [C] producto/numeracion — .hero */
  html[data-theme="dark"] .hero{background:linear-gradient(180deg,var(--cx-bg-soft,#16161b) 0%,var(--cx-bg,#0d0d10) 60%)!important}

  /* [C] producto/numeracion — .benefit */
  html[data-theme="dark"] .benefit {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb);
  }
  html[data-theme="dark"] .benefit h3,
  html[data-theme="dark"] .benefit strong {
  color: var(--cx-ink, #e7e7eb);
  }
  html[data-theme="dark"] .benefit p {
  color: var(--cx-mute, #93939c);
  }

  /* [C] producto/numeracion — .selector */
  html[data-theme="dark"] .selector {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb);
  }
  html[data-theme="dark"] .selector:hover {
  border-color: var(--cx-eyebrow-blue, #6b95ff) !important;
  }
  html[data-theme="dark"] .selector h3 { color: var(--cx-ink, #e7e7eb); }
  html[data-theme="dark"] .selector .need,
  html[data-theme="dark"] .selector p { color: var(--cx-mute, #93939c); }

  /* [C] producto/numeracion — .hero-phone */
  html[data-theme="dark"] .hero-phone,
  html[data-theme="dark"] .hero-orbit {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
  }

  /* [C] producto/numeracion — .hero-orbit */
  html[data-theme="dark"] .hero-orbit {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb);
  }
  html[data-theme="dark"] .hero-orbit small {
  color: var(--cx-mute, #93939c);
  }

  /* [C] producto/numeracion — .port-steps */
  html[data-theme="dark"] .port-steps{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [C] producto/numeracion — .operator-illu */
  html[data-theme="dark"] .operator-illu { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line, #2a2a31) !important; }
  html[data-theme="dark"] .operator-illu .operator-illu-head .meta strong,
  html[data-theme="dark"] .operator-illu-row { color: var(--cx-ink, #e7e7eb) !important; }
  html[data-theme="dark"] .operator-illu-head .meta span { color: var(--cx-mute, #a0a0ab) !important; }

  /* [C] producto/lineas-moviles — .lm-hero::before */
  html[data-theme="dark"] .lm-hero::before{background:
  radial-gradient(900px 460px at 85% -5%,rgba(255,107,26,.16),transparent 60%),
  radial-gradient(900px 500px at 5% 30%,rgba(47,107,255,.14),transparent 60%),
  linear-gradient(180deg,var(--cx-bg-soft,#16161b) 0%,var(--cx-bg,#0d0d10) 100%)!important}

  /* [C] producto/softphone — .hero */
  html[data-theme="dark"] .hero {
  background: linear-gradient(180deg, var(--cx-bg-soft, #16161b) 0%, var(--cx-bg, #0d0d10) 100%) !important;
  }

  /* [C] producto/softphone — .demo */
  html[data-theme="dark"] .demo{background:linear-gradient(180deg,var(--cx-bg,#0d0d10) 0%,var(--cx-bg-soft,#16161b) 100%)!important;}

  /* [C] producto/trunk — .cx-region[open] */
  html[data-theme="dark"] .cx-region[open] { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] producto/trunk — .cx-compat-logo svg [fill="#0f2756"], .cx-compat */
  html[data-theme="dark"] .cx-compat-logo svg [fill="#0f2756"],
  html[data-theme="dark"] svg polygon[fill="#0f2756"],
  html[data-theme="dark"] svg text[fill="#0f2756"],
  html[data-theme="dark"] svg tspan[fill="#0f2756"] {
  fill: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .cx-compat-logo .logo-tx {
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .cx-compat-logo .logo-tx::before {
  background: var(--cx-ink, #e7e7eb) !important;
  }

  /* [C] recursos/blog — .blog-toolbar */
  html[data-theme="dark"] .blog-toolbar { background: var(--cx-bg, #0d0d10) !important; border-bottom-color: var(--cx-line, #2a2a31) !important; }

  /* [C] recursos/blog — .blog-chip */
  html[data-theme="dark"] .blog-chip { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] recursos/blog — .blog-featured */
  html[data-theme="dark"] .blog-featured {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .blog-featured h2 a { color: var(--cx-ink, #e7e7eb) !important; }
  html[data-theme="dark"] .blog-featured__excerpt,
  html[data-theme="dark"] .blog-featured__meta { color: var(--cx-mute, #93939c) !important; }
  
  html[data-theme="dark"] .blog-featured__panel { background: rgba(29,29,35,.96) !important; }
  html[data-theme="dark"] .blog-featured__panel-t { color: var(--cx-ink, #e7e7eb) !important; }
  html[data-theme="dark"] .blog-featured__panel-s { color: var(--cx-mute, #93939c) !important; }

  /* [C] recursos/blog/mcp-api-crm-cuando-usar — .bp-body */
  html[data-theme="dark"] .bp-body { background: var(--cx-bg) !important; }

  /* [C] recursos/blog/mcp-api-crm-cuando-usar — .bp-toc */
  html[data-theme="dark"] .bp-toc {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }

  /* [C] recursos/blog/mcp-api-crm-cuando-usar — .bp-cases li */
  html[data-theme="dark"] .bp-cases li { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] recursos/blog/webhooks-automatizar-tareas-empresa — .bp-steps li */
  html[data-theme="dark"] .bp-steps li {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink-soft, #c8c8cf) !important;
  }
  html[data-theme="dark"] .bp-steps li strong {
  color: var(--cx-ink, #e7e7eb) !important;
  }

  /* [C] recursos — .rec-cases__logo */
  html[data-theme="dark"] .rec-cases__logo {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb);
  }

  /* [C] recursos/casos-exito — .ce-filter */
  html[data-theme="dark"] .ce-filter { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] recursos/descargas — .dl-store */
  html[data-theme="dark"] .dl-store {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb);
  }
  html[data-theme="dark"] .dl-store:hover {
  border-color: var(--cx-eyebrow-blue, #6b95ff) !important;
  }
  html[data-theme="dark"] .dl-store__name { color: var(--cx-ink, #e7e7eb); }
  html[data-theme="dark"] .dl-store__pre { color: var(--cx-mute, #93939c); }

  /* [C] recursos/descargas/changelog-7.6.0.2 — .cl-toc */
  html[data-theme="dark"] .cl-toc { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] recursos/hitos-eventos — .he-feat */
  html[data-theme="dark"] .he-feat {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .he-feat__body h3,
  html[data-theme="dark"] .he-feat__excerpt {
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .he-feat__meta {
  color: var(--cx-mute, #93939c) !important;
  }
  html[data-theme="dark"] .he-feat__tag {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .he-feat__thumb--logo {
  background: var(--cx-bg-mute, #1d1d23) !important;
  }

  /* [C] recursos/noticias/ia-atencion-cliente-2026 — .news-art-body ul li */
  html[data-theme="dark"] .news-art-body ul li { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] recursos/noticias — .news-featured */
  html[data-theme="dark"] .news-featured {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
  }

  /* [C] recursos/noticias — .news-chip */
  html[data-theme="dark"] .news-chip {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink-soft) !important;
  }
  html[data-theme="dark"] .news-chip:hover {
  border-color: var(--cx-blue) !important;
  color: var(--cx-blue) !important;
  }

  /* [C] recursos/noticias/identificar-llamadas-comerciales-buenas-practicas — .news-art-share a, .news-art-share button */
  html[data-theme="dark"] .news-art-share a,
  html[data-theme="dark"] .news-art-share button {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink-soft, #c8c8cf) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }
  html[data-theme="dark"] .news-art-share a:hover,
  html[data-theme="dark"] .news-art-share button:hover {
  border-color: var(--cx-eyebrow-blue, #6b95ff) !important;
  color: var(--cx-eyebrow-blue, #6b95ff) !important;
  }

  /* [C] recursos/quienes-somos — .qs-map */
  html[data-theme="dark"] .qs-map {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  box-shadow: 0 24px 56px -18px rgba(0,0,0,.55) !important;
  }

  /* [C] recursos/quienes-somos — .qs-stat */
  html[data-theme="dark"] .qs-stat { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] recursos/quienes-somos — .qs-guarantees */
  html[data-theme="dark"] .qs-guarantees { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] recursos/quienes-somos — .qs-final__box */
  html[data-theme="dark"] .qs-final__box {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }

  /* [C] servicios/centralita/agentes-voz-ia — .av-panel */
  html[data-theme="dark"] .av-panel { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line, #2a2a31) !important; }
  html[data-theme="dark"] .av-panel__action { background: var(--cx-bg-mute, #1e1e25) !important; }

  /* [C] servicios/centralita/agentes-voz-ia — .av-actions li */
  html[data-theme="dark"] .av-actions li {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .av-actions li span {
  color: var(--cx-ink-soft, #c8c8cf) !important;
  }

  /* [C] servicios/centralita/centralita-virtual — .cv-sla__metric */
  html[data-theme="dark"] .cv-sla__metric { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line, #2a2a31) !important; color: var(--cx-ink, #e7e7eb) !important; }

  /* [C] servicios/centralita/centralita-virtual — .cv-sla__chip */
  html[data-theme="dark"] .cv-sla__chip {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }

  /* [C] servicios/centralita/ddi — .dd-port__right */
  html[data-theme="dark"] .dd-port__right {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }

  /* [C] servicios/centralita/ia — .ia-panel */
  html[data-theme="dark"] .ia-panel {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .ia-panel h3 { color: var(--cx-ink, #e7e7eb) !important; }
  html[data-theme="dark"] .ia-panel__list li { color: var(--cx-ink-soft, #c8c8cf) !important; }

  /* [C] servicios/centralita/sip-trunk — .st-diagram */
  html[data-theme="dark"] .st-diagram { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/centralita/sip-trunk — .st-compat__chip */
  html[data-theme="dark"] .st-compat__chip {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
  }
  html[data-theme="dark"] .st-compat__chip:hover {
  border-color: rgba(47,107,255,.45) !important;
  }

  /* [C] servicios/complementarios/fijo-virtual — .fv-compare */
  html[data-theme="dark"] .fv-compare { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line, #2a2a31) !important; }

  /* [C] servicios/complementarios/sms — .sms-hero__dash */
  html[data-theme="dark"] .sms-hero__dash { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/complementarios/sms — .sms-credit */
  html[data-theme="dark"] .sms-credit {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }

  /* [C] servicios/complementarios/webfax — .wf-plan */
  html[data-theme="dark"] .wf-plan {
  background: var(--cx-bg-soft) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
  }

  /* [C] servicios/conectividad/4g-5g — .fg-cmp-wrap */
  html[data-theme="dark"] .fg-cmp-wrap { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line, #2a2a31) !important; color: var(--cx-ink, #e7e7eb); }

  /* [C] servicios/conectividad/4g-5g — .fg-cross */
  html[data-theme="dark"] .fg-cross {
  background: linear-gradient(135deg, var(--cx-bg-soft, #16161b) 0%, var(--cx-bg-mute, #1d1d23) 100%) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .fg-cross h2,
  html[data-theme="dark"] .fg-cross strong { color: var(--cx-ink, #e7e7eb) !important; }
  html[data-theme="dark"] .fg-cross p,
  html[data-theme="dark"] .fg-cross__list li { color: var(--cx-ink-soft, #c8c8cf) !important; }

  /* [C] servicios/conectividad/fibra-standard — .fs-price__main */
  html[data-theme="dark"] .fs-price__main { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line) !important; }

  /* [C] servicios/conectividad/fibra-standard — .fs-extra */
  html[data-theme="dark"] .fs-extra { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/conectividad/fibra-standard — .fs-ipfija__uso */
  html[data-theme="dark"] .fs-ipfija__uso {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }

  /* [C] servicios/conectividad/fibra-standard — .fs-tel__list li */
  html[data-theme="dark"] .fs-tel__list li { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/conectividad/fibra-standard — .fs-compare__table */
  html[data-theme="dark"] .fs-compare__table {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }

  /* [C] servicios/conectividad/mpls-firewall — .mp-why__dash */
  html[data-theme="dark"] .mp-why__dash {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }

  /* [C] servicios/conectividad/mpls-firewall — .mp-fw__right */
  html[data-theme="dark"] .mp-fw__right {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .mp-fw__right h3,
  html[data-theme="dark"] .mp-fw__list li strong {
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .mp-fw__list li {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink-soft, #c8c8cf) !important;
  }

  /* [C] servicios/conectividad/starlink — .sl-offer */
  html[data-theme="dark"] .sl-offer {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }

  /* [C] servicios/conexia-time — .ct-price */
  html[data-theme="dark"] .ct-price { background: var(--cx-bg-soft) !important; border-color: var(--cx-blue) !important; color: var(--cx-ink) !important; }

  /* [C] servicios/ia/calendario — .ag-bot__msg--in */
  html[data-theme="dark"] .ag-bot__msg--in { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/ia/omnia — .om-side */
  html[data-theme="dark"] .om-side {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }

  /* [C] servicios/ia/omnia — .om-kanban */
  html[data-theme="dark"] .om-kanban { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line, #2a2a31) !important; }

  /* [C] servicios/integraciones/crm — .crm-hero__mock */
  html[data-theme="dark"] .crm-hero__mock { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/integraciones/crm — .crm-connector__pill */
  html[data-theme="dark"] .crm-connector__pill {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .crm-connector__pill strong {
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .crm-connector__pill span {
  color: var(--cx-mute, #93939c) !important;
  }

  /* [C] servicios/integraciones/api — .api-chip */
  html[data-theme="dark"] .api-chip {
  background: var(--cx-surface-2, #161922);
  border-color: var(--cx-line, rgba(255,255,255,.10));
  color: var(--cx-ink-soft, #c7c9d1);
  }

  /* [C] servicios/integraciones/mcp — .mcp-llm */
  html[data-theme="dark"] .mcp-llm { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/integraciones/mcp — .mcp-table, .mcp-table tbody th */
  html[data-theme="dark"] .mcp-table {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }
  html[data-theme="dark"] .mcp-table thead th {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .mcp-table tbody th {
  background: var(--cx-bg-soft, #16161b) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .mcp-table th,
  html[data-theme="dark"] .mcp-table td {
  border-color: var(--cx-line-soft, #23232a) !important;
  }

  /* [C] servicios/integraciones/otras — .ot-chip */
  html[data-theme="dark"] .ot-chip {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink-soft, #b8b8c0) !important;
  }
  html[data-theme="dark"] .ot-chip__ico {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }
  html[data-theme="dark"] .ot-chip:hover,
  html[data-theme="dark"] .ot-chip--link {
  border-color: rgba(47,107,255,.45) !important;
  color: var(--cx-blue, #6a9bff) !important;
  }

  /* [C] servicios/integraciones/otras — .ot-cta */
  html[data-theme="dark"] .ot-cta { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line, #2a2a31) !important; color: var(--cx-ink, #e7e7eb) !important; }
  html[data-theme="dark"] .ot-cta__text h2 { color: var(--cx-ink, #e7e7eb) !important; }
  html[data-theme="dark"] .ot-cta__text p { color: var(--cx-mute, #93939c) !important; }

  /* [C] servicios/integraciones/teams — .ms-compare */
  html[data-theme="dark"] .ms-compare {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }

  /* [C] servicios/integraciones/webhooks — .wh-payload__fam */
  html[data-theme="dark"] .wh-payload__fam { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/integraciones/webhooks — .wh-how__checklist li */
  html[data-theme="dark"] .wh-how__checklist li { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/lineas-moviles/esim-internacional — .es-compat__note */
  html[data-theme="dark"] .es-compat__note { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/lineas-moviles/esim-internacional — .es-cmp */
  html[data-theme="dark"] .es-cmp {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  }
  html[data-theme="dark"] .es-cmp__row + .es-cmp__row {
  border-top-color: var(--cx-line-soft, #1f1f25) !important;
  }
  html[data-theme="dark"] .es-cmp__cell {
  color: var(--cx-ink-soft, #c8c8cf) !important;
  }
  html[data-theme="dark"] .es-cmp__cell--head {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }
  html[data-theme="dark"] .es-cmp__cell--label {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  }

  /* [C] servicios/lineas-moviles/esim-internacional — .es-final */
  html[data-theme="dark"] .es-final { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/lineas-moviles/lineas-moviles — .lm-split__card */
  html[data-theme="dark"] .lm-split__card { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/lineas-moviles/m2m-iot — .mi-stats */
  html[data-theme="dark"] .mi-stats { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [C] servicios/lineas-moviles/sim-business — .bs-audience__list li */
  html[data-theme="dark"] .bs-audience__list li {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink-soft, #c8c8cf) !important;
  }

  /* [M] conectividad/5g — .ig-cross .tag */
  html[data-theme="dark"] .ig-cross .tag{background:var(--cx-bg-mute,#1f1f26)!important;color:var(--cx-ink,#e7e7eb)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [M] conectividad/5g — .ig-btn-ghost */
  html[data-theme="dark"] .ig-btn-ghost{background:var(--cx-bg-soft,#16161b)!important;color:var(--cx-ink,#e7e7eb)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [M] conectividad/5g — .ig-scenarios .sc-ic */
  html[data-theme="dark"] .ig-scenarios .sc-ic{background:var(--cx-bg-mute,#1f1f26)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [M] conectividad/5g — .ig-var.v3 .ig-var-badge */
  html[data-theme="dark"] .ig-var.v3 .ig-var-badge{background:rgba(34,197,94,.18)!important;color:#7ee2a8!important}

  /* [M] conectividad/fibra-10g — .xg-net-warn */
  html[data-theme="dark"] .xg-net-warn{background:rgba(212,165,65,.16)!important;color:#f0c870!important}

  /* [M] conectividad/fibra-10g — .xg-path-a .xg-path-tag */
  html[data-theme="dark"] .xg-path-a .xg-path-tag{background:rgba(47,107,255,.18)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [M] conectividad/fibra-10g — .xg-floor */
  html[data-theme="dark"] .xg-floor{background:var(--cx-bg-mute,#1d1d23)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important}

  /* [M] conectividad/fibra — .fo-backups */
  html[data-theme="dark"] .fo-backups{background:var(--cx-bg,#0f0f12)!important}

  /* [M] conectividad/fibra — .fo-logo.lar */
  html[data-theme="dark"] .fo-logo.lar,html[data-theme="dark"] .fo-logo.cb,html[data-theme="dark"] .fo-logo.podo,html[data-theme="dark"] .fo-logo.mob,html[data-theme="dark"] .fo-logo.cov,html[data-theme="dark"] .fo-logo.seg{color:var(--cx-ink,#e7e7eb)!important}

  /* [M] conectividad/fibra-standard — .fs-hero-art .fs-tagchip */
  html[data-theme="dark"] .fs-hero-art .fs-tagchip{background:var(--cx-bg-mute,#1d1d23)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important}

  /* [M] conectividad/fibra-standard — .fs-hero-art .fs-pricetag */
  html[data-theme="dark"] .fs-hero-art .fs-pricetag{background:var(--cx-bg-mute,#1d1d23)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important}

  /* [M] conectividad/fibra-standard — .fs-ipfija-callout .badge */
  html[data-theme="dark"] .fs-ipfija-callout .badge{background:var(--cx-bg-mute,#1d1d23)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [M] conectividad/fibra-standard — .fs-use */
  html[data-theme="dark"] .fs-use{background:var(--cx-bg-mute,#1d1d23)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [M] conectividad/mpls-firewall — .mp-badge-gold */
  html[data-theme="dark"] .mp-badge-gold{background:rgba(212,165,65,.16)!important;color:#f0c870!important;border-color:rgba(212,165,65,.35)!important}

  /* [M] conectividad/mpls-firewall — .mp-cmp-card .tag */
  html[data-theme="dark"] .mp-cmp-card .tag{background:var(--cx-bg-mute,#1d1d23)!important;color:var(--cx-mute,#93939c)!important}

  /* [M] conectividad/starlink — .sl-backup */
  html[data-theme="dark"] .sl-backup{background:var(--cx-bg,#0f0f12)!important}

  /* [M] conectividad/starlink — .sl-chips span */
  html[data-theme="dark"] .sl-chips span{background:var(--cx-bg-mute,#1d1d23)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important}

  /* [M] conectividad/starlink — .sl-comp thead th .ic.gold */
  html[data-theme="dark"] .sl-comp thead th .ic.gold{background:rgba(212,165,65,.16)!important;color:#f0c870!important}

  /* [M] integraciones/mcp — .mcp-eco-pills span */
  html[data-theme="dark"] .mcp-eco-pills span{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important}

  /* [M] integraciones/mcp — .mcp-comp .channel-pill.wh */
  html[data-theme="dark"] .mcp-comp .channel-pill.wh{background:rgba(212,165,65,.16)!important;color:#e3b341!important}

  /* [M] integraciones/mcp — .mcp-tri-card .tag.sec */
  html[data-theme="dark"] .mcp-tri-card .tag.sec{background:rgba(22,163,74,.18)!important;color:#4ade80!important}

  /* [M] partners — .pt-logo */
  html[data-theme="dark"] .pt-logo{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [M] partners — .pt-review--featured */
  html[data-theme="dark"] .pt-review--featured{background:linear-gradient(180deg,var(--cx-bg-soft,#16161b) 0%,rgba(47,107,255,.10) 100%)!important;border-color:rgba(47,107,255,.35)!important}

  /* [M] partners — .pt-review__brandbadge */
  html[data-theme="dark"] .pt-review__brandbadge{background:var(--cx-bg-mute,#1c1c22)!important;border-color:var(--cx-line,#2a2a31)!important}

  /* [M] producto/centralita-virtual — html body #main-content .cx-cv-hero__eyebrow.cx- */
  html[data-theme="dark"] body #main-content .cx-cv-hero__eyebrow.cx-cv-hero__eyebrow, html[data-theme="dark"] body #main-content .cx-cv-eyebrow.cx-cv-eyebrow { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-mute,#93939c) !important; }

  /* [M] producto/centralita-virtual — html body #main-content .cx-cv-btn--secondary.cx */
  html[data-theme="dark"] body #main-content .cx-cv-btn--secondary.cx-cv-btn--secondary { background: var(--cx-bg-soft,#16161b) !important; color: var(--cx-ink,#e7e7eb) !important; border-color: var(--cx-line,#2a2a31) !important; }

  /* [M] producto/numeracion — .btn-ghost */
  html[data-theme="dark"] .btn-ghost{background:var(--cx-bg-soft,#16161b)!important;color:var(--cx-ink,#e7e7eb)!important;border-color:var(--cx-line,#2a2a31)!important;}

  /* [M] producto/numeracion — .port-shield */
  html[data-theme="dark"] .port-shield{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important;}

  /* [M] producto/numeracion — .bg-green, .bg-amber, .bg-purple, .bg-cyan, .bg- */
  html[data-theme="dark"] .bg-green{color:#4ade80!important;}html[data-theme="dark"] .bg-amber{color:#fbbf24!important;}html[data-theme="dark"] .bg-purple{color:#c4b5fd!important;}html[data-theme="dark"] .bg-cyan{color:#22d3ee!important;}html[data-theme="dark"] .bg-rose{color:#fb7185!important;}

  /* [M] producto/softphone — .device, .device-desktop .main, .device-desktop  */
  html[data-theme="dark"] .device, html[data-theme="dark"] .device-desktop .main { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line, #2a2a31) !important; } html[data-theme="dark"] .device-desktop .sidebar { background: var(--cx-bg, #0d0d10) !important; border-color: var(--cx-line, #2a2a31) !important; }

  /* [M] producto/softphone — .demo-visual .mock, .demo-visual .mock-desk .bar */
  html[data-theme="dark"] .demo-visual .mock { background: var(--cx-bg-soft, #16161b) !important; border-color: var(--cx-line, #2a2a31) !important; } html[data-theme="dark"] .demo-visual .mock-desk .bar { background: var(--cx-bg, #0d0d10) !important; border-color: var(--cx-line, #2a2a31) !important; }

  /* [M] producto/softphone — .btn-outline */
  html[data-theme="dark"] .btn-outline { background: var(--cx-bg-soft, #16161b) !important; color: var(--cx-ink, #e7e7eb) !important; border-color: var(--cx-line, #2a2a31) !important; }

  /* [M] producto/trunk — .cx-region summary .count */
  html[data-theme="dark"] .cx-region summary .count { background: var(--cx-bg, #0d0d10) !important; border-color: var(--cx-line, #2a2a31) !important; color: var(--cx-mute, #93939c) !important; }

  /* [M] producto/trunk — .cx-plans-table tbody tr:hover */
  html[data-theme="dark"] .cx-plans-table tbody tr:hover { background: var(--cx-bg, #0d0d10) !important; }

  /* [M] producto/trunk — .cx-bono-card.nacional .badge, .cx-bono-card.zon */
  html[data-theme="dark"] .cx-bono-card.nacional .badge { background: var(--green-soft, rgba(16,185,129,.16)) !important; color: #34d399 !important; } html[data-theme="dark"] .cx-bono-card.zona2 .badge { background: var(--orange-soft, rgba(251,146,60,.16)) !important; color: #fbbf24 !important; }

  /* [M] recursos/blog — .blog-empty */
  html[data-theme="dark"] .blog-empty { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; }

  /* [M] recursos/descargas — .os-chip:hover */
  html[data-theme="dark"] .os-chip:hover { background: var(--cx-bg-mute,#1f1f26) !important; }

  /* [M] recursos/descargas/changelog-7.6.0.2 — .cl-note strong */
  html[data-theme="dark"] .cl-note strong { color: #e0b352 !important; }

  /* [M] recursos/hitos-eventos — .he-tl-item::before */
  html[data-theme="dark"] .he-tl-item::before { background: var(--cx-bg-soft,#16161b) !important; }

  /* [M] recursos/noticias/ia-atencion-cliente-2026 — .news-art-share a, .news-art-share button */
  html[data-theme="dark"] .news-art-share a, html[data-theme="dark"] .news-art-share button { background: var(--cx-bg-soft,#16161b) !important; color: var(--cx-ink,#e7e7eb) !important; border-color: var(--cx-line,#2a2a31) !important; }

  /* [M] servicios/centralita/agentes-voz-ia — .av-panel__action */
  html[data-theme="dark"] .av-panel__action { background: var(--cx-bg-soft,#16161b) !important; }

  /* [M] servicios/centralita/centralita-virtual — .cv-int__tile-ico */
  html[data-theme="dark"] .cv-int__tile-ico { background: var(--cx-bg-mute,#202028) !important; border-color: var(--cx-line,#2a2a31) !important; }

  /* [M] servicios/centralita/ia — .ia-hero__chip */
  html[data-theme="dark"] .ia-hero__chip { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; }

  /* [M] servicios/centralita/sip-trunk — .st-case__brand */
  html[data-theme="dark"] .st-case__brand { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [M] servicios/centralita/sip-trunk — .st-case__visual svg rect[fill="#fff"], .st-case */
  html[data-theme="dark"] .st-case__visual svg rect[fill="#fff"] { fill: var(--cx-bg-soft,#16161b) !important; } html[data-theme="dark"] .st-case__visual svg rect[fill="#f5f7fb"] { fill: var(--cx-bg-mute,#202028) !important; } html[data-theme="dark"] .st-case__visual svg rect[stroke="#e6e9f2"] { stroke: var(--cx-line,#2a2a31) !important; }

  /* [M] servicios/complementarios/fijo-virtual — .fv-hero__visual svg rect[fill="#fff"] */
  html[data-theme="dark"] .fv-hero__visual svg rect[fill="#fff"] { fill: var(--cx-bg-soft,#16161b) !important; } html[data-theme="dark"] .fv-hero__visual svg rect[stroke="#e6e9f2"] { stroke: var(--cx-line,#2a2a31) !important; } html[data-theme="dark"] .fv-hero__visual svg text[fill="#0c1430"] { fill: var(--cx-ink,#e7e7eb) !important; }

  /* [M] servicios/complementarios/sms — .sms-pull__bubble */
  html[data-theme="dark"] .sms-pull__bubble { background: var(--cx-bg-mute,#202028) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [M] servicios/conectividad/fibra-10g — .fg-tbl thead th */
  html[data-theme="dark"] .fg-tbl thead th { background: var(--cx-bg-mute,#1c1c22) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [M] servicios/conectividad/fibra-standard — .fs-net__chip */
  html[data-theme="dark"] .fs-net__chip { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [M] servicios/conectividad/starlink — .sl-compare__table thead th:first-child */
  html[data-theme="dark"] .sl-compare__table thead th:first-child { background: var(--cx-bg-soft,#16161b) !important; }

  /* [M] servicios/conectividad/starlink — .sl-compare__table tbody th */
  html[data-theme="dark"] .sl-compare__table tbody th { background: var(--cx-bg-mute,#1c1c22) !important; color: var(--cx-mute,#93939c) !important; }

  /* [M] servicios/ia/automatizaciones — .au-tx-list__code */
  html[data-theme="dark"] .au-tx-list__code { background: var(--cx-bg-mute,#1c1c22) !important; border-color: var(--cx-line,#2a2a31) !important; }

  /* [M] servicios/ia/automatizaciones — .au-final > div > div[style*="background:#fff"] */
  html[data-theme="dark"] .au-final div[style*="background:#fff"] { background: var(--cx-bg-soft,#16161b) !important; }

  /* [M] servicios/ia/calendario — .ag-bot__chip */
  html[data-theme="dark"] .ag-bot__chip { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; }

  /* [M] servicios/integraciones/crm — .crm-hero__contact-cta */
  html[data-theme="dark"] .crm-hero__contact-cta { background: var(--cx-bg-mute,#101014) !important; }

  /* [M] servicios/integraciones/api — .api-final__links + div[style], .api-final .acti */
  html[data-theme="dark"] .api-final div[style*="background:#fff"] { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; }

  /* [M] servicios/lineas-moviles/lineas-moviles — .lm-roaming path[fill="#fff"] */
  html[data-theme="dark"] .lm-roaming path[fill="#fff"]{fill:#1f2430!important;stroke:var(--cx-line,#2a2a31)!important;}

  /* [M] soluciones/autonomos — .anywhere__img */
  html[data-theme="dark"] .anywhere__img{background:linear-gradient(135deg,rgba(47,107,255,.14) 0%,rgba(14,165,233,.14) 100%)!important;}

  /* [M] soluciones/despachos — .recep__img */
  html[data-theme="dark"] .recep__img{background:linear-gradient(135deg,rgba(47,107,255,.12) 0%,rgba(148,163,184,.06) 100%)!important;}

  /* [M] soluciones/gran-empresa — .sol-hero__claim */
  html[data-theme="dark"] .sol-hero__claim{background:var(--cx-bg-soft,#16161b)!important;border-color:var(--cx-line,#2a2a31)!important;color:var(--cx-ink,#e7e7eb)!important;}

  /* [M] soluciones/pymes — .sol-hero__pill */
  html[data-theme="dark"] .sol-hero__pill { background: var(--cx-bg-soft,#16161b) !important; border-color: var(--cx-line,#2a2a31) !important; color: var(--cx-ink,#e7e7eb) !important; }

  /* [M] soluciones/retail — .mpls-card--old */
  html[data-theme="dark"] .mpls-card--old { background: rgba(232,74,74,.08) !important; border-color: rgba(232,74,74,.30) !important; }


/* ════════════════════════════════════════════════════════════════════
   v=22 — CTAs residuales del audit visual final (2026-05-29)
   Botones de las 12 páginas-plantilla. Incluye CASUALTIES del var-override:
   .*-btn-dark usaba background:var(--ink) (navy oscuro) como FONDO; al flipear
   --ink a claro quedaron en gris claro. + botones blancos con texto var(--ink)
   (blanco-sobre-blanco) + .mcp-hero-vis (tarjeta blanca excluida del catch-all
   -vis por contener "hero").
   ════════════════════════════════════════════════════════════════════ */

/* A) *-btn-dark: forzar fondo oscuro explícito (no var(--ink) que ahora es claro) */
html[data-theme="dark"] .fo-btn-dark,
html[data-theme="dark"] .fs-btn-dark,
html[data-theme="dark"] .lm-btn-dark,
html[data-theme="dark"] .mp-btn-dark,
html[data-theme="dark"] .sl-btn-dark,
html[data-theme="dark"] .xg-btn-dark {
  background: #182238 !important;
  color: #fff !important;
  border: 1px solid var(--cx-line, #2a2a31) !important;
}

/* B) *-btn-ghost variante light (bg:#fff + color:var(--ink)) → blanco-sobre-blanco.
   Sólo las que NO cubrí antes con el :not(.cta) (ig/xg/cx). */
html[data-theme="dark"] .cx-btn-ghost,
html[data-theme="dark"] .ig-btn-ghost,
html[data-theme="dark"] .xg-btn-ghost {
  background: var(--cx-bg-mute, #1d1d23) !important;
  color: var(--cx-ink, #e7e7eb) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}

/* C) CTA primarias blancas (bg:#fff + color:var(--ink)) → mantener blanco punchy
   pero forzar TEXTO oscuro (legible sobre el botón blanco en sección dark). */
html[data-theme="dark"] .mp-btn-primary,
html[data-theme="dark"] .fo-btn-primary,
html[data-theme="dark"] .cx-btn-primary,
html[data-theme="dark"] .mcp-btn-on-dark {
  background: #ffffff !important;
  color: #0d1220 !important;
  border-color: #ffffff !important;
}

/* D) .mcp-hero-vis: tarjeta blanca del hero MCP, excluida del catch-all [class*="-vis"]
   por el :not([class*="hero"]). Override explícito. */
html[data-theme="dark"] .mcp-hero-vis {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
  color: var(--cx-ink, #e7e7eb) !important;
}


/* v=23 — fibra-10g: .xg-path-b .xg-path-cta a es botón blanco con color:var(--ink)
   (navy en light) sobre la card navy path-b. El var-override flipó el texto a claro
   → blanco-sobre-blanco. Scope SOLO a path-b (path-a usa gradient azul, no tocar). */
html[data-theme="dark"] .xg-path-b .xg-path-cta a {
  background: #ffffff !important;
  color: #0d1220 !important;
}
html[data-theme="dark"] .xg-path-b .xg-path-cta a:hover {
  background: #eef2ff !important;
}


/* v=24 — Selector de idioma (desplegable) en dark mode */
html[data-theme="dark"] .cx-nav__lang-btn { color: var(--cx-ink-soft, #c8c8cf) !important; }
html[data-theme="dark"] .cx-nav__lang-btn:hover { color: var(--cx-ink, #e7e7eb) !important; }
html[data-theme="dark"] .cx-nav__lang-menu {
  background: var(--cx-bg-soft, #16161b) !important;
  border-color: var(--cx-line, #2a2a31) !important;
}
html[data-theme="dark"] .cx-nav__lang-opt { color: var(--cx-ink, #e7e7eb) !important; }
html[data-theme="dark"] .cx-nav__lang-opt:hover { background: var(--cx-bg-mute, #1d1d23) !important; }
html[data-theme="dark"] .cx-nav__lang-opt[aria-current="true"] { color: #6b95ff !important; }