/* ============================================================================ Webbidor — tokens del sistema de diseño. Copiados literalmente desde .claude/skills/webbidor-design/tokens/*.css (colors · fonts · typography · spacing · radii-shadows · motion). Los valores no se tocan: si hay que cambiar uno, se cambia en el sistema y se vuelve a copiar aquí. Dos omisiones deliberadas respecto al sistema: 1. `tokens/product-theme.css` NO se copia. Contiene los alias cortos de la aplicación (--ac, --fg, --surface…) y el bloque [data-theme="dark"]. El sistema es explícito: "El modo oscuro existe solo en el producto. El sitio de marketing no lo tiene." 2. Los @import de Google Fonts tampoco se copian. Un @import dentro de un CSS bloquea el render en serie; las fuentes se cargan con y preconnect desde el de cada página, que es lo que ya hacía producción y es más rápido. Los valores de --wb-font-* sí viven aquí. ========================================================================== */ :root{ /* ---- Color ------------------------------------------------------------ Un solo azul. Es el color de todo lo interactivo: botones primarios, enlaces, iconos activos, estados seleccionados y el borde de foco. No hay color secundario de marca. */ --wb-blue-500:#137fec; /* primary */ --wb-blue-600:#0d6ad0; /* hover */ --wb-blue-700:#0a5cb8; /* texto sobre fondo claro azul */ --wb-blue-050:#eaf3fe; /* fondo suave */ --wb-blue-200:#c2dcfb; /* borde suave */ --wb-blue-gradient-to:#2563eb; /* solo para el degradado del titular del hero */ /* Neutros. El sitio usa la escala slate; la app usa ink/surface. */ --wb-slate-050:#f8fafc; --wb-slate-100:#f1f5f9; --wb-slate-200:#e2e8f0; --wb-slate-300:#cbd5e1; --wb-slate-400:#94a3b8; --wb-slate-500:#64748b; --wb-slate-600:#475569; --wb-slate-700:#334155; --wb-slate-800:#1e293b; --wb-slate-900:#0f172a; --wb-ink-900:#0b0f19; --wb-ink-700:#414b5a; --wb-ink-500:#6b7482; --wb-ink-400:#98a1b0; --wb-paper:#ffffff; --wb-paper-2:#fafbfc; --wb-paper-3:#f1f3f6; --wb-canvas:#f6f7f9; --wb-line:#e4e7ec; --wb-line-soft:#eef0f4; --wb-line-strong:#d2d7e0; /* Semáforo */ --wb-ok:#15803d; --wb-ok-soft:#effaf3; --wb-ok-line:#bbf0cd; --wb-warn:#b45309; --wb-warn-soft:#fffaeb; --wb-warn-line:#fce6b0; --wb-danger:#c0332e; --wb-danger-soft:#fef3f2; --wb-danger-line:#fbd5d3; /* Canales. Cada automatización pertenece a un canal y lo lleva como color. Viven únicamente en el cuadro de icono (.wb-ch): no tiñen texto, botones ni fondos. */ --wb-ch-whatsapp:#12a15b; --wb-ch-whatsapp-soft:#e9f8f0; --wb-ch-email:#2563eb; --wb-ch-email-soft:#eaf1fe; --wb-ch-social:#9333ea; --wb-ch-social-soft:#f5eefe; --wb-ch-data:#b45309; --wb-ch-data-soft:#fdf5e7; --wb-ch-web:#0d8f8f; --wb-ch-web-soft:#e7f7f7; /* WhatsApp de verdad — solo para el botón que lleva a WhatsApp. */ --wb-whatsapp:#25D366; --wb-whatsapp-hover:#20bd5a; --wb-whatsapp-dark:#075E54; --wb-whatsapp-bubble:#DCF8C6; /* Alias semánticos */ --wb-primary:var(--wb-blue-500); --wb-primary-hover:var(--wb-blue-600); --wb-primary-ink:var(--wb-blue-700); --wb-primary-soft:var(--wb-blue-050); --wb-primary-line:var(--wb-blue-200); --wb-text-inverse:#ffffff; /* ---- Tipografía ------------------------------------------------------- El sitio de marketing usa Space Grotesk, con Noto Sans para texto largo, y Material Symbols Outlined como fuente de iconos. */ --wb-font-ui:ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --wb-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --wb-font-display:'Space Grotesk', var(--wb-font-ui); --wb-font-long:'Noto Sans', var(--wb-font-ui); --wb-font-icon:'Material Symbols Outlined'; --wb-font-body:var(--wb-font-ui); /* Escala del sitio de marketing. */ --wb-t-hero:3.75rem; --wb-t-hero-lh:1.1; --wb-t-hero-ls:-.025em; --wb-t-section:2.25rem; --wb-t-lead:1.25rem; --wb-t-lead-lh:1.625; /* Escala del producto. La landing la usa en las tarjetas del catálogo, que son el mismo componente que el usuario ve dentro de la app. */ --wb-t-display:clamp(26px,3.4vw,36px); --wb-t-display-lh:1.1; --wb-t-display-ls:-.028em; --wb-t-h1:22px; --wb-t-h1-lh:1.22; --wb-t-h1-ls:-.022em; --wb-t-h2:17px; --wb-t-h2-lh:1.3; --wb-t-h2-ls:-.016em; --wb-t-h3:14.5px; --wb-t-h3-lh:1.35; --wb-t-h3-ls:-.008em; --wb-t-body:13.5px; --wb-t-body-lh:1.55; --wb-t-small:12.5px; --wb-t-small-lh:1.5; --wb-t-xs:11.5px; --wb-t-xs-lh:1.45; --wb-t-label:10.5px; --wb-t-label-ls:.075em; --wb-w-regular:400; --wb-w-medium:500; --wb-w-semibold:620; --wb-w-bold:680; --wb-w-black:700; /* ---- Espaciado -------------------------------------------------------- Escala de 4px. Dentro de una tarjeta 12–24; entre secciones 64–96. Nada intermedio inventado. */ --wb-s-1:4px; --wb-s-2:8px; --wb-s-3:12px; --wb-s-4:16px; --wb-s-5:20px; --wb-s-6:24px; --wb-s-8:32px; --wb-s-10:40px; --wb-s-12:48px; --wb-s-16:64px; --wb-s-20:80px; --wb-s-24:96px; --wb-page-max:80rem; --wb-prose-max:48rem; --wb-tap-min:28px; --wb-bp-desktop:1440px; --wb-bp-sidebar:1000px; --wb-bp-grid:960px; --wb-bp-mobile:390px; /* ---- Radios ----------------------------------------------------------- Uso fijo: 6 etiqueta · 9 botón y campo · 12 tarjeta · 16 modal. El sitio de marketing va más grande. */ --wb-r-1:6px; --wb-r-2:9px; --wb-r-3:12px; --wb-r-4:16px; --wb-r-5:22px; --wb-r-pill:99px; --wb-r-cta:.75rem; --wb-r-card:1rem; --wb-r-card-lg:1.5rem; /* ---- Sombras ---------------------------------------------------------- La jerarquía la da el borde, no la sombra. Solo lo que flota de verdad lleva sh-4. La única sombra de color es la azul bajo los CTA grandes. */ --wb-sh-1:0 1px 2px rgba(11,15,25,.05); --wb-sh-2:0 2px 4px rgba(11,15,25,.05),0 1px 2px rgba(11,15,25,.04); --wb-sh-3:0 8px 16px -4px rgba(11,15,25,.09),0 3px 6px -3px rgba(11,15,25,.05); --wb-sh-4:0 24px 48px -12px rgba(11,15,25,.18),0 8px 16px -8px rgba(11,15,25,.08); --wb-sh-primary:0 20px 25px -5px rgba(19,127,236,.2),0 8px 10px -6px rgba(19,127,236,.2); /* ---- Movimiento ------------------------------------------------------- Discreto y funcional. Hover de CTA: sube 2px. Press: sin rebote, sin escala. */ --wb-dur-fast:.13s; --wb-dur:.16s; --wb-dur-slow:.3s; --wb-dur-entrance:.8s; --wb-ease:cubic-bezier(.4,0,.2,1); --wb-ease-out:cubic-bezier(0,0,.2,1); --wb-ease-panel:cubic-bezier(.32,.72,0,1); --wb-lift:-2px; --wb-press:.98; } @keyframes wb-fade-in-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes wb-fade-in{from{opacity:0}to{opacity:1}} @keyframes wb-travel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}} @keyframes wb-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.4);opacity:.3}} @keyframes wb-spin{to{transform:rotate(360deg)}} .wb-animate-in{animation:wb-fade-in-up var(--wb-dur-entrance) var(--wb-ease-out) forwards} /* Los tres únicos recursos de fondo del sistema. */ .wb-grid-pattern{ background-size:40px 40px; background-image: linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,.05) 1px, transparent 1px); } .wb-glass{ background:rgba(255,255,255,.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.3); } /* Material Symbols — solo en superficies de marketing. */ .wb-icon{ font-family:var(--wb-font-icon); font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} }