/* ============================================================ TEMA BLANCO Y NEGRO (activado con ) Se enlaza DESPUÉS del resto de CSS: gana por orden de cascada. La mayoría del color vive en tokens; aquí se reescriben los tokens + los pocos degradados/colores fijos y los del canvas. ============================================================ */ /* Variables que consume el canvas (JS las lee con getComputedStyle). Se definen para AMBOS modos; el bloque bw las sobrescribe. */ :root { --js-dot: 214, 193, 250; /* puntos lavanda (color) */ --js-dot-strong: 222, 151, 255; /* punto destacado (color) */ } [data-theme="bw"] { --c-purple: #4d4d4d; /* acentos / links / labels sobre claro */ --c-purple-dark: #171717; /* resaltados / labels (casi negro) */ --c-pink-purple: #d9d9d9; /* tonos claros sobre oscuro */ --c-lavender: #e4e4e4; --js-dot: 220, 220, 220; --js-dot-strong: 245, 245, 245; } /* Transición suave al alternar tema */ .nav__logo, .hl, .proceso__bg, .blob { transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out); } /* Fotos y video en escala de grises para un B&N coherente */ [data-theme="bw"] img, [data-theme="bw"] video { filter: grayscale(1); transition: filter 0.4s var(--ease-out); } /* --- Hero: manchas en grises claros (se mantiene aireado) --- */ [data-theme="bw"] .hero__gradient { background: radial-gradient(85% 45% at 50% 104%, rgba(150, 150, 150, 0.5) 0%, rgba(150, 150, 150, 0) 60%); } [data-theme="bw"] .blob--pink { background: #e2e2e2; } [data-theme="bw"] .blob--purple { background: #cdcdcd; } [data-theme="bw"] .blob--purple-2 { background: #d6d6d6; } [data-theme="bw"] .blob--lavender { background: #e8e8e8; } /* Resaltado del título del hero ("sistemas claros"). Al sobrescribir el shorthand `background` se resetea background-clip, así que hay que volver a declarar el recorte al texto. */ [data-theme="bw"] .hero__title .hl { background: linear-gradient(100deg, #3a3a3a 0%, #111111 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- Mi Proceso: fondo oscuro en grises --- */ [data-theme="bw"] .proceso { background: #0d0d0d; } [data-theme="bw"] .proceso__bg { background: radial-gradient(95% 90% at 14% 20%, #4d4d4d 0%, rgba(77, 77, 77, 0) 55%), radial-gradient(85% 85% at 60% 112%, #050505 0%, rgba(5, 5, 5, 0) 62%), linear-gradient(125deg, #3a3a3a 0%, #1c1c1c 44%, #0d0d0d 100%); } [data-theme="bw"] .proceso__dot { box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); } /* Gradiente de las palabras de la red de nodos (SVG inline) */ [data-theme="bw"] #varGrad stop:nth-of-type(1) { stop-color: #e0e0e0; } [data-theme="bw"] #varGrad stop:nth-of-type(2) { stop-color: #9a9a9a; } [data-theme="bw"] #varGrad stop:nth-of-type(3) { stop-color: #ededed; } /* --- Casos de estudio: fondo del video/juego en grises --- */ [data-theme="bw"] .case__game { background: linear-gradient(150deg, #2a2a2a, #121212); } /* --- Aurora del cierre en grises --- */ [data-theme="bw"] .continua__aurora { --aurora-1: 120, 120, 120; --aurora-2: 180, 180, 180; } /* ============================================================ SWITCH de tema (color ↔ B&N) — riel con perilla que se desliza ============================================================ */ .nav__switch { position: relative; flex: none; width: 4rem; /* mismo ancho que el botón de idioma */ height: 2.3rem; padding: 0; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 999px; background: var(--c-light-gray); cursor: pointer; transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .nav__switch-knob { position: absolute; top: 50%; left: 0.26rem; width: 1.6rem; height: 1.6rem; transform: translateY(-50%); border-radius: 50%; background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-pink-purple) 100%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); transition: left 0.34s var(--ease-out), background 0.34s var(--ease-out); } /* B&N activo: la perilla se desliza a la derecha y el riel se aclara en gris */ [data-theme="bw"] .nav__switch { background: #dadada; } [data-theme="bw"] .nav__switch-knob { left: calc(100% - 1.6rem - 0.26rem); }