/* ================================================================ PORTADA DE fixhubpos.com ================================================================ Cuál de las dos portadas se ve lo decide una clase en que pone js/dominios.js antes de que se pinte nada (fx-taller / fx-saas), así que nadie alcanza a ver la portada del otro dominio ni por un cuadro. fx-dentro la agrega vitrina.js al entrar: con sesión, el dominio del producto ya no es una portada sino el programa. ================================================================ */ html.fx-saas #home-taller { display: none; } html.fx-taller #home-saas { display: none; } /* Con sesión adentro no hay portada que mostrar: manda el programa. */ html.fx-dentro #home-saas { display: none; } /* La vitrina del taller (buscador de productos, carrito, escáner) no es de este dominio mientras no haya sesión: acá abajo no hay catálogo que buscar ni nada que comprar. Con sesión vuelven, porque ahí sí son las herramientas del programa. */ html.fx-saas:not(.fx-dentro) .vit-search-wrap, html.fx-saas:not(.fx-dentro) .vit-carrito-wrapper, html.fx-saas:not(.fx-dentro) #vit-btn-scan-nav, /* "Repara aquí" pide hora en el taller de Talca, y la franja de arriba invita a sumarse a FixHub: las dos son del otro dominio. Acá el visitante ya está adentro del producto — invitarlo a sumarse desde su propia portada es un cartel que no lleva a ninguna parte. */ html.fx-saas:not(.fx-dentro) .vit-agenda-wrapper, html.fx-saas #vit-aviso-home { display: none !important; } #home-saas { max-width: 1080px; margin: 0 auto; padding: 28px 20px 64px; /* Sin esto, en un teléfono angosto una palabra larga del titular ensancha la página entera y aparece scroll horizontal. */ min-width: 0; } /* ── Lo primero que se ve ── */ .saas-hero { text-align: center; padding: 40px 0 46px; } .saas-logo { font-size: 34px; margin-bottom: 18px; } .saas-titulo { margin: 0 0 14px; font-size: clamp(28px, 5vw, 44px); line-height: 1.15; font-weight: 800; color: var(--txt-titulo); letter-spacing: -0.02em; } .saas-sub { max-width: 620px; margin: 0 auto 26px; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: var(--txt-cuerpo); } .saas-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .saas-btn { padding: 12px 22px; border-radius: var(--rm, 10px); border: 1px solid var(--vbor); background: var(--vs2); color: var(--vtx); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color 0.15s var(--ease-apple), background 0.15s var(--ease-apple); } .saas-btn:hover { border-color: var(--color-accent); background: var(--vag2); } .saas-btn-primario { background: var(--color-accent, #8e5ea8); border-color: var(--color-accent, #8e5ea8); color: #fff; } .saas-btn-primario:hover { filter: brightness(1.08); background: var(--color-accent, #8e5ea8); } .saas-hero-nota { margin: 16px 0 0; font-size: 13px; color: var(--txt-sub); } /* ── Secciones ── */ .saas-h2 { margin: 0 0 8px; font-size: clamp(21px, 3.4vw, 28px); font-weight: 700; color: var(--txt-titulo); text-align: center; } .saas-bajada { max-width: 560px; margin: 0 auto 26px; text-align: center; font-size: 15px; line-height: 1.55; color: var(--txt-sub); } .saas-que-hace, .saas-planes, .saas-cierre { padding: 40px 0; } .saas-cierre { text-align: center; } .saas-cierre .saas-btn { margin-top: 4px; } /* minmax(min(260px,100%)) y no minmax(260px): con la pantalla más angosta que 260px la versión sin min() desborda la página. */ .saas-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin-top: 22px; } .saas-tarjeta { padding: 20px; background: var(--vs2); border: 1px solid var(--vbor); border-radius: 14px; min-width: 0; } .saas-tarjeta i { font-size: 22px; color: var(--color-accent, #8e5ea8); } .saas-tarjeta h3 { margin: 10px 0 6px; font-size: 16px; font-weight: 700; color: var(--txt-titulo); } .saas-tarjeta p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--txt-cuerpo); } /* ── Planes ── */ .saas-planes-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; } .saas-plan { position: relative; overflow: hidden; padding: 22px 18px 18px; background: var(--vs2); border: 1px solid var(--vbor); border-radius: 14px; text-align: center; min-width: 0; } .saas-plan-cinta { position: absolute; inset: 0 0 auto 0; height: 4px; } .saas-plan-nombre { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--txt-sub); } .saas-plan-precio { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: var(--txt-titulo); /* El precio y el "al mes" en la misma línea base se leen como una sola cifra rara ("$10.990 al mes" pegado); en dos renglones, no. */ display: flex; flex-direction: column; gap: 2px; } .saas-plan-precio small { font-size: 12px; font-weight: 500; color: var(--txt-sub); } .saas-plan-usuarios { margin: 0; font-size: 13px; color: var(--txt-cuerpo); } .saas-planes-nota { max-width: 620px; margin: 20px auto 0; text-align: center; font-size: 13px; line-height: 1.55; color: var(--txt-sub); }