/* ========================================================================== Segmentador · Design Tokens FUENTE OFICIAL DE MARCA (2026-08-19): docs/brand/brandbook/exports/AI_BRAND_CONTEXT.md docs/brand/brandbook/exports/brand-tokens.{css,json} Autoridad declarada por esa fuente: docs/BRAND.md > Segmentador_Brandboard.pdf > docs/brand/ > propiedades de los assets > nombres de archivo. VERIFICADO el 2026-08-19: 16 de los 18 colores oficiales ya estaban aquí y coinciden HEX a HEX. El brandbook CONFIRMA la paleta; no la cambia. DOS ADVERTENCIAS QUE NO DEBEN PERDERSE: 1 · Los valores técnicos de este archivo que la marca NO define —escala de espaciado, bordes, radios, anatomía y estados de botón— son decisiones de implementación. El sistema de marca los lista como `Pendiente de definición de marca` y prohíbe presentarlos como tokens oficiales de Segmentador. Aquí se usan; no se declaran oficiales. 2 · La "aplicación mínima sugerida" del brand-tokens.css NO se copió. Su `:focus-visible` en turquesa da 2.44:1 sobre blanco y no alcanza el mínimo de 3:1 para elementos no textuales. Se conserva el azul de marca, que da 8.24:1. El propio brandbook clasifica esa sección como "decisiones técnicas, no nuevos tokens de marca". Ref: SEG-011.T01 · DEC-016 ========================================================================== */ :root { /* --- Paleta primaria (Kit) ------------------------------------------- */ --c-verde-claro: var(--brand-green-light); --c-verde: var(--brand-green); --c-turquesa: var(--brand-turquoise); --c-azul-medio: var(--brand-blue-mid); --c-azul: var(--brand-blue); /* Azul Segmentador — ancla de marca */ --c-amarillo: var(--brand-yellow); /* --- Paleta secundaria (Kit) ----------------------------------------- */ --c-verde-xclaro: var(--brand-green-very-light); --c-verde-brill: var(--brand-green-bright); --c-aqua: var(--brand-aqua); --c-teal: var(--brand-teal); --c-amarillo-br: var(--brand-yellow-bright); /* --- Texto (Kit) ------------------------------------------------------ */ --c-texto: var(--brand-text-primary); /* 7.57:1 sobre blanco */ --c-texto-sec: var(--brand-text-secondary); /* 2.43:1 — SOLO decorativo, nunca texto */ --c-enlace: var(--brand-link-emphasis); /* 4.96:1 sobre blanco */ --c-enlace-hover: var(--brand-blue); --c-exito: var(--brand-success); /* 3.23:1 sobre blanco — no para texto */ --c-atencion: var(--brand-attention); /* Añadidos 2026-08-19 · roles oficiales que faltaban en la paleta. Contraste calculado sobre blanco, no estimado: #3989B9 = 3.85:1 → válido para elementos NO textuales y texto grande; NO alcanza 4.5:1 para texto normal. #81B47D = 2.40:1 → decorativo/estado únicamente. NUNCA como texto. Se declaran para completar el sistema; su uso queda restringido. */ --c-enlace-inter: var(--brand-link-interaction); /* text.linkInteraction */ --c-apoyo-positivo:var(--brand-positive-support); /* text.positiveSupport */ /* --- Neutros ---------------------------------------------------------- */ --c-blanco: #FFFFFF; --c-fondo: #FFFFFF; --c-fondo-suave: #F4F7FB; --c-borde: #D3DAE3; --c-borde-fuerte: #6B7684; /* 4.62:1 — cumple 3:1 no textual */ /* --- Roles semánticos ------------------------------------------------- Se usan en los componentes. Cambiar aquí, no en la paleta. */ --color-fondo: var(--c-fondo); --color-fondo-alt: var(--c-fondo-suave); --color-texto: var(--c-texto); --color-texto-fuerte: #2B2B2B; --color-titulo: var(--c-azul); --color-enlace: var(--c-enlace); --color-enlace-hover: var(--c-enlace-hover); --color-borde: var(--c-borde); --color-borde-fuerte: var(--c-borde-fuerte); --color-cta-fondo: var(--c-azul); /* blanco encima = 8.24:1 */ --color-cta-texto: var(--c-blanco); --color-cta-fondo-hover: #013D82; --color-foco: var(--c-azul); /* #48A155 del Kit da 2.98:1 sobre el fondo de la alerta: no cumple 3:1. Se usa una variante oscurecida SOLO para bordes de estado. El verde del Kit se conserva intacto en --c-verde para su uso decorativo. */ --c-verde-borde: #3E8C49; /* 3.83:1 sobre #EFF8F0 */ --color-exito-borde: var(--c-verde-borde); --color-exito-fondo: #EFF8F0; --color-error-borde: #B3261E; /* 6.54:1 sobre blanco */ --color-error-texto: #8C1D18; /* 8.31:1 sobre su fondo */ --color-error-fondo: #FDF2F1; --color-aviso-borde: var(--c-amarillo); --color-aviso-fondo: #FEF9E3; /* --- Valores tecnicos --ui- · la marca NO los define ------------------ El sistema oficial los lista como `Pendiente de definicion de marca` y prohibe presentarlos como tokens de Segmentador. Se usan; no se declaran oficiales. Prefijo --ui-, nunca --brand-. */ /* Sombra de elevacion para tarjetas destacadas. */ --ui-sombra-lg: 0 6px 16px rgba(1, 76, 161, .10), 0 2px 4px rgba(1, 76, 161, .06); /* Boton de WhatsApp. El verde del Kit (#48A155) da 3.23:1 con texto blanco y reprueba AA. Se usa el verde de marca oscurecido que ya existia en el proyecto: 5.85:1 con blanco. */ --ui-whatsapp-fondo: #2F7239; --ui-whatsapp-fondo-hover: #255C2E; --color-info-borde: var(--c-teal); --color-info-fondo: #EAF7FA; /* --- Tipografía · Inter (2026-08-10) ---------------------------------- DEC-016 queda RESUELTA, y en negativo: los archivos de Helvetica entregados son las fuentes del sistema de macOS (© Apple / Linotype), cuya licencia NO cubre incrustación web ni redistribución. No existe licencia web de Helvetica para este proyecto. Familia adoptada: INTER, en toda la interfaz — titulares, cuerpo, navegación, botones, formularios, tarjetas y mensajes de UI. Respaldo: Arial, sans-serif. CONFLICTO ABIERTO CON EL SISTEMA OFICIAL DE MARCA (revisado 2026-08-19). `AI_BRAND_CONTEXT.md §5` mantiene Helvetica para titulares y Open Sans para lectura. Este sitio usa Inter en ambos roles, por instrucción explícita posterior de la propietaria. El brandbook NO resuelve el conflicto: su propia lista `governance.pendingDefinition` incluye literalmente "Licencias y redistribución tipográfica". Es decir, la fuente oficial reconoce que la licencia tipográfica sigue sin definir — que es exactamente el motivo por el que Helvetica se retiró de aquí. Volver a Helvetica reintroduciría el problema legal sin resolverlo. Se mantiene Inter y se registra la divergencia. 04_BRAND_COPY y el Decision Log NO se han actualizado: pendiente de reconciliación canónica. AUTOALOJADA desde el 2026-08-19: assets/fonts/inter-latin*.woff2, fuente variable con los pesos 400-700, servida desde este dominio. Licencia SIL Open Font License 1.1. Ninguna peticion a un tercero en ejecucion. Ver assets/css/fonts.css. Ningún componente nombra una fuente directamente: para cambiar la familia basta con reasignar estos dos tokens. */ --font-display: "Inter", Arial, sans-serif; --font-body: "Inter", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Escala tipográfica fluida · base 16 px, razón ~1.25 */ --fs-2xs: 0.75rem; /* 12 px */ --fs-xs: 0.875rem; /* 14 px */ --fs-sm: 1rem; /* 16 px — mínimo de lectura */ --fs-md: clamp(1.0625rem, 0.25vw + 1rem, 1.125rem); --fs-lg: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem); --fs-xl: clamp(1.5rem, 1vw + 1.25rem, 2rem); --fs-2xl: clamp(1.875rem, 2vw + 1.4rem, 2.75rem); --fs-3xl: clamp(2.25rem, 3vw + 1.5rem, 3.5rem); --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; /* lectura continua */ --lh-loose: 1.75; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --medida: 68ch; /* longitud de línea máxima para lectura */ /* --- Espaciado · base 4 px -------------------------------------------- */ --sp-0: 0; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6rem; --sp-12: 8rem; /* Ritmo vertical de sección, fluido */ --sp-seccion: clamp(3rem, 6vw, 6rem); /* --- Layout ------------------------------------------------------------ */ --ancho-max: 1200px; --ancho-estrecho: 760px; --gutter: clamp(1rem, 4vw, 2rem); /* --- Bordes y sombras --------------------------------------------------- */ --radio-sm: 4px; --radio-md: 8px; --radio-lg: 14px; --radio-full: 999px; --sombra-sm: 0 1px 2px rgba(1, 76, 161, .06), 0 1px 3px rgba(1, 76, 161, .08); --sombra-md: 0 2px 6px rgba(1, 76, 161, .08), 0 6px 16px rgba(1, 76, 161, .09); /* --- Foco · WCAG 2.2 SC 2.4.7 y 2.4.11 --------------------------------- */ --foco-ancho: 3px; --foco-offset: 2px; /* --- Objetivos táctiles · WCAG 2.2 SC 2.5.8 ---------------------------- Mínimo AA: 24 px. Aquí 44 px por guía de plataforma. */ --target-min: 44px; /* --- Movimiento --------------------------------------------------------- */ --dur-rapida: 150ms; --dur-media: 250ms; --easing: cubic-bezier(.2, .7, .3, 1); /* --- Capas ------------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-skip: 400; } /* Respeta la preferencia del sistema · WCAG 2.2 SC 2.3.3 */ @media (prefers-reduced-motion: reduce) { :root { --dur-rapida: 1ms; --dur-media: 1ms; } } /* AUD-06…11 · valores técnicos de la composición comercial, no tokens de marca. */ :root { --ui-portada-titulo: clamp(2.25rem, 3.8vw, 3.25rem); --ui-portada-columnas: 1.15fr 1fr; --ui-editorial-columnas: 1fr 1.15fr; --ui-muestra-titulo: clamp(1.5rem, 2.4vw, 2rem); --ui-muestra-sombra: 0 16px 48px rgba(1, 76, 161, .08); --ui-muestra-inclinacion: -1deg; --ui-senal-atencion: #8C1D18; --ui-senal-revision: #8A6200; --ui-senal-base: #2F7239; --ui-fundadora-nombre: clamp(3rem, 5.4vw, 4.75rem); --ui-cierre-titulo: clamp(2rem, 3.8vw, 3rem); } /* Fotografía editorial · dimensiones técnicas. */ :root { --ui-retrato-max: 400px; --ui-retrato-proporcion: 4 / 5; --ui-retrato-foco: 50% 15%; }