/* ========================================================= Voxel Assets — tema dark unificado (post-Hero) Conserva markup Saasox; alinea paleta, tipografía y CTAs al shell del Hero (graphite + verde #14C864 + Poppins). ========================================================= */ .main-page-area { --vxl-green: #14c864; --vxl-graphite: #121814; --vxl-surface: #1c1f1d; --vxl-surface-2: #222622; --vxl-border: rgb(255 255 255 / 0.1); --vxl-muted: #a1a1aa; --vxl-text: #f4f4f5; --heading-color: var(--vxl-text); --body-color: var(--vxl-muted); --accent-color: #0c1410; --border-color: var(--vxl-border); --theme-color-1: var(--vxl-green); --theme-color-2: var(--vxl-green); --theme-color-3: #fed91f; --theme-color-4: var(--vxl-green); --theme-color-5: var(--vxl-green); --green-color: var(--vxl-green); --gray-color-1: var(--vxl-surface); --gray-color-2: #121814; --heading-font: var(--font-poppins), "Poppins", system-ui, sans-serif; --body-font: var(--font-poppins), "Poppins", system-ui, sans-serif; --vxl-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; color: var(--body-color); font-family: var(--body-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Único fondo de la página: color plano, sin degradados. Cualquier gradiente aquí cambia de tono según el scroll y hace que dos módulos se vean distintos. La clase vive en y en el wrapper, así que solo pinta. */ body.main-page-area { background-color: var(--vxl-graphite); background-image: none; } div.main-page-area, .main-page-area main { background: transparent; } .main-page-area h1, .main-page-area h2, .main-page-area h3, .main-page-area h4, .main-page-area h5, .main-page-area h6 { color: var(--heading-color); font-family: var(--heading-font); } .main-page-area p, .main-page-area li, .main-page-area label { color: var(--body-color); font-family: var(--body-font); } .main-page-area a { color: inherit; } /* ----- Fondos de sección ----- */ .main-page-area .cs_gray_bg_2 { background-color: #121814 !important; } .main-page-area .cs_white_bg { background-color: var(--vxl-surface) !important; } .main-page-area .cs_accent_bg { background-color: #0c1410 !important; } .main-page-area #interes, .main-page-area #faq, .main-page-area #problema, .main-page-area #como-funciona, .main-page-area #mercado, .main-page-area #transparencia, .main-page-area #desarrolladoras { background: transparent; } /* Divisor entre módulos. El selector de hermanos deja sin línea el empalme con el hero, que se resuelve con el degradado del propio hero. */ .main-page-area main > section + section { border-width: 1px 0 0; border-style: solid; border-image: linear-gradient( to right, transparent 0%, rgb(255 255 255 / 0.09) 15%, rgb(255 255 255 / 0.09) 85%, transparent 100% ) 1; } .main-page-area .cs_footer.cs_style_1 { background-image: none !important; background-color: #0a0f0c !important; } /* ----- Cards / surfaces ----- */ .main-page-area .cs_feature_item.cs_white_bg { background: var(--vxl-surface) !important; border: 1px solid var(--vxl-border); box-shadow: none; } .main-page-area .cs_features_items_wrapper .cs_feature_item:first-child { background-color: #0c1410 !important; background-image: none !important; border: 1px solid rgb(20 200 100 / 0.28); } .main-page-area .cs_card.cs_style_1.cs_type_3 { background: var(--vxl-surface); border: 1px solid var(--vxl-border); border-radius: 20px; padding: 32px 24px; } @media (min-width: 992px) { .main-page-area .cs_card.cs_style_1.cs_type_3 { padding: 48px 40px; } } .main-page-area .cs_iconbox.cs_style_2 { background: transparent; border-bottom: 1px solid var(--vxl-border); padding-bottom: 28px; margin-bottom: 28px; } .main-page-area .cs_iconbox.cs_style_2:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .main-page-area .cs_iconbox.cs_style_1 .cs_iconbox_info p, .main-page-area .cs_iconbox.cs_style_2 p, .main-page-area .cs_card_desc, .main-page-area .cs_feature_item p { color: var(--vxl-muted) !important; } /* ----- Subtítulos de sección (sin gradiente púrpura) ----- */ .main-page-area .cs_section_heading.cs_style_1 .cs_section_subtitle { color: var(--vxl-green) !important; border-color: transparent; } .main-page-area .cs_section_heading.cs_style_1 .cs_section_subtitle::before, .main-page-area .cs_section_heading.cs_style_1 .cs_section_subtitle::after, .main-page-area .cs_card.cs_style_1.cs_type_4 .cs_section_subtitle::after { background: linear-gradient( 90deg, transparent, rgb(20 200 100 / 0.55), transparent ) !important; } .main-page-area .cs_section_heading.cs_style_1 .cs_section_subtitle img { filter: brightness(0) saturate(100%) invert(64%) sepia(74%) saturate(514%) hue-rotate(93deg) brightness(96%) contrast(92%); } /* ----- Iconos / chips ----- */ .main-page-area .cs_bg_1, .main-page-area .cs_bg_2, .main-page-area .cs_bg_3, .main-page-area .cs_bg_00, .main-page-area .cs_iconbox_icon.cs_accent_bg, .main-page-area .cs_iconbox_icon.cs_bg_1, .main-page-area .cs_iconbox_icon.cs_bg_2, .main-page-area .cs_iconbox_icon.cs_bg_3, .main-page-area .cs_feature_icon.cs_bg_00, .main-page-area .cs_feature_icon.cs_bg_1 { background: rgb(20 200 100 / 0.14) !important; box-shadow: none !important; } .main-page-area .cs_theme_color_4 { color: var(--vxl-green) !important; } .main-page-area .cs_list.cs_style_2 .cs_list_icon { color: var(--vxl-green) !important; } /* ----- Botones Saasox → estilo VXL ----- */ .main-page-area .cs_btn.cs_style_1 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 22px !important; border-radius: 0 !important; border: 0 !important; background: var(--vxl-green) !important; color: #fff !important; font-family: var(--body-font) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; transition: opacity 0.2s ease; } .main-page-area .cs_btn.cs_style_1.cs_bg_1, .main-page-area .cs_btn.cs_style_1.cs_theme_bg_4 { background: var(--vxl-green) !important; color: #fff !important; } .main-page-area .cs_btn.cs_style_1:hover, .main-page-area .cs_btn.cs_style_1:hover.cs_bg_1, .main-page-area .cs_btn.cs_style_1:hover.cs_theme_bg_4 { opacity: 0.9; background: var(--vxl-green) !important; color: #fff !important; } .main-page-area .cs_btn.cs_style_1 .cs_btn_icon { background: transparent !important; width: auto; height: auto; } .main-page-area .cs_btn.cs_style_1 i { color: #fff !important; transform: none !important; } /* Placeholders de imagen del template: menos “SaaS stock” */ .main-page-area .cs_card_thumbnail img, .main-page-area .cs_process_thumbnail img { background: #1a1f1c; border: 1px solid var(--vxl-border); } /* ----- Footer ----- */ .main-page-area .cs_footer a:hover { color: var(--vxl-green) !important; } .main-page-area .vxl-footer-brand { display: inline-flex; align-items: center; gap: 10px; } .main-page-area .vxl-footer-brand img:first-child { width: 45px; height: 45px; object-fit: contain; } .main-page-area .vxl-footer-brand img:last-child { height: 32.5px; width: auto; object-fit: contain; filter: brightness(0) invert(1); } /* ----- Decoraciones Saasox: atenuar (hero es limpio) ----- */ .main-page-area .cs_feature_shape_1, .main-page-area .cs_feature_shape_2, .main-page-area .cs_star_shape_4, .main-page-area .cs_star_shape_5, .main-page-area .cs_vector_shape, .main-page-area .cs_process_thumbnail { opacity: 0.22; filter: grayscale(0.4) saturate(0.6); pointer-events: none; } /* Thumbnails de producto: un poco más presentes */ .main-page-area .cs_card_thumbnail { opacity: 0.92; filter: none; } .main-page-area .cs_card_thumbnail img { border-radius: 12px; } /* ----- #problema ----- */ .vxl-problem-eyebrow, .vxl-problem-note { font-family: var(--vxl-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6f8479; } /* main.css fija h3 en 30px sin capas, así que hay que ganarle acá */ .main-page-area .vxl-problem-side-title { margin: 18px 0 0; font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: #fafafa; } @media (min-width: 768px) { .main-page-area .vxl-problem-side-title { font-size: 1.5rem; } } /* ----- #faq ----- */ .main-page-area .vxl-faq-toggle { border: 0; background: transparent; padding-inline: 0; } .vxl-faq-num { flex-shrink: 0; font-family: var(--vxl-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--vxl-green); } .main-page-area .vxl-faq-mail { font-family: var(--vxl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #8fa89a; transition: color 0.25s ease; } .main-page-area .vxl-faq-mail:hover { color: var(--vxl-green); } /* ========================================================= #interes — registro con fondo líquido animado Las reglas van prefijadas con .main-page-area porque main.css estiliza input/label/select sin capas y gana por especificidad. ========================================================= */ .main-page-area .vxl-access { position: relative; isolation: isolate; overflow: hidden; } .vxl-access-defs { position: absolute; width: 0; height: 0; pointer-events: none; } .vxl-access-stage { position: absolute; inset: 0; z-index: 0; opacity: 0.34; pointer-events: none; } .vxl-access-blob { position: absolute; aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle at 34% 28%, #1ed177 0%, #0e8f4b 42%, #053f22 100% ); /* El desenfoque propio le da "alcance" al borde para encontrarse con el de al lado; sin él el gooey no tiene qué fusionar. */ filter: blur(22px); animation: vxl-access-float 22s infinite alternate ease-in-out; transition: margin 0.35s ease-out; } /* Desplazamiento en % del propio blob: se separan y vuelven a juntarse sin depender del tamaño de la pantalla. */ @keyframes vxl-access-float { 0% { transform: translate(0, 0) scale(1); } 30% { transform: translate(16%, 20%) scale(1.14); } 60% { transform: translate(-14%, 9%) scale(0.88); } 100% { transform: translate(10%, -15%) scale(1.08); } } .vxl-access-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 640px 70% at 50% 50%, rgb(18 24 20 / 0.9) 0%, rgb(18 24 20 / 0.62) 55%, rgb(18 24 20 / 0) 100% ); } .vxl-access-inner { position: relative; z-index: 1; } .main-page-area .vxl-access-title { margin: 0; font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; } .main-page-area .vxl-access-sub { margin: 18px 0 0; max-width: 34rem; font-size: 15px; line-height: 1.65; } /* ----- Selector de audiencia ----- */ .vxl-access-tabs { display: flex; gap: 28px; margin-top: 34px; } .main-page-area .vxl-access-tabs button { position: relative; padding: 0 0 10px; border: 0; background: transparent; font-family: var(--vxl-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #8fa89a; cursor: pointer; transition: color 0.3s ease; } .main-page-area .vxl-access-tabs button::after { content: ""; position: absolute; inset: auto auto 0 0; width: 0; height: 1.5px; background: var(--vxl-green); box-shadow: 0 0 12px var(--vxl-green); transition: width 0.45s cubic-bezier(0.2, 1, 0.3, 1); } .main-page-area .vxl-access-tabs button[aria-selected="true"] { color: #fafafa; } .main-page-area .vxl-access-tabs button[aria-selected="true"]::after { width: 100%; } /* ----- Campos ----- */ .vxl-access-grid { display: grid; grid-template-columns: 1fr; gap: 0 30px; margin-top: 8px; } @media (min-width: 640px) { .vxl-access-grid { grid-template-columns: 1fr 1fr; } } .vxl-access-field-wide { grid-column: 1 / -1; } .vxl-access-field { margin-top: 30px; transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1); } .vxl-access-field:focus-within { transform: translateX(8px); } .main-page-area .vxl-access-field label { display: block; margin-bottom: 8px; font-family: var(--vxl-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #b3c6bb; } .vxl-access-control { position: relative; } /* Sobre el fondo líquido un subrayado solo no basta para leer el campo: lleva además un relleno oscuro muy tenue que delimita el área. */ .main-page-area .vxl-access-control :is(input, select, textarea) { width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid rgb(255 255 255 / 0.32); border-radius: 0; background-color: rgb(6 10 8 / 0.5); color: #fafafa; font-family: inherit; font-size: 16px; line-height: 1.5; outline: none; transition: border-color 0.3s ease, background-color 0.3s ease; } /* background-color, no el atajo `background`: el select lleva el chevron como background-image y el atajo lo borraría en hover/focus. */ .main-page-area .vxl-access-control :is(input, select, textarea):hover { background-color: rgb(6 10 8 / 0.68); } .main-page-area .vxl-access-control :is(input, select, textarea):focus { background-color: rgb(6 10 8 / 0.78); border-bottom-color: transparent; } .main-page-area .vxl-access-control textarea { resize: vertical; min-height: 76px; } .main-page-area .vxl-access-control select { appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; } .main-page-area .vxl-access-control select option { background: #121814; color: #fafafa; } .main-page-area .vxl-access-control ::placeholder { color: #74897d; } .vxl-access-glow { position: absolute; inset: auto auto 0 0; width: 0; height: 2px; background: var(--vxl-green); box-shadow: 0 0 15px var(--vxl-green); transition: width 0.6s cubic-bezier(0.2, 1, 0.3, 1); pointer-events: none; } .vxl-access-control :is(input, select, textarea):focus ~ .vxl-access-glow { width: 100%; } .vxl-access-error { display: block; margin-top: 8px; font-size: 12.5px; color: #f97066; } /* ----- Envío ----- */ .vxl-access-submit { position: relative; margin-top: 44px; } .vxl-access-drop { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border-radius: 999px; background: var(--vxl-green); filter: blur(16px); opacity: 0.4; pointer-events: none; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease; } .vxl-access-submit:hover .vxl-access-drop { transform: translate(-50%, -50%) scale(1.06, 1.4); opacity: 0.65; } .main-page-area .vxl-access-submit button { position: relative; z-index: 1; width: 100%; padding: 19px 40px; border: 0; border-radius: 0; background: var(--vxl-green); color: #06120b; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: letter-spacing 0.3s ease; } .main-page-area .vxl-access-submit button:hover { letter-spacing: 0.2em; } .main-page-area .vxl-access-submit button:disabled { cursor: progress; opacity: 0.65; letter-spacing: 0.12em; } .vxl-access-status { margin-top: 16px; font-size: 14px; } .vxl-access-status.is-ok { color: var(--vxl-green); } .vxl-access-status.is-error { color: #f97066; } @media (prefers-reduced-motion: reduce) { .vxl-access-blob { animation: none; } .vxl-access-field, .vxl-access-drop, .vxl-access-glow, .main-page-area .vxl-access-submit button, .main-page-area .vxl-access-tabs button::after { transition: none; } }