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.