https://crjungle-protocol.vercel.app/

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>CRJUNGLE PROTOCOL | COOPERATIVISMO DIGITAL</title>
8
9    <!-- SEO & Social Media Previews (Open Graph) -->
10    <meta name="description"
11        content="Monitoreo satelital, certificación blockchain y mercado de carbono para el sector agroforestal latinoamericano. Protege tu cosecha, cumple con Europa y monetiza tu bosque.">
12    <meta property="og:title" content="CRJUNGLE PROTOCOL | COOPERATIVISMO DIGITAL">
13    <meta property="og:description"
14        content="Monitoreo satelital, certificación blockchain y mercado de carbono para el sector agroforestal latinoamericano. Protege tu cosecha, cumple con Europa y monetiza tu bosque.">
15    <meta property="og:image" content="https://crjungle-protocol.vercel.app/assets/brand/rana_seo.png">
16    <meta property="og:url" content="https://crjungle-protocol.vercel.app/">
17    <meta property="og:type" content="website">
18
19    <!-- Twitter Cards -->
20    <meta name="twitter:card" content="summary_large_image">
21    <meta name="twitter:title" content="CRJUNGLE PROTOCOL | COOPERATIVISMO DIGITAL">
22    <meta name="twitter:description"
23        content="Detecta plagas antes de que destruyan tu cosecha. Exporta a Europa sin trabas. Convierte tu bosque en ingresos reales.">
24    <meta name="twitter:image" content="https://crjungle-protocol.vercel.app/assets/brand/rana_seo.png">
25
26    <!-- Fonts -->
27    <link rel="preconnect" href="https://fonts.googleapis.com">
28    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
29    <link
30        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&family=Inter:wght@300;400;600&family=Roboto+Mono:wght@400;700&display=swap"
31        rel="stylesheet">
32
33    <!-- Icons -->
34    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
35
36    <link rel="stylesheet" href="css/global.css">
37</head>
38
39<body>
40    <canvas id="particle-canvas"></canvas>
41
42    <!-- Orbs -->
43    <div class="orb" style="width:700px; height:700px; top:-150px; left:-150px; background:var(--neon);"></div>
44    <div class="orb" style="width:500px; height:500px; bottom:5%; right:0; background:var(--neon); opacity:0.08;"></div>
45
46    <nav id="navbar">
47        <div class="container">
48            <div class="logo-wrap">
49                <div class="logo-txt uppercase italic">CRJUNGLE<span class="logo-accent">//</span>PROTOCOL</div>
50            </div>
51            <div class="mobile-logo">
52                <img src="assets/brand/logo_menu.png" alt="CRJungle">
53            </div>
54            <div class="menu-toggle">
55                <i class="fas fa-bars"></i>
56            </div>
57            <ul class="nav-links">
58                <li><a href="#como-funciona">Operación</a></li>
59                <li><a href="#beneficios" style="text-decoration: none;">Beneficios</a></li>
60                <li><a href="marketplace.html" class="nav-cta-alt" style="text-decoration: none;">MARKETPLACE</a></li>
61                <li><a href="dashboard-usuario.html" class="nav-cta" style="text-decoration: none; border-color: var(--neon); color: #fff; background: rgba(57, 255, 20, 0.15); box-shadow: 0 0 15px rgba(57, 255, 20, 0.25);"><i class="fas fa-leaf"></i> PANEL DE TRABAJO</a></li>
62            </ul>
63        </div>
64    </nav>
65
66    <!-- PORTADA -->
67    <header class="hero"
68        style="background: transparent; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 100px 20px 40px 20px;">
69        <div
70            style="flex:1; display:flex; align-items:center; justify-content:center; width:100%; position:relative; z-index:10;">
71            <img src="assets/brand/rana.png" alt="Guardian Rana" class="frog-center"
72                style="max-width: 480px; width: 100%;">
73        </div>
74
75        <div class="scroll-hint" style="position:relative; z-index:10; margin: 20px 0;">ANALYZE ECOSYSTEM DATA</div>
76
77        <div
78            style="width:100%; display:flex; justify-content:center; position:relative; z-index:10; padding-bottom: 30px;">
79            <img src="assets/brand/letras.png" alt="CRJungle Identity" class="logo-bottom"
80                style="width: 100%; max-width: 900px; height: auto;">
81        </div>
82
83        <div class="hero-buttons">
84            <a href="dashboard-usuario.html" class="btn-primary" style="background: linear-gradient(135deg, var(--neon), #00e5ff); box-shadow: 0 0 30px rgba(57, 255, 20, 0.45); color: #000; border: none; font-weight: 900;"><i class="fas fa-leaf"></i> PANEL DE TRABAJO</a>
85            <a href="marketplace.html" class="btn-outline"><i class="fas fa-house-chimney-window"></i> MARKETPLACE DE CARBONO</a>
86        </div>
87    </header>
88
89    <!-- CÓMO FUNCIONA -->
90    <section id="como-funciona">
91        <div class="container">
92            <div class="section-header">
93                <p class="biolume">Tres herramientas. Un solo sistema.</p>
94                <h2 class="section-title alive-title">Protegé tu cosecha. Exportá a Europa. Cobrá por tu bosque.</h2>
95            </div>
96
97            <div class="services-grid">
98
99                <div class="service-card">

