/* ============================================================ PX Sales — landing comercial (hero con selector Team/AI, visual 3D ambiental, secciones de producto y precios). Se apoya en los tokens y componentes de styles.css. ============================================================ */ /* Respaldo con métricas de Poppins: evita que el texto se reacomode (CLS) cuando llega la fuente web (display=swap). */ @font-face { font-family: 'Poppins Fallback'; src: local('Arial'); ascent-override: 92.83%; descent-override: 30.94%; line-gap-override: 8.84%; size-adjust: 113.14%; } :root { --font-display: 'Poppins', 'Poppins Fallback', system-ui, sans-serif; --font-body: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, sans-serif; } html { overflow-x: clip; } body { background: radial-gradient(1100px 620px at 82% -8%, rgba(30, 107, 255, .16), transparent 62%), radial-gradient(900px 520px at -10% 8%, rgba(255, 106, 0, .09), transparent 60%), var(--bg); background-repeat: no-repeat; } h1, h2, h3 { letter-spacing: -.02em; } .skip-link { position: absolute; left: 1rem; top: -60px; z-index: 1000; background: var(--px-blue-600); color: #fff; padding: .6rem 1rem; border-radius: 10px; } .skip-link:focus { top: 1rem; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 8px; } /* ---------- nav ---------- */ .nav { background: rgba(6, 11, 22, .72); backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--border); } :root[data-theme='light'] .nav { background: rgba(246, 248, 252, .82); } .nav-login { font-size: .92rem; font-weight: 500; color: var(--fg-muted); padding: .55rem .6rem; border-radius: 99px; } .nav-login:hover { color: var(--fg); } #navCta { min-height: 44px; padding: .6rem 1.15rem; font-size: .9rem; } @media (max-width: 1023px) { .nav-login { display: none; } } @media (max-width: 620px) { #navCta { display: inline-flex; min-height: 40px; padding: .5rem .95rem; font-size: .86rem; } .theme-btn { display: none; } .nav-logo img { height: 24px; } } /* ---------- hero ---------- */ .hero { padding: calc(var(--nav-h, 72px) + clamp(1.25rem, 3vw, 2.25rem)) 0 clamp(2rem, 4vw, 3rem); position: relative; } .hero-grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } } .hero-copy h1 { font-size: clamp(1.9rem, 3.3vw, 3.05rem); line-height: 1.08; font-weight: 700; margin: .9rem 0 .8rem; max-width: 19ch; text-wrap: balance; } .hero-sub { color: var(--fg-muted); font-size: clamp(1rem, 1.2vw, 1.12rem); max-width: 54ch; margin: 0; } .hero-q { font-weight: 600; margin: 1.25rem 0 .7rem; font-size: 1rem; } .hero-cta { margin-top: 1.1rem; } .hero-cta .btn-lg { min-height: 52px; padding: .85rem 1.6rem; } .hero-fine { color: var(--fg-dim); font-size: .82rem; margin: .7rem 0 0; min-height: 1.2em; } /* Team visible solo con el flag (clase puesta en por catalog.js) */ html:not(.team-on) [data-team-only] { display: none !important; } html.team-on [data-team-hidden] { display: none !important; } /* selector de necesidad */ .picker { display: grid; gap: .8rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 640px) { .picker { grid-template-columns: 1fr 1fr; } html:not(.team-on) .picker { grid-template-columns: 1fr; } } html:not(.team-on) .picker { margin-top: 1.1rem; } [data-variant='ai'] .pick-ai { order: -1; } .pick-price b { display: inline-block; min-width: 5.4ch; } .pick { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.05rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-elev); backdrop-filter: blur(14px); transition: border-color var(--t-mid), transform var(--t-mid) var(--e-out), box-shadow var(--t-mid); } .pick:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); } .pick-ai { border-color: rgba(255, 106, 0, .45); background: linear-gradient(160deg, rgba(255, 106, 0, .09), var(--bg-elev) 55%); } .pick-team { background: linear-gradient(160deg, rgba(30, 107, 255, .1), var(--bg-elev) 55%); } .pick-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .pick-name { font-weight: 700; font-size: .98rem; } .pick-badge { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 99px; white-space: nowrap; } .pick-team .pick-badge { color: var(--px-blue-400); background: rgba(30, 107, 255, .14); } .pick-ai .pick-badge { color: var(--px-orange-400); background: rgba(255, 106, 0, .14); } .pick-title { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: .1rem 0 0; } .pick-text { color: var(--fg-muted); font-size: .84rem; line-height: 1.45; margin: 0; } .pick-quick { color: var(--fg-dim); font-size: .76rem; margin: 0; } .pick-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .45rem; } .pick-price { font-size: .86rem; color: var(--fg-muted); } .pick-price b { font-size: 1.28rem; color: var(--fg); font-weight: 700; letter-spacing: -.02em; } .pick .btn { min-height: 42px; padding: .55rem 1rem; font-size: .86rem; } @media (min-width: 1024px) and (max-height: 820px) { .pick-text { display: none; } .hero-copy h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); } } /* visual 3D */ .hero-visual { position: relative; perspective: 1400px; } .hv-frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-strong); background: #EEF1F6; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s linear; } .hv-poster, .hero-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-visual canvas { opacity: 0; transition: opacity .6s var(--e-out); } .hero-visual.is-live canvas { opacity: 1; } .hv-glow { position: absolute; inset: 12% 8% -10%; z-index: -1; filter: blur(60px); opacity: .55; background: radial-gradient(ellipse at 30% 40%, rgba(30, 107, 255, .7), transparent 60%), radial-gradient(ellipse at 75% 70%, rgba(255, 106, 0, .55), transparent 60%); } @media (min-width: 1024px) { .hv-frame { aspect-ratio: 4 / 3.35; } } @media (max-width: 1023px) { .hero-visual { max-width: 640px; } .hv-frame { aspect-ratio: 16 / 8; } } /* franja de confianza */ .trust-strip { border-block: 1px solid var(--border); background: var(--bg-elev); } .trust-strip .container { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; padding: .95rem 0; } .trust-strip span { font-size: .84rem; color: var(--fg-muted); display: inline-flex; align-items: center; gap: .45rem; } .trust-strip span::before { content: '✓'; color: var(--px-green); font-weight: 700; } /* ---------- recorrido de producto ---------- */ .tour { max-width: 1040px; margin-inline: auto; } .tour-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 1.25rem; } .tour-tabs button { padding: .6rem 1.05rem; min-height: 44px; border-radius: 99px; font-size: .9rem; font-weight: 500; color: var(--fg-muted); border: 1px solid var(--border); background: var(--bg-elev); transition: all var(--t-mid) var(--e-out); } .tour-tabs button:hover { color: var(--fg); border-color: var(--border-strong); } .tour-tabs button.on { color: #fff; border-color: transparent; background: linear-gradient(110deg, var(--px-blue-600), #387EFF); } .tour-frame .frame-body { aspect-ratio: 900 / 520; position: relative; overflow: hidden; } .tour-frame .ui { position: absolute; top: 0; left: 0; width: 900px; transform-origin: 0 0; opacity: 1; } .tour-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } .tour-cap { text-align: center; color: var(--fg-muted); max-width: 62ch; margin: 1.1rem auto 0; font-size: .95rem; } .tour-cap b { display: block; color: var(--fg); font-size: 1.02rem; } .ui-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ui-flow-col { display: grid; gap: 6px; align-content: start; } .ui-flow-col small { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); } .ui-flow-col span { font-size: 10px; padding: 8px 10px; border-radius: 9px; background: var(--bg-elev-2); border: 1px solid var(--border); } .ui-flow-col:last-child span { border-color: rgba(30, 107, 255, .45); } .bubble.pop { animation: pop .4s var(--e-out) both; } @keyframes pop { from { opacity: 0; transform: translateY(10px); } } /* ---------- Team / AI ---------- */ .family-section { border-top: 1px solid var(--border); } .family-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); } @media (min-width: 960px) { .family-grid { grid-template-columns: 1fr 1fr; } .family-grid.reverse > :first-child { order: 2; } } .family-copy h2 { font-size: var(--fs-h2); margin: 1rem 0 .9rem; line-height: 1.1; } .family-copy p { color: var(--fg-muted); max-width: 52ch; } .family-note { font-size: .92rem; color: var(--fg-dim) !important; } .family-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; } .family-from { color: var(--fg-muted); font-size: .95rem; } .family-from b { color: var(--fg); font-size: 1.25rem; } .team-diagram { display: grid; justify-items: center; gap: .3rem; padding: 1.6rem; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--bg-elev); } .td-node { padding: .7rem 1.2rem; border-radius: 14px; font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: .55rem; } .td-wa { background: rgba(37, 211, 102, .14); color: #6EE7A0; border: 1px solid rgba(37, 211, 102, .35); } .td-px { background: var(--surface); border: 1px solid var(--border-strong); } .td-px img { width: 28px; height: auto; } .td-line { width: 2px; height: 26px; background: linear-gradient(var(--px-blue-600), var(--px-orange-600)); } .td-agents { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; } .td-agents li { display: grid; justify-items: center; gap: .3rem; font-size: .78rem; color: var(--fg-muted); padding: .6rem .7rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); min-width: 82px; } .td-agents span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; background: linear-gradient(140deg, var(--px-blue-600), var(--px-blue-400)); } .td-agents li:nth-child(even) span { background: linear-gradient(140deg, var(--px-orange-600), var(--px-orange-400)); } .ai-flow { list-style: none; margin: 0; padding: 1.4rem; display: grid; gap: .5rem; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--bg-elev); } .ai-flow li { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); font-weight: 500; } .ai-flow li span { font-size: .72rem; font-weight: 700; color: var(--px-blue-400); } .ai-flow li.hl { border-color: rgba(255, 106, 0, .55); background: linear-gradient(100deg, rgba(255, 106, 0, .14), var(--bg)); } .benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .benefits li { padding: 1rem 1.1rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-elev); } .benefits b { display: block; font-size: .96rem; font-weight: 600; } .benefits span { color: var(--fg-muted); font-size: .88rem; line-height: 1.45; } /* ---------- precios ---------- */ .family-switch { display: flex; justify-content: center; gap: .5rem; margin: 0 auto 1.8rem; flex-wrap: wrap; } .family-switch button { display: grid; text-align: left; padding: .7rem 1.2rem; min-height: 56px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-elev); font-weight: 700; font-size: 1rem; color: var(--fg-muted); transition: all var(--t-mid) var(--e-out); } .family-switch button small { font-weight: 500; font-size: .74rem; color: var(--fg-dim); } .family-switch button.on { color: var(--fg); border-color: var(--px-blue-600); background: rgba(30, 107, 255, .12); box-shadow: 0 0 0 1px var(--px-blue-600); } .bill-toggle-wrap { display: flex; justify-content: center; } .bill-toggle { margin-bottom: 2rem; } .price .amount .from { font-size: .9rem; color: var(--fg-muted); align-self: center; } .prices-team .price .desc { display: none; } @media (min-width: 1200px) { .prices-team { grid-template-columns: repeat(4, 1fr); } } .pricing-tools { text-align: center; margin-top: 1.8rem; } .compare-toggle { color: var(--px-blue-400); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; padding: .4rem .8rem; } .comparison { margin-top: 1rem; overflow-x: auto; text-align: left; border: 1px solid var(--border); border-radius: var(--r-lg); } .comparison > div { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--border); font-size: .85rem; min-width: 640px; } .comparison > div:first-child { border-top: 0; font-weight: 700; } .comparison span { color: var(--fg-muted); } .calc-details { max-width: 760px; margin: 1.5rem auto 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elev); } .calc-details summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; min-height: 44px; } .calc-details .calc-panel { display: grid; gap: .8rem; padding: 0 1.2rem 1.2rem; } .calc-details label { display: grid; gap: .3rem; font-size: .88rem; color: var(--fg-muted); } .calc-details input { min-height: 44px; padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--fg); font: inherit; } .calc-details #calcResult { font-size: .9rem; color: var(--fg); margin: 0; } /* ---------- comparación Team vs AI ---------- */ .vs-wrap { max-width: 720px; margin-inline: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elev); } .vs-table { width: 100%; border-collapse: collapse; font-size: .92rem; } .vs-table th, .vs-table td { padding: .75rem 1rem; border-top: 1px solid var(--border); text-align: center; } .vs-table thead th { border-top: 0; font-size: .95rem; } .vs-table tbody th { text-align: left; font-weight: 500; color: var(--fg-muted); } .vs-table .yes { color: var(--px-green); font-weight: 700; } .vs-table .no { color: var(--fg-dim); } .vs-table .vs-price td, .vs-table .vs-price th { font-weight: 700; color: var(--fg); } .vs-choose { max-width: 720px; margin: 1.4rem auto 0; display: grid; gap: .5rem; color: var(--fg-muted); text-align: center; } .vs-choose b { color: var(--fg); font-weight: 600; } /* ---------- testimonios / FAQ / CTA / footer ---------- */ .quote { margin: 0; } .quote blockquote { margin: 0 0 1.2rem; color: var(--fg-muted); } .quote figcaption { display: flex; align-items: center; gap: .8rem; } .faq { max-width: 820px; margin-inline: auto; } .faq-h { margin: 0; font-size: inherit; font-weight: inherit; } .faq-q { width: 100%; text-align: left; } .cta-help { margin-top: 1.4rem !important; font-size: .95rem; } .cta-help a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .foot-h { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 1rem; font-family: var(--font-body); font-weight: 700; } .foot-col span { color: var(--fg-muted); font-size: .92rem; } /* WhatsApp de ayuda: etiqueta en escritorio, discreto en móvil */ .wa-fab { width: auto; min-width: 56px; padding: 0 1.1rem 0 .95rem; border-radius: 99px; display: inline-flex; gap: .5rem; font-weight: 600; font-size: .9rem; } .wa-fab::before { border-radius: 99px; } @media (max-width: 767px) { .wa-fab { width: 50px; height: 50px; min-width: 0; padding: 0; justify-content: center; bottom: 16px; } .wa-fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wa-fab::before { display: none; } /* en móvil no tapa el hero: aparece junto con la barra fija, encima de ella */ .wa-fab { opacity: 0; pointer-events: none; transform: translateY(12px); } html.mbar-visible .wa-fab { bottom: 84px; opacity: 1; pointer-events: auto; transform: none; } } /* barra fija móvil */ .m-bar { display: none; } @media (max-width: 767px) { .m-bar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; padding: .65rem 16px calc(.65rem + env(safe-area-inset-bottom)); background: var(--glass); backdrop-filter: blur(20px); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform var(--t-mid) var(--e-out); } .m-bar.show { transform: none; } .m-bar .btn { min-height: 46px; } } /* ---------- móvil: primero el contenido comercial ---------- */ @media (max-width: 1023px) { .hero-visual { order: 2; margin-inline: auto; width: 100%; } } @media (max-width: 639px) { .container { width: calc(100% - 32px); } .hero { padding-top: calc(var(--nav-h, 64px) + .9rem); } .hero-copy h1 { font-size: 1.72rem; margin: .6rem 0 .55rem; } .hero-sub { font-size: .95rem; } .hero-q { margin: .9rem 0 .5rem; } .pick { padding: .85rem .9rem; } .pick-text { display: none; } .pick-foot .btn { width: auto; } .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .hero-cta .btn { width: 100%; min-height: 48px; padding: .6rem .8rem; font-size: .92rem; } .eyebrow { font-size: .66rem; padding: .3rem .7rem; } } @media (max-width: 380px) { .hero-copy .eyebrow { display: none; } /* el logo del nav ya dice PX Sales */ .hero-copy h1 { font-size: 1.6rem; margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .hv-frame { transform: none !important; } .pick:hover { transform: none; } }