{"id":51,"date":"2026-09-23T10:10:10","date_gmt":"2026-09-23T10:10:10","guid":{"rendered":"https:\/\/ericguerrero.es\/?page_id=51"},"modified":"2026-09-23T10:10:10","modified_gmt":"2026-09-23T10:10:10","slug":"como-piensa-un-npc-laboratorio-interactivo","status":"publish","type":"page","link":"https:\/\/ericguerrero.es\/?page_id=51","title":{"rendered":"Como piensa un NPC &#8211; Laboratorio Interactivo"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"51\" class=\"elementor elementor-51\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-sec_lab_arcade elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"sec_lab_arcade\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-col_lab_arcade\" data-id=\"col_lab_arcade\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-w_lab_arcade_html elementor-widget elementor-widget-html\" data-id=\"w_lab_arcade_html\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');\n\n  \/* Global Container & Anti-Overflow Rules *\/\n  html, body {\n    overflow-x: hidden;\n    max-width: 100vw;\n    background-color: #f4f1ea;\n    background-image: radial-gradient(#dfd9cd 1px, transparent 1px);\n    background-size: 24px 24px;\n    background-attachment: fixed;\n  }\n\n  \/* Fondo tipo mesa de trabajo \/ tapete inmovil de puntos (background-attachment: fixed nativo) *\/\n  .cpue-lab {\n    position: relative;\n    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;\n    background-color: #f4f1ea;\n    background-image: radial-gradient(#dfd9cd 1px, transparent 1px);\n    background-size: 24px 24px;\n    background-attachment: fixed;\n    color: #2b2927;\n    line-height: 1.65;\n    font-size: 16px;\n    padding: 0;\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .cpue-lab * { box-sizing: border-box; margin: 0; padding: 0; }\n\n  \/* Allow text selection everywhere on the page *\/\n  .cpue-lab p, .cpue-lab h1, .cpue-lab h2, .cpue-lab h3, .cpue-lab h4, .cpue-lab span, .cpue-lab div {\n    user-select: text;\n    -webkit-user-select: text;\n  }\n\n  \/* Prevent image dragging *\/\n  .cpue-lab img {\n    user-select: none;\n    -webkit-user-select: none;\n    -webkit-user-drag: none;\n    pointer-events: none;\n  }\n\n  .cpue-lab h1, .cpue-lab h2, .cpue-lab h3, .cpue-lab h4 {\n    font-weight: 800;\n    letter-spacing: -0.02em;\n    color: #171615;\n  }\n  .cpue-lab .mono {\n    font-family: 'JetBrains Mono', monospace;\n  }\n\n  \/* ========================================================\n     HEADER\n     ======================================================== *\/\n  .lab-header {\n    background: #ffffff;\n    border-bottom: 2px solid #2b2927;\n    padding: 48px 24px 36px;\n    width: 100%;\n  }\n  .lab-header-inner {\n    max-width: 1040px;\n    margin: 0 auto;\n  }\n  .lab-tagline {\n    display: inline-block;\n    background: #e8e3d5;\n    padding: 4px 10px;\n    border-radius: 4px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: #635d52;\n    margin-bottom: 12px;\n  }\n  .lab-header h1 {\n    font-size: clamp(1.85rem, 4.5vw, 3.2rem);\n    line-height: 1.15;\n    margin-bottom: 14px;\n  }\n  .lab-header p {\n    font-size: clamp(0.98rem, 2vw, 1.15rem);\n    color: #5c574e;\n    max-width: 720px;\n    line-height: 1.6;\n  }\n\n  \/* ========================================================\n     LAYOUT WRAPPER & CARDS\n     ======================================================== *\/\n  .lab-wrapper {\n    max-width: 1040px;\n    margin: 0 auto;\n    padding: 40px 24px 80px;\n    width: 100%;\n  }\n\n  .lab-module {\n    background: #ffffff;\n    border: 2px solid #2b2927;\n    border-radius: 12px;\n    box-shadow: 4px 4px 0px #2b2927;\n    padding: 28px;\n    margin-bottom: 40px;\n    width: 100%;\n  }\n  .lab-module-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    border-bottom: 1.5px solid #eae5d8;\n    padding-bottom: 14px;\n    margin-bottom: 20px;\n    flex-wrap: wrap;\n    gap: 10px;\n  }\n  .lab-module-title {\n    font-size: clamp(1.15rem, 2.5vw, 1.45rem);\n    font-weight: 800;\n  }\n  .lab-module-badge {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11.5px;\n    font-weight: 700;\n    background: #2b2927;\n    color: #fff;\n    padding: 4px 10px;\n    border-radius: 4px;\n    white-space: nowrap;\n  }\n\n  \/* Token tags *\/\n  .tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 2px 7px;\n    border-radius: 4px;\n    font-size: 0.88em;\n    font-weight: 700;\n    font-family: 'JetBrains Mono', monospace;\n    white-space: nowrap;\n  }\n  .tag-blinky { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }\n  .tag-pinky  { background: #fce7f3; color: #be185d; border: 1px solid #f9a8d4; }\n  .tag-inky   { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }\n  .tag-clyde  { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }\n  .tag-pacman { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }\n\n  \/* ========================================================\n     MODULE 1: PAC-MAN RESPONSIVE LAYOUT\n     ======================================================== *\/\n  .lab-grid-container {\n    display: grid;\n    grid-template-columns: 468px 1fr;\n    gap: 28px;\n    align-items: start;\n    width: 100%;\n  }\n\n  .canvas-focus-wrapper {\n    position: relative;\n    border-radius: 10px;\n    padding: 8px;\n    background: #181b24;\n    border: 2px solid #2b2927;\n    transition: all 0.2s ease;\n    outline: none;\n    box-shadow: 3px 3px 0px #2b2927;\n    max-width: 468px;\n    width: 100%;\n    margin: 0 auto;\n  }\n  .canvas-focus-wrapper:focus-within, .canvas-focus-wrapper.active-focus {\n    border-color: #facc15;\n    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.35), 4px 4px 0px #2b2927;\n  }\n\n  #lab-canvas, #mgs-canvas {\n    user-select: none;\n    -webkit-user-select: none;\n    -webkit-user-drag: none;\n    touch-action: none;\n  }\n\n  #lab-canvas {\n    display: block;\n    width: 100%;\n    max-width: 448px;\n    height: auto;\n    aspect-ratio: 448 \/ 496;\n    background: #080a10;\n    border-radius: 6px;\n    cursor: crosshair;\n    margin: 0 auto;\n    border: 1px solid #1e2538;\n    user-select: none;\n    -webkit-user-select: none;\n    -webkit-user-drag: none;\n    touch-action: none;\n  }\n\n  \/* Toolbar buttons *\/\n  .lab-toolbar {\n    display: flex;\n    gap: 8px;\n    margin-top: 10px;\n    flex-wrap: wrap;\n    width: 100%;\n  }\n  .tool-btn {\n    font-family: inherit;\n    font-size: 12.5px;\n    font-weight: 700;\n    padding: 8px 13px;\n    border-radius: 6px;\n    border: 1.5px solid #2b2927;\n    background: #fff;\n    color: #2b2927;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    box-shadow: 2px 2px 0px #2b2927;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .tool-btn:hover { background: #f5efe6; transform: translateY(-1px); }\n  .tool-btn:active { transform: translateY(1px); box-shadow: 1px 1px 0px #2b2927; }\n  .tool-btn.active {\n    background: #2b2927;\n    color: #fff;\n    box-shadow: 2px 2px 0px #000;\n  }\n\n  \/* Formula explanation box *\/\n  .lab-formula-box {\n    background: #faf8f5;\n    border: 1.5px solid #2b2927;\n    border-radius: 8px;\n    padding: 18px;\n    box-shadow: 2px 2px 0px #2b2927;\n    width: 100%;\n  }\n  .lab-formula-row {\n    margin-bottom: 12px;\n    padding: 8px 10px;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n    border: 1px solid transparent;\n  }\n  .lab-formula-row:hover {\n    background: #f1ede4;\n    border-color: #d6cfc2;\n  }\n  .lab-formula-row:last-of-type {\n    margin-bottom: 0;\n  }\n  .formula-title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: 700;\n    margin-bottom: 4px;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  .formula-math {\n    font-size: 13px;\n    color: #555;\n    line-height: 1.5;\n  }\n\n  \/* Expandable Ghost Deep Dive Panel *\/\n  .ghost-deep-dive {\n    margin-top: 16px;\n    background: #ffffff;\n    border: 1.5px solid #2b2927;\n    border-radius: 8px;\n    padding: 16px;\n    box-shadow: 2px 2px 0px #2b2927;\n    display: none;\n    width: 100%;\n  }\n  .ghost-deep-dive.active {\n    display: block;\n    animation: fadeIn 0.2s ease;\n  }\n  @keyframes fadeIn {\n    from { opacity: 0; transform: translateY(-4px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n  .ghost-card {\n    background: #faf8f5;\n    border: 1px solid #d6cfc2;\n    border-radius: 6px;\n    padding: 12px 14px;\n    margin-bottom: 12px;\n    transition: all 0.15s ease;\n  }\n  .ghost-card:last-child {\n    margin-bottom: 0;\n  }\n  .ghost-card.highlighted {\n    border-color: #2b2927;\n    background: #fdfbf7;\n    box-shadow: 2px 2px 0px #2b2927;\n  }\n  .ghost-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 6px;\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n  .ghost-card-formula {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11.5px;\n    background: #f1ede4;\n    padding: 4px 8px;\n    border-radius: 4px;\n    margin-bottom: 6px;\n    color: #171615;\n    border: 1px solid #e2ddd3;\n    display: inline-block;\n    word-break: break-word;\n  }\n  .ghost-card-desc {\n    font-size: 12.5px;\n    color: #444;\n    line-height: 1.45;\n  }\n  .ghost-card-pedagogy {\n    font-size: 12px;\n    color: #0369a1;\n    background: #f0f9ff;\n    border-left: 3px solid #0ea5e9;\n    padding: 6px 8px;\n    margin-top: 6px;\n    border-radius: 0 4px 4px 0;\n    line-height: 1.4;\n  }\n\n  \/* ========================================================\n     MODULE 2: METAL GEAR SOLID (1998) STEALTH FSM SIMULATOR\n     ======================================================== *\/\n  .mgs-sim-container {\n    display: grid;\n    grid-template-columns: 1.15fr 1fr;\n    gap: 22px;\n    align-items: start;\n    margin-top: 16px;\n    width: 100%;\n  }\n  .mgs-viewport-col {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    width: 100%;\n  }\n  .mgs-canvas-wrapper {\n    position: relative;\n    background: #0f172a;\n    border: 2px solid #2b2927;\n    border-radius: 8px;\n    box-shadow: 3px 3px 0px #2b2927;\n    overflow: hidden;\n    width: 100%;\n    max-width: 480px;\n    margin: 0 auto;\n  }\n  #mgs-canvas {\n    display: block;\n    width: 100%;\n    max-width: 480px;\n    height: auto;\n    aspect-ratio: 480 \/ 340;\n    touch-action: none;\n    cursor: crosshair;\n    user-select: none;\n    -webkit-user-select: none;\n    -webkit-user-drag: none;\n  }\n  .mgs-status-bar {\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    right: 8px;\n    display: flex;\n    justify-content: space-between;\n    pointer-events: none;\n    z-index: 2;\n    gap: 4px;\n    flex-wrap: wrap;\n  }\n  .mgs-hud-badge {\n    background: rgba(15, 23, 42, 0.90);\n    border: 1px solid #334155;\n    color: #94a3b8;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    font-weight: 700;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n  }\n  .mgs-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    width: 100%;\n    max-width: 480px;\n    margin: 0 auto;\n  }\n  .mgs-btn {\n    font-family: inherit;\n    font-size: 12px;\n    font-weight: 700;\n    padding: 7px 12px;\n    border-radius: 6px;\n    border: 1.5px solid #2b2927;\n    background: #ffffff;\n    color: #2b2927;\n    cursor: pointer;\n    box-shadow: 2px 2px 0px #2b2927;\n    transition: all 0.15s ease;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .mgs-btn:hover { background: #fef9c3; transform: translateY(-1px); }\n  .mgs-btn:active { transform: translateY(1px); box-shadow: 1px 1px 0px #2b2927; }\n  .mgs-btn.active-toggle {\n    background: #fde047;\n    border-color: #854d0e;\n    color: #854d0e;\n  }\n  .mgs-hint {\n    font-size: 11.5px;\n    color: #555;\n    line-height: 1.45;\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    padding: 8px 10px;\n    border-radius: 6px;\n    width: 100%;\n    max-width: 480px;\n    margin: 0 auto;\n  }\n\n  .mgs-fsm-col {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    width: 100%;\n  }\n  .mgs-fsm-card {\n    background: #fdfbf7;\n    border: 2px solid #2b2927;\n    border-radius: 8px;\n    padding: 16px;\n    box-shadow: 3px 3px 0px #2b2927;\n    width: 100%;\n  }\n  .mgs-fsm-card-title {\n    font-size: 13px;\n    font-weight: 800;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: #2b2927;\n    margin-bottom: 12px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .fsm-nodes-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 10px;\n    margin-bottom: 14px;\n    width: 100%;\n  }\n  .fsm-state-card {\n    background: #ffffff;\n    border: 2px solid #cbd5e1;\n    border-radius: 8px;\n    padding: 10px 8px;\n    text-align: center;\n    box-shadow: 2px 2px 0px #cbd5e1;\n    transition: all 0.2s ease;\n  }\n  .fsm-state-card .fsm-card-chip {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 9px;\n    font-weight: 800;\n    padding: 2px 5px;\n    border-radius: 3px;\n    display: inline-block;\n    margin-bottom: 4px;\n    background: #f1f5f9;\n    color: #64748b;\n  }\n  .fsm-state-card .fsm-card-name {\n    font-weight: 800;\n    font-size: 12.5px;\n    display: block;\n    color: #334155;\n  }\n  .fsm-state-card .fsm-card-sub {\n    font-size: 10px;\n    color: #64748b;\n    margin-top: 2px;\n    display: block;\n    line-height: 1.25;\n  }\n\n  \/* Active state glows *\/\n  .fsm-state-card.active-state.state-patrol {\n    border-color: #16a34a;\n    background: #f0fdf4;\n    box-shadow: 3px 3px 0px #16a34a;\n    transform: scale(1.03);\n  }\n  .fsm-state-card.active-state.state-patrol .fsm-card-name { color: #15803d; }\n  .fsm-state-card.active-state.state-patrol .fsm-card-chip { background: #dcfce7; color: #166534; }\n\n  .fsm-state-card.active-state.state-suspicious {\n    border-color: #ca8a04;\n    background: #fefce8;\n    box-shadow: 3px 3px 0px #ca8a04;\n    transform: scale(1.03);\n  }\n  .fsm-state-card.active-state.state-suspicious .fsm-card-name { color: #a16207; }\n  .fsm-state-card.active-state.state-suspicious .fsm-card-chip { background: #fef08a; color: #854d0e; }\n\n  .fsm-state-card.active-state.state-alert {\n    border-color: #dc2626;\n    background: #fef2f2;\n    box-shadow: 3px 3px 0px #dc2626;\n    transform: scale(1.03);\n  }\n  .fsm-state-card.active-state.state-alert .fsm-card-name { color: #b91c1c; }\n  .fsm-state-card.active-state.state-alert .fsm-card-chip { background: #fee2e2; color: #991b1b; }\n\n  .fsm-state-card.active-state.state-evasion,\n  .fsm-state-card.active-state.state-busqueda {\n    border-color: #ea580c;\n    background: #fff7ed;\n    box-shadow: 3px 3px 0px #ea580c;\n    transform: scale(1.03);\n  }\n  .fsm-state-card.active-state.state-evasion .fsm-card-name,\n  .fsm-state-card.active-state.state-busqueda .fsm-card-name { color: #c2410c; }\n  .fsm-state-card.active-state.state-evasion .fsm-card-chip,\n  .fsm-state-card.active-state.state-busqueda .fsm-card-chip { background: #ffedd5; color: #9a3412; }\n\n  .fsm-slider-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 10px;\n    border-top: 1px dashed #cbd5e1;\n    padding-top: 12px;\n  }\n  .fsm-slider-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 11.5px;\n    font-weight: 600;\n    color: #475569;\n  }\n  .fsm-slider-row input[type=\"range\"] {\n    flex: 1;\n    margin: 0 10px;\n    accent-color: #2b2927;\n  }\n  .fsm-slider-val {\n    font-family: 'JetBrains Mono', monospace;\n    font-weight: 700;\n    min-width: 44px;\n    text-align: right;\n    color: #0f172a;\n  }\n\n  .mgs-codec-log {\n    background: #090d16;\n    color: #38bdf8;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    line-height: 1.5;\n    padding: 12px 14px;\n    border-radius: 6px;\n    border: 1.5px solid #1e293b;\n    min-height: 54px;\n    word-break: break-word;\n    width: 100%;\n  }\n\n  \/* ========================================================\n     ROADMAP SECTION\n     ======================================================== *\/\n  .cpue-roadmap-section {\n    background: #ffffff;\n    border: 2px solid #2b2927;\n    border-radius: 12px;\n    box-shadow: 4px 4px 0px #2b2927;\n    padding: 32px 28px;\n    margin-bottom: 40px;\n    width: 100%;\n  }\n  .cpue-roadmap-section h2 {\n    font-size: clamp(1.3rem, 3vw, 1.6rem);\n    margin-bottom: 8px;\n  }\n  .cpue-roadmap-section > p {\n    color: #5c574e;\n    font-size: clamp(0.95rem, 2vw, 1.05rem);\n    margin-bottom: 24px;\n  }\n  .roadmap-card {\n    display: grid;\n    grid-template-columns: 90px 1fr auto;\n    gap: 16px;\n    align-items: center;\n    background: #faf8f5;\n    border: 1.5px solid #2b2927;\n    border-radius: 8px;\n    padding: 16px 20px;\n    margin-bottom: 12px;\n    box-shadow: 2px 2px 0px #2b2927;\n    transition: transform 0.15s ease;\n  }\n  .roadmap-card:hover { transform: translateY(-1px); }\n  .roadmap-num {\n    font-family: 'JetBrains Mono', monospace;\n    font-weight: 800;\n    font-size: 13px;\n    color: #78716c;\n  }\n  .roadmap-title {\n    font-weight: 800;\n    font-size: 15px;\n    color: #171615;\n    margin-bottom: 3px;\n  }\n  .roadmap-desc {\n    font-size: 13px;\n    color: #57534e;\n    line-height: 1.45;\n  }\n  .roadmap-badge {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    font-weight: 700;\n    padding: 3px 8px;\n    border-radius: 4px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    white-space: nowrap;\n    border: 1.5px solid transparent;\n  }\n  .badge-func { background: #dcfce7; color: #166534; border-color: #86efac; }\n  .badge-dev  { background: #fef9c3; color: #854d0e; border-color: #fde047; }\n  .badge-inv  { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }\n\n  \/* Footer & Contador de Visualizaciones *\/\n  .lab-footer {\n    text-align: center;\n    border-top: 2px solid #2b2927;\n    padding-top: 30px;\n    font-size: 13px;\n    color: #6a6459;\n    margin-top: 50px;\n  }\n  .lab-counter-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: 20px;\n  }\n  .lab-counter-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    background: #ffffff;\n    border: 1.5px solid #2b2927;\n    border-radius: 999px;\n    padding: 6px 14px;\n    box-shadow: 2px 2px 0px #2b2927;\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\n  }\n  .lab-counter-pill:hover {\n    transform: translateY(-1px);\n    box-shadow: 3px 3px 0px #2b2927;\n  }\n  .counter-live-dot {\n    width: 8px;\n    height: 8px;\n    background: #16a34a;\n    border-radius: 50%;\n    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);\n    animation: counterPulse 2s infinite ease-in-out;\n    flex-shrink: 0;\n  }\n  @keyframes counterPulse {\n    0%, 100% { transform: scale(1); opacity: 1; }\n    50% { transform: scale(1.35); opacity: 0.6; }\n  }\n  .counter-label {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    font-weight: 700;\n    color: #44403c;\n    letter-spacing: 0.05em;\n    text-transform: uppercase;\n  }\n  .counter-badge-img {\n    height: 20px;\n    width: auto;\n    display: block;\n    border-radius: 3px;\n    vertical-align: middle;\n  }\n  .counter-fallback {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    font-weight: 700;\n    background: #2b2927;\n    color: #22c55e;\n    padding: 2px 8px;\n    border-radius: 4px;\n  }\n\n\n  \/* ========================================================\n     WEB AUDIO CONTROLS & BEHAVIOR TREE TEASER STYLES\n     ======================================================== *\/\n  html {\n    scroll-behavior: smooth;\n  }\n  .sound-controls-bar {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  .sound-preset-select {\n    background: #ffffff;\n    border: 1.5px solid #2b2927;\n    border-radius: 999px;\n    padding: 5px 12px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    font-weight: 700;\n    color: #2b2927;\n    cursor: pointer;\n    box-shadow: 2px 2px 0px #2b2927;\n    outline: none;\n    transition: all 0.15s ease;\n  }\n  .sound-preset-select:hover {\n    background: #faf8f5;\n    transform: translateY(-1px);\n    box-shadow: 3px 3px 0px #2b2927;\n  }\n  .sound-toggle-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: #ffffff;\n    border: 1.5px solid #2b2927;\n    border-radius: 999px;\n    padding: 6px 14px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    font-weight: 700;\n    color: #2b2927;\n    cursor: pointer;\n    box-shadow: 2px 2px 0px #2b2927;\n    transition: all 0.15s ease;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n  .sound-toggle-btn:hover {\n    transform: translateY(-1px);\n    box-shadow: 3px 3px 0px #2b2927;\n    background: #faf8f5;\n  }\n  .sound-toggle-btn.muted {\n    color: #78716c;\n    border-color: #a8a29e;\n    background: #f5f5f4;\n    box-shadow: 1px 1px 0px #a8a29e;\n  }\n\n  \/* Teaser Toggle Button inside Roadmap Card 3 *\/\n  .bt-teaser-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    background: #f0fdf4;\n    border: 1.5px solid #16a34a;\n    border-radius: 6px;\n    padding: 6px 12px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    font-weight: 700;\n    color: #166534;\n    cursor: pointer;\n    box-shadow: 2px 2px 0px #16a34a;\n    transition: all 0.15s ease;\n  }\n  .bt-teaser-btn:hover {\n    background: #dcfce7;\n    transform: translateY(-1px);\n    box-shadow: 3px 3px 0px #16a34a;\n  }\n\n  \/* Behavior Tree Workbench Box *\/\n  .bt-workbench, .bt-teaser-box {\n    margin-top: 18px;\n    background: #ffffff;\n    border: 2px solid #2b2927;\n    border-radius: 10px;\n    padding: 24px;\n    box-shadow: 4px 4px 0px #2b2927;\n  }\n  .bt-teaser-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 14px;\n    border-bottom: 1.5px dashed #dfd9cd;\n    padding-bottom: 16px;\n    margin-bottom: 20px;\n  }\n  .bt-tag {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    font-weight: 800;\n    color: #854d0e;\n    background: #fef9c3;\n    padding: 3px 8px;\n    border-radius: 4px;\n    border: 1px solid #fde047;\n    display: inline-block;\n    margin-bottom: 6px;\n  }\n  .bt-title {\n    font-size: 16px;\n    font-weight: 800;\n    color: #171615;\n    margin: 0;\n  }\n  .bt-controls {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n  .bt-action-btn {\n    background: #faf8f5;\n    border: 1.5px solid #2b2927;\n    border-radius: 6px;\n    padding: 6px 12px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 12px;\n    font-weight: 700;\n    color: #2b2927;\n    cursor: pointer;\n    box-shadow: 2px 2px 0px #2b2927;\n    transition: all 0.15s ease;\n  }\n  .bt-action-btn:hover {\n    background: #f5f0e6;\n    transform: translateY(-1px);\n  }\n  .bt-action-btn.active-sim {\n    background: #2b2927;\n    color: #ffffff;\n  }\n  .bt-action-btn.pulse-btn {\n    background: #e0f2fe;\n    border-color: #0284c7;\n    color: #0369a1;\n    box-shadow: 2px 2px 0px #0284c7;\n  }\n  .bt-action-btn.pulse-btn:hover {\n    background: #bae6fd;\n  }\n\n  \/* Tree Nodes Visual Hierarchy *\/\n  .bt-tree-layout {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n  }\n  .bt-level {\n    display: flex;\n    justify-content: center;\n    width: 100%;\n  }\n  .bt-node {\n    background: #ffffff;\n    border: 2px solid #2b2927;\n    border-radius: 8px;\n    padding: 10px 16px;\n    box-shadow: 2px 2px 0px #2b2927;\n    text-align: center;\n    min-width: 180px;\n    max-width: 260px;\n    transition: all 0.25s ease;\n    position: relative;\n  }\n  .bt-node-chip {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 9px;\n    font-weight: 800;\n    letter-spacing: 0.05em;\n    color: #78716c;\n    display: block;\n    margin-bottom: 3px;\n  }\n  .bt-node-title {\n    font-size: 13px;\n    font-weight: 800;\n    color: #171615;\n  }\n  .bt-node-sub {\n    font-size: 11px;\n    color: #78716c;\n    margin-top: 3px;\n    line-height: 1.35;\n  }\n  .bt-connector-v {\n    width: 2px;\n    height: 18px;\n    background: #2b2927;\n    margin: 0 auto;\n  }\n  .bt-branches-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    width: 100%;\n    max-width: 620px;\n    margin-top: 4px;\n    position: relative;\n  }\n  .bt-branch-col {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n  .bt-leafs-stack {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: 100%;\n  }\n  .bt-leaf {\n    width: 100%;\n    max-width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    text-align: left;\n    padding: 8px 12px;\n  }\n  .bt-leaf .bt-node-title {\n    font-size: 12px;\n  }\n  .bt-leaf-res {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 10px;\n    font-weight: 800;\n    padding: 2px 6px;\n    border-radius: 4px;\n    background: #f5f5f4;\n    color: #78716c;\n    border: 1px solid #d6d3d1;\n  }\n\n  \/* Evaluation States *\/\n  .bt-node.eval-success {\n    border-color: #16a34a !important;\n    background: #f0fdf4 !important;\n    box-shadow: 3px 3px 0px #16a34a !important;\n  }\n  .bt-node.eval-failure {\n    border-color: #dc2626 !important;\n    background: #fef2f2 !important;\n    box-shadow: 3px 3px 0px #dc2626 !important;\n  }\n  .bt-node.eval-running {\n    border-color: #0284c7 !important;\n    background: #f0f9ff !important;\n    box-shadow: 3px 3px 0px #0284c7 !important;\n  }\n  .bt-node.eval-skipped {\n    opacity: 0.45;\n  }\n\n  \/* Telemetry Box *\/\n  .bt-telemetry-box {\n    margin-top: 22px;\n    width: 100%;\n    background: #faf8f5;\n    border: 1.5px solid #2b2927;\n    border-radius: 6px;\n    padding: 12px 16px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 12px;\n    color: #2b2927;\n    line-height: 1.5;\n    box-shadow: 2px 2px 0px #2b2927;\n  }\n\n  \/* ========================================================\n     BREAKPOINT 1: TABLET (768px - 1024px)\n     ======================================================== *\/\n  @media (max-width: 1024px) {\n    .lab-wrapper {\n      padding: 32px 20px 60px;\n      max-width: 860px;\n    }\n    .lab-grid-container {\n      grid-template-columns: 1fr;\n      gap: 24px;\n    }\n    .canvas-focus-wrapper {\n      max-width: 468px;\n      margin: 0 auto;\n    }\n    .mgs-sim-container {\n      grid-template-columns: 1fr;\n      gap: 22px;\n    }\n    .mgs-viewport-col {\n      max-width: 520px;\n      margin: 0 auto;\n    }\n    .mgs-fsm-col {\n      max-width: 520px;\n      margin: 0 auto;\n    }\n    .roadmap-card {\n      grid-template-columns: 80px 1fr auto;\n      gap: 12px;\n      padding: 14px 16px;\n    }\n  }\n\n  \/* ========================================================\n     BREAKPOINT 2: MOBILE (< 768px)\n     ======================================================== *\/\n  @media (max-width: 768px) {\n    .lab-header {\n      padding: 32px 18px 24px;\n    }\n    .lab-header h1 {\n      font-size: clamp(1.75rem, 6.5vw, 2.2rem);\n      margin-bottom: 10px;\n    }\n    .lab-header p {\n      font-size: 0.98rem;\n      line-height: 1.5;\n    }\n    .lab-wrapper {\n      padding: 20px 14px 60px;\n    }\n    .lab-module {\n      padding: 18px 14px;\n      margin-bottom: 28px;\n      border-radius: 10px;\n    }\n    .lab-module-header {\n      margin-bottom: 14px;\n      padding-bottom: 10px;\n    }\n    .lab-toolbar {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 8px;\n    }\n    .tool-btn {\n      width: 100%;\n      min-height: 42px;\n      padding: 10px;\n      font-size: 13px;\n    }\n    .mgs-actions {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 8px;\n      max-width: 100%;\n    }\n    #mgs-btn-knock {\n      grid-column: span 2;\n    }\n    .mgs-btn {\n      padding: 10px 8px;\n      min-height: 42px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      font-size: 12px;\n    }\n    .mgs-hint {\n      max-width: 100%;\n      font-size: 11px;\n    }\n    .roadmap-card {\n      grid-template-columns: 1fr;\n      gap: 8px;\n      padding: 14px;\n    }\n    .roadmap-badge {\n      justify-self: start;\n    }\n  }\n\n  \/* ========================================================\n     BREAKPOINT 3: SMALL MOBILE (< 480px down to 320px)\n     ======================================================== *\/\n  @media (max-width: 480px) {\n    .lab-header {\n      padding: 24px 14px 18px;\n    }\n    .lab-wrapper {\n      padding: 16px 10px 50px;\n    }\n    .lab-module {\n      padding: 14px 10px;\n      margin-bottom: 20px;\n    }\n    .canvas-focus-wrapper {\n      padding: 5px;\n      border-radius: 8px;\n    }\n    .mgs-status-bar {\n      top: 5px;\n      left: 5px;\n      right: 5px;\n      gap: 3px;\n    }\n    .mgs-hud-badge {\n      font-size: clamp(8.5px, 2.7vw, 10.5px);\n      padding: 2px 5px;\n    }\n    .fsm-nodes-grid {\n      grid-template-columns: 1fr 1fr;\n      gap: 6px;\n      margin-bottom: 10px;\n    }\n    .fsm-state-card {\n      padding: 7px 4px;\n    }\n    .fsm-state-card .fsm-card-name {\n      font-size: 11.5px;\n    }\n    .fsm-state-card .fsm-card-sub {\n      font-size: 9px;\n    }\n    .fsm-slider-row {\n      font-size: 10.5px;\n    }\n    .fsm-slider-val {\n      min-width: 36px;\n      font-size: 11px;\n    }\n    .mgs-codec-log {\n      font-size: 10px;\n      padding: 9px 10px;\n      min-height: 48px;\n    }\n  }\n<\/style>\n<div class=\"cpue-lab\">\n  <header class=\"lab-header\">\n    <div class=\"lab-header-inner\">\n      <div style=\"display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px;\">\n        <span class=\"lab-tagline\" style=\"margin-bottom:0;\">Laboratorio Interactivo &middot; Obra Final APGI<\/span>\n        <div class=\"sound-controls-bar\">\n          <button class=\"sound-toggle-btn\" id=\"btn-sound-toggle\" type=\"button\" title=\"Conmutar efectos de audio sintetizados\">\n            <span id=\"sound-icon\">&#128266;<\/span> <span id=\"sound-text\">Audio: Activo<\/span>\n          <\/button>\n          <select class=\"sound-preset-select\" id=\"sound-preset-select\" title=\"Seleccionar perfil de sonido\">\n            <option value=\"subtle\" selected>Perfil: Mec&aacute;nico Sutil<\/option>\n            <option value=\"tactical\">Perfil: T&aacute;ctico Ac&uacute;stico<\/option>\n            <option value=\"arcade\">Perfil: Retro Arcade 8-bit<\/option>\n          <\/select>\n        <\/div>\n      <\/div>\n      <h1>C&oacute;mo piensa un NPC<\/h1>\n      <p>\n        Un cuaderno explicable inspirado en <strong>Red Blob Games<\/strong> y <strong>Nicky Case<\/strong> para manipular la l&oacute;gica, rutinas y estados detr&aacute;s de los NPCs.\n      <\/p>\n    <\/div>\n  <\/header>\n\n  <main class=\"lab-wrapper\">\n\n    <!-- ESTRUCTURA DEL PROYECTO COMPLETO -->\n<section class=\"cpue-roadmap-section\">\n  <h2>Estructura del Proyecto Completo<\/h2>\n  <p>\n    La web final combinar&aacute; divulgaci&oacute;n visual interactiva para explicar la inteligencia artificial pac&iacute;fica:\n  <\/p>\n\n  <div class=\"roadmap-card\">\n    <span class=\"roadmap-num\">CAP. 01<\/span>\n    <div>\n      <div class=\"roadmap-title\">&Aacute;rbol de Nodos<\/div>\n      <div class=\"roadmap-desc\">La base de cada NPC: NavigationAgent2D, AnimationPlayer y detectores de interacci&oacute;n.<\/div>\n    <\/div>\n    <div><span class=\"roadmap-badge badge-func\">Base Configurada<\/span><\/div>\n  <\/div>\n\n  <div class=\"roadmap-card\">\n    <span class=\"roadmap-num\">CAP. 02<\/span>\n    <div>\n      <div class=\"roadmap-title\">M&aacute;quina de Estados (FSM)<\/div>\n      <div class=\"roadmap-desc\">Transiciones entre rutinas cotidianas: Idle, Moving, Working, Sleeping y Talking.<\/div>\n    <\/div>\n    <div><span class=\"roadmap-badge badge-func\">Borrador L&oacute;gico<\/span><\/div>\n  <\/div>\n\n  <div class=\"roadmap-card\">\n    <span class=\"roadmap-num\">CAP. 03<\/span>\n    <div>\n      <div class=\"roadmap-title\">Gestor de Rutinas Diarias<\/div>\n      <div class=\"roadmap-desc\">El reloj global dictando las acciones hora por hora de los aldeanos.<\/div>\n    <\/div>\n    <div><span class=\"roadmap-badge badge-pend\">Pendiente<\/span><\/div>\n  <\/div>\n  \n  <div class=\"roadmap-card\">\n    <span class=\"roadmap-num\">CAP. 04<\/span>\n    <div>\n      <div class=\"roadmap-title\">Sistema de Di&aacute;logos<\/div>\n      <div class=\"roadmap-desc\">Integraci&oacute;n con Dialogic para interrumpir rutinas y hablar con el jugador.<\/div>\n    <\/div>\n    <div><span class=\"roadmap-badge badge-pend\">Pendiente<\/span><\/div>\n  <\/div>\n<\/section>\n\n    <!-- MODULE 1 -->\n    <section class=\"lab-module\">\n      <div class=\"lab-module-header\">\n        <h2 class=\"lab-module-title\">CAP. 01: &Aacute;rbol de Nodos<\/h2>\n      <\/div>\n    <\/section>\n\n    <!-- MODULE 2 -->\n    <section class=\"lab-module\">\n      <div class=\"lab-module-header\">\n        <h2 class=\"lab-module-title\">CAP. 02: M&aacute;quina de Estados (FSM)<\/h2>\n      <\/div>\n    <\/section>\n\n    <!-- MODULE 3 -->\n    <section class=\"lab-module\">\n      <div class=\"lab-module-header\">\n        <h2 class=\"lab-module-title\">CAP. 03: Gestor de Rutinas Diarias<\/h2>\n      <\/div>\n    <\/section>\n\n    <!-- MODULE 4 -->\n    <section class=\"lab-module\">\n      <div class=\"lab-module-header\">\n        <h2 class=\"lab-module-title\">CAP. 04: Sistema de Di&aacute;logos<\/h2>\n      <\/div>\n    <\/section>\n\n\n\n  <\/main>\n<\/div>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-51","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/pages\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ericguerrero.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=51"}],"version-history":[{"count":0,"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/pages\/51\/revisions"}],"wp:attachment":[{"href":"https:\/\/ericguerrero.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}