:root {
  --nav-height: 80px;
}
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; overflow-x: hidden; }

/* Ruido Textura Premium */
.noise-overlay {
    position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.04; animation: noise 8s steps(10) infinite;
}
.dark .noise-overlay { opacity: 0.02; }

@keyframes noise {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    30% { transform: translate(5%, -10%); }
    50% { transform: translate(-10%, 5%); }
    70% { transform: translate(0, 15%); }
    90% { transform: translate(-10%, 10%); }
}

/* Nav Line Hover */
.nav-item { position: relative; padding: 0.5rem 0; transition: color 0.3s ease; }
.nav-item:hover { color: #3BA35A; }
.nav-item::after {
    content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0;
    background-color: #3BA35A; transform: scaleX(0); transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.nav-item:hover::after { transform: scaleX(1); transform-origin: left; }

/* Hero Utils */
.mask-image-bottom { -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%); mask-image: linear-gradient(to bottom, black 50%, transparent 100%); }
.pulse-slow { animation: pulse-glow 8s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse-glow { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } }

/* Marquesina Infinita */
.marquee-wrapper { overflow: hidden; }
.marquee-content { animation: scroll-marquee 25s linear infinite; }
@keyframes scroll-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Bento Grid Magnético */
.bento-card { border: 1px solid rgba(0, 0, 0, 0.05); position: relative; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease; }
.dark .bento-card { border: 1px solid rgba(255, 255, 255, 0.05); }
.magnetic-card::before {
    content: ""; position: absolute; top: var(--y, -1000px); left: var(--x, -1000px); transform: translate(-50%, -50%);
    width: 600px; height: 600px; background: radial-gradient(circle, rgba(20,79,102,0.15) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0;
}
.dark .magnetic-card::before { background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%); }
.magnetic-card:hover::before { opacity: 1; }
.magnetic-card:hover { border-color: rgba(59, 163, 90, 0.3); box-shadow: 0 10px 40px -10px rgba(0,0,0,0.2); }

/* GSAP Start */
.gs-reveal { opacity: 0; visibility: hidden; }

/* 3D Ecosistema y Floating Widgets */
.animate-float { animation: floating 6s ease-in-out infinite; }
@keyframes floating { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.perspective-1000 { perspective: 1000px; }
.rotate-x-\[5deg\] { transform: rotateX(5deg); }
.rotate-y-\[-10deg\] { transform: rotateY(-10deg); }