/* ============================================================================= CELLIFIX — TOKENS DE DISEÑO Única fuente de color de todo el sitio público. Si un color no está aquí, no debería existir en ninguna otra hoja de estilo. Identidad: BLANCO, NEGRO, ROJO y grises. El dorado se retiró del sitio público el 2026-08-05 por decisión de Diomes. MODO CLARO por defecto (:root). MODO OSCURO en [data-theme="dark"]. El atributo lo pone en el script de _head.html antes de pintar, para que no haya parpadeo del tema equivocado. Contrastes verificados contra WCAG AA (4.5:1 en texto normal): #111111 sobre #ffffff = 18.9 #C21100 sobre #ffffff = 6.2 #52525b sobre #ffffff = 7.7 #FF5F52 sobre #0d0d0d = 6.5 #f5f5f5 sobre #0d0d0d = 17.8 #a1a1aa sobre #0d0d0d = 7.6 blanco sobre #E10600 = 5.0 (texto de los botones) OJO: el rojo de marca #E10600 sobre fondo oscuro da 3.9 — NO llega a AA. Por eso el rojo de TEXTO es --red-ink (#C21100 en claro, #FF5F52 en oscuro) y --red queda solo para RELLENOS, con el texto en blanco encima. ========================================================================== */ :root { /* --- Superficies ------------------------------------------------------ */ --bg: #ffffff; /* fondo principal */ --bg-2: #f7f7f8; /* secciones alternas, gris muy claro */ --card: #ffffff; /* tarjetas */ --card-2: #fafafa; /* tarjetas en segundo nivel / cabeceras */ --surface-sunk: #f2f2f4; /* zonas hundidas: código, thumbnails */ /* --- Bordes ----------------------------------------------------------- */ --line: #e5e5e7; /* borde sutil por defecto */ --line-2: #d4d4d8; /* borde marcado / hover */ /* --- Texto ------------------------------------------------------------ */ --text: #111111; /* titulares y texto principal */ --body-c: #52525b; /* cuerpo de texto */ --muted: #6b7280; /* texto terciario, pies, notas */ --text-on-accent:#ffffff; /* texto sobre relleno rojo */ /* --- Rojo (color principal de la marca) -------------------------------- #E10600, elegido por Diomes el 2026-08-05. El rojo anterior (#e02730) era tono 357° con saturación 75% y se veía apagado al lado del logo: midiendo los píxeles de cellifix-logo.png, SU rojo es #FA2300, o sea tono 8° y saturación 100%. #E10600 (tono 2°, saturación 100%) es el que más se le acerca de los tres candidatos, y además sube el contraste con texto blanco encima de 4.66:1 a 4.97:1. UN SOLO TONO en cinco pasos. No inventes otro rojo: si necesitas una variante, sale de aquí. --red relleno de botón, con texto blanco encima (4.97:1) --red-ink TEXTO y enlaces sobre fondo claro (6.22:1) --red-hover pulsado / hover de un relleno --red-hi brillo alto de degradados y foco --red-soft / --red-soft-2 / --red-edge fondos teñidos y bordes */ --red: #E10600; --red-hi: #FF3B2E; /* brillo alto del degradado */ --red-ink: #C21100; /* 6.22:1 en blanco, 5.81:1 sobre el gris --bg-2 */ --red-hover: #A80E00; --red-soft: rgba(225, 6, 0, .07); /* fondo teñido muy suave */ --red-soft-2: rgba(225, 6, 0, .14); /* fondo teñido en hover */ --red-edge: rgba(225, 6, 0, .30); /* borde de acento */ /* --- WhatsApp (verde oscuro, fijo en los dos temas) -------------------- */ --wa: #0A5C2C; --wa-hi: #0E7A3B; --wa-dark: #07401E; /* --- Formularios ------------------------------------------------------ */ --input-bg: #ffffff; --input-line: #d4d4d8; --input-text: #111111; --input-ph: #9ca3af; /* placeholder */ --input-focus: var(--red); --input-focus-ring: rgba(225, 6, 0, .18); --input-readonly-bg: #f2f2f4; /* campo de solo lectura: gris, no rojo */ --input-disabled-bg: #f2f2f4; /* --- Mensajes de error y de éxito de los formularios ------------------- Antes cada modal traía su propio color a mano (#f5747a, #7fd99a), pensados para fondo negro: sobre blanco se quedaban en 2.5:1 y 2.0:1. */ --error: #C21100; /* mismo rojo de texto de la rampa */ --error-bg: rgba(225, 6, 0, .09); --ok: #15803d; --ok-bg: rgba(21, 128, 61, .09); /* --- Header y footer --------------------------------------------------- */ --header-bg: #ffffff; --header-bg-scroll: rgba(255, 255, 255, .88); --header-line: #e5e5e7; --header-text: #111111; --header-menu-bg: #ffffff; /* desplegables y panel móvil */ /* --- Pie de página ----------------------------------------------------- Desde el 2026-08-05 el pie SIGUE AL TEMA (antes iba oscuro en los dos). En claro es gris muy claro: se despega del blanco del contenido sin convertirse en un bloque negro. La separación la hace el borde superior más el cambio sutil de fondo, no una franja oscura. */ --footer-bg: #f7f7f8; --footer-text: #111111; /* títulos y texto principal del pie */ --footer-muted: #52525b; /* texto secundario y enlaces en reposo */ --footer-line: #e5e5e7; --footer-hover: rgba(225, 6, 0, .08); /* fondo del icono social al pasar */ /* --- Sombras (discretas: el sitio es plano y limpio) ------------------- */ /* Un punto más de presencia que antes (.06/.10/.16 -> .07/.12/.18) para que las tarjetas se despeguen del blanco. Siguen siendo sombras de gris muy diluido, nunca negro pesado: la idea es que se noten sin verse. */ /* Sombras en DOS capas (Fase 4). Una sola sombra grande y difusa se ve barata sobre blanco: se lee como una mancha gris. Dos capas —un contacto muy corto y casi opaco, más una difusa y abierta— es como se comporta la luz de verdad y es lo que da el acabado "premium" sin subir la opacidad. La suma de opacidades se mantiene baja a propósito: nada de grisáceos. */ --shadow-sm: 0 1px 1px rgba(17, 17, 17, .04), 0 2px 6px -2px rgba(17, 17, 17, .07); --shadow-md: 0 1px 2px rgba(17, 17, 17, .05), 0 8px 20px -8px rgba(17, 17, 17, .14); --shadow-lg: 0 2px 4px rgba(17, 17, 17, .05), 0 18px 44px -18px rgba(17, 17, 17, .22); --shadow-xl: 0 3px 6px rgba(17, 17, 17, .06), 0 30px 70px -28px rgba(17, 17, 17, .28); --shadow-btn: 0 1px 2px rgba(168, 14, 0, .18), 0 8px 20px -10px rgba(225, 6, 0, .48); --shadow-none: none; /* Elevación al pasar el ratón / enfocar. Se usa en botones y tarjetas. */ --lift: -2px; --lift-ease: cubic-bezier(.22, .8, .3, 1); /* --- DESTELLO DE RAYO en las cajas de fotos (pedido de Diomes 2026-08-06) -- Un reflejo que RECORRE el borde de la caja pasando de rojo a amarillo, como una chispa. OJO con la historia: el dorado `#f3ca5c` se retiró del sitio público el 2026-08-05 por decisión suya, y dos fases se fueron en quitarlo. Esto NO lo devuelve: el amarillo vive SOLO dentro de esta animación, nunca como fondo, texto ni borde fijo, y por eso es un amarillo eléctrico (#FFC400), no el dorado viejo — para que no se confunda con aquello. Si alguien lo usa fuera de `--rayo-*`, está reabriendo esa decisión. */ --rayo-1: var(--red); /* el cuerpo del destello: rojo de marca */ --rayo-2: #FFC400; /* la punta caliente: amarillo eléctrico */ --rayo-op: .85; /* cuánto se ve en reposo */ /* --- Fondo decorativo (rejilla y circuito del hero) -------------------- El circuito lo dibuja el de la portada, que NO hereda CSS: lee estos cuatro valores con getComputedStyle y los relee cuando cambia el tema. Cambiar el circuito = cambiar estos tokens, nada más. En claro las LÍNEAS van en GRIS y solo los NODOS y las chispas van en rojo (decisión de Diomes, 2026-08-05). Antes las líneas eran rojo al 13% sobre blanco, que no se lee como circuito sino como neblina rosa. La consigna fue "mejor sutil que fuerte": el gris está al 10% a propósito: se intuye la retícula sin competir con el titular. Si algún día se sube, no pasar de .14 o empieza a ensuciar el texto. */ Los NODOS y las CHISPAS son lo único oscuro que queda sobre el blanco, y el circuito se reparte al azar en cada carga (`Math.random()` en el canvas de index.html), así que a veces caen justo detrás del párrafo del hero. Midiendo 8 cargas por versión, con los nodos al .34/.58/.95 la superficie oscura detrás de ese párrafo subía del 0.40% al 1.02% en móvil — el doble y medio que antes de la Fase 3, y eso es "llamar más la atención que el texto". Bajados hasta devolver esa cifra a su sitio SIN perder el nodo rojo: el aro y el centro pierden opacidad y la chispa deja de ser casi opaca. Si algún día se suben, medir otra vez con varias cargas: una sola no dice nada porque el trazado cambia cada vez. */ --grid-line: rgba(17, 17, 17, .05); --pcb-trace: rgba(17, 17, 17, .10); /* líneas: gris, no rojo */ --pcb-live: rgba(225, 6, 0, .24); /* aro del nodo */ --pcb-pulse: rgba(225, 6, 0, .40); /* centro del nodo y pulso */ --pcb-spark: rgba(194, 17, 0, .68); /* chispa que viaja por la línea */ /* Relleno del cuerpo de los chips del circuito. Va MUCHO más flojo que la línea: antes se rellenaban con --pcb-trace y, al pasar la línea a gris, esos rectángulos se veían como bloques grises sólidos. */ --pcb-chip: rgba(17, 17, 17, .035); /* --- Celular 3D del hero ----------------------------------------------- Es CSS puro, no una imagen. Antes su marco era un degradado MARRÓN (#3a2e1b -> #241c10 -> #15100a), residuo del diseño dorado, y la pantalla no cambiaba con el tema: en modo claro el "100%" y la lista de revisiones quedaban en texto casi negro sobre pantalla oscura, o sea invisibles. Ahora el marco es GRAFITO en los dos temas y la pantalla sigue al tema. */ FASE 4 (2026-08-06): en modo claro el marco seguía siendo casi negro (#26262a -> #131316) y detrás llevaba `.phone-depth`, una plancha MACIZA de #0d0d0f de 255x524 px que estaba QUEMADA en index.css y no cambiaba con el tema. Sobre blanco, esos dos negros juntos leen como un ladrillo: es lo que Diomes describió como "oscuro, café y pesado". Ahora el marco es grafito de verdad (parte de #55555e, no de #26262a), el fondo del canto tiene su propio token, y la pantalla lleva un tinte frío en vez de gris plano para que se despegue del blanco de la página. */ /* Medido en pantalla, no a ojo: el canto derecho —que es la superficie MÁS grande del teléfono en perspectiva— daba luminancia 0.10 con los valores viejos y 0.15 con el primer intento de esta fase; las dos leen "negro". Con estos sube a ~0.28, que ya se lee como GRAFITO y sigue siendo un aparato oscuro y serio, no un teléfono gris claro. */ --phone-body: linear-gradient(155deg, #6e6e79 0%, #52525c 44%, #3f3f48 100%); --phone-depth: #3a3a44; /* canto trasero; antes #0d0d0f fijo */ --phone-edge: rgba(255, 255, 255, .16); /* filo superior metálico */ --phone-screen: linear-gradient(168deg, #ffffff 0%, #f4f5f7 58%, #eceef1 100%); --phone-ink: #111111; /* texto dentro de la pantalla */ --phone-ink-2: #52525b; /* texto secundario de la pantalla */ --phone-notch: #1a1a20; --phone-notch-i: #4a4a54; /* los puntitos de la muesca */ --phone-inset: rgba(17, 17, 17, .10); /* filo interior de la pantalla */ --phone-glow: rgba(225, 6, 0, .10); /* halo rojo detrás del celular */ --phone-glow-2: rgba(225, 6, 0, .04); /* segunda parada, más abierta */ --phone-chip-bg: rgba(255, 255, 255, .97);/* globitos: casi opacos */ --phone-chip-ink:#111111; --phone-chip-line: rgba(17, 17, 17, .09); /* Fichas de dentro de la pantalla ("Pantalla reemplazada", etc.). Iban con --red-soft, o sea rosa translúcido: se veían lavadas y sin jerarquía. */ --phone-tile-bg: #ffffff; --phone-tile-line: rgba(17, 17, 17, .08); --phone-tile-ink: #111111; --phone-scan-blend: multiply; /* línea de escaneo */ /* --- Geometría y tipografía (iguales en los dos temas) ----------------- */ --rail: 1160px; --r-sm: 8px; --r-md: 14px; --disp: 'Palatino Linotype', 'Iowan Old Style', Palatino, Georgia, 'Times New Roman', serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* --- COMPATIBILIDAD: los nombres del dorado ---------------------------- */ /* El sitio tiene ~640 referencias a --gold*. En vez de editarlas una por una (y arriesgarse a romper páginas), se reapuntan aquí al rojo y a los grises. Así toda hoja antigua sigue el tema sola. Al escribir CSS NUEVO usa los nombres de arriba, NUNCA estos. --gold apunta a --red-ink (el rojo de TEXTO), no a --red. De sus 137 usos, 125 son color de texto: con --red (#e02730) todos esos se quedaban en 4.17:1 sobre el fondo oscuro y 4.36:1 sobre el gris claro, por debajo de AA. Los pocos sitios donde --gold era un RELLENO (puntos del carrusel, viñetas, chips de /cotizar) se pasaron a mano a --red el 2026-08-05, así que el rojo de marca sigue intacto donde de verdad importa. */ --gold: var(--red-ink); --gold-2: var(--red-ink); --gold-hi: var(--red-hi); --gold-deep: var(--red-hover); --gold-soft: var(--red-soft); --gold-edge: var(--red-edge); color-scheme: light; } /* ============================================================================= MODO OSCURO ========================================================================== */ [data-theme="dark"] { --bg: #0d0d0d; --bg-2: #131314; --card: #1a1a1c; /* tarjetas: algo más claras que el fondo */ --card-2: #202023; --surface-sunk: #0a0a0a; --line: #2b2b2e; --line-2: #3d3d42; --text: #f5f5f5; --body-c: #d4d4d8; --muted: #a1a1aa; --text-on-accent:#ffffff; /* --red sigue siendo EL MISMO rojo de marca que en claro, porque se usa como RELLENO de botón y ahí el contraste lo da el texto blanco encima. El rojo de TEXTO sí sube a #FF5F52 para llegar a AA sobre el negro (6.49:1); con #E10600 se quedaría en 3.9:1. */ --red: #E10600; --red-hi: #FF3B2E; --red-ink: #FF5F52; --red-hover: #FF8377; --red-soft: rgba(255, 95, 82, .11); --red-soft-2: rgba(255, 95, 82, .20); --red-edge: rgba(255, 95, 82, .36); --input-bg: #1a1a1c; --input-line: #3d3d42; --input-text: #f5f5f5; --input-ph: #71717a; --input-focus: var(--red-hi); --input-focus-ring: rgba(255, 95, 82, .25); --input-readonly-bg: #202023; --input-disabled-bg: #202023; --error: #f5747a; --error-bg: rgba(245, 116, 122, .12); --ok: #6ee7a0; --ok-bg: rgba(110, 231, 160, .12); --header-bg: #0d0d0d; --header-bg-scroll: rgba(13, 13, 13, .88); --header-line: #2b2b2e; --header-text: #f5f5f5; --header-menu-bg: #1a1a1c; --footer-bg: #050505; --footer-text: #f5f5f5; --footer-muted: #a1a1aa; --footer-line: rgba(255, 255, 255, .10); --footer-hover: rgba(255, 255, 255, .08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 4px 12px -4px rgba(0, 0, 0, .6); --shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, .8); --shadow-xl: 0 20px 54px -20px rgba(0, 0, 0, .85); --shadow-btn: 0 6px 16px -8px rgba(225, 6, 0, .6); /* Sobre negro el destello ya resalta solo, así que va MÁS flojo que en claro: al mismo valor parecería un cartel de neón. */ --rayo-1: var(--red-hi); --rayo-2: #FFD24A; --rayo-op: .7; /* El circuito oscuro NO cambia de intensidad: se conservan exactamente las mismas opacidades de antes y solo se recalca el tono al rojo nuevo, para que los dos modos compartan identidad. Visualmente es el mismo efecto. */ --grid-line: rgba(255, 255, 255, .05); --pcb-trace: rgba(255, 95, 82, .16); --pcb-live: rgba(255, 95, 82, .32); --pcb-pulse: rgba(255, 95, 82, .60); --pcb-spark: rgba(255, 205, 207, .95); --pcb-chip: rgba(255, 95, 82, .08); /* Celular: el MISMO marco grafito que en claro (el aparato no cambia de color con el tema, solo su pantalla) y la pantalla en oscuro. */ /* El celular en OSCURO ya estaba bien y Diomes pidió no tocarlo. Solo se le añaden los tokens NUEVOS que la Fase 4 usa en las dos hojas, con los valores que ya tenía de hecho, para que nada cambie de aspecto aquí. */ --phone-body: linear-gradient(155deg, #26262a 0%, #1b1b1f 45%, #131316 100%); --phone-depth: #0d0d0f; --phone-edge: rgba(255, 95, 82, .22); --phone-screen: linear-gradient(170deg, #16161a 0%, #0c0c0e 100%); --phone-ink: #f5f5f5; --phone-ink-2: #a1a1aa; --phone-notch: #0a0a0c; --phone-notch-i: #33333a; --phone-inset: rgba(0, 0, 0, .7); --phone-glow: rgba(255, 95, 82, .07); --phone-glow-2: rgba(255, 95, 82, .03); --phone-chip-bg: rgba(26, 26, 28, .92); --phone-chip-ink:#f5f5f5; --phone-chip-line: rgba(255, 255, 255, .10); --phone-tile-bg: rgba(255, 255, 255, .045); --phone-tile-line: rgba(255, 255, 255, .09); --phone-tile-ink: #f5f5f5; --phone-scan-blend: screen; color-scheme: dark; } /* El tema lo manda SIEMPRE la elección guardada (o el claro por defecto). No se sigue `prefers-color-scheme` a propósito: Diomes pidió que el sitio abra en claro aunque el teléfono del visitante esté en modo oscuro. */