/* ============================================================ Metrix — Landing v2 ("Operations Console") ------------------------------------------------------------ Direction: technical / editorial-minimal (Linear · Vercel lineage). Replaces site.css + styles.css for the v2 page. Reuses tokens/*.css, mockups.css and wa-agent.css verbatim. What it changes vs v1 execution (the actual AI-slop): · kills the blurred "orb" gradients as a primary device · kills `.glass` blur on every card → flat, bordered surfaces with a single hairline + intentional hover · stops centering everything; introduces a real grid, a left-aligned editorial column and mono eyebrows · one accent (purple→pink) used surgically, not as bg What it keeps (brand equity): the purple→pink accent seam, the wordmark, the real product mockups (mockups.js). Tokens it overrides: --font-display → Space Grotesk (technical display) --font-sans → Geist (body w/ character) Both are linked in the page . ============================================================ */ /* ---- v2 surface + type overrides on the brand theme ---- */ :root, :root[data-theme="brand"], :root[data-theme="dark"] { --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; /* v2 canvas — deeper, cooler-neutral than v1's #050505 */ --v2-canvas: #070708; --v2-canvas-2: #0B0B0D; /* alternating band */ --v2-ink: #F7F7F8; /* primary text */ --v2-ink-2: rgba(247,247,248,0.62); /* body */ --v2-ink-3: rgba(247,247,248,0.40); /* captions */ --v2-ink-4: rgba(247,247,248,0.24); /* faint */ --v2-line: rgba(247,247,248,0.09); /* hairline border */ --v2-line-2: rgba(247,247,248,0.14); /* hover / emphasis */ --v2-surface: rgba(247,247,248,0.022); /* card fill */ --v2-surface-2: rgba(247,247,248,0.045); /* raised */ --v2-accent: #8B5CF6; /* purple, slightly lighter for dark contrast */ --v2-accent-2: #F4A7BB; /* pink seam */ --v2-accent-ink:#C4B5FD; /* accent text on dark */ --v2-danger-ink:#FDA4AF; /* rose — narrative "pain" tint (problema) */ --v2-danger-line: rgba(244,63,94,0.28); --v2-danger-bg: rgba(244,63,94,0.08); --v2-seam: linear-gradient(90deg, var(--v2-accent), var(--v2-accent-2)); --v2-seam-135: linear-gradient(135deg, var(--v2-accent), var(--v2-accent-2)); /* one radius language */ --v2-r-sm: 8px; --v2-r: 12px; --v2-r-lg: 18px; --v2-r-pill: 9999px; --v2-shell: min(1180px, 100% - 48px); --v2-shell-narrow: min(880px, 100% - 48px); --v2-ease: cubic-bezier(0.25, 1, 0.5, 1); --v2-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================ RESET / BASE ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--v2-canvas); color: var(--v2-ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Background atmosphere (z-2): intentional lighting + full-page technical grid + edge vignette for depth. Restrained accents (not an AI mesh blob). */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(1000px 560px at 86% -12%, rgba(139,92,246,0.11), transparent 58%), radial-gradient(780px 500px at -4% 4%, rgba(244,167,187,0.05), transparent 56%), linear-gradient(to right, rgba(247,247,248,0.018) 1px, transparent 1px), linear-gradient(to bottom, rgba(247,247,248,0.018) 1px, transparent 1px), radial-gradient(125% 125% at 50% 22%, transparent 48%, rgba(0,0,0,0.34)); background-size: 100% 100%, 100% 100%, 58px 58px, 58px 58px, 100% 100%; pointer-events: none; } /* Film grain (z-1): the key anti-slop texture — gives the flat canvas a tactile, analog surface so the gradients read as intentional, not generated. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.05; pointer-events: none; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: rgba(139,92,246,0.30); color: #fff; } :focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; border-radius: 4px; } /* The orbs from v1 markup still exist in some reused blocks; neutralise. */ .orb { display: none !important; } /* ---- shared layout helpers ---- */ .v2-shell { width: var(--v2-shell); margin-inline: auto; } .v2-shell-narrow { width: var(--v2-shell-narrow); margin-inline: auto; } /* ---- mono eyebrow (the signature) ---- */ .v2-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--v2-ink-3); } .v2-eyebrow::before { content: ""; width: 14px; height: 1px; background: var(--v2-accent); } .v2-eyebrow--center { justify-content: center; } /* ---- section heading ---- */ .v2-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--v2-ink); margin: 16px 0 0; } .v2-h2 .accent { background: var(--v2-seam-135); -webkit-background-clip: text; background-clip: text; color: transparent; } .v2-lead { color: var(--v2-ink-2); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.65; max-width: 46ch; margin: 18px 0 0; } /* ============================================================ REVEAL (contract: main.js adds `.visible`; --stagger-i) This is the page-invisible trap — keep these rules exact. ============================================================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-reveal, 600ms) var(--v2-ease), transform var(--dur-reveal, 600ms) var(--v2-ease); will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: none; } .reveal-stagger { transition-delay: calc(var(--stagger-i, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ NAV ============================================================ */ /* Glassmorphism floating nav (adaptado de 21st.dev akashsingh890901 glassmorphism- navigation): el blur/glass vive en el pill .nav-inner, no en una barra full-width. */ .nav-shell { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: 14px; pointer-events: none; /* la franja transparente no intercepta clicks; el pill sí */ } .nav-shell .nav-inner, .nav-shell #mobile-menu { pointer-events: auto; } /* blur ya no va en la barra completa; el glass es el pill */ .nav-blur { backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-inner { width: var(--v2-shell); max-width: 1160px; margin-inline: auto; height: 88px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 12px 0 22px; border-radius: var(--v2-r-pill); border: 1px solid rgba(247,247,248,0.10); background: rgba(17,17,22,0.45); box-shadow: 0 10px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(247,247,248,0.08); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); transition: background .3s var(--v2-ease), border-color .3s var(--v2-ease), box-shadow .3s var(--v2-ease); } /* al scrollear, el cristal se densifica un punto */ .nav-scrolled .nav-inner { background: rgba(12,12,16,0.62); border-color: rgba(247,247,248,0.13); box-shadow: 0 14px 40px rgba(0,0,0,0.42), inset 0 1px 0 rgba(247,247,248,0.10); } .nav-brand { display: inline-flex; align-items: center; } .brand-word { height: 66px; width: auto; } /* dark page → show the light (white) wordmark */ .brand-word--on-dark { display: block; } .brand-word--on-light { display: none; } .nav-links { display: flex; align-items: center; gap: 4px; /* in-flow centered region: fills the space between brand and CTAs so the menu stays centered without absolutely overlapping the right controls (which intercepted clicks on the theme toggle / v1 switch). */ flex: 1; justify-content: center; min-width: 0; } .nav-link { font-size: 13.5px; font-weight: 450; color: var(--v2-ink-3); padding: 8px 14px; border-radius: var(--v2-r-pill); transition: color var(--v2-ease) .2s, background var(--v2-ease) .2s; } .nav-link:hover { color: var(--v2-ink); background: rgba(139,92,246,0.10); } .nav-link--active { color: var(--v2-ink); background: rgba(139,92,246,0.12); } .nav-ctas { display: flex; align-items: center; gap: 8px; } .nav-tool-btn, .nav-icon-btn, .a11y-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 34px; padding: 0 9px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm); background: var(--v2-surface); color: var(--v2-ink-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; cursor: pointer; transition: color .2s var(--v2-ease), border-color .2s var(--v2-ease), background .2s var(--v2-ease); } .nav-tool-btn:hover, .nav-icon-btn:hover, .a11y-btn:hover { color: var(--v2-ink); border-color: var(--v2-line-2); background: var(--v2-surface-2); } .nav-icon-btn svg, .a11y-btn svg { width: 16px; height: 16px; } /* Toggle de idioma: se leen los dos idiomas y el activo queda resaltado, para que el control se entienda como un switch y no como una etiqueta. */ .lang-toggle { gap: 5px; padding: 0 10px; } .lang-toggle .lang-opt { transition: color .2s var(--v2-ease); } .lang-toggle .lang-sep { color: var(--v2-line-2); } .lang-toggle [data-lang-current] { color: var(--v2-ink); font-weight: 600; } .lang-toggle [data-lang-target] { color: var(--v2-ink-3); } .lang-toggle:hover [data-lang-target] { color: var(--v2-ink-2); } .lang-toggle--mobile { display: flex; align-items: center; gap: 6px; } .lang-toggle--mobile [data-lang-current] { color: var(--v2-ink); font-weight: 600; } .lang-toggle--mobile [data-lang-target] { color: var(--v2-ink-3); } .lang-toggle--mobile .lang-sep { color: var(--v2-line-2); } /* El blog son 30 notas escritas solo en español: mostrar la sección en la home en inglés dejaría títulos en español dentro de una página inglesa. El arranque inline del setea data-lang antes del primer paint, así que la sección nunca llega a verse. */ html[data-lang="en"] #blog { display: none; } /* the "v1" return pill — intentional, not glued on */ .version-switch { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill); background: var(--v2-surface); color: var(--v2-ink-3); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; transition: color .2s var(--v2-ease), border-color .2s var(--v2-ease); } .version-switch:hover { color: var(--v2-ink); border-color: var(--v2-line-2); } .version-switch .vs-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--v2-accent); } .nav-login { font-size: 13.5px; color: var(--v2-ink-2); padding: 8px 12px; border-radius: var(--v2-r-sm); transition: color .2s var(--v2-ease); } .nav-login:hover { color: var(--v2-ink); } /* ---- primary button ---- */ .btn-glow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: #0A0A0A; background: var(--v2-ink); border: 1px solid transparent; border-radius: var(--v2-r-pill); padding: 10px 18px; cursor: pointer; position: relative; transition: transform .2s var(--v2-ease), box-shadow .25s var(--v2-ease), background .25s var(--v2-ease); } .btn-glow:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } .btn-glow[data-size="nav-cta"] { padding: 8px 16px; font-size: 13px; } .btn-glow svg { width: 13px; height: 13px; } /* accent variant for the marquee CTAs */ .btn-accent { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 14px; color: #fff; background: var(--v2-accent); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--v2-r-pill); padding: 12px 22px; cursor: pointer; transition: transform .2s var(--v2-ease), box-shadow .25s var(--v2-ease), background .2s var(--v2-ease); } .btn-accent:hover { transform: translateY(-1px); background: #7C3AED; box-shadow: 0 12px 34px rgba(124,58,237,0.34); } .btn-accent svg { width: 14px; height: 14px; } .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 450; font-size: 14px; color: var(--v2-ink); background: transparent; border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-pill); padding: 11px 20px; cursor: pointer; transition: border-color .2s var(--v2-ease), background .2s var(--v2-ease), color .2s var(--v2-ease); } .btn-outline:hover { border-color: var(--v2-ink-3); background: var(--v2-surface); } .btn-outline svg { width: 14px; height: 14px; } .hero-cta-pulse { box-shadow: 0 0 0 0 rgba(139,92,246,0.0); } /* ---- mobile nav ---- */ .nav-mobile { display: none; align-items: center; gap: 10px; } .nav-mobile-cta { font-size: 13px; font-weight: 500; color: #0A0A0A; background: var(--v2-ink); padding: 8px 14px; border-radius: var(--v2-r-pill); } .nav-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm); background: var(--v2-surface); cursor: pointer; } .nav-mobile-toggle svg { stroke: var(--v2-ink); } .nav-mobile-icon-close { display: none; } #mobile-menu { display: none; border-top: 1px solid var(--v2-line); background: rgba(7,7,8,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #mobile-menu.open { display: block; } .mobile-menu-inner { width: var(--v2-shell); margin-inline: auto; padding: 16px 0 24px; } .mobile-menu-link { display: block; padding: 12px 4px; font-size: 16px; color: var(--v2-ink-2); border-bottom: 1px solid var(--v2-line); } .mobile-menu-link:hover { color: var(--v2-ink); } .mobile-menu-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .mobile-menu-row { display: flex; } .lang-btn--mobile, .version-switch--mobile { width: 100%; justify-content: center; padding: 12px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm); background: var(--v2-surface); color: var(--v2-ink-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; cursor: pointer; } .mobile-login { display: block; text-align: center; padding: 12px; color: var(--v2-ink-2); } .mobile-register { display: block; text-align: center; padding: 13px; color: #0A0A0A; background: var(--v2-ink); border-radius: var(--v2-r-pill); font-weight: 500; margin-top: 4px; } /* ============================================================ HERO ============================================================ */ .hero-section { position: relative; min-height: auto; padding: 160px 0 80px; display: block; /* el glow y el tilt 3D del mockup sangran a los costados a propósito: clip evita que ese bleed decorativo genere scroll horizontal. */ overflow-x: clip; } .hero-grid { width: var(--v2-shell); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: clamp(32px, 4vw, 64px); text-align: left; } .hero-copy { max-width: 620px; } .ai-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v2-accent-ink); background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.22); border-radius: var(--v2-r-pill); padding: 6px 14px; } .ai-badge svg { width: 12px; height: 12px; color: var(--v2-accent-ink); } /* live "pulse" dot — reads as an always-on monitoring system */ .ai-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-accent-ink); box-shadow: 0 0 0 0 rgba(139,92,246,0.55); animation: aiBadgePulse 2.4s var(--v2-ease) infinite; } @keyframes aiBadgePulse { 0% { box-shadow: 0 0 0 0 rgba(139,92,246,0.45); } 70% { box-shadow: 0 0 0 7px rgba(139,92,246,0); } 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); } } @media (prefers-reduced-motion: reduce) { .ai-badge-dot { animation: none; } } .hero-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 0.98; letter-spacing: -0.035em; margin: 26px 0 0; color: var(--v2-ink); } .hero-title span { display: block; } .hero-title .accent { background: var(--v2-seam-135); -webkit-background-clip: text; background-clip: text; color: transparent; } /* hero line entrance (main.js adds .hero-line + .line-in) */ .hero-line { opacity: 0; transform: translateY(0.5em); transition: opacity .6s var(--v2-ease), transform .6s var(--v2-ease); } .hero-line.line-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hero-line { opacity: 1 !important; transform: none !important; } } .hero-desc { color: var(--v2-ink-2); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.65; max-width: 52ch; margin: 24px 0 0; } .hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 32px 0 0; } /* larger above-the-fold CTAs for stronger hierarchy */ .btn-accent--lg { padding: 14px 26px; font-size: 15px; } .btn-outline--lg { padding: 13px 22px; font-size: 14.5px; } .hero-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--v2-ink-3); margin: 20px 0 0; } /* ---- inline proof strip ---- */ .hero-proof { display: flex; align-items: stretch; gap: 24px; margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--v2-line); flex-wrap: wrap; } .hero-proof-item { position: relative; padding-left: 12px; } .hero-proof-item::before { content: ""; position: absolute; top: 2px; left: 0; width: 2px; height: 18px; background: var(--v2-seam); border-radius: 2px; } .hero-proof .hp-value { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1; color: var(--v2-ink); } .hero-proof .hp-value .hp-unit { font-size: 1rem; color: var(--v2-ink-3); font-weight: 500; } .hero-proof .hp-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-ink-3); margin-top: 8px; max-width: 14ch; line-height: 1.4; } .hero-proof-divider { width: 1px; align-self: center; height: 40px; background: var(--v2-line); } /* ---- product stage with accent glow ---- */ .hero-stage { position: relative; } .hero-stage-glow { content: ""; position: absolute; z-index: 0; inset: -8% -6% -14% -6%; background: radial-gradient(60% 55% at 62% 28%, rgba(139,92,246,0.30), transparent 70%), radial-gradient(50% 50% at 30% 75%, rgba(244,167,187,0.16), transparent 72%); filter: blur(8px); pointer-events: none; } .mockup-container { position: relative; z-index: 1; margin: 0; width: 100%; max-width: 100%; border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: var(--v2-canvas-2); padding: 12px; box-shadow: 0 40px 120px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.06); } /* AI auditor mockup keeps a constrained width inside its split column */ .auditor-grid .mockup-container { max-width: 100%; } /* los mockups tienen anchos mínimos internos: en móviles muy angostos (≤320) pueden exceder unos px el contenedor — clip antes que scroll horizontal. */ .v2-section .mockup-container { overflow-x: clip; } /* hero column is ~620px: the 3-across KPI row can't shrink below its min-content (nowrap dollar values) and clipped the third tile. Two columns fit the narrow device and mirror the mobile arrangement. */ #hero-mk .mk-kpis { grid-template-columns: 1fr 1fr; } #hero-mk .mk-kpis .mk-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } .mockup-container.float-active { animation: v2float 7s ease-in-out infinite; } @keyframes v2float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .mockup-container.float-active { animation: none; } } /* ---- hero container-scroll: 3D card flattens on scroll over a glass tray ---- */ .hero-scroll { position: relative; z-index: 1; perspective: 1200px; } /* frosted tray sitting between the page background and the mockup card. Stays flat while the card tilts in front of it → reads as depth. Colors derived from existing v2 tokens; subtle by design. */ .hero-glass { position: absolute; inset: -16px -14px -24px; z-index: 0; border-radius: 28px; background: linear-gradient(160deg, rgba(247,247,248,0.05), rgba(139,92,246,0.045)); border: 1px solid var(--v2-line); box-shadow: 0 30px 90px rgba(0,0,0,0.40); -webkit-backdrop-filter: blur(7px) saturate(118%); backdrop-filter: blur(7px) saturate(118%); pointer-events: none; } .hero-tilt { position: relative; z-index: 1; transform-origin: 50% 50%; transform: rotateX(15deg) scale(1.025); will-change: transform; } /* the hero card drives its own scroll-tilt; suppress the ambient float so the two transforms don't fight */ .hero-tilt .mockup-container.float-active { animation: none; } @media (prefers-reduced-motion: reduce) { .hero-tilt { transform: none !important; } } @media (max-width: 920px) { .hero-glass { inset: -12px -10px -18px; border-radius: 22px; } } /* logo strip under hero */ .hero-logos { width: var(--v2-shell); margin: 56px auto 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hero-logos .hl-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v2-ink-3); white-space: nowrap; } .hero-logos .hl-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .hero-logos img { height: 21px; width: auto; opacity: 0.68; filter: grayscale(1) brightness(1.6); transition: opacity .2s var(--v2-ease), filter .2s var(--v2-ease); } .hero-logos img:hover { opacity: 1; filter: grayscale(0) brightness(1); } /* ============================================================ SECTION CHROME ============================================================ */ .v2-section { padding: 104px 0; position: relative; } .v2-section--band { background: var(--v2-canvas-2); border-block: 1px solid var(--v2-line); } .v2-section-head { max-width: 640px; margin-bottom: 56px; } .v2-section-head--center { margin-inline: auto; text-align: center; } .v2-section-head--center .v2-lead { margin-inline: auto; } /* ============================================================ PROBLEMA — narrative beat: the pain before the solution ============================================================ */ .grid-problem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .problem-card { padding: 26px; border: 1px solid var(--v2-line); border-radius: var(--v2-r); background: var(--v2-surface); transition: border-color .25s var(--v2-ease), background .25s var(--v2-ease), transform .25s var(--v2-ease); } .problem-card:hover { border-color: var(--v2-line-2); background: var(--v2-surface-2); transform: translateY(-2px); } /* pain cards carry a rose tint — the narrative counterpart of the purple solution icons two sections below */ .problem-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--v2-r-sm); border: 1px solid var(--v2-danger-line); background: var(--v2-danger-bg); margin-bottom: 18px; } .problem-icon svg { width: 19px; height: 19px; stroke: var(--v2-danger-ink); } .problem-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--v2-ink); margin: 0 0 8px; } .problem-card p { color: var(--v2-ink-2); font-size: 13.5px; line-height: 1.6; margin: 0; } /* ============================================================ FEATURES — bento-ish editorial grid, no glass blur ============================================================ */ .grid-features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .feature-card { grid-column: span 2; padding: 26px; border: 1px solid var(--v2-line); border-radius: var(--v2-r); background: var(--v2-surface); position: relative; overflow: hidden; transition: border-color .25s var(--v2-ease), background .25s var(--v2-ease), transform .25s var(--v2-ease); } .feature-card:hover { border-color: var(--v2-line-2); background: var(--v2-surface-2); transform: translateY(-2px); } /* first two cards span 3 for rhythm */ .feature-card--wide { grid-column: span 3; } .feature-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--v2-r-sm); border: 1px solid rgba(139,92,246,0.22); background: rgba(139,92,246,0.07); margin-bottom: 18px; } .feature-icon svg { width: 19px; height: 19px; stroke: var(--v2-accent-ink); } .feature-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--v2-ink); margin: 0 0 8px; } .feature-card p { color: var(--v2-ink-2); font-size: 13.5px; line-height: 1.6; margin: 0; } .feature-card .fc-index { position: absolute; top: 20px; right: 22px; font-family: var(--font-mono); font-size: 11px; color: var(--v2-ink-3); letter-spacing: 0.08em; } /* Featured cards (MCP / Claude / API) — highlighted but contained: a subtle brand seam + a touch of accent wash. No size change, so they stay one row within the grid rather than dominating the page. */ .feature-card--featured { border-color: rgba(139, 92, 246, 0.22); background: radial-gradient(130% 100% at 0% 0%, rgba(139, 92, 246, 0.06), transparent 62%), var(--v2-surface); } .feature-card--featured::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--v2-seam); opacity: 0.85; } .feature-card--featured:hover { border-color: rgba(139, 92, 246, 0.38); } /* Official Claude + MCP logo lockup — light chips so the coral and the dark mark read correctly on either theme. */ .fc-logos { display: inline-flex; gap: 8px; margin-bottom: 18px; } .fc-logo-chip { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--v2-r-sm); background: #FAFAF7; border: 1px solid rgba(17, 17, 20, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .fc-logo-chip img { width: 20px; height: 20px; display: block; } /* Tier tag on the API card */ .fc-tier { display: inline-block; vertical-align: middle; margin-left: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--v2-accent-ink); background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.24); border-radius: var(--v2-r-pill); padding: 2px 8px; } /* ============================================================ PRODUCTO — windowed tabs (reuses mockups.js) ============================================================ */ .prodx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill); padding: 5px; background: var(--v2-surface); width: fit-content; max-width: 100%; margin-inline: auto; } .prodx-tab { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 450; color: var(--v2-ink-3); background: transparent; border: none; cursor: pointer; padding: 8px 14px; border-radius: var(--v2-r-pill); transition: color .2s var(--v2-ease), background .2s var(--v2-ease); white-space: nowrap; } .prodx-tab svg { width: 15px; height: 15px; } .prodx-tab:hover { color: var(--v2-ink); } .prodx-tab.is-active { color: var(--v2-ink); background: var(--v2-surface-2); box-shadow: inset 0 0 0 1px var(--v2-line-2); } .prodx-stage { max-width: 1000px; margin: 0 auto; } .prodx-window { border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: var(--v2-canvas-2); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.5); } .prodx-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--v2-line); background: rgba(247,247,248,0.015); } .prodx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--v2-ink-4); } .prodx-shot { padding: 14px; transition: opacity .25s var(--v2-ease); } .prodx-caption { text-align: center; color: var(--v2-ink-3); font-size: 13.5px; max-width: 60ch; margin: 22px auto 0; line-height: 1.6; } /* ============================================================ AI AUDITOR — split layout: copy left, mockup right ============================================================ */ .auditor-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; } .grid-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; } .stat-card { padding: 18px; border: 1px solid var(--v2-line); border-radius: var(--v2-r); background: var(--v2-surface); } .stat-card .sc-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-ink-3); } .stat-card .sc-value { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; margin-top: 6px; background: var(--v2-seam-135); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-card .sc-sub { font-size: 12px; color: var(--v2-ink-3); margin-top: 4px; } /* ============================================================ INTEGRACIONES — flat tiles, no glass ============================================================ */ .grid-integ { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .integ-card { display: block; padding: 22px 14px; text-align: center; border: 1px solid var(--v2-line); border-radius: var(--v2-r); background: var(--v2-surface); cursor: pointer; transition: border-color .25s var(--v2-ease), background .25s var(--v2-ease), transform .25s var(--v2-ease); } .integ-card:hover { border-color: var(--v2-line-2); background: var(--v2-surface-2); transform: translateY(-2px); } .integ-card:hover .ic-tag { color: var(--v2-accent-ink); } .integration-icon { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: var(--v2-r-sm); display: flex; align-items: center; justify-content: center; border: 1px solid var(--v2-line); background: rgba(247,247,248,0.03); } .integration-icon img { width: 24px; height: 24px; object-fit: contain; } .integ-card .ic-name { color: var(--v2-ink); font-weight: 500; font-size: 13px; } .integ-card .ic-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--v2-ink-3); margin-top: 6px; } /* ============================================================ HOW IT WORKS — numbered, connected ============================================================ */ .grid-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .step-card { padding: 28px 24px; border: 1px solid var(--v2-line); border-radius: var(--v2-r); background: var(--v2-surface); position: relative; } .step-number { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--v2-r-sm); border: 1px solid rgba(139,92,246,0.30); background: rgba(139,92,246,0.08); font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--v2-accent-ink); margin-bottom: 18px; } .step-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--v2-ink); margin: 0 0 8px; } .step-card p { color: var(--v2-ink-2); font-size: 13.5px; line-height: 1.6; margin: 0; } /* ============================================================ TESTIMONIOS ============================================================ */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .testimonial-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--v2-line); border-radius: var(--v2-r); background: var(--v2-surface); transition: border-color .25s var(--v2-ease); } .testimonial-card:hover { border-color: var(--v2-line-2); } .testimonial-top { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .testimonial-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-ink-3); } .testimonial-metrics { display: flex; gap: 8px; flex-wrap: wrap; } .testimonial-pill { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--v2-accent-ink); border: 1px solid rgba(139,92,246,0.22); background: rgba(139,92,246,0.06); border-radius: var(--v2-r-pill); padding: 4px 11px; } .testimonial-quote { font-size: 14.5px; line-height: 1.65; color: var(--v2-ink); margin: 0 0 22px; flex: 1; } .testimonial-footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--v2-line); padding-top: 18px; } .testimonial-avatar { width: 38px; height: 38px; border-radius: var(--v2-r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 15px; background: var(--v2-seam-135); } .testimonial-avatar--pink { background: linear-gradient(135deg, var(--v2-accent-2), var(--v2-accent)); } .testimonial-avatar--green { background: linear-gradient(135deg, #34D399, var(--v2-accent)); } .testimonial-name { font-size: 13.5px; font-weight: 500; color: var(--v2-ink); } .testimonial-why { font-size: 12px; color: var(--v2-ink-3); } /* ============================================================ PRICING ============================================================ */ .grid-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; } /* 21st.dev-style pricing cards: crisp raised cards (white on paper / near-black on dark), accent ring on the featured plan. All surfaces via v2 tokens so the set follows the theme toggle. */ .price-card { display: flex; flex-direction: column; padding: 30px 28px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: var(--v2-canvas-2); box-shadow: 0 1px 2px rgba(11,11,16,0.04), 0 12px 32px rgba(11,11,16,0.05); position: relative; transition: transform .25s var(--v2-ease), box-shadow .25s var(--v2-ease), border-color .25s var(--v2-ease); } .price-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(11,11,16,0.05), 0 22px 48px rgba(11,11,16,0.09); border-color: var(--v2-line-2); } .price-card--featured { border-color: rgba(139,92,246,0.45); background: linear-gradient(180deg, rgba(139,92,246,0.06), rgba(244,167,187,0.015)), var(--v2-canvas-2); box-shadow: 0 0 0 1px rgba(139,92,246,0.20), 0 24px 56px rgba(139,92,246,0.14); } .price-card--featured:hover { box-shadow: 0 0 0 1px rgba(139,92,246,0.30), 0 28px 64px rgba(139,92,246,0.18); } .pricing-featured-pulse { box-shadow: 0 0 0 1px rgba(139,92,246,0.34), 0 24px 60px rgba(139,92,246,0.16); } .price-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: #fff; background: var(--v2-accent); border-radius: var(--v2-r-pill); padding: 5px 14px; white-space: nowrap; box-shadow: 0 6px 16px rgba(139,92,246,0.35); } .price-tier { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-ink-3); margin-bottom: 14px; } .price-card--featured .price-tier { color: var(--v2-accent-ink); } .price-amount { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; letter-spacing: -0.02em; color: var(--v2-ink); margin-bottom: 0; line-height: 1; } .price-amount .pa-cur { font-size: 1rem; color: var(--v2-ink-3); font-weight: 500; } .price-amount .pa-per { font-size: 0.95rem; font-weight: 400; color: var(--v2-ink-3); } .price-desc { font-size: 13px; color: var(--v2-ink-3); margin: 8px 0 0; line-height: 1.5; } .price-features { list-style: none; padding: 22px 0 0; margin: 22px 0 24px; flex: 1; display: flex; flex-direction: column; gap: 13px; border-top: 1px solid var(--v2-line); } .price-features li { display: flex; gap: 11px; font-size: 13px; color: var(--v2-ink-2); align-items: center; line-height: 1.4; } .price-features li svg { width: 19px; height: 19px; flex-shrink: 0; padding: 3.5px; box-sizing: border-box; background: rgba(139,92,246,0.12); border-radius: 6px; stroke: var(--v2-accent-ink); } .price-card--featured .price-features li svg { background: rgba(139,92,246,0.18); } .price-cta { width: 100%; justify-content: center; } /* Custom / Enterprise plan: right-aligned collapsible under the rightmost card */ .price-custom-wrap { display: flex; justify-content: flex-end; margin-top: 16px; } .price-custom { width: calc((100% - 32px) / 3); } .price-custom-toggle { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 15px 20px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: var(--v2-canvas-2); box-shadow: 0 1px 2px rgba(11,11,16,0.04), 0 12px 32px rgba(11,11,16,0.05); transition: border-color .2s var(--v2-ease), box-shadow .2s var(--v2-ease); } .price-custom-toggle::-webkit-details-marker { display: none; } .price-custom-toggle:hover { border-color: rgba(139,92,246,0.40); } .price-custom[open] .price-custom-toggle { border-color: rgba(139,92,246,0.40); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .pct-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pct-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-ink); font-weight: 600; } .pct-meta { font-size: 11px; color: var(--v2-ink-3); } .pct-chevron { width: 16px; height: 16px; stroke: var(--v2-ink-3); flex-shrink: 0; margin-left: auto; transition: transform .25s var(--v2-ease); } .price-custom[open] .pct-chevron { transform: rotate(180deg); } .price-custom-body { border: 1px solid rgba(139,92,246,0.40); border-top: none; border-radius: 0 0 var(--v2-r-lg) var(--v2-r-lg); background: var(--v2-canvas-2); padding: 4px 22px 22px; animation: pctReveal .28s var(--v2-ease); } @keyframes pctReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .price-custom-body .price-amount { font-size: 1.9rem; margin-top: 18px; } .price-custom-body .price-features { border-top: none; padding-top: 0; margin: 16px 0 20px; } /* ============================================================ FAQ ============================================================ */ .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { border: 1px solid var(--v2-line); border-radius: var(--v2-r); background: var(--v2-surface); overflow: hidden; transition: border-color .2s var(--v2-ease); } .faq-item:hover { border-color: var(--v2-line-2); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: none; cursor: pointer; text-align: left; } .faq-q span:first-child { font-size: 15px; font-weight: 500; color: var(--v2-ink); } .faq-icon { color: var(--v2-accent-ink); font-size: 20px; line-height: 1; flex-shrink: 0; transition: transform .25s var(--v2-spring); font-family: var(--font-mono); } .faq-icon.open { transform: rotate(45deg); } .faq-content { max-height: 0; overflow: hidden; transition: max-height .3s var(--v2-ease); } .faq-content.open { max-height: 320px; } .faq-content p { padding: 0 22px 20px; font-size: 14px; color: var(--v2-ink-2); line-height: 1.7; margin: 0; } /* ============================================================ MID CTA — horizontal conversion panel mid-funnel ============================================================ */ .v2-section--midcta { padding: 56px 0; } .v2-midcta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-lg); background: radial-gradient(520px 240px at 12% 0%, rgba(139,92,246,0.12), transparent 70%), var(--v2-surface); padding: 36px 40px; } .v2-midcta-copy { max-width: 52ch; } .v2-midcta-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--v2-ink); margin: 14px 0 0; } .v2-midcta-sub { color: var(--v2-ink-2); font-size: 14px; margin: 10px 0 0; } .v2-midcta-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ============================================================ CTA FINAL ============================================================ */ /* Final CTA — banda horizontal (adaptado de 21st.dev reapollo/call-to-action-1): copy a la izquierda, acciones a la derecha. */ .v2-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; text-align: left; border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: radial-gradient(700px 260px at 0% 0%, rgba(139,92,246,0.11), transparent 70%), var(--v2-surface); padding: 44px 48px; } .v2-cta-copy { flex: 1 1 340px; min-width: 0; } .v2-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.85rem, 3.6vw, 2.75rem); line-height: 1.06; letter-spacing: -0.03em; color: var(--v2-ink); margin: 0; text-wrap: balance; } .v2-cta h2 .accent { background: var(--v2-seam-135); -webkit-background-clip: text; background-clip: text; color: transparent; } .v2-cta p { color: var(--v2-ink-2); font-size: 1rem; margin: 12px 0 0; } .v2-cta-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; } @media (max-width: 760px) { .v2-cta { padding: 36px 28px; } .v2-cta-actions { width: 100%; } .v2-cta-actions .btn-accent--lg, .v2-cta-actions .btn-outline--lg { flex: 1 1 auto; justify-content: center; } } /* ============================================================ FOOTER ============================================================ */ /* Footer (adaptado de 21st.dev nevsky118/footer/default → tokens + logo Metrix) */ .v2-footer { border-top: 1px solid var(--v2-line); padding: 56px 0 40px; } .footer-inner { width: var(--v2-shell); margin-inline: auto; } .footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer-brand { display: inline-flex; align-items: center; } .footer-brand .brand-word { height: 24px; width: auto; } .footer-id { display: flex; flex-direction: column; gap: 10px; } .footer-tagline { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-ink-3); margin: 0; } .footer-tagline::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--v2-accent); vertical-align: middle; margin-right: 8px; } .footer-socials { list-style: none; display: flex; gap: 10px; padding: 0; margin: 0; } .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--v2-r-pill); border: 1px solid var(--v2-line); background: var(--v2-surface); color: var(--v2-ink-2); cursor: pointer; transition: color .2s var(--v2-ease), border-color .2s var(--v2-ease), background .2s var(--v2-ease), transform .2s var(--v2-ease); } .footer-social svg { width: 18px; height: 18px; } .footer-social:hover { color: var(--v2-accent-ink); border-color: rgba(139,92,246,0.40); background: rgba(139,92,246,0.08); transform: translateY(-2px); } .footer-bottom { border-top: 1px solid var(--v2-line); margin-top: 32px; padding-top: 26px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; } .footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } .footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; } .footer-nav a, .footer-legal a { font-size: 14px; color: var(--v2-ink-2); transition: color .18s var(--v2-ease); } .footer-nav a:hover, .footer-legal a:hover { color: var(--v2-ink); } .footer-copy { width: 100%; margin-top: 20px; display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--v2-ink-3); } .footer-copy span:first-child { color: var(--v2-ink-2); } @media (max-width: 760px) { .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; } .footer-copy { flex-direction: column; } } /* ============================================================ ENTERPRISE MODAL (reused contract: .is-open, .ent-invalid) ============================================================ */ #enterpriseModal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; } #enterpriseModal.is-open { display: flex; } .ent-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ent-panel { position: relative; z-index: 1; width: 100%; max-width: 560px; background: var(--v2-canvas-2); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-lg); padding: 32px; max-height: 90vh; overflow-y: auto; box-shadow: 0 40px 120px rgba(0,0,0,0.6); } .ent-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--v2-surface-2); border: 1px solid var(--v2-line); color: var(--v2-ink-2); border-radius: var(--v2-r-sm); cursor: pointer; font-size: 18px; } .ent-close:hover { color: var(--v2-ink); } .ent-title { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--v2-ink); margin: 0 0 6px; } .ent-title .gradient-brand { background: var(--v2-seam-135); -webkit-background-clip: text; background-clip: text; color: transparent; } .ent-sub { color: var(--v2-ink-2); font-size: 14px; margin: 0 0 22px; } .ent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ent-field { display: flex; flex-direction: column; gap: 6px; } .ent-field--full { grid-column: 1 / -1; } .ent-field span { font-size: 12px; color: var(--v2-ink-2); font-weight: 500; } .ent-field input, .ent-field select, .ent-field textarea { background: var(--v2-canvas); border: 1px solid var(--v2-line); color: var(--v2-ink); border-radius: var(--v2-r-sm); padding: 10px 12px; font-family: inherit; font-size: 14px; } .ent-field input:focus, .ent-field select:focus, .ent-field textarea:focus { outline: none; border-color: var(--v2-accent); } .ent-field input::placeholder, .ent-field textarea::placeholder { color: var(--v2-ink-4); } .ent-invalid { border-color: var(--v2-accent-2) !important; box-shadow: 0 0 0 2px rgba(244,167,187,0.18); } .ent-submit { width: 100%; margin-top: 20px; } .ent-note { font-size: 12px; color: var(--v2-ink-3); line-height: 1.6; margin: 14px 0 0; } .ent-note strong { color: var(--v2-ink-2); } /* ============================================================ BANDA INVERSORES (home → /inversores | /investors) ------------------------------------------------------------ Deliberadamente discreta: hairline + eyebrow con seam, sin fondos llamativos — no compite con el CTA final de clientes. ============================================================ */ .v2-section--invest { padding-top: 0; } .v2-invest { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: var(--v2-surface); padding: 22px 26px; } .v2-invest-copy { display: flex; flex-direction: column; gap: 6px; } .v2-invest-title { margin: 0; color: var(--v2-ink-2); font-size: 15px; line-height: 1.5; max-width: 52ch; } .v2-invest-link { flex-shrink: 0; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--v2-ink); border: 1px solid var(--v2-line-2); border-radius: 999px; padding: 10px 20px; transition: border-color 0.2s ease, color 0.2s ease; } .v2-invest-link:hover { border-color: var(--v2-accent); color: var(--v2-accent); } @media (max-width: 720px) { .v2-invest { flex-direction: column; align-items: flex-start; } .v2-invest-link { align-self: stretch; text-align: center; } } /* ============================================================ WAITLIST MODAL (contract: .is-open · steps .wl-step/.is-active) ------------------------------------------------------------ Mobile-first: en pantallas chicas es un bottom-sheet a pantalla completa de ancho; desde 640px pasa a tarjeta centrada. Un campo por paso, barra de progreso con el seam de marca. ============================================================ */ #waitlistModal { position: fixed; inset: 0; z-index: 210; display: none; align-items: flex-end; justify-content: center; } #waitlistModal.is-open { display: flex; } .wl-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .wl-panel { position: relative; z-index: 1; width: 100%; max-width: 100%; background: var(--v2-canvas-2); border: 1px solid var(--v2-line-2); border-bottom: 0; border-radius: var(--v2-r-lg) var(--v2-r-lg) 0 0; padding: 28px 22px calc(24px + env(safe-area-inset-bottom)); max-height: 92dvh; overflow-y: auto; box-shadow: 0 -20px 80px rgba(0,0,0,0.55); animation: wl-sheet-in 0.32s cubic-bezier(0.32, 0.72, 0.24, 1); } @keyframes wl-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } .wl-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--v2-surface-2); border: 1px solid var(--v2-line); color: var(--v2-ink-2); border-radius: var(--v2-r-sm); cursor: pointer; font-size: 18px; } .wl-close:hover { color: var(--v2-ink); } .wl-head { display: flex; flex-direction: column; gap: 12px; margin: 0 36px 20px 0; } .wl-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; background: var(--v2-seam-135); -webkit-background-clip: text; background-clip: text; color: transparent; } .wl-progress { display: flex; align-items: center; gap: 10px; } .wl-progress-bar { flex: 1 1 auto; height: 4px; border-radius: 999px; background: var(--v2-surface-2); overflow: hidden; } .wl-progress-fill { display: block; height: 100%; width: 25%; border-radius: 999px; background: var(--v2-seam-135); transition: width 0.35s cubic-bezier(0.32, 0.72, 0.24, 1); } .wl-progress-label { font-size: 11px; color: var(--v2-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .wl-step { animation: wl-step-in 0.28s ease; } @keyframes wl-step-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } .wl-title { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.2; color: var(--v2-ink); margin: 0 0 8px; } .wl-title .gradient-brand { background: var(--v2-seam-135); -webkit-background-clip: text; background-clip: text; color: transparent; } .wl-sub { color: var(--v2-ink-2); font-size: 14px; line-height: 1.55; margin: 0 0 18px; } .wl-sub strong { color: var(--v2-ink); word-break: break-all; } .wl-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .wl-field span { font-size: 12px; color: var(--v2-ink-2); font-weight: 500; } .wl-field input { background: var(--v2-canvas); border: 1px solid var(--v2-line); color: var(--v2-ink); border-radius: var(--v2-r-sm); padding: 13px 14px; font-family: inherit; font-size: 16px; /* ≥16px: evita el auto-zoom de iOS al enfocar */ } .wl-field input:focus { outline: none; border-color: var(--v2-accent); box-shadow: 0 0 0 3px rgba(139,92,246,0.16); } .wl-field input::placeholder { color: var(--v2-ink-4); } .wl-error { font-size: 12.5px; color: var(--v2-accent-2); margin: -6px 0 12px; } .wl-next { width: 100%; justify-content: center; margin-top: 4px; } .wl-note { font-size: 12px; color: var(--v2-ink-3); line-height: 1.6; margin: 12px 0 0; } .wl-skip { display: block; width: 100%; margin-top: 12px; padding: 8px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--v2-ink-3); text-align: center; } .wl-skip:hover { color: var(--v2-ink); } .wl-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 6px 2px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--v2-ink-3); } .wl-back:hover { color: var(--v2-ink); } .wl-step--success { text-align: center; padding: 8px 0 4px; } .wl-check { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--v2-seam-135); color: #fff; box-shadow: 0 12px 36px rgba(139,92,246,0.35); } .wl-check svg { width: 26px; height: 26px; } .wl-step--success .wl-next { margin-top: 18px; } @media (min-width: 640px) { #waitlistModal { align-items: center; padding: 20px; } .wl-panel { max-width: 460px; border-bottom: 1px solid var(--v2-line-2); border-radius: var(--v2-r-lg); padding: 32px 30px 28px; max-height: 90vh; box-shadow: 0 40px 120px rgba(0,0,0,0.6); animation-name: wl-card-in; } @keyframes wl-card-in { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } } .wl-title { font-size: 1.6rem; } } @media (prefers-reduced-motion: reduce) { .wl-panel, .wl-step, .wl-progress-fill { animation: none; transition: none; } } /* ============================================================ BACK TO TOP (contract: .is-visible) ------------------------------------------------------------ Anchored bottom-LEFT, away from the chat launcher (.mtx-wa- launcher, fixed bottom/right) and its upward-opening panel (.mtx-wa-panel, bottom:92px right:20px). The whole right column is reserved for chat — back-to-top owns the left. ============================================================ */ #back-to-top { position: fixed; bottom: 22px; left: 22px; z-index: 60; width: 42px; height: 42px; border-radius: var(--v2-r-sm); border: 1px solid var(--v2-line-2); background: rgba(11,11,13,0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--v2-ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px) scale(0.9); pointer-events: none; transition: opacity .25s var(--v2-ease), transform .25s var(--v2-ease), color .2s var(--v2-ease), border-color .2s var(--v2-ease); } #back-to-top svg { width: 18px; height: 18px; } #back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } #back-to-top:hover { color: var(--v2-ink); border-color: var(--v2-accent); } /* ============================================================ SCROLL PROGRESS ============================================================ */ #scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--v2-seam); z-index: 80; box-shadow: 0 0 10px rgba(139,92,246,0.5); } /* ============================================================ A11Y POPOVER (reused contract) ============================================================ */ .nav-popover-wrap { position: relative; } .a11y-popover { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; background: var(--v2-canvas-2); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r); padding: 18px; z-index: 90; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .a11y-popover[hidden] { display: none; } .a11y-popover h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--v2-ink-3); margin: 0 0 14px; } .a11y-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--v2-line); } .a11y-row:first-of-type { border-top: none; padding-top: 0; } .a11y-label { display: flex; flex-direction: column; gap: 2px; } .a11y-label strong { font-size: 13px; color: var(--v2-ink); font-weight: 500; } .a11y-label span { font-size: 11.5px; color: var(--v2-ink-3); line-height: 1.4; } .a11y-select { background: var(--v2-canvas); border: 1px solid var(--v2-line); color: var(--v2-ink); border-radius: var(--v2-r-sm); padding: 6px 8px; font-size: 12px; } .a11y-toggle { width: 38px; height: 22px; border-radius: var(--v2-r-pill); border: 1px solid var(--v2-line); background: var(--v2-surface-2); position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s var(--v2-ease); } .a11y-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--v2-ink-2); transition: transform .2s var(--v2-spring), background .2s; } .a11y-toggle[aria-checked="true"] { background: var(--v2-accent); border-color: transparent; } .a11y-toggle[aria-checked="true"]::after { transform: translateX(16px); background: #fff; } .a11y-actions { margin-top: 14px; display: flex; justify-content: flex-end; } .a11y-reset { font-size: 12px; color: var(--v2-ink-3); background: none; border: none; cursor: pointer; } .a11y-reset:hover { color: var(--v2-ink); } /* high-contrast a11y mode (main.js sets data-a11y-contrast) */ :root[data-a11y-contrast="high"] { --v2-ink-2: rgba(247,247,248,0.85); --v2-ink-3: rgba(247,247,248,0.62); --v2-line: rgba(247,247,248,0.20); --v2-line-2: rgba(247,247,248,0.32); } .svg-offscreen { position: absolute; width: 0; height: 0; overflow: hidden; } /* live flash (reused) */ .live-flash { animation: liveFlash 0.7s var(--v2-ease); } @keyframes liveFlash { 0% { background: rgba(139,92,246,0.18); } 100% { background: transparent; } } @keyframes badgeIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .nav-links { display: none; } .nav-ctas { display: none; } .nav-mobile { display: flex; } /* minmax(0,…): el min-content del mockup inflaba el track y arrastraba a toda la sección (scroll horizontal en móviles angostos). */ .auditor-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .grid-features { grid-template-columns: repeat(2, 1fr); } .feature-card, .feature-card--wide { grid-column: span 1; } .grid-integ { grid-template-columns: repeat(3, 1fr); } /* hero stacks: copy first, product device below */ /* minmax(0,…): con `1fr` (= minmax(auto,1fr)) el min-content de los hijos inflaba el track y generaba scroll horizontal en móviles angostos. */ .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .hero-copy { max-width: 680px; } .hero-stage { max-width: 720px; margin-inline: auto; width: 100%; } .hero-title { font-size: clamp(2.6rem, 8vw, 4.2rem); } } @media (max-width: 760px) { :root { --v2-shell: calc(100% - 36px); --v2-shell-narrow: calc(100% - 36px); } .v2-section { padding: 72px 0; } .hero-section { padding: 128px 0 64px; } .grid-features { grid-template-columns: 1fr; } .grid-problem { grid-template-columns: 1fr; } .grid-steps { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .v2-midcta { padding: 28px 24px; gap: 24px; } .v2-midcta-actions { width: 100%; } .v2-midcta-actions .btn-accent--lg { flex: 1 1 auto; justify-content: center; } .grid-pricing { grid-template-columns: 1fr; } .price-custom { width: 100%; } .grid-integ { grid-template-columns: repeat(2, 1fr); } /* minmax(0,…): igual que .hero-grid, sin esto el min-content de las stat-cards genera scroll horizontal en móviles angostos. */ .grid-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ent-grid { grid-template-columns: 1fr; } .prodx-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 18px; } /* proof strip: inline row of value + label per item, stacked vertically and LEFT-aligned so no text ever lands under the fixed chat launcher (bottom-right) — height-independent. */ .hero-proof { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .hero-proof-divider { display: none; } .hero-proof-item { display: flex; align-items: baseline; gap: 10px; padding-left: 12px; } .hero-proof-item::before { top: 4px; height: 14px; } .hero-proof .hp-value { font-size: 1.25rem; } .hero-proof .hp-label { margin-top: 0; max-width: none; } .hero-ctas .btn-accent--lg, .hero-ctas .btn-outline--lg { flex: 1 1 auto; justify-content: center; } } @media (max-width: 480px) { /* en el pill angosto dejamos logo + hamburguesa; el menú ya incluye el CTA */ .nav-mobile-cta { display: none; } } @media (max-width: 420px) { .grid-integ { grid-template-columns: 1fr 1fr; } .hero-logos { flex-direction: column; align-items: flex-start; } } /* ============================================================ LIGHT THEME (html[data-theme="light"]) ------------------------------------------------------------ Same editorial-minimal language, warm paper canvas. The dark tokens live on a bare :root (always matches); these win by higher specificity. Brand reference taken from v1's light palette (#FBF6F2 paper, ink #0B0B10, purple-tinted hairlines) but re-executed for v2's flat-surface system. Product mockups stay DARK (they use v1 tokens + hardcoded darks via mockups.css, which v2 never re-themes) — so we keep them as cohesive dark "device" islands on the light page. ============================================================ */ html[data-theme="light"] { --v2-canvas: #FBF6F2; /* warm paper */ --v2-canvas-2: #FFFFFF; /* raised band / panels */ --v2-ink: #0B0B10; /* primary text */ --v2-ink-2: rgba(17,12,26,0.70); /* body */ --v2-ink-3: rgba(17,12,26,0.52); /* captions */ --v2-ink-4: rgba(17,12,26,0.30); /* faint */ --v2-line: rgba(88,42,160,0.13); /* purple-tinted hairline */ --v2-line-2: rgba(88,42,160,0.22); /* hover / emphasis */ --v2-surface: rgba(88,42,160,0.030); /* card fill */ --v2-surface-2: rgba(88,42,160,0.058); /* raised */ --v2-accent: #7C3AED; /* deeper purple for contrast on paper */ --v2-accent-2: #D6568F; /* pink darkened for AA on light */ --v2-accent-ink:#6D28D9; /* accent text/icons on light */ --v2-danger-ink:#BE123C; /* rose pain tint, AA on paper */ --v2-danger-line: rgba(190,18,60,0.24); --v2-danger-bg: rgba(190,18,60,0.06); } /* atmosphere recalibrated for paper: warmer accents, ink grid, faint vignette */ html[data-theme="light"] body::before { background: radial-gradient(1000px 560px at 86% -12%, rgba(124,58,237,0.07), transparent 58%), radial-gradient(780px 500px at -4% 4%, rgba(214,86,143,0.05), transparent 56%), linear-gradient(to right, rgba(17,12,26,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(17,12,26,0.035) 1px, transparent 1px), radial-gradient(125% 125% at 50% 22%, transparent 52%, rgba(20,12,28,0.06)); background-size: 100% 100%, 100% 100%, 58px 58px, 58px 58px, 100% 100%; } /* paper grain: same monochrome turbulence, a touch lighter so it reads as texture */ html[data-theme="light"] body::after { opacity: 0.04; } html[data-theme="light"] ::selection { background: rgba(124,58,237,0.20); color: #0B0B10; } /* nav glass — versión white: cristal lechoso sobre paper */ html[data-theme="light"] .nav-inner { background: rgba(255,255,255,0.55); border-color: rgba(124,58,237,0.14); box-shadow: 0 10px 30px rgba(20,12,28,0.10), inset 0 1px 0 rgba(255,255,255,0.75); } html[data-theme="light"] .nav-scrolled .nav-inner { background: rgba(255,255,255,0.72); border-color: rgba(124,58,237,0.20); box-shadow: 0 14px 36px rgba(20,12,28,0.13), inset 0 1px 0 rgba(255,255,255,0.85); } /* controles del nav legibles sobre el cristal claro (estaban pensados para dark) */ html[data-theme="light"] .nav-tool-btn, html[data-theme="light"] .nav-icon-btn, html[data-theme="light"] .a11y-btn, html[data-theme="light"] .version-switch, html[data-theme="light"] #theme-toggle.nav-icon-btn, html[data-theme="light"] #a11y-button.a11y-btn { background: rgba(255,255,255,0.55); border-color: rgba(124,58,237,0.22); color: var(--v2-ink-2); } html[data-theme="light"] .nav-link { color: var(--v2-ink-2); } html[data-theme="light"] .nav-login { color: var(--v2-ink); font-weight: 500; } html[data-theme="light"] #mobile-menu { background: rgba(251,246,242,0.97); } /* wordmark swap: dark logo on paper */ html[data-theme="light"] .brand-word--on-dark { display: none; } html[data-theme="light"] .brand-word--on-light { display: block; } /* inverted primary button: ink pill needs light text on paper */ html[data-theme="light"] .btn-glow, html[data-theme="light"] .nav-mobile-cta, html[data-theme="light"] .mobile-register { color: #FBF6F2; } html[data-theme="light"] .btn-glow:hover { box-shadow: 0 10px 30px rgba(20,12,28,0.18); } /* monochrome partner logos → dark silhouettes (base opacity 0.68 shared) */ html[data-theme="light"] .hero-logos img { filter: grayscale(1) brightness(0); } html[data-theme="light"] .hero-logos img:hover { filter: grayscale(0) brightness(1); opacity: 1; } /* hero accent glow: softer on paper so the light mockup reads cleanly */ html[data-theme="light"] .hero-stage-glow { background: radial-gradient(58% 52% at 62% 26%, rgba(124,58,237,0.16), transparent 70%), radial-gradient(50% 50% at 30% 78%, rgba(214,86,143,0.12), transparent 72%); filter: blur(10px); } /* heavy dark shadows → soft paper shadows */ html[data-theme="light"] .ent-panel { box-shadow: 0 40px 120px rgba(20,12,28,0.22); } html[data-theme="light"] .wl-panel { box-shadow: 0 -16px 60px rgba(20,12,28,0.20); } html[data-theme="light"] .wl-overlay { background: rgba(20,12,28,0.40); } @media (min-width: 640px) { html[data-theme="light"] .wl-panel { box-shadow: 0 40px 120px rgba(20,12,28,0.22); } } html[data-theme="light"] .a11y-popover { box-shadow: 0 24px 60px rgba(20,12,28,0.16); } html[data-theme="light"] .ent-overlay { background: rgba(20,12,28,0.40); } html[data-theme="light"] #back-to-top { background: rgba(251,246,242,0.90); } /* product mockups render in their LIGHT skin on paper. The dashboard markup (mockups.css) is driven by v1 tokens (--surface, --text, --border, …) which v2 only ships in their dark base (tokens/colors.css); v1's light override lives in site.css, which v2 doesn't load. So we feed those v1 tokens their light values here (mirroring site.css), and let the v2 chrome tokens fall through to the light theme — frame, bar and dots go light too. */ html[data-theme="light"] .mockup-container, html[data-theme="light"] .prodx-window { --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); --border-subtle: rgba(11,11,16,0.08); --border-accent: rgba(124,58,237,0.35); --surface: rgba(255,250,247,0.62); --surface-2: rgba(255,250,247,0.78); --purple-light: #6D28D9; --green: #0B7A55; --amber: #B45309; --amber-warm: #D97706; --red: #D6244A; --success-bg: rgba(11,122,85,0.12); --warning-bg: rgba(180,83,9,0.12); --danger-bg: rgba(214,36,74,0.10); --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)); } html[data-theme="light"] .mockup-container { box-shadow: 0 28px 80px rgba(20,12,28,0.16), 0 0 0 1px rgba(124,58,237,0.10); } html[data-theme="light"] .prodx-window { box-shadow: 0 22px 64px rgba(20,12,28,0.14); } /* frosted paper tray on light: lifts the light mockup off the page */ html[data-theme="light"] .hero-glass { background: linear-gradient(160deg, rgba(255,255,255,0.62), rgba(124,58,237,0.05)); border-color: rgba(88,42,160,0.14); box-shadow: 0 26px 70px rgba(20,12,28,0.13), inset 0 1px 0 rgba(255,255,255,0.65); } /* high-contrast a11y on light */ html[data-theme="light"][data-a11y-contrast="high"] { --v2-ink-2: rgba(17,12,26,0.86); --v2-ink-3: rgba(17,12,26,0.66); --v2-line: rgba(88,42,160,0.30); --v2-line-2: rgba(88,42,160,0.42); } /* ============================================================ BLOG MINIS (banda "Del blog" antes del CTA final) Tokens --v2-* : heredan el tema oscuro/claro automáticamente. ============================================================ */ .v2-blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; } .v2-blog-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.2; color: var(--v2-ink); margin-top: 12px; max-width: 30ch; } .v2-blog-title .accent { background: var(--v2-seam); -webkit-background-clip: text; background-clip: text; color: transparent; } .v2-blog-all { flex-shrink: 0; font-size: 0.88rem; font-weight: 500; color: var(--v2-accent-ink); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--v2-ease); } .v2-blog-all:hover { border-bottom-color: var(--v2-accent-ink); } .v2-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .v2-blog-mini { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: var(--v2-surface); text-decoration: none; transition: border-color 0.25s var(--v2-ease), background 0.25s var(--v2-ease), transform 0.25s var(--v2-ease); } .v2-blog-mini:hover { border-color: var(--v2-line-2); background: var(--v2-surface-2); transform: translateY(-2px); } .v2-blog-mini h4 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.35; color: var(--v2-ink); } .v2-blog-mini:hover h4 { text-decoration: underline; text-decoration-color: rgba(139, 92, 246, 0.5); text-underline-offset: 4px; } .v2-blog-chip { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-accent-ink); background: rgba(139, 92, 246, 0.10); border: 1px solid rgba(139, 92, 246, 0.22); border-radius: var(--v2-r-pill); padding: 4px 10px; } .v2-blog-meta { margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--v2-ink-3); } .v2-blog-mini--index { border-style: dashed; background: transparent; } @media (max-width: 920px) { .v2-blog-grid { grid-template-columns: 1fr; } .v2-blog-head { flex-direction: column; align-items: flex-start; gap: 10px; } .v2-blog-mini--index { display: none; } }