100                    <span class="card-step">01</span>
101                    <div class="card-icon-wrap"><i class="fas fa-satellite-dish card-icon"></i></div>
102                    <h4>Registrá tu propiedad</h4>
103                    <p>Ingresás al sistema y trazás el perímetro exacto de tu finca. Podés hacerlo ingresando coordenadas manualmente o cargando el plano catastral que ya tenés. En minutos, tu terreno queda registrado y listo para ser monitoreado desde el satélite.</p>
104                </div>
105
106                <div class="service-card">
107                    <span class="card-step">02</span>
108                    <div class="card-icon-wrap"><i class="fas fa-eye card-icon"></i></div>
109                    <h4>Detectá plagas antes de que sea tarde</h4>
110                    <p>Cada 5 días un satélite analiza tu cultivo desde el aire. La plataforma identifica señales de estrés en tus plantas semanas antes de que el daño sea visible a simple vista. Recibís una alerta en tu dispositivo con la zona exacta afectada, para actuar a tiempo y salvar tu cosecha sin gastar de más en agroquímicos.</p>
111                </div>
112
113                <div class="service-card">
114                    <span class="card-step">03</span>
115                    <div class="card-icon-wrap"><i class="fas fa-passport card-icon"></i></div>
116                    <h4>Exportá a Europa sin trabas</h4>
117                    <p>A partir del 30 de diciembre de 2026, las aduanas europeas exigirán un documento digital que certifique que tu café, cacao o madera no provino de zonas deforestadas. Nosotros generamos ese documento de forma automática con los datos de tu finca, para que exportés sin retrasos, sin multas y sin que te devuelvan el contenedor.</p>
118                </div>
119
120                <div class="service-card">
121                    <span class="card-step">04</span>
122                    <div class="card-icon-wrap"><i class="fas fa-shield-halved card-icon"></i></div>
123                    <h4>Tu historial queda blindado para siempre</h4>
124                    <p>Cada análisis mensual de tu propiedad se sella de forma permanente en una red de registro descentralizada — la misma tecnología que respalda las transacciones financieras internacionales. Nadie puede alterar tu historial de cumplimiento ambiental. Tu finca queda protegida contra fraudes, disputas legales y cambios de normativa.</p>
125                </div>
126
127                <div class="service-card">
128                    <span class="card-step">05</span>
129                    <div class="card-icon-wrap"><i class="fas fa-tree card-icon"></i></div>
130                    <h4>Tu bosque te genera ingresos</h4>
131                    <p>Si tenés áreas de bosque que estás obligado a conservar, ya no son un gasto muerto. El sistema mide automáticamente cuánto CO₂ está capturando tu bosque y lo convierte en créditos que podés vender a empresas internacionales. Sin inspectores físicos. Sin trámites eternos. Todo desde tu panel.</p>
132                </div>
133
134                <div class="service-card">
135                    <span class="card-step">06</span>
136                    <div class="card-icon-wrap"><i class="fas fa-coins card-icon"></i></div>
137                    <h4>Retirá tus ganancias con un solo botón</h4>
138                    <p>En tu panel ves en tiempo real cuántas toneladas de CO₂ capturó tu bosque y cuánto valen en el mercado internacional. Cuando querás, listás esos activos y retirás tus ganancias directamente a tu cuenta — sin intermediarios que se queden con la mayor parte, bajo un modelo claro de comisión por resultado del 20%.</p>
139                </div>
140
141            </div>
142        </div>
143    </section>
144
145    <!-- CALL TO ACTION -->
146    <section id="beneficios">
147        <div class="container">
148            <div class="cta-box">
149                <p class="biolume" style="margin-bottom:20px;">Para productores, terratenientes y cooperativas</p>
150                <h3 class="alive-title"
151                    style="font-size:clamp(1.8rem, 7vw, 3rem); margin-bottom:40px; word-wrap: break-word; hyphens: auto;">
152                    TU TIERRA TRABAJA. VOS COBRÁS.</h3>
153                <p style="color:var(--text-muted); max-width:850px; margin:0 auto 0 auto; font-size:1.15rem; font-weight:300;">
154                    CRJungle Protocol reúne en una sola plataforma las tres herramientas que el sector agropecuario y forestal latinoamericano necesita hoy:
155                    <strong>protección fitosanitaria de tu cultivo</strong>,
156                    <strong>certificación de origen para exportar a Europa</strong> y
157                    <strong>monetización de tus áreas de conservación</strong>.
158                    No necesitás saber de tecnología. No necesitás contratar inspectores. No necesitás intermediarios.
159                    Solo conectás tu finca al sistema y empezás a tomar decisiones con información real —
160                    desde cualquier dispositivo, en cualquier momento.
161                </p>
162            </div>
163        </div>
164    </section>
165
166    <footer>
167        <img src="assets/brand/letras.png" style="width:220px; opacity:0.3; margin-bottom:40px;">
168        <p style="font-family:'Roboto Mono'; font-size:0.55rem; letter-spacing:6px; color:#555;">© 2026 CRJUNGLE
169            PROTOCOL | OS OF THE JUNGLE | INFRAESTRUCTURA POR INF01 AGENCY</p>
170
171        <!-- ReFi Costa Rica Endorsement -->
172        <div style="margin-top:60px; padding-top:40px; border-top:1px solid rgba(57, 255, 20, 0.08);">
173            <a href="https://www.reficostarica.com" target="_blank" rel="noopener noreferrer"
174                style="text-decoration:none; display:inline-block; transition: opacity 0.4s ease, transform 0.4s ease;"
175                onmouseover="this.style.opacity='0.9'; this.style.transform='scale(1.05)';"
176                onmouseout="this.style.opacity='1'; this.style.transform='scale(1)';">
177                <img src="assets/brand/logo_refi_costa_rica.png" alt="ReFi Costa Rica"
178                    style="width:90px; height:auto;

178 opacity:0.45; filter: grayscale(20%); transition: opacity 0.4s ease, filter 0.4s ease;"
179                    onmouseover="this.style.opacity='0.8'; this.style.filter='grayscale(0%) drop-shadow(0 0 12px rgba(57, 255, 20, 0.3))';"
180                    onmouseout="this.style.opacity='0.45'; this.style.filter='grayscale(20%)';">
181            </a>
182            <p style="font-family:'Roboto Mono'; font-size:0.5rem; letter-spacing:4px; color:#444; margin-top:16px; text-transform:uppercase;">Con el respaldo de la comunidad <span style="color: rgba(57, 255, 20, 0.5);">ReFi Costa Rica</span></p>
183        </div>
184    </footer>
185
186    <!-- Particles Script -->
187    

187<script src="js/landing.js"></script>

187
188    <!-- Traductor -->
189    

189<script src="js/translator.js"></script>

189
190</body>
191
192</html>