/* ===================================================== FPUC — Tokens de diseño ----------------------------------------------------- Fuente: exports vectoriales de Figma ("porunacarrera (Copy)") en ~/Downloads/por una carrera/ — 8 páginas, todas en frame de 1536px de ancho: Inicio · nosotros · equipo · nuestra historia · propósito proyectos · single proyecto · qué hacemos Los colores y los tamaños tipográficos NO son estimados: se extrajeron de los operadores del PDF (rellenos `scn` en colorspace ICCBased/DeviceRGB y matrices `Tm` de cada run de texto) con /figma_extract.py. Cada token lleva en comentario dónde aparece y su coordenada Y en el frame. TRES CAVEATS de la extracción: 1. Relleno vs. borde: un anillo de 1px relleno produce el mismo bbox que un rectángulo macizo, así que la herramienta no los distingue. Se resolvió mirando el render de cada página; los tokens marcados "(borde)" son eso. 2. Opacidad: las alphas viven en ExtGState y no se extraen. Los tintes y velos van declarados y marcados PENDIENTE. 3. Tipografía: familias y pesos NO son recuperables — Figma trazó el texto como fuentes Type3 sin nombre y con /ToUnicode vacío. Ver bloque 3. Uso: nunca escribir un hex ni un tamaño de fuente en theme.css ni en un componente — siempre var(--fpuc-*). ===================================================== */ :root { /* =================================================== 1. PRIMITIVAS — Color [MEDIDO] =================================================== */ /* --- Azules --- */ /* Navy: sección Herramientas y footer en Home (y2796 / y6535); panel "Estudios" en proyectos (y2394, 427×626). El color estructural del sitio. */ --fpuc-navy: #04235A; --fpuc-navy-light: #1D396B; /* icono del footer (y6768) */ /* Azul primario: banda de 3 rutas y CTA final en Home (y787 / y6002); hero de propósito (y33, 1536×712). La banda CTA final aparece en las 8 páginas. */ --fpuc-blue: #0048AB; --fpuc-blue-mid: #1A5AB4; /* bloque en historia (y3383, 268×284) */ /* Celeste: en Home es un detalle del footer, pero en propósito es fondo de sección completo (y5700, 1536×814) y en historia el chip de año activo (y1371). */ --fpuc-sky: #03A4FF; /* --- Verdes --- */ /* Teal: color de marca ausente en la Home. Es la banda de hero de nosotros (y33, 1536×1023), equipo e historia (y33, 1536×644), el panel "Trabaja con nosotros" (equipo y2843, 573×458) y la banda de "Voces de impacto" en qué hacemos y single proyecto (y3998, 1536×814). */ --fpuc-teal: #009678; --fpuc-cyan: #00C7D4; /* flechas de carrusel en historia (y1569, 42×42) */ /* --- Rosa / coral --- */ /* Cifras de impacto (y1577) y acción primaria: "Conoce nuestro propósito" (y1710) y "Donar ahora" (y6271, en las 8 páginas). */ --fpuc-pink: #E53871; --fpuc-coral: #FF6347; /* panel Plataforma Conócete (y3703, 770×574); chip activo en proyectos */ --fpuc-coral-light: #FF7E68; /* botón "Dona" del header (y120); borde del recuadro en historia (y2627) */ --fpuc-coral-muted: #E97650; /* acentos del timeline en historia (y2953) */ /* --- Tintas y grises --- */ /* Utility bar. Ojo: el diseño trae dos valores — #111827 en la Home y #1A1A1A en las otras 7. Unificado en #1A1A1A por mayoría; #111827 queda disponible como --fpuc-ink-deep. */ --fpuc-ink: #1A1A1A; --fpuc-ink-deep: #111827; /* velo del hero de Home (y36, 1536×751); texto en propósito */ --fpuc-black: #000000; /* texto en proyectos (y2705) */ --fpuc-gray: #5F5F5F; /* fechas de noticias (y5714) */ --fpuc-gray-mid: #8D8D8D; /* años inactivos del timeline (y1387) */ --fpuc-gray-mid-alt: #8B8B8B; /* divisor en single proyecto (y364) */ /* --- Superficies claras --- */ --fpuc-white: #FFFFFF; /* base de página, ~50% del área en todas */ --fpuc-off-white: #FBFAFA; /* círculos de redes del footer (y6807, 35×35) */ --fpuc-ghost: #F8F8FF; /* botones ghost (borde) y panel del formulario (proyectos y3124, 1236×778) */ --fpuc-lavender: #F5F7FB; /* fondo Programas (y1930); tarjetas sobre navy (y3109); fondo en equipo e historia */ --fpuc-mist: #E6E9EE; /* hero de single proyecto (y244, 1536×770); sección Directorio (equipo y2759) */ --fpuc-periwinkle: #E2E6F0; /* marco de foto en tarjeta de persona (equipo y580, 253×243) */ --fpuc-sky-tint: #CCDAEE; /* tarjetas del timeline en historia (y1470, 339×274) */ --fpuc-gray-100: #EFEFEF; /* barra de newsletter (y6432, 1536×103), en las 8 páginas */ --fpuc-gray-200: #E8E8E8; /* chips de año inactivos (historia y1371, 68×42) */ --fpuc-gray-300: #CCCCCC; /* tiles de logos de aliados (y4801, 170×170) — es borde */ --fpuc-gray-400: #C5C9D3; /* flechas ‹ › del carrusel de aliados (y4865) */ --fpuc-blue-gray-200: #C1C4D7; /* divisores verticales de la banda de rutas (y787) */ --fpuc-blue-gray-500: #687B9C; /* icono del footer (y6756) */ /* =================================================== 2. SEMÁNTICOS — Color Capa que consumen theme.css y los componentes. =================================================== */ /* --- Fondos de sección --- */ --fpuc-surface: var(--fpuc-white); --fpuc-surface-alt: var(--fpuc-lavender); /* Programas, Directorio */ --fpuc-surface-muted: var(--fpuc-mist); /* hero de single proyecto */ --fpuc-surface-band: var(--fpuc-gray-100); /* newsletter */ --fpuc-surface-dark: var(--fpuc-navy); /* Herramientas, footer, panel Estudios */ --fpuc-surface-accent: var(--fpuc-blue); /* rutas, CTA final, hero de propósito */ --fpuc-surface-sky: var(--fpuc-sky); /* sección en propósito, hero de proyectos */ --fpuc-surface-teal: var(--fpuc-teal); /* hero de internas, Voces de impacto */ --fpuc-surface-highlight: var(--fpuc-coral); /* panel Plataforma Conócete */ --fpuc-surface-utility: var(--fpuc-ink); /* utility bar */ /* Tinte menta detrás del formulario (proyectos y3020, 1536×978). Es el teal con alpha; la opacidad vive en ExtGState y no se extrajo. PENDIENTE confirmar el valor en Figma. */ --fpuc-surface-mint: color-mix(in srgb, var(--fpuc-teal) 10%, var(--fpuc-white)); /* --- Tarjetas --- */ --fpuc-surface-card: var(--fpuc-white); --fpuc-surface-card-on-dark: var(--fpuc-lavender); --fpuc-surface-card-alt: var(--fpuc-sky-tint); /* tarjetas del timeline */ --fpuc-surface-photo: var(--fpuc-periwinkle); /* marco de foto de persona */ /* --- Texto --- */ --fpuc-text: var(--fpuc-navy); --fpuc-text-strong: var(--fpuc-ink); --fpuc-text-muted: var(--fpuc-gray); --fpuc-text-subtle: var(--fpuc-gray-mid); --fpuc-text-on-dark: var(--fpuc-white); --fpuc-text-accent: var(--fpuc-pink); --fpuc-text-teal: var(--fpuc-teal); --fpuc-text-coral: var(--fpuc-coral); /* --- Acciones --- */ --fpuc-action: var(--fpuc-pink); /* CTA primaria */ --fpuc-action-alt: var(--fpuc-blue); /* CTA sobre claro */ --fpuc-action-dark: var(--fpuc-navy); /* Enviar, Leer más */ --fpuc-action-teal: var(--fpuc-teal); --fpuc-action-donate: var(--fpuc-coral-light); --fpuc-action-ghost: var(--fpuc-ghost); /* --- Chips / control segmentado --- */ --fpuc-chip-bg: var(--fpuc-mist); --fpuc-chip-text: var(--fpuc-navy); --fpuc-chip-bg-active: var(--fpuc-coral); --fpuc-chip-text-active: var(--fpuc-white); --fpuc-chip-bg-year: var(--fpuc-gray-200); /* años del timeline */ --fpuc-chip-text-year: var(--fpuc-gray-mid); --fpuc-chip-bg-year-active: var(--fpuc-sky); /* --- Bordes y divisores --- */ --fpuc-border: var(--fpuc-gray-300); --fpuc-border-subtle: var(--fpuc-mist); --fpuc-border-strong: var(--fpuc-navy); --fpuc-border-accent: var(--fpuc-coral-light); /* recuadro "Más sobre la Fundación" */ --fpuc-border-on-accent: var(--fpuc-blue-gray-200); --fpuc-border-on-dark: var(--fpuc-ghost); /* --- Velo sobre foto (hero, tiles de proyecto, tarjetas imagen) --- Color medido; opacidad PENDIENTE (vive en ExtGState). */ --fpuc-overlay: var(--fpuc-ink-deep); --fpuc-overlay-alpha: 0.55; --fpuc-focus-ring: var(--fpuc-sky); /* =================================================== 3. TIPOGRAFÍA Tamaños [MEDIDO] a escala 1:1 del frame de 1536px. Nombres numéricos a propósito: mapean 1:1 al diseño y no se quedan cortos como una escala xs/sm/lg (hay 28 tamaños). Familias y pesos: PENDIENTE, no recuperables del export. =================================================== */ /* Signika [CONFIRMADO en el CSS de Figma del h2 de Programas]. La carga inc/assets.php desde Google Fonts; el resto de la pila es la caída mientras baja la webfont o si no llegara a cargar. */ --fpuc-font-head: "Signika", system-ui, -apple-system, "Segoe UI", sans-serif; --fpuc-font-body: system-ui, -apple-system, "Segoe UI", sans-serif; /* PENDIENTE */ /* --- Escala primitiva --- */ --fpuc-text-10: 10px; --fpuc-text-11: 11px; --fpuc-text-13: 13px; --fpuc-text-14: 14px; --fpuc-text-15: 15px; --fpuc-text-16: 16px; --fpuc-text-17: 17px; --fpuc-text-18: 18px; --fpuc-text-19: 19px; --fpuc-text-20: 20px; --fpuc-text-21: 21px; --fpuc-text-22: 22px; --fpuc-text-24: 24px; --fpuc-text-25: 25px; --fpuc-text-26: 26px; --fpuc-text-27: 27px; --fpuc-text-28: 28px; --fpuc-text-30: 30px; --fpuc-text-33: 33px; --fpuc-text-40: 40px; --fpuc-text-42: 42px; --fpuc-text-48: 48px; --fpuc-text-52: 52px; --fpuc-text-55: 55px; --fpuc-text-65: 65px; --fpuc-text-66: 66px; --fpuc-text-70: 70px; /* --- Alias por rol, con dónde se midió --- */ --fpuc-text-legal: var(--fpuc-text-10); /* barra legal del footer (y6877) */ --fpuc-text-meta: var(--fpuc-text-13); /* utility bar (y26); fecha de noticia (y5724) */ --fpuc-text-small: var(--fpuc-text-14); /* links de footer; CTA de tarjeta; cargo en tarjeta de persona */ --fpuc-text-label: var(--fpuc-text-15); /* títulos de columna del footer (y6614); labels de formulario */ --fpuc-text-body-sm: var(--fpuc-text-16); /* labels de botón en banda de rutas (y1091) */ --fpuc-text-body: var(--fpuc-text-18); /* cuerpo por defecto en todas las páginas */ --fpuc-text-nav: var(--fpuc-text-19); /* menú principal (y145) */ --fpuc-text-body-lg: var(--fpuc-text-20); /* bajadas de sección; títulos de noticia; nombre en tarjeta de persona */ --fpuc-text-lead: var(--fpuc-text-21); /* bajada del hero en páginas internas (y411) */ --fpuc-text-quote: var(--fpuc-text-22); /* cita en "Voces de impacto" */ --fpuc-text-eyebrow: var(--fpuc-text-24); /* rótulo del hero interno (y333) */ --fpuc-text-eyebrow-lg: var(--fpuc-text-28); /* rótulos de sección: IMPACTO (y1353), NOTICIAS (y5280) */ --fpuc-text-h4: var(--fpuc-text-25); /* subtítulo de tarjeta de programa — CEES (y2437) */ --fpuc-text-h3: var(--fpuc-text-30); /* títulos de ruta (y909) y de tarjeta de herramienta (y3255) */ --fpuc-text-h2-sm: var(--fpuc-text-40); /* títulos de tarjeta de programa (y2406) */ --fpuc-text-h2: var(--fpuc-text-48); /* h2 de sección en las 8 páginas */ --fpuc-text-h1: var(--fpuc-text-55); /* h1 del hero (y403) */ --fpuc-text-stat: var(--fpuc-text-66); /* cifras de impacto en Home (y1577) */ --fpuc-text-stat-dark: var(--fpuc-text-65); /* cifras sobre banda de color (historia y2138, propósito) */ /* --- Interlineado [MEDIDO] de la distancia entre líneas --- */ --fpuc-leading-h1: 1.27; /* 55px → 70px (y403 → y473) */ --fpuc-leading-h2: 1.23; /* 48px → 59px (y2978 → y3037) */ --fpuc-leading-title: 1.35; /* 20px → 27px (y5757 → y5784) */ --fpuc-leading-body: 1.56; /* 18px → 28px (y953 → y981) */ --fpuc-leading-links: 2.14; /* 14px → 30px (footer, y6660 → y6690) */ --fpuc-leading-none: 1; /* --- Pesos — PENDIENTE de confirmar por elemento --- */ --fpuc-weight-regular: 400; --fpuc-weight-medium: 500; --fpuc-weight-semibold: 600; --fpuc-weight-bold: 700; /* --- Tracking --- */ --fpuc-tracking-tight: -0.02em; --fpuc-tracking-normal: 0; --fpuc-tracking-wide: 0.08em; /* rótulos en versales. PENDIENTE medir */ /* Título de sección en versales: 1.92px sobre 48px [CONFIRMADO en el CSS de Figma del h2 de Programas, y1930]. Va aparte de --fpuc-tracking-wide, que sigue sin medir y lo usan botones, rótulos y títulos de columna. */ --fpuc-tracking-caps: 0.04em; /* =================================================== 4. LAYOUT Y REJILLA [MEDIDO] =================================================== */ --fpuc-frame: 1536px; /* ancho del frame de diseño */ --fpuc-container: 1234px; /* contenido: x=151 → x=1385 */ --fpuc-gutter: 151px; /* margen lateral del frame */ /* Rejilla de 3 columnas: programas, herramientas, noticias */ --fpuc-col-3: 392px; /* Rejilla de 4 columnas: personas (equipo), tiles de proyecto */ --fpuc-col-4: 286px; --fpuc-grid-gap: 29px; /* 3×392 + 2×29 = 1234 ✓ */ --fpuc-utility-height: 39px; --fpuc-header-height: 112px; /* nav principal, sin la utility bar */ --fpuc-hero-height: 751px; /* hero de Home (y36) */ --fpuc-hero-band: 644px; /* banda de hero en internas (y33) */ /* Header montado sobre el hero (Home y equipo). El logo del diseño mide 174×114 de trazo (x150→x323, y91→y204) y el PNG trae aire alrededor: con 130px de caja el trazo cae en los 114px medidos. El menú queda centrado con el logo, en y150 (trazos y131→y169). */ --fpuc-nav-logo: 130px; --fpuc-nav-pad: 40px; /* Hero de banda en internas, medido en equipo.pdf: caja del h1 en y313 (mayúsculas en y324), fin de la bajada en y455 y fin de la banda en y677. Las tarjetas montan 118px sobre ese borde (empiezan en y559). */ --fpuc-hero-band-top: 313px; --fpuc-hero-band-bottom: 212px; --fpuc-person-overlap: 118px; /* Columna flotante de redes: cuadros de 42×42 pegados al borde (y290→y546, x1494→x1536). */ --fpuc-rail-icon: 42px; /* =================================================== 5. ESPACIO =================================================== */ --fpuc-space-1: 4px; --fpuc-space-2: 8px; --fpuc-space-3: 12px; --fpuc-space-4: 16px; --fpuc-space-5: 24px; --fpuc-space-6: 29px; /* = --fpuc-grid-gap */ --fpuc-space-7: 40px; --fpuc-space-8: 64px; --fpuc-space-9: 96px; --fpuc-section-y: var(--fpuc-space-9); /* =================================================== 6. RADIOS — PENDIENTE No extraídos (habría que medir las curvas Bézier de cada shape). Provisionales; confirmar en Figma. =================================================== */ --fpuc-radius-sm: 4px; --fpuc-radius-md: 8px; --fpuc-radius-lg: 16px; --fpuc-radius-pill: 999px; /* Alias heredado del wireframe: main.css lo usa en todos sus .btn. */ --btn-radius: var(--fpuc-radius-sm); /* =================================================== 7. SOMBRAS Y TRANSICIONES — PENDIENTE Las sombras usan SMask/grupos de transparencia, no extraídos. =================================================== */ --fpuc-shadow-sm: 0 1px 2px rgba(4, 35, 90, 0.06); --fpuc-shadow-md: 0 4px 12px rgba(4, 35, 90, 0.08); --fpuc-shadow-lg: 0 12px 32px rgba(4, 35, 90, 0.12); --fpuc-transition: 200ms ease; }