/* ═══════════════════════════════════════════════════════════════ * landing.css — Overrides DashProyectos sobre el Linear Design System * Mantiene tokens de Linear (canvas, surface ladder, lavender, hairlines) * y agrega: * - Glow ambient (firma del producto, igual al auth-design.css) * - Gradient purple→cyan en CTA principal (firma del producto) * - Light mode toggle * - Layout completo de la landing (hero, features, pricing, FAQ, footer) * - Animaciones GSAP soportadas via clases .is-revealed * - Mobile responsive * ═══════════════════════════════════════════════════════════════ */ /* ═══ Tokens extra DashProyectos (firma del producto) ═══ */ :root { /* Accent secundario — solo para gradient del CTA principal y línea How it works. * Linear puro NO usa cyan, pero es la firma del dashboard que ya existe en * auth-design.css. Mantenemos coherencia visual con el resto del producto. */ --color-accent-cyan: #06b6d4; /* Gradient del CTA principal: lavender Linear → cyan firma DashProyectos */ --gradient-cta: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-cyan) 100%); --gradient-cta-hover: linear-gradient(135deg, var(--color-primary-hover) 0%, #22d3ee 100%); /* Header pill width */ --header-max-width: 1080px; --header-pad-x: 24px; /* Layout */ --content-max: 1200px; --content-narrow: 720px; } /* ═══════════════════════════════════════════════════════════════ * LIGHT MODE — toggle vía data-theme="light" en * Override sutil: bg blanco, text zinc-900, lavender se mantiene * ═══════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --color-canvas: #ffffff; --color-surface-1: #f8fafc; --color-surface-2: #f1f5f9; --color-surface-3: #e2e8f0; --color-surface-4: #cbd5e1; --color-hairline: rgba(15, 23, 42, 0.08); --color-hairline-strong: rgba(15, 23, 42, 0.16); --color-hairline-tertiary: rgba(15, 23, 42, 0.24); --color-ink: #18181b; --color-ink-muted: #52525b; --color-ink-subtle: #71717a; --color-ink-tertiary: #a1a1aa; } /* ═══════════════════════════════════════════════════════════════ * BASE * ═══════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } body { background: var(--color-canvas); color: var(--color-ink); overflow-x: hidden; transition: background-color 280ms ease, color 280ms ease; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; margin: 0; } /* ═══════════════════════════════════════════════════════════════ * BACKGROUND LAYERS — glow ambient + grid (firma del producto) * ═══════════════════════════════════════════════════════════════ */ .bg-stack { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .bg-base { position: absolute; inset: 0; background: var(--color-canvas); } .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(100px); /* 160px -> 100px: ~60% del cost manteniendo presencia visual */ opacity: 0.07; will-change: opacity; /* solo opacity loop, sin scale */ transform: translateZ(0); /* fuerza GPU compositor layer */ backface-visibility: hidden; } .glow-purple { top: -200px; left: -200px; background: radial-gradient(circle, var(--color-primary) 0%, transparent 60%); } .glow-cyan { bottom: -250px; right: -200px; background: radial-gradient(circle, var(--color-accent-cyan) 0%, transparent 60%); } html[data-theme="light"] .bg-glow { opacity: 0.05; } .bg-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } html[data-theme="light"] .bg-grid { background-image: radial-gradient(rgba(15,23,42,0.06) 1px, transparent 1px); } /* ═══════════════════════════════════════════════════════════════ * HEADER pill flotante * ═══════════════════════════════════════════════════════════════ */ .site-header { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: var(--header-max-width); display: flex; align-items: center; gap: var(--space-lg); padding: 10px var(--header-pad-x); background: rgba(15, 16, 17, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); z-index: 100; transition: transform 300ms cubic-bezier(.16, 1, .3, 1), background-color 280ms ease; } html[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.78); } .site-header.is-hidden { transform: translateX(-50%) translateY(calc(-100% - 16px)); } .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.4px; color: var(--color-ink); flex-shrink: 0; } .brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-cta); box-shadow: 0 0 12px rgba(94, 105, 209, 0.4); } .nav { display: flex; gap: 4px; margin-left: auto; margin-right: auto; } .nav-link { position: relative; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--color-ink-muted); border-radius: var(--radius-sm); transition: color 150ms ease; } .nav-link::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 0; height: 1.5px; background: var(--color-accent-cyan); border-radius: 2px; transition: width 200ms ease; } .nav-link:hover { color: var(--color-ink); } .nav-link:hover::after { width: calc(100% - 24px); } .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .theme-toggle { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-hairline); color: var(--color-ink-muted); cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, transform 400ms ease; } .theme-toggle:hover { background: var(--color-surface-2); color: var(--color-ink); } .theme-toggle .theme-icon { width: 16px; height: 16px; } .theme-toggle .theme-icon-light { display: none; } html[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; } html[data-theme="light"] .theme-toggle .theme-icon-light { display: block; } /* ═══════════════════════════════════════════════════════════════ * BUTTONS * ═══════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font-family: var(--font-text); font-size: var(--fs-button); font-weight: var(--fw-button); line-height: 1; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 300ms ease; text-decoration: none; white-space: nowrap; } .btn .btn-arrow { width: 14px; height: 14px; transition: transform 200ms ease; } .btn:hover .btn-arrow { transform: translateX(3px); } .btn-icon-left { width: 14px; height: 14px; margin-right: 2px; } .btn-primary { background: var(--gradient-cta); color: var(--color-on-primary); border-color: transparent; } .btn-primary:hover { background: var(--gradient-cta-hover); box-shadow: 0 0 24px rgba(139, 92, 246, 0.3); } .btn-ghost { background: transparent; color: var(--color-ink-muted); border-color: transparent; } .btn-ghost:hover { color: var(--color-ink); background: var(--color-surface-2); border-color: var(--color-hairline); } .btn-secondary { background: var(--color-surface-2); color: var(--color-ink); border-color: var(--color-hairline); } .btn-secondary:hover { background: var(--color-surface-3); border-color: var(--color-hairline-strong); } .btn-lg { padding: 12px 20px; font-size: 15px; border-radius: var(--radius-lg); } .btn-block { width: 100%; } /* ═══════════════════════════════════════════════════════════════ * MAIN LAYOUT * ═══════════════════════════════════════════════════════════════ */ main { padding-top: 96px; padding-bottom: 0; } .section { max-width: var(--content-max); margin: 0 auto; padding: var(--space-section) var(--space-lg); } .section--narrow { max-width: var(--content-narrow); } .section-header { text-align: center; margin-bottom: var(--space-xxl); } .section-eyebrow { margin: 0 0 12px 0; color: var(--color-primary); } .section-title { margin: 0 0 12px 0; } .section-sub { margin: 0 auto; max-width: 560px; } /* ═══════════════════════════════════════════════════════════════ * HERO * ═══════════════════════════════════════════════════════════════ */ .hero { max-width: var(--content-max); margin: 0 auto; padding: 64px var(--space-lg) var(--space-xxl); text-align: center; } .hero-inner { max-width: 920px; margin: 0 auto; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); margin: 0 0 var(--space-xl) 0; color: var(--color-ink-muted); } .hero-badge i { width: 14px; height: 14px; color: var(--color-primary); } .hero-headline { margin: 0 0 var(--space-lg) 0; font-size: clamp(40px, 8vw, 80px); line-height: 1.05; letter-spacing: clamp(-1px, -0.04em, -3px); } .hero-line { display: block; } .hero-word { display: inline-block; transition: filter 200ms ease; } .hero-word--accent { color: var(--color-primary); } .hero-sub { max-width: 640px; margin: 0 auto var(--space-xl); } .hero-ctas { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); } /* ═══════════════════════════════════════════════════════════════ * MINI LIENZO ILUSTRATIVO (hero) * Composición 100% SVG + HTML que demuestra el concepto del Lienzo * colaborativo: swimlanes, nodos con cards, conexiones, cursor remoto. * Sin capturas reales — vive de los tokens del Linear DS. * ═══════════════════════════════════════════════════════════════ */ .hero-canvas { max-width: 1100px; margin: var(--space-xxl) auto 0; perspective: 1400px; } .canvas-frame { position: relative; background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 60px 120px -30px rgba(0,0,0,0.55); transition: transform 500ms cubic-bezier(.16, 1, .3, 1); transform-style: preserve-3d; } .hero-canvas:hover .canvas-frame { transform: rotateX(1.5deg) rotateY(-2deg); } .canvas-chrome { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--color-surface-2); border-bottom: 1px solid var(--color-hairline); } .canvas-chrome .mockup-url { margin-left: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-subtle); flex: 1; } .canvas-presence { display: inline-flex; align-items: center; } .presence-avatar { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--color-surface-2); margin-left: -6px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: #fff; } .canvas-stage { position: relative; aspect-ratio: 1100 / 540; max-height: 540px; background: radial-gradient(ellipse at 50% 40%, rgba(94,105,209,0.05), transparent 60%), var(--color-surface-1); background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 24px 24px; overflow: hidden; } html[data-theme="light"] .canvas-stage { background-image: radial-gradient(rgba(15,23,42,0.06) 1px, transparent 1px); } .canvas-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .canvas-edges .edge { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawEdge 1.4s cubic-bezier(.65,0,.35,1) forwards; } /* origin (gris punteada): aparece con fade en lugar de draw para preservar el dasharray 4,4 */ .canvas-edges .edge-origin-1, .canvas-edges .edge-origin-2 { stroke-dasharray: 4 4; stroke-dashoffset: 0; opacity: 0; animation: drawEdgeDashed 0.8s ease-out forwards; } .canvas-edges .edge-origin-1 { animation-delay: 1.05s; } .canvas-edges .edge-origin-2 { animation-delay: 1.15s; } .canvas-edges .edge-mention-1 { animation-delay: 1.25s; } .canvas-edges .edge-assigned-1 { animation-delay: 1.45s; } @keyframes drawEdge { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } @keyframes drawEdgeDashed { from { opacity: 0; } to { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .canvas-edges .edge { stroke-dashoffset: 0; animation: none; } } /* ───── Columna YO (persona fija a la izquierda, modelo real del lienzo) ───── */ .canvas-yo { position: absolute; top: 50%; left: 22px; transform: translateY(-50%); width: 180px; padding: 16px 12px; background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); text-align: center; z-index: 3; opacity: 0; animation: nodeIn 0.5s cubic-bezier(.16,1,.3,1) 0.05s forwards; } .yo-hex { width: 56px; height: 64px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary) 0%, #828fff 100%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 24px rgba(94,105,209,0.3); } .yo-avatar { color: #fff; font-family: var(--font-mono); font-size: 16px; font-weight: 600; } .yo-name { margin: 0; font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--color-ink); } .yo-role { margin: 2px 0 12px 0; font-family: var(--font-text); font-size: 11px; color: var(--color-ink-subtle); } .yo-stats { display: flex; justify-content: space-around; padding-top: 10px; border-top: 1px solid var(--color-hairline); margin: 0; list-style: none; } .yo-stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; } .yo-stat-num { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--color-ink); line-height: 1; } .yo-stats li span:last-child { font-family: var(--font-text); font-size: 9px; color: var(--color-ink-subtle); text-transform: uppercase; letter-spacing: 0.04em; } /* ───── Swimlane Proyecto (modelo real: header + docs alineados horizontalmente) ───── */ .canvas-swimlane { position: absolute; top: 50px; left: 230px; right: 22px; background: rgba(20, 21, 22, 0.5); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 14px; z-index: 2; backdrop-filter: blur(8px); } html[data-theme="light"] .canvas-swimlane { background: rgba(255, 255, 255, 0.5); } .swim-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-hairline); } .swim-code { padding: 2px 8px; background: var(--color-surface-3); border: 1px solid var(--color-hairline); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--color-ink-muted); } .swim-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--color-ink); } .swim-status { margin-left: auto; font-family: var(--font-text); font-size: 11px; color: var(--color-ink-subtle); } .swim-docs { display: flex; gap: 12px; } .doc-card { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--color-surface-3); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-md); box-shadow: 0 2px 6px rgba(0,0,0,0.25); opacity: 0; transform: translateY(8px); animation: nodeIn 0.5s cubic-bezier(.16,1,.3,1) forwards; transition: transform 200ms ease, border-color 200ms ease; } .doc-card:hover { transform: translateY(-2px); border-color: var(--color-primary); } .doc-card[data-canvas-fx="1"] { animation-delay: 0.20s; } .doc-card[data-canvas-fx="2"] { animation-delay: 0.30s; } .doc-card[data-canvas-fx="3"] { animation-delay: 0.40s; } .doc-icon { width: 14px; height: 14px; color: var(--color-ink-muted); flex-shrink: 0; } .doc-info { flex: 1; min-width: 0; } .doc-code { margin: 0; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-subtle); line-height: 1.2; } .doc-name { margin: 1px 0 0 0; font-family: var(--font-text); font-size: 11px; font-weight: 500; color: var(--color-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-rev { padding: 2px 6px; background: var(--color-surface-4); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--color-ink-muted); } .doc-status { padding: 2px 8px; border-radius: var(--radius-pill); font-family: var(--font-text); font-size: 10px; font-weight: 500; white-space: nowrap; } .status-approved { background: rgba(39,166,68,0.15); color: #4ade80; } .status-review { background: rgba(242,153,74,0.15); color: #fbbf24; } .status-draft { background: rgba(98,102,109,0.20); color: #a1a1aa; } /* ───── Comentarios flotantes (modelo real: 220×90, avatar + snippet + chip) ───── */ .comment-card { position: absolute; width: 230px; padding: 10px 12px; background: var(--color-surface-3); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,0.35); opacity: 0; transform: translateY(8px); animation: nodeIn 0.5s cubic-bezier(.16,1,.3,1) forwards; z-index: 3; transition: transform 200ms ease, border-color 200ms ease; } .comment-card:hover { transform: translateY(-2px); border-color: var(--color-primary); } .comment-1 { top: 60%; left: 38%; animation-delay: 0.65s; } .comment-2 { top: 70%; left: 62%; animation-delay: 0.80s; } .comment-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .comment-avatar { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: #fff; } .comment-author { font-family: var(--font-text); font-size: 11px; font-weight: 600; color: var(--color-ink); } .comment-time { margin-left: auto; font-family: var(--font-text); font-size: 10px; color: var(--color-ink-subtle); } .comment-text { margin: 0 0 8px 0; font-family: var(--font-text); font-size: 11px; line-height: 1.4; color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .comment-foot { display: flex; align-items: center; gap: 6px; } .comment-chip { padding: 2px 8px; background: var(--color-surface-4); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-muted); } .comment-meta { margin-left: auto; font-family: var(--font-text); font-size: 10px; color: var(--color-ink-subtle); } .comment-resolved { display: inline-flex; align-items: center; gap: 3px; color: #4ade80; } .comment-resolved i { width: 10px; height: 10px; } @keyframes nodeIn { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .canvas-yo, .doc-card, .comment-card { opacity: 1; transform: none; animation: none; } } /* ─── Cursor remoto (recorre nodos en loop) ─── */ .canvas-cursor { position: absolute; z-index: 4; display: inline-flex; align-items: flex-start; pointer-events: none; animation: cursorPath 14s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay: 2.5s; opacity: 0; } .canvas-cursor svg { display: block; } .canvas-cursor-name { margin: 12px 0 0 4px; padding: 2px 8px; background: #5e6ad2; border-radius: var(--radius-xs); font-family: var(--font-text); font-size: 10px; font-weight: 600; color: #fff; white-space: nowrap; } @keyframes cursorPath { 0% { opacity: 0; left: 14%; top: 50%; } 8% { opacity: 1; } 18% { left: 30%; top: 22%; } 32% { left: 50%; top: 22%; } 46% { left: 76%; top: 22%; } 60% { left: 50%; top: 64%; } 74% { left: 72%; top: 75%; } 88% { opacity: 1; left: 30%; top: 50%; } 100% { opacity: 0; left: 14%; top: 50%; } } @media (prefers-reduced-motion: reduce) { .canvas-cursor { display: none; } } /* Mobile: simplificar layout del lienzo (stack vertical) */ @media (max-width: 768px) { .canvas-stage { aspect-ratio: 4 / 5; } .canvas-presence { display: none; } /* Columna YO compacta arriba */ .canvas-yo { position: absolute; top: 12px; left: 12px; transform: none; width: 130px; padding: 10px 8px; } .yo-hex { width: 36px; height: 42px; margin-bottom: 4px; } .yo-avatar { font-size: 12px; } .yo-name { font-size: 11px; } .yo-role { font-size: 9px; margin-bottom: 6px; } .yo-stats { padding-top: 6px; } .yo-stat-num { font-size: 13px; } .yo-stats li span:last-child { font-size: 8px; } /* Swimlane reducida */ .canvas-swimlane { top: 12px; left: 152px; right: 12px; padding: 10px; } .swim-name { font-size: 12px; } .swim-status { display: none; } .swim-docs { flex-direction: column; gap: 6px; } .doc-card { padding: 8px; } .doc-name { font-size: 10px; } .doc-status { font-size: 9px; padding: 1px 6px; } .doc-card .doc-rev { display: none; } /* Comentarios apilados abajo */ .comment-card { width: 46%; padding: 8px 10px; } .comment-1 { top: 60%; left: 4%; } .comment-2 { top: 60%; left: 52%; } .comment-author, .comment-text { font-size: 10px; } /* Aristas: simplificar — el viewBox no se ajusta perfecto en mobile, opacidad reducida */ .canvas-edges { opacity: 0.4; } .canvas-cursor { display: none; } } /* ═══ Mockup del producto (legacy, mantenido para compatibilidad) ═══ */ .hero-mockup { max-width: 1100px; margin: var(--space-xxl) auto 0; perspective: 1200px; } .mockup-frame { background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 60px 120px -30px rgba(0,0,0,0.5); transition: transform 400ms cubic-bezier(.16, 1, .3, 1); transform-style: preserve-3d; } .hero-mockup:hover .mockup-frame { transform: rotateX(2deg) rotateY(-2deg); } .mockup-chrome { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--color-surface-2); border-bottom: 1px solid var(--color-hairline); } .mockup-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-ink-tertiary); } .mockup-dot--red { background: #eb5757; } .mockup-dot--yellow { background: #f2c94c; } .mockup-dot--green { background: #27a644; } .mockup-url { margin-left: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-subtle); } .mockup-body { display: grid; grid-template-columns: 200px 1fr; min-height: 360px; background: var(--color-surface-1); } .mockup-sidebar { padding: var(--space-lg); background: var(--color-surface-2); border-right: 1px solid var(--color-hairline); } .mockup-side-section .t-eyebrow { margin: 0 0 12px 0; } .mockup-side-list { display: flex; flex-direction: column; gap: 4px; } .mockup-side-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--color-ink-muted); } .mockup-side-item.is-active { background: rgba(94,105,209,0.12); color: var(--color-ink); } .mockup-side-item i { width: 14px; height: 14px; } .mockup-content { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-lg); } .mockup-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .mockup-stat { padding: var(--space-md); background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); } .mockup-stat-label { margin: 0 0 6px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-subtle); } .mockup-stat-value { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.4px; color: var(--color-ink); } .mockup-stat-trend { margin: 4px 0 0 0; font-size: 11px; color: var(--color-ink-subtle); } .mockup-stat-trend--up { color: var(--color-success); } .mockup-curve { padding: var(--space-md); background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); } .mockup-curve-title { margin: 0 0 12px 0; font-size: 12px; color: var(--color-ink-subtle); text-align: center; } .mockup-curve-svg { display: block; width: 100%; height: 140px; } /* ═══════════════════════════════════════════════════════════════ * SOCIAL PROOF * ═══════════════════════════════════════════════════════════════ */ .social-proof { max-width: var(--content-max); margin: 0 auto; padding: var(--space-xxl) var(--space-lg); text-align: center; } .social-proof-label { margin: 0 0 var(--space-lg) 0; } .logo-marquee { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xxl); align-items: center; } .client-logo { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.4px; color: var(--color-ink-tertiary); opacity: 0.5; filter: grayscale(100%); transition: opacity 300ms ease, filter 300ms ease, color 200ms ease; } .client-logo:hover { opacity: 1; filter: grayscale(0%); color: var(--color-ink); } /* ═══════════════════════════════════════════════════════════════ * FEATURES GRID * ═══════════════════════════════════════════════════════════════ */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .feature-card { padding: var(--space-xl); background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); transition: transform 250ms ease, border-color 250ms ease, background-color 250ms ease; } .feature-card:hover { transform: translateY(-4px); border-color: rgba(94, 105, 209, 0.3); background: var(--color-surface-2); } .feature-icon { width: 24px; height: 24px; color: var(--color-primary); margin-bottom: var(--space-md); } .feature-card h3 { margin: 0 0 8px 0; } .feature-card p { margin: 0; } /* ═══════════════════════════════════════════════════════════════ * HOW IT WORKS * ═══════════════════════════════════════════════════════════════ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); position: relative; } .step { padding: var(--space-lg); text-align: center; } .step-num { width: 56px; height: 56px; margin: 0 auto var(--space-md); display: flex; align-items: center; justify-content: center; background: var(--gradient-cta); border-radius: var(--radius-pill); color: var(--color-on-primary); font-family: var(--font-display); font-size: 22px; font-weight: 600; box-shadow: 0 0 24px rgba(94, 105, 209, 0.25); } .step h3 { margin: 0 0 8px 0; } .step p { margin: 0; } /* ═══════════════════════════════════════════════════════════════ * TESTIMONIOS * ═══════════════════════════════════════════════════════════════ */ .testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .testimonial { padding: var(--space-xl); background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); transition: transform 250ms ease, border-color 250ms ease; } .testimonial:hover { transform: translateY(-4px); border-color: rgba(94, 105, 209, 0.3); } .testimonial-quote { margin: 0 0 var(--space-lg) 0; color: var(--color-ink); } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-avatar { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-3); border: 1px solid var(--color-hairline); border-radius: 50%; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--color-ink-muted); } .testimonial-name { margin: 0; color: var(--color-ink); } .testimonial-role { margin: 2px 0 0 0; } /* ═══════════════════════════════════════════════════════════════ * PRICING * ═══════════════════════════════════════════════════════════════ */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: stretch; } .pricing-card { position: relative; padding: var(--space-xl); background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); display: flex; flex-direction: column; transition: transform 250ms ease, border-color 250ms ease; } .pricing-card:hover { transform: translateY(-4px); border-color: rgba(94, 105, 209, 0.3); } .pricing-card--featured { background: var(--color-surface-2); border-color: var(--color-primary); box-shadow: 0 0 0 1px rgba(94, 105, 209, 0.3), 0 8px 32px -8px rgba(94, 105, 209, 0.2); } .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .pricing-tier { margin: 0 0 12px 0; color: var(--color-primary); } .pricing-price { margin: 0 0 12px 0; display: flex; align-items: baseline; gap: 4px; } .pricing-amount { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -1px; color: var(--color-ink); } .pricing-period { font-size: 14px; color: var(--color-ink-subtle); } .pricing-desc { margin: 0 0 var(--space-lg) 0; } .pricing-features { list-style: none; padding: 0; margin: 0 0 var(--space-lg) 0; display: flex; flex-direction: column; gap: 8px; flex: 1; } .pricing-features li { display: flex; align-items: center; gap: 8px; color: var(--color-ink-muted); } .pricing-features i { width: 14px; height: 14px; color: var(--color-primary); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ * FAQ * ═══════════════════════════════════════════════════════════════ */ .faq-list { display: flex; flex-direction: column; gap: 8px; } .faq-item { background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); overflow: hidden; } .faq-trigger { width: 100%; padding: var(--space-md) var(--space-lg); background: transparent; border: none; color: var(--color-ink); font-family: var(--font-text); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-trigger:hover { background: var(--color-surface-2); } .faq-icon { width: 16px; height: 16px; color: var(--color-ink-subtle); transition: transform 250ms cubic-bezier(.16, 1, .3, 1); flex-shrink: 0; } .faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); color: var(--color-primary); } .faq-panel { max-height: 0; overflow: hidden; transition: max-height 300ms cubic-bezier(.16, 1, .3, 1); } .faq-panel p { padding: 0 var(--space-lg) var(--space-md); margin: 0; } .faq-trigger[aria-expanded="true"] + .faq-panel { max-height: 200px; } /* ═══════════════════════════════════════════════════════════════ * CTA FINAL * ═══════════════════════════════════════════════════════════════ */ .cta-final { max-width: 880px; margin: var(--space-xxl) auto 0; padding: var(--space-section) var(--space-lg); text-align: center; border-top: 1px solid var(--color-hairline); background: linear-gradient(135deg, rgba(94, 105, 209, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%); border-radius: var(--radius-xxl); margin-bottom: 96px; } .cta-final-title { margin: 0 0 var(--space-md) 0; font-size: clamp(32px, 5vw, 56px); } .cta-final-sub { margin: 0 0 var(--space-xl) 0; } /* ═══════════════════════════════════════════════════════════════ * FOOTER * ═══════════════════════════════════════════════════════════════ */ .site-footer { border-top: 1px solid var(--color-hairline); background: var(--color-surface-1); } .footer-cols { max-width: var(--content-max); margin: 0 auto; padding: var(--space-section) var(--space-lg) var(--space-xl); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--space-xl); } .footer-col--brand .brand--footer { margin-bottom: var(--space-md); } .footer-desc { margin: 0 0 var(--space-md) 0; max-width: 280px; } .footer-social { display: flex; gap: 8px; } .footer-social a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); color: var(--color-ink-muted); transition: background-color 200ms ease, color 200ms ease; } .footer-social a:hover { background: var(--color-surface-3); color: var(--color-ink); } .footer-social i { width: 14px; height: 14px; } .footer-heading { margin: 0 0 var(--space-md) 0; } .footer-links { display: flex; flex-direction: column; gap: 8px; } .footer-links a { color: var(--color-ink-muted); font-size: 13px; transition: color 150ms ease; } .footer-links a:hover { color: var(--color-ink); } .footer-bar { max-width: var(--content-max); margin: 0 auto; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-hairline); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-bar p { margin: 0; } .footer-locale { display: inline-flex; align-items: center; gap: 8px; } .footer-lang { color: var(--color-ink-subtle); transition: color 150ms ease; } .footer-lang:hover { color: var(--color-ink); } .footer-lang.is-active { color: var(--color-primary); } /* ═══════════════════════════════════════════════════════════════ * GSAP — estado inicial de elementos animados (evita FOUC) * ═══════════════════════════════════════════════════════════════ */ [data-fx="hero-badge"], [data-fx="hero-headline"], [data-fx="hero-sub"], [data-fx="hero-ctas"], [data-fx="hero-mockup"] { opacity: 0; } [data-fx="card"], [data-fx="step"] { opacity: 0; } .hero-word { filter: blur(20px); opacity: 0; } /* Estados iniciales — secciones Fase landing v2 (animaciones cinematic) */ .narrative-step .narrative-text, .narrative-step .narrative-visual, .gallery-card, .quick-start-btn, .feature-hero-content > *, .feature-hero-visual, .site-footer { opacity: 0; } @media (prefers-reduced-motion: reduce) { [data-fx], .hero-word, .narrative-step .narrative-text, .narrative-step .narrative-visual, .gallery-card, .quick-start-btn, .feature-hero-content > *, .feature-hero-visual, .site-footer { opacity: 1 !important; filter: none !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════ * MICROINTERACTIONS — hover polish (estilo Stripe/Linear/Vercel) * ═══════════════════════════════════════════════════════════════ */ /* Quick-start buttons: lift + glow sutil */ .quick-start-btn { transition: transform 240ms cubic-bezier(.2,.7,.2,1), background 200ms ease, border-color 200ms ease, box-shadow 240ms ease, color 200ms ease; } .quick-start-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--color-hairline-strong); } /* Gallery card: lift + scale + zoom img interno */ .gallery-card { transition: transform 320ms cubic-bezier(.2,.7,.2,1), border-color 240ms ease, box-shadow 320ms ease; will-change: transform; } .gallery-card:hover { transform: translateY(-4px) scale(1.012); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5); } .gallery-card img { transition: transform 480ms cubic-bezier(.2,.7,.2,1); } .gallery-card:hover img { transform: scale(1.02); } /* Feature pill: inner glow radial al hover */ .feature-pill { position: relative; overflow: hidden; } .feature-pill::before { content: ''; position: absolute; inset: 0; background: radial-gradient(140% 90% at 50% 0%, var(--color-hairline-strong) 0%, transparent 65%); opacity: 0; transition: opacity 320ms ease; pointer-events: none; z-index: 0; } .feature-pill:hover::before { opacity: 0.5; } .feature-pill > * { position: relative; z-index: 1; } /* Nav-link: underline animado from-left */ .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1.5px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 300ms cubic-bezier(.2,.7,.2,1); } .nav-link:hover::after { transform: scaleX(1); } /* Narrative visual: lift al hover */ .narrative-visual { transition: transform 480ms cubic-bezier(.2,.7,.2,1), box-shadow 480ms ease; will-change: transform; } .narrative-visual:hover { transform: translateY(-3px); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.5); } /* FAQ accordion: max-height transition + icon rotate */ .faq-panel { max-height: 0; overflow: hidden; transition: max-height 360ms cubic-bezier(.2,.7,.2,1), opacity 280ms ease, padding 280ms ease; opacity: 0; } .faq-trigger[aria-expanded="true"] + .faq-panel { max-height: 600px; opacity: 1; } .faq-trigger .faq-icon { transition: transform 280ms cubic-bezier(.2,.7,.2,1), color 200ms ease; } .faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); color: var(--color-primary); } /* Mobile tuning — transitions más cortas, sin hover transforms */ @media (max-width: 768px) { .quick-start-btn, .gallery-card, .feature-pill, .narrative-visual { transition-duration: 200ms; } .gallery-card:hover, .gallery-card:hover img, .narrative-visual:hover { transform: none; } .gallery-card:hover { box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4); } } /* ═══════════════════════════════════════════════════════════════ * QUICK-START — entry points bajo el hero (inspirado base44) * ═══════════════════════════════════════════════════════════════ */ .quick-start { margin-top: 36px; text-align: center; } .quick-start-label { color: var(--color-ink-tertiary); margin-bottom: 14px; display: block; } .quick-start-grid { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .quick-start-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-hairline); color: var(--color-ink-muted); font-size: 13px; font-weight: 500; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .quick-start-btn:hover { background: var(--color-surface-3); border-color: var(--color-hairline-strong); color: var(--color-ink); transform: translateY(-1px); } .quick-start-btn i { width: 14px; height: 14px; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ * FEATURES SHOWCASE — feature hero + grid de pills compactos * Reemplaza el feature-grid plano de 10 cards iguales. * ═══════════════════════════════════════════════════════════════ */ .features-showcase { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: 48px; } .feature-hero { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; padding: 40px; background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: 16px; } .feature-hero-eyebrow { color: var(--color-primary); margin: 0 0 12px; } .feature-hero-title { color: var(--color-ink); margin: 0 0 16px; letter-spacing: -0.02em; } .feature-hero-desc { color: var(--color-ink-muted); margin: 0 0 20px; } .feature-hero-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .feature-hero-bullets li { display: flex; align-items: center; gap: 10px; color: var(--color-ink-muted); } .feature-hero-bullets i { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; } .feature-hero-visual { border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.4); background: var(--color-surface-2); } .feature-hero-visual img { width: 100%; height: auto; display: block; } /* Pills compactos 3-col */ .feature-pills { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .feature-pill { padding: 24px; background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: 12px; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; } .feature-pill:hover { background: var(--color-surface-2); border-color: var(--color-hairline-strong); transform: translateY(-2px); } .feature-pill-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--color-surface-2); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .feature-pill-icon i { width: 18px; height: 18px; color: var(--color-ink); } .feature-pill h4 { margin: 0 0 6px; color: var(--color-ink); } .feature-pill p { margin: 0; color: var(--color-ink-muted); line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════ * NARRATIVA — storytelling 1/04 → 4/04 (inspirado base44 carousel) * Bloques alternados texto/imagen lado a lado. * ═══════════════════════════════════════════════════════════════ */ .narrative { display: flex; flex-direction: column; gap: 96px; } .narrative-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; max-width: var(--content-max); margin: 0 auto; width: 100%; } .narrative-step--reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .narrative-step--reverse .narrative-text { order: 2; } .narrative-step--reverse .narrative-visual { order: 1; } .narrative-num { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 13px; font-weight: 600; color: var(--color-primary); letter-spacing: 0.04em; margin: 0 0 14px; } .narrative-text h3 { color: var(--color-ink); margin: 0 0 16px; letter-spacing: -0.02em; } .narrative-text p { color: var(--color-ink-muted); margin: 0; max-width: 460px; } .narrative-visual { border-radius: 14px; overflow: hidden; box-shadow: 0 32px 64px -20px rgba(0, 0, 0, 0.45); background: var(--color-surface-2); border: 1px solid var(--color-hairline); } .narrative-visual img { width: 100%; height: auto; display: block; } /* ═══════════════════════════════════════════════════════════════ * GALLERY — capturas reales 3-col grid * ═══════════════════════════════════════════════════════════════ */ .gallery-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: var(--content-max); margin: 0 auto; } .gallery-card { background: var(--color-surface-1); border: 1px solid var(--color-hairline); border-radius: 12px; overflow: hidden; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .gallery-card:hover { transform: translateY(-3px); border-color: var(--color-hairline-strong); box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.4); } .gallery-card img { width: 100%; height: auto; display: block; background: var(--color-surface-2); } .gallery-cap { padding: 12px 16px; color: var(--color-ink-muted); margin: 0; border-top: 1px solid var(--color-hairline); } /* ═══════════════════════════════════════════════════════════════ * RESPONSIVE * ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .nav { display: none; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .feature-pills { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } } @media (max-width: 768px) { main { padding-top: 80px; } .hero { padding: 32px var(--space-md); } .hero-headline { letter-spacing: -1.2px; } .section { padding: 64px var(--space-md); } .feature-grid { grid-template-columns: 1fr; } .feature-pills { grid-template-columns: 1fr; } .feature-hero { grid-template-columns: 1fr; gap: 32px; padding: 28px; } .gallery-grid { grid-template-columns: 1fr; } .narrative { gap: 64px; } .narrative-step, .narrative-step--reverse { grid-template-columns: 1fr; gap: 28px; } .narrative-step--reverse .narrative-text { order: 1; } .narrative-step--reverse .narrative-visual { order: 2; } .testimonial-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: var(--space-md); } .mockup-body { grid-template-columns: 1fr; } .mockup-sidebar { display: none; } .mockup-stats { grid-template-columns: repeat(2, 1fr); } .footer-cols { grid-template-columns: 1fr; } .header-actions .btn-ghost { display: none; } .footer-bar { flex-direction: column; align-items: flex-start; } .quick-start-grid { gap: 8px; } .quick-start-btn { padding: 8px 14px; font-size: 12px; } } @media (max-width: 480px) { .site-header { padding: 8px 12px; } .brand-name { display: none; } .hero-mockup { margin-top: var(--space-xl); } .mockup-stats { grid-template-columns: 1fr; } .feature-hero { padding: 20px; } } /* ═══════════════════════════════════════════════════════════════ * PERFORMANCE LAYER — GPU compositing + paint scope limits * (no cambia nada visual, mejora FPS de scroll/animaciones) * ═══════════════════════════════════════════════════════════════ */ /* GPU layer promotion para elementos con animaciones de transform. translateZ(0) le indica al browser: "promovéme a compositor layer". */ .hero-mockup, .feature-hero-visual, .narrative-visual, .gallery-card, .site-header { transform: translateZ(0); backface-visibility: hidden; } .site-header { will-change: transform; /* anim de translateY al ocultarse en scroll */ } /* content-visibility: auto — el browser solo pinta secciones cerca del viewport. contain-intrinsic-size reserva espacio approx para evitar layout shifts. */ .section, .cta-final, .site-footer { content-visibility: auto; contain-intrinsic-size: 1px 800px; } /* Hero NO se le aplica — siempre visible/pinta inmediatamente */ /* contain: layout style — limita el scope de recalcs de layout/style dentro de cada section. NO incluir 'paint' porque puede romper los triggers de ScrollTrigger (clip de overflow). */ .section { contain: layout style; } /* Hint adicional para los SVG grandes (1280x800) en visuals: evitar decoding sync bloqueante. */ .narrative-visual img, .feature-hero-visual img, .gallery-card img { content-visibility: auto; contain-intrinsic-size: auto 500px; }