/* ============================================================================ flo · design tokens — fuente canónica del design system ---------------------------------------------------------------------------- Extraído de las páginas reales (index.html + landings), NO del handoff v1. El handoff §5.2 asumía Poppins/Inter y algunos hex inventados; la realidad del sitio es DM Sans + DM Serif Display sobre la escala teal --t900..--t50. Uso: las páginas NUEVAS (Sprint 1+) enlazan este archivo: Las páginas existentes siguen con sus tokens inline (idénticos); este archivo los consolida para no repetir a mano en cada landing nueva. Reglas: - Este archivo SOLO define variables (tokens). Cero reglas de layout. - Constantes de negocio (UVT, topes DIAN) NO van aquí → _shared/calc-utils.js. - Al cambiar un color de marca, cámbialo aquí una vez. ========================================================================== */ :root { /* ── Escala teal (marca) ─────────────────────────────────────────────── */ --t900: #04342C; /* fondo oscuro principal / teal-deep */ --t800: #085041; --t600: #0F6E56; --t400: #1D9E75; /* verde de relleno real (barras, fills, acentos) */ --t200: #5DCAA5; --t50: #E1F5EE; /* crema / texto sobre fondo oscuro */ /* ── Acentos ─────────────────────────────────────────────────────────── */ --amber: #EF9F27; /* punto del logo + CTAs cálidos */ --white: #FFFFFF; /* ── Verdes/azules auxiliares (presentes en index.html) ──────────────── */ --fill: #3FA882; /* relleno alterno usado por el home (NO es --flo-fill) */ --water: #2F95C9; /* azul agua — solo gamificación de caudal */ --soft: #9FE0C4; /* verde suave sobre fondos oscuros */ /* ── Tema claro (secciones bg-white / páginas de contenido) ──────────── */ --bg: #F7FAF8; --surface: #FFFFFF; --surface2: #EEF4F1; --ink: #0C2A22; /* texto principal sobre fondo claro */ --muted: #4A6258; /* texto secundario */ --hint: #7C938A; /* texto terciario / pistas */ --border: #E2EBE6; /* ── Tiers de gamificación (caudal) ──────────────────────────────────── */ --tier-gota: #94A3B8; --tier-corriente: #7BC4A4; --tier-rio: #2E8B6E; --tier-cascada: #0F766E; /* ── Tipografía ──────────────────────────────────────────────────────── */ --serif: 'DM Serif Display', Georgia, serif; --sans: 'DM Sans', -apple-system, system-ui, sans-serif; /* ── Radios ──────────────────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* ── Espaciado ───────────────────────────────────────────────────────── */ --space-xl: 4rem; --space-lg: 2.5rem; --space-md: 2rem; --space-sm: 1rem; /* ── Anchos de contenido ─────────────────────────────────────────────── */ --max-w-prose: 62ch; --max-w-page: 1120px; /* alineado con el .wrap del home (1120px) */ /* ── Movimiento ────────────────────────────────────────────────────────── Flo se mueve como el agua: fluido, en calma, claro, natural, con su punto de alegría. Nunca institucional — pero tampoco de feria: lo que se mueve es porque algo pasó, y se mueve una sola vez. TRES duraciones. Si algo no encaja en las tres, casi siempre es que no debería animarse. Y la regla que importa más que los números: lo que se ABRE tarda más que lo que se CIERRA — cerrar es quitarte algo de delante, y hacerse esperar para eso molesta. --mov-rapido feedback inmediato. Hover, foco, un color que cambia, el chevron que gira, cerrar un desplegable. --mov-medio algo que se abre, se mueve o cambia de sitio. Menús, modales, pestañas, la tarjeta que se levanta. --mov-lento entradas y momentos de énfasis. Una sección que aparece al bajar, un dato que se revela, una confirmación. DOS curvas. Por defecto, SIEMPRE --ease-suave: sale rápido y frena al llegar, que es como frena todo lo que se mueve de verdad. --ease-alegre se pasa un poco de largo y vuelve, y por eso está RACIONADA: sólo para «te salió bien» (un check, un interruptor, un contador que termina). Nunca en navegación, nunca en una entrada de sección: ahí es ruido. Los tres valores coinciden a propósito con --duration-quick, -fast y -very-slow del skill transitions.dev (.agents/skills/transitions-dev), así que cualquiera de sus 32 transiciones entra sin retocarle los tiempos, y --ease-suave y --ease-alegre son sus --ease-smooth-out y --ease-bounce. Si un snippet suyo pide por dentro un 350/400 ms o un ease-in-out, eso es asunto del componente: el vocabulario público de flo son estos cinco. */ --mov-rapido: 150ms; --mov-medio: 250ms; --mov-lento: 500ms; --ease-suave: cubic-bezier(0.22, 1, 0.36, 1); --ease-alegre: cubic-bezier(0.34, 1.36, 0.64, 1); /* ── Qué transición usamos para cada patrón ────────────────────────────── Una sola respuesta por patrón, para no volver a tener tres maneras de hacer lo mismo. Los números remiten al catálogo del skill. ENTRADA DE SECCIONES → 18-texts-reveal · --mov-lento + --ease-suave Subida corta y desenfocada, escalonada línea a línea. Hoy hay TRES implementaciones distintas de esto ([data-anim], .plan y un .visible que está vacío); ésta las sustituye a las tres. INNEGOCIABLE: quien esconde es el JS, nunca el CSS —el patrón de _shared/chat-animado.js—. Si el CSS nace en opacity:0 y el JS no llega a correr, el contenido no existe: ni para la persona ni para Google. HOVER DE CARDS → 19-card-tilt · --mov-medio + --ease-suave Sólo en las tarjetas grandes de portada, y con el brillo apagado: una inclinación mínima hacia el puntero es lo más «natural y con gracia» que tiene el catálogo. En listas densas de tarjetas NO se inclina nada: ahí se queda la elevación de siempre, unificada a --mov-rapido. BOTONES → sin transición de catálogo · --mov-rapido + --ease-suave La elevación de 1px del hover no está en el catálogo, y transitions.dev deja el hover deliberadamente sin token. Aquí sí lo tiene: es el gesto que más veces se repite en el sitio (ocho copias), y tener ocho copias de tres valores distintos era el problema. Para lo que SÍ falta: 24-learn-more-hover en los CTA con chevron, 28-thinking-states para el «enviando…» que hoy no existe, y 10-success-check con --ease-alegre para el «listo» de después. NAVEGACIÓN → 05-menu-dropdown (mega-nav) · 07-panel-reveal (menú móvil) 09-icon-swap (burger→X) · 21-accordion (acordeón del pie) Abrir con --mov-medio, cerrar con --mov-rapido. Hoy las cuatro van con display:none, o sea sin transición ninguna. */ /* ── Alias semánticos del handoff ──────────────────────────────────────── El copy y los templates del programa GEO/SEO usan estos nombres. Se mapean sobre los tokens reales para que el handoff funcione sin refactorizar las páginas existentes. --flo-fill → --t400 (#1D9E75), el verde de relleno real (decisión Sergio 2026-07-03: NO al #3FA882, que era el --fill inventado en la v1). */ --teal-deep: var(--t900); --gold-dot: var(--amber); --cream: var(--t50); --flo-fill: var(--t400); --green-700: var(--t600); --water-blue: var(--water); --radius-lg: var(--r-lg); --radius-md: var(--r-md); --radius-sm: var(--r-sm); }