-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcap01.html
More file actions
515 lines (461 loc) · 30 KB
/
cap01.html
File metadata and controls
515 lines (461 loc) · 30 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E7QS7E2R8Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-E7QS7E2R8Y');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Capítulo 1: ¿Qué es el dinero? - Aprender Bitcoin">
<title>Cap 1: Dinero - Aprender Bitcoin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body data-chapter="cap1">
<nav class="navbar">
<div class="container">
<div class="logo">
<a href="index.html"><span class="bitcoin-symbol">₿</span> Aprender Bitcoin</a>
</div>
<ul class="nav-links">
<li><a href="index.html">Inicio</a></li>
<li><a href="ask-maxi.html">💬 Pregúntale a Maxi</a></li>
<li><a href="cap02.html">Cap 2 →</a></li>
</ul>
</div>
</nav>
<main class="chapter-page">
<div class="container">
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb">
<a href="index.html">Inicio</a>
<span class="separator">›</span>
<a href="index.html#capitulos">Capítulos</a>
<span class="separator">›</span>
<span class="current">Capítulo 1: Dinero</span>
</nav>
<!-- Chapter Header -->
<div class="chapter-header">
<span class="chapter-number">Capítulo 1</span>
<h1>Dinero: La Batería del Tiempo</h1>
<p class="chapter-intro">¿Qué es realmente el dinero? Descubre cómo el dinero funciona como una batería que almacena tu tiempo y energía, y cuáles son las 6 características que hacen que algo sea buen dinero.</p>
</div>
<!-- Progress Bar -->
<div class="chapter-progress">
<div class="time-estimate">
⏱️ <strong>Tiempo total:</strong> 45-60 minutos
<span class="optional-note">(15 min opcionales)</span>
</div>
<div class="progress-bar">
<div class="progress-step" data-section="pre">
<span class="step-icon">📖</span>
<span class="step-label">Pre-lectura</span>
<span class="step-time">5 min</span>
</div>
<div class="progress-step" data-section="video">
<span class="step-icon">🎥</span>
<span class="step-label">Video</span>
<span class="step-time">11 min</span>
</div>
<div class="progress-step" data-section="discussion">
<span class="step-icon">💬</span>
<span class="step-label">Discusión</span>
<span class="step-time">10 min</span>
</div>
<div class="progress-step optional" data-section="deep">
<span class="step-icon">🔬</span>
<span class="step-label">Profundo</span>
<span class="step-time">15 min</span>
</div>
<div class="progress-step" data-section="case">
<span class="step-icon">🇲🇽</span>
<span class="step-label">Caso MX</span>
<span class="step-time">8 min</span>
</div>
<div class="progress-step" data-section="exercise">
<span class="step-icon">🎯</span>
<span class="step-label">Ejercicio</span>
<span class="step-time">5 min</span>
</div>
</div>
</div>
<!-- Pre-lectura -->
<section class="content-section prelectura" id="pre">
<h2>📖 Pre-lectura <span style="color: #666; font-weight: normal;">(5 minutos)</span></h2>
<p class="section-intro">Lee esto ANTES de ver el video para aprovechar mejor el contenido.</p>
<div class="content-box">
<h3>¿Por qué existe el dinero?</h3>
<p>Imagina que eres agricultor en un mundo sin dinero. Cosechaste 100 kilos de maíz, pero necesitas zapatos. Vas con el zapatero y él dice: "No como maíz, necesito carne."</p>
<p>Ahora debes encontrar a alguien que tenga carne y quiera maíz. Luego intercambiar el maíz por carne. Finalmente, intercambiar la carne por zapatos. <strong>Esto se llama "doble coincidencia de necesidades"</strong> — un problema que hace el trueque extremadamente ineficiente.</p>
<h3>El dinero como tecnología</h3>
<p>El dinero es una <strong>tecnología</strong> que resuelve este problema. Te permite:</p>
<ul>
<li><strong>Vender tu maíz</strong> a quien lo necesite (recibiendo dinero)</li>
<li><strong>Guardar ese dinero</strong> sin que se pudra (a diferencia del maíz)</li>
<li><strong>Comprar zapatos más tarde</strong> sin necesidad de trueque</li>
</ul>
<h3>Dinero = Batería de tiempo</h3>
<p>La analogía clave de este capítulo:</p>
<blockquote>
"El dinero es como una batería. Guardas tu energía (trabajo, tiempo) dentro del dinero, y luego la liberas cuando la necesitas."
</blockquote>
<p><strong>Pero aquí está el problema:</strong> Si la batería se descarga sola (inflación), tu energía almacenada desaparece.</p>
<h3>Las 6 características del buen dinero</h3>
<p>No cualquier cosa puede ser dinero. Para funcionar bien, el dinero necesita:</p>
<ol>
<li><strong>Durabilidad</strong> - No se debe desgastar con el tiempo</li>
<li><strong>Portabilidad</strong> - Fácil de transportar</li>
<li><strong>Divisibilidad</strong> - Se puede dividir en partes pequeñas</li>
<li><strong>Fungibilidad</strong> - Cualquier unidad es idéntica a otra</li>
<li><strong>Escasez</strong> - Oferta limitada o controlada</li>
<li><strong>Verificabilidad</strong> - Se puede comprobar que es legítimo</li>
</ol>
<p><strong>Pregunta para reflexionar:</strong> ¿El peso mexicano cumple con las 6 características?</p>
</div>
</section>
<!-- Video -->
<section class="content-section video-section" id="video">
<h2>🎥 Video Principal <span style="color: #666; font-weight: normal;">(11 minutos)</span></h2>
<div class="video-container">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/VWTfcOmjfhA" title="Cap 1 - ¿Qué es el dinero?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</section>
<!-- Preguntas de Discusión -->
<section class="content-section discussion" id="discussion">
<h2>💬 Preguntas de Discusión <span style="color: #666; font-weight: normal;">(10 minutos)</span></h2>
<p class="section-intro">Reflexiona sobre estas preguntas después de ver el video.</p>
<div class="questions">
<div class="quiz-question" data-exercise-id="trueque-quiz">
<h4>1. ¿Por qué el trueque es ineficiente?</h4>
<div class="quiz-options">
<button class="quiz-option" data-correct="false"
data-explanation="No es el problema principal. Aunque contar puede tomar tiempo, el problema real es más fundamental.">
Es muy lento contar los bienes intercambiados
</button>
<button class="quiz-option" data-correct="true"
data-explanation="El trueque requiere que ambas partes quieran exactamente lo que la otra ofrece - una coincidencia rara y difícil. El dinero elimina este problema al servir como intermediario universal. Ejemplo: Un plomero necesita reparar su coche, pero el mecánico no necesita plomería. Con pesos, ambos simplemente cobran y pagan en dinero.">
Requiere "doble coincidencia de necesidades"
</button>
<button class="quiz-option" data-correct="false"
data-explanation="Los bienes tienen valores relativos, pero ese no es el problema principal del trueque.">
Los bienes no siempre tienen el mismo valor
</button>
<button class="quiz-option" data-correct="false"
data-explanation="Encontrar personas es parte del problema, pero no la raíz. La raíz es que necesitas doble coincidencia de necesidades.">
Es difícil encontrar personas con quien intercambiar
</button>
</div>
<div class="quiz-feedback hidden"></div>
</div>
<div class="reflection-exercise" data-exercise-id="bateria-reflection">
<h4>2. ¿El peso mexicano es una "batería" confiable?</h4>
<p><strong>Contexto:</strong> El dinero funciona como "batería de valor" - guarda tu trabajo hoy para usarlo mañana.</p>
<div class="reflection-input">
<textarea
placeholder="Escribe tu reflexión aquí (mínimo 50 caracteres). Considera: ¿Retiene el peso su valor? ¿Qué pasa con la inflación? ¿Es confiable para ahorros a largo plazo?"
rows="5"
id="reflection-peso"
></textarea>
<button class="button primary" onclick="submitReflection('peso')">
Enviar Reflexión
</button>
</div>
<div id="reflection-peso-feedback" class="hidden">
<!-- Feedback appears here -->
</div>
</div>
<div class="interactive-rating-table" data-exercise-id="characteristics-rating">
<h4>3. Ejercicio Interactivo: Evalúa al peso con las 6 características</h4>
<p><strong>Instrucciones:</strong> Califica cada característica de 1 a 5 estrellas. Después de calificar todas, haz clic en "Ver Evaluación Experta" para comparar tu análisis.</p>
<div class="evaluation-table">
<table>
<thead>
<tr>
<th>Característica</th>
<th>Tu Evaluación (1-5 ⭐)</th>
<th>Comentario</th>
</tr>
</thead>
<tbody>
<tr data-characteristic="durabilidad">
<td><strong>Durabilidad</strong></td>
<td>
<div class="star-rating">
<button class="star" data-value="1">⭐</button>
<button class="star" data-value="2">⭐</button>
<button class="star" data-value="3">⭐</button>
<button class="star" data-value="4">⭐</button>
<button class="star" data-value="5">⭐</button>
</div>
<span class="selected-rating">—</span>
</td>
<td class="comment-hint">¿Los billetes se desgastan? ¿Qué pasa si se mojan?</td>
</tr>
<tr data-characteristic="portabilidad">
<td><strong>Portabilidad</strong></td>
<td>
<div class="star-rating">
<button class="star" data-value="1">⭐</button>
<button class="star" data-value="2">⭐</button>
<button class="star" data-value="3">⭐</button>
<button class="star" data-value="4">⭐</button>
<button class="star" data-value="5">⭐</button>
</div>
<span class="selected-rating">—</span>
</td>
<td class="comment-hint">¿Fácil llevar $10,000 pesos en efectivo?</td>
</tr>
<tr data-characteristic="divisibilidad">
<td><strong>Divisibilidad</strong></td>
<td>
<div class="star-rating">
<button class="star" data-value="1">⭐</button>
<button class="star" data-value="2">⭐</button>
<button class="star" data-value="3">⭐</button>
<button class="star" data-value="4">⭐</button>
<button class="star" data-value="5">⭐</button>
</div>
<span class="selected-rating">—</span>
</td>
<td class="comment-hint">¿Puedes partir un billete de $500 en dos de $250?</td>
</tr>
<tr data-characteristic="fungibilidad">
<td><strong>Fungibilidad</strong></td>
<td>
<div class="star-rating">
<button class="star" data-value="1">⭐</button>
<button class="star" data-value="2">⭐</button>
<button class="star" data-value="3">⭐</button>
<button class="star" data-value="4">⭐</button>
<button class="star" data-value="5">⭐</button>
</div>
<span class="selected-rating">—</span>
</td>
<td class="comment-hint">¿Un billete de $100 vale igual que otro?</td>
</tr>
<tr data-characteristic="escasez">
<td><strong>Escasez</strong></td>
<td>
<div class="star-rating">
<button class="star" data-value="1">⭐</button>
<button class="star" data-value="2">⭐</button>
<button class="star" data-value="3">⭐</button>
<button class="star" data-value="4">⭐</button>
<button class="star" data-value="5">⭐</button>
</div>
<span class="selected-rating">—</span>
</td>
<td class="comment-hint">¿Banxico puede imprimir más pesos?</td>
</tr>
<tr data-characteristic="verificabilidad">
<td><strong>Verificabilidad</strong></td>
<td>
<div class="star-rating">
<button class="star" data-value="1">⭐</button>
<button class="star" data-value="2">⭐</button>
<button class="star" data-value="3">⭐</button>
<button class="star" data-value="4">⭐</button>
<button class="star" data-value="5">⭐</button>
</div>
<span class="selected-rating">—</span>
</td>
<td class="comment-hint">¿Fácil detectar billetes falsos?</td>
</tr>
</tbody>
</table>
</div>
<button id="show-evaluation" class="button primary" disabled>
Ver Evaluación Experta
</button>
<div id="evaluation-results" class="hidden">
<!-- Results populate here via JavaScript -->
</div>
</div>
</div>
</section>
<!-- Profundización -->
<section class="content-section deepdive optional-section" id="deep">
<span class="badge">AVANZADO - OPCIONAL</span>
<h2>🔬 Profundización: Dinero como Tiempo Almacenado <span style="color: #666; font-weight: normal;">(15 minutos)</span></h2>
<p class="skip-note">
💡 <em>Principiantes: Pueden saltar esta sección y volver después</em>
</p>
<p class="section-intro">Concepto avanzado que cambia tu perspectiva sobre el dinero.</p>
<div class="content-box">
<h3>La ecuación fundamental</h3>
<p>Cuando trabajas, estás vendiendo tu tiempo. Cuando ahorras dinero, estás <strong>almacenando tiempo futuro</strong>.</p>
<div class="example-box">
<h4>Ejemplo: María, enfermera en CDMX</h4>
<p><strong>Situación:</strong></p>
<ul>
<li>Salario: $15,000 pesos/mes</li>
<li>Trabaja 160 horas/mes</li>
<li>Valor de su tiempo: $93.75 pesos/hora</li>
</ul>
<p><strong>Compra unos tenis de $1,500 pesos:</strong></p>
<p>No está pagando "$1,500 pesos" — está pagando <strong>16 horas de su vida</strong>.</p>
<p><strong>Ahora con inflación del 5% anual:</strong></p>
<ul>
<li>María ahorra $50,000 pesos en 2024</li>
<li>En 2025, esos $50,000 compran lo que $47,500 compraban antes</li>
<li><strong>Perdió el equivalente a 26.7 horas de trabajo</strong> (casi 4 días laborales)</li>
</ul>
<p><strong>La inflación no solo reduce tu dinero — te roba tiempo de vida.</strong></p>
</div>
<h3>El dilema del ahorro en pesos</h3>
<p>Imagina que tienes dos opciones para guardar tu tiempo (dinero):</p>
<div class="comparison-box">
<div class="option">
<h4>Opción A: Pesos en el banco</h4>
<ul>
<li>Inflación anual: ~5%</li>
<li>Interés bancario: ~2-3%</li>
<li><strong>Pérdida neta: 2-3% anual</strong></li>
</ul>
<p>Es como una batería que se descarga 2-3% por año.</p>
</div>
<div class="option">
<h4>Opción B: Bitcoin</h4>
<ul>
<li>Oferta máxima: 21 millones (nunca más)</li>
<li>Inflación: ~1.7% anual (bajando cada 4 años)</li>
<li>En 2032: inflación ~0.8% anual</li>
<li>En 2140: inflación = 0% (oferta fija)</li>
</ul>
<p>Es una batería que NO se descarga sola.</p>
</div>
</div>
<h3>La pregunta clave</h3>
<blockquote>
"Si tu tiempo de vida es tu recurso más valioso, ¿no deberías almacenarlo en el dinero que mejor preserve su valor?"
</blockquote>
</div>
</section>
<!-- Caso México -->
<section class="content-section exercise" id="exercise">
<h2>🎯 Ejercicio Práctico: Calculadora de Inflación Personal <span style="color: #666; font-weight: normal;">(5 minutos)</span></h2>
<p class="section-intro">Descubre cuánto tiempo de vida perdiste por inflación.</p>
<div class="calculator">
<h3>Tu situación</h3>
<div class="input-group">
<label>Tu salario mensual (pesos):</label>
<input type="number" id="salary" placeholder="15000">
</div>
<div class="input-group">
<label>Horas trabajadas al mes:</label>
<input type="number" id="hours" placeholder="160" value="160">
</div>
<div class="input-group">
<label>Ahorros actuales (pesos):</label>
<input type="number" id="savings" placeholder="50000">
</div>
<button onclick="calculateInflation()" class="button">Calcular Pérdida</button>
<div id="results" class="results-box" style="display:none;">
<h4>Resultados:</h4>
<p><strong>Valor de tu hora:</strong> $<span id="hourValue"></span> pesos</p>
<p><strong>Pérdida anual por inflación (5%):</strong> $<span id="annualLoss"></span> pesos</p>
<p><strong>Equivalente en horas de trabajo perdidas:</strong> <span id="hoursLost"></span> horas</p>
<p><strong>Equivalente en días laborales (8h):</strong> <span id="daysLost"></span> días</p>
<div class="insight-box">
<p><strong>En otras palabras:</strong> <span id="insight"></span></p>
</div>
</div>
</div>
</section>
<!-- Ask Maxi CTA -->
<section class="content-section ask-maxi-cta">
<div class="content-box" style="background: linear-gradient(135deg, #f7931a 0%, #ff7b00 100%); color: white; text-align: center;">
<h2 style="color: white;">¿Tienes preguntas sobre este capítulo?</h2>
<p style="color: rgba(255,255,255,0.9);">Pregúntale a Maxi ₿, tu asistente de IA experto en Bitcoin</p>
<a href="ask-maxi.html" class="button" style="background: white; color: #f7931a;">💬 Pregúntale a Maxi</a>
</div>
</section>
<!-- Community Forum -->
<section class="content-section forum">
<h2>💬 Foro de Discusión - Capítulo 1</h2>
<p class="section-intro">Comparte tus reflexiones, preguntas y aprendizajes con la comunidad</p>
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = 'https://oyebitcoin.com/cap01.html';
this.page.identifier = 'cap01-dinero';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://http-aprenderbitcoin-mx.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>
<!-- Navigation -->
<div class="chapter-nav">
<a href="index.html" class="button secondary">← Inicio</a>
<a href="cap02.html" class="button primary">Cap 2: Historia →</a>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<p>© 2026 Aprender Bitcoin | Creado por Maxi ₿</p>
</div>
</footer>
<script>
function calculateInflation() {
const salary = parseFloat(document.getElementById('salary').value);
const hours = parseFloat(document.getElementById('hours').value);
const savings = parseFloat(document.getElementById('savings').value);
if (!salary || !hours || !savings) {
alert('Por favor completa todos los campos');
return;
}
const hourValue = salary / hours;
const annualLoss = savings * 0.05;
const hoursLost = annualLoss / hourValue;
const daysLost = hoursLost / 8;
document.getElementById('hourValue').textContent = hourValue.toFixed(2);
document.getElementById('annualLoss').textContent = annualLoss.toFixed(2);
document.getElementById('hoursLost').textContent = hoursLost.toFixed(1);
document.getElementById('daysLost').textContent = daysLost.toFixed(1);
let insight = '';
if (daysLost >= 30) {
insight = `Pierdes el equivalente a más de un mes de trabajo cada año por inflación. Eso es ${(daysLost/365*100).toFixed(1)}% de tu vida laboral.`;
} else if (daysLost >= 7) {
insight = `Pierdes ${Math.floor(daysLost/7)} semanas de trabajo al año por inflación. Tiempo que nunca recuperarás.`;
} else {
insight = `Pierdes ${daysLost.toFixed(1)} días de trabajo al año. Aunque parezca poco, en 10 años serán ${(daysLost*10).toFixed(0)} días (${(daysLost*10/365).toFixed(1)} años de tu vida).`;
}
document.getElementById('insight').textContent = insight;
document.getElementById('results').style.display = 'block';
}
</script>
<!-- Sticky ArcadiaB CTA -->
<div class="sticky-cta" id="stickyArcadiaCTA">
<div class="cta-content">
<span class="cta-icon">💰</span>
<span class="cta-text">¿Ya tienes Bitcoin? Obtén liquidez sin vender</span>
<a href="https://www.kapitalex.com/#/register?ref=FDQEXS1WD6LZ4IQ" target="_blank" class="cta-button">Conocer B2X →</a>
<button class="cta-close" onclick="document.getElementById('stickyArcadiaCTA').style.display='none'">✕</button>
</div>
</div>
<!-- Mobile Bottom Navigation -->
<nav class="mobile-chapter-nav">
<a href="index.html" class="nav-button home">
<span class="icon">⌂</span>
<span class="label">Inicio</span>
</a>
<a href="cap02.html" class="nav-button next">
<span class="label">Cap 2</span>
<span class="icon">→</span>
</a>
</nav>
<!-- Chapter Interactive Features -->
<script src="chapter.js"></script>
<script src="gamification.js"></script>
</body>
</html>