/* ===================================================================== SmartProcess · Design System — TOKENS (capa 1 y 2 + base global) --------------------------------------------------------------------- Fuente de verdad de estilos base de la web nueva (P3 híbrida corregida). Arquitectura: PRIMITIVOS (valores crudos, del brand-guide) → SEMÁNTICOS (alias por propósito) → los tokens de COMPONENTE viven al inicio de components.css. Regla: ningún archivo de página usa HEX/px "a pelo" — siempre var(). Documentación completa: 03_Web/design-system.md ===================================================================== */ :root { /* ------------------------------------------------------------------- 1 · PRIMITIVOS — color (HEX exactos de 01_Marca/brand-guide.md §1) ------------------------------------------------------------------- */ --c-navy: #0a1f44; /* texto, headings, fondos oscuros, sombra sólida */ --c-navy-2: #0e2650; /* variante para columnas/paneles sobre navy */ --c-navy-deep: #071634; /* footer */ --c-blue: #3a66ff; /* primario: CTA, links, focus */ --c-blue-soft: #eaf0ff; /* tinte azul para fondos de familia A */ --c-pop: #5d46ef; /* morado POP: sombras brutalistas, acentos grandes */ --c-pop-dark: #4a35d4; /* hover del pop */ --c-lila: #9989ff; /* counters/métricas sobre navy (con glow) */ --c-pop-soft: #ece8ff; /* fondos de icono, chips, badges sutiles */ --c-yellow: #ffc800; /* SOLO detalle: brush, marker, badges sobre navy */ --c-cream: #f8f3e8; /* secciones cálidas (dolor, casos, banda) */ --c-cream-2: #efe6d2; /* bordes/gradientes en zonas crema */ --c-bg: #fdfdfe; /* fondo de página */ --c-bg-alt: #f5f8ff; /* secciones alternas neutras (FAQ) */ --c-white: #ffffff; --c-border: #dce4ff; /* bordes de cards e inputs sin sombra */ --c-hairline: #e6eaf4; /* líneas finas estructurales */ --c-ink-2: #41507a; /* párrafos sobre claro */ /* F8-QA: #6a7798 daba 4.45:1 sobre blanco (falla AA por décimas a 12px); oscurecido a 5.5:1 manteniendo el mismo gris-azul de marca. */ --c-mute: #5b688b; /* microcopy, captions, fechas */ --c-mute-inverse: #8fa0c9; /* texto apagado sobre navy (col SaaS del duelo) */ --c-red: #cc2222; /* NO / error / tachado */ --c-green: #1f9d55; /* $ del prompt, checks (SOLO decorativo, 3.5:1) */ --c-green-text: #177a42; /* verde para TEXTO informativo (5.4:1, AA) */ /* R1 (2026-07-16) Tarea U3: no existía un "verde suave" de fondo de sección (solo --c-blue-soft/--c-pop-soft para A/B). Derivado del MISMO criterio que esos dos: igual tono que --c-green (~146°) llevado a L≈93% (misma familia de "pastel casi blanco" que --c-blue-soft/ --c-pop-soft, ver brand-guide §1). Contraste verificado (script node, fórmula WCAG relativa): 14.53:1 sobre --ink navy, 7.08:1 sobre --ink-body, 4.82:1 sobre --ok-text (AA en los tres casos, con margen). */ --c-green-soft: #e3f7ec; /* ------------------------------------------------------------------- 1 · PRIMITIVOS — tipografía (brand-guide §2, stack tech) ------------------------------------------------------------------- */ --font-disp: 'Space Grotesk', sans-serif; /* display + H1–H3 + botones */ --font-body: 'Inter', sans-serif; /* cuerpo */ --font-mono: 'JetBrains Mono', monospace; /* stickers, tags, números, acentos */ --fs-mega: clamp(2.4rem, 1.8rem + 3.5vw, 4.8rem); /* banda gigante */ --fs-display: clamp(2.4rem, 1.6rem + 5vw, 5rem); /* counters confianza */ --fs-outline: clamp(3.4rem, 2.6rem + 3.5vw, 6rem); /* números proceso outline */ --fs-h1: clamp(2.5rem, 1.6rem + 3.2vw, 4.2rem); --fs-h1-svc: clamp(2.2rem, 1.4rem + 2.7vw, 3.5rem); /* H1 páginas de servicio */ --fs-h2: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); --fs-h3: clamp(1.2rem, 1rem + .7vw, 1.55rem); --fs-lead: 1.1rem; --fs-body: 1rem; /* 16px */ --fs-sm: .9063rem; /* 14.5px */ --fs-mono-md: .8125rem; /* 13px — tags, índices */ --fs-mono-sm: .75rem; /* 12px — stickers, microcopy */ --lh-tight: 1.07; /* display/H1 */ --lh-head: 1.18; /* H2/H3 */ --lh-body: 1.65; --ls-tight: -.04em; /* números display */ --ls-head: -.025em; /* ------------------------------------------------------------------- 1 · PRIMITIVOS — espaciado, radios, capas ------------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --r-xs: 3px; /* stickers, chips pequeños */ --r-sm: 6px; /* botones, inputs, meta-pills */ --r-md: 10px; /* cards */ --r-lg: 14px; /* paneles grandes, media-frame */ --r-pill: 99px; --wrap: 1180px; --gutter: 28px; --sec-y: clamp(72px, 6vw + 40px, 110px); /* padding vertical de sección */ --z-nav: 50; --z-overlay: 80; --z-toast: 99; /* ------------------------------------------------------------------- 1 · PRIMITIVOS — sombras brutalistas (sólidas, sin blur) y profundidad Niveles: b1 sticker · b2 reposo destacado · b3 hover/énfasis · b4 máximo (bloques hero/IA). Suaves solo para dar "aire" espacial. ------------------------------------------------------------------- */ --shadow-b1: 3px 3px 0 var(--c-navy); --shadow-b2: 5px 5px 0 var(--c-navy); --shadow-b3: 8px 8px 0 var(--c-pop); --shadow-b4: 10px 10px 0 var(--c-pop); /* Desplazamiento del nivel b3 (S3). Estas sombras son SÓLIDAS y opacas: quien meta una card con --shadow-b3 pegada al borde de un contenedor recortado o contiguo necesita reservar este hueco, o la sombra se pinta encima del vecino (fue el solape del carrusel de la home). */ --shadow-b-offset: 8px; --shadow-soft: 0 24px 48px -20px rgba(10, 31, 68, .18); /* media-frame */ --shadow-soft-lg: 0 40px 80px -32px rgba(10, 31, 68, .28); /* capa frontal */ --glow-pop: radial-gradient(circle, rgba(93, 70, 239, .38), transparent 65%); --ring: 0 0 0 3px rgba(58, 102, 255, .35); /* focus visible */ /* ------------------------------------------------------------------- 1 · PRIMITIVOS — motion (guardarraíles: solo transform/opacity) ------------------------------------------------------------------- */ --t-fast: 150ms; --t-base: 220ms; --t-reveal: 700ms; --t-brush: 800ms; --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-pop: cubic-bezier(.34, 1.3, .5, 1); /* micro-rebote de stickers/hover */ --reveal-y: 26px; --reveal-x: 34px; --stagger: 70ms; /* ------------------------------------------------------------------- 2 · SEMÁNTICOS — propósito (las páginas consumen ESTOS) ------------------------------------------------------------------- */ --bg-page: var(--c-bg); --bg-surface: var(--c-white); --bg-warm: var(--c-cream); --bg-calm: var(--c-bg-alt); --bg-inverse: var(--c-navy); --ink: var(--c-navy); /* titulares y texto fuerte */ --ink-body: var(--c-ink-2); /* párrafos */ --ink-soft: var(--c-mute); /* microcopy */ --ink-inverse: var(--c-white); --ink-inverse-2:#c7d0ea; /* párrafo sobre navy */ --accent: var(--c-pop); /* acento de marca (morado) */ --accent-2: var(--c-blue); /* acento secundario / interacción */ --hl: var(--c-yellow); /* highlight puntual (brush/marker) */ --link: var(--c-blue); --ok: var(--c-green); /* decorativo: checks, $, celdas */ --ok-text: var(--c-green-text); /* texto verde legible (AA) */ --ok-soft: var(--c-green-soft); /* R1 U3: fondo de sección verdoso muy suave (calculadora A1) */ --danger: var(--c-red); /* Familias del catálogo (corrección Fabio: bloques diferenciados A/B/C) */ --fam-a: var(--c-blue); /* A · Excel — azul, feel hoja de cálculo */ --fam-a-soft: var(--c-blue-soft); --fam-b: var(--c-pop); /* B · Verticales — morado, cards */ --fam-b-soft: var(--c-pop-soft); --fam-c: var(--c-navy); /* C · Producto propio — navy + amarillo */ --fam-c-accent: var(--c-yellow); /* Gradientes de marca (brand-guide §1) */ --grad-progress: linear-gradient(90deg, var(--c-blue) 0%, var(--c-pop) 100%); --grad-ia-block: radial-gradient(circle at 92% -8%, rgba(93,70,239,.55), transparent 55%); } /* ===================================================================== BASE GLOBAL — reset mínimo + defaults tipográficos + a11y ===================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* El fondo de página vive en , no en (R1-A / .code-bg, motion.js §9 · components.css "UI espacial"). .code-bg es un fixed + z-index:-1 insertado como PRIMER HIJO de : si mantiene su propio background, ese background forma parte de la misma caja que sus hijos con z-index negativo, y en la práctica puede pintarse por delante del canvas (tapándolo). Subiendo el color a —que no tiene hijos con z-index negativo— el canvas queda siempre visible por encima; se queda sin background propio. */ html { scroll-behavior: smooth; background: var(--bg-page); } /* Recorte horizontal global (QA sesión 4, causa raíz transversal): los [data-scrub] de GSAP nacen con translateX(±110px) y los "right" asoman 110px por el borde derecho al cargar; Chrome móvil computa ese ancho visual (473px en las páginas de servicio a 390) y hace zoom-out de la página ENTERA, dejando cualquier position:fixed fuera de pantalla. `clip` y no `hidden` a propósito: hidden convierte al elemento en contenedor de scroll y ROMPE el position:sticky del topbar; clip solo recorta (y el recorte lateral es justo el look buscado del scrub). */ html, body { overflow-x: clip; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-disp); letter-spacing: var(--ls-head); line-height: var(--lh-head); font-weight: 600; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { color: var(--ink-body); } a { color: var(--link); } /* `height:auto` acompaña siempre a `max-width:100%`: sin él, una imagen con atributos width/height en el HTML conserva la ALTURA del atributo cuando el ancho se encoge, y sale aplastada. Es la razón por la que faltaban esos atributos en media web — y sin ellos el navegador no sabe cuánto hueco reservar, así que el texto salta cuando cargan (CLS). Con las dos cosas juntas se puede declarar el tamaño real de cada imagen sin deformar nada. Cualquier regla más específica (`.hero-photo-chip img`, `.lp-tramites__logo img`…) sigue mandando sobre esta. */ img, video { max-width: 100%; height: auto; display: block; } ::selection { background: var(--c-pop); color: var(--c-white); } /* Números siempre tabulares, como en una UI técnica (brand-guide §2) */ b, strong, .num { font-feature-settings: "tnum" 1; } /* Focus visible consistente (teclado) */ :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); } /* Enlace "saltar al contenido" (a11y) */ .skip-link { position: absolute; left: -999px; top: 0; z-index: var(--z-toast); background: var(--c-navy); color: var(--c-white); font-family: var(--font-mono); font-size: var(--fs-mono-sm); padding: var(--s-3) var(--s-4); } .skip-link:focus { left: 0; } /* Oculta visualmente pero mantiene accesible a lectores de pantalla (anuncios de paso del funnel /diagnostico, aria-live; reutilizable en cualquier página futura). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Guardarraíl global: si el usuario pide menos movimiento, se respeta */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }