/* Movimiento de la landing. Sólo la landing lo carga. * * Tres capas: (1) revelado al hacer scroll — los bloques suben y aparecen * cuando entran al viewport (landing.js les pone .revelado); (2) el héroe * respira — brillos que flotan y una retícula tenue de fondo; (3) la escena * de la factura — el mock se arma solo en bucle: renglones, sello, UUID, * correo. Todo CSS servido desde nuestro dominio (la CSP manda) y todo se * apaga con prefers-reduced-motion. */ /* ---- 1. Revelado al hacer scroll ---- * El estado oculto sólo existe si landing.js marcó : * sin JavaScript la página se ve completa, nada desaparece. */ .js-anim [data-revelar] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-anim [data-revelar].revelado { opacity: 1; transform: none; } /* Escalonado dentro de una misma fila de tarjetas */ .js-anim [data-revelar="2"] { transition-delay: 0.1s; } .js-anim [data-revelar="3"] { transition-delay: 0.2s; } .js-anim [data-revelar="4"] { transition-delay: 0.3s; } /* ---- 2. El héroe respira ---- */ @keyframes flotar { from { transform: translate(0, 0) scale(1); } to { transform: translate(34px, -22px) scale(1.18); } } .blob { animation: flotar 16s ease-in-out infinite alternate; } .blob-lento { animation-duration: 22s; animation-direction: alternate-reverse; } /* Retícula tenue sobre el marino, desvanecida hacia los bordes */ .hero-patron { background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 40%, transparent 100%); } /* ---- 3. La escena: la factura se arma sola, en bucle de 11s ---- * Cada pieza comparte duración y se enciende en su ventana de porcentajes: * renglones → total → sello → UUID → correo; pausa larga y reinicio. */ .escena { animation-duration: 11s; /* Arranca con el ciclo ya empezado: sin esto la tarjeta del héroe está VACÍA el primer medio segundo, que es justo cuando el visitante la mira por primera vez. Con el desfase negativo el primer renglón ya viene entrando cuando aparece la página. */ animation-delay: -0.45s; animation-iteration-count: infinite; animation-timing-function: ease-out; animation-fill-mode: both; } @keyframes esc-1 { 0%, 5% { opacity: 0; transform: translateY(8px); } 9%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } } @keyframes esc-2 { 0%, 12% { opacity: 0; transform: translateY(8px); } 16%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } } @keyframes esc-3 { 0%, 19% { opacity: 0; transform: translateY(8px); } 23%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } } @keyframes esc-4 { 0%, 27% { opacity: 0; transform: translateY(8px); } 31%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } } /* El sello cae con rebote */ @keyframes esc-sello { 0%, 40% { opacity: 0; transform: scale(0.55); } 44% { opacity: 1; transform: scale(1.12); } 47%, 93% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } } @keyframes esc-5 { 0%, 52% { opacity: 0; transform: translateY(8px); } 56%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } } @keyframes esc-6 { 0%, 62% { opacity: 0; transform: translateY(8px); } 66%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } } .escena-1 { animation-name: esc-1; } .escena-2 { animation-name: esc-2; } .escena-3 { animation-name: esc-3; } .escena-4 { animation-name: esc-4; } .escena-sello { animation-name: esc-sello; } .escena-5 { animation-name: esc-5; } .escena-6 { animation-name: esc-6; } /* El mock levita apenas, ladeado; al pasar el cursor se endereza */ @keyframes levitar { from { translate: 0 0; } to { translate: 0 -9px; } } .mock-flotante { transform: rotate(1.5deg); animation: levitar 6s ease-in-out infinite alternate; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .mock-flotante:hover { transform: rotate(0deg); } /* ---- Detalles que se sienten caros ---- */ /* Barrido de luz en el CTA principal */ .cta-brillo { position: relative; overflow: hidden; } .cta-brillo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-130%); transition: transform 0.65s ease; } .cta-brillo:hover::after { transform: translateX(130%); } /* Tarjetas que se levantan al apuntarlas */ .tarjeta-viva { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .tarjeta-viva:hover { transform: translateY(-5px); border-color: #bfdbfe; box-shadow: 0 18px 44px -14px rgb(16 24 40 / 0.18); } /* ---- Quien pide menos movimiento, manda ---- */ @media (prefers-reduced-motion: reduce) { .js-anim [data-revelar] { opacity: 1; transform: none; transition: none; } .blob, .blob-lento, .mock-flotante, .escena { animation: none !important; } .escena { opacity: 1 !important; } .mock-flotante { transform: none; } .cta-brillo::after { display: none; } } /* ---- La capa "caro": luz, profundidad y bordes con degradado ---- */ /* Borde de degradado para lo destacado (la técnica de doble fondo: el padding-box pinta la tarjeta, el border-box pinta el marco). */ .borde-gradiente { border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #60a5fa, #2563eb 55%, #1e40af) border-box; } /* CTA con resplandor de color: la sombra azul es lo que se siente premium */ .cta-resplandor { box-shadow: 0 10px 34px -8px rgb(37 99 235 / 0.55); } .cta-resplandor:hover { box-shadow: 0 14px 44px -8px rgb(37 99 235 / 0.7); } /* Viñeta radial del héroe: oscurece bordes, concentra la luz al centro */ .vineta { background: radial-gradient(ellipse 90% 80% at 30% 20%, rgb(37 99 235 / 0.12), transparent 55%), radial-gradient(ellipse 120% 100% at 50% 120%, rgb(2 6 17 / 0.9), transparent 60%); } /* El mock con aura: dos capas de resplandor detrás de la factura */ .resplandor-mock { background: radial-gradient(ellipse 65% 55% at 50% 45%, rgb(59 130 246 / 0.35), transparent 70%); filter: blur(28px); } /* Fila destacada de la tabla comparativa */ .columna-destacada { background: linear-gradient(180deg, rgb(239 246 255 / 0.9), rgb(239 246 255 / 0.4)); } @media (prefers-reduced-motion: reduce) { .cta-resplandor, .cta-resplandor:hover { box-shadow: 0 10px 34px -8px rgb(37 99 235 / 0.45); } } /* ===================================================================== * El recorrido y lo demás que se mueve — segunda capa de la landing. * Todo lo de aquí abajo obedece la misma regla que lo de arriba: sin * JavaScript la página se ve completa, y con prefers-reduced-motion nada * se mueve. Ninguna de estas clases existe fuera de la landing. * ===================================================================== */ /* Escalonado: faltaban el quinto y el sexto, y las filas de tarjetas ya llegan a seis. */ .js-anim [data-revelar="5"] { transition-delay: 0.4s; } .js-anim [data-revelar="6"] { transition-delay: 0.5s; } /* ---- Barra de progreso de lectura ---- */ .progreso-pista { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 3px; background: transparent; pointer-events: none; } .progreso-barra { height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #60a5fa, #2563eb); } /* ---- Detalles del héroe ---- */ @keyframes latir { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } .latido { animation: latir 2.4s ease-in-out infinite; } /* El degradado del título se recorre despacio: el brillo "pasa" por el texto */ @keyframes recorrer-brillo { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } .titulo-brillo { background-size: 200% auto; animation: recorrer-brillo 9s linear infinite; } /* Ratón que invita a bajar */ .raton-scroll { display: block; width: 24px; height: 38px; border: 2px solid rgb(255 255 255 / 0.22); border-radius: 999px; position: relative; } .raton-rueda { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 999px; background: rgb(255 255 255 / 0.55); animation: rodar 2s ease-in-out infinite; } @keyframes rodar { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 75%, 100% { transform: translateY(13px); opacity: 0; } } /* Lo que ya no haces, tachado */ .tachado { text-decoration: line-through; text-decoration-color: rgb(148 163 184 / 0.7); } /* ---- Cuadro del icono de cada tarjeta ---- */ .ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; color: #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); box-shadow: inset 0 0 0 1px rgb(37 99 235 / 0.1); transition: transform 0.25s ease; } .tarjeta-viva:hover .ico { transform: scale(1.08) rotate(-3deg); } /* ===================================================================== * EL RECORRIDO * Los pasos mandan y el escenario obedece: landing.js pone .activo sobre * el paso más cercano al centro de la pantalla y enciende su escena. Sin * JavaScript queda la escena 1 encendida (la marca viene en el HTML) y los * seis pasos legibles al 100%. * ===================================================================== */ .recorrido-pasos { padding-left: 0; margin: 0; list-style: none; } /* El riel y su relleno: la altura del relleno la fija landing.js, que es quien sabe dónde va el paso activo. */ .riel { position: absolute; left: 15px; top: 1.75rem; bottom: 1.75rem; width: 2px; background: #e2e8f0; border-radius: 999px; } .riel-relleno { position: absolute; inset: 0 0 auto 0; height: 0; border-radius: 999px; background: linear-gradient(180deg, #60a5fa, #2563eb); transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .paso { position: relative; padding: 1.25rem 0 1.25rem 3.25rem; transition: opacity 0.4s ease; } /* El atenuado sólo existe si hay JavaScript para volver a encenderlos: sin él ningún paso se pondría en foco nunca y los seis quedarían apagados. */ .js-anim .paso { opacity: 0.62; } .js-anim .paso.activa { opacity: 1; } .paso-punto { position: absolute; left: 0; top: 1.15rem; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #fff; border: 2px solid #e2e8f0; color: #94a3b8; font-size: 0.8125rem; font-weight: 700; transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; } .paso.activa .paso-punto { background: #2563eb; border-color: #2563eb; color: #fff; transform: scale(1.1); box-shadow: 0 0 0 6px rgb(37 99 235 / 0.12); } /* En pantallas CHICAS lo pegajoso es el PANEL ENTERO, no el recuadro de dentro. Es la trampa del patrón: `position: sticky` sólo puede viajar dentro de su contenedor, y en una columna el contenedor del recuadro mide exactamente lo que mide el recuadro — o sea, no viaja nada y el escenario se va con el primer paso. Pegando el panel (que es hijo del flex y por lo tanto puede recorrer toda la sección) el escenario acompaña a los seis pasos, igual que en el escritorio. El fondo opaco es obligatorio: sin él los pasos se ven pasar POR DETRÁS del escenario. */ @media (max-width: 1023px) { .recorrido-panel { position: sticky; top: 4rem; /* justo debajo del encabezado, que mide h-16 */ z-index: 20; background: #f8fafc; /* la misma tinta de la sección */ padding-bottom: 0.75rem; } } /* En pantallas grandes cada paso ocupa una pantalla de scroll: es lo que deja tiempo a la escena para leerse antes de cambiar. */ @media (min-width: 1024px) { .paso { padding-top: 2.5rem; padding-bottom: 2.5rem; min-height: 44vh; } .paso-punto { top: 2.4rem; } } /* ---- El escenario ---- */ .escenario-capa { position: absolute; inset: 0; opacity: 0; transform: translateY(10px) scale(0.99); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .escenario-capa.activa { opacity: 1; transform: none; pointer-events: auto; } /* Las animaciones de dentro sólo corren en la escena encendida: si no, se gastarían mientras nadie las ve y llegarían terminadas. */ @keyframes entrar-abajo { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes entrar-escala { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } .escenario-capa.activa .campo-lleno { animation: entrar-abajo 0.45s both; } .escenario-capa.activa .campo-1 { animation-delay: 0.35s; } .escenario-capa.activa .campo-2 { animation-delay: 0.55s; } .escenario-capa.activa .campo-3 { animation-delay: 0.75s; } .escenario-capa.activa .campo-4 { animation-delay: 0.95s; } .escenario-capa.activa .sugerencia { animation: entrar-abajo 0.4s both; } .escenario-capa.activa .sugerencia-1 { animation-delay: 0.3s; } .escenario-capa.activa .sugerencia-2 { animation-delay: 0.42s; } .escenario-capa.activa .sugerencia-3 { animation-delay: 0.54s; } .escenario-capa.activa .palomeo { animation: entrar-abajo 0.4s both; } .escenario-capa.activa .palomeo-1 { animation-delay: 0.25s; } .escenario-capa.activa .palomeo-2 { animation-delay: 0.5s; } .escenario-capa.activa .palomeo-3 { animation-delay: 0.75s; } .escenario-capa.activa .palomeo-4 { animation-delay: 1.05s; } /* Cursor que parpadea en el campo de búsqueda */ .cursor-teclado { display: inline-block; width: 1px; height: 0.9em; margin-left: 1px; vertical-align: text-bottom; background: #2563eb; animation: parpadeo 1s steps(2, start) infinite; } @keyframes parpadeo { 50% { opacity: 0; } } /* Los tres puntos del viaje al PAC */ .viaje-punto { width: 6px; height: 6px; border-radius: 999px; background: #cbd5e1; display: inline-block; } .escenario-capa.activa .viaje-punto { animation: viajar 1.4s ease-in-out infinite; } .escenario-capa.activa .viaje-2 { animation-delay: 0.18s; } .escenario-capa.activa .viaje-3 { animation-delay: 0.36s; } @keyframes viajar { 0%, 100% { background: #cbd5e1; transform: none; } 40% { background: #2563eb; transform: translateY(-3px); } } /* El código QR del PDF: no es un QR de verdad, es su silueta */ .qr-falso { width: 38px; height: 38px; border-radius: 4px; border: 2px solid #0f172a; background-color: #fff; background-image: linear-gradient(90deg, #0f172a 25%, transparent 25%, transparent 50%, #0f172a 50%, #0f172a 75%, transparent 75%), linear-gradient(0deg, #0f172a 25%, transparent 25%, transparent 50%, #0f172a 50%, #0f172a 75%, transparent 75%); background-size: 8px 8px; } /* La credencial del CSD entra con escala, como si se colocara */ .escenario-capa.activa .credencial { animation: entrar-escala 0.5s 0.25s both; } /* ===================================================================== * La hoja de Excel que se convierte en facturas * ===================================================================== */ .hoja-fila { background: #fff; } .revelado .hoja-fila { animation: barrer-fila 7s ease-in-out infinite; } .revelado .hf-1 { animation-delay: 0.2s; } .revelado .hf-2 { animation-delay: 0.5s; } .revelado .hf-3 { animation-delay: 0.8s; } .revelado .hf-4 { animation-delay: 1.1s; } .revelado .hf-5 { animation-delay: 1.4s; } @keyframes barrer-fila { 0%, 6% { background: #fff; } 10%, 16% { background: #eff6ff; } 26%, 100%{ background: #fff; } } .js-anim .salida-chip { opacity: 0; } .js-anim .revelado .salida-chip { animation: brotar 7s ease-out infinite; } .js-anim .revelado .sc-1 { animation-delay: 1.9s; } .js-anim .revelado .sc-2 { animation-delay: 2.2s; } .js-anim .revelado .sc-3 { animation-delay: 2.5s; } @keyframes brotar { 0% { opacity: 0; transform: scale(0.7); } 6% { opacity: 1; transform: scale(1.08); } 9%, 85% { opacity: 1; transform: scale(1); } 95%, 100%{ opacity: 0; transform: scale(1); } } /* ===================================================================== * La terminal de la API: las líneas caen una tras otra al revelarse * ===================================================================== */ .js-anim .linea-api { opacity: 0; display: block; } .js-anim .revelado .linea-api { animation: entrar-abajo 0.4s both; } .js-anim .revelado .linea-api:nth-child(1) { animation-delay: 0.10s; } .js-anim .revelado .linea-api:nth-child(2) { animation-delay: 0.18s; } .js-anim .revelado .linea-api:nth-child(3) { animation-delay: 0.26s; } .js-anim .revelado .linea-api:nth-child(4) { animation-delay: 0.34s; } .js-anim .revelado .linea-api:nth-child(5) { animation-delay: 0.42s; } .js-anim .revelado .linea-api:nth-child(6) { animation-delay: 0.50s; } .js-anim .revelado .linea-api:nth-child(7) { animation-delay: 0.58s; } .js-anim .revelado .linea-api:nth-child(8) { animation-delay: 0.85s; } .js-anim .revelado .linea-api:nth-child(9) { animation-delay: 1.00s; } .js-anim .revelado .linea-api:nth-child(10) { animation-delay: 1.08s; } .js-anim .revelado .linea-api:nth-child(11) { animation-delay: 1.16s; } .js-anim .revelado .linea-api:nth-child(12) { animation-delay: 1.24s; } /* ===================================================================== * La calculadora de precios * ===================================================================== */ .rango { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #bfdbfe, #e2e8f0); outline: none; } .rango::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 999px; background: #2563eb; border: 3px solid #fff; box-shadow: 0 2px 10px -2px rgb(37 99 235 / 0.6); cursor: grab; transition: transform 0.15s ease; } .rango::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; } .rango::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: #2563eb; border: 3px solid #fff; box-shadow: 0 2px 10px -2px rgb(37 99 235 / 0.6); cursor: grab; } .rango:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; } /* Cuando el resultado cambia, late una vez: se nota que respondió */ @keyframes destacar { 0% { color: #2563eb; transform: scale(1.06); } 100% { transform: none; } } .js-anim .cambio { animation: destacar 0.4s ease-out; } /* ---- Quien pide menos movimiento, manda (segunda capa) ---- */ @media (prefers-reduced-motion: reduce) { .latido, .titulo-brillo, .raton-rueda, .cursor-teclado { animation: none !important; } .titulo-brillo { background-position: 0 50%; } .raton-scroll { display: none; } .escenario-capa.activa .campo-lleno, .escenario-capa.activa .sugerencia, .escenario-capa.activa .palomeo, .escenario-capa.activa .credencial, .escenario-capa.activa .viaje-punto, .revelado .hoja-fila, .js-anim .revelado .salida-chip, .js-anim .revelado .linea-api, .js-anim .cambio { animation: none !important; } .js-anim .salida-chip, .js-anim .linea-api { opacity: 1; } .escenario-capa { transition: none; } /* El paso activo se sigue distinguiendo (es contraste, no movimiento); lo que se quita es el desvanecido de uno a otro. */ .paso { transition: none; } .progreso-barra { transition: none; } } /* El paquete que la calculadora recomienda se marca en la tabla de abajo: sin eso, la caja da un nombre y el visitante tiene que buscarlo con la vista. El anillo se pinta con box-shadow para no mover el diseño (un borde real cambiaría el ancho de la tarjeta y saltaría la fila entera). */ .recomendado { box-shadow: 0 0 0 2px #2563eb, 0 18px 44px -14px rgb(37 99 235 / 0.35); }