/* ========================================================================== Tokens del sistema de diseño Cacofish Fuente: Claude Design, "Cacofish · Sistema de diseño" v2 (07-08-2026). Prefijo --sf- (neutro, no ligado a cliente) para que el tema base sirva a cualquier proyecto. Nombres semánticos en español. REGLA: ningún color, tamaño ni espaciado se escribe fuera de este archivo. Si falta un token, se agrega primero al sistema de diseño, no acá. Corrección aplicada en desarrollo respecto de la entrega v2: --sf-borde-campo #A9A398 -> #9B9488 (2,51:1 -> 3,01:1 sobre blanco). WCAG 1.4.11 exige 3:1 en bordes de campo, porque son lo único que delimita el control. Mismo tono, solo se bajó la luminosidad. Pendiente de sincronizar en Claude Design. ========================================================================== */ /* -------------------------------------------------------------------------- TIPOGRAFÍA: las fuentes NO se cargan desde acá. Se encolan en functions.php (sf_url_fuentes), que es mejor que un @import: el @import encadena una descarga extra y bloquea el render. El eje wdth se pide explícito allá; sin él el navegador sintetiza el ancho y --sf-marca-wdth no hace efecto. -------------------------------------------------------------------------- */ :root { /* ======================================================================== 1 · SUPERFICIES ======================================================================== */ --sf-superficie-base: #FFFFFF; /* fondo principal */ --sf-superficie-calida: #F2F5F7; /* fondo alterno, separa secciones sin líneas */ --sf-superficie-hundida: #E6ECF0; /* inputs deshabilitados, pestañas inactivas */ --sf-superficie-inversa: #0D1114; /* pie, franja de promesas, banners de contraste */ --sf-superficie-bloque: #EDF3F7; /* resúmenes, avisos, cajas destacadas */ /* La baldosa del muro de marcas y el texto que va encima son los dos FIJOS, también en modo oscuro. Decisión D10 y D15: tres de los seis logos de fabricante son monocromos oscuros y desaparecen sobre fondo oscuro, e invertirlos no sirve porque el de Tenryu es rojo y al invertirlo se va a cian. Si alguien apunta estos dos a --sf-superficie-base y a --sf-texto-secundario «por consistencia», en modo oscuro se pierden tres logos y el nombre de las marcas queda en blanco sobre blanco. */ --sf-marca-baldosa: #FFFFFF; --sf-marca-baldosa-txt: #3F4C53; /* 8,86:1 sobre la baldosa */ /* ======================================================================== 2 · TEXTO ======================================================================== */ --sf-texto-principal: #0D1114; /* 18,96:1 sobre base */ --sf-texto-marca: #1F5878; /* 7,71:1. El azul acero del logo */ --sf-texto-secundario: #4D585F; /* 7,30:1 sobre base, 6,67:1 sobre cálida */ --sf-texto-inverso: #EAF0F3; /* 18,26:1 sobre inversa */ --sf-texto-inverso-suave: #9DACB4; /* 8,99:1 sobre inversa */ --sf-texto-inverso-tenue: #74828A; /* 5,30:1 sobre inversa */ /* ======================================================================== 3 · ACCIONES REGLA DEL ACENTO, cambiada el 27-08-2026: el acento ya no es el ámbar #F5C518 heredado de ZEISS, es el AZUL ACERO del logo nuevo (decisión D6). Por eso el texto encima del acento es --sf-accion-inversa y NUNCA --sf-texto-marca: los dos valen ahora #1F5878 y el botón quedaría con el texto del mismo color que su fondo. --sf-accion-primaria y --sf-accion-acento valen lo mismo a propósito. En el mockup v3 aprobado el botón de buscar y el de «Añadir al carro» son el mismo azul: no hay un segundo color de acción. Se dejan como dos tokens porque significan cosas distintas y pueden separarse después. El ROJO no vive acá. Es de Tenryu y solo se usa en lo que la decisión D6 autoriza: el bloque de Tenryu, la regla del hero, la sección activa del menú y la insignia del carro. Como valor de comercio está en la sección 5. ======================================================================== */ --sf-accion-primaria: #1F5878; /* blanco encima: 7,71:1 */ --sf-accion-primaria-hover: #17465F; /* blanco encima: 9,55:1 */ --sf-accion-primaria-activa: #10333F; --sf-accion-secundaria: #0D1114; --sf-accion-secundaria-hover: #232C31; --sf-accion-acento: #1F5878; /* ver REGLA DEL ACENTO */ --sf-accion-acento-hover: #17465F; --sf-accion-acento-activa: #10333F; --sf-acento-texto: #1F5878; /* el acento cuando va como texto, 7,71:1 */ --sf-acento-inverso: #8CC0E2; /* el acento cuando vive sobre una superficie inversa: 9,71:1. El acento normal es azul oscuro y sobre la franja daba 1,93:1 */ --sf-accion-inversa: #FFFFFF; /* el texto que va ENCIMA de una acción */ --sf-accion-inversa-hover: #E6ECF0; /* el botón claro de las bandas oscuras, en hover */ --sf-accion-desactivada: #E1E7EA; --sf-accion-desactivada-txt: #5A666D; /* 4,73:1 sobre --sf-accion-desactivada. WCAG exime a los controles desactivados, pero acá el botón de la ficha dice «Elige modelo y número», que es LA instrucción: a 2,49:1 no se leía. Que está desactivado ya lo dicen el relleno plano, el cursor y el atributo `disabled` */ /* ======================================================================== 3 bis · COLORES DE MARCAS AJENAS No son colores del sistema y no se usan para nada del sitio: son las tres marcas que Carlos pidio en el punto 12 de su correo del 03-09-2026, y el unico lugar donde entran es el fondo del boton flotante de WhatsApp y el halo de foco de cada enlace de red. Van en tokens y no sueltos en la hoja porque la regla del proyecto no tiene excepciones, pero **no se tocan en modo oscuro**: el verde de WhatsApp es el verde de WhatsApp en cualquier fondo. Aclararlo seria dibujar otra marca. El logotipo en si NO se pinta con estos valores, viene con su color dentro del SVG oficial de `assets/redes/`. Ver `sf_logo_red()`. ======================================================================== */ --sf-red-whatsapp: #25D366; --sf-red-whatsapp-hover: #1EBE5B; --sf-red-facebook: #1877F2; --sf-red-instagram: #D62976; /* El lado del logotipo. `sf_logo_red()` lo pisa por instancia con un `style` en linea, igual que `sf_icono()` pisa su tamano: 14px en la franja de arriba, 19px en el pie. Este es el valor por defecto y el que hace que la comprobacion de tokens no encuentre uno sin definir. */ --sf-red-lado: 19px; /* ======================================================================== 4 · BORDES Y FOCO ======================================================================== */ --sf-borde-sutil: #DCE3E7; /* separadores, líneas de tabla. Decorativo */ --sf-borde-medio: #C3CED5; /* contorno de tarjetas. Decorativo, exento de 3:1 */ --sf-borde-campo: #6E7F89; /* 4,10:1. Delimita el control: NO bajar de 3:1 */ /* El separador cuando la superficie es la inversa o una foto oscura. Va en blanco translucido y no en un gris fijo: sobre una foto, un gris opaco se ve como una raya pegada encima y este se funde. Sale de `.tn__l` del artefacto. Decorativo, exento del 3:1. */ --sf-borde-inverso: rgba(255, 255, 255, .15); --sf-foco: #1F5878; /* 7,71:1. Accesibilidad, no es opcional */ --sf-foco-inverso: #8CC0E2; /* 9,71:1 sobre inversa */ /* Velos y pistas: van acá porque son color, y estaban escritos a mano en ficha.css, compra.css y secciones.css como rgba(10,26,47,...). Ese literal sobrevivió a la revisión de hexadecimales porque no es un hexadecimal, y en modo oscuro habría puesto un velo oscuro sobre un fondo oscuro. */ --sf-velo: rgba(10, 26, 47, .55); /* fondo de modal */ --sf-velo-suave: rgba(10, 26, 47, .45); /* fondo de panel deslizante */ --sf-cargando-pista: rgba(10, 26, 47, .25); /* el anillo del girador */ /* ======================================================================== 5 · COMERCIO ======================================================================== */ --sf-precio: #0D1114; --sf-precio-tachado: #7C8991; /* 3,59:1: el tachado ya comunica el significado */ --sf-descuento: #D40010; /* 5,52:1. Es el rojo de Tenryu en su uso autorizado */ /* El mismo rojo, pero como accion. Va aparte de --sf-descuento porque son dos significados distintos que hoy comparten valor: uno es un precio rebajado y el otro el boton de la marca ancla. Si manana el rojo del descuento cambia, el de Tenryu no tiene por que moverse. Solo se usa en lo que es de Tenryu (D8): el resto del sitio acentua con el azul acero del logo. */ --sf-accion-tenryu: #D40010; --sf-accion-tenryu-hover: #A8000D; --sf-stock-disponible: #1E7A4E; /* 5,32:1 */ --sf-stock-agotado: #5A666C; /* 5,91:1 sobre base, 5,40:1 sobre cálida y 4,74:1 sobre el relleno de la insignia. Es texto que hay que leer, no decoración */ /* ======================================================================== 6 · ESTADOS ======================================================================== */ --sf-exito: #1B6B43; --sf-exito-fondo: #E4F1E9; --sf-error: #B3121B; --sf-error-fondo: #FBE9EA; --sf-aviso: #8A5A00; --sf-aviso-fondo: #FBF1DA; --sf-info: #1F5878; --sf-info-fondo: #E9F1F6; /* ======================================================================== 7 · TIPOGRAFÍA ======================================================================== */ /* Oswald y Barlow desde el 15-09-2026: las eligió Carlos de las cuatro que se le dieron a probar. Ver `fuentes.css`. */ --sf-fuente-marca: 'Oswald', system-ui, sans-serif; --sf-fuente-ui: 'Barlow', system-ui, sans-serif; /* Ejes fijos de la fuente de marca (Oswald es variable). No dejar en automático. El ancho queda en 100 porque Oswald NO tiene eje de ancho: forzarle 112 hace que el navegador la estire sintéticamente, y una condensada estirada se ve deformada. */ --sf-marca-wght: 600; --sf-marca-wdth: 100; --sf-marca-tracking: 0.005em; --sf-texto-base: 16px; --sf-texto-min: 12px; /* Escala · móvil (por defecto) */ /* El titulo de una seccion de la portada NO es el H2 grande. En el artefacto conviven dos tamanos en ese rango: 28px para el bloque de la marca ancla (`.tn__t`) y 21,6 para los titulos de seccion (`.sc__t`), sobre un lienzo de 1024. Llevados a 1280 son 35 y 27. El tema los estaba pintando los dos con el H2 de 34, asi que «Que estas buscando» salia un 26% mas grande de lo aprobado. Medido el 01-09-2026. */ --sf-seccion-titulo-tam: 22px; --sf-seccion-titulo-alto: 1.18; /* Los titulares del artefacto van con tracking negativo, de -.015 a -.025em segun el tamano. El tema no tenia ninguno y por eso se veian mas sueltos. Un solo valor para los tres: la diferencia entre -.018 y -.024 no se ve. */ --sf-titulos-tracking: -.02em; /* El tracking de arriba es para caja mixta. UN TITULO EN MAYUSCULAS NECESITA LO CONTRARIO: las versales no tienen ascendentes ni descendentes que las separen, y con tracking negativo se pegan unas a otras. Es positivo, pero chico: el 0.08em de la etiqueta es para 12px, y a 26 o 32 se ve deshecho. Punto 8 del correo de Carlos del 06-09-2026. */ --sf-titulo-mayus-tracking: 0.02em; --sf-h1-tam: 32px; --sf-h1-alto: 1.10; --sf-h2-tam: 26px; --sf-h2-alto: 1.16; --sf-h3-tam: 22px; --sf-h3-alto: 1.22; --sf-h4-tam: 19px; --sf-h4-alto: 1.30; --sf-h5-tam: 17px; --sf-h5-alto: 1.35; --sf-h6-tam: 15px; --sf-h6-alto: 1.40; --sf-cuerpo-l-tam: 17px; --sf-cuerpo-l-alto: 1.60; --sf-cuerpo-m-tam: 16px; --sf-cuerpo-m-alto: 1.60; --sf-cuerpo-s-tam: 14px; --sf-cuerpo-s-alto: 1.55; --sf-etiqueta-tam: 12px; --sf-etiqueta-alto: 1.30; --sf-etiqueta-tracking: 0.08em; /* Interlineado del TEXTO DE COMPONENTE: el nombre de una tarjeta, un precio, un rótulo, una entrada de menú. No es prosa y no se lee en párrafo, así que no le corresponde el 1,55 ni el 1,60 de arriba. Es la corrección del 27-08-2026 y sale de medir el mockup v3 contra el sitio: el mockup pone 1,20 a 1,25 en todo el texto de componente y el sitio estaba dando 1,55 o 1,60 al 90% de su texto, etiquetas de tres letras incluidas. En la tarjeta de producto eso eran 79px de más por tarjeta, y hay 24 por página. `--sf-alto-cifra` es para los números, que no tienen descendentes y con el mismo valor se ven más sueltos que las palabras. */ --sf-alto-compacto: 1.25; --sf-alto-cifra: 1.20; /* ======================================================================== 8 · ESPACIADO (escala base de 4px) ======================================================================== */ --sf-esp-1: 4px; --sf-esp-2: 8px; --sf-esp-3: 12px; --sf-esp-4: 16px; --sf-esp-6: 24px; --sf-esp-8: 32px; --sf-esp-12: 48px; --sf-esp-16: 64px; --sf-esp-24: 96px; /* Derivados: ajustados a ojo mirando el ritmo de la página, no por fórmula */ --sf-seccion-aire: 56px; --sf-cabecera-aire: 28px; /* ======================================================================== 9 · FORMA ======================================================================== */ --sf-radio: 6px; /* redondeo general */ --sf-radio-redondo: 999px; /* píldoras y avatares */ --sf-sombra-1: 0 1px 2px rgba(16, 32, 48, 0.08); --sf-sombra-2: 0 4px 12px rgba(16, 32, 48, 0.10); --sf-sombra-3: 0 18px 44px rgba(16, 32, 48, 0.20); /* ======================================================================== 10 · MEDIDAS DE LAYOUT ======================================================================== */ /* 1200px dejaba el contenido a 72px del borde a 1280, mientras la cabecera se iba a 32: el logo y los titulos de seccion no quedaban en la misma linea vertical. En el artefacto todo arranca a 2,28% del ancho, en los seis lienzos, y la cabecera y las secciones comparten borde. Igualado al ancho de la cabecera el 01-09-2026, medido con Scripts/medir.js. */ --sf-contenido-max: 1440px; /* El catálogo respira más ancho que el resto del sitio, y no es capricho. Con el contenedor general en 1200 y el sidebar en 260, las tarjetas quedan en 193px una vez descontado el relleno de .sf-contenido: encender el sidebar les quitaría el 27% del ancho y la foto del señuelo deja de distinguirse por patrón de color, que es como se compra. Con 1280 quedan en 213px, que es el mínimo que fija la dirección de diseño. PENDIENTE de sincronizar en Claude Design. */ --sf-catalogo-max: 1280px; --sf-catalogo-sidebar: 260px; /* Opacidad de la foto de un producto agotado. Se ve apagado pero sigue siendo reconocible: el usuario tiene que poder identificar qué es. */ --sf-agotado-opacidad: 0.55; /* Opacidad del sello en el marco de producto sin foto. Es un relleno, no un contenido: tiene que verse que hay algo sin competir con las fotos de al lado. La dirección de diseño lo fija en 30%. */ --sf-sinfoto-opacidad: 0.3; --sf-alto-tactil: 44px; --sf-boton-s: 36px; --sf-boton-m: 44px; --sf-boton-l: 52px; --sf-campo-alto: 44px; /* Selector de variación. Coincide con la zona táctil a propósito: en Cacofish los señuelos se compran por color y este control es el centro de la ficha. --sf-muestra-color es el alto de las píldoras (peso, largo, número, modelo). */ --sf-muestra-color: 44px; /* La miniatura de foto del eje de color. NO es un swatch: los 595 valores de color son códigos de fabricante y al lado va un rótulo de hasta 34 caracteres, así que necesita más cuerpo que la píldora. */ --sf-muestra-foto: 56px; --sf-header-alto: 88px; --sf-header-fijo-alto: 60px; /* Alto del hero de la portada. Estaba escrito a mano en secciones.css desde el fork; la dirección de diseño lo fija en 420 a 520px en escritorio y unos 320 en móvil. PENDIENTE de sincronizar en Claude Design. */ /* La foto principal de la ficha. El artefacto (`.gal`) le da relación 4/5 y no deja que la proporción de la foto mande sobre el layout: hay fotos de 600x880 que sin tope salían a 854px de alto, más que la ventana útil. El tope va en `vh` y no en píxeles para que se adapte a cada pantalla. */ --sf-ficha-foto-relacion: 4 / 5; --sf-ficha-foto-alto-max: 60vh; /* Una fila de miniaturas que corre de lado, no una reja de dos filas. */ --sf-ficha-mini: 100px; --sf-hero-alto: 320px; /* El velo del hero. En el artefacto el texto va sobre la foto, no dentro de una tarjeta, y lo que lo hace legible es este degradado que sube desde abajo. Los tres puntos salen de `.hr__v` del artefacto y no se tocan sin volver a medir el contraste del titular contra la foto. */ --sf-hero-velo: linear-gradient(4deg, rgba(4, 8, 10, .94) 6%, rgba(4, 8, 10, .60) 38%, rgba(4, 8, 10, .05) 78%); /* El ancho del bloque de texto del hero: 44rem del artefacto llevados a 1280. */ --sf-hero-texto-ancho: 880px; --sf-productos-fila: 4; --sf-productos-pagina: 24; --sf-email-ancho: 600px; } /* -------------------------------------------------------------------------- MODO OSCURO Se enciende con `data-sf-tema="oscuro"` en el , que pone el interruptor de la cabecera y aplica `sf_tema_temprano()` en el head antes del primer pintado. Decisiones D3 y D7. Acá se redefine SOLO color. Tamaños, espaciado, tipografía y medidas de layout no cambian entre modos: si hubiera que cambiarlos, sería un tema distinto y no un modo. NO se engancha a `prefers-color-scheme` a propósito. Este interruptor existe para que Daniel le muestre las dos opciones a Carlos (D7), y si lo decidiera el sistema operativo del que mira, no habría forma de saber cuál de las dos está viendo. Si el modo oscuro llega a producción como preferencia del visitante, ahí se agrega la consulta de medios, y no antes. Los contrastes están medidos, no estimados: 68 pruebas en los dos modos, con Scripts/contraste_paleta.py. -------------------------------------------------------------------------- */ :root[data-sf-tema="oscuro"] { /* 1 · SUPERFICIES. La baldosa de marcas y su texto NO están acá: son fijos en los dos modos, y el porqué está arriba en la sección 1. */ --sf-superficie-base: #0B0E10; --sf-superficie-calida: #12171A; --sf-superficie-hundida: #1A2126; --sf-superficie-inversa: #000000; /* el pie se hunde en negro, no se aclara */ --sf-superficie-bloque: #12171A; /* 2 · TEXTO */ --sf-texto-principal: #EAF0F3; /* 16,83:1 sobre base */ --sf-texto-marca: #8CC0E2; /* 9,92:1. El azul acero, aclarado */ --sf-texto-secundario: #9DACB4; /* 8,29:1 sobre base, 7,73:1 sobre cálida */ --sf-texto-inverso: #EAF0F3; /* 18,26:1 sobre inversa */ --sf-texto-inverso-suave: #9DACB4; /* 8,99:1 */ --sf-texto-inverso-tenue: #74828A; /* 5,30:1 */ /* 3 · ACCIONES. Se da vuelta la relación: en claro el botón es azul oscuro con texto blanco, y acá es azul claro con texto oscuro. Por eso --sf-accion-inversa deja de ser blanco: si se quedara en blanco, el texto del botón daría 1,73:1 y no se leería. */ --sf-accion-primaria: #8CC0E2; /* texto oscuro encima: 9,63:1 */ --sf-accion-primaria-hover: #A9D3EE; /* 11,85:1 */ --sf-accion-primaria-activa: #C2E0F4; --sf-accion-secundaria: #EAF0F3; --sf-accion-secundaria-hover: #FFFFFF; --sf-accion-acento: #8CC0E2; --sf-accion-acento-hover: #A9D3EE; --sf-accion-acento-activa: #C2E0F4; --sf-acento-texto: #8CC0E2; --sf-acento-inverso: #8CC0E2; /* 10,75:1 sobre la inversa, que acá es negro */ --sf-accion-inversa: #07131A; /* ver el comentario de arriba */ --sf-accion-inversa-hover: #16242C; --sf-accion-desactivada: #1F272C; --sf-accion-desactivada-txt: #88949B; /* 4,88:1 sobre --sf-accion-desactivada */ /* 4 · BORDES Y FOCO */ --sf-borde-sutil: #212930; --sf-borde-medio: #2E3941; --sf-borde-campo: #74828A; /* 4,89:1. WCAG 1.4.11 pide 3:1 */ --sf-borde-inverso: rgba(255, 255, 255, .15); --sf-foco: #8CC0E2; /* 9,92:1 */ --sf-foco-inverso: #8CC0E2; /* 10,75:1 sobre inversa, que acá es negro */ --sf-velo: rgba(0, 0, 0, .72); /* el velo claro no tapa nada sobre un fondo oscuro */ --sf-velo-suave: rgba(0, 0, 0, .62); --sf-cargando-pista: rgba(234, 240, 243, .22); /* la pista se da vuelta */ /* 5 · COMERCIO */ --sf-precio: #EAF0F3; --sf-precio-tachado: #74828A; /* 4,89:1 */ --sf-descuento: #FF3341; /* 5,35:1. El rojo de Tenryu, aclarado */ --sf-accion-tenryu: #FF3341; --sf-accion-tenryu-hover: #FF5C67; --sf-stock-disponible: #6CC08D; /* 8,82:1 */ --sf-stock-agotado: #8B979E; /* 6,47:1 */ /* 6 · ESTADOS */ --sf-exito: #6CC08D; --sf-exito-fondo: #12241A; --sf-error: #FF7B82; --sf-error-fondo: #2A1315; --sf-aviso: #E0AE5C; --sf-aviso-fondo: #2A2113; --sf-info: #8CC0E2; --sf-info-fondo: #0F212B; /* 9 · FORMA. Una sombra tenue de azul no existe sobre un fondo casi negro: acá la profundidad la da el negro puro con más opacidad. */ --sf-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.55); --sf-sombra-2: 0 4px 12px rgba(0, 0, 0, 0.62); --sf-sombra-3: 0 18px 44px rgba(0, 0, 0, 0.72); } /* -------------------------------------------------------------------------- Escala tipográfica de desktop -------------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --sf-seccion-titulo-tam: 27px; --sf-seccion-titulo-alto: 1.20; --sf-h1-tam: 44px; --sf-h1-alto: 1.08; --sf-h2-tam: 34px; --sf-h2-alto: 1.14; --sf-h3-tam: 26px; --sf-h3-alto: 1.20; --sf-h4-tam: 21px; --sf-h4-alto: 1.30; --sf-h5-tam: 18px; --sf-h5-alto: 1.35; --sf-h6-tam: 16px; --sf-h6-alto: 1.40; --sf-cuerpo-l-tam: 18px; --sf-cuerpo-l-alto: 1.60; --sf-cuerpo-m-tam: 16px; --sf-cuerpo-m-alto: 1.60; --sf-cuerpo-s-tam: 14px; --sf-cuerpo-s-alto: 1.55; --sf-etiqueta-tam: 12px; --sf-etiqueta-alto: 1.30; --sf-seccion-aire: 88px; --sf-cabecera-aire: 40px; /* 425 y no 460: los 340px del hero sobre el lienzo de 1024 del artefacto son 425 a 1280. */ --sf-hero-alto: 425px; } } /* -------------------------------------------------------------------------- Densidad de la grilla de catálogo 327 productos, casi todos artículos chicos. Los señuelos se comparan por patrón de color, así que la tarjeta no puede achicarse más de la cuenta. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { :root { --sf-productos-fila: 3; } } @media (max-width: 599px) { :root { --sf-productos-fila: 2; --sf-header-alto: 64px; } } /* -------------------------------------------------------------------------- Inversión de superficies en la ficha de producto La regla del sitio es fondo cálido con bloques claros encima. En la ficha se invierte, porque ahí manda la foto del producto: el fondo va en blanco y los bloques en cálido. Va acá y no en base.css a propósito: si un token cambia de valor en algún contexto, tiene que poder encontrarse leyendo el archivo del sistema. Un token redefinido en una hoja de componentes es invisible para quien lee tokens.css y cree saber cuánto vale. -------------------------------------------------------------------------- */ body.sf-superficie-clara { --sf-superficie-bloque: var(--sf-superficie-calida); } /* ========================================================================== Puente de la migracion del 27-08-2026 -------------------------------------------------------------------------- El tema base traido de ZEISS pide 18 tokens con nombres que el sistema de Cacofish no usa: su escala tipografica se llama --sf-h1 y la de Cacofish --sf-h1-tam, y hay tres medidas de layout que no existian aca. Se definen apuntando a los tokens de Cacofish para que haya UNA sola fuente de verdad: si manana cambia --sf-h1-tam, cambia tambien --sf-h1. --sf-esp-5 es aparte: lo pide secciones.css:1065 (.sf-faq__respuesta) y NO lo definia ninguno de los dos temas. Estaba roto en el tema de ZEISS desde antes de esta migracion. Se define siguiendo la escala de 4 px. Este bloque es deuda a proposito y se borra cuando la paleta nueva del mockup v3 entre por el ticket «Paleta nueva: fondo oscuro y acento azul acero», que va a unificar los nombres. ========================================================================== */ :root { /* Escala tipografica, con los nombres que usa el CSS traido de ZEISS. */ --sf-h1: var(--sf-h1-tam); --sf-h2: var(--sf-h2-tam); --sf-h3: var(--sf-h3-tam); --sf-h4: var(--sf-h4-tam); --sf-h5: var(--sf-h5-tam); --sf-h6: var(--sf-h6-tam); --sf-cuerpo-l: var(--sf-cuerpo-l-tam); --sf-cuerpo-m: var(--sf-cuerpo-m-tam); --sf-cuerpo-s: var(--sf-cuerpo-s-tam); --sf-etiqueta: var(--sf-etiqueta-tam); /* Familia y peso de titulares. */ --sf-fuente-titulos: var(--sf-fuente-marca); --sf-titulos-peso: var(--sf-marca-peso); --sf-marca-peso: var(--sf-marca-wght); --sf-marca-opsz: 14; /* Medidas de layout que el tema de ZEISS usa y Cacofish no tenia. */ --sf-cabecera-max: 1440px; /* Las dos filas de la cabecera de escritorio, sacadas del artefacto v3. Ahi el lienzo mide 1024 y la barra 57,4px con el menu en 36,3: llevado a 1280 dan 72 y 44. Antes habia una sola fila de 76px y por eso el buscador quedaba en el 17% del ancho en vez del 68%. */ --sf-header-fila-alto: 72px; --sf-header-nav-alto: 44px; /* El logo cruza las dos filas y ocupa el bloque de la izquierda: 72 + 44 = 116, menos 6px de aire arriba y abajo. Decision de Daniel del 01-09-2026, por sobre el artefacto, donde el sello sale a 38px. */ --sf-header-logo-alto: 104px; /* El logo del pie. 46px sobre el lienzo de 1024 del artefacto (`.pi__lg`) son 57 a 1280. */ --sf-pie-logo-alto: 57px; /* Fondo de la baldosa del muro de marcas. Es blanco fijo y NO apunta a --sf-superficie-base a proposito: cuando llegue el modo oscuro esa superficie se va a invertir, y tres de los seis logos son monocromos oscuros que desapareceria sobre fondo oscuro. Ver D10. */ --sf-marca-baldosa: #FFFFFF; /* Faltaba en los dos temas. Escala de 4 px: 5 x 4 = 20. */ --sf-esp-5: 20px; --sf-esp-9: 36px; }