/* ═══════════════════════════════════════════════════════════════════════ QUANTUM CLUB — CAPA DE MODO CLARO ─────────────────────────────────────────────────────────────────────── El sitio está diseñado en oscuro y ese sigue siendo el modo por defecto. Este fichero SOLO añade: (1) el botón de cambio de tema y (2) todo lo necesario para repintar la página cuando . Nada de aquí se aplica en modo oscuro salvo el propio botón, así que borrar este fichero devuelve el sitio exactamente a como estaba. Los !important son necesarios a propósito: hay que ganar a los estilos inline del HTML y a las utilidades que Tailwind inyecta en runtime. La paleta clara es la misma que ya usa la landing en inglés (/us/), para que las dos versiones del sitio hablen el mismo idioma visual. ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── 1 · BOTÓN DE CAMBIO DE TEMA (visible en ambos modos) ─────────────────────────────────────────────────────────────────────── */ .theme-toggle { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: #93c5fd; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .theme-toggle:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); } .theme-toggle:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } .theme-toggle svg { width: 0.95rem; height: 0.95rem; display: block; } /* En móviles estrechos la barra ya iba justa: recuperamos el ancho que ocupa el botón apretando el padding de la píldora. (A 320 px la barra se salía incluso antes de añadirlo; esto también lo arregla.) */ @media (max-width: 420px) { nav .glass { padding-left: 0.9rem !important; padding-right: 0.9rem !important; } .theme-toggle { width: 2rem; height: 2rem; } .theme-toggle svg { width: 0.85rem; height: 0.85rem; } } @media (max-width: 350px) { nav .glass > div > div:last-child { gap: 0.35rem !important; } nav .glass > div > div:last-child > a { padding-left: 0.7rem !important; padding-right: 0.7rem !important; } } html[data-theme="light"] .theme-toggle { border-color: #d8dfea; color: #2563eb; } html[data-theme="light"] .theme-toggle:hover { color: #1d4ed8; border-color: #b9c5d8; background: rgba(37, 99, 235, 0.07); } /* Sol = "pásame a claro" (se ve en oscuro) · Luna = "vuélveme a oscuro" */ html[data-theme="light"] .theme-toggle .ic-sun, html:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; } /* ═══════════════════════════════════════════════════════════════════════ 2 · A PARTIR DE AQUÍ: SOLO MODO CLARO ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --paper: #f6f8fc; /* fondo de página */ --card: #ffffff; /* superficie de tarjeta */ --ink: #0a0f1a; /* titulares */ --body: #3c4457; /* texto corrido */ --muted: #6b7385; /* secundario */ --faint: #8a92a3; /* terciario */ --hair: #e2e7f0; /* línea de 1px */ --hair-soft: #edf0f6; --blue: #2563eb; --blue-deep: #1d4ed8; --cyan: #0891b2; --green: #047857; --amber: #b45309; --red: #b91c1c; --violet: #6d28d9; color-scheme: light; } /* ── 2.1 · Base ─────────────────────────────────────────────────────── */ html[data-theme="light"] body { background-color: var(--paper) !important; color: var(--body) !important; } /* Sustituye al campo de partículas: un velo de luz muy suave, sin ruido */ html[data-theme="light"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 620px at 16% -10%, rgba(8, 145, 178, 0.10), transparent 62%), radial-gradient(1000px 680px at 88% 2%, rgba(37, 99, 235, 0.10), transparent 60%), linear-gradient(180deg, #ffffff 0%, var(--paper) 45%, #eaeff7 100%); } /* Los lienzos decorativos son ruido sobre fondo claro (el JS también los para) */ html[data-theme="light"] #quantum-bg, html[data-theme="light"] #field-bg { display: none !important; } html[data-theme="light"] ::selection { background: rgba(8, 145, 178, 0.22); } /* ── 2.2 · Superficies ──────────────────────────────────────────────── */ html[data-theme="light"] .glass { background: rgba(255, 255, 255, 0.86) !important; border-color: var(--hair) !important; box-shadow: 0 1px 2px rgba(10, 15, 26, 0.04), 0 12px 32px rgba(10, 15, 26, 0.06) !important; } html[data-theme="light"] .glass:hover { background: rgba(255, 255, 255, 0.97) !important; border-color: rgba(8, 145, 178, 0.42) !important; box-shadow: 0 18px 40px rgba(10, 15, 26, 0.10) !important; } /* Hero y franja de cierre: eran degradados casi negros */ html[data-theme="light"] [style*="rgba(2,6,13,0.72)"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 248, 252, 0.55) 50%, rgba(255, 255, 255, 0.88) 100%) !important; } html[data-theme="light"] [style*="#02060d 0%,#020203"] { background: linear-gradient(180deg, rgba(246, 248, 252, 0) 0%, #eef2f9 100%) !important; } html[data-theme="light"] #sticky-cta { background: linear-gradient(180deg, rgba(246, 248, 252, 0) 0%, rgba(246, 248, 252, 0.96) 35%) !important; } /* ── 2.3 · Texto (utilidades Tailwind) ──────────────────────────────── */ html[data-theme="light"] .text-white { color: var(--ink) !important; } html[data-theme="light"] .text-gray-200 { color: #232b3c !important; } html[data-theme="light"] .text-gray-300 { color: var(--body) !important; } html[data-theme="light"] .text-gray-400 { color: #4d5568 !important; } html[data-theme="light"] .text-gray-500 { color: var(--muted) !important; } html[data-theme="light"] .text-gray-600 { color: #798194 !important; } html[data-theme="light"] .text-gray-700 { color: #c2c8d4 !important; } /* estrellas vacías */ html[data-theme="light"] footer .text-gray-700 { color: var(--faint) !important; } html[data-theme="light"] .text-blue-400, html[data-theme="light"] .text-blue-400\/70 { color: var(--blue) !important; } html[data-theme="light"] .text-blue-400\/60 { color: rgba(37, 99, 235, 0.78) !important; } html[data-theme="light"] .text-blue-300, html[data-theme="light"] .text-blue-300\/80, html[data-theme="light"] .text-blue-200 { color: var(--blue-deep) !important; } html[data-theme="light"] .text-cyan-400, html[data-theme="light"] .text-cyan-400\/70 { color: var(--cyan) !important; } html[data-theme="light"] .text-cyan-400\/60 { color: rgba(8, 145, 178, 0.8) !important; } html[data-theme="light"] .text-cyan-300, html[data-theme="light"] .text-cyan-300\/80 { color: #0e7490 !important; } html[data-theme="light"] .text-green-400, html[data-theme="light"] .text-green-400\/70 { color: var(--green) !important; } html[data-theme="light"] .text-yellow-400 { color: #d97706 !important; } html[data-theme="light"] .text-orange-400 { color: #c2410c !important; } html[data-theme="light"] .text-purple-400 { color: var(--violet) !important; } html[data-theme="light"] .hover\:text-white:hover { color: var(--ink) !important; } /* Navegación multicolor: los tonos neón no se leen sobre papel */ html[data-theme="light"] .nav-link-inicio:hover, html[data-theme="light"] .hover\:text-cyan-400:hover { color: var(--cyan) !important; } html[data-theme="light"] .nav-link-mentor:hover, html[data-theme="light"] .hover\:text-purple-400:hover { color: var(--violet) !important; } html[data-theme="light"] .nav-link-formacion:hover, html[data-theme="light"] .hover\:text-green-400:hover { color: var(--green) !important; } html[data-theme="light"] .nav-link-1a1:hover { color: var(--blue) !important; } html[data-theme="light"] .nav-link-faq:hover { color: var(--amber) !important; } html[data-theme="light"] .nav-link-quant:hover { color: var(--red) !important; } /* ── 2.4 · Fondos y bordes (utilidades Tailwind) ────────────────────── */ html[data-theme="light"] .bg-black\/40 { background-color: var(--card) !important; color: var(--ink) !important; } html[data-theme="light"] .bg-white\/5 { background-color: rgba(10, 15, 26, 0.04) !important; } html[data-theme="light"] .bg-gray-900 { background-color: #e9edf5 !important; } html[data-theme="light"] .bg-white { background-color: var(--ink) !important; } /* muestra de leyenda */ html[data-theme="light"] .hover\:bg-white:hover { background-color: #e4faff !important; } html[data-theme="light"] .border-white\/5 { border-color: var(--hair-soft) !important; } html[data-theme="light"] .border-white\/10 { border-color: var(--hair) !important; } html[data-theme="light"] .hover\:border-white\/25:hover { border-color: #c3cbd9 !important; } html[data-theme="light"] .divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: var(--hair) !important; } /* ── 2.5 · Estilos inline del HTML ────────────────────────────────── El HTML lleva cientos de style="…" con la paleta oscura. Se atacan por selector de atributo: es la única forma de reteñirlos sin reescribir el marcado (y sin arriesgar nada en el modo oscuro, que es el que vende). ------------------------------------------------------------------- */ /* Texto: azules y cianes claros → mismos tonos en versión legible */ html[data-theme="light"] [style*="color:#93c5fd"] { color: var(--blue-deep) !important; } html[data-theme="light"] [style*="color:#60a5fa"] { color: var(--blue) !important; } html[data-theme="light"] [style*="color:#67e8f9"] { color: #0e7490 !important; } html[data-theme="light"] [style*="color:#22d3ee"] { color: var(--cyan) !important; } html[data-theme="light"] [style*="color:#4ade80"] { color: var(--green) !important; } html[data-theme="light"] [style*="color:#fbbf24"] { color: var(--amber) !important; } html[data-theme="light"] [style*="color:#f87171"] { color: var(--red) !important; } html[data-theme="light"] [style*="color:#25d366"] { color: #0f7a4a !important; } html[data-theme="light"] [style*="rgba(37,211,102,0.45)"] { border-color: rgba(15, 122, 74, 0.35) !important; } /* Superficies blancas/negras translúcidas → tarjeta sólida + filete */ html[data-theme="light"] [style*="rgba(255,255,255,0.02)"], html[data-theme="light"] [style*="rgba(255,255,255,0.03)"], html[data-theme="light"] [style*="rgba(255,255,255,0.06)"], html[data-theme="light"] [style*="rgba(0,0,0,0.3)"], html[data-theme="light"] [style*="rgba(0,0,0,0.4)"], html[data-theme="light"] [style*="background:#0d0d0d"], html[data-theme="light"] [style*="background:#050505"] { background: var(--card) !important; border-color: var(--hair) !important; } /* Excepción a propósito: la terminal del módulo 00 se queda oscura. Un bloque de consola se lee como consola justo por ser oscuro. */ html[data-theme="light"] [style*="background:#0a0a0a"] { border-color: rgba(10, 15, 26, 0.14) !important; box-shadow: 0 10px 30px rgba(10, 15, 26, 0.10) !important; } /* Degradados de marca: el cian #22d3ee no contrasta sobre papel */ html[data-theme="light"] [style*="#22d3ee 0%"] { background-image: linear-gradient(135deg, #0891b2 0%, #2563eb 55%, #1d4ed8 100%) !important; } html[data-theme="light"] [style*="#22d3ee,#3b82f6"], html[data-theme="light"] [style*="#22d3ee, #3b82f6"] { background-image: linear-gradient(135deg, #0891b2, #1d4ed8) !important; } /* ── 2.6 · Gráfico de payoff (SVG con atributos de presentación) ────── */ html[data-theme="light"] #payoff-atex, html[data-theme="light"] #payoff-k { stroke: rgba(10, 15, 26, 0.28) !important; } html[data-theme="light"] #payoff-line { stroke: var(--blue) !important; } html[data-theme="light"] #payoff-fill { fill: rgba(37, 99, 235, 0.14) !important; } html[data-theme="light"] #payoff-dot { fill: var(--blue) !important; } html[data-theme="light"] #payoff-dot-halo { fill: rgba(37, 99, 235, 0.22) !important; } html[data-theme="light"] #payoff-k-label { fill: rgba(10, 15, 26, 0.5) !important; } html[data-theme="light"] #payoff-svg text { fill: var(--muted) !important; } html[data-theme="light"] #payoff-svg line[stroke="#60a5fa"] { stroke: var(--blue) !important; } /* Frontera eficiente (SVG estático de la sección Alpha) */ html[data-theme="light"] [fill="#4ade80"] { fill: var(--green) !important; } html[data-theme="light"] [fill="#93c5fd"] { fill: var(--blue-deep) !important; } html[data-theme="light"] [fill="#fbbf24"] { fill: #b45309 !important; } html[data-theme="light"] [fill="#22d3ee"] { fill: var(--cyan) !important; } html[data-theme="light"] [fill="#60a5fa"] { fill: var(--blue) !important; } html[data-theme="light"] #alpha-frontier line { stroke: rgba(10, 15, 26, 0.09) !important; } html[data-theme="light"] #frontierGrad stop:first-child { stop-color: #0891b2 !important; } html[data-theme="light"] #frontierGrad stop:last-child { stop-color: #1d4ed8 !important; } html[data-theme="light"] #alpha-frontier-dots circle { fill: #4f46e5 !important; } /* ── 2.7 · Widgets ──────────────────────────────────────────────────── */ html[data-theme="light"] .quant-slider { background: rgba(37, 99, 235, 0.18) !important; } html[data-theme="light"] .exp-btn { border-color: var(--hair) !important; } html[data-theme="light"] .exp-btn:hover { background: rgba(10, 15, 26, 0.04) !important; } html[data-theme="light"] .greek-badge { border-color: rgba(37, 99, 235, 0.22) !important; } html[data-theme="light"] .tab-btn.active { color: var(--blue-deep) !important; } html[data-theme="light"] input[type="number"] { color: var(--ink) !important; } html[data-theme="light"] .social-icon { color: #9aa2b3; } /* Tarjetas de algoritmo de /guia/ */ html[data-theme="light"] .algo-card:hover { border-color: rgba(8, 145, 178, 0.42) !important; background: #ffffff !important; box-shadow: 0 14px 34px rgba(10, 15, 26, 0.07) !important; } html[data-theme="light"] .algo-num { background-image: linear-gradient(135deg, #0891b2, #1d4ed8) !important; }