/* ============================================================ BRAND JUNGLE — sistema de temas (dark / light) Se carga DESPUÉS de luxe.css. Reexpresa las superficies fijas de luxe.css en tokens semánticos, de modo que el modo claro no es una segunda hoja duplicada sino el mismo diseño con otros valores. El sitio es solo oscuro. El modo claro se retiró y vive archivado en que es el diseño aprobado. Nota honesta: el neón se lee como neón porque hay oscuridad. En modo claro los mismos efectos existen pero se comportan como tinta verde luminosa, no como láser. Es el límite físico del recurso, no un descuido — por eso el modo claro usa halos más contenidos y apoya el contraste en el borde y la sombra en vez de en el resplandor. ============================================================ */ /* ---------- Tokens: oscuro (por defecto) ---------- */ :root, /* ============================================================ Tokens del sitio Vivían en [data-theme="dark"]. Al retirar el modo claro se quitó el atributo data-theme del , así que ese selector dejó de coincidir y TODOS estos tokens quedaron sin definir: los iconos del dock caían a negro, el título del grafo también, y el header heredaba superficie clara. Aquí ya no dependen de ningún atributo. ============================================================ */ :root { --sf-page: #0c0f01; --sf-band-a: #0f1201; --sf-band-b: #161b02; --sf-plate: rgba(250, 251, 248, 0.045); --sf-plate-hi: rgba(250, 251, 248, 0.075); --sf-hair: rgba(250, 251, 248, 0.14); --sf-hair-hi: rgba(169, 220, 92, 0.50); --tx-1: #fafbf8; --tx-2: rgba(250, 251, 248, 0.70); --tx-3: rgba(250, 251, 248, 0.52); --band-glow: rgba(156, 176, 1, 0.14); --band-shadow: 0 18px 44px rgba(0, 0, 0, 0.42); --hero-a: #2b3305; --hero-b: #1d2303; --hero-c: #0c0f01; --hero-focus: rgba(169, 220, 92, 0.30); --hero-vignette: rgba(0, 0, 0, 0.42); --nav-bg: linear-gradient(140deg, rgba(250, 251, 248, 0.10), rgba(250, 251, 248, 0.035)); --nav-bg-scrolled: linear-gradient(140deg, rgba(18, 22, 3, 0.82), rgba(18, 22, 3, 0.62)); --nav-hair: rgba(250, 251, 248, 0.13); --nav-tx: #fafbf8; --dock-bg: linear-gradient(150deg, rgba(22, 27, 3, 0.90), rgba(12, 15, 1, 0.82)); --dock-hair: rgba(250, 251, 248, 0.16); --dock-tx: #fafbf8; --dock-track: rgba(250, 251, 248, 0.16); color-scheme: dark; } /* ---------- Tokens: claro ---------- */ html { background: var(--sf-page); } /* Transición al cambiar de modo — solo color, nunca layout */ html.theme-anim, html.theme-anim body, html.theme-anim section, html.theme-anim .nav, html.theme-anim .tornado-card, html.theme-anim .glossary-card, html.theme-anim .faq-item, html.theme-anim .work-row { transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease; } @media (prefers-reduced-motion: reduce) { html.theme-anim, html.theme-anim * { transition: none !important; } } /* ============================================================ Reexpresión de las superficies de luxe.css en tokens ============================================================ */ /* ---------- Header ---------- */ .site-header .nav { border-color: var(--nav-hair); background: var(--nav-bg); } .site-header.is-scrolled .nav { border-color: var(--nav-hair); background: var(--nav-bg-scrolled); } .site-header .nav-brand-text, .site-header .nav-links a, .site-header.is-scrolled .nav-brand-text, .site-header.is-scrolled .nav-links a { color: var(--nav-tx); } .site-header .nav-toggle-bar, .site-header.is-scrolled .nav-toggle-bar { background: var(--nav-tx); } /* ---------- Hero ---------- */ .hero { background: radial-gradient(760px 460px at 56% 30%, var(--hero-focus) 0%, rgba(156, 176, 1, 0.13) 40%, rgba(0, 0, 0, 0) 70%), radial-gradient(1500px 900px at 50% 40%, rgba(156, 176, 1, 0.10) 0%, rgba(0, 0, 0, 0) 62%), linear-gradient(168deg, var(--hero-a) 0%, var(--hero-b) 46%, var(--hero-c) 100%); } /* La viñeta se movió a .hero (ver aurora.css): colgada del container dejaba un canto vertical en los laterales de pantallas anchas. */ /* En claro el hero invierte su tipografía y el mapa recupera trazo oscuro */ /* ---------- Bandas ---------- */ #systems, #marketing, #growth, #proof, #portfolio, #faq, #sistemas, #ciclo, #prueba, #portafolio, #platform, #plataforma, #plain-talk, #claro, #quote, #cotiza { background: linear-gradient(180deg, var(--sf-band-a) 0%, var(--sf-band-b) 50%, var(--sf-band-a) 100%); } #systems, #marketing, #growth, #proof, #portfolio, #faq, #sistemas, #ciclo, #prueba, #portafolio, #platform, #plataforma, #plain-talk, #claro, #quote, #cotiza, #how, #made, #why { --c-ink: var(--tx-1); --c-stone: var(--tx-2); --c-mist: var(--sf-plate); --c-linen: var(--sf-hair); color: var(--tx-1); } /* En claro, moss vuelve a ser moss: litoria sobre blanco no llega a AA */ #systems::before, #marketing::before, #growth::before, #proof::before, #portfolio::before, #faq::before, #sistemas::before, #ciclo::before, #prueba::before, #portafolio::before { background: radial-gradient(900px 520px at var(--band-x, 50%) var(--band-y, 34%), var(--band-glow) 0%, rgba(0, 0, 0, 0) 68%); } #systems .systems-product, #sistemas .systems-product, .glossary-card, .quote-card, .faq-item, .work-row { background: var(--sf-plate); border-color: var(--sf-hair); } .glossary-card:hover, .faq-item:hover, .work-row:hover { border-color: var(--sf-hair-hi); background: var(--sf-plate-hi); box-shadow: 0 0 26px rgba(156, 176, 1, 0.20), var(--band-shadow); } /* ---------- Tornado ---------- */ .problems { background: radial-gradient(900px 620px at 50% 42%, var(--band-glow) 0%, rgba(0, 0, 0, 0) 68%), linear-gradient(180deg, var(--sf-band-a) 0%, var(--sf-band-b) 45%, var(--sf-band-a) 100%); color: var(--tx-1); } .problems .section-head h2 { color: var(--tx-1); } .problems .section-sub { color: var(--tx-2); } .tornado-hint { color: var(--tx-3); } .tornado-card { border-color: var(--sf-hair); background: var(--sf-plate); box-shadow: var(--band-shadow); color: var(--tx-1); } .tornado-quote { color: var(--tx-1); } .tornado-fix { color: var(--tx-2); border-top-color: var(--sf-hair); } /* Las tarjetas del tornado se mantienen OSCURAS también en modo claro: es el único bloque del sitio que conserva la superficie nocturna, porque el láser verde solo se lee como láser sobre oscuro. Ver platform.css. */ /* ============================================================ DOCK — acompaña al usuario en todo el recorrido ============================================================ */ .dock { position: fixed; right: clamp(0.875rem, 2vw, 1.5rem); bottom: clamp(0.875rem, 2vw, 1.5rem); z-index: 90; display: flex; align-items: center; gap: 0.25rem; padding: 0.3125rem; border-radius: var(--radius-pill); border: 1px solid var(--dock-hair); background: var(--dock-bg); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.10); color: var(--dock-tx); } .dock-btn { display: grid; place-items: center; width: 38px; height: 38px; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .dock-btn:hover { background: rgba(156, 176, 1, 0.20); transform: translateY(-1px); } .dock-btn:focus-visible { outline: 2px solid var(--c-litoria-hi); outline-offset: 2px; } .dock-btn .c-icon { width: 19px; height: 19px; color: currentColor; filter: none; } /* Sol / luna: solo se ve el que corresponde */ .dock-ico-sun { display: none; } /* Progreso: anillo + número */ .dock-progress { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; } .dock-ring { position: absolute; inset: 0; transform: rotate(-90deg); } .dock-ring circle { fill: none; stroke-width: 2.5; } .dock-ring .ring-track { stroke: var(--dock-track); } .dock-ring .ring-fill { stroke: var(--c-litoria-hi); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transition: stroke-dashoffset 160ms linear; } .dock-pct { font-family: var(--f-ui); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .dock-sep { width: 1px; height: 24px; background: var(--dock-hair); flex: none; } /* CTA del dock: mismo gradiente que el resto del sitio */ .dock-cta { display: inline-flex; align-items: center; gap: 0.375rem; height: 38px; padding: 0 0.9375rem; border: none; border-radius: var(--radius-pill); background: var(--grad-cta); color: #000200; font-family: var(--f-ui); font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: var(--glow-cta); transition: box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .dock-cta:hover { box-shadow: var(--glow-cta-hover); transform: translateY(-1px); } .dock-cta .c-icon { width: 15px; height: 15px; color: #000200; filter: none; } /* Punto vivo del chat */ .dock-chat { position: relative; } .dock-chat::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-litoria-hi); box-shadow: 0 0 8px rgba(169, 220, 92, 0.9); } .dock.chat-open .dock-chat::after { display: none; } @media (max-width: 599px) { .dock-cta span { display: none; } .dock-cta { padding: 0 0.75rem; } } /* ============================================================ PANEL DE CHAT — interfaz completa, sin backend todavía ============================================================ */ .chat-panel { position: fixed; right: clamp(0.875rem, 2vw, 1.5rem); bottom: calc(clamp(0.875rem, 2vw, 1.5rem) + 58px); z-index: 91; width: min(360px, calc(100vw - 1.75rem)); max-height: min(540px, calc(100vh - 8rem)); display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--dock-hair); background: var(--dock-bg); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46); color: var(--dock-tx); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transform-origin: bottom right; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 240ms; } .chat-panel.is-open { opacity: 1; visibility: visible; transform: none; } @media (prefers-reduced-motion: reduce) { .chat-panel { transition: none; } } .chat-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 0.875rem 0.875rem 1.125rem; border-bottom: 1px solid var(--dock-hair); } .chat-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--grad-cta); color: #000200; } .chat-avatar .c-icon { width: 17px; height: 17px; color: #000200; filter: none; } .chat-title { font-family: var(--f-ui); font-size: 0.875rem; font-weight: 600; line-height: 1.2; } .chat-status { font-size: 0.6875rem; color: var(--tx-2); } .chat-head .dock-btn { margin-left: auto; width: 30px; height: 30px; } .chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.75rem; } .chat-msg { max-width: 84%; padding: 0.625rem 0.875rem; border-radius: 14px; font-size: 0.8125rem; line-height: 1.5; } .chat-msg-bot { align-self: flex-start; background: var(--sf-plate-hi); border: 1px solid var(--sf-hair); border-bottom-left-radius: 5px; } .chat-msg-user { align-self: flex-end; background: var(--grad-cta); color: #000200; border-bottom-right-radius: 5px; } .chat-note { align-self: stretch; padding: 0.5rem 0.75rem; border-radius: 10px; border: 1px dashed var(--dock-hair); font-size: 0.6875rem; line-height: 1.45; color: var(--tx-2); } .chat-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; } .chat-chip { padding: 0.375rem 0.6875rem; border-radius: var(--radius-pill); border: 1px solid var(--sf-hair); background: transparent; color: inherit; font-family: var(--f-ui); font-size: 0.6875rem; cursor: pointer; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; } .chat-chip:hover { border-color: var(--c-litoria-hi); background: rgba(156, 176, 1, 0.14); } .chat-form { display: flex; gap: 0.5rem; padding: 0.75rem 0.875rem; border-top: 1px solid var(--dock-hair); } .chat-input { flex: 1; min-width: 0; padding: 0.625rem 0.875rem; border-radius: var(--radius-pill); border: 1px solid var(--sf-hair); background: var(--sf-plate); color: inherit; font-family: var(--f-ui); font-size: 0.8125rem; } .chat-input::placeholder { color: var(--tx-3); } .chat-input:focus { outline: 2px solid var(--c-litoria-hi); outline-offset: 1px; } .chat-send { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: none; border-radius: 50%; background: var(--grad-cta); color: #000200; cursor: pointer; box-shadow: var(--glow-cta); } .chat-send .c-icon { width: 17px; height: 17px; color: #000200; filter: none; } .chat-send:hover { box-shadow: var(--glow-cta-hover); } /* El dock no debe tapar el pie en pantallas cortas */ @media (max-height: 520px) { .dock { display: none; } } /* ============================================================ FOOTER — tokenizado para los dos modos Estaba heredando los colores del diseño claro: sobre el fondo oscuro los enlaces daban 2.90:1 y el hover 1.08:1, es decir, invisible. Ahora sigue al tema como el resto de la página. ============================================================ */ .site-footer { background: linear-gradient(180deg, var(--sf-band-a) 0%, var(--sf-band-b) 100%); border-top: 1px solid var(--sf-hair); color: var(--tx-1); } .site-footer .wordmark-footer { color: var(--tx-1); } .site-footer .footer-tagline { color: var(--tx-2); } .site-footer .footer-nav a, .site-footer .footer-contact a { color: var(--tx-2); } .site-footer .footer-nav a:hover, .site-footer .footer-contact a:hover, .site-footer .footer-nav a:focus-visible, .site-footer .footer-contact a:focus-visible { color: var(--tx-1); } .site-footer .footer-microline { border-top-color: var(--sf-hair); } .site-footer .footer-microline p { color: var(--tx-3); } /* La marca del pie nunca se apaga con la aurora detrás */ .site-footer .footer-logo-card img { position: relative; z-index: 1; } /* ============================================================ DIAGRAMA — arreglo de accesibilidad Causa: `.d-node text` lleva fill var(--c-ink) con un halo stroke var(--c-platinum) de 5px, pensado para fondo claro. En la banda oscura yo redefino --c-ink a claro, pero --c-platinum sigue siendo #fafbf8 → texto claro con halo claro = mancha blanca. Los anillos, rellenos de platinum, quedaban como discos blancos. Solución: el halo y el relleno pasan a la superficie de la banda, y el trazo se enciende como el resto de la página. ============================================================ */ .d-ring { fill: var(--sf-band-b); stroke: var(--sf-hair-hi); } .d-node--core .d-ring { stroke: var(--c-litoria-hi); filter: drop-shadow(0 0 8px rgba(169, 220, 92, 0.55)); } .d-dot { fill: var(--c-litoria-hi); } .d-node--core .d-dot { filter: drop-shadow(0 0 6px rgba(169, 220, 92, 0.8)); } .d-node text, .d-hint text { fill: var(--tx-1); stroke: var(--sf-band-a); stroke-width: 4; } .d-hint text { fill: var(--tx-2); } .d-hint circle { fill: var(--sf-band-b); stroke: var(--tx-3); } .d-draw--faint { stroke: var(--sf-hair); } .d-draw { stroke: var(--c-litoria-hi); } .diagram-list b { color: var(--tx-1); } .diagram-list span { color: var(--tx-2); } /* En claro vuelve a su lógica original, con el halo en papel */ /* ============================================================ MODO CLARO — hero con gradiente vivo y nav legible 1 · El hero era prácticamente blanco. Ahora va de verde manzana ligero a oliva y vuelta, con las mismas capas de aurora en movimiento que el banner de cierre. 2 · El nav se veía blanco sobre fondo claro (1.03:1). La causa era una regla de sections.css con `:not(.is-scrolled)` que aportaba especificidad extra y le ganaba a las variables de tema. Retirada allí; aquí se fija el gris oscuro que corresponde. ============================================================ */ /* (el modo claro completo vive en _reference/light-mode.css.txt) */