/* ============================================= RESET & BASE ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================= PREFLIGHT-LITE + UTILITIES Reemplaza el CDN de Tailwind: solo se usaban estas utilidades + estas partes del preflight. ============================================= */ img, svg, video, canvas { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; } a { color: inherit; text-decoration: inherit; } .fixed { position: fixed; } .relative { position: relative; } .top-0 { top: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .z-50 { z-index: 50; } /* ============================================= THEME TOKENS ============================================= */ :root { --bg: #050505; --text: #FAFAFA; --muted: rgba(255, 255, 255, 0.7); --muted-2: rgba(255, 255, 255, 0.55); --muted-3: rgba(255, 255, 255, 0.35); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); --surface: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.06); --nav-bg: rgba(5, 5, 5, 0.85); --nav-border: rgba(255, 255, 255, 0.06); --ticker-bg: rgba(0, 0, 0, 0.4); --focus-ring: rgba(124, 58, 237, 0.8); --focus-ring-2: rgba(244, 167, 187, 0.45); --nav-h: 64px; /* Motion tokens */ --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-normal: 300ms; --dur-reveal: 600ms; --dur-slow: 900ms; } html[data-theme="light"] { /* Light theme: no blancos plenos, look "milky/glass" */ --bg: #FBF6F2; --text: #0B0B10; --muted: rgba(20, 12, 28, 0.78); --muted-2: rgba(20, 12, 28, 0.68); --muted-3: rgba(20, 12, 28, 0.54); --border: rgba(88, 42, 160, 0.14); --border-strong: rgba(88, 42, 160, 0.22); --surface: rgba(255, 250, 247, 0.62); --surface-2: rgba(255, 250, 247, 0.78); --nav-bg: rgba(251, 246, 242, 0.86); --nav-border: rgba(88, 42, 160, 0.14); --ticker-bg: rgba(255, 250, 247, 0.44); /* Tokens de marca/estado que en tokens/colors.css solo tienen valor dark. Sin esto, textos como var(--purple-light) o var(--green) quedan casi invisibles sobre fondo claro (mockups, pills "Conectar", deltas, etc.). */ --purple-light: #6D28D9; --purple-faint: #7C3AED; --badge-purple: #5B21B6; --green: #0B7A55; --green-bright: #047857; --amber: #B45309; --amber-warm: #D97706; --red: #D6244A; --text-secondary: rgba(20, 12, 28, 0.72); --border-subtle: rgba(11, 11, 16, 0.08); --border-accent: rgba(124, 58, 237, 0.35); --success-bg: rgba(11, 122, 85, 0.12); --warning-bg: rgba(180, 83, 9, 0.12); --danger-bg: rgba(214, 36, 74, 0.10); --info-bg: rgba(2, 132, 199, 0.12); --neutral-bg: rgba(11, 11, 16, 0.06); --grad-brand-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(244, 167, 187, 0.08)); } /* Light variants (set on ): data-light-variant="cream" | "lilac" */ html[data-theme="light"][data-light-variant="cream"] { --bg: #FFF6EC; --muted: rgba(23, 14, 10, 0.78); --muted-2: rgba(23, 14, 10, 0.68); --muted-3: rgba(23, 14, 10, 0.54); --border: rgba(140, 76, 20, 0.16); --border-strong: rgba(140, 76, 20, 0.24); --surface: rgba(255, 252, 248, 0.64); --surface-2: rgba(255, 252, 248, 0.80); --nav-bg: rgba(255, 246, 236, 0.86); --nav-border: rgba(140, 76, 20, 0.16); --ticker-bg: rgba(255, 252, 248, 0.46); } html[data-theme="light"][data-light-variant="lilac"] { --bg: #F7F3FF; --muted: rgba(16, 12, 28, 0.78); --muted-2: rgba(16, 12, 28, 0.68); --muted-3: rgba(16, 12, 28, 0.54); --border: rgba(96, 56, 189, 0.16); --border-strong: rgba(96, 56, 189, 0.26); --surface: rgba(255, 255, 255, 0.60); --surface-2: rgba(255, 255, 255, 0.78); --nav-bg: rgba(247, 243, 255, 0.86); --nav-border: rgba(96, 56, 189, 0.16); --ticker-bg: rgba(255, 255, 255, 0.44); } html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: calc(var(--nav-h) + 12px); } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; width: 100%; padding-top: var(--nav-h); } /* Prevent rare horizontal scroll on mobile (scaled mockup, long words) */ body { overflow-x: clip; } .mockup-container { max-width: 100%; } /* Ensure anchor navigation doesn't hide content under fixed nav */ section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); } /* ============================================= BACK TO TOP ============================================= */ #back-to-top { position: fixed; right: 18px; /* Centrado vertical: abajo a la derecha vive Meti (chat). */ top: 50%; width: 46px; height: 46px; border-radius: 9999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 10px)); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease, background .18s ease, border-color .18s ease; } html[data-theme="light"] #back-to-top { box-shadow: 0 18px 60px rgba(11, 11, 16, 0.16); } #back-to-top svg { width: 18px; height: 18px; } #back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(-50%); pointer-events: auto; } #back-to-top:hover { background: var(--surface-2); border-color: rgba(124, 58, 237, 0.45); transform: translateY(calc(-50% - 1px)); } #back-to-top:active { transform: translateY(-50%); } @media (max-width: 420px) { #back-to-top { right: 14px; width: 44px; height: 44px; } } /* ============================================= ACCESSIBILITY ============================================= */ /* Focus states: make keyboard navigation visible */ :where(a, button, [role="button"], input, select, textarea, summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 4px var(--focus-ring-2); } /* High contrast mode */ html[data-a11y-contrast="high"] { --muted: rgba(255, 255, 255, 0.86); --muted-2: rgba(255, 255, 255, 0.78); --muted-3: rgba(255, 255, 255, 0.62); --border: rgba(255, 255, 255, 0.18); --border-strong: rgba(255, 255, 255, 0.26); --surface: rgba(255, 255, 255, 0.06); --surface-2: rgba(255, 255, 255, 0.10); } html[data-theme="light"][data-a11y-contrast="high"] { --muted: rgba(11, 11, 16, 0.86); --muted-2: rgba(11, 11, 16, 0.78); --muted-3: rgba(11, 11, 16, 0.62); --border: rgba(11, 11, 16, 0.22); --border-strong: rgba(11, 11, 16, 0.30); --surface: rgba(11, 11, 16, 0.06); --surface-2: rgba(11, 11, 16, 0.10); } /* Reduce motion (manual toggle) */ html[data-a11y-motion="reduced"] * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Reduce motion (system preference), unless user forced "full" */ @media (prefers-reduced-motion: reduce) { html:not([data-a11y-motion="full"]) * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Show elements that rely on JS-triggered animation classes */ html:not([data-a11y-motion="full"]) .sparkline-path { stroke-dashoffset: 0 !important; } html:not([data-a11y-motion="full"]) .step-connector { transform: scaleX(1) !important; } html:not([data-a11y-motion="full"]) .step-number { opacity: 1 !important; } html:not([data-a11y-motion="full"]) .hero-line { opacity: 1 !important; transform: none !important; } } /* Color vision deficiency filters (applied via hidden SVG filters in HTML) */ html[data-cvd="protanopia"] body, html[data-cvd="deuteranopia"] body, html[data-cvd="tritanopia"] body { /* Avoid `transform` here: it breaks `position: fixed` descendants (nav). */ will-change: filter; } html[data-cvd="protanopia"] body { filter: url(#cvd-protanopia); } html[data-cvd="deuteranopia"] body { filter: url(#cvd-deuteranopia); } html[data-cvd="tritanopia"] body { filter: url(#cvd-tritanopia); } /* Accessibility panel UI */ .a11y-btn { width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .a11y-btn:hover { background: var(--surface-2); color: var(--text); border-color: rgba(124, 58, 237, 0.45); transform: translateY(-1px); } .a11y-btn svg { width: 16px; height: 16px; } .a11y-popover { position: absolute; top: 56px; right: 0; width: min(340px, calc(100vw - 24px)); background: rgba(8, 8, 10, 0.96); border: 1px solid var(--border-strong); border-radius: 16px; padding: 14px; box-shadow: 0 28px 120px rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); z-index: 9999; } html[data-theme="light"] .a11y-popover { background: rgba(255, 255, 255, 0.97); box-shadow: 0 28px 120px rgba(11, 11, 16, 0.18); } .a11y-popover[hidden] { display: none !important; } .a11y-popover h3 { font-size: 13px; letter-spacing: .08em; font-weight: 800; color: var(--muted); margin-bottom: 10px; } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); } html[data-theme="light"] .a11y-row { background: rgba(11, 11, 16, 0.05); border: 1px solid rgba(11, 11, 16, 0.12); } .a11y-row + .a11y-row { margin-top: 10px; } .a11y-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .a11y-label strong { font-size: 13px; color: var(--text); font-weight: 700; } .a11y-label span { font-size: 12px; color: var(--muted-2); line-height: 1.35; } .a11y-select { appearance: none; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.10); color: var(--text); color-scheme: dark; padding: 8px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; cursor: pointer; } html[data-theme="light"] .a11y-select { background: rgba(11, 11, 16, 0.06); color-scheme: light; } /* Fix native dropdown (options) readability */ .a11y-select option { background-color: #0B0B10; color: #FAFAFA; } html[data-theme="light"] .a11y-select option { background-color: #FFFFFF; color: #0B0B10; } .a11y-toggle { width: 46px; height: 28px; border-radius: 9999px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.10); position: relative; cursor: pointer; flex-shrink: 0; } html[data-theme="light"] .a11y-toggle { background: rgba(11, 11, 16, 0.06); } .a11y-toggle::after { content: ""; position: absolute; top: 50%; left: 3px; width: 22px; height: 22px; border-radius: 9999px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.22); transition: transform .18s ease, background .18s ease; } .a11y-toggle[aria-checked="true"] { border-color: rgba(124, 58, 237, 0.55); background: rgba(124, 58, 237, 0.22); } .a11y-toggle[aria-checked="true"]::after { transform: translate(18px, -50%); background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(244, 167, 187, 0.7)); } .a11y-actions { display: flex; gap: 10px; margin-top: 12px; } .a11y-reset { flex: 1; border: 1px solid var(--border-strong); border-radius: 12px; background: transparent; color: var(--muted); font-weight: 650; font-size: 12px; padding: 10px 12px; cursor: pointer; } .a11y-reset:hover { color: var(--text); background: var(--surface); border-color: rgba(124, 58, 237, 0.35); } /* ============================================= FOOTER ============================================= */ .footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .footer-brand { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .footer-copyright { color: var(--muted-3); font-size: 13px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .footer-company { font-size: 12px; color: var(--muted-3); letter-spacing: 0.02em; } /* ============================================= SCROLL PROGRESS BAR ============================================= */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--purple), var(--purple-light), var(--pink)); z-index: 9999; transition: width 0.1s linear; box-shadow: 0 0 8px rgba(124, 58, 237, 0.6); } /* ============================================= NOISE TEXTURE ============================================= */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; opacity: .4; } html[data-theme="light"] body::before { opacity: .24; } html[data-theme="light"] body { background: radial-gradient(1200px 520px at 18% -10%, rgba(124, 58, 237, 0.12), transparent 55%), radial-gradient(1000px 520px at 88% 10%, rgba(244, 167, 187, 0.12), transparent 55%), var(--bg); } /* ============================================= GLOW ORBS ============================================= */ .orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .orb-purple { background: radial-gradient(circle, rgba(124, 58, 237, 0.4), transparent 70%); animation: orbDriftPurple 12s var(--ease-in-out) infinite; } .orb-pink { background: radial-gradient(circle, rgba(244, 167, 187, 0.3), transparent 70%); animation: orbDriftPink 16s var(--ease-in-out) infinite; } /* ============================================= GRADIENT TEXT ============================================= */ .gradient-text { background: linear-gradient(135deg, var(--pink) 0%, #FFFFFF 25%, var(--purple) 55%, var(--pink) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: textShimmer 5s var(--ease-in-out) infinite; } @keyframes textShimmer { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } } .gradient-brand { background: linear-gradient(135deg, var(--purple), var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================= NAV ============================================= */ .nav-blur { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); transition: background var(--dur-normal) var(--ease-out-cubic), border-color var(--dur-normal) var(--ease-out-cubic), box-shadow var(--dur-normal) var(--ease-out-cubic); } .nav-blur.nav-scrolled { background: rgba(5, 5, 5, 0.96); border-bottom-color: rgba(255, 255, 255, 0.10); box-shadow: 0 4px 32px rgba(0, 0, 0, 0.45); } html[data-theme="light"] .nav-blur.nav-scrolled { background: rgba(251, 246, 242, 0.98); box-shadow: 0 4px 32px rgba(11, 11, 16, 0.10); } .nav-scrolled .nav-brand img, .nav-scrolled .brand-mark { filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.45)); transition: filter var(--dur-normal) var(--ease-out-cubic); } /* Brand logo (wordmark + isologo) */ .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { width: 32px; height: 32px; display: block; } .brand-word { height: 18px; width: auto; display: block; } .brand-word--on-light { display: none; } html[data-theme="light"] .brand-word--on-dark { display: none; } html[data-theme="light"] .brand-word--on-light { display: block; } /* Theme toggle button */ .theme-toggle { width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .theme-toggle:hover { background: var(--surface-2); color: var(--text); border-color: rgba(124, 58, 237, 0.45); transform: translateY(-1px); } .theme-toggle svg { width: 16px; height: 16px; } /* ============================================= NAV / LINK HOVERS (no inline JS) ============================================= */ .nav-link.is-hover { color: #FFFFFF !important; } .footer-link.is-hover { color: rgba(255, 255, 255, 0.7) !important; } .lang-btn:hover { background: rgba(255, 255, 255, 0.16) !important; color: #FFFFFF !important; border-color: rgba(124, 58, 237, 0.48) !important; } /* ============================================= NAV LAYOUT (remove inline styles) ============================================= */ .svg-offscreen { position: absolute; left: -9999px; top: -9999px; } .nav-shell { width: 100%; } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; } .nav-brand { text-decoration: none; flex-shrink: 0; z-index: 1; } /* Bigger logo in navbar (2x) */ .nav-brand .brand-word { height: 36px; /* base is 18px */ } .nav-links, .nav-ctas, .nav-mobile { display: flex; align-items: center; } .nav-links { gap: 3px; padding: 5px; border-radius: 9999px; background: var(--surface); border: 1px solid var(--border-subtle); backdrop-filter: blur(8px); } .nav-ctas { gap: 12px; } .nav-mobile { gap: 10px; } .nav-link { font-size: 13.5px; font-weight: 500; color: var(--muted-2); text-decoration: none; position: relative; padding: 7px 15px; border-radius: 9999px; white-space: nowrap; transition: color var(--dur-normal) var(--ease-out-cubic), background var(--dur-normal) var(--ease-out-cubic); } .nav-link:hover { color: var(--text); background: var(--surface-2); } .nav-link::after { content: ''; position: absolute; bottom: -3px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--purple), var(--pink)); border-radius: 1px; transform: scaleX(0); transform-origin: center; transition: transform var(--dur-normal) var(--ease-out-cubic), opacity var(--dur-normal) var(--ease-out-cubic); opacity: 0; } .nav-link--active { color: #FFFFFF !important; background: var(--surface-2); } .nav-link::after { display: none !important; } .nav-link--active::after { transform: scaleX(1); opacity: 1; } .lang-btn { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; position: relative; transition: background 0.2s, color 0.2s, border-color 0.2s; } .lang-btn--mobile { width: 100%; justify-content: center; padding: 8px 16px; } #lang-flag { transition: transform 0.3s; } #lang-label { margin-left: 2px; transition: color 0.3s; } #lang-anim { margin-left: 3px; transition: transform 0.35s cubic-bezier(.4, 2, .6, 1); } .nav-icon-btn { margin-right: 6px; } .nav-popover-wrap { position: relative; } .nav-login { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.7); text-decoration: none; padding: 8px 20px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; } .btn-glow[data-size="nav-cta"] { font-size: 14px; padding: 10px 20px; gap: 6px; } .nav-mobile-cta { font-size: 13px; font-weight: 600; color: #FFFFFF; text-decoration: none; padding: 8px 16px; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); border-radius: 9999px; white-space: nowrap; } .nav-mobile-toggle { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .nav-mobile-icon-close { display: none; } .mobile-menu-inner { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 4px; } .mobile-menu-link { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 15px; padding: 12px; border-radius: 8px; display: block; } .mobile-menu-tools { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 8px; } .mobile-menu-row { margin-bottom: 4px; display: flex; justify-content: center; } .mobile-menu-row:first-child { margin-bottom: 12px; } .theme-toggle--mobile { width: 100%; justify-content: center; gap: 10px; height: 44px; border-radius: 9999px; } .mobile-theme-label { font-weight: 600; } .nav-popover-wrap--mobile { margin-bottom: 4px; display: flex; justify-content: center; } .mobile-login { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 15px; padding: 12px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.15); text-align: center; display: block; } .mobile-register { color: #FFFFFF; text-decoration: none; font-size: 15px; font-weight: 700; padding: 14px; border-radius: 9999px; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); text-align: center; display: block; } /* ============================================= GLASS CARDS ============================================= */ .glass { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: all .3s ease; } .glass:hover { background: var(--surface-2); border-color: rgba(124, 58, 237, 0.3); transform: translateY(-2px); box-shadow: 0 20px 60px rgba(124, 58, 237, 0.12); } /* Feature card icon hover */ .feature-icon { transition: transform var(--dur-normal) var(--ease-out-cubic), filter var(--dur-normal) var(--ease-out-cubic); } .glass:hover .feature-icon { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.6)); } /* Integration card icon hover */ .integration-icon { transition: transform var(--dur-normal) var(--ease-spring); display: inline-flex; } .glass:hover .integration-icon { transform: scale(1.18) rotate(-4deg); } /* Testimonial gradient border on hover */ .testimonial-card { transition: all var(--dur-normal) var(--ease-out-cubic); } .testimonial-card:hover { border-color: transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(244, 167, 187, 0.4)) border-box; border: 1px solid transparent; } /* ============================================= TESTIMONIALS ============================================= */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .testimonial-card { padding: 26px; display: flex; flex-direction: column; min-height: 260px; } .testimonial-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .testimonial-kicker { font-size: 12px; font-weight: 750; letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; } .testimonial-metrics { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .testimonial-pill { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 9999px; border: 1px solid rgba(124, 58, 237, 0.35); background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(244, 167, 187, 0.10)); color: rgba(255, 255, 255, 0.82); white-space: nowrap; } html[data-theme="light"] .testimonial-pill { color: rgba(11, 11, 16, 0.80); border-color: rgba(96, 56, 189, 0.22); background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(244, 167, 187, 0.10)); } .testimonial-quote { color: var(--text); font-size: 14px; line-height: 1.7; letter-spacing: -0.005em; margin: 0 0 18px; } .testimonial-footer { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); } .testimonial-avatar { width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(167, 139, 250, 0.7)); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: white; flex-shrink: 0; box-shadow: 0 18px 40px rgba(124, 58, 237, 0.18); } .testimonial-avatar--pink { background: linear-gradient(135deg, rgba(244, 167, 187, 0.9), rgba(124, 58, 237, 0.65)); box-shadow: 0 18px 40px rgba(244, 167, 187, 0.14); } .testimonial-avatar--green { background: linear-gradient(135deg, rgba(52, 211, 153, 0.85), rgba(124, 58, 237, 0.6)); box-shadow: 0 18px 40px rgba(52, 211, 153, 0.12); } .testimonial-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .testimonial-name { font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .testimonial-why { font-size: 12px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================= BUTTONS ============================================= */ .btn-glow { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); border-radius: 9999px; color: white; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: all .3s ease; display: inline-flex; align-items: center; position: relative; overflow: hidden; } .btn-glow::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60% ); background-size: 200% 100%; background-position: -200% center; border-radius: inherit; pointer-events: none; transition: background-position 0s; } .btn-glow:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.5); } .btn-glow:hover::after { background-position: 200% center; transition: background-position 0.5s var(--ease-out-cubic); } .btn-glow:active { transform: scale(0.97) translateY(0); transition-duration: var(--dur-fast); } .btn-glow.hero-cta-pulse { animation: ctaPulseGlow 2.5s var(--ease-in-out) 1.2s 2; } .btn-outline { border: 1px solid var(--border-strong); border-radius: 9999px; color: var(--muted); font-weight: 500; text-decoration: none; cursor: pointer; background: transparent; transition: all .3s ease; display: inline-flex; align-items: center; } .btn-outline:hover { border-color: rgba(124, 58, 237, 0.5); color: var(--text); background: rgba(124, 58, 237, 0.1); } .btn-outline:active { transform: scale(0.97); transition-duration: var(--dur-fast); } /* ============================================= PLATFORM PILLS (TICKER) ============================================= */ .platform-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 9999px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: all .3s; } .platform-pill:hover { background: rgba(124, 58, 237, 0.15); border-color: rgba(124, 58, 237, 0.4); color: var(--text); } .platform-pill img, .platform-pill svg { width: 18px; height: 18px; flex-shrink: 0; } /* ============================================= TICKER ============================================= */ .ticker-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .ticker { display: flex; gap: 12px; animation: ticker 30s linear infinite; width: max-content; } .ticker:hover { animation-play-state: paused; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================= SCROLL ANIMATIONS ============================================= */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out-cubic), transform var(--dur-reveal) var(--ease-out-cubic); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } .reveal-delay-4 { transition-delay: .4s; } .reveal-delay-5 { transition-delay: .5s; } /* Data-driven stagger: JS sets --stagger-i per child */ .reveal-stagger { transition-delay: calc(var(--stagger-i, 0) * 80ms); } /* ============================================= DASHBOARD MOCKUP ============================================= */ .mockup-glow { box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.2), 0 40px 120px rgba(124, 58, 237, 0.2), 0 80px 200px rgba(0, 0, 0, 0.8); border-radius: 16px; overflow: hidden; } /* ============================================= METRIC BARS ============================================= */ .metric-bar { height: 4px; border-radius: 9999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } html[data-theme="light"] .metric-bar { background: rgba(11, 11, 16, 0.10); } .metric-bar-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--purple), var(--pink)); animation: fillBar 1.5s ease forwards; transform-origin: left; } @keyframes fillBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============================================= PREMIUM ANIMATION KEYFRAMES ============================================= */ @keyframes orbDriftPurple { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.06); } 66% { transform: translate(-20px, 15px) scale(0.97); } 100% { transform: translate(0, 0) scale(1); } } @keyframes orbDriftPink { 0% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-25px, 20px) scale(1.05); } 75% { transform: translate(18px, -15px) scale(0.96); } 100% { transform: translate(0, 0) scale(1); } } @keyframes mockupFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } } @keyframes shimmerSweep { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes ctaPulseGlow { 0% { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.4); } 50% { box-shadow: 0 8px 48px rgba(124, 58, 237, 0.75), 0 0 80px rgba(244, 167, 187, 0.25); } 100% { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.4); } } @keyframes featuredPulse { 0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.0), 0 20px 60px rgba(124, 58, 237, 0.15); } 50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.12), 0 20px 80px rgba(124, 58, 237, 0.28); } 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.0), 0 20px 60px rgba(124, 58, 237, 0.15); } } @keyframes stepNumberIn { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes connectorDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes heroLineIn { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes badgeIn { 0% { opacity: 0; transform: scale(0.85) translateY(10px); } 70% { transform: scale(1.04) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes sparklineDraw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } } @keyframes alertPingActive { 0% { transform: scale(1); opacity: 0.8; } 75% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } } @keyframes modalScaleIn { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Mockup float (added by JS after entrance) — desktop only, avoid overriding mobile scale */ @media (min-width: 769px) { .mockup-container.float-active { animation: mockupFloat 4s var(--ease-in-out) infinite; } } /* Step connector draw-in */ .step-connector { transform-origin: left center; } .step-connector.draw-active { animation: connectorDraw 0.8s var(--ease-out-cubic) forwards; } /* Step number spring-in */ .step-number { opacity: 0; } .step-number.spring-in { animation: stepNumberIn 0.5s var(--ease-spring) forwards; } /* SVG sparkline draw-in */ .sparkline-path { stroke-dasharray: 200; stroke-dashoffset: 200; } .sparkline-path.draw-active { animation: sparklineDraw 1.2s var(--ease-out-quart) forwards; } /* Alert ping (re-enabled, controlled) */ .alert-ping { animation: alertPingActive 2s var(--ease-out-cubic) infinite; } /* Hero h1 line entrance */ .hero-line { display: block; opacity: 0; transform: translateY(32px); } .hero-line.line-in { animation: heroLineIn var(--dur-slow) var(--ease-out-quart) forwards; } /* Modal scale-in */ #exitModal[data-animate="in"] #exitModalPanel { animation: modalScaleIn 0.3s var(--ease-spring) forwards; } /* Featured pricing card pulse */ .pricing-featured-pulse { animation: featuredPulse 3s var(--ease-in-out) infinite; } /* ============================================= AI BADGE ============================================= */ .ai-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(244, 167, 187, 0.1)); border: 1px solid rgba(124, 58, 237, 0.3); border-radius: 9999px; font-size: 12px; font-weight: 600; color: var(--badge-purple); letter-spacing: .05em; } /* ============================================= PING ANIMATION ============================================= */ .alert-ping { /* Disabled by default to avoid "parpadeo" perception */ animation: none; } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } /* ============================================= STAT NUMBER ============================================= */ .stat-number { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 1; } /* ============================================= FAQ ACCORDION ============================================= */ .faq-content { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-content.open { max-height: 300px; } .faq-icon { transition: transform .3s ease; } .faq-icon.open { transform: rotate(45deg); } /* ============================================= MOBILE NAV MENU ============================================= */ #mobile-menu { display: none; border-top: 1px solid var(--nav-border); background: rgba(5, 5, 5, 0.98); backdrop-filter: blur(20px); max-height: calc(100vh - var(--nav-h)); overflow: auto; -webkit-overflow-scrolling: touch; } #mobile-menu.open { display: block; } html[data-theme="light"] #mobile-menu { background: rgba(247, 247, 251, 0.96); } /* Light theme: fix inline whites/rgba on key text blocks */ html[data-theme="light"] nav a, html[data-theme="light"] nav button, html[data-theme="light"] nav span, html[data-theme="light"] nav svg { color: var(--muted) !important; } html[data-theme="light"] nav a:hover, html[data-theme="light"] nav button:hover, html[data-theme="light"] nav span:hover { color: var(--text) !important; } html[data-theme="light"] .ai-badge { color: rgba(44, 16, 90, 0.80); } html[data-theme="light"] .nav-blur a.btn-glow, html[data-theme="light"] #nav-mobile a { color: #FFFFFF !important; } html[data-theme="light"] p { color: var(--muted-2) !important; } html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3 { color: var(--text) !important; } /* Cualquier sección con tinte negro inline (ticker .4, how-it-works .2, FAQ .15) se ve como un bloque gris sucio sobre crema — remapear a superficie clara. */ html[data-theme="light"] section[style*="background:rgba(0,0,0"] { background: var(--ticker-bg) !important; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; } /* Light theme: aggressively override common inline colors (keeps CTAs white) */ html[data-theme="light"] [style*="color:rgba(255,255,255"], html[data-theme="light"] [style*="color: rgba(255,255,255"] { color: var(--muted-2) !important; } html[data-theme="light"] [style*="color:white"], html[data-theme="light"] [style*="color: white"] { color: var(--text) !important; } html[data-theme="light"] a.btn-glow, html[data-theme="light"] a.btn-glow * { color: #FFFFFF !important; } /* Light theme: dashboard mockup readability */ html[data-theme="light"] .mockup-glow { box-shadow: 0 0 0 1px rgba(11, 11, 16, 0.10), 0 40px 120px rgba(11, 11, 16, 0.12), 0 80px 200px rgba(11, 11, 16, 0.08) !important; } html[data-theme="light"] .mockup-container [style*="background:#111827"], html[data-theme="light"] .mockup-container [style*="background:#030712"], html[data-theme="light"] .mockup-container [style*="background:#000"] { background: rgba(255, 255, 255, 0.66) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } html[data-theme="light"] .mockup-container [style*="border:1px solid rgba(255,255,255"], html[data-theme="light"] .mockup-container [style*="border-bottom:1px solid rgba(255,255,255"], html[data-theme="light"] .mockup-container [style*="border-right:1px solid rgba(255,255,255"] { border-color: var(--border) !important; } html[data-theme="light"] .mockup-container [style*="color:var(--green)"] { color: #0F766E !important; } /* Light theme: cards/pills shouldn't look "gris raro" */ html[data-theme="light"] .glass, html[data-theme="light"] .platform-pill { background: rgba(255, 250, 247, 0.52) !important; border-color: var(--border) !important; box-shadow: 0 10px 40px rgba(88, 42, 160, 0.06); } html[data-theme="light"] .glass:hover, html[data-theme="light"] .platform-pill:hover { background: rgba(255, 250, 247, 0.72) !important; box-shadow: 0 18px 60px rgba(88, 42, 160, 0.08); } /* Exit-intent (retention) modal — its panel uses inline dark colors that render black-on-cream in light mode. Inline styles force !important here. The CTA keeps its white text (sits on a purple gradient). */ html[data-theme="light"] #exitModalPanel { background: linear-gradient(135deg, var(--surface-2), var(--bg)) !important; border-color: var(--border) !important; box-shadow: 0 40px 120px rgba(11, 11, 16, 0.18) !important; } html[data-theme="light"] #exitModalPanel [style*="color:white"]:not(a) { color: var(--text) !important; } html[data-theme="light"] #exitModalPanel p { color: var(--muted-2) !important; } html[data-theme="light"] #exitModalPanel button[data-action="close-exit-modal"]:first-of-type { background: rgba(11, 11, 16, 0.06) !important; color: var(--muted) !important; } html[data-theme="light"] #exitModalPanel button:last-of-type { color: var(--muted-3) !important; } /* CTA sits on its own purple gradient — keep its label white. */ html[data-theme="light"] #exitModalPanel a { color: #ffffff !important; } /* Light theme: botones secundarios (outline) — el border lavanda .22 + texto muted se perdían sobre crema. Subir contraste sin cambiar la jerarquía. */ html[data-theme="light"] .btn-outline { color: var(--text); border-color: rgba(88, 42, 160, 0.34); background: rgba(255, 255, 255, 0.55); } html[data-theme="light"] .btn-outline:hover { border-color: rgba(124, 58, 237, 0.55); background: rgba(124, 58, 237, 0.10); } /* Light theme: .gradient-text tiene un stop #FFFFFF que lava el texto sobre fondo claro — usar una rampa pink→purple sin blanco. */ html[data-theme="light"] .gradient-text { background: linear-gradient(135deg, var(--pink-strong, #E891A8) 0%, #B23A78 22%, #6D28D9 55%, #9D4EDD 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Light theme: footer — border inline blanco + isologo SVG con fill blanco. */ html[data-theme="light"] footer[style*="border-top"] { border-top-color: var(--border) !important; } html[data-theme="light"] .brand-mark { filter: invert(1); } html[data-theme="light"] .footer-link.is-hover { color: var(--text) !important; } /* Light theme: hover del selector de idioma (hardcodea blancos !important) */ html[data-theme="light"] .lang-btn:hover { background: rgba(11, 11, 16, 0.08) !important; color: var(--text) !important; border-color: rgba(124, 58, 237, 0.45) !important; } /* Light theme: knob del toggle de accesibilidad (blanco .22 era invisible) */ html[data-theme="light"] .a11y-toggle::after { background: rgba(11, 11, 16, 0.35); } html[data-theme="light"] .a11y-toggle[aria-checked="true"]::after { background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(244, 167, 187, 0.85)); } /* Light theme: hamburger/cerrar del nav mobile — el SVG trae stroke="white" hardcodeado y el botón fondo blanco translúcido: invisibles sobre crema. */ html[data-theme="light"] .nav-mobile-toggle { background: rgba(11, 11, 16, 0.05); border-color: var(--border-strong); } html[data-theme="light"] .nav-mobile-toggle svg { stroke: var(--text); } /* Light theme: CTA del menú mobile sobre gradiente púrpura — mantener blanco (la regla genérica de nav lo pisaba con var(--muted)). */ html[data-theme="light"] .mobile-register, html[data-theme="light"] .mobile-register:hover, html[data-theme="light"] .nav-mobile-cta, html[data-theme="light"] .nav-mobile-cta:hover { color: #FFFFFF !important; } /* ============================================= ENTERPRISE ONBOARDING MODAL ============================================= */ #enterpriseModal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; } #enterpriseModal.is-open { display: flex; } .ent-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-theme="light"] .ent-overlay { background: rgba(11, 11, 16, 0.45); } .ent-panel { position: relative; z-index: 10; max-width: 560px; width: calc(100% - 32px); max-height: calc(100vh - 48px); overflow: auto; background: linear-gradient(135deg, #0F0520, #150528); border: 1px solid rgba(124, 58, 237, 0.40); border-radius: 24px; padding: 32px 28px; box-shadow: 0 40px 120px rgba(124, 58, 237, 0.25); } html[data-theme="light"] .ent-panel { background: linear-gradient(135deg, var(--surface-2), var(--bg)); border-color: var(--border-strong); box-shadow: 0 40px 120px rgba(11, 11, 16, 0.18); } .ent-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.08); color: var(--muted-2); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } html[data-theme="light"] .ent-close { background: rgba(11, 11, 16, 0.06); } .ent-title { font-size: 1.45rem; font-weight: 900; color: var(--text); margin-bottom: 6px; } .ent-sub { color: var(--muted-2); font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; } .ent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; margin-bottom: 18px; } .ent-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ent-field--full { grid-column: 1 / -1; } .ent-field span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); } .ent-field input, .ent-field select, .ent-field textarea { width: 100%; font-family: inherit; font-size: 13.5px; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; outline: none; transition: border-color .2s ease, background .2s ease; } html[data-theme="light"] .ent-field input, html[data-theme="light"] .ent-field select, html[data-theme="light"] .ent-field textarea { background: rgba(255, 255, 255, 0.75); } .ent-field input::placeholder, .ent-field textarea::placeholder { color: var(--muted-3); } .ent-field input:focus, .ent-field select:focus, .ent-field textarea:focus { border-color: rgba(124, 58, 237, 0.65); background: rgba(124, 58, 237, 0.07); } .ent-field select { appearance: none; cursor: pointer; color-scheme: dark; } html[data-theme="light"] .ent-field select { color-scheme: light; } .ent-field select option { background-color: #0B0B10; color: #FAFAFA; } html[data-theme="light"] .ent-field select option { background-color: #FFFFFF; color: #0B0B10; } .ent-field textarea { resize: vertical; min-height: 70px; } .ent-field .ent-invalid, .ent-field input.ent-invalid, .ent-field select.ent-invalid, .ent-field textarea.ent-invalid { border-color: rgba(255, 77, 106, 0.65) !important; } .ent-submit { width: 100%; justify-content: center; padding: 14px; font-size: 15px; } .ent-note { margin-top: 12px; font-size: 11.5px; line-height: 1.55; color: var(--muted-3) !important; text-align: center; } @media (max-width: 560px) { .ent-grid { grid-template-columns: 1fr; } .ent-panel { padding: 26px 18px; } } /* ============================================= RESPONSIVE — MOBILE FIRST ============================================= */ @media (max-width: 767px) { #nav-links, #nav-ctas { display: none !important; } #nav-mobile { display: flex !important; } .nav-inner { padding: 0 16px; gap: 12px; } .nav-mobile { gap: 8px; } .nav-mobile-cta { padding: 8px 12px; font-size: 12px; } .hero-section { overflow: hidden; padding-top: 80px; padding-bottom: 40px; } .hero-section h1 { font-size: clamp(2rem, 8.5vw, 3rem) !important; line-height: 1.08 !important; } .hero-section .hero-ctas { flex-direction: column; align-items: center; gap: 12px; } .hero-section .hero-ctas a { width: 100%; max-width: 280px; justify-content: center; } .orb { display: none; } .mockup-container { transform: scale(0.88); transform-origin: top center; margin-left: -6%; margin-right: -6%; width: 112%; } .mockup-platforms { display: none !important; } section { padding-left: 0 !important; padding-right: 0 !important; } .section-inner { padding-left: 20px !important; padding-right: 20px !important; } .grid-features { grid-template-columns: 1fr !important; } .grid-pricing { grid-template-columns: 1fr !important; } .grid-integ { grid-template-columns: repeat(2, 1fr) !important; } .grid-steps { grid-template-columns: 1fr !important; gap: 32px !important; } .grid-stats { grid-template-columns: repeat(2, 1fr) !important; } .testimonials-grid { grid-template-columns: 1fr !important; } .section-title { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; } .footer-inner { gap: 20px !important; } .footer-links { gap: 16px !important; } .step-connector { display: none !important; } } @media (min-width: 768px) { #nav-mobile { display: none !important; } #nav-links, #nav-ctas { display: flex !important; } } @media (max-width: 400px) { .nav-brand .brand-word { height: 30px; } .nav-mobile-cta { display: none; } .mockup-container { transform: scale(0.78); margin-left: -11%; margin-right: -11%; width: 122%; } .hero-section h1 { font-size: clamp(1.7rem, 8vw, 2.2rem) !important; } } /* ============================================= DATA TICKER STRIP ============================================= */ @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .data-ticker { height: 28px; overflow: hidden; display: flex; align-items: center; background: rgba(124, 58, 237, 0.05); border-top: 1px solid rgba(124, 58, 237, 0.12); border-bottom: 1px solid rgba(124, 58, 237, 0.12); opacity: 1; transition: height 0.4s var(--ease-out-cubic), opacity 0.3s var(--ease-out-cubic), border-color 0.3s; } .data-ticker.ticker-hidden { height: 0; opacity: 0; border-color: transparent; } .data-ticker-track { display: flex; align-items: center; white-space: nowrap; will-change: transform; animation: tickerScroll 32s linear infinite; } .data-ticker-track:hover { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; gap: 5px; padding: 0 20px; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.01em; } .ticker-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .ticker-sep { display: inline-block; width: 6px; } .ticker-value { color: rgba(255, 255, 255, 0.72); font-weight: 600; } .ticker-up { color: var(--green-bright); } .ticker-down { color: var(--red); } .ticker-divider { color: rgba(255, 255, 255, 0.18); font-size: 12px; padding: 0 4px; flex-shrink: 0; } /* Light theme overrides */ html[data-theme="light"] .data-ticker { background: rgba(124, 58, 237, 0.04); border-color: rgba(124, 58, 237, 0.10); } html[data-theme="light"] .ticker-item { color: rgba(11, 11, 16, 0.45); } html[data-theme="light"] .ticker-value { color: rgba(11, 11, 16, 0.72); } html[data-theme="light"] .ticker-divider { color: rgba(11, 11, 16, 0.18); } html[data-theme="light"] .nav-link--active { color: var(--text) !important; } /* Mobile: smaller font */ @media (max-width: 767px) { .ticker-item { font-size: 10px; padding: 0 14px; gap: 4px; } .ticker-dot { width: 4px; height: 4px; } } /* ============================================= MOCKUP LIVE REFRESH FLASH ============================================= */ @keyframes metricFlash { 0% { filter: none; } 15% { filter: brightness(1.8) drop-shadow(0 0 6px rgba(52, 211, 153, 0.65)); } 55% { filter: brightness(1.3) drop-shadow(0 0 3px rgba(52, 211, 153, 0.3)); } 100% { filter: none; } } .mockup-metric-value.live-flash, .mk-tile-v.live-flash { animation: metricFlash 0.75s var(--ease-out-cubic) forwards; } /* ============================================= HERO MOCKUP — 3D TILT (pointer-driven, desktop) ============================================= */ @media (min-width: 1024px) and (hover: hover) { .mockup-container { perspective: 1400px; } .mockup-container .mk { transform-style: preserve-3d; will-change: transform; transition: transform .25s var(--ease-out-cubic), box-shadow .25s var(--ease-out-cubic); } } /* ============================================= SHOWCASE TAB TRANSITION (slide + fade) ============================================= */ .prodx-shot { transform: translateY(0); transition: opacity var(--dur-normal) var(--ease-out-cubic), transform var(--dur-normal) var(--ease-out-cubic); } .prodx-shot.is-switching { opacity: 0; transform: translateY(10px); } /* ============================================= RENDER PERF — skip layout/paint below the fold ============================================= */ #modulos, #integraciones, #testimonios, #pricing, #faq { content-visibility: auto; contain-intrinsic-size: auto 900px; } /* ============================================= PRODUCT SHOWCASE — real-screenshot tabs ============================================= */ .prodx-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; } .prodx-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: color var(--dur-normal) var(--ease-out-cubic), background var(--dur-normal) var(--ease-out-cubic), border-color var(--dur-normal) var(--ease-out-cubic), transform var(--dur-fast) var(--ease-out-cubic); } .prodx-tab svg { width: 17px; height: 17px; opacity: .9; } .prodx-tab:hover { color: var(--text); border-color: var(--border-strong); } .prodx-tab:active { transform: scale(.97); } .prodx-tab.is-active { color: #fff; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); border-color: transparent; box-shadow: 0 8px 28px rgba(124, 58, 237, 0.40); } .prodx-stage { display: flex; flex-direction: column; align-items: center; } .prodx-window { width: 100%; max-width: 1000px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 0 0 1px rgba(124,58,237,.18), 0 40px 120px rgba(124,58,237,.20), 0 60px 160px rgba(0,0,0,.7); } .prodx-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid var(--border); } .prodx-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted-3); } .prodx-dot:nth-child(1) { background: rgba(255, 95, 109, .8); } .prodx-dot:nth-child(2) { background: rgba(252, 211, 77, .8); } .prodx-dot:nth-child(3) { background: rgba(52, 211, 153, .8); } .prodx-url { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; padding: 6px 14px; border-radius: 9999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted-2); font-size: 12.5px; font-weight: 500; } .prodx-url svg { width: 13px; height: 13px; opacity: .7; } .prodx-shot { background: #fff; line-height: 0; } .prodx-shot img { display: block; width: 100%; height: auto; transition: opacity var(--dur-normal) var(--ease-out-cubic); } .prodx-caption { margin-top: 26px; max-width: 600px; text-align: center; font-size: 1rem; line-height: 1.6; color: var(--muted-2); } @media (max-width: 640px) { .prodx-tab { padding: 9px 14px; font-size: 13px; } .prodx-tab svg { display: none; } } /* ============================================================ Mobile nav fix — keep the hamburger toggle always reachable. When the inline "Empezar gratis" CTA renders, the brand+CTA+toggle row can exceed narrow viewports; space-between then overflows the toggle off-screen. Hide the inline CTA on phones (the mobile menu already exposes it) and pin the toggle so it never shifts out. ============================================================ */ @media (max-width: 767px) { .nav-mobile { flex-shrink: 0; gap: 8px; } .nav-mobile-toggle { flex-shrink: 0; } .nav-brand { min-width: 0; } } @media (max-width: 480px) { .nav-mobile-cta { display: none !important; } } /* ============================================================ Mobile mockups fix — the earlier scale()+width%/negative-margin trick rendered the mockup near desktop size on phones, clipping the header on the left and overflowing the KPIs on the right ("todo al margen izquierdo" + textos solapados). Render the mockups fluidly and let the internals shrink to fit the viewport. ============================================================ */ @media (max-width: 767px) { .mockup-container { transform: none !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .mk-main { padding: 14px; min-width: 0; overflow-x: auto; } .mk-head { flex-wrap: wrap; gap: 6px 10px; } .mk-head .mk-ranges, .mk-head .mk-live { order: 3; } .mk-title { font-size: 14px; } .mk-sub { font-size: 10px; } .mk-tile { padding: 11px; } .mk-tile-v { font-size: 17px; } .mk-tile.big .mk-tile-v { font-size: 23px; } .mk-bar-name { width: 58px; } } @media (max-width: 420px) { .mk-tile.big { grid-column: 1 / -1; } }