/* =========================================================== landing-motion.css — capa ADITIVA de animaciones del landing No modifica el CSS existente; solo agrega "vida". Todo se apaga con prefers-reduced-motion. Autor: JC — v1 =========================================================== */ /* ============================================================ 1. SCROLL REVEAL (fade + slide al entrar en pantalla) - Se activa solo si el JS marcó . - Sin JS => nada se oculta (todo visible). - Al terminar => devuelve los elementos a su estado 100% nativo (para no pisar los :hover). ============================================================ */ /* transición mientras el motor de reveal está activo */ html.js-reveal:not(.reveal-complete) .services-overview__head, html.js-reveal:not(.reveal-complete) .service-card, html.js-reveal:not(.reveal-complete) .metric, html.js-reveal:not(.reveal-complete) .spotlight-feature, html.js-reveal:not(.reveal-complete) .plans-container .section-title, html.js-reveal:not(.reveal-complete) .plans-container .description-box, html.js-reveal:not(.reveal-complete) .v2-feature, html.js-reveal:not(.reveal-complete) .v2-plan { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); will-change: opacity, transform; } /* estado oculto: solo hasta que reciben .is-visible */ html.js-reveal:not(.reveal-complete) .services-overview__head:not(.is-visible), html.js-reveal:not(.reveal-complete) .service-card:not(.is-visible), html.js-reveal:not(.reveal-complete) .metric:not(.is-visible), html.js-reveal:not(.reveal-complete) .spotlight-feature:not(.is-visible), html.js-reveal:not(.reveal-complete) .plans-container .section-title:not(.is-visible), html.js-reveal:not(.reveal-complete) .plans-container .description-box:not(.is-visible), html.js-reveal:not(.reveal-complete) .v2-feature:not(.is-visible), html.js-reveal:not(.reveal-complete) .v2-plan:not(.is-visible) { opacity: 0; transform: translateY(24px); } /* ============================================================ 2. AURORA — fondo animado detrás del hero (inyectado por JS) ============================================================ */ .services-overview { position: relative; } .services-overview__inner { position: relative; z-index: 1; } .landing-aurora { position: absolute; inset: -12% -6% 0 -6%; z-index: 0; overflow: hidden; pointer-events: none; } .landing-aurora__blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; animation: aurora-float 20s ease-in-out infinite; } .landing-aurora__blob--1 { width: 440px; height: 440px; top: -90px; left: -70px; background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, .55), rgba(124, 58, 237, 0) 70%); } .landing-aurora__blob--2 { width: 400px; height: 400px; top: 30px; right: -50px; background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, .45), rgba(168, 85, 247, 0) 70%); animation-delay: -7s; } .landing-aurora__blob--3 { width: 320px; height: 320px; bottom: -80px; left: 42%; background: radial-gradient(circle at 30% 30%, rgba(34, 197, 94, .30), rgba(34, 197, 94, 0) 70%); animation-delay: -13s; } @keyframes aurora-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(32px, -22px) scale(1.08); } 66% { transform: translate(-22px, 26px) scale(.95); } } /* ============================================================ 3. MICRO-DETALLES ============================================================ */ /* chips de fuentes oficiales (SUNAT, RENIEC, ...) */ .services-overview__sources li { transition: transform .2s ease, color .2s ease; } .services-overview__sources li:hover { transform: translateY(-3px); color: #7c3aed; } /* punto de estado "verificado" latiendo */ .dashboard-card__status-dot { animation: jc-pulse-dot 1.8s ease-in-out infinite; } @keyframes jc-pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } } /* íconos 👤 🏢 flotando suave */ .service-card__icon-mini { display: inline-block; animation: jc-float 4s ease-in-out infinite; } .service-card__icon-mini:nth-child(2) { animation-delay: -1.5s; } @keyframes jc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* brillo (shine) al pasar el cursor por los botones */ .btn-contratar, .service-card__more { position: relative; overflow: hidden; } .btn-contratar::after, .service-card__more::after { content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; } .btn-contratar:hover::after, .service-card__more:hover::after { left: 150%; } /* números del count-up sin saltos de ancho */ .metric__label { font-variant-numeric: tabular-nums; } /* ============================================================ 4. RANKING DE USO REAL (datos vivos desde la BD) ============================================================ */ .usage-rank { padding: 4rem 1rem; background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%); } .usage-rank__inner { max-width: 900px; margin: 0 auto; } .usage-rank__head { text-align: center; margin-bottom: 2.5rem; } .usage-rank__eyebrow { display: inline-flex; align-items: center; gap: .45rem; background: #f4eeff; color: #7c3aed; border-radius: 999px; padding: .35rem .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; } .usage-rank__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; color: #14161f; margin: 0 0 .6rem; } .usage-rank__subtitle { color: #64748b; font-size: .98rem; margin: 0; } .usage-rank__total { color: #7c3aed; font-weight: 800; font-variant-numeric: tabular-nums; } .usage-rank__list { display: flex; flex-direction: column; gap: 1.15rem; } .usage-bar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .4rem; } .usage-bar__name { font-size: .92rem; font-weight: 600; color: #374151; display: inline-flex; align-items: center; gap: .5rem; min-width: 0; } .usage-bar__name i { color: var(--bar-color); width: 1.1em; text-align: center; flex-shrink: 0; } .usage-bar__value { font-size: .92rem; font-weight: 800; color: #14161f; font-variant-numeric: tabular-nums; white-space: nowrap; } .usage-bar__track { height: 10px; background: #eceaf3; border-radius: 999px; overflow: hidden; } .usage-bar__fill { display: block; height: 100%; width: var(--bar-width); border-radius: 999px; background: var(--bar-color); transform-origin: left center; } /* Animación: la barra crece al entrar en pantalla */ html.js-reveal:not(.reveal-complete) .usage-bar__fill { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); } html.js-reveal:not(.reveal-complete) .usage-bar.is-visible .usage-bar__fill { transform: scaleX(1); } @media (max-width: 480px) { .usage-bar__name { font-size: .84rem; } .usage-bar__value { font-size: .84rem; } } /* ============================================================ ACCESIBILIDAD — respeta a quien pide menos movimiento ============================================================ */ @media (prefers-reduced-motion: reduce) { html.js-reveal .services-overview__head, html.js-reveal .service-card, html.js-reveal .metric, html.js-reveal .spotlight-feature, html.js-reveal .plans-container .section-title, html.js-reveal .plans-container .description-box, html.js-reveal .v2-feature, html.js-reveal .v2-plan { opacity: 1 !important; transform: none !important; transition: none !important; } .landing-aurora__blob, .dashboard-card__status-dot, .service-card__icon-mini { animation: none !important; } html.js-reveal .usage-bar__fill { transform: none !important; transition: none !important; } .btn-contratar::after, .service-card__more::after { display: none; } }