/* ========================================================================= CrearAsociados — Design Tokens (REHECHO 2026-06-08) Fuente: .claude/docs/canva-reference/REAL-DESIGN-TOKENS.md Verificado contra https://celulapublicidad.my.canva.site/pruebas-color (capturas + CSS computado real vía Playwright). Reemplaza el esquema oscuro/teal anterior (#0F172A + #00D4AA, Syne/Outfit/Roboto) que NO correspondía al diseño real — ver aviso en design-system.md. Estos custom properties son la única fuente de verdad visual. No hardcodear colores/espaciados en componentes: siempre var(--token). ========================================================================= */ :root { /* ---- Acento principal: amarillo/ámbar — botones CTA, fondos de sección completa, footer. Es EL color de marca. ---- */ --color-accent: #F8BD01; --color-accent-rgb: 248, 189, 1; --color-accent-dark: #DCA601; /* hover/active de FONDOS amarillos (botones) — combina con texto oscuro, sin riesgo de contraste */ --color-link-hover: #8A6400; /* hover de TEXTO/links sobre fondos claros — #DCA601 da solo 2.21:1 sobre blanco (falla AA); este tono más oscuro conserva el matiz ámbar y pasa AA normal (5.38:1 sobre blanco) */ /* ---- Oscuro: SOLO para overlay semitransparente del hero y texto oscuro sobre fondos amarillos/blancos. NO es el fondo general del sitio (el sitio es mayormente blanco/fotográfico). ---- */ --color-dark: #0F1015; --color-hero-overlay: rgba(19, 22, 32, 0.6); /* ---- Superficies claras ---- */ --color-white: #FFFFFF; --color-bg: #FFFFFF; /* fondo general del sitio = blanco, no oscuro */ --color-bg-soft: #FAF9F7; /* variante sutil para alternar secciones claras sin "sección--alt" oscura */ /* ---- Texto ---- */ --color-text: #384D56; /* gris azulado oscuro — texto de cuerpo principal */ --color-text-alt: #3C5058; /* variante observada del mismo tono */ --color-text-muted: #9D968E; /* gris cálido — texto secundario / metadatos. ⚠️ a11y: valor verificado tal cual en el sitio real (rgb(157,150,142) extraído por CSS computado). Sobre fondo blanco da ~2.92:1 — bajo el mínimo WCAG AA de 4.5:1 para texto normal (y bajo 3:1 incluso para texto grande). El sitio fuente probablemente incurre en el mismo gap. NO se ajustó el valor para no divergir de la fuente verificada — reportado a Frank/PM para que decida si se solicita corrección al diseño Canva o se acepta tal cual (ver hallazgo en la entrega del piloto). Si se decide corregir, candidato accesible que conserva el matiz: #787168 (~4.82:1 sobre blanco). */ --color-text-on-dark: rgba(255, 255, 255, 0.898); /* texto blanco ~90% sobre overlay oscuro del hero */ --color-text-on-accent: #0F1015; /* texto oscuro sobre fondos/botones amarillos — máximo contraste */ /* ---- Acento exclusivo de la card "Visión" (Quiénes Somos) ---- Crimson oscuro verificado por muestreo de píxeles (48.754 px) sobre el render real de https://celulapublicidad.my.canva.site/crear-asociados — ver REAL-DESIGN-TOKENS-OTRAS-PAGINAS.md. Es el ÚNICO elemento de todo el sitio con este tono — NO confundir con el rojo de badges #F6053E (Proyectos en Ejecución / categoría "Proyectos" del Blog), que es un rojo brillante distinto. Contraste verificado: 5.46:1 sobre blanco y con texto blanco sobre el propio color — pasa WCAG AA en ambos sentidos (texto normal y grande). Se usa como acento de ícono/borde de la card "Visión" únicamente; el cuerpo de texto sigue usando --color-text. */ --color-accent-vision: #D10E3F; /* ---- Franja de acento multicolor (elemento gráfico de marca: indicador de sección en el hero, franja bajo "Contacto"). 4 bloques: navy oscuro, gris, amarillo (= --color-accent), rojo/rosado. ---- */ --color-stripe-1: #1B2A3A; --color-stripe-2: #B0B0B0; --color-stripe-3: #F8BD01; --color-stripe-4: #E8536B; /* ---- Tipografía ---- CONFIRMADO 2026-06-08 (Ronda 2): la fuente real es Montserrat. Lo que `getComputedStyle` reportaba como "Canva Sans" / `YAFdtQi73Xs_0` es el alias interno de Canva que en realidad carga Montserrat vía @font-face — Frank entregó los .otf reales exportados desde Canva (familia Montserrat + Montserrat Alternates) en /Template/assets/fonts/montserrat/. Se autohospedan con @font-face en fonts.css. DESCARTADA la recomendación anterior de Noto Sans como equivalente web-safe — ya no aplica, tenemos la fuente exacta. Mismo family para heading y body — el sitio real NO usa una fuente display/decorativa separada (descartar Syne/Outfit/Roboto). */ --font-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-heading: var(--font-base); --font-body: var(--font-base); --font-mono: var(--font-base); /* el sitio real no usa monoespaciada; se mantiene el alias para no romper componentes que lo referencian */ /* ---- Escala tipográfica REAL (verificada vía getComputedStyle, Ronda 2) ---- CRÍTICO: esta escala es COMPACTA — el único texto realmente grande del sitio es el H1 del hero (~35px). Los "h2" (títulos de sección como "Nuestros proyectos destacados", "Contacto") miden ~21px/700, EL MISMO orden de magnitud que los botones — NO una escala tradicional de h2 grandes (2rem+). No inflar estos valores: Frank verificó "el h2 no es grande, se debe respetar el tamaño de todos los textos del sitio". Fuente: REAL-DESIGN-TOKENS.md tabla "Tamaños de fuente reales". */ --text-sm: 1rem; /* 16px — base de cuerpo: subtítulos/comuna, texto contacto, enlaces navbar */ --text-base: 1rem; /* 16px — alias retrocompatible; el sitio real no documenta un tamaño de párrafo "general" distinto de 16px (no se infla a ~16.67px por "mejorar": exactitud > redondeo, ver feedback de Frank en Ronda 2) */ --text-md: 1.1667rem; /* ~18.67px — párrafo del hero, títulos de cards, labels de formulario */ --text-lg: 1.3333rem; /* ~21.33px — botones/CTAs, h2 (títulos de sección), eyebrow "Expertos en..." */ --text-hero: 2.1667rem; /* ~34.67px — ÚNICO texto grande del sitio: H1 del hero */ /* Line-heights exactos (px reales → convertidos a unitless contra su propio font-size para que escalen correctamente con rem/zoom) */ --leading-hero: 0.9808; /* 34px / 34.67px */ --leading-hero-lead: 1.3929; /* 26px / 18.67px */ --leading-cta: 0.9844; /* 21px / 21.33px */ --leading-navlink: 1.375; /* 22px / 16px */ --leading-section-h2: 0.9844; /* 21px / 21.33px */ --leading-card-title: 0.9643; /* 18px / 18.67px */ --leading-contact: 1; /* 16px / 16px */ --leading-form-label: 0.9643; /* 18px / 18.67px */ /* Letter-spacing exactos (px reales) */ --tracking-hero: 2.22px; --tracking-hero-lead: 1.19px; --tracking-cta: 1.37px; --tracking-eyebrow: 1.37px; --tracking-card-title: 1.19px; --tracking-contact: 1.02px; --tracking-form-label: 1.19px; /* Aliases semánticos exactos (mapeo 1:1 a la tabla verificada — preferir estos en componentes nuevos para que la intención quede explícita) */ --text-contact: var(--text-sm); /* 16px/400/16/1.02px — tel/correo/dirección, comuna */ --text-navlink: var(--text-sm); /* 16px/400/22/normal — enlaces navbar */ --text-cta: var(--text-lg); /* 21.33px/700/21/1.37px — botones */ --text-section-h2: var(--text-lg); /* 21.33px/700/21/1.37px — "Nuestros proyectos destacados", "Contacto" */ --text-eyebrow: var(--text-lg); /* 21.33px/400/21/1.37px — "Expertos en Vivienda Social..." */ --text-card-title: var(--text-md); /* 18.67px/700/18/1.19px — Gestión Integral, nombres de proyecto */ --text-form-label: var(--text-md); /* 18.67px/400/18/1.19px — Nombre, Teléfono, Correo, Asunto */ --text-hero-lead: var(--text-md); /* 18.67px/400/26/1.19px — párrafo del hero */ /* ---- Espaciado y layout ---- */ --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --section-py: clamp(3rem, 8vw, 4rem); --max-width: 1200px; --radius-md: 8px; --radius-lg: 14px; /* ---- Sombras ---- */ --shadow-card: 0 4px 16px rgba(15, 16, 21, 0.08); --shadow-card-hover: 0 8px 24px rgba(15, 16, 21, 0.12); /* ---- Transiciones ---- */ --transition-fast: .2s ease; --transition-base: .35s ease; --transition-slow: .6s ease; /* ---- Z-index scale ---- */ --z-header: 100; --z-overlay: 200; --z-modal: 300; } /* El sitio real es claro/fotográfico — no tiene esquema dark alterno documentado. Se deja el hook preparado sin overrides intencionalmente: si Frank solicita modo oscuro a futuro, se definirá aquí contra verificación visual real (no suposición). */ @media (prefers-color-scheme: dark) { :root { /* Intencionalmente sin overrides — el diseño real verificado es claro/fotográfico (blanco + amarillo + fotos), no dark-first. */ } }