@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap'); html, body { height: 100vh; margin: 0; padding: 0; overflow: hidden; } body { font-family: 'Plus Jakarta Sans', sans-serif; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; background-color: #020617; transition: background-color 0.5s ease; } section, header, footer { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; width: 100%; position: relative; display: flex; align-items: center; overflow: hidden; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #0AB5F2 0%, #F817C4 100%); border-radius: 10px; } .shape { position: absolute; pointer-events: none; transition: opacity 0.5s ease, filter 0.5s ease; z-index: 1; } .dark .shape { opacity: 0.25; mix-blend-mode: screen; filter: blur(60px); } html:not(.dark) .shape { opacity: 0.12; mix-blend-mode: multiply; filter: blur(80px); } .reveal-content { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.22, 1, 0.36, 1); z-index: 10; } .active-section .reveal-content { opacity: 1; transform: translateY(0); } .waves-container { position: absolute; inset: 0; z-index: 0; /* Detrás del contenido */ pointer-events: none; } .wave-svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; transition: opacity 0.5s ease; animation: wave-float 20s ease-in-out infinite; } @keyframes wave-float { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-25%); } } .wave-2 { animation-duration: 15s; animation-direction: reverse; } .nav-link.active { color: #0AB5F2 !important; text-shadow: 0 0 15px rgba(10,181,242,0.4); } html:not(.dark) body { background-color: #f8fafc; } html:not(.dark) .text-white { color: #0f172a !important; } html:not(.dark) .bg-slate-950\/40 { background-color: rgba(255, 255, 255, 0.7); border-color: rgba(0,0,0,0.1); } html:not(.dark) section, html:not(.dark) header { background-color: #f8fafc !important; } html:not(.dark) footer { background-color: #f1f5f9; } html:not(.dark) .border-slate-800\/50 { border-color: rgba(0,0,0,0.1); }