/* ============================================================ Zook · Tema claro compartido para las landings. Se activa con html[data-theme="light"] (lo pone el snippet no-FOUC del y el botón de /js/theme-toggle.js). Cómo funciona: las páginas usan los mismos tokens (--ink/--surface/--text/--line/--violet/--lime...). Además, los overlays y bordes se expresan como rgba(var(--ink-rgb)…) y rgba(var(--text-rgb)…); en claro invertimos esos dos canales para que cada fondo oscuro se vuelva claro y cada borde/relleno blanco se vuelva oscuro, sin tocar el diseño. ============================================================ */ html[data-theme="light"]{ --ink:#ffffff; --surface:#f6f7f9; --surface-2:#eceef2; --line:rgba(15,17,21,.12); --line-2:rgba(15,17,21,.18); --text:#0f1115; --muted:#4b5563; --muted-2:#6b7280; --violet:#6d3bff; --violet-press:#5a27f0; --lime:#4d7c0f; /* verde legible como texto sobre claro */ --on-violet:#ffffff; --ink-rgb:255,255,255; /* overlays "oscuros" (rgba(var(--ink-rgb)…)) → claros */ --text-rgb:15,17,21; /* bordes/rellenos "blancos" (rgba(var(--text-rgb)…)) → oscuros */ --depth:#e9ebef; /* final "profundo" de gradientes de panel → claro */ color-scheme: light; } /* Botones de acento: forzamos contraste correcto en claro sin depender de cómo cada página definió el color del texto (todas usan estas clases). */ html[data-theme="light"] .btn-primary{background:#6d3bff;color:#fff;} html[data-theme="light"] .btn-primary:hover{background:#5a27f0;} html[data-theme="light"] .btn-lime{background:#3f6b0c;color:#fff;} html[data-theme="light"] .btn-lime:hover{background:#4d7c0f;} html[data-theme="light"] ::selection{background:#c8f03c;color:#0f1115;} /* Solo el mockup de dispositivo (.phone) y las tarjetas que flotan sobre una foto (.solo-card) siguen OSCUROS en claro (dentro reponemos tokens oscuros para que su texto siga legible). Las bandas de confianza ahora van en CLARO. */ html[data-theme="light"] .phone, html[data-theme="light"] .solo-card{ --text:#faf9f7; --muted:#a39fa6; --muted-2:#76727a; --surface:#151316; --surface-2:#1d1a1f; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16); --ink-rgb:10,10,11; --text-rgb:255,255,255; --depth:#0c0b11; } /* Logos de clientes y de pagos: son blancos (para tema oscuro). En claro los pintamos de NEGRO con filtro (equivale a una versión negra sobre transparente), así se ven sobre las bandas claras. En oscuro se quedan blancos, sin cambios. */ html[data-theme="light"] .logo-item img, html[data-theme="light"] .pay-chip img{filter:brightness(0);} /* Sombras densas suavizadas para el fondo claro. */ html[data-theme="light"] .trust-card{box-shadow:0 22px 55px -44px rgba(124,92,255,.28),0 14px 38px -34px rgba(15,17,21,.16);} html[data-theme="light"] .how-stage, html[data-theme="light"] .ssp{box-shadow:0 18px 46px -38px rgba(15,17,21,.20);} html[data-theme="light"] .phone{box-shadow:0 30px 70px -34px rgba(15,17,21,.30);} /* Hovers de botón que iban a un casi-negro: se mantienen violeta en claro. */ html[data-theme="light"] #diagnostico .cta .btn-primary:hover, html[data-theme="light"] .form .btn-submit:hover{background:#5a27f0;}