PageSourceSearch

https://www.salazardukeimpacthub.com/lab/piramides

html salazardukeimpacthub.com collected 2026-10-04 12:33:52 UTC 75,174 bytes, 1,209 lines download raw bytes

1<!doctype html>
2<html lang="es">
3<head>
4<base href="/lab/piramides/">
5<meta charset="utf-8">
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<title>Las tres pirámides · Taller · Salazar Duke Impact Hub</title>
8<meta name="description" content="Un recorrido que une el modelo OSI, las capas de la inteligencia artificial y la pirámide invertida del liderazgo servicial. Tres pilas, una sola ley.">
9<link rel="preconnect" href="https://fonts.googleapis.com">
10<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
12<style>
13  :root{
14    --bg:#070b18; --panel:#0d1228; --card:#111827; --card2:#161f38; --border:#1e293b;
15    --accent:#8b5cf6; --accent-lt:#a78bfa; --accent2:#22d3ee; --green:#34d399; --amber:#fbbf24; --red:#f87171;
16    --text:#ffffff; --muted:#cbd5e1; --muted2:#94a3b8; --muted3:#64748b;
17  }
18  *{margin:0;padding:0;box-sizing:border-box}
19  html{scrollbar-gutter:stable}
20  body{
21    font-family:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
22    background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;
23    background-image:
24      radial-gradient(ellipse 55% 38% at 85% 5%, rgba(139,92,246,.20), transparent 62%),
25      radial-gradient(ellipse 48% 34% at 7% 88%, rgba(34,211,238,.11), transparent 62%);
26    background-attachment:fixed;
27  }
28  .layout{display:flex;min-height:100vh}
29
30  /* ══ SIDEBAR ══ */
31  .sidebar{
32    width:300px;min-width:300px;background:var(--panel);border-right:1px solid var(--border);
33    display:flex;flex-direction:column;padding:26px 22px;position:sticky;top:0;height:100vh;overflow-y:auto;
34  }
35  .brand{margin-bottom:24px;display:flex;align-items:center;gap:12px}
36  .brand img{width:42px;height:42px;flex-shrink:0}
37  .brand .name{font-weight:800;font-size:.87rem;line-height:1.3}
38  .brand .name span{display:block;color:var(--accent-lt)}
39  .session{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:15px 17px;margin-bottom:20px}
40  .session strong{display:block;font-size:1rem;font-weight:800;margin-bottom:5px;line-height:1.25}
41  .session em{font-style:normal;font-size:.77rem;color:var(--muted2);line-height:1.5}
42  .actos{margin-bottom:18px}
43  .actos .t{font-size:.62rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--muted3);margin-bottom:9px}
44  .actos button{
45    display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;background:transparent;
46    border:none;color:var(--muted2);font:inherit;font-size:.79rem;font-weight:600;
47    padding:6px 8px;border-radius:7px;cursor:pointer;transition:all .18s;
48  }
49  .actos button:hover{color:var(--text);background:rgba(139,92,246,.1)}
50  .actos button i{font-style:normal;font-weight:900;color:var(--c);flex:0 0 auto;font-size:.72rem}
51  .tab-btn{
52    display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;
53    border:1px solid transparent;color:var(--muted2);font-family:inherit;font-size:.91rem;font-weight:700;
54    padding:13px 15px;border-radius:11px;cursor:pointer;margin-bottom:7px;transition:all .2s;
55  }
56  .tab-btn .num{
57    width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;
58    font-size:.75rem;font-weight:800;background:var(--card);color:var(--muted2);border:1px solid var(--border);flex-shrink:0;
59  }
60  .tab-btn:hover{color:var(--text);background:rgba(139,92,246,.09)}
61  .tab-btn.active{color:#fff;background:var(--card);border-color:var(--accent);box-shadow:0 0 20px rgba(139,92,246,.22)}
62  .tab-btn.active .num{background:var(--accent);color:#fff;border-color:transparent}
63  .anchor{margin-top:auto;padding:15px 17px;border-radius:12px;background:var(--card);border-left:3px solid var(--accent2);font-size:.78rem;line-height:1.55;color:var(--muted2)}
64  .anchor b{color:var(--accent2);display:block;margin-bottom:5px;font-size:.82rem}
65
66  /* ══ CONTENIDO ══ */
67  .content{flex:1;padding:38px 46px;max-width:1440px;min-width:0}
68  .tab-panel{display:none}
69  .tab-panel.active{display:block;animation:fadeUp .35s ease}
70  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
71
72  /* ── DIAPOSITIVAS ── */
73  #slides{position:relative;padding-top:52px}
74  .present-btn{
75    position:absolute;top:0;right:0;font-family:inherit;font-weight:800;font-size:.75rem;
76    letter-spacing:.1em;text-transform:uppercase;background:var(--card);color:var(--accent-lt);
77    border:1px solid var(--accent);border-radius:10px;padding:10px 18px;
77cursor:pointer;transition:all .2s;z-index:5;
78  }
79  .present-btn:hover{background:var(--accent);color:#fff;box-shadow:0 0 18px rgba(139,92,246,.45)}
80  .deck-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
81  .deck-prog{flex:1;height:5px;background:var(--card);border:1px solid var(--border);border-radius:999px;overflow:hidden}
82  .deck-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s cubic-bezier(.2,.8,.3,1)}
83  .deck-count{font-size:.74rem;font-weight:900;letter-spacing:.1em;color:var(--muted3);white-space:nowrap}
84  .deck-count b{color:var(--accent-lt)}
85
86  .slide{display:none;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:44px 50px;min-height:490px;position:relative;overflow:hidden}
87  .slide.active{display:flex;gap:32px;align-items:center;animation:fadeUp .3s ease}
88  .slide .txt{flex:1 1 auto;min-width:0}
89  .slide .art{flex:0 0 auto;width:clamp(180px,15vw,270px)}
90  .slide .art.sm{width:clamp(125px,10vw,180px)}
91  .slide .art img{
92    width:100%;height:auto;display:block;
93    -webkit-mask-image:radial-gradient(72% 72% at 50% 48%, #000 54%, transparent 100%);
94            mask-image:radial-gradient(72% 72% at 50% 48%, #000 54%, transparent 100%);
95  }
96  .kicker{font-size:.7rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;color:var(--accent2)}
97  .slide h1{font-weight:900;font-size:clamp(1.95rem,2.7vw,2.9rem);line-height:1.11;margin-bottom:16px;letter-spacing:-.025em}
98  .slide h2{font-weight:900;font-size:clamp(1.45rem,2.05vw,2.2rem);line-height:1.2;margin-bottom:14px;letter-spacing:-.02em}
99  .slide p{font-size:clamp(.95rem,1.05vw,1.18rem);line-height:1.62;color:var(--muted);max-width:60ch}
100  .slide p+p{margin-top:10px}
101  .hl-m{color:var(--accent-lt);font-weight:700}
102  .hl-c{color:var(--accent2);font-weight:700}
103  .hl-a{color:var(--amber);font-weight:700}
104  .hl-g{color:var(--green);font-weight:700}
105  .hl-r{color:var(--red);font-weight:700}
106  .slide ul{list-style:none;margin-top:12px}
107  .slide ul li{padding:7px 0 7px 25px;position:relative;font-size:clamp(.92rem,1vw,1.1rem);line-height:1.5;color:var(--muted)}
108  .slide ul li::before{content:"▸";position:absolute;left:5px;color:var(--accent);font-weight:900}
109  .slide ul li b{color:var(--text)}
110  .tag{display:inline-block;font-size:.66rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:5px;margin-bottom:13px;color:var(--bg)}
111  .slide.acc-m{border-top:4px solid var(--accent)}
112  .slide.acc-c{border-top:4px solid var(--accent2)}
113  .slide.acc-a{border-top:4px solid var(--amber)}
114  .slide.acc-g{border-top:4px solid var(--green)}
115
116  /* ══ PIRÁMIDES — el componente central del taller ══ */
117  .pyr{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:14px;width:100%}
118  .pyr .lay{
119    width:var(--w);min-width:150px;background:var(--card2);border:1px solid var(--border);
120    border-left:4px solid var(--c);border-radius:9px;padding:9px 14px;
121    display:flex;align-items:baseline;gap:10px;font-size:clamp(.8rem,.92vw,1.02rem);
122    transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
123  }
124  .pyr .lay b{color:var(--c);font-weight:900;flex:0 0 auto;font-size:.85em}
125  .pyr .lay span{font-weight:700;color:var(--text)}
126  .pyr .lay em{font-style:normal;color:var(--muted3);font-size:.86em;margin-left:auto;text-align:right;padding-left:10px}
127  .pyr .lay:hover{transform:translateX(4px) scale(1.015);box-shadow:0 10px 24px rgba(0,0,0,.45);border-color:var(--c)}
128  .pyr .lay.base{background:linear-gradient(90deg, rgba(139,92,246,.14), var(--card2));box-shadow:0 0 26px rgba(139,92,246,.14)}
129  /* La invertida: misma pila, dibujada al derecho. La base va abajo igual. */
130  .pyr.inv{flex-direction:column}
131
132  .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px;width:100%}
133  .trio .col{display:flex;flex-direction:column}
134  .trio .col h4{
135    font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
136    color:var(--c);margin-bottom:9px;text-align:center;
137  }
138  .trio .pyr{margin-top:0;gap:4px}
139  .trio .pyr .lay{min-width:0;padding:7px 10px;font-size:clamp(.68rem,.78vw,.86rem);gap:6px}
140  .trio .pyr .lay em{display:none}
141  .trio .nota{margin-top:9px;font-size:.72rem;color:var(--muted3);text-align:center;line-height:1.45}
142
143  /* ── Marca de agua ──
144     Va en cada diapositiva para que cualquier captura o grabación quede
145     identificada. Discreta al editar, algo más presente al proyectar,
146     que es cuando el material sale a circular. */
147  .marca-agua{
148    position:absolute;right:26px;bottom:18px;z-index:4;
149    display:flex;align-items:center;gap:8px;opacity:.26;pointer-events:none;user-select:none;
150  }
151  .marca-agua img{width:20px;height:20px;display:block}
152  .marca-agua span{font-size:.66rem;font-weight:800;letter-spacing:.09em;color:var(--muted2);white-space:nowrap}
153  .marca-agua b{color:var(--accent-lt);font-weight:800}
154  body.presenting .marca-agua{right:3.2vw;bottom:2.6vh;opacity:.34}
155  body.presenting .marca-agua img{width:clamp(22px,1.9vw,34px);height:auto}
156  body.presenting .marca-agua span{font-size:clamp(.68rem,.82vw,1rem)}
157  @media(max-width:900px){.marca-agua{right:14px;bottom:12px;opacity:.2}.marca-agua span{font-size:.6rem}}
158
159  /* Recorrido horizontal: baja la pila, viaja, sube, y entra por arriba */
160  .viaje{display:flex;align-items:stretch;gap:8px;margin-top:14px;flex-wrap:wrap}
161  .viaje .paso{
162    flex:1;min-width:118px;background:var(--card2);border:1px solid var(--border);
163    border-top:3px solid var(--c);border-radius:11px;padding:12px 13px;text-align:center;
164  }
165  .viaje .paso .t{font-size:.6rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--c);margin-bottom:6px}
166  .viaje .paso .d{font-size:clamp(.8rem,.92vw,1rem);font-weight:700;color:var(--text);line-height:1.3}
167  .viaje .paso .s{font-size:clamp(.7rem,.78vw,.86rem);color:var(--muted3);margin-top:4px;line-height:1.35}
168  .viaje .flecha{flex:0 0 auto;align-self:center;color:var(--muted3);font-size:1.15rem;font-weight:900}
169  .viaje .paso.luz{background:linear-gradient(160deg, rgba(251,191,36,.14), var(--card2));box-shadow:0 0 22px rgba(251,191,36,.1)}
170
171  .ley{
172    margin-top:16px;background:var(--card2);border:1px solid var(--border);
173    border-left:4px solid var(--amber);border-radius:13px;padding:16px 20px;max-width:60ch;
174  }
175  .ley .lbl{font-size:.64rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
176  .ley p{font-size:1.02rem!important;font-weight:700;color:var(--text)!important;line-height:1.5;max-width:none}
177
178  .vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
179  .vs .c{background:var(--card2);border:1px solid var(--border);border-top:3px solid var(--c);border-radius:13px;padding:16px 18px}
180  .vs .c h4{font-size:.94rem;font-weight:900;color:var(--c);margin-bottom:8px}
181  .vs .c p{font-size:.88rem!important;max-width:none;line-height:1.55}
182
183  /* ── Vida ── */
184  @keyframes flotar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-11px) rotate(-.6deg)}}
185  @keyframes respirar{0%,100%{opacity:.30;transform:translateX(-50%) scale(1)}50%{opacity:.16;transform:translateX(-50%) scale(.88)}}
186  @keyframes entrar{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
187  @keyframes crecer{from{opacity:0;
187transform:scaleX(.55)}to{opacity:1;transform:none}}
188  .slide.active .art{position:relative}
189  .slide.active .art::after{
190    content:"";position:absolute;left:50%;bottom:2%;width:56%;height:14px;border-radius:50%;
191    background:radial-gradient(closest-side, rgba(139,92,246,.55), transparent 72%);
192    filter:blur(7px);animation:respirar 6.5s ease-in-out infinite;
193  }
194  .slide.active .art img{animation:flotar 6.5s ease-in-out infinite}
195  .slide.active .txt > *{animation:entrar .5s ease backwards}
196  .slide.active .txt > *:nth-child(1){animation-delay:.04s}
197  .slide.active .txt > *:nth-child(2){animation-delay:.12s}
198  .slide.active .txt > *:nth-child(3){animation-delay:.20s}
199  .slide.active .txt > *:nth-child(4){animation-delay:.28s}
200  .slide.active ul li{animation:entrar .45s ease backwards}
201  .slide.active ul li:nth-child(1){animation-delay:.22s}
202  .slide.active ul li:nth-child(2){animation-delay:.31s}
203  .slide.active ul li:nth-child(3){animation-delay:.40s}
204  .slide.active ul li:nth-child(4){animation-delay:.49s}
205  .slide.active ul li:nth-child(5){animation-delay:.58s}
206  /* La pirámide se construye de abajo hacia arriba: primero la base. */
207  .slide.active .pyr .lay{animation:crecer .42s cubic-bezier(.2,.8,.3,1) backwards}
208  .slide.active .pyr .lay:nth-last-child(1){animation-delay:.14s}
209  .slide.active .pyr .lay:nth-last-child(2){animation-delay:.24s}
210  .slide.active .pyr .lay:nth-last-child(3){animation-delay:.34s}
211  .slide.active .pyr .lay:nth-last-child(4){animation-delay:.44s}
212  .slide.active .pyr .lay:nth-last-child(5){animation-delay:.54s}
213  .slide.active .pyr .lay:nth-last-child(6){animation-delay:.64s}
214  .slide.active .pyr .lay:nth-last-child(7){animation-delay:.74s}
215
216  .slide-nav{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:16px}
217  .slide-nav button{font-family:inherit;font-weight:700;font-size:.87rem;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:11px;padding:12px 24px;cursor:pointer;transition:all .2s}
218  .slide-nav button:hover:not(:disabled){border-color:var(--accent2);box-shadow:0 0 16px rgba(34,211,238,.22)}
219  .slide-nav button:disabled{opacity:.32;cursor:default}
220  .slide-dots{display:flex;gap:6px;flex-wrap:wrap}
221  .slide-dots span{width:8px;height:8px;border-radius:50%;background:var(--card);border:1px solid var(--border);cursor:pointer;transition:all .2s}
222  .slide-dots span.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px rgba(139,92,246,.6)}
223
224  /* ══ PRESENTACIÓN ══ */
225  body.presenting{overflow:hidden}
226  body.presenting .sidebar{display:none}
227  body.presenting .content{max-width:none;padding:0}
228  body.presenting #slides{padding-top:0}
229  body.presenting .present-btn{position:fixed;top:20px;right:24px;opacity:.25}
230  body.presenting .present-btn:hover{opacity:1}
231  body.presenting .deck-top{position:fixed;top:0;left:0;right:0;margin:0;z-index:7;gap:0}
232  body.presenting .deck-prog{height:3px;border:none;border-radius:0;background:rgba(30,41,59,.55)}
233  body.presenting .deck-count{display:none}
234  body.presenting .slide{border:none;border-radius:0;min-height:100vh;padding:5.5vh 5.5vw;background:transparent}
235  body.presenting .slide.active{justify-content:center;gap:4.5vw}
236  body.presenting .kicker{font-size:clamp(.8rem,1.05vw,1.3rem);margin-bottom:2.2vh}
237  body.presenting .tag{font-size:clamp(.76rem,.95vw,1.15rem);padding:7px 16px;margin-bottom:2.2vh}
238  body.presenting .slide h1{font-size:clamp(2.4rem,4.6vw,5rem);margin-bottom:2.4vh}
239  body.presenting .slide h2{font-size:clamp(1.85rem,3.5vw,3.8rem);margin-bottom:2.2vh}
240  body.presenting .slide p{font-size:clamp(1.05rem,1.5vw,1.9rem);max-width:36ch;line-height:1.5}
241  body.presenting .slide ul li{font-size:clamp(.98rem,1.3vw,1.65rem);padding:.9vh 0 .9vh 30px}
242  body.presenting .slide .art{width:clamp(230px,22vw,480px)}
243  body.presenting .slide .art.sm{width:clamp(160px,14vw,300px)}
244  body.presenting .pyr .lay{font-size:clamp(.9rem,1.15vw,1.5rem);padding:1.1vh 1.2vw}
245  body.presenting .trio .pyr .lay{font-size:clamp(.72rem,.85vw,1.05rem);padding:.7vh .7vw}
246  body.presenting .ley{max-width:44ch}
247  body.presenting .ley p{font-size:clamp(1.05rem,1.4vw,1.8rem)!important}
248  body.presenting .slide-nav{
249    position:fixed;bottom:24px;left:50%;transform:translateX(-50%);margin:0;
250    background:rgba(13,18,40,.86);backdrop-filter:blur(10px);border:1px solid var(--border);
251    border-radius:999px;padding:10px 16px;gap:20px;width:auto;z-index:6;opacity:.35;transition:opacity .25s;
252  }
253  body.presenting .slide-nav:hover{opacity:1}
254  body.presenting .slide-nav button{padding:8px 16px;font-size:.82rem;border-radius:999px}
255
256  /* ── TRIVIA ── */
257  .panel-head{margin-bottom:24px}
258  .panel-head h1{font-weight:900;font-size:1.85rem;margin-bottom:9px;letter-spacing:-.025em}
259  .panel-head p{color:var(--muted2);line-height:1.6;max-width:66ch;font-size:.95rem}
260  .quiz-bar{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
261  .progress{flex:1;min-width:180px;height:9px;background:var(--card);border:1px solid var(--border);border-radius:999px;overflow:hidden}
262  .progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .35s}
263  .score{font-size:.83rem;font-weight:800;color:var(--muted2);white-space:nowrap}
264  .score b{color:var(--green)}
265  .q-card{background:var(--card);border:1px solid var(--border);border-radius:18px;
265padding:28px 30px}
266  .q-meta{font-size:.68rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);margin-bottom:11px}
267  .q-card h3{font-size:1.18rem;font-weight:800;line-height:1.35;margin-bottom:20px}
268  .opts{display:flex;flex-direction:column;gap:10px}
269  .opt{text-align:left;font:inherit;font-size:.94rem;color:var(--muted);background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:15px 18px;cursor:pointer;transition:all .18s;display:flex;gap:12px;align-items:flex-start}
270  .opt .k{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:900;color:var(--muted2)}
271  .opt:hover:not(:disabled){border-color:var(--accent);color:var(--text)}
272  .opt:disabled{cursor:default}
273  .opt.ok{border-color:var(--green);background:rgba(52,211,153,.11);color:var(--text)}
274  .opt.ok .k{background:var(--green);color:var(--bg);border-color:transparent}
275  .opt.bad{border-color:var(--red);background:rgba(248,113,113,.09)}
276  .opt.bad .k{background:var(--red);color:var(--bg);border-color:transparent}
277  .why{margin-top:18px;padding:16px 19px;border-radius:12px;background:var(--card2);border:1px solid var(--border);border-left:4px solid var(--accent2);font-size:.9rem;line-height:1.6;color:var(--muted);display:none}
278  .why.show{display:block;animation:fadeUp .3s ease}
279  .why b{color:var(--text)}
280  .why .verdict{display:block;font-weight:900;margin-bottom:7px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
281  .why.good .verdict{color:var(--green)}
282  .why.bad .verdict{color:var(--amber)}
283  .q-nav{display:flex;justify-content:flex-end;margin-top:18px}
284  .q-nav button{font-family:inherit;font-weight:800;font-size:.87rem;background:var(--accent);color:#fff;border:none;border-radius:11px;padding:13px 26px;cursor:pointer;transition:all .2s}
285  .q-nav button:hover{box-shadow:0 0 18px rgba(139,92,246,.5)}
286  .q-nav button:disabled{opacity:.3;cursor:default;box-shadow:none}
287  .result{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:40px;text-align:center}
288  .result .big{font-size:3.4rem;font-weight:900;letter-spacing:-.04em;line-height:1}
289  .result .of{font-size:1rem;color:var(--muted2);margin-top:6px}
290  .result h3{font-size:1.4rem;font-weight:900;margin-top:20px;letter-spacing:-.02em}
291  .result p{color:var(--muted);margin-top:12px;max-width:56ch;margin-left:auto;margin-right:auto;line-height:1.65}
292  .result button{margin-top:26px;font-family:inherit;font-weight:800;font-size:.88rem;background:transparent;color:var(--accent-lt);border:2px solid var(--accent);border-radius:11px;padding:13px 28px;cursor:pointer;transition:all .2s}
293  .result button:hover{background:var(--accent);color:#fff}
294
295  /* ── GLOSARIO ── */
296  .vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px}
297  .vc{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:22px;transition:all .2s}
298  .vc:hover{border-color:var(--accent2);box-shadow:0 0 18px rgba(34,211,238,.13)}
299  .vc h3{font-weight:800;font-size:1rem;margin-bottom:8px;color:var(--accent2)}
300  .vc p{font-size:.86rem;line-height:1.6;color:var(--muted2)}
301  .vc .t{display:inline-block;margin-top:11px;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:4px;background:var(--panel);border:1px solid var(--border);color:var(--muted3)}
302
303  footer{margin-top:34px;padding-top:20px;border-top:1px solid var(--border);font-size:.75rem;color:var(--muted3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
304  footer .em{color:var(--accent-lt)}
305
306  @media(max-width:1000px){
307    .trio{grid-template-columns:1fr;gap:22px}
308    .vs{grid-template-columns:1fr}
309  }
310  @media(max-width:900px){
311    .layout{flex-direction:column}
312    .sidebar{width:100%;min-width:0;height:auto;position:static;overflow:visible}
313    .anchor{margin-top:18px}
314    .content{padding:24px 18px}
315    .slide{padding:28px 20px;min-height:0}
316    .slide.active{flex-direction:column;align-items:flex-start;gap:20px}
317    .slide .art{width:150px;align-self:center;order:-1}
318    .pyr .lay{min-width:0}
319  }
320  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
321</style>
322</head>
323<body>
324<div class="layout">
325
326  <!-- ══════ SIDEBAR ══════ -->
327  <aside class="sidebar">
328    <div class="brand">
329      <img src="assets/logo.png" alt="Salazar Duke Impact Hub">
330      <div class="name">Salazar Duke<span>Impact Hub</span></div>
331    </div>
332    <div class="session">
333      <strong>Las tres pirámides</strong>
334      <em>El modelo OSI, las capas de la IA y el liderazgo servicial: tres pilas, una sola ley</em>
335    </div>
336
337    <div class="actos">
338      <div class="t">Actos</div>
339      <button data-ir="0" style="--c:var(--muted2)"><i>0</i> La pregunta</button>
340      <button data-ir="3" style="--c:var(--accent2)"><i>I</i> La pirámide que ya funciona</button>
341      <button data-ir="8" style="--c:var(--accent)"><i>II</i> La pirámide de la IA</button>
342      <button data-ir="18" style="--c:var(--green)"><i>III</i> La pirámide invertida</button>
343      <button data-ir="22" style="--c:var(--amber)"><i>IV</i> La unión</button>
344    </div>
345
346    <button class="tab-btn active" data-tab="slides"><span class="num">1</span> Diapositivas</button>
347    <button class="tab-btn" data-tab="trivia"><span class="num">2</span> Trivia · El viaje</button>
348    <button class="tab-btn" data-tab="vocab"><span class="num">3</span> Glosario</button>
349
350    <div class="anchor">
351      <b>"La base carga todo, y es la que nadie mira."</b>
352      En la red, en el modelo y en el equipo.
353    </div>
354  </aside>
355
356  <!-- ══════ CONTENIDO ══════ -->
357  <main class="content">
358
359    <!-- ─────── DIAPOSITIVAS ─────── -->
360    <section class="tab-panel active" id="slides">
361      <button class="present-btn" id="presentBtn" title="Modo presentación (tecla P)">▶ Presentar</button>
362      <div class="deck-top">
363        <div class="deck-prog"><i id="deckProg"></i></div>
364        <div class="deck-count" id="deckCount"><b>1</b> / 29</div>
365      </div>
366
367      <!-- ══ ACTO 0 ══ -->
368      <div class="slide active">
369        <div class="txt">
370          <div class="kicker">Acto 0 · La pregunta</div>
371          <h1>Tres pirámides que parecen <span class="hl-m">no tener nada que ver</span>.</h1>
372          <p>Un modelo de redes de 1984. La historia de la inteligencia artificial. Y un libro de liderazgo.</p>
373          <p>Al final de este recorrido vas a ver que son <b>la misma figura</b>, y que las tres dicen exactamente lo mismo. Quien entiende una, entiende las tres.</p>
374        </div>
375        <div class="art"><img src="assets/voxel/host.webp" alt=""></div>
376      </div>
377
378      <div class="slide acc-m">
379        <div class="txt">
380          <span class="tag" style="background:var(--accent)">El hilo</span>
381          <h2>Todo lo que funciona <span class="hl-m">está apilado</span>.</h2>
382          <p>Nada complejo se construye de una pieza. Se construye por capas, y cada capa se apoya en la de abajo sin necesitar entenderla por dentro.</p>
383          <p>Eso tiene un nombre: <b>abstracción</b>. Es lo que te permite mandar un mensaje sin saber de electrones, y usar una IA sin saber de matrices.</p>
384          <p>La abstracción es un regalo. Y también un riesgo, porque cuando dejas de ver la base, dejas de cuidarla.</p>
385        </div>
386        <div class="art"><img src="assets/voxel/layers.webp" alt=""></div>
387      </div>
388
389      <div class="slide">
390        <div class="txt">
391          <div class="kicker">El recorrido</div>
392          <h2>Cuatro actos.</h2>
393          <ul>
394            <li><b>I · La pirámide que ya funciona</b> — el modelo OSI, siete capas que sostienen internet</li>
395            <li><b>II · La pirámide de la IA</b> — de dónde viene y de qué está hecha por dentro</li>
396            <li><b>III · La pirámide invertida</b> — el liderazgo servicial de James Hunter</li>
397            <li><b>IV · La unión</b> — dos leyes que valen para las tres</li>
398          </ul>
399          <p>No es una analogía bonita. Es la misma estructura resolviendo el mismo problema en tres terrenos distintos.</p>
400        </div>
401        <div class="art"><img src="assets/voxel/marca.webp" alt=""></div>
402      </div>
403
404      <!-- ══ ACTO I · OSI ══ -->
405      <div class="slide acc-c">
406        <div class="txt">
407          <span class="tag" style="background:var(--accent2)">Acto I · OSI</span>
408          <h2>1984: había que ponerse <span class="hl-c">de acuerdo</span>.</h2>
409          <p>Cada fabricante hacía redes que solo hablaban con las suyas. Comprar de dos marcas era condenarse a que no se entendieran.</p>
410          <p>La solución no fue obligar a todos a construir igual. Fue <b>partir el problema en siete capas</b> y acordar únicamente cómo se hablan entre vecinas.</p>
411          <p>Así nació el modelo OSI. Cuarenta años después, seguís usándolo cada vez que abres el celular.</p>
412        </div>
413        <div class="art"><img src="assets/voxel/code.webp" alt=""></div>
414      </div>
415
416      <div class="slide acc-c">
417        <div class="txt">
418          <span class="tag" style="background:var(--accent2)">Acto I · OSI</span>
419          <h2>Las siete capas.</h2>
420          <div class="pyr">
421            <div class="lay" style="--w:36%;--c:var(--amber)"><b>7</b><span>Aplicación</span><em>lo único que ves</em></div>
422            <div class="lay" style="--w:46%;--c:var(--amber)"><b>6</b><span>Presentación</span><em>formato y cifrado</em></div>
423            <div class="lay" style="--w:56%;--c:var(--accent2)"><b>5</b><span>Sesión</span><em>abrir y cerrar</em></div>
424            <div class="lay" style="--w:66%;--c:var(--accent2)"><b>4</b><span>Transporte</span><em>que llegue completo</em></div>
425            <div class="lay" style="--w:76%;--c:var(--accent)"><b>3</b><span>Red</span><em>encontrar el camino</em></div>
426            <div class="lay" style="--w:88%;--c:var(--accent)"><b>2</b><span>Enlace de datos</span><em>hablar con el vecino</em></div>
427            <div class="lay base" style="--w:100%;--c:var(--green)"><b>1</b><span>Física</span><em>cables, señal, electrones</em></div>
428          </div>
429        </div>
430      </div>
431
432      <div class="slide acc-c">
433        <div class="txt">
434          <span class="tag" style="background:var(--accent2)">Acto I · OSI</span>
435          <h2>Mandas un mensaje. <span class="hl-c">Trabajan las siete</span>.</h2>
436          <p>Escribes "hola" y tocas enviar. Lo que ves es la capa 7.</p>
437          <p>Debajo, tu mensaje se envuelve siete veces: se formatea, se cifra, se abre una sesión, se parte en pedazos numerados, se le pone una dirección, se entrega al vecino de red y finalmente se convierte en pulsos eléctricos o luz en una fibra.</p>
438          <p>Del otro lado se desenvuelve en orden inverso. <b>Nadie de arriba necesita saber cómo trabaja el de abajo.</b> Solo necesita confiar en que lo hará.</p>
439        </div>
440        <div class="art"><img src="assets/voxel/basico.webp" alt=""></div>
441      </div>
442
443      <div class="slide acc-c">
444        <div class="txt">
445          <span class="tag" style="background:var(--accent2)">Acto I · OSI</span>
446          <h2>Corta el cable y <span class="hl-r">se cae todo</span>.</h2>
447          <p>La capa 1 es la menos glamorosa: cables, conectores, señal. Ningún producto se vende diciendo "tenemos excelente capa física".</p>
448          <p>Pero si falla, no importa qué tan buena sea tu aplicación. <b>El fallo sube.</b> Nunca baja.</p>
449          <p>Y al revés: la aplicación más hermosa del mundo no repara un cable cortado. Arriba no se puede compensar lo que falta abajo.</p>
450          <div class="ley">
451            <div class="lbl">Primera pista</div>
452            <p>La capa que sostiene todo es la que nadie menciona.</p>
453          </div>
454        </div>
455        <div class="art"><img src="assets/voxel/riesgos.webp" alt=""></div>
456      </div>
457
458      <div class="slide">
459        <div class="txt">
460          <div class="kicker">Puente</div>
461          <h2>Ahora la misma pregunta, <span class="hl-m">para la IA</span>.</h2>
462          <p>Si internet está hecho de capas donde cada una se apoya en la anterior y solo se ve la de arriba...</p>
463          <p><b>¿qué hay debajo de la ventanita donde escribes tu prompt?</b></p>
464        </div>
465        <div class="art"><img src="assets/voxel/memoria.webp" alt=""></div>
466      </div>
467
468      <!-- ══ ACTO II · IA ══ -->
469      <div class="slide acc-m">
470        <div class="txt">
471          <span class="tag" style="background:var(--accent)">Acto II · La IA</span>
472          <h2>Dos miradas de la misma pila.</h2>
473          <ul>
474            <li><b>La mirada histórica</b> — cómo se fue construyendo, capa sobre capa, desde 1950 hasta los agentes de hoy.</li>
475            <li><b>La mirada operativa</b> — de qué está hecho cualquier sistema de IA, hoy, por dentro: dato, algoritmo, entrenamiento, modelo, inferencia.</li>
476          </ul>
477          <p>Son la misma pirámide vista de frente y de perfil. Necesitas las dos: una te da criterio histórico, la otra te dice dónde meter la mano cuando algo falla.</p>
478        </div>
479        <div class="art"><img src="assets/voxel/imagenes.webp" alt=""></div>
480      </div>
481
482      <div class="slide acc-m">
483        <div class="txt">
484          <span class="tag" style="background:var(--accent)">Mirada histórica</span>
485          <h2>Seis capas, setenta años.</h2>
486          <div class="pyr">
487            <div class="lay" style="--w:40%;--c:var(--amber)"><b>6</b><span>IA Agéntica</span><em>hoy · actúa y encadena</em></div>
488            <div class="lay" style="--w:52%;--c:var(--amber)"><b>5</b><span>IA Generativa</span><em>2020s · crea contenido</em></div>
489            <div class="lay" style="--w:64%;--c:var(--accent2)"><b>4</b><span>Deep Learning</span><em>2010s · muchas capas</em></div>
490            <div class="lay" style="--w:76%;--c:var(--accent2)"><b>3</b><span>Redes Neuronales</span><em>capas de nodos</em></div>
491            <div class="lay" style="--w:88%;--c:var(--accent)"><b>2</b><span>Machine Learning</span><em>aprende de datos</em></div>
492            <div class="lay base" style="--w:100%;--c:var(--green)"><b>1</b><span>IA Clásica</span><em>1950s · reglas escritas a mano</em></div>
493          </div>
494        </div>
495      </div>
496
497      <div class="slide acc-m">
498        <div class="txt">
499          <span class="tag" style="background:var(--accent)">Mirada histórica</span>
500          <h2>Cada capa nació de una <span class="hl-m">frustración</span>.</h2>
501          <ul>
502            <li><b>IA Clásica:</b> le escribíamos las reglas a mano. Funcionó para el ajedrez, fracasó con el mundo real. Las reglas eran infinitas.</li>
503            <li><b>Machine Learning:</b> si no podemos escribir las reglas, que las deduzca de ejemplos.</li>
504            <li><b>Redes Neuronales:</b> organizamos ese aprendizaje en capas de nodos, imitando de lejos al cerebro.</li>
505            <li><b>Deep Learning:</b> apilamos muchas capas. La máquina dejó de necesitar que le dijéramos en qué fijarse.</li>
506            <li><b>Generativa y Agéntica:</b> ya no solo clasifica: crea, y después actúa.</li>
507          </ul>
508        </div>
509        <div class="art sm"><img src="assets/voxel/layers.webp" alt=""></div>
510      </div>
511
512      <div class="slide acc-c">
513        <div class="txt">
514          <span class="tag" style="background:var(--accent2)">Mirada operativa</span>
515          <h2>De qué está hecho, <span class="hl-c">por dentro</span>.</h2>
516          <div class="pyr">
517            <div class="lay" style="--w:40%;--c:var(--amber)"><b>5</b><span>Inferencia</span><em>lo único que ve el usuario</em></div>
518            <div class="lay" style="--w:56%;--c:var(--amber)"><b>4</b><span>Modelo</span><em>lo aprendido, congelado</em></div>
519            <div class="lay" style="--w:72%;--c:var(--accent2)"><b>3</b><span>Entrenamiento</span><em>donde ocurre el aprendizaje</em></div>
520            <div class="lay" style="--w:86%;--c:var(--accent)"><b>2</b><span>Algoritmo</span><em>qué hacer con el dato</em></div>
521            <div class="lay base" style="--w:100%;--c:var(--green)"><b>1</b><span>Dato</span><em>la capa física de la IA</em></div>
522          </div>
523          <p style="margin-top:14px">Fíjate en la forma. Es la misma de OSI, con otros nombres.</p>
524        </div>
525      </div>
526
527      <div class="slide acc-g">
528        <div class="txt">
529          <span class="tag" style="background:var(--green)">Capa 1</span>
530          <h2>El dato es la <span class="hl-g">capa física</span> de la IA.</h2>
531          <p>Nadie compra un producto porque tenga buenos datos. Nadie los muestra en un pitch. No tienen glamour, igual que los cables.</p>
532          <p>Pero todo lo demás descansa ahí. Un dato sesgado produce un modelo sesgado, y ninguna capa de arriba lo arregla: ni un algoritmo mejor, ni más entrenamiento, ni un prompt más ingenioso.</p>
533          <p><b>El fallo sube.</b> Igual que en la red.</p>
534        </div>
535        <div class="art"><img src="assets/voxel/memoria.webp" alt=""></div>
536      </div>
537
538      <div class="slide acc-m">
539        <div class="txt">
540          <span class="tag" style="background:var(--accent)">Capa 2</span>
541          <h2>El algoritmo es <span class="hl-m">la receta</span>, no el plato.</h2>
542          <p>Es el procedimiento que define cómo se va a aprender del dato: qué mirar, cómo medir el error y cómo corregirse.</p>
543          <p>Elegir algoritmo es elegir qué tipo de patrón puedes encontrar. Uno que solo traza líneas rectas jamás va a ver una curva, por más datos que le des.</p>
544          <p>Por eso la pregunta correcta nunca es "¿cuál es el mejor algoritmo?", sino <b>"¿qué forma tiene mi problema?"</b>.</p>
545        </div>
546        <div class="art sm"><img src="assets/voxel/code.webp" alt=""></div>
547      </div>
548
549      <div class="slide acc-c">
550        <div class="txt">
551          <span class="tag" style="background:var(--accent2)">Capa 3</span>
552          <h2>Entrenamiento: <span class="hl-c">cuatro formas de aprender</span>.</h2>
553          <ul>
554            <li><b>Supervisado</b> — le das ejemplos con la respuesta correcta. "Esto es spam, esto no". Aprende la relación entre entrada y salida.</li>
555            <li><b>No supervisado</b> — sin respuestas. Le pides que encuentre estructura por su cuenta: agrupar clientes parecidos, detectar lo que se sale de la norma.</li>
556            <li><b>Por refuerzo</b> — ensayo y error con recompensa. Como enseñarle a un perro, pero con millones de intentos.</li>
557            <li><b>Autosupervisado</b> — el dato genera sus propias etiquetas. Tapar una palabra y pedirle que la adivine. <b>Esto es lo que hizo posibles a los modelos de lenguaje</b>: ya no hacía falta que un humano etiquetara internet.</li>
558          </ul>
559        </div>
560        <div class="art sm"><img src="assets/voxel/basico.webp" alt=""></div>
561      </div>
562
563      <div class="slide acc-c">
564        <div class="txt">
565          <span class="tag" style="background:var(--accent2)">Capa 3</span>
566          <h2>Y dos atajos que <span class="hl-c">cambian el costo</span>.</h2>
567          <ul>
568            <li><b>Transferencia</b> — partir de un modelo ya entrenado en algo general y aprovechar lo que sabe. No empiezas de cero.</li>
569            <li><b>Ajuste fino</b> — tomar ese modelo y especializarlo con tus propios datos, que son muchos menos.</li>
570          </ul>
571          <p>Esta es la razón por la que hoy una empresa mediana puede tener un modelo propio. Ya no necesita el presupuesto de entrenar desde cero.</p>
572          <p>Y también es la razón por la que <b>hereda los sesgos del modelo del que partió</b>, sin haberlos elegido.</p>
573        </div>
574        <div class="art sm"><img src="assets/voxel/imagenes.webp" alt=""></div>
575      </div>
576
577      <div class="slide acc-a">
578        <div class="txt">
579          <span class="tag" style="background:var(--amber)">Capas 4 y 5</span>
580          <h2>El modelo recuerda. <span class="hl-a">La inferencia responde</span>.</h2>
581          <p>El <b>modelo</b> es el resultado del entrenamiento: lo aprendido, congelado. No sigue aprendiendo mientras lo usas.</p>
582          <p>La <b>inferencia</b> es cada vez que le preguntas algo y responde. Es la capa 5, y es <b>la única que el usuario ve</b>.</p>
583          <p>De ahí el espejismo: la gente cree que la IA "es" el chat. El chat es la punta. Debajo hay cuatro capas que decidieron todo lo que ese chat puede y no puede decir.</p>
584        </div>
585        <div class="art"><img src="assets/voxel/landing.webp" alt=""></div>
586      </div>
587
588      <div class="slide">
589        <div class="txt">
590          <div class="kicker">Puente</div>
591          <h2>Dos pirámides, <span class="hl-m">la misma forma</span>.</h2>
592          <p>En OSI, la capa física carga todo y nadie la nombra. En la IA, el dato carga todo y nadie lo muestra.</p>
593          <p>Y ahora la pregunta que convierte esto en algo más que una clase de tecnología:</p>
594          <p><b>¿qué pasa cuando la pila está hecha de personas?</b></p>
595        </div>
596        <div class="art"><img src="assets/voxel/marca.webp" alt=""></div>
597      </div>
598
599      <!-- ══ ACTO III · HUNTER ══ -->
600      <div class="slide acc-g">
601        <div class="txt">
602          <span class="tag" style="background:var(--green)">Acto III · Liderazgo</span>
603          <h2>El organigrama de siempre.</h2>
604          <div class="pyr">
605            <div class="lay" style="--w:34%;--c:var(--red)"><b>▲</b><span>Dirección</span><em>arriba del todo</em></div>
606            <div class="lay" style="--w:52%;--c:var(--muted3)"><b>·</b><span>Mandos medios</span><em>sirven a la dirección</em></div>
607            <div class="lay" style="--w:74%;--c:var(--muted3)"><b>·</b><span>Equipos</span><em>sirven a los mandos</em></div>
608            <div class="lay" style="--w:100%;--c:var(--muted3)"><b>·</b><span>Cliente</span><em>al final de la fila</em></div>
609          </div>
610          <p style="margin-top:14px">Todos miran hacia arriba. La energía de la organización sube, buscando aprobación. <b>Y el cliente queda hasta el final.</b></p>
611        </div>
612      </div>
613
614      <div class="slide acc-g">
615        <div class="txt">
616          <span class="tag" style="background:var(--green)">Acto III · Liderazgo</span>
617          <h2>James Hunter <span class="hl-g">la da vuelta</span>.</h2>
618          <div class="pyr">
619            <div class="lay" style="--w:36%;--c:var(--green)"><b>▲</b><span>Cliente</span><em>a quien todo sirve</em></div>
620            <div class="lay" style="--w:54%;--c:var(--accent2)"><b>·</b><span>Equipos</span><em>sostenidos, no vigilados</em></div>
621            <div class="lay" style="--w:76%;--c:var(--accent)"><b>·</b><span>Mandos medios</span><em>quitan obstáculos</em></div>
622            <div class="lay base" style="--w:100%;--c:var(--amber)"><b>▼</b><span>Quien lidera</span><em>abajo, sosteniendo</em></div>
623          </div>
624          <p style="margin-top:14px">En <em>La paradoja</em>, Hunter lo resume en una frase: <b>para liderar hay que servir</b>. Quien manda ya no está arriba pidiendo, sino abajo sosteniendo.</p>
625        </div>
626      </div>
627
628      <div class="slide acc-g">
629        <div class="txt">
630          <span class="tag" style="background:var(--green)">Acto III · Liderazgo</span>
631          <h2>Poder y autoridad <span class="hl-g">no son lo mismo</span>.</h2>
632          <div class="vs">
633            <div class="c" style="--c:var(--red)">
634              <h4>Poder</h4>
635              <p>La capacidad de obligar por la posición que ocupas. Te la da el cargo, funciona de inmediato y <b>se gasta con el uso</b>. Cuando te vas, se va con vos.</p>
636            </div>
637            <div class="c" style="--c:var(--green)">
638              <h4>Autoridad</h4>
639              <p>La capacidad de influir porque la gente quiere seguirte. Se gana sirviendo, tarda en construirse y <b>se acumula</b>. Cuando te vas, queda.</p>
640            </div>
641          </div>
642          <p style="margin-top:14px">El poder es la capa 7: se ve, es vistosa, es inmediata. La autoridad es la capa 1: no se ve, no se presume, y sostiene todo lo demás.</p>
643        </div>
644      </div>
645
646      <div class="slide acc-g">
647        <div class="txt">
648          <span class="tag" style="background:var(--green)">Acto III · Liderazgo</span>
649          <h2>Y aquí está <span class="hl-g">el truco</span>.</h2>
650          <p>Decimos que Hunter "invirtió" la pirámide. Pero mira las otras dos: en OSI y en la IA, <b>la base siempre estuvo abajo</b>. A nadie se le ocurrió dibujar la capa física arriba.</p>
651          <p>El organigrama fue el único de los tres que se dibujó al revés desde el principio.</p>
652          <div class="ley">
653            <div class="lbl">La revelación</div>
654            <p>Hunter no invirtió la pirámide. Corrigió un error de dibujo.</p>
655          </div>
656        </div>
657        <div class="art"><img src="assets/voxel/host.webp" alt=""></div>
658      </div>
659
660      <!-- ══ ACTO IV · LA UNIÓN ══ -->
661      <div class="slide acc-a">
662        <div class="txt">
663          <span class="tag" style="background:var(--amber)">Acto IV · La unión</span>
664          <h2>Las tres, <span class="hl-a">lado a lado</span>.</h2>
665          <div class="trio">
666            <div class="col" style="--c:var(--accent2)">
667              <h4>Red</h4>
668              <div class="pyr">
669                <div class="lay" style="--w:52%;--c:var(--amber)"><span>Aplicación</span></div>
670                <div class="lay" style="--w:70%;--c:var(--accent2)"><span>Transporte</span></div>
671                <div class="lay" style="--w:85%;--c:var(--accent)"><span>Red</span></div>
672                <div class="lay base" style="--w:100%;--c:var(--green)"><span>Física</span></div>
673              </div>
674              <div class="nota">Lo que ves: la app<br>Lo que carga: el cable</div>
675            </div>
676            <div class="col" style="--c:var(--accent)">
677              <h4>Inteligencia artificial</h4>
678              <div class="pyr">
679                <div class="lay" style="--w:52%;--c:var(--amber)"><span>Inferencia</span></div>
680                <div class="lay" style="--w:70%;--c:var(--accent2)"><span>Modelo</span></div>
681                <div class="lay" style="--w:85%;--c:var(--accent)"><span>Entrenamiento</span></div>
682                <div class="lay base" style="--w:100%;--c:var(--green)"><span>Dato</span></div>
683              </div>
684              <div class="nota">Lo que ves: el chat<br>Lo que carga: el dato</div>
685            </div>
686            <div class="col" style="--c:var(--green)">
687              <h4>Equipo</h4>
688              <div class="pyr">
689                <div class="lay" style="--w:52%;--c:var(--amber)"><span>Cliente</span></div>
690                <div class="lay" style="--w:70%;--c:var(--accent2)"><span>Equipos</span></div>
691                <div class="lay" style="--w:85%;--c:var(--accent)"><span>Mandos</span></div>
692                <div class="lay base" style="--w:100%;--c:var(--green)"><span>Quien sirve</span></div>
693              </div>
694              <div class="nota">Lo que ves: el resultado<br>Lo que carga: quien sostiene</div>
695            </div>
696          </div>
697        </div>
698      </div>
699
700      <div class="slide acc-a">
701        <div class="txt">
702          <span class="tag" style="background:var(--amber)">La pregunta difícil</span>
703          <h2>¿El dato se convierte en <span class="hl-a">luz</span> cada vez que mandas un prompt?</h2>
704          <p>Sí y no. Y la respuesta separa dos cosas que se llaman igual.</p>
705          <div class="vs">
706            <div class="c" style="--c:var(--green)">
707              <h4>Sí viaja: tu prompt</h4>
708              <p>El texto que escribes ahora baja las siete capas, se vuelve luz en la fibra o voltaje en el cobre, cruza el mundo y sube las siete del otro lado. La respuesta hace el camino de vuelta.</p>
709            </div>
710            <div class="c" style="--c:var(--red)">
711              <h4>No viaja: el dato de entrenamiento</h4>
712              <p>Ese es la capa 1 de la pirámide de IA y ya ocurrió, meses o años antes. Hoy ni siquiera existe como dato: quedó comprimido en los pesos del modelo.</p>
713            </div>
714          </div>
715          <p style="margin-top:14px">Es como preguntar dónde está la harina en un pan horneado. <b>Está, pero ya no es harina.</b></p>
716        </div>
717      </div>
718
719      <div class="slide acc-a">
720        <div class="txt">
721          <span class="tag" style="background:var(--amber)">La pregunta difícil</span>
722          <h2>Las dos pirámides no se apilan. <span class="hl-a">Se cruzan</span>.</h2>
723          <div class="viaje">
724            <div class="paso" style="--c:var(--accent2)">
725              <div class="t">1 · Baja</div>
726              <div class="d">Capas 7 → 1</div>
727              <div class="s">se cifra, se parte, se direcciona</div>
728            </div>
729            <div class="flecha">→</div>
730            <div class="paso luz" style="--c:var(--amber)">
731              <div class="t">2 · Viaja</div>
732              <div class="d">Luz o voltaje</div>
733              <div class="s">acá sí es física pura</div>
734            </div>
735            <div class="flecha">→</div>
736            <div class="paso" style="--c:var(--accent2)">
737              <div class="t">3 · Sube</div>
738              <div class="d">Capas 1 → 7</div>
739              <div class="s">vuelve a ser tu texto</div>
740            </div>
741            <div class="flecha">→</div>
742            <div class="paso" style="--c:var(--accent)">
743              <div class="t">4 · Entra</div>
744              <div class="d">Por la capa 5</div>
745              <div class="s">inferencia, no dato</div>
746            </div>
747          </div>
748          <p style="margin-top:15px">OSI es <b>el camino</b>. La pirámide de la IA es <b>el edificio al final del camino</b>. Y tu prompt no entra por abajo: entra por el último piso, porque las capas 1 a 4 estaban terminadas antes de que escribieras nada.</p>
749          <div class="ley">
750            <div class="lbl">El cierre</div>
751            <p>Todo dato fue luz alguna vez. Pero no el mismo día.</p>
752          </div>
753        </div>
754      </div>
755
756      <div class="slide acc-a">
757        <div class="txt">
758          <span class="tag" style="background:var(--amber)">Ley 1</span>
759          <h2>La base carga todo, <span class="hl-a">y es invisible</span>.</h2>
760          <p>El cable, el dato y quien sirve tienen algo en común: nadie los aplaude, no aparecen en el pitch, y son lo primero que se recorta cuando hay que ahorrar.</p>
761          <p>La abstracción nos deja usar la cima sin pensar en la base. Es un regalo enorme. Pero tiene una factura: <b>lo que dejamos de ver, dejamos de mantener</b>.</p>
762          <div class="ley">
763            <div class="lbl">Ley 1</div>
764            <p>Cuanto más invisible es una capa, más probable es que esté abandonada.</p>
765          </div>
766        </div>
767        <div class="art"><img src="assets/voxel/memoria.webp" alt=""></div>
768      </div>
769
770      <div class="slide acc-a">
771        <div class="txt">
772          <span class="tag" style="background:var(--amber)">Ley 2</span>
773          <h2>El fallo <span class="hl-r">sube</span>. Nunca baja.</h2>
774          <ul>
775            <li>Cable cortado → no hay app que lo salve.</li>
776            <li>Dato sesgado → no hay prompt que lo corrija.</li>
777            <li>Nadie sostiene al equipo → no hay talento que lo compense.</li>
778          </ul>
779          <p>Y su consecuencia práctica, que es lo que te llevas:</p>
780          <div class="ley">
781            <div class="lbl">Ley 2</div>
782            <p>Cuando algo falla arriba, el problema casi nunca está arriba.</p>
783          </div>
784        </div>
785        <div class="art"><img src="assets/voxel/riesgos.webp" alt=""></div>
786      </div>
787
788      <div class="slide">
789        <div class="txt">
790          <div class="kicker">Cómo se usa</div>
791          <h2>El diagnóstico <span class="hl-m">de abajo hacia arriba</span>.</h2>
792          <p>La próxima vez que algo falle, resistí la tentación de arreglar lo que se ve. Baja una capa y pregunta.</p>
793          <ul>
794            <li>¿La web va lenta? Antes de rediseñar, mira la conexión y el servidor.</li>
795            <li>¿El modelo responde mal? Antes de cambiar el prompt, mira con qué datos aprendió.</li>
796            <li>¿El equipo no rinde? Antes de exigir más, pregunta qué obstáculo nadie les quitó.</li>
797          </ul>
798          <p>Arreglar la capa 7 cuando el problema está en la 1 es la forma más cara de perder el tiempo. Y la más común.</p>
799        </div>
800        <div class="art"><img src="assets/voxel/code.webp" alt=""></div>
801      </div>
802
803      <div class="slide">
804        <div class="txt">
805          <div class="kicker">Cierre</div>
806          <h1>Tres pirámides. <span class="hl-a">Una sola ley</span>.</h1>
807          <p>Ingenieros de red en 1984, investigadores de IA durante setenta años, y un libro de liderazgo llegaron por caminos distintos a la misma conclusión.
807</p>
808          <p style="font-size:1.22em;font-weight:700;color:var(--text);margin-top:16px">Lo que sostiene nunca es lo que se ve.</p>
809          <p>Quien entiende eso deja de arreglar síntomas. En su red, en sus modelos y en su gente.</p>
810        </div>
811        <div class="art"><img src="assets/voxel/host.webp" alt=""></div>
812      </div>
813
814      <div class="slide-nav">
815        <button id="prevBtn">← Anterior</button>
816        <div class="slide-dots" id="dots"></div>
817        <button id="nextBtn">Siguiente →</button>
818      </div>
819    </section>
820
821    <!-- ─────── TRIVIA ─────── -->
822    <section class="tab-panel" id="trivia">
823      <div class="panel-head">
824        <h1>Trivia: <span class="hl-m">el viaje completo</span>.</h1>
825        <p>Diecisiete preguntas que recorren los cuatro actos. No buscan que memorices nombres de capas, sino que reconozcas la misma estructura cuando cambia de disfraz. Las opciones se barajan en cada intento.</p>
826      </div>
827      <div class="quiz-bar">
828        <div class="progress"><i id="prog"></i></div>
829        <div class="score" id="score">Pregunta <b>1</b> de 17</div>
830      </div>
831      <div id="quiz"></div>
832      <footer>
833        <span>Taller · Las tres pirámides · Salazar Duke Impact Hub</span>
834        <span class="em">Lo que sostiene nunca es lo que se ve.</span>
835      </footer>
836    </section>
837
838    <!-- ─────── GLOSARIO ─────── -->
839    <section class="tab-panel" id="vocab">
840      <div class="panel-head">
841        <h1>Glosario <span class="hl-c">del recorrido</span>.</h1>
842        <p>Los términos de los cuatro actos, sin jerga.</p>
843      </div>
844      <div class="vocab">
845        <div class="vc"><h3>Abstracción</h3><p>Poder usar una capa sin entender por dentro la de abajo. Es lo que permite mandar un mensaje sin saber de electrones. Un regalo con factura: lo que dejas de ver, dejas de cuidarlo.</p><span class="t">Concepto central</span></div>
846        <div class="vc"><h3>Modelo OSI</h3><p>Acuerdo de 1984 que parte la comunicación en red en siete capas, donde cada una solo necesita saber hablar con sus vecinas.</p><span class="t">Acto I</span></div>
847        <div class="vc"><h3>Encapsulación</h3><p>Cada capa envuelve el paquete de la anterior y le agrega lo suyo. Del otro lado se desenvuelve en orden inverso.</p><span class="t">Acto I</span></div>
848        <div class="vc"><h3>Capa física</h3><p>La capa 1 de OSI: cables, conectores, señal. La menos vistosa y la que sostiene todas las demás.</p><span class="t">Acto I</span></div>
849        <div class="vc"><h3>IA Clásica</h3><p>Primera capa histórica. Las reglas se escribían a mano. Funcionó para dominios cerrados como el ajedrez y fracasó ante el mundo real, donde las reglas son infinitas.</p><span class="t">Acto II</span></div>
850        <div class="vc"><h3>Machine Learning</h3><p>En lugar de escribir las reglas, se deducen a partir de ejemplos. El giro que hizo posible todo lo que vino después.</p><span class="t">Acto II</span></div>
851        <div class="vc"><h3>Deep Learning</h3><p>Redes con muchas capas, capaces de aprender por sí mismas en qué fijarse, sin que un humano se lo indique.</p><span class="t">Acto II</span></div>
852        <div class="vc"><h3>Aprendizaje supervisado</h3><p>Se entrena con ejemplos que ya traen la respuesta correcta. Sirve para clasificar y predecir.</p><span class="t">Acto II</span></div>
853        <div class="vc"><h3>Aprendizaje no supervisado</h3><p>Sin respuestas de referencia. Se le pide encontrar estructura: agrupar lo parecido, detectar lo anómalo.</p><span class="t">Acto II</span></div>
854        <div class="vc"><h3>Aprendizaje por refuerzo</h3><p>Ensayo y error guiado por una recompensa. Aprende de las consecuencias, no de ejemplos.</p><span class="t">Acto II</span></div>
855        <div class="vc"><h3>Aprendizaje autosupervisado</h3><p>El propio dato genera sus etiquetas: tapar una palabra y pedir que la adivine. Es lo que hizo viables a los modelos de lenguaje, porque eliminó la necesidad de etiquetar a mano.</p><span class="t">Acto II</span></div>
856        <div class="vc"><h3>Transferencia y ajuste fino</h3><p>Partir de un modelo ya entrenado y especializarlo con pocos datos propios. Abarata todo, y hace heredar sesgos que nadie eligió.</p><span class="t">Acto II</span></div>
857        <div class="vc"><h3>Inferencia</h3><p>Cada vez que le preguntas al modelo y responde. La única capa que el usuario ve, y la que hace creer que la IA "es" el chat.</p><span class="t">Acto II</span></div>
858        <div class="vc"><h3>Poder</h3><p>Capacidad de obligar que da el cargo. Inmediata, vistosa, y se gasta con el uso. Es la capa 7 del liderazgo.</p><span class="t">Acto III</span></div>
859        <div class="vc"><h3>Autoridad</h3><p>Capacidad de influir que se gana sirviendo. Tarda en construirse, se acumula y queda cuando te vas. Es la capa 1.</p><span class="t">Acto III</span></div>
860        <div class="vc"><h3>Pirámide invertida</h3><p>El organigrama dibujado con quien lidera abajo, sosteniendo, y el cliente arriba. Hunter no la invirtió: corrigió el dibujo.</p><span class="t">Acto III</span></div>
861      </div>
862      <footer>
863        <span>Taller · Las tres pirámides · Salazar Duke Impact Hub</span>
864        <span class="em">Lo que sostiene nunca es lo que se ve.</span>
865      </footer>
866    </section>
867
868  </main>
869</div>
870
871<script>
872/* ══ Pestañas ══ */
873const tabBtns = document.querySelectorAll('.tab-btn');
874const panels  = document.querySelectorAll('.tab-panel');
875tabBtns.forEach(b => b.addEventListener('click', () => {
876  tabBtns.forEach(x => x.classList.remove('active'));
877  panels.forEach(p => p.classList.remove('active'));
878  b.classList.add('active');
879  document.getElementById(b.dataset.tab).classList.add('active');
880}));
881
882/* ══ Diapositivas ══ */
883const slides = document.querySelectorAll('.slide');
884
885/* Marca de agua en cada diapositiva. Se inyecta por JS en vez de repetirla
886   29 veces en el HTML: un solo lugar que editar si cambia la marca. */
887slides.forEach(s => {
888  const m = document.createElement('div');
889  m.className = 'marca-agua';
890  m.setAttribute('aria-hidden', 'true');
891  m.innerHTML = '<img src="assets/logo.png" alt=""><span>Salazar Duke <b>Impact Hub</b></span>';
892  s.appendChild(m);
893});
894const dotsWrap = document.getElementById('dots');
895let cur = 0;
896slides.forEach((_, i) => {
897  const d = document.createElement('span');
898  d.setAttribute('role','button');
899  d.setAttribute('aria-label','Ir a la diapositiva ' + (i+1));
900  if (i === 0) d.classList.add('on');
901  d.addEventListener('click', () => go(i));
902  dotsWrap.appendChild(d);
903});
904const dots = dotsWrap.querySelectorAll('span');
905const prevBtn = document.getElementById('prevBtn');
906const nextBtn = document.getElementById('nextBtn');
907const deckProg = document.getElementById('deckProg');
908const deckCount = document.getElementById('deckCount');
909function go(i){
910  slides[cur].classList.remove('active'); dots[cur].classList.remove('on');
911  cur = Math.max(0, Math.min(i, slides.length - 1));
912  slides[cur].classList.add('active'); dots[cur].classList.add('on');
913  prevBtn.disabled = cur === 0;
914  nextBtn.disabled = cur === slides.length - 1;
915  deckProg.style.width = ((cur + 1) / slides.length * 100) + '%';
916  deckCount.innerHTML = '<b>' + (cur + 1) + '</b> / ' + slides.length;
917}
918prevBtn.addEventListener('click', () => cur > 0 && go(cur - 1));
919nextBtn.addEventListener('click', () => cur < slides.length - 1 && go(cur + 1));
920
921/* Saltar directo a un acto desde el sidebar */
922document.querySelectorAll('.actos button').forEach(b => b.addEventListener('click', () => {
923  document.querySelector('.tab-btn[data-tab="slides"]').click();
924  go(+b.dataset.ir);
925  window.scrollTo({top: 0, behavior: 'smooth'});
926}));
927go(0);
928
929/* ══ Modo presentación ══ */
930const presentBtn = document.getElementById('presentBtn');
931function setPresenting(on){
932  document.body.classList.toggle('presenting', on);
933  presentBtn.textContent = on ? '✕ Salir' : '▶ Presentar';
934  if (on && document.documentElement.requestFullscreen) document.documentElement.requestFullscreen().catch(()=>{});
935  else if (!on && document.fullscreenElement && document.exitFullscreen) document.exitFullscreen().catch(()=>{});
936}
937presentBtn.addEventListener('click', () => setPresenting(!document.body.classList.contains('presenting')));
938document.addEventListener('fullscreenchange', () => {
939  if (!document.fullscreenElement && document.body.classList.contains('presenting')) setPresenting(false);
940});
941document.addEventListener('keydown', e => {
942  if (['INPUT','TEXTAREA','SELECT'].includes(document.activeElement.tagName)) return;
943  if (e.key === 'Escape' && document.body.classList.contains('presenting')) { setPresenting(false); return; }
944  if (e.key === 'p' || e.key === 'P') {
945    if (document.getElementById('slides').classList.contains('active')) setPresenting(!document.body.classList.contains('presenting'));
946    return;
947  }
948  if (!document.getElementById('slides').classList.contains('active')) return;
949  if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); nextBtn.click(); }
950  if (e.key === 'ArrowLeft'  || e.key === 'PageUp')  { e.preventDefault(); prevBtn.click(); }
951  if (e.key === 'Home') go(0);
952  if (e.key === 'End')  go(slides.length - 1);
953});
954
955/* ══ Trivia ══ */
956const PREGUNTAS = [
957  {
958    q: '¿Por qué el modelo OSI dividió la comunicación en siete capas en vez de resolverla de una sola pieza?',
959    o: ['Para que cada fabricante solo tuviera que acordar cómo hablar con las capas vecinas',
960        'Porque siete era el número máximo que soportaba el hardware de la época',
961        'Para poder cobrar licencias separadas por cada capa',
962        'Porque cada capa la desarrolló un país distinto'],
963    r: 0,
964    why: 'Partir el problema permitió que nadie tuviera que construir igual: bastaba con <b>acordar la conversación entre vecinas</b>. Esa es la esencia de una pila por capas, y la razón de que siga funcionando cuarenta años después.'
965  },
966  {
967    q: 'Tu aplicación no carga. El diseño es impecable y el código está bien. ¿Qué dice la lógica de capas?',
968    o: ['Que hay que rediseñar la interfaz',
969        'Que el problema probablemente está en una capa inferior',
970        'Que la capa 7 falló y hay que reescribirla',
971        'Que las capas no aplican al software moderno'],
972    r: 1,
973    why: 'El fallo <b>sube, nunca baja</b>. Un problema en la capa física o de red se manifiesta arriba, pero no se origina ahí. Arreglar la capa 7 cuando el problema está en la 1 es la forma más cara de perder el tiempo.'
974  },
975  {
976    q: 'En la pila operativa de la IA, ¿cuál es el equivalente a la capa física de OSI?',
977    o: ['El algoritmo', 'El modelo', 'El dato', 'La inferencia'],
978    r: 2,
979    why: 'El <b>dato</b> es la capa física de la IA: no tiene glamour, nadie lo muestra en un pitch, y todo lo demás descansa encima. Un dato sesgado produce un modelo sesgado, y ninguna capa superior lo corrige.'
980  },
981  {
982    q: '¿Qué tipo de aprendizaje hizo viables a los modelos de lenguaje actuales?',
983    o: ['Supervisado, con millones de textos etiquetados a mano',
984        'Autosupervisado, donde el propio dato genera sus etiquetas',
985        'Por refuerzo, con recompensa por cada palabra correcta',
986        'No supervisado, agrupando textos parecidos'],
987    r: 1,
988    why: 'El <b>autosupervisado</b> quitó el cuello de botella: tapar una palabra y pedir que la adivine genera etiquetas sin intervención humana. Etiquetar internet a mano habría sido imposible.'
989  },
990  {
991    q: 'Una empresa hace ajuste fino sobre un modelo preentrenado. ¿Qué riesgo asume sin decidirlo?',
992    o: ['Que el modelo olvide todo lo aprendido antes',
993        'Que hereda los sesgos del modelo del que partió',
994        'Que necesita más datos que entrenando desde cero',
995        'Que pierde el derecho a usar sus propios datos'],
996    r: 1,
997    why: 'Partir de un modelo entrenado abarata todo, y por eso hoy una empresa mediana puede tener modelo propio. Pero <b>hereda lo que ese modelo ya traía</b>, sesgos incluidos, sin haberlos elegido.'
998  },
999  {
1000    q: 'Alguien dice: "la IA es ChatGPT". Según la mirada operativa, ¿qué está confundiendo?',
1001    o: ['Nada, es una definición correcta',
1002        'Confunde la inferencia, que es la única capa visible, con toda la pila',
1003        'Confunde el algoritmo con el dato',
1004        'Confunde deep learning con machine learning'],
1005    r: 1,
1006    why: 'El chat es la <b>inferencia</b>, la capa 5. Debajo hay cuatro capas —dato, algoritmo, entrenamiento y modelo— que ya decidieron todo lo que ese chat puede y no puede decir. Es el mismo espejismo que hace creer que internet es el navegador.'
1007  },
1008  {
1009    q: '¿Qué frustración dio origen al Machine Learning?',
1010    o: ['Que las computadoras eran demasiado lentas',
1011        'Que escribir a mano las reglas del mundo real era imposible: son infinitas',
1012        'Que no existían suficientes programadores',
1013        'Que las redes neuronales habían fracasado'],
1014    r: 1,
1015    why: 'La IA clásica escribía reglas a mano y funcionó en dominios cerrados como el ajedrez. Ante el mundo real fracasó porque <b>las reglas no se acaban nunca</b>. De ahí el giro: que las deduzca de ejemplos.'
1016  },
1017  {
1018    q: 'Quieres agrupar a tus clientes por comportamiento, pero no sabes qué grupos existen. ¿Qué tipo de aprendizaje usas?',
1019    o: ['Supervisado', 'No supervisado', 'Por refuerzo', 'Autosupervisado'],
1020    r: 1,
1021    why: '<b>No supervisado</b>: no le das respuestas de referencia porque no las tienes. Le pides que encuentre la estructura por su cuenta. Si ya supieras los grupos y quisieras clasificar clientes nuevos en ellos, ahí sí sería supervisado.'
1022  },
1023  {
1024    q: 'En el organigrama tradicional, ¿hacia dónde fluye la energía de la organización?',
1025    o: ['Hacia el cliente, que está arriba',
1026        'Hacia arriba, buscando la aprobación de quien manda',
1027        'Hacia los equipos, que reciben apoyo',
1028        'Hacia afuera, al mercado'],
1029    r: 1,
1030    why: 'En la pirámide tradicional todos miran hacia arriba buscando aprobación, y el <b>cliente queda al final de la fila</b>. Ese es exactamente el problema que Hunter señala.'
1031  },
1032  {
1033    q: 'Según la distinción de Hunter, ¿qué diferencia al poder de la autoridad?',
1034    o: ['El poder se gana sirviendo y la autoridad la da el cargo',
1035        'Son sinónimos con distinto origen histórico',
1036        'El poder lo da el cargo y se gasta; la autoridad se gana sirviendo y se acumula',
1037        'La autoridad solo aplica a organizaciones sin jerarquía'],
1038    r: 2,
1039    why: 'El <b>poder</b> viene del cargo, es inmediato y se gasta con el uso; cuando te vas, se va contigo. La <b>autoridad</b> se gana sirviendo, tarda, se acumula, y queda cuando te vas. Poder es la capa 7; autoridad es la capa 1.'
1040  },
1041  {
1042    q: '¿Cuál es el giro que propone este taller sobre la "pirámide invertida"?',
1043    o: ['Que invertirla es un error y hay que volver al modelo tradicional',
1044        'Que Hunter no invirtió nada: corrigió un organigrama mal dibujado',
1045        'Que solo funciona en empresas pequeñas',
1046        'Que la pirámide debería ser un círculo'],
1047    r: 1,
1048    why: 'En OSI y en la IA <b>la base siempre se dibujó abajo</b>: a nadie se le ocurrió poner la capa física arriba. El organigrama fue el único de los tres dibujado al revés. Hunter no invirtió la pirámide, corrigió un error de dibujo.'
1049  },
1050  {
1051    q: '¿Qué tienen en común el cable de red, el dato y quien lidera sirviendo?',
1052    o: ['Que son los componentes más caros de cada sistema',
1053        'Que sostienen todo, nadie los aplaude, y son lo primero que se recorta',
1054        'Que se pueden reemplazar fácilmente',
1055        'Que aparecen destacados en cualquier presentación comercial'],
1056    r: 1,
1057    why: 'Los tres son la <b>capa base</b>: cargan todo el peso, no aparecen en el pitch, y por eso son lo primero que se recorta cuando hay que ahorrar. Cuanto más invisible es una capa, más probable es que esté abandonada.'
1058  },
1059  {
1060    q: 'Tu equipo no está rindiendo. ¿Qué haría un diagnóstico de abajo hacia arriba?',
1061    o: ['Aumentar la exigencia y los indicadores',
1062        'Reemplazar a las personas con bajo desempeño',
1063        'Preguntar qué obstáculo nadie les quitó',
1064        'Rediseñar el organigrama'],
1065    r: 2,
1066    why: 'Es la aplicación directa de la ley 2: <b>cuando algo falla arriba, el problema casi nunca está arriba</b>. Exigir más a la capa visible es el equivalente a rediseñar la interfaz cuando el cable está cortado.'
1067  },
1068  {
1069    q: '¿Qué es la abstracción y cuál es su factura?',
1070    o: ['Usar una capa sin entender la de abajo; la factura es que lo invisible se descuida',
1071        'Simplificar el diseño; la factura es que se pierde rendimiento',
1072        'Ocultar información a los usuarios; la factura es la desconfianza',
1073        'Reducir el número de capas; la factura es la complejidad'],
1074    r: 0,
1075    why: 'La abstracción te permite mandar un mensaje sin saber de electrones y usar IA sin saber de matrices. Es un regalo enorme. Su factura: <b>lo que dejamos de ver, dejamos de mantenerlo</b>.'
1076  },
1077  {
1078    q: 'Mandas un prompt. ¿Qué viaja realmente por el cable como luz o voltaje?',
1079    o: ['El dato de entrenamiento del modelo',
1080        'Tu prompt y la respuesta, nada más',
1081        'El modelo completo, que se descarga a tu equipo',
1082        'Los pesos del modelo, capa por capa'],
1083    r: 1,
1084    why: 'Viaja <b>tu prompt</b>, baja las siete capas de OSI hasta volverse luz o voltaje, y la respuesta hace el camino inverso. El <b>dato de entrenamiento no viaja</b>: ocurrió meses o años antes y hoy está comprimido en los pesos del modelo. Como la harina en un pan horneado: está, pero ya no es harina.'
1085  },
1086  {
1087    q: '¿Cómo se relacionan la pila de OSI y la pila de la IA?',
1088    o: ['La de IA se apila encima de OSI, en la capa 8',
1089        'Son la misma pila con distintos nombres',
1090        'Son perpendiculares: OSI es el camino, la IA es el edificio al final',
1091        'OSI se apila encima de la IA'],
1092    r: 2,
1093    why: 'No se apilan, <b>se cruzan</b>. OSI es el camino; la pirámide de la IA es el edificio al final del camino. Y tu prompt no entra por abajo: <b>entra por la capa 5, la inferencia</b>, porque las capas 1 a 4 ya estaban terminadas antes de que escribieras nada.'
1094  },
1095  {
1096    q: 'Si tuvieras que resumir las tres pirámides en una sola frase, ¿cuál sería?',
1097    o: ['Cuantas más capas, mejor el sistema',
1098        'La capa superior determina la calidad del conjunto',
1099        'Lo que sostiene nunca es lo que se ve',
1100        'Toda jerarquía debe eliminarse'],
1101    r: 2,
1102    why: 'Ingenieros de red en 1984, setenta años de investigación en IA y un libro de liderazgo llegaron por caminos distintos a la misma conclusión. Quien la entiende <b>deja de arreglar síntomas</b>: en su red, en sus modelos y en su gente.'
1103  }
1104];
1105
1106const quizWrap = document.getElementById('quiz');
1107const prog = document.getElementById('prog');
1108const scoreEl = document.getElementById('score');
1109let qi = 0, aciertos = 0, respondida = false, actual = null;
1110
1111/* Baraja las opciones en cada corrida. Si la correcta cae siempre en la misma letra,
1112   el participante detecta el patrón y deja de razonar. */
1113function barajar(p){
1114  const orden = p.o.map((_, i) => i);
1115  for (let i = orden.length - 1; i > 0; i--){
1116    const j = Math.floor(Math.random() * (i + 1));
1117    [orden[i], orden[j]] = [orden[j], orden[i]];
1118  }
1119  return { textos: orden.map(i => p.o[i]), correcta: orden.indexOf(p.r) };
1120}
1121
1122function pintar(){
1123  if (qi >= PREGUNTAS.length) return resultado();
1124  const p = PREGUNTAS[qi];
1125  respondida = false;
1126  actual = barajar(p);
1127  prog.style.width = (qi / PREGUNTAS.length * 100) + '%';
1128  scoreEl.innerHTML = 'Pregunta <b>' + (qi + 1) + '</b> de ' + PREGUNTAS.length + ' · aciertos: <b>' + aciertos + '</b>';
1129  quizWrap.innerHTML =
1130    '<div class="q-card">' +
1131      '<div class="q-meta">Pregunta ' + (qi + 1) + '</div>' +
1132      '<h3>' + p.q + '</h3>' +
1133      '<div class="opts">' +
1134        actual.textos.map((t, i) => '<button class="opt" data-i="' + i + '"><span class="k">' + 'ABCD'[i] + '</span><span>' + t + '</span></button>').join('') +
1135      '</div>' +
1136      '<div class="why" id="why"></div>' +
1137      '<div class="q-nav"><button id="sig" disabled>' + (qi === PREGUNTAS.length - 1 ? 'Ver resultado' : 'Siguiente') + '</button></div>' +
1138    '</div>';
1139  quizWrap.querySelectorAll('.opt').forEach(b => b.addEventListener('click', () => responder(+b.dataset.i)));
1140  document.getElementById('sig').addEventListener('click', () => { qi++; pintar(); });
1141}
1142
1143function responder(elegida){
1144  if (respondida) return;
1145  respondida = true;
1146  const p = PREGUNTAS[qi];
1147  const acerto = elegida === actual.correcta;
1148  if (acerto) aciertos++;
1149  quizWrap.querySelectorAll('.opt').forEach((b, i) => {
1150    b.disabled = true;
1151    if (i === actual.correcta) b.classList.add('ok');
1152    else if (i === elegida) b.classList.add('bad');
1153  });
1154  const why = document.getElementById('why');
1155  why.className = 'why show ' + (acerto ? 'good' : 'bad');
1156  why.innerHTML = '<span class="verdict">' + (acerto ? '✓ Correcto' : '✗ No era esa') + '</span>' + p.why;
1157  document.getElementById('sig').disabled = false;
1158  scoreEl.innerHTML = 'Pregunta <b>' + (qi + 1) + '</b> de ' + PREGUNTAS.length + ' · aciertos: <b>' + aciertos + '</b>';
1159}
1160
1161function resultado(){
1162  prog.style.width = '100%';
1163  const total = PREGUNTAS.length;
1164  const pct = Math.round(aciertos / total * 100);
1165  let titulo, texto;
1166  if (pct >= 85){
1167    titulo = 'Ya viajas entre las tres sin mapa.';
1168    texto = 'Reconoces la misma estructura aunque cambie de disfraz. Eso es lo que separa a quien opera una herramienta de quien entiende un sistema. Llévalo a tu propio terreno: ¿cuál es la capa 1 que hoy nadie está mirando?';
1169  } else if (pct >= 60){
1170    titulo = 'Tienes las tres pirámides. Falta unirlas.';
1171    texto = 'Reconoces cada una por separado, pero el valor está en la traducción entre ellas. Vuelve al Acto IV: las dos leyes son el puente, y son lo único que hay que memorizar.';
1172  } else {
1173    titulo = 'Vuelve al recorrido. Sin culpa.';
1174    texto = 'Este taller conecta tres mundos que casi nunca se enseñan juntos, y eso cuesta la primera vez. Empieza por el Acto I: si entiendes OSI, las otras dos se leen solas.';
1175  }
1176  scoreEl.innerHTML = 'Completado · <b>' + aciertos + '</b> de ' + total;
1177  quizWrap.innerHTML =
1178    '<div class="result">' +
1179      '<div class="big">' + pct + '%</div>' +
1180      '<div class="of">' + aciertos + ' de ' + total + ' respuestas correctas</div>' +
1181      '<h3>' + titulo + '</h3>' +
1182      '<p>' + texto + '</p>' +
1183      '<button id="reintentar">Volver a intentar</button>' +
1184    '</div>';
1185  document.getElementById('reintentar').addEventListener('click', () => { qi = 0; aciertos = 0; pintar(); });
1186}
1187pintar();
1188</script>
1188
1189
1190<!--
1191  TALLER · LAS TRES PIRÁMIDES — Salazar Duke Impact Hub
1192  - Tesis: OSI, la pila de la IA y el liderazgo servicial son la misma estructura.
1193    Dos leyes las unen: (1) la base carga todo y es invisible; (2) el fallo sube, nunca baja.
1194    Remate del Acto III: Hunter no invirtió la pirámide, corrigió un error de dibujo —
1195    OSI y la IA siempre se dibujaron con la base abajo; el organigrama fue el único al revés.
1196  - 25 diapositivas en 4 actos + trivia de 15 + glosario de 16 términos.
1197    Navegación directa por acto desde el sidebar.
1198  - Componente .pyr: pirámide de capas con anchos variables (--w) y color por capa (--c).
1199    Se anima de abajo hacia arriba con nth-last-child: primero se dibuja la base.
1200    Variante .trio para comparar las tres pirámides lado a lado.
1201  - FUENTES: el modelo OSI y los conceptos de IA son conocimiento técnico establecido.
1202    La distinción poder/autoridad y la pirámide invertida provienen de "La paradoja"
1203    de James C. Hunter; aquí se parafrasean, no se cita el libro más allá de su tesis
1204    central. Si el taller se dicta comercialmente, conviene revisar el libro y citarlo
1205    de forma explícita en los materiales de apoyo.
1206  - Carpeta autocontenida: index.html en la raíz + assets/ adentro.
1207-->
1208</body>
1209</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.