f1lander · May 13, 2025 16:24
diff --git a/eth-slides.html b/eth-slides.html
 <!DOCTYPE html>
 <html lang="es">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ethereum: Tu Entrada al Mundo Crypto</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .presentation-container {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
            background: white;
            border-radius: 0;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        
        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            padding: 50px;
            padding-bottom: 80px; /* Extra space for navigation */
            display: none;
            flex-direction: column;
            align-items: center;
            text-align: center;
            overflow-y: auto;
        }
        
        .slide.active {
            opacity: 1;
            display: flex;
        }
        
        h1 {
            color: #627EEA;
            font-size: 2.5em;
            margin-bottom: 20px;
            animation: fadeInUp 0.8s ease-out;
        }
        
        h2 {
            color: #50648E;
            font-size: 1.8em;
            margin: 30px 0 20px;
        }
        
        p, li {
            color: #333;
            font-size: 1.2em;
            line-height: 1.6;
            margin-bottom: 15px;
            max-width: 700px;
        }
        
        .navigation {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 100;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 10px 20px;
            border-radius: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        button {
            background: #627EEA;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        
        button:hover {
            background: #5567D8;
        }
        
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .eth-icon {
            width: 100px;
            height: 100px;
            margin: 20px 0;
            margin-bottom: 100px;
            animation: float 3s ease-in-out infinite;
            position: relative;
            z-index: 1;
        }
        
        .wallet-example {
            background: #F5F8FF;
            padding: 25px;
            border-radius: 15px;
            margin: 20px 0;
            border: 2px solid #627EEA;
            max-width: 600px;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
            width: 100%;
            max-width: 800px;
        }
        
        .feature-card {
            background: #F5F8FF;
            padding: 20px;
            border-radius: 10px;
            transition: transform 0.3s;
            border: 2px solid transparent;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            border-color: #627EEA;
        }
        
        .emoji {
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        ul {
            text-align: left;
            max-width: 600px;
            margin: 20px auto;
        }
        
        li {
            margin-bottom: 10px;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        .step-indicator {
            position: absolute;
            top: 20px;
            right: 30px;
            color: #627EEA;
            font-weight: bold;
        }
        
        .code-block {
            background: #f4f4f4;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            color: #333;
            margin: 15px 0;
            text-align: left;
        }
        
        .warning {
            background: #FFF3CD;
            border: 2px solid #FFC107;
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            color: #856404;
        }

        .tech-terms {
            background: #E8F0FE;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: left;
        }

        .tech-terms h3 {
            color: #627EEA;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .presentation-container {
                height: 100vh;
                width: 100%;
                border-radius: 0;
            }
            
            h1 {
                font-size: 1.8em;
            }
            
            p, li {
                font-size: 0.9em;
                margin-bottom: 10px;
            }
            
            .feature-grid {
                grid-template-columns: 1fr;
                gap: 10px;
                margin: 15px 0;
            }

            .eth-icon {
                width: 100px;
                height: 100px;
                margin: 10px 0;
            }

            .slide {
                padding: 30px;
            }
        }
    </style>
 </head>
 <body>
    <div class="presentation-container">
        <!-- Slide 1: Introducción -->
        <div class="slide active">
            <span class="step-indicator">1/5</span>
            <h1>¡Bienvenido al Mundo de Ethereum!</h1>
            <div class="eth-icon">
                <svg viewBox="0 0 256 417" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
                    <path fill="#343434" d="M127.961 0l-2.795 9.5v275.668l2.795 2.79 127.962-75.638z"/>
                    <path fill="#8C8C8C" d="M127.962 0L0 212.32l127.962 75.639V154.158z"/>
                    <path fill="#3C3C3B" d="M127.961 312.187l-1.575 1.92v98.199l1.575 4.6L256 236.587z"/>
                    <path fill="#8C8C8C" d="M127.962 416.905v-104.72L0 236.585z"/>
                    <path fill="#141414" d="M127.961 287.958l127.96-75.637-127.96-58.162z"/>
                    <path fill="#393939" d="M0 212.32l127.96 75.638v-133.8z"/>
                </svg>
            </div>
            <p>¿Sabías que puedes ser dueño de tu propio dinero digital sin necesidad de un banco?</p>
            <p>Ethereum es como un <strong>internet del dinero</strong> donde puedes enviar, recibir y crear aplicaciones increíbles.</p>
            
            <div class="tech-terms">
                <h3>¿Qué es Ethereum? 🤔</h3>
                <p>• Una plataforma descentralizada (sin dueño único)</p>
                <p>• Permite crear y usar aplicaciones sin intermediarios</p>
                <p>• Usa su propia moneda digital: Ether (ETH)</p>
            </div>
        </div>

        <!-- Slide 2: ¿Por qué Ethereum? -->
        <div class="slide">
            <span class="step-indicator">2/5</span>
            <h1>¿Por qué Ethereum es Genial? 🚀</h1>
            
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="emoji">💰</div>
                    <h3>Dinero Global</h3>
                    <p>Envía dinero a cualquier parte del mundo en segundos</p>
                </div>
                <div class="feature-card">
                    <div class="emoji">🎮</div>
                    <h3>Juegos NFT</h3>
                    <p>Posee items únicos en videojuegos que realmente son tuyos</p>
                </div>
                <div class="feature-card">
                    <div class="emoji">🎨</div>
                    <h3>Arte Digital</h3>
                    <p>Crea, compra y vende arte digital certificado</p>
                </div>
                <div class="feature-card">
                    <div class="emoji">💸</div>
                    <h3>DeFi</h3>
                    <p>Gana intereses y participa en finanzas descentralizadas</p>
                </div>
            </div>
            
            <p><strong>Lo mejor:</strong> ¡No necesitas permiso de nadie para usar Ethereum!</p>
        </div>

        <!-- Slide 3: Crear Wallet con MetaMask -->
        <div class="slide">
            <span class="step-indicator">3/5</span>
            <h1>Crea tu Wallet con MetaMask 🦊</h1>
            
            <p>Una wallet es como tu billetera digital donde guardas tus criptomonedas.</p>
            
            <h2>Pasos para crear tu MetaMask:</h2>
            <ul>
                <li><strong>1.</strong> Ve a <code>metamask.io</code> y descarga la extensión para tu navegador</li>
                <li><strong>2.</strong> Haz clic en "Crear una wallet"</li>
                <li><strong>3.</strong> Crea una contraseña súper segura</li>
                <li><strong>4.</strong> ¡IMPORTANTE! Guarda tu frase secreta de 12 palabras en un lugar seguro</li>
                <li><strong>5.</strong> Confirma tu frase secreta</li>
                <li><strong>6.</strong> ¡Listo! Ya tienes tu wallet Ethereum</li>
            </ul>
            
            <div class="warning">
                ⚠️ <strong>NUNCA compartas tu frase secreta con NADIE</strong> ⚠️<br>
                Es como la llave maestra de tu dinero digital
            </div>
            
            <div class="wallet-example">
                <strong>Tu dirección se verá así:</strong><br>
                <code>0x742d35Cc6634C0532925a3b844Bc9e3d65f8e27c</code><br>
                <small>Esta es tu dirección pública (como tu email) - ¡puedes compartirla!</small>
            </div>
        </div>

        <!-- Slide 4: Qué puedes hacer -->
        <div class="slide">
            <span class="step-indicator">4/5</span>
            <h1>¿Qué Puedes Hacer con Ethereum? 🌟</h1>
            
            <h2>1. Intercambiar Criptomonedas</h2>
            <p>Usa plataformas como <strong>Uniswap</strong> para cambiar ETH por otros tokens</p>
            
            <h2>2. Coleccionar NFTs</h2>
            <p>Compra arte digital único en <strong>OpenSea</strong> o crea tu propia colección</p>
            
            <h2>3. Jugar y Ganar</h2>
            <p>Juegos como <strong>Axie Infinity</strong> o <strong>Gods Unchained</strong> donde tus items son NFTs</p>
            
            <h2>4. Aprender y Ganar</h2>
            <p>Plataformas como <strong>Coinbase Earn</strong> te pagan por aprender sobre crypto</p>
            
            <h2>5. Participar en DAOs</h2>
            <p>Únete a organizaciones descentralizadas y vota en decisiones importantes</p>
            
            <div class="tech-terms">
                <h3>Términos Cool que Debes Conocer:</h3>
                <p><strong>Gas:</strong> Comisión que pagas por transacciones</p>
                <p><strong>Smart Contract:</strong> Programas que viven en Ethereum</p>
                <p><strong>dApp:</strong> Aplicaciones descentralizadas</p>
                <p><strong>HODL:</strong> Mantener tus cryptos a largo plazo</p>
            </div>
        </div>

        <!-- Slide 5: Próximos Pasos -->
        <div class="slide">
            <span class="step-indicator">5/5</span>
            <h1>¡Comienza tu Aventura Ethereum! 🎯</h1>
            
            <h2>Próximos Pasos:</h2>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="emoji">📚</div>
                    <h3>Aprende Más</h3>
                    <p>Únete a comunidades Discord y sigue cuentas crypto en Twitter</p>
                </div>
                <div class="feature-card">
                    <div class="emoji">💧</div>
                    <h3>Consigue ETH Gratis</h3>
                    <p>Busca "Ethereum faucets" para redes de prueba</p>
                </div>
                <div class="feature-card">
                    <div class="emoji">🛡️</div>
                    <h3>Seguridad Primero</h3>
                    <p>Aprende sobre estafas comunes y cómo protegerte</p>
                </div>
                <div class="feature-card">
                    <div class="emoji">🚀</div>
                    <h3>Experimenta</h3>
                    <p>Prueba dApps con cantidades pequeñas primero</p>
                </div>
            </div>
            
            <h2>Recursos Útiles:</h2>
            <ul>
                <li>🌐 <strong>ethereum.org</strong> - Guía oficial</li>
                <li>📺 <strong>YouTube</strong> - Busca "Ethereum para principiantes"</li>
                <li>🐦 <strong>Twitter Crypto</strong> - Sigue a @VitalikButerin (creador de Ethereum)</li>
                <li>💬 <strong>Discord/Telegram</strong> - Únete a comunidades hispanohablantes</li>
            </ul>
            
            <div class="warning" style="background: #D4EDDA; border-color: #28A745; color: #155724;">
                💡 <strong>Recuerda:</strong> La mejor forma de aprender es haciendo. 
                ¡Empieza con poco y ve explorando!
            </div>
        </div>

        <!-- Navigation -->
        <div class="navigation">
            <button id="prevBtn" onclick="changeSlide(-1)">← Anterior</button>
            <button id="nextBtn" onclick="changeSlide(1)">Siguiente →</button>
        </div>
    </div>

    <script>
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        const totalSlides = slides.length;

        function showSlide(n) {
            slides[currentSlide].classList.remove('active');
            currentSlide = (n + totalSlides) % totalSlides;
            slides[currentSlide].classList.add('active');
            
            document.getElementById('prevBtn').disabled = currentSlide === 0;
            document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;
            
            if (currentSlide === totalSlides - 1) {
                document.getElementById('nextBtn').textContent = 'Finalizar';
            } else {
                document.getElementById('nextBtn').textContent = 'Siguiente →';
            }
        }

        function changeSlide(direction) {
            showSlide(currentSlide + direction);
        }

        // Navegación con teclado
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' && currentSlide > 0) {
                changeSlide(-1);
            } else if (e.key === 'ArrowRight' && currentSlide < totalSlides - 1) {
                changeSlide(1);
            }
        });

        // Inicializar
        showSlide(0);
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Ethereum: Tu Entrada al Mundo Crypto</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	}

	.presentation-container {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background: white;
	border-radius: 0;
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
	}

	.slide {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	padding: 50px;
	padding-bottom: 80px; /* Extra space for navigation */
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	overflow-y: auto;
	}

	.slide.active {
	opacity: 1;
	display: flex;
	}

	h1 {
	color: #627EEA;
	font-size: 2.5em;
	margin-bottom: 20px;
	animation: fadeInUp 0.8s ease-out;
	}

	h2 {
	color: #50648E;
	font-size: 1.8em;
	margin: 30px 0 20px;
	}

	p, li {
	color: #333;
	font-size: 1.2em;
	line-height: 1.6;
	margin-bottom: 15px;
	max-width: 700px;
	}

	.navigation {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 15px;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 10px 20px;
	border-radius: 30px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	}

	button {
	background: #627EEA;
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 25px;
	cursor: pointer;
	font-size: 16px;
	transition: background 0.3s;
	}

	button:hover {
	background: #5567D8;
	}

	button:disabled {
	background: #ccc;
	cursor: not-allowed;
	}

	.eth-icon {
	width: 100px;
	height: 100px;
	margin: 20px 0;
	margin-bottom: 100px;
	animation: float 3s ease-in-out infinite;
	position: relative;
	z-index: 1;
	}

	.wallet-example {
	background: #F5F8FF;
	padding: 25px;
	border-radius: 15px;
	margin: 20px 0;
	border: 2px solid #627EEA;
	max-width: 600px;
	}

	.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin: 30px 0;
	width: 100%;
	max-width: 800px;
	}

	.feature-card {
	background: #F5F8FF;
	padding: 20px;
	border-radius: 10px;
	transition: transform 0.3s;
	border: 2px solid transparent;
	}

	.feature-card:hover {
	transform: translateY(-5px);
	border-color: #627EEA;
	}

	.emoji {
	font-size: 2em;
	margin-bottom: 10px;
	}

	ul {
	text-align: left;
	max-width: 600px;
	margin: 20px auto;
	}

	li {
	margin-bottom: 10px;
	}

	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	@keyframes float {
	0%, 100% {
	transform: translateY(0px);
	}
	50% {
	transform: translateY(-10px);
	}
	}

	.step-indicator {
	position: absolute;
	top: 20px;
	right: 30px;
	color: #627EEA;
	font-weight: bold;
	}

	.code-block {
	background: #f4f4f4;
	padding: 15px;
	border-radius: 8px;
	font-family: 'Courier New', monospace;
	color: #333;
	margin: 15px 0;
	text-align: left;
	}

	.warning {
	background: #FFF3CD;
	border: 2px solid #FFC107;
	padding: 15px;
	border-radius: 10px;
	margin: 20px 0;
	color: #856404;
	}

	.tech-terms {
	background: #E8F0FE;
	padding: 20px;
	border-radius: 10px;
	margin: 20px 0;
	text-align: left;
	}

	.tech-terms h3 {
	color: #627EEA;
	margin-bottom: 10px;
	}

	@media (max-width: 768px) {
	.presentation-container {
	height: 100vh;
	width: 100%;
	border-radius: 0;
	}

	h1 {
	font-size: 1.8em;
	}

	p, li {
	font-size: 0.9em;
	margin-bottom: 10px;
	}

	.feature-grid {
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 15px 0;
	}

	.eth-icon {
	width: 100px;
	height: 100px;
	margin: 10px 0;
	}

	.slide {
	padding: 30px;
	}
	}
	</style>
	</head>
	<body>
	<div class="presentation-container">
	<!-- Slide 1: Introducción -->
	<div class="slide active">
	<span class="step-indicator">1/5</span>
	<h1>¡Bienvenido al Mundo de Ethereum!</h1>
	<div class="eth-icon">
	<svg viewBox="0 0 256 417" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
	<path fill="#343434" d="M127.961 0l-2.795 9.5v275.668l2.795 2.79 127.962-75.638z"/>
	<path fill="#8C8C8C" d="M127.962 0L0 212.32l127.962 75.639V154.158z"/>
	<path fill="#3C3C3B" d="M127.961 312.187l-1.575 1.92v98.199l1.575 4.6L256 236.587z"/>
	<path fill="#8C8C8C" d="M127.962 416.905v-104.72L0 236.585z"/>
	<path fill="#141414" d="M127.961 287.958l127.96-75.637-127.96-58.162z"/>
	<path fill="#393939" d="M0 212.32l127.96 75.638v-133.8z"/>
	</svg>
	</div>
	<p>¿Sabías que puedes ser dueño de tu propio dinero digital sin necesidad de un banco?</p>
	<p>Ethereum es como un <strong>internet del dinero</strong> donde puedes enviar, recibir y crear aplicaciones increíbles.</p>

	<div class="tech-terms">
	<h3>¿Qué es Ethereum? 🤔</h3>
	<p>• Una plataforma descentralizada (sin dueño único)</p>
	<p>• Permite crear y usar aplicaciones sin intermediarios</p>
	<p>• Usa su propia moneda digital: Ether (ETH)</p>
	</div>
	</div>

	<!-- Slide 2: ¿Por qué Ethereum? -->
	<div class="slide">
	<span class="step-indicator">2/5</span>
	<h1>¿Por qué Ethereum es Genial? 🚀</h1>

	<div class="feature-grid">
	<div class="feature-card">
	<div class="emoji">💰</div>
	<h3>Dinero Global</h3>
	<p>Envía dinero a cualquier parte del mundo en segundos</p>
	</div>
	<div class="feature-card">
	<div class="emoji">🎮</div>
	<h3>Juegos NFT</h3>
	<p>Posee items únicos en videojuegos que realmente son tuyos</p>
	</div>
	<div class="feature-card">
	<div class="emoji">🎨</div>
	<h3>Arte Digital</h3>
	<p>Crea, compra y vende arte digital certificado</p>
	</div>
	<div class="feature-card">
	<div class="emoji">💸</div>
	<h3>DeFi</h3>
	<p>Gana intereses y participa en finanzas descentralizadas</p>
	</div>
	</div>

	<p><strong>Lo mejor:</strong> ¡No necesitas permiso de nadie para usar Ethereum!</p>
	</div>

	<!-- Slide 3: Crear Wallet con MetaMask -->
	<div class="slide">
	<span class="step-indicator">3/5</span>
	<h1>Crea tu Wallet con MetaMask 🦊</h1>

	<p>Una wallet es como tu billetera digital donde guardas tus criptomonedas.</p>

	<h2>Pasos para crear tu MetaMask:</h2>
	<ul>
	<li><strong>1.</strong> Ve a <code>metamask.io</code> y descarga la extensión para tu navegador</li>
	<li><strong>2.</strong> Haz clic en "Crear una wallet"</li>
	<li><strong>3.</strong> Crea una contraseña súper segura</li>
	<li><strong>4.</strong> ¡IMPORTANTE! Guarda tu frase secreta de 12 palabras en un lugar seguro</li>
	<li><strong>5.</strong> Confirma tu frase secreta</li>
	<li><strong>6.</strong> ¡Listo! Ya tienes tu wallet Ethereum</li>
	</ul>

	<div class="warning">
	⚠️ <strong>NUNCA compartas tu frase secreta con NADIE</strong> ⚠️<br>
	Es como la llave maestra de tu dinero digital
	</div>

	<div class="wallet-example">
	<strong>Tu dirección se verá así:</strong><br>
	<code>0x742d35Cc6634C0532925a3b844Bc9e3d65f8e27c</code><br>
	<small>Esta es tu dirección pública (como tu email) - ¡puedes compartirla!</small>
	</div>
	</div>

	<!-- Slide 4: Qué puedes hacer -->
	<div class="slide">
	<span class="step-indicator">4/5</span>
	<h1>¿Qué Puedes Hacer con Ethereum? 🌟</h1>

	<h2>1. Intercambiar Criptomonedas</h2>
	<p>Usa plataformas como <strong>Uniswap</strong> para cambiar ETH por otros tokens</p>

	<h2>2. Coleccionar NFTs</h2>
	<p>Compra arte digital único en <strong>OpenSea</strong> o crea tu propia colección</p>

	<h2>3. Jugar y Ganar</h2>
	<p>Juegos como <strong>Axie Infinity</strong> o <strong>Gods Unchained</strong> donde tus items son NFTs</p>

	<h2>4. Aprender y Ganar</h2>
	<p>Plataformas como <strong>Coinbase Earn</strong> te pagan por aprender sobre crypto</p>

	<h2>5. Participar en DAOs</h2>
	<p>Únete a organizaciones descentralizadas y vota en decisiones importantes</p>

	<div class="tech-terms">
	<h3>Términos Cool que Debes Conocer:</h3>
	<p><strong>Gas:</strong> Comisión que pagas por transacciones</p>
	<p><strong>Smart Contract:</strong> Programas que viven en Ethereum</p>
	<p><strong>dApp:</strong> Aplicaciones descentralizadas</p>
	<p><strong>HODL:</strong> Mantener tus cryptos a largo plazo</p>
	</div>
	</div>

	<!-- Slide 5: Próximos Pasos -->
	<div class="slide">
	<span class="step-indicator">5/5</span>
	<h1>¡Comienza tu Aventura Ethereum! 🎯</h1>

	<h2>Próximos Pasos:</h2>
	<div class="feature-grid">
	<div class="feature-card">
	<div class="emoji">📚</div>
	<h3>Aprende Más</h3>
	<p>Únete a comunidades Discord y sigue cuentas crypto en Twitter</p>
	</div>
	<div class="feature-card">
	<div class="emoji">💧</div>
	<h3>Consigue ETH Gratis</h3>
	<p>Busca "Ethereum faucets" para redes de prueba</p>
	</div>
	<div class="feature-card">
	<div class="emoji">🛡️</div>
	<h3>Seguridad Primero</h3>
	<p>Aprende sobre estafas comunes y cómo protegerte</p>
	</div>
	<div class="feature-card">
	<div class="emoji">🚀</div>
	<h3>Experimenta</h3>
	<p>Prueba dApps con cantidades pequeñas primero</p>
	</div>
	</div>

	<h2>Recursos Útiles:</h2>
	<ul>
	<li>🌐 <strong>ethereum.org</strong> - Guía oficial</li>
	<li>📺 <strong>YouTube</strong> - Busca "Ethereum para principiantes"</li>
	<li>🐦 <strong>Twitter Crypto</strong> - Sigue a @VitalikButerin (creador de Ethereum)</li>
	<li>💬 <strong>Discord/Telegram</strong> - Únete a comunidades hispanohablantes</li>
	</ul>

	<div class="warning" style="background: #D4EDDA; border-color: #28A745; color: #155724;">
	💡 <strong>Recuerda:</strong> La mejor forma de aprender es haciendo.
	¡Empieza con poco y ve explorando!
	</div>
	</div>

	<!-- Navigation -->
	<div class="navigation">
	<button id="prevBtn" onclick="changeSlide(-1)">← Anterior</button>
	<button id="nextBtn" onclick="changeSlide(1)">Siguiente →</button>
	</div>
	</div>

	<script>
	let currentSlide = 0;
	const slides = document.querySelectorAll('.slide');
	const totalSlides = slides.length;

	function showSlide(n) {
	slides[currentSlide].classList.remove('active');
	currentSlide = (n + totalSlides) % totalSlides;
	slides[currentSlide].classList.add('active');

	document.getElementById('prevBtn').disabled = currentSlide === 0;
	document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;

	if (currentSlide === totalSlides - 1) {
	document.getElementById('nextBtn').textContent = 'Finalizar';
	} else {
	document.getElementById('nextBtn').textContent = 'Siguiente →';
	}
	}

	function changeSlide(direction) {
	showSlide(currentSlide + direction);
	}

	// Navegación con teclado
	document.addEventListener('keydown', (e) => {
	if (e.key === 'ArrowLeft' && currentSlide > 0) {
	changeSlide(-1);
	} else if (e.key === 'ArrowRight' && currentSlide < totalSlides - 1) {
	changeSlide(1);
	}
	});

	// Inicializar
	showSlide(0);
	</script>
	</body>
	</html>