/** * Animaciones del sitio (extraídas del para mantener index.html liviano). * Números “Factor” (01., 02.) — usar con utilidades Tailwind en h1/h2: font-black tracking-tighter. */ /* Hero centrado y compacto: evita exceso de vacío bajo el fold. */ .hero-section { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: clamp(34rem, 78vh, 50rem); padding-top: 7.25rem; padding-bottom: 4.5rem; background-color: #0f172a; } /* * Fondo visual hero. * Recomendación: reemplazar por /assets/hero-bg.webp optimizada (< 250 KB). */ .hero-bg-media { position: absolute; inset: -8%; z-index: -2; background-image: url('/img/hero_bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.08); pointer-events: none; } .hero-bg-overlay { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient( 120% 85% at 50% 15%, rgba(43, 127, 212, 0.22) 0%, rgba(43, 127, 212, 0) 55% ), linear-gradient( 180deg, rgba(2, 6, 23, 0.68) 0%, rgba(15, 23, 42, 0.82) 55%, rgba(15, 23, 42, 0.95) 100% ); } @media (min-width: 768px) { .hero-section { min-height: clamp(36rem, 74vh, 52rem); padding-top: 8.25rem; padding-bottom: 5rem; } } /* Números gigantes estilo referencia (01., 02.) — azul claro Vertex */ .vertex-factor { font-weight: 900; letter-spacing: -0.07em; line-height: 0.82; color: #5eb0ff; font-size: clamp(3.5rem, 12vw, 9rem); font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; } @keyframes hero-fade-up { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } } .hero-fade-up { animation: hero-fade-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; } @media (prefers-reduced-motion: reduce) { .hero-fade-up { animation: none; opacity: 1; transform: none; } } .hero-fade-up-delay-1 { animation-delay: 0.04s; } .hero-fade-up-delay-2 { animation-delay: 0.08s; } .hero-fade-up-delay-3 { animation-delay: 0.12s; } .hero-fade-up-delay-4 { animation-delay: 0.16s; } @keyframes hero-blob { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; } 33% { transform: translate(4%, -3%) scale(1.04); opacity: 1; } 66% { transform: translate(-3%, 4%) scale(0.98); opacity: 0.95; } } .hero-blob-motion { animation: hero-blob 14s ease-in-out infinite; } @keyframes hero-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .hero-gradient-shift { background: linear-gradient( 125deg, #1d4ed8, #0e7490, #1e3a8a, #2563eb, #0891b2 ); background-size: 320% 320%; animation: hero-gradient-shift 16s ease infinite; }