{"id":114,"date":"2026-10-05T08:09:33","date_gmt":"2026-10-05T08:09:33","guid":{"rendered":"https:\/\/ericguerrero.es\/?page_id=114"},"modified":"2026-10-05T11:03:32","modified_gmt":"2026-10-05T11:03:32","slug":"maquinas-de-estados-ia","status":"publish","type":"page","link":"https:\/\/ericguerrero.es\/?page_id=114","title":{"rendered":"Arquitectura de IA y M\u00e1quinas de Estados"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"114\" class=\"elementor elementor-114 elementor-bc-flex-widget\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-pdfsm01sec1 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"pdfsm01sec1\" 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-pdfsm01col1\" data-id=\"pdfsm01col1\" 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-pdfsm01htm1 elementor-widget elementor-widget-html\" data-id=\"pdfsm01htm1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@500;700;800&family=Plus+Jakarta+Sans:wght@400;500;700&display=swap');\n\n:root {\n  --pf-bg: #f4f1ea;\n  --pf-dot-color: #dfd9cd;\n  --pf-card-bg: #ffffff;\n  --pf-text: #171615;\n  --pf-text-muted: #5c574e;\n  --pf-border: #2b2927;\n  --pf-shadow: #2b2927;\n  --pf-badge-bg: #e8e3d5;\n  --pf-badge-text: #171615;\n  --pf-tag-border: #c9c2b0;\n  --pf-btn-bg: #2b2927;\n  --pf-btn-text: #ffffff;\n  --pf-btn-off-bg: #e8e3d5;\n  --pf-btn-off-text: #5c574e;\n  --pf-btn-off-border: #c9c2b0;\n  --pf-img-strip1: #e8e3d5;\n  --pf-img-strip2: #efebde;\n  --pf-img-text: #a39c8a;\n  --pf-box-bg: #ffffff;\n}\n\n.pf-dark {\n  --pf-bg: #121110;\n  --pf-dot-color: #272522;\n  --pf-card-bg: #1c1a18;\n  --pf-text: #f5f2eb;\n  --pf-text-muted: #a69f92;\n  --pf-border: #3d3935;\n  --pf-shadow: #000000;\n  --pf-badge-bg: #2b2824;\n  --pf-badge-text: #e6e0d3;\n  --pf-tag-border: #423d37;\n  --pf-btn-bg: #f5f2eb;\n  --pf-btn-text: #121110;\n  --pf-btn-off-bg: #242220;\n  --pf-btn-off-text: #736d63;\n  --pf-btn-off-border: #3d3935;\n  --pf-img-strip1: #242220;\n  --pf-img-strip2: #1c1a18;\n  --pf-img-text: #5c574e;\n  --pf-box-bg: #1c1a18;\n}\n\n.pf{\n  background-color: var(--pf-bg);\n  background-image: radial-gradient(var(--pf-dot-color) 1px, transparent 1px);\n  background-size: 24px 24px;\n  background-attachment: fixed;\n  color: var(--pf-text);\n  font-family: 'Plus Jakarta Sans', sans-serif;\n  padding: 0 20px 60px;\n  transition: background-color .25s ease, color .25s ease;\n  min-height: 100vh;\n}\n.pf *{box-sizing:border-box}\n.pf-wrap{max-width:1180px;margin:0 auto}\n.pf h1,.pf h2,.pf h3,.pf h4{font-family:'JetBrains Mono',monospace;margin:0;color:var(--pf-text)}\n\n\/* Top bar con Theme Toggle *\/\n.pf-topbar{display:flex;justify-content:flex-end;padding:24px 0 0}\n.pf-theme-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--pf-card-bg);color:var(--pf-text);border:2px solid var(--pf-border);border-radius:30px;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--pf-shadow);transition:transform .15s,box-shadow .15s}\n.pf-theme-toggle:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--pf-shadow)}\n\n.pf-hero{padding:40px 0 50px}\n.pf-hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;line-height:1.1;margin-bottom:16px}\n.pf-hero p{font-size:1.15rem;color:var(--pf-text-muted);max-width:720px;line-height:1.6;margin:0 0 26px}\n.pf-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}\n.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--pf-btn-bg);color:var(--pf-btn-text)!important;text-decoration:none;padding:11px 18px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.88rem;border:2px solid var(--pf-border);box-shadow:2px 2px 0 var(--pf-shadow);transition:transform .15s,box-shadow .15s;cursor:pointer}\n.pf-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--pf-shadow)}\n.pf-btn.alt{background:transparent;color:var(--pf-text)!important}\n.pf-btn-cv{background:#2e6f40!important;color:#ffffff!important;border-color:var(--pf-border)}\n.pf-dark .pf-btn-cv{background:#388e3c!important;color:#ffffff!important}\n.pf-btn-off{background:var(--pf-btn-off-bg);color:var(--pf-btn-off-text)!important;border-color:var(--pf-btn-off-border);cursor:default;box-shadow:none}\n.pf-btn-off:hover{transform:none;box-shadow:none}\n\n.pf-sec{padding:36px 0}\n.pf-sec h2{font-size:1.6rem;font-weight:800;margin-bottom:18px}\n.pf-sub{color:var(--pf-text-muted);margin:0 0 22px}\n.pf-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}\n.pf-filter{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.82rem;background:var(--pf-card-bg);color:var(--pf-text);border:2px solid var(--pf-border);border-radius:6px;padding:8px 14px;cursor:pointer;box-shadow:2px 2px 0 var(--pf-shadow);transition:background .2s,color .2s,transform .15s,box-shadow .15s}\n.pf-filter:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--pf-shadow)}\n.pf-filter.active{background:var(--pf-btn-bg);color:var(--pf-btn-text)}\n\n.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px}\n.pf-card{position:relative;background:var(--pf-card-bg);border:2px solid var(--pf-border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;box-shadow:4px 4px 0 var(--pf-shadow);transition:box-shadow .2s,transform .2s;will-change:transform}\n.pf-card:hover{box-shadow:8px 8px 0 var(--pf-shadow);transform:translate(-2px,-2px)}\n.pf-body{flex:1;display:flex;flex-direction:column;padding:20px 22px 6px}\n.pf-body .pf-badge{align-self:flex-start}\n.pf-body p{flex:1;color:var(--pf-text-muted);line-height:1.55;margin:0 0 14px;font-size:.93rem}\n.pf-img{position:relative;aspect-ratio:16\/9;background:repeating-linear-gradient(45deg,var(--pf-img-strip1),var(--pf-img-strip1) 12px,var(--pf-img-strip2) 12px,var(--pf-img-strip2) 24px);border-bottom:2px solid var(--pf-border);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.8rem;color:var(--pf-img-text);letter-spacing:.15em}\n.pf-img img{width:100%;height:100%;object-fit:cover}\n\n\/* Pills de estado con colores *\/\n.pf-pill{position:absolute;left:10px;bottom:10px;background:var(--pf-card-bg);border:2px solid var(--pf-border);border-radius:20px;padding:3px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--pf-text);letter-spacing:0;box-shadow:2px 2px 0 var(--pf-shadow)}\n.pf-pill-green{background:#e6f4ea;border-color:#137333;color:#137333}\n.pf-dark .pf-pill-green{background:#16301d;border-color:#34a853;color:#81c995}\n.pf-pill-blue{background:#e8f0fe;border-color:#1a73e8;color:#185abc}\n.pf-dark .pf-pill-blue{background:#152847;border-color:#4285f4;color:#8ab4f8}\n.pf-pill-amber{background:#fef7e0;border-color:#b06000;color:#944e00}\n.pf-dark .pf-pill-amber{background:#3b2a0c;border-color:#f9ab00;color:#fdd663}\n.pf-pill-purple{background:#f3e8fd;border-color:#7b1fa2;color:#6a1b9a}\n.pf-dark .pf-pill-purple{background:#2c153d;border-color:#ba68c8;color:#e1bee7}\n\n.pf-card h3{font-size:1.15rem;font-weight:800;margin:12px 0 8px}\n.pf-link{color:var(--pf-text)!important;text-decoration:none}\n.pf-link::after{content:\"\";position:absolute;inset:0;z-index:1}\n.pf-badge{display:inline-block;background:var(--pf-badge-bg);color:var(--pf-badge-text);padding:3px 10px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700}\n.pf-tags{display:flex;gap:6px;flex-wrap:wrap}\n.pf-tag{border:1px solid var(--pf-tag-border);border-radius:20px;padding:2px 10px;font-size:12px;color:var(--pf-text-muted)}\n.pf-actions{padding:14px 22px 22px}\n.pf-actions .pf-btn{width:100%;text-align:center;position:relative;z-index:2}\n.pf-hidden{display:none!important}\n\n#especialidad{scroll-margin-top:80px}\n\/* Tarjeta destacada de Especialidad Core (Limpia y espaciosa) *\/\n.pf-specialty-card{background:var(--pf-box-bg);border:2px solid var(--pf-border);border-radius:10px;padding:28px 32px;margin-bottom:28px;box-shadow:4px 4px 0 var(--pf-shadow);display:flex;flex-direction:column;gap:16px}\n.pf-specialty-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}\n.pf-specialty-top h3{font-size:1.35rem;font-weight:800;margin:0;flex:1}\n.pf-specialty-top .pf-badge{white-space:nowrap;font-size:11px}\n.pf-specialty-desc{color:var(--pf-text-muted);font-size:1.02rem;line-height:1.65;margin:0;width:100%}\n.pf-specialty-action{margin-top:4px}\n\n.pf-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}\n.pf-box{background:var(--pf-box-bg);border:2px solid var(--pf-border);border-radius:10px;padding:24px;box-shadow:4px 4px 0 var(--pf-shadow)}\n.pf-box h3{font-size:1.05rem;margin-bottom:14px}\n.pf-box ul{margin:0;padding-left:18px;line-height:1.9;color:var(--pf-text)}\n.pf-engine{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--pf-tag-border)}\n.pf-engine span{color:var(--pf-text-muted)}.pf-engine em{margin-left:auto;font-style:normal;font-size:.8rem;background:var(--pf-badge-bg);color:var(--pf-badge-text);padding:2px 8px;border-radius:4px}\n.pf-contact{text-align:center;padding:50px 0 10px}\n\n\/* Subp\u00e1ginas regulares *\/\n.pf-back{display:inline-block;margin:30px 0 10px;color:var(--pf-text-muted)!important;text-decoration:none;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.85rem}\n.pf-back:hover{color:var(--pf-text)!important}\n.pf-detail{padding:10px 0 20px;max-width:920px}\n.pf-detail h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin:14px 0}\n.pf-detail .pf-img{border:2px solid var(--pf-border);border-radius:10px;margin:22px 0;box-shadow:4px 4px 0 var(--pf-shadow)}\n.pf-detail h2{font-size:1.35rem;margin:34px 0 12px;font-weight:800}\n.pf-detail p,.pf-detail li{line-height:1.7;color:var(--pf-text)}\n\n\/* Galer\u00eda FSM e IA (Scroll feed continuo con selector de personajes) *\/\n.pf-gallery-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:12px}\n.pf-selector-bar{display:flex;align-items:center;gap:14px;background:var(--pf-box-bg);border:2px solid var(--pf-border);border-radius:8px;padding:12px 18px;margin:20px 0 32px;box-shadow:3px 3px 0 var(--pf-shadow);flex-wrap:wrap;position:sticky;top:16px;z-index:10}\n.pf-selector-bar label{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:0.88rem;color:var(--pf-text)}\n.pf-char-select{flex:1;min-width:240px;background:var(--pf-card-bg);color:var(--pf-text);border:2px solid var(--pf-border);border-radius:6px;padding:8px 12px;font-family:'JetBrains Mono',monospace;font-size:0.88rem;font-weight:700;cursor:pointer}\n.pf-char-select:focus{outline:none;border-color:var(--pf-text)}\n\n.pf-feed-item{background:var(--pf-box-bg);border:2px solid var(--pf-border);border-radius:10px;padding:26px;margin-bottom:32px;box-shadow:4px 4px 0 var(--pf-shadow);scroll-margin-top:90px}\n.pf-feed-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}\n.pf-feed-header h2{font-size:1.35rem;font-weight:800;margin:0}\n.pf-feed-img{width:100%;border:2px solid var(--pf-border);border-radius:8px;overflow:hidden;background:repeating-linear-gradient(45deg,var(--pf-img-strip1),var(--pf-img-strip1) 12px,var(--pf-img-strip2) 12px,var(--pf-img-strip2) 24px);margin-bottom:16px;box-shadow:3px 3px 0 var(--pf-shadow);display:flex;align-items:center;justify-content:center}\n.pf-feed-img img{width:100%;height:auto;display:block}\n.pf-feed-placeholder{min-height:240px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:'JetBrains Mono',monospace;color:var(--pf-img-text);font-weight:700;padding:24px;text-align:center}\n.pf-feed-desc{font-size:1rem;line-height:1.65;color:var(--pf-text-muted);margin:0}\n\n@media (prefers-reduced-motion:reduce){.pf-card,.pf-filter{transition:none}}\n<\/style>\n<div class=\"pf\"><div class=\"pf-wrap\">\n<div class=\"pf-topbar\" style=\"justify-content:space-between;align-items:center\">\n  <a class=\"pf-back\" href=\"https:\/\/ericguerrero.es\/?page_id=65#proyectos\">&larr; Volver a Portfolio<\/a>\n  <button class=\"pf-theme-toggle\" type=\"button\">\ud83c\udf19 Modo Oscuro<\/button>\n<\/div>\n\n<div class=\"pf-detail\" style=\"max-width:960px;\">\n  <span class=\"pf-badge\">Documentaci&oacute;n T&eacute;cnica &middot; Prototipo<\/span>\n  <h1>Galer&iacute;a de Arquitectura de IA y M&aacute;quinas de Estados<\/h1>\n  <p style=\"font-size:1.05rem;color:var(--pf-text-muted);margin:10px 0 24px;line-height:1.6;\">\n    Cat&aacute;logo visual de diagramas y esquemas de toma de decisiones para entidades, enemigos y personajes no jugables. Selecciona un personaje en el desplegable para desplazarte r&aacute;pidamente a su esquema.\n  <\/p>\n\n  <!-- Desplegable para seleccionar personaje -->\n  <div class=\"pf-selector-bar\">\n    <label for=\"charSelect\">Seleccionar Personaje:<\/label>\n    <select class=\"pf-char-select\" id=\"charSelect\">\n      <option value=\"\">&mdash; Elige un personaje para ir al esquema &mdash;<\/option>\n      <option value=\"char-wombat\">Wombat Territorial (FSM de Supervivencia & Alerta)<\/option><option value=\"char-gato\">Gato Sigiloso (Behavior Tree reactivo)<\/option><option value=\"char-centinela\">Centinela Melee (FSM de Combate y Cooldowns)<\/option><option value=\"char-guardian\">Guardi&aacute;n de Mazmorra (Boss) (FSM Jer&aacute;rquica por Fases)<\/option><option value=\"char-tactico\">Comandante T&aacute;ctico (Behavior Tree con Fallbacks)<\/option>\n    <\/select>\n  <\/div>\n\n  <!-- Feed vertical continuo de personajes -->\n  <div class=\"pf-feed\">\n    \n        <article class=\"pf-feed-item\" id=\"char-wombat\">\n          <div class=\"pf-feed-header\">\n            <h2>Wombat Territorial<\/h2>\n            <span class=\"pf-badge\">FSM de Supervivencia &amp; Alerta<\/span>\n          <\/div>\n          <div class=\"pf-feed-img\">\n              <div class=\"pf-feed-placeholder\">\n                <span style=\"font-size:1.1rem;color:var(--pf-text);\">[ ESQUEMA \/ DIAGRAMA DE M&Aacute;QUINA DE ESTADOS ]<\/span>\n                <span style=\"font-size:0.82rem;letter-spacing:0.1em;\">IMAGEN DEL PERSONAJE: WOMBAT TERRITORIAL<\/span>\n              <\/div>\n            <\/div>\n          <p class=\"pf-feed-desc\">Controlador de entidad territorial con ciclo de 4 estados (Hidden, Investigate, Attack, Flee). Eval&uacute;a constantemente la correlaci&oacute;n de fuerzas (grupo aliado vs amenaza) y ejecuta huida t&aacute;ctica incondicional hacia su madriguera si la salud cae por debajo del 30%.<\/p>\n        <\/article>\n        \n        <article class=\"pf-feed-item\" id=\"char-gato\">\n          <div class=\"pf-feed-header\">\n            <h2>Gato Sigiloso<\/h2>\n            <span class=\"pf-badge\">Behavior Tree reactivo<\/span>\n          <\/div>\n          <div class=\"pf-feed-img\">\n              <div class=\"pf-feed-placeholder\">\n                <span style=\"font-size:1.1rem;color:var(--pf-text);\">[ ESQUEMA \/ DIAGRAMA DE M&Aacute;QUINA DE ESTADOS ]<\/span>\n                <span style=\"font-size:0.82rem;letter-spacing:0.1em;\">IMAGEN DEL PERSONAJE: GATO SIGILOSO<\/span>\n              <\/div>\n            <\/div>\n          <p class=\"pf-feed-desc\">&Aacute;rbol de conducta con selector de prioridad para merodear de forma aut&oacute;noma, investigar ruidos o est&iacute;mulos cercanos y cambiar a postura de acecho al detectar presas en su cono de visi&oacute;n frontal mediante producto escalar.<\/p>\n        <\/article>\n        \n        <article class=\"pf-feed-item\" id=\"char-centinela\">\n          <div class=\"pf-feed-header\">\n            <h2>Centinela Melee<\/h2>\n            <span class=\"pf-badge\">FSM de Combate y Cooldowns<\/span>\n          <\/div>\n          <div class=\"pf-feed-img\">\n              <div class=\"pf-feed-placeholder\">\n                <span style=\"font-size:1.1rem;color:var(--pf-text);\">[ ESQUEMA \/ DIAGRAMA DE M&Aacute;QUINA DE ESTADOS ]<\/span>\n                <span style=\"font-size:0.82rem;letter-spacing:0.1em;\">IMAGEN DEL PERSONAJE: CENTINELA MELEE<\/span>\n              <\/div>\n            <\/div>\n          <p class=\"pf-feed-desc\">Enemigo patrullero que navega entre waypoints fijos. En combate cuerpo a cuerpo gestiona secuencias de ataques con tiempos de recuperaci&oacute;n, retroceso t&aacute;ctico y lectura de distancia sin bloquear el hilo principal del servidor.<\/p>\n        <\/article>\n        \n        <article class=\"pf-feed-item\" id=\"char-guardian\">\n          <div class=\"pf-feed-header\">\n            <h2>Guardi&amp;aacute;n de Mazmorra (Boss)<\/h2>\n            <span class=\"pf-badge\">FSM Jer&amp;aacute;rquica por Fases<\/span>\n          <\/div>\n          <div class=\"pf-feed-img\">\n              <div class=\"pf-feed-placeholder\">\n                <span style=\"font-size:1.1rem;color:var(--pf-text);\">[ ESQUEMA \/ DIAGRAMA DE M&Aacute;QUINA DE ESTADOS ]<\/span>\n                <span style=\"font-size:0.82rem;letter-spacing:0.1em;\">IMAGEN DEL PERSONAJE: GUARDI&amp;AACUTE;N DE MAZMORRA (BOSS)<\/span>\n              <\/div>\n            <\/div>\n          <p class=\"pf-feed-desc\">M&aacute;quina de estados multinivel estructurada en tres fases seg&uacute;n el porcentaje de vida restante. Desbloquea patrones de ataque en &aacute;rea al 50% de salud e ingresa en fase berserk ininterrumpible al caer al 20%.<\/p>\n        <\/article>\n        \n        <article class=\"pf-feed-item\" id=\"char-tactico\">\n          <div class=\"pf-feed-header\">\n            <h2>Comandante T&amp;aacute;ctico<\/h2>\n            <span class=\"pf-badge\">Behavior Tree con Fallbacks<\/span>\n          <\/div>\n          <div class=\"pf-feed-img\"><img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/ia-diagrams\/esquema_behavior_tree_halo2.png\" alt=\"Comandante T&amp;aacute;ctico\" \/><\/div>\n          <p class=\"pf-feed-desc\">Esquema jer&aacute;rquico inspirado en la arquitectura de IA de Halo 2. Prioriza b&uacute;squeda activa de cobertura y reagrupamiento con aliados antes de ejecutar disparos de supresi&oacute;n y maniobras de flanqueo coordinado.<\/p>\n        <\/article>\n        \n  <\/div>\n\n<\/div>\n<\/div><\/div>\n<script>\n(function(){\n\/\/ Theme toggle logic\nvar root=document.querySelector('.pf');\nvar toggleBtn=document.querySelector('.pf-theme-toggle');\nvar savedTheme=localStorage.getItem('pf-theme')||'light';\nfunction setTheme(theme){\n  if(theme==='dark'){root.classList.add('pf-dark');if(toggleBtn)toggleBtn.innerHTML='\u2600\ufe0f Modo Claro'}\n  else{root.classList.remove('pf-dark');if(toggleBtn)toggleBtn.innerHTML='\ud83c\udf19 Modo Oscuro'}\n  localStorage.setItem('pf-theme',theme);\n}\nsetTheme(savedTheme);\nif(toggleBtn){\n  toggleBtn.addEventListener('click',function(){\n    var isDark=root.classList.contains('pf-dark');\n    setTheme(isDark?'light':'dark');\n  });\n}\n\n\/\/ Selector desplegable para salto a personajes (Galer\u00eda FSM)\nvar charSelect=document.getElementById('charSelect');\nif(charSelect){\n  charSelect.addEventListener('change',function(){\n    var val=this.value;\n    if(!val)return;\n    var target=document.getElementById(val);\n    if(target){\n      target.scrollIntoView({behavior:'smooth',block:'start'});\n    }\n  });\n}\n\n\/\/ Filters and FLIP animations\nvar bs=document.querySelectorAll('.pf-filter'),grid=document.querySelector('.pf-all'),\ncs=Array.prototype.slice.call(document.querySelectorAll('.pf-all .pf-card')),\ncalm=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches,busy=false;\nfunction match(c,f){return f==='all'||c.getAttribute('data-cats').split(' ').indexOf(f)>-1}\nfunction rect(c){return c.getBoundingClientRect()}\nfunction apply(f){\n if(busy)return;\n var vis=cs.filter(function(c){return !c.classList.contains('pf-hidden')}),\n stay=vis.filter(function(c){return match(c,f)}),\n leave=vis.filter(function(c){return !match(c,f)}),\n enter=cs.filter(function(c){return c.classList.contains('pf-hidden')&&match(c,f)});\n if(calm){cs.forEach(function(c){c.classList.toggle('pf-hidden',!match(c,f))});return}\n busy=true;\n var out=leave.map(function(c){return c.animate([{opacity:1,transform:'scale(1)'},{opacity:0,transform:'scale(.85)'}],{duration:220,easing:'ease-in',fill:'forwards'}).finished});\n Promise.all(out).then(function(){\n  var first=stay.map(rect);\n  leave.forEach(function(c){c.classList.add('pf-hidden');c.getAnimations().forEach(function(a){a.cancel()})});\n  enter.forEach(function(c){c.classList.remove('pf-hidden')});\n  stay.forEach(function(c,i){\n   var l=rect(c),dx=first[i].left-l.left,dy=first[i].top-l.top;\n   if(dx||dy)c.animate([{transform:'translate('+dx+'px,'+dy+'px)'},{transform:'none'}],{duration:480,easing:'cubic-bezier(.2,.8,.2,1)'});\n  });\n  var anims=enter.map(function(c,i){return c.animate([{opacity:0,transform:'translateY(24px) scale(.9)'},{opacity:1,transform:'none'}],{duration:450,delay:140+i*45,easing:'cubic-bezier(.2,.8,.2,1)',fill:'backwards'}).finished});\n  return Promise.all(anims.length?anims:[new Promise(function(r){setTimeout(r,480)})]);\n }).then(function(){busy=false}).catch(function(){busy=false});\n}\nbs.forEach(function(b){b.addEventListener('click',function(){\n if(b.classList.contains('active'))return;\n bs.forEach(function(x){x.classList.remove('active')});b.classList.add('active');apply(b.getAttribute('data-f'))})});\n})();\n<\/script>\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":65,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-114","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/pages\/114","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=114"}],"version-history":[{"count":1,"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":115,"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/pages\/114\/revisions\/115"}],"up":[{"embeddable":true,"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/pages\/65"}],"wp:attachment":[{"href":"https:\/\/ericguerrero.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}