/* ════════════════════════════════════════════════════════════════════════════ APEX Flow — CAPA DE MOVIMIENTO Y VIDA de la portada (2026-08-24) Archivo: css/apex-flow-motion.css ──────────────────────────────────────────────────────────────────────────── QUÉ ES. Todo lo que le da vida a `front-page-flow.php`: entradas al hacer scroll, parallax, hover, microinteracciones, el triángulo animado y las secciones nuevas del inventario Pro. Se carga DESPUÉS de apex-flow.css y NO reescribe nada de ahí — solo agrega. Si este archivo no cargara, la portada sigue siendo la de siempre, entera y legible: todo lo de acá es progresivo. POR QUÉ UN ARCHIVO APARTE Y NO DENTRO DE apex-flow.css · apex-flow.css lo comparten /flow/, /flow/pro/ y /lab/ (el CTA bloqueado). El movimiento de la portada no tiene por qué viajar a esas tres. · Deja el rollback en una línea del enqueue, sin tocar la portada. ── LAS TRES REGLAS QUE NO SE NEGOCIAN ──────────────────────────────────── 1. SOLO SE ANIMAN `transform` Y `opacity`. Nada de animar width/height/top/ left/filter en scroll: eso vuelve a hacer layout en cada frame y en un teléfono de gama media se ve peor que no animar nada. 2. `prefers-reduced-motion` APAGA TODO — no lo suaviza, lo apaga. Está al final del archivo, en un solo bloque, para que nadie agregue una animación nueva y se olvide de cubrirla. 3. NADA APARECE POR JAVASCRIPT. El contenido está visible por CSS y el JS solo agrega la clase que lo anima (ver `.js-motion` en el ). Si el JS falla o tarda, la página se ve completa igual — nunca en blanco. Escala de tiempos (una sola, para que todo se sienta del mismo producto): rápido 180ms (hover) · medio 420ms (entradas) · lento 700ms (fondos) curva: cubic-bezier(.22,1,.36,1) — sale rápido y frena suave ════════════════════════════════════════════════════════════════════════════ */ :root{ --mo-fast:180ms; --mo-mid:420ms; --mo-slow:700ms; --mo-ease:cubic-bezier(.22,1,.36,1); } /* ══════════════════════════════════════════════════════════════════════════ 1 · ENTRADAS AL HACER SCROLL ────────────────────────────────────────────────────────────────────────── El elemento nace con `[data-reveal]`. El JS le pone `.is-in` cuando entra en pantalla. SIN JS (`html:not(.js-motion)`) nunca se esconde nada: por eso el estado oculto está condicionado a `.js-motion`, y no al revés. `--d` es el retraso en ms de la entrada escalonada; lo escribe el JS por elemento, así que un grid de 8 tarjetas no necesita 8 reglas CSS. ══════════════════════════════════════════════════════════════════════════ */ .js-motion [data-reveal]{ opacity:0; transition:opacity var(--mo-mid) var(--mo-ease) var(--d,0ms), transform var(--mo-mid) var(--mo-ease) var(--d,0ms), filter var(--mo-mid) var(--mo-ease) var(--d,0ms); will-change:opacity,transform; } .js-motion [data-reveal="up"] { transform:translate3d(0,26px,0) } .js-motion [data-reveal="down"] { transform:translate3d(0,-22px,0) } .js-motion [data-reveal="left"] { transform:translate3d(-30px,0,0) } .js-motion [data-reveal="right"] { transform:translate3d(30px,0,0) } .js-motion [data-reveal="zoom"] { transform:scale(.94) } .js-motion [data-reveal="blur"] { transform:translate3d(0,14px,0);filter:blur(9px) } /* "rise" es el del hero: sube MÁS y desenfoca — se usa poco, en 4 o 5 líneas de texto, porque es el más caro de los seis y el más notorio. */ .js-motion [data-reveal="rise"] { transform:translate3d(0,34px,0);filter:blur(6px) } .js-motion [data-reveal].is-in{ opacity:1; transform:none; filter:none; } /* Una vez adentro deja de reservar capa de compositor: mantener will-change en 40 elementos "por si acaso" es memoria de GPU tirada. */ .js-motion [data-reveal].is-in{ will-change:auto } /* ══════════════════════════════════════════════════════════════════════════ 2 · BARRA DE PROGRESO DE LECTURA + NAV QUE REACCIONA ══════════════════════════════════════════════════════════════════════════ */ .apex-mo-progress{ position:fixed;top:0;left:0;right:0;height:2px;z-index:1200; background:transparent;pointer-events:none; } .apex-mo-progress i{ display:block;height:100%;width:100%; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--accent),#7de3ff); box-shadow:0 0 12px var(--accent-glow); } /* ⚠️ NO SE TOCA EL `position` DE .nav. Está en `fixed` desde apex-home.css (línea 67) y el hero calcula su padding-top contando con esa barra fuera del flujo. La primera versión de este archivo la pasó a `sticky` y el resultado fue la barra flotando en mitad de la pantalla con el hero vacío arriba — encontrado en pantalla, no razonando. Acá SOLO se anima cómo se ve, nunca dónde está. Lo que cambia: arriba de todo la barra es transparente (el hero se lee entero, sin una franja opaca cortándolo) y al primer scroll aparece el fondo con blur, que es cuando de verdad hace falta para separar la barra del contenido que pasa por debajo. */ body.apex-flow-home .nav{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; transition:background var(--mo-mid) var(--mo-ease), border-color var(--mo-mid) var(--mo-ease); } body.apex-flow-home.is-scrolled .nav{ background:rgba(6,15,20,.86); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--border); } /* ══════════════════════════════════════════════════════════════════════════ 3 · EL FONDO VIVO DEL HERO ────────────────────────────────────────────────────────────────────────── Tres capas, de atrás hacia adelante: a) dos orbes de luz que se desplazan con el scroll (parallax lento) b) una grilla que se aleja en perspectiva c) el canvas de la malla de puntos (lo dibuja el JS) Todas `pointer-events:none` y `aria-hidden` en el HTML: son decorado, no contenido. Y todas viven DENTRO del hero, no en el , para que al salir del hero dejen de existir en vez de seguir pintando toda la página. ══════════════════════════════════════════════════════════════════════════ */ .apex-mo-hero-fx{ position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0; /* El degradado de abajo funde el fondo vivo con la sección siguiente para que no haya un corte visible donde termina el hero. */ -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 62%,transparent 100%); } .apex-mo-orb{ position:absolute;border-radius:50%;filter:blur(90px);opacity:.34; will-change:transform; } .apex-mo-orb.a{ width:min(56vw,620px);aspect-ratio:1;left:-12%;top:-18%; background:radial-gradient(circle,rgba(200,255,0,.20),transparent 68%); animation:apexMoDrift 22s ease-in-out infinite alternate; } .apex-mo-orb.b{ width:min(48vw,540px);aspect-ratio:1;right:-14%;top:6%; background:radial-gradient(circle,rgba(60,190,230,.16),transparent 68%); animation:apexMoDrift 28s ease-in-out infinite alternate-reverse; } @keyframes apexMoDrift{ from{ transform:translate3d(0,0,0) scale(1) } to { transform:translate3d(4%,5%,0) scale(1.12) } } /* Grilla en perspectiva. Es un solo elemento con dos degradados repetidos: más barato que un SVG y se escala solo. La perspectiva la da el rotateX sobre el padre, no una imagen dibujada en falso. */ .apex-mo-grid{ position:absolute;left:-25%;right:-25%;bottom:-30%;height:120%; background-image: linear-gradient(to right, rgba(200,255,0,.075) 1px, transparent 1px), linear-gradient(to bottom, rgba(200,255,0,.075) 1px, transparent 1px); background-size:64px 64px; transform:perspective(560px) rotateX(62deg) translate3d(0,0,0); transform-origin:50% 100%; -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 85%,#000,transparent 72%); mask-image:radial-gradient(ellipse 65% 55% at 50% 85%,#000,transparent 72%); opacity:.55; animation:apexMoGrid 9s linear infinite; will-change:background-position; } /* Se mueve una celda entera y vuelve a empezar: el bucle queda invisible porque 64px es exactamente el paso de la grilla. */ @keyframes apexMoGrid{ from{ background-position:0 0, 0 0 } to { background-position:0 64px, 0 64px } } .apex-mo-canvas{ position:absolute;inset:0;width:100%;height:100%; /* .55 y no 1: la malla es TEXTURA. Si compite con el H1, dejó de ser fondo y pasó a ser ruido — probado en pantalla, no calculado. */ opacity:.55; } /* El hero pasa a ser el contenedor de posicionamiento y su contenido sube sobre el decorado. `isolation` evita que los blur de los orbes se mezclen con lo de abajo en Safari. */ body.apex-flow-home .apex-flow-hero{ position:relative;isolation:isolate; } body.apex-flow-home .apex-flow-hero > *:not(.apex-mo-hero-fx){ position:relative;z-index:1 } /* ══════════════════════════════════════════════════════════════════════════ 4 · TIPOGRAFÍA DEL HERO CON VIDA ────────────────────────────────────────────────────────────────────────── El punto lima del H1 (.lx) ya existía; acá late. Es la microinteracción más chica de la página y la que más "está encendido" transmite. ══════════════════════════════════════════════════════════════════════════ */ .apex-flow-hero-h1 .lx{ display:inline-block; animation:apexMoPulse 2.6s ease-in-out infinite; text-shadow:0 0 22px var(--accent-glow); } @keyframes apexMoPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50% { transform:scale(1.18);opacity:.72 } } /* ══════════════════════════════════════════════════════════════════════════ 5 · BOTONES — barrido de luz + respuesta al clic ══════════════════════════════════════════════════════════════════════════ */ .flow-btn{ position:relative;overflow:hidden;isolation:isolate } .flow-btn::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%); transform:translateX(-120%); transition:transform 620ms var(--mo-ease); } .flow-btn:hover::after,.flow-btn:focus-visible::after{ transform:translateX(120%) } .flow-btn.outline::after{ background:linear-gradient(105deg,transparent 38%,var(--accent-dm) 50%,transparent 62%) } /* La flecha se adelanta al pasar el mouse: dice "esto te lleva a otro lado" sin una palabra más. */ .flow-btn svg{ transition:transform var(--mo-fast) var(--mo-ease) } .flow-btn:hover svg{ transform:translateX(4px) } /* Feedback táctil real: el botón se hunde. En un teléfono es lo único que confirma que el toque entró antes de que cargue la página siguiente. */ .flow-btn:active{ transform:translateY(1px) scale(.985) } .nav .btn-accent,.nav .btn-academia{ transition:transform var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease); } .nav .btn-accent:hover{ transform:translateY(-1px);box-shadow:0 6px 20px var(--accent-glow) } .nav .btn-academia:hover{ border-color:var(--accent-bd);transform:translateY(-1px) } /* ══════════════════════════════════════════════════════════════════════════ 6 · LAS CIFRAS DE CAPACIDAD — contador + tarjeta con brillo que sigue al mouse ────────────────────────────────────────────────────────────────────────── El brillo usa dos variables (--mx/--my) que escribe el JS con la posición del puntero. Es un radial-gradient en un pseudo-elemento, así que no provoca repintado del texto. ══════════════════════════════════════════════════════════════════════════ */ .apex-flow-prueba-item{ position:relative;overflow:hidden; transition:transform var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease); } .apex-flow-prueba-item::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),var(--accent-dm),transparent 70%); opacity:0;transition:opacity var(--mo-fast) var(--mo-ease); } .apex-flow-prueba-item:hover{ transform:translateY(-3px); border-color:var(--accent-bd); box-shadow:0 10px 30px rgba(0,0,0,.35); } .apex-flow-prueba-item:hover::before{ opacity:1 } /* El número se pinta en tabular para que al contar no baile de ancho. */ .apex-flow-prueba-n{ font-variant-numeric:tabular-nums } /* Sufijo (el "+" de "1.939+") en un tamaño menor, pegado al número. */ .apex-flow-prueba-n .suf{ font-size:.62em;vertical-align:super;margin-left:1px } /* ══════════════════════════════════════════════════════════════════════════ 7 · TARJETAS CON INCLINACIÓN 3D ────────────────────────────────────────────────────────────────────────── `[data-tilt]` lo maneja el JS: escribe --rx/--ry en grados. El CSS solo define cómo se aplica, así que apagar el efecto es no correr el JS. Se aplica SOLO con puntero fino (mouse): en táctil no hay hover que sostenga la inclinación y quedaría trabada después de un toque. ══════════════════════════════════════════════════════════════════════════ */ @media (hover:hover) and (pointer:fine){ [data-tilt]{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); transition:transform 260ms var(--mo-ease),border-color var(--mo-fast) var(--mo-ease), box-shadow 260ms var(--mo-ease); transform-style:preserve-3d; } [data-tilt]:hover{ border-color:var(--accent-bd); box-shadow:0 18px 42px rgba(0,0,0,.42); } /* Mientras el dedo/mouse se mueve, el JS pone .is-tilting y se corta la transición: si no, el seguimiento va siempre 260ms atrasado y se siente gelatinoso en vez de preciso. */ [data-tilt].is-tilting{ transition:none } } /* ══════════════════════════════════════════════════════════════════════════ 8 · PILARES DE LO GRATIS — el ícono cobra vida al pasar por encima ══════════════════════════════════════════════════════════════════════════ */ .flow-pillar{ position:relative; transition:transform var(--mo-fast) var(--mo-ease),border-color var(--mo-fast) var(--mo-ease); } .flow-pillar-icon{ transition:transform 300ms var(--mo-ease),color var(--mo-fast) var(--mo-ease); } .flow-pillar:hover .flow-pillar-icon{ transform:translateY(-2px) scale(1.12) rotate(-4deg) } .flow-pillar:hover .flow-pillar-title{ color:var(--accent) } .flow-pillar-title{ transition:color var(--mo-fast) var(--mo-ease) } /* ══════════════════════════════════════════════════════════════════════════ 9 · CHIPS DE PRO — barrido diagonal al pasar ══════════════════════════════════════════════════════════════════════════ */ .apex-flow-pro-chip{ position:relative;overflow:hidden; transition:transform var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease), background var(--mo-fast) var(--mo-ease); } .apex-flow-pro-chip::after{ content:"";position:absolute;inset:-40% -10%; background:linear-gradient(115deg,transparent 42%,var(--accent-dm) 50%,transparent 58%); transform:translateX(-120%);transition:transform 700ms var(--mo-ease); pointer-events:none; } .apex-flow-pro-chip:hover{ transform:translateY(-4px);border-color:var(--accent-bd) } .apex-flow-pro-chip:hover::after{ transform:translateX(120%) } .apex-flow-pro-chip-icon{ transition:transform 300ms var(--mo-ease) } .apex-flow-pro-chip:hover .apex-flow-pro-chip-icon{ transform:scale(1.14) rotate(-5deg) } /* ══════════════════════════════════════════════════════════════════════════ 10 · LOGOS DE BRÓKERS — de gris a color, uno por uno ══════════════════════════════════════════════════════════════════════════ */ .apex-flow-marcas > *{ transition:opacity var(--mo-fast) var(--mo-ease), filter var(--mo-fast) var(--mo-ease), transform var(--mo-fast) var(--mo-ease); opacity:.62; } .apex-flow-marcas > *:hover{ opacity:1;filter:none;transform:translateY(-2px) } /* Al pasar por CUALQUIERA, los demás se apagan un poco más: el foco se nota sin agrandar nada. */ .apex-flow-marcas:hover > *:not(:hover){ opacity:.34 } /* ══════════════════════════════════════════════════════════════════════════ 11 · EL TRIÁNGULO — se dibuja al llegar y responde a las tarjetas ────────────────────────────────────────────────────────────────────────── Tres cosas pasan acá, y ninguna es decorativa: a) los lados se DIBUJAN (stroke-dashoffset) cuando la sección entra b) los vértices aparecen en orden 1-2-3, el mismo de las tarjetas c) al pasar el mouse por una tarjeta, SU vértice se enciende (c) es la que importa: convierte un dibujo en un índice del contenido. ══════════════════════════════════════════════════════════════════════════ */ .apex-tri{ position:relative } /* Halo giratorio detrás del diagrama. `conic-gradient` sobre un pseudo con blur — un solo elemento, sin imágenes. */ .apex-tri-svg-wrap{ position:relative;display:block } .apex-tri-svg-wrap::before{ content:"";position:absolute;inset:8% 12%;border-radius:50%; background:conic-gradient(from 0deg,var(--accent-dm),transparent 28%,rgba(60,190,230,.10) 52%,transparent 78%,var(--accent-dm)); filter:blur(34px);opacity:.85;pointer-events:none; animation:apexMoSpin 26s linear infinite; } @keyframes apexMoSpin{ to{ transform:rotate(360deg) } } .js-motion .apex-tri-side{ stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400); transition:stroke-dashoffset 1100ms var(--mo-ease) var(--d,0ms); } .js-motion .apex-tri.is-in .apex-tri-side{ stroke-dashoffset:0 } .js-motion .apex-tri-dot{ transform:scale(0);transform-origin:center;transform-box:fill-box; transition:transform 520ms var(--mo-ease) var(--d,0ms), filter var(--mo-fast) var(--mo-ease); } .js-motion .apex-tri.is-in .apex-tri-dot{ transform:scale(1) } .js-motion .apex-tri-lbl, .js-motion .apex-tri-sub{ opacity:0;transition:opacity 520ms var(--mo-ease) var(--d,0ms); } .js-motion .apex-tri.is-in .apex-tri-lbl, .js-motion .apex-tri.is-in .apex-tri-sub{ opacity:1 } /* Pulso permanente de los vértices — discreto, y solo DESPUÉS de entrar. El `2s` de retraso deja que termine la entrada antes de empezar a latir. */ .apex-tri.is-in .apex-tri-dot{ animation:apexMoDot 3.4s ease-in-out 2s infinite } .apex-tri.is-in .apex-tri-dot:nth-of-type(2){ animation-delay:2.6s } .apex-tri.is-in .apex-tri-dot:nth-of-type(3){ animation-delay:3.2s } @keyframes apexMoDot{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(200,255,0,0)) } 50% { filter:drop-shadow(0 0 7px rgba(200,255,0,.8)) } } /* El vínculo tarjeta ↔ vértice. Lo enciende el JS con .is-hot. */ .apex-tri-dot.is-hot{ filter:drop-shadow(0 0 12px rgba(200,255,0,.95)); transform:scale(1.55)!important; animation:none; } .apex-tri-card{ position:relative;overflow:hidden; transition:transform var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease), background var(--mo-fast) var(--mo-ease); } /* La barra lima de la izquierda crece de arriba abajo al enfocar la tarjeta: señala CUÁL de las tres estás leyendo sin mover el texto de lugar. */ .apex-tri-card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--accent);transform:scaleY(0);transform-origin:0 0; transition:transform 320ms var(--mo-ease); } .apex-tri-card:hover,.apex-tri-card:focus-within{ transform:translateX(4px);border-color:var(--accent-bd);background:var(--bg4); } .apex-tri-card:hover::before,.apex-tri-card:focus-within::before{ transform:scaleY(1) } .apex-tri-n{ transition:transform 300ms var(--mo-ease) } .apex-tri-card:hover .apex-tri-n{ transform:rotate(360deg) scale(1.1) } /* ══════════════════════════════════════════════════════════════════════════ 12 · SECCIÓN NUEVA — "TODO LO QUE HACE PRO" ────────────────────────────────────────────────────────────────────────── Tres columnas = los tres vértices del triángulo. NO es una lista de features ordenada por lo que más vende: es el mapa de la app, igual que la vitrina del Lab y que la tabla Gratis/Pro. Que las tres pantallas cuenten la misma estructura es lo que hace que no haya que reaprender nada. ══════════════════════════════════════════════════════════════════════════ */ .apex-cap-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; max-width:1100px;margin:0 auto;align-items:start; } .apex-cap-col{ background:var(--bg3);border:1px solid var(--border); border-radius:var(--radius-lg);padding:22px 22px 8px; position:relative;overflow:hidden; transition:border-color var(--mo-mid) var(--mo-ease),transform var(--mo-mid) var(--mo-ease); } /* Cada columna se tiñe apenas de su vértice: una línea de color arriba, del ancho completo. Es la única diferencia cromática entre las tres — con más se perdería el sistema de un solo acento. */ .apex-cap-col::after{ content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(0);transform-origin:0 50%; transition:transform var(--mo-slow) var(--mo-ease); } .apex-cap-col.is-in::after{ transform:scaleX(1) } .apex-cap-col:hover{ border-color:var(--accent-bd) } .apex-cap-head{ display:flex;align-items:baseline;gap:9px;margin-bottom:4px } .apex-cap-n{ font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent); } .apex-cap-t{ font-family:var(--font-display);font-size:17px;font-weight:900;letter-spacing:.03em; text-transform:uppercase;color:var(--text);margin:0; } .apex-cap-sub{ font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em; color:var(--gray2);margin:0 0 16px; } .apex-cap-list{ list-style:none;margin:0;padding:0 } .apex-cap-li{ display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start; padding:11px 0;border-top:1px solid var(--border); } .apex-cap-li:first-child{ border-top:0 } .apex-cap-ico{ color:var(--accent);margin-top:2px; transition:transform 300ms var(--mo-ease); } .apex-cap-li:hover .apex-cap-ico{ transform:scale(1.25) } .apex-cap-k{ display:block;font-family:var(--font-display);font-size:13px;font-weight:800; letter-spacing:.03em;text-transform:uppercase;color:var(--text);margin-bottom:2px; transition:color var(--mo-fast) var(--mo-ease); } .apex-cap-li:hover .apex-cap-k{ color:var(--accent) } .apex-cap-v{ display:block;font-size:12.5px;line-height:1.55;color:var(--gray) } .apex-cap-v b{ color:var(--text);font-weight:600 } @media (max-width:980px){ .apex-cap-grid{ grid-template-columns:1fr;gap:16px } } /* ══════════════════════════════════════════════════════════════════════════ 13 · LA CINTA DE NÚMEROS DEL MOTOR (marquesina) ────────────────────────────────────────────────────────────────────────── Desplazamiento infinito por CSS: la lista se duplica en el HTML y se anima -50%. Al llegar ahí, la segunda copia está exactamente donde estaba la primera y el salto es invisible. El duplicado va con aria-hidden para que un lector de pantalla no lea todo dos veces. ══════════════════════════════════════════════════════════════════════════ */ /* Full-bleed a propósito: vive dentro de .apex-flow-wrap (max-width:1200px), pero su FONDO tiene que llegar de punta a punta o en cualquier pantalla más ancha que 1200px queda flotando una franja de color que no toca los bordes — se ve como un error de diagramación (hallado 2026-08-29, reporte Sergio). */ .apex-mo-ticker{ overflow:hidden;position:relative; width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); border-top:1px solid var(--border);border-bottom:1px solid var(--border); background:var(--bg2);padding:13px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .apex-mo-ticker-row{ display:flex;width:max-content;gap:0; animation:apexMoTicker 42s linear infinite; will-change:transform; } .apex-mo-ticker:hover .apex-mo-ticker-row{ animation-play-state:paused } @keyframes apexMoTicker{ to{ transform:translate3d(-50%,0,0) } } .apex-mo-tick{ display:flex;align-items:baseline;gap:8px;padding:0 26px; border-right:1px solid var(--border);white-space:nowrap; } .apex-mo-tick b{ font-family:var(--font-display);font-size:19px;font-weight:900;color:var(--accent); font-variant-numeric:tabular-nums; } .apex-mo-tick span{ font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--gray2); } /* ── 13b · VARIANTE "MARCAS": la misma cinta, con nombres de brókers ──────── Reusa TODA la mecánica de arriba (duplicado + translate -50% + máscara de los bordes). Lo único que cambia es qué va adentro y a qué velocidad. ⚠️ EL `span` DE ACÁ NO ES EL `span` DE LA CINTA DEL MOTOR. Allá el span es la etiqueta chica en mono ("velas de 1 minuto"); acá es el nombre de la marca. Sin este bloque, `.apex-mo-tick span` de arriba pisa el nombre y lo deja en 10,5px mono MAYÚSCULAS — que es el estilo de una etiqueta, no de una marca. Por eso se devuelve al estilo que los nombres de bróker YA tenían en la fila fija: `.apex-marca-texto` de apex-flow.css. No hay color ni tipografía nueva acá; es la misma que se venía usando. MÁS LENTA QUE LA DEL MOTOR (42s → 58s) por dos razones: son 10 ítems en vez de 7, y un nombre propio hay que poder LEERLO al pasar. La del motor son cifras que se captan de un vistazo; estas no. */ .apex-mo-ticker--marcas .apex-mo-ticker-row{ animation-duration:58s } .apex-mo-ticker--marcas .apex-mo-tick{ padding:0 30px } .apex-mo-ticker--marcas .apex-mo-tick span{ font-family:var(--font-display);font-weight:800;font-size:17px; letter-spacing:.01em;text-transform:none;color:var(--gray); } @media (max-width:640px){ .apex-mo-ticker--marcas .apex-mo-tick{ padding:0 20px } .apex-mo-ticker--marcas .apex-mo-tick span{ font-size:15px } } /* ══════════════════════════════════════════════════════════════════════════ 14 · BARRA DE ACCIÓN PEGAJOSA (aparece pasado el hero) ────────────────────────────────────────────────────────────────────────── No es un pop-up ni un modal: es una barra al pie que no tapa contenido y se puede cerrar. Aparece recién cuando el visitante pasó el hero — o sea, cuando ya decidió seguir leyendo. ══════════════════════════════════════════════════════════════════════════ */ .apex-mo-cta{ position:fixed;left:0;right:0;bottom:0;z-index:1150; display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap; padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px)); background:rgba(6,15,20,.90); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--border-mid); transform:translate3d(0,120%,0); transition:transform var(--mo-mid) var(--mo-ease); } .apex-mo-cta.is-on{ transform:none } .apex-mo-cta p{ margin:0;font-size:13px;color:var(--gray);line-height:1.4; } .apex-mo-cta p b{ color:var(--text) } .apex-mo-cta .flow-btn{ padding:10px 20px;font-size:13px } .apex-mo-cta-x{ position:absolute;right:8px;top:6px;width:28px;height:28px; display:grid;place-items:center;border:0;background:transparent;color:var(--gray2); border-radius:50%;line-height:1;font-size:17px; transition:color var(--mo-fast) var(--mo-ease),background var(--mo-fast) var(--mo-ease); } .apex-mo-cta-x:hover{ color:var(--text);background:var(--bg4) } /* En un teléfono esta barra tiene que ser una FRANJA, no un bloque. Con los botones a ancho completo apilados se comía ~130 px de pantalla —medido a 390 px— o sea la sexta parte del alto útil, y encima permanentes. Acá: · la frase se va (en el teléfono manda el botón, no el argumento) · los dos botones comparten UNA fila, mitad y mitad · alto reducido, y sitio para la X a la derecha Los dos botones se quedan —no solo el de pago— porque "Empezar gratis" es la puerta sin fricción: sacarla convertiría la barra en un cartel de venta. */ @media (max-width:560px){ .apex-mo-cta{ gap:8px;flex-wrap:nowrap; padding:8px 40px calc(8px + env(safe-area-inset-bottom,0px)) 12px; } .apex-mo-cta p{ display:none } .apex-mo-cta .flow-btn{ flex:1 1 0;min-width:0;justify-content:center; padding:11px 8px;font-size:12px;letter-spacing:0; } /* La flecha se va: a este ancho roba espacio a la palabra, que es lo que tiene que leerse. */ .apex-mo-cta .flow-btn svg{ display:none } .apex-mo-cta-x{ top:50%;transform:translateY(-50%);right:6px } } /* ══════════════════════════════════════════════════════════════════════════ 15 · SEPARADORES VIVOS ENTRE SECCIONES ══════════════════════════════════════════════════════════════════════════ */ .apex-flow-section{ position:relative } .apex-flow-section::after{ content:"";position:absolute;left:50%;bottom:-1px;height:1px;width:min(280px,60%); transform:translateX(-50%) scaleX(0); background:linear-gradient(90deg,transparent,var(--accent),transparent); transition:transform var(--mo-slow) var(--mo-ease); opacity:.55; } .apex-flow-section.is-in::after{ transform:translateX(-50%) scaleX(1) } /* ══════════════════════════════════════════════════════════════════════════ 16 · LA CAPA DE PARALLAX GENÉRICA ────────────────────────────────────────────────────────────────────────── `[data-parallax]` con un factor (0.06 = muy sutil, 0.25 = marcado). El JS escribe --py en píxeles desde un solo bucle de rAF para toda la página: un listener de scroll por elemento sería el camino corto al jank. ══════════════════════════════════════════════════════════════════════════ */ [data-parallax]{ transform:translate3d(0,var(--py,0px),0) } /* ══════════════════════════════════════════════════════════════════════════ 17 · AJUSTES DE ESCRITORIO PARA LAS SECCIONES QUE YA EXISTÍAN ══════════════════════════════════════════════════════════════════════════ */ /* Con el fondo vivo, el hero pide más aire arriba para que el H1 no quede pegado a la nav pegajosa. */ body.apex-flow-home .apex-flow-hero{ padding-top:104px;padding-bottom:76px } @media (max-width:640px){ body.apex-flow-home .apex-flow-hero{ padding-top:64px;padding-bottom:52px } } /* ══════════════════════════════════════════════════════════════════════════ 18 · ACCESIBILIDAD — el bloque que apaga todo ────────────────────────────────────────────────────────────────────────── Un solo lugar. Si mañana se agrega una animación arriba y no se la cubre acá, es un bug — no una omisión menor. Para quien pidió menos movimiento, el movimiento no se suaviza: se apaga. ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .js-motion [data-reveal], .js-motion [data-reveal].is-in{ opacity:1!important;transform:none!important;filter:none!important;transition:none!important; } .apex-mo-orb,.apex-mo-grid,.apex-mo-ticker-row, .apex-flow-hero-h1 .lx,.apex-tri-svg-wrap::before, .apex-tri.is-in .apex-tri-dot{ animation:none!important; } .apex-mo-canvas{ display:none } .js-motion .apex-tri-side{ stroke-dashoffset:0!important;transition:none!important } .js-motion .apex-tri-dot, .js-motion .apex-tri-lbl, .js-motion .apex-tri-sub{ transform:none!important;opacity:1!important;transition:none!important } .apex-flow-section::after,.apex-cap-col::after{ transform:translateX(-50%) scaleX(1);transition:none } .apex-cap-col::after{ transform:scaleX(1) } [data-parallax]{ transform:none!important } .apex-mo-cta{ transition:none } .flow-btn::after,.apex-flow-pro-chip::after{ display:none } [data-tilt]{ transform:none!important;transition:none!important } .apex-mo-progress i{ transition:none } html{ scroll-behavior:auto } } /* ══════════════════════════════════════════════════════════════════════════ 19 · LA NOTA QUE SOSTIENE EL NÚMERO GRANDE ────────────────────────────────────────────────────────────────────────── Va debajo de la barra de capacidad. NO es letra chica: es lo que hace verificable el "1.939" de arriba, distinguiendo tres cosas que si no se confundirían (qué se analiza · qué tiene precio en vivo · qué tiene estadística propia). Por eso se lee — 12,5px y no 10 — y por eso el ancho se limita a 640px, que es donde una línea sigue siendo cómoda de seguir. ══════════════════════════════════════════════════════════════════════════ */ .apex-flow-prueba-nota{ max-width:640px;margin:16px auto 0; font-size:12.5px;line-height:1.6;color:var(--gray2);text-align:center; } .apex-flow-prueba-nota b{ color:var(--gray);font-weight:600 } @media (max-width:640px){ .apex-flow-prueba-nota{ text-align:left;font-size:12px;margin-top:14px } } /* ══════════════════════════════════════════════════════════════════════════ 20 · EL SELLO "PLAN PRO" ────────────────────────────────────────────────────────────────────────── Sergio (2026-08-25): *"PLAN PRO debe sobresalir, no se entiende... no solo es hacer crecer las palabras"*. Y tenía razón en las dos mitades de la frase. Era un `.apex-flow-section- eyebrow`: mono 10 px gris, EL MISMO tratamiento que "Incluido siempre, gratis". Con idéntico peso visual, nada separaba la sección que cobra de la que regala. Pero agrandar ese mismo renglón habría dado un renglón grande, no jerarquía. Lo que se hizo es cambiarlo de categoría: de TEXTO a OBJETO. Bloque lima macizo, display 900, halo y barrido de luz. ⚠️ ES EL ÚNICO BLOQUE LIMA SÓLIDO DE LA PÁGINA APARTE DE LOS BOTONES, y esa escasez ES el efecto. En un sistema de un solo acento, lo que se pinta con el acento es lo que importa; si mañana se pinta otra cosa igual, este sello deja de sobresalir sin que nadie haya tocado esta regla. ══════════════════════════════════════════════════════════════════════════ */ .apex-flow-plan-sello{ position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:baseline;gap:.34em; margin:0 auto 16px;padding:9px 20px 8px; background:var(--accent);color:var(--accent-t); border-radius:var(--radius-md); font-family:var(--font-display);font-weight:800; font-size:clamp(17px,2.4vw,22px);line-height:1; letter-spacing:.14em;text-transform:uppercase; box-shadow:0 0 0 1px var(--accent),0 6px 26px var(--accent-glow),0 0 44px var(--accent-dm); } /* "PRO" pesa más que "Plan": es la palabra que compra. */ .apex-flow-plan-sello b{ font-weight:900;letter-spacing:.1em } /* El barrido cruza cada tanto solo, sin esperar al mouse — arriba del todo esta sección puede quedar fuera de pantalla mucho rato, y el brillo es lo que la señala cuando entra. 7 s de ciclo con el barrido ocupando menos de un segundo: se nota, no molesta. */ .apex-flow-plan-sello::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%); transform:translateX(-130%); animation:apexMoSello 7s ease-in-out 1.2s infinite; } @keyframes apexMoSello{ 0%,72%,100%{ transform:translateX(-130%) } 86% { transform:translateX(130%) } } /* `.apex-flow-section-head` es `text-align:center`, pero el sello es inline-flex: sin esto se estira al ancho del bloque en algunos navegadores. */ .apex-flow-section-head .apex-flow-plan-sello{ display:inline-flex } /* El CARTEL DEL CUPÓN vivía acá y se mudó a `apex-flow.css` el 2026-08-25. Motivo: no es movimiento, es un COMPONENTE — y lo usan dos páginas, la portada y `/flow/pro/`. Este archivo se encola solo en la portada, así que dejarlo acá habría dado un cartel sin estilos en la pantalla de compra. Su comportamiento está en `js/apex-cupon.js`, por lo mismo. */ @media (prefers-reduced-motion:reduce){ .apex-flow-plan-sello::after{ animation:none;display:none } }