{"id":53,"date":"2026-09-26T16:09:03","date_gmt":"2026-09-26T16:09:03","guid":{"rendered":"https:\/\/ericguerrero.es\/?page_id=53"},"modified":"2026-09-26T16:09:03","modified_gmt":"2026-09-26T16:09:03","slug":"runela-wiki","status":"publish","type":"page","link":"https:\/\/ericguerrero.es\/?page_id=53","title":{"rendered":"Runela Wiki"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"53\" class=\"elementor elementor-53 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-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    .runela-wiki-container {\n        font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;\n        color: #171615;\n        max-width: 1000px;\n        margin: 0 auto;\n        padding: 40px 20px;\n    }\n    \n    .wiki-header {\n        text-align: center;\n        margin-bottom: 50px;\n    }\n    \n    .wiki-title {\n        font-size: 3.5rem;\n        font-weight: 900;\n        color: #171615;\n        margin: 0 0 16px 0;\n        line-height: 1.1;\n        letter-spacing: -1.5px;\n    }\n\n    .wiki-subtitle {\n        font-size: 1.25rem;\n        color: #524e4a;\n        line-height: 1.6;\n        max-width: 650px;\n        margin: 0 auto;\n        font-weight: 500;\n    }\n\n    \/* Brutalist Section Style *\/\n    .wiki-section {\n        background: #ffffff;\n        border: 2px solid #2b2927;\n        border-radius: 12px;\n        padding: 32px;\n        margin-bottom: 40px;\n        box-shadow: 6px 6px 0px #2b2927;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .wiki-section-pattern {\n        position: absolute;\n        top: 0; left: 0; right: 0; height: 120px;\n        background: #f4f1ea;\n        background-image: radial-gradient(#dfd9cd 1px, transparent 1px);\n        background-size: 20px 20px;\n        z-index: 0;\n        border-bottom: 1px solid #e5dfd3;\n    }\n    \n    .wiki-section-content {\n        position: relative;\n        z-index: 1;\n    }\n\n    .section-title {\n        font-size: 1.8rem;\n        font-weight: 900;\n        color: #171615;\n        margin-top: 0;\n        margin-bottom: 24px;\n        padding-bottom: 16px;\n        border-bottom: 1px solid #e5dfd3;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n    \n    .tier-list {\n        display: flex;\n        flex-direction: column;\n        gap: 24px;\n    }\n\n    .tier-row {\n        display: flex;\n        background: #ffffff;\n        border: 2px solid #2b2927;\n        border-radius: 12px;\n        overflow: hidden;\n        box-shadow: 4px 4px 0px #2b2927;\n    }\n\n    .tier-label {\n        width: 100px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 2.5rem;\n        font-weight: 900;\n        color: #171615;\n        border-right: 2px solid #2b2927;\n    }\n\n    .tier-S { background: #fde047; }\n    .tier-A { background: #86efac; }\n    .tier-B { background: #93c5fd; }\n    .tier-C { background: #f0abfc; }\n\n    .tier-items {\n        flex: 1;\n        padding: 20px;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 16px;\n        background: #fdfbf7;\n    }\n\n    \/* Brutalist Card Style *\/\n    .class-card {\n        background: #ffffff;\n        border: 2px solid #2b2927;\n        border-radius: 8px;\n        padding: 8px 16px;\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        cursor: pointer;\n        transition: all 0.1s ease;\n        box-shadow: 3px 3px 0px #2b2927;\n        user-select: none;\n    }\n\n    .class-card:hover {\n        transform: translate(2px, 2px);\n        box-shadow: 1px 1px 0px #2b2927;\n        background: #fcfcfc;\n    }\n\n    .class-card:active {\n        transform: translate(3px, 3px);\n        box-shadow: 0px 0px 0px #2b2927;\n    }\n\n    .class-icon-img {\n        width: 48px;\n        height: 48px;\n        border-radius: 8px;\n        object-fit: contain;\n        background: transparent;\n        pointer-events: none;\n        -webkit-user-drag: none;\n        user-select: none;\n    }\n\n    .class-info h4 {\n        margin: 0;\n        font-size: 1rem;\n        color: #171615;\n        font-weight: 900;\n    }\n    \n    .class-info span {\n        font-size: 0.8rem;\n        color: #78726a;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n    }\n\n    \/* Brawler Wiki Style Layout *\/\n    .class-details {\n        display: none;\n        margin-top: 32px;\n        padding: 0;\n        background: #ffffff;\n        border: 2px solid #2b2927;\n        border-radius: 12px;\n        box-shadow: 6px 6px 0px #2b2927;\n        overflow: hidden;\n    }\n    \n    .class-details.active {\n        display: block;\n        animation: slideDown 0.3s ease forwards;\n    }\n    \n    @keyframes slideDown {\n        from { opacity: 0; transform: translateY(-10px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    .details-header {\n        display: flex;\n        justify-content: flex-end;\n        padding: 12px 16px;\n        background: #fdfbf7;\n        border-bottom: 2px solid #2b2927;\n    }\n\n    .btn-close {\n        background: #ffffff;\n        border: 2px solid #2b2927;\n        color: #171615;\n        border-radius: 6px;\n        padding: 4px 12px;\n        font-size: 0.85rem;\n        cursor: pointer;\n        font-weight: 900;\n        box-shadow: 2px 2px 0px #2b2927;\n        transition: all 0.1s ease;\n    }\n    .btn-close:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0px #2b2927; }\n    .btn-close:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #2b2927; }\n\n    .brawler-layout {\n        display: grid;\n        grid-template-columns: 300px 1fr;\n    }\n\n    @media (max-width: 768px) {\n        .brawler-layout { grid-template-columns: 1fr; }\n    }\n\n    \/* Infobox (Left Column) *\/\n    .infobox {\n        background: #f4f1ea;\n        padding: 24px;\n        border-right: 2px solid #2b2927;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n    }\n\n    @media (max-width: 768px) {\n        .infobox { border-right: none; border-bottom: 2px solid #2b2927; }\n    }\n\n    .infobox-icon {\n        width: 140px;\n        height: 140px;\n        background: transparent;\n        margin-bottom: 16px;\n        object-fit: contain;\n        pointer-events: none;\n        -webkit-user-drag: none;\n        user-select: none;\n    }\n\n    .infobox-title {\n        font-size: 2.2rem;\n        font-weight: 900;\n        margin: 0 0 4px 0;\n        color: #171615;\n        text-transform: uppercase;\n        letter-spacing: -0.5px;\n    }\n\n    .infobox-role {\n        font-size: 1rem;\n        font-weight: 800;\n        color: #6d28d9;\n        text-transform: uppercase;\n        background: #f5f3ff;\n        padding: 4px 12px;\n        border-radius: 20px;\n        border: 2px solid #2b2927;\n        margin-bottom: 24px;\n    }\n\n    .stats-container {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n        text-align: left;\n    }\n\n    .stat-row {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n    }\n    \n    .stat-label {\n        font-size: 0.9rem;\n        font-weight: 900;\n        color: #171615;\n        display: flex;\n        justify-content: space-between;\n    }\n    \n    .stat-bar-bg {\n        width: 100%;\n        height: 16px;\n        background: #ffffff;\n        border: 2px solid #2b2927;\n        border-radius: 8px;\n        overflow: hidden;\n    }\n    \n    .stat-bar-fill {\n        height: 100%;\n        background: #2b2927;\n        border-right: 2px solid #2b2927;\n    }\n\n    \/* Abilities (Right Column) *\/\n    .abilities-panel {\n        padding: 32px;\n        background: #ffffff;\n    }\n\n    .desc-text {\n        font-size: 1.1rem;\n        color: #524e4a;\n        line-height: 1.6;\n        font-weight: 500;\n        margin-bottom: 32px;\n        padding-bottom: 24px;\n        border-bottom: 2px dashed #e5dfd3;\n    }\n\n    .abilities-grid {\n        display: flex;\n        flex-direction: column;\n        gap: 24px;\n    }\n    \n    .ability-box {\n        background: #fdfbf7;\n        border: 2px solid #2b2927;\n        padding: 20px;\n        border-radius: 12px;\n        box-shadow: 4px 4px 0px #e5dfd3;\n    }\n\n    .ability-header {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        margin-bottom: 8px;\n    }\n\n    .ability-type {\n        font-size: 0.75rem;\n        font-weight: 900;\n        text-transform: uppercase;\n        color: #ffffff;\n        background: #2b2927;\n        padding: 4px 8px;\n        border-radius: 4px;\n    }\n\n    .ability-type.super { background: #d97706; }\n    .ability-type.gadget { background: #16a34a; }\n\n    .ability-name { \n        margin: 0; \n        font-size: 1.3rem; \n        font-weight: 900; \n        color: #171615; \n    }\n\n    .ability-desc { \n        margin: 0; \n        color: #524e4a; \n        font-size: 0.95rem; \n        line-height: 1.5;\n        font-weight: 500;\n    }\n<\/style>\n\n<div class=\"runela-wiki-container\" oncontextmenu=\"return false;\">\n    <div class=\"wiki-header\">\n        <h1 class=\"wiki-title\">Wiki Oficial de Runela<\/h1>\n        <p class=\"wiki-subtitle\">Gu\u00eda de Clases, Habilidades y Criaturas<\/p>\n    <\/div>\n\n    <!-- Tier List Section -->\n    <div class=\"wiki-section\">\n        <div class=\"wiki-section-pattern\"><\/div>\n        <div class=\"wiki-section-content\">\n            <h2 class=\"section-title\">\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"#fde047\" stroke=\"#171615\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;\">\n                  <path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\"\/>\n                  <path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\"\/>\n                  <path d=\"M4 22h16\"\/>\n                  <path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\"\/>\n                  <path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\"\/>\n                  <path d=\"M18 4H6v7c0 3.31 2.69 6 6 6s6-2.69 6-6V4z\"\/>\n                <\/svg>\n                Tier List\n            <\/h2>\n            \n            <div class=\"tier-list\">\n                \n                <!-- TIER S -->\n                <div class=\"tier-row\">\n                    <div class=\"tier-label tier-S\">S<\/div>\n                    <div class=\"tier-items\">\n                        <div class=\"class-card\" onclick=\"showClass('picaro')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/picaro.png\" class=\"class-icon-img\" alt=\"P\u00edcaro\" \/>\n                            <div class=\"class-info\"><h4>P\u00edcaro<\/h4><span>Assassin<\/span><\/div>\n                        <\/div>\n                        <div class=\"class-card\" onclick=\"showClass('mago')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/mago.png\" class=\"class-icon-img\" alt=\"Mago\" \/>\n                            <div class=\"class-info\"><h4>Mago<\/h4><span>Caster<\/span><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- TIER A -->\n                <div class=\"tier-row\">\n                    <div class=\"tier-label tier-A\">A<\/div>\n                    <div class=\"tier-items\">\n                        <div class=\"class-card\" onclick=\"showClass('guerrero')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/guerrero.png\" class=\"class-icon-img\" alt=\"Guerrero\" \/>\n                            <div class=\"class-info\"><h4>Guerrero<\/h4><span>Bruiser<\/span><\/div>\n                        <\/div>\n                        <div class=\"class-card\" onclick=\"showClass('barbaro')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/barbaro.png\" class=\"class-icon-img\" alt=\"B\u00e1rbaro\" \/>\n                            <div class=\"class-info\"><h4>B\u00e1rbaro<\/h4><span>Fighter<\/span><\/div>\n                        <\/div>\n                        <div class=\"class-card\" onclick=\"showClass('brujo')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/brujo.png\" class=\"class-icon-img\" alt=\"Brujo\" \/>\n                            <div class=\"class-info\"><h4>Brujo<\/h4><span>Dark Caster<\/span><\/div>\n                        <\/div>\n                        <div class=\"class-card\" onclick=\"showClass('hechicero')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/hechicero.png\" class=\"class-icon-img\" alt=\"Hechicero\" \/>\n                            <div class=\"class-info\"><h4>Hechicero<\/h4><span>Offensive<\/span><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- TIER B -->\n                <div class=\"tier-row\">\n                    <div class=\"tier-label tier-B\">B<\/div>\n                    <div class=\"tier-items\">\n                        <div class=\"class-card\" onclick=\"showClass('explorador')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/explorador.png\" class=\"class-icon-img\" alt=\"Explorador\" \/>\n                            <div class=\"class-info\"><h4>Explorador<\/h4><span>Ranger<\/span><\/div>\n                        <\/div>\n                        <div class=\"class-card\" onclick=\"showClass('druida')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/druida.png\" class=\"class-icon-img\" alt=\"Druida\" \/>\n                            <div class=\"class-info\"><h4>Druida<\/h4><span>Soporte<\/span><\/div>\n                        <\/div>\n                        <div class=\"class-card\" onclick=\"showClass('clerigo')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/clerigo.png\" class=\"class-icon-img\" alt=\"Cl\u00e9rigo\" \/>\n                            <div class=\"class-info\"><h4>Cl\u00e9rigo<\/h4><span>Resistente<\/span><\/div>\n                        <\/div>\n                        <div class=\"class-card\" onclick=\"showClass('monje')\">\n                            <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/monje.png\" class=\"class-icon-img\" alt=\"Monje\" \/>\n                            <div class=\"class-info\"><h4>Monje<\/h4><span>Fighter<\/span><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n            <\/div>\n\n            <!-- Brawler-style Details Panel -->\n            <div id=\"classDetails\" class=\"class-details\">\n                <div class=\"details-header\">\n                    <button class=\"btn-close\" onclick=\"document.getElementById('classDetails').classList.remove('active')\">Cerrar \u2715<\/button>\n                <\/div>\n                \n                <div class=\"brawler-layout\">\n                    <!-- INFOBOX -->\n                    <div class=\"infobox\">\n                        <img decoding=\"async\" id=\"cd-img\" src=\"\" class=\"infobox-icon\" alt=\"Icono\" \/>\n                        <h3 id=\"cd-name\" class=\"infobox-title\">Nombre<\/h3>\n                        <span id=\"cd-role\" class=\"infobox-role\">Rol<\/span>\n                        \n                        <div class=\"stats-container\">\n                            <div class=\"stat-row\">\n                                <div class=\"stat-label\"><span>Salud<\/span> <span id=\"cd-hp-val\">0<\/span><\/div>\n                                <div class=\"stat-bar-bg\"><div id=\"cd-hp\" class=\"stat-bar-fill\" style=\"background:#ef4444; border-right-color:#b91c1c;\"><\/div><\/div>\n                            <\/div>\n                            <div class=\"stat-row\">\n                                <div class=\"stat-label\"><span>Da\u00f1o<\/span> <span id=\"cd-dmg-val\">0<\/span><\/div>\n                                <div class=\"stat-bar-bg\"><div id=\"cd-dmg\" class=\"stat-bar-fill\" style=\"background:#f59e0b; border-right-color:#d97706;\"><\/div><\/div>\n                            <\/div>\n                            <div class=\"stat-row\">\n                                <div class=\"stat-label\"><span>Velocidad<\/span> <span id=\"cd-spd-val\">0<\/span><\/div>\n                                <div class=\"stat-bar-bg\"><div id=\"cd-spd\" class=\"stat-bar-fill\" style=\"background:#3b82f6; border-right-color:#1d4ed8;\"><\/div><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- ABILITIES -->\n                    <div class=\"abilities-panel\">\n                        <p id=\"cd-desc\" class=\"desc-text\">Descripci\u00f3n aqu\u00ed.<\/p>\n\n                        <div class=\"abilities-grid\">\n                            <div class=\"ability-box\">\n                                <div class=\"ability-header\">\n                                    <span class=\"ability-type\">B\u00c1SICO<\/span>\n                                    <h4 id=\"cd-wpn1\" class=\"ability-name\">Arma 1<\/h4>\n                                <\/div>\n                                <p id=\"cd-wpn1-desc\" class=\"ability-desc\">Ejecuta ataques continuos de corto alcance.<\/p>\n                            <\/div>\n                            \n                            <div class=\"ability-box\">\n                                <div class=\"ability-header\">\n                                    <span class=\"ability-type super\">SECUNDARIO<\/span>\n                                    <h4 id=\"cd-wpn2\" class=\"ability-name\">Arma 2<\/h4>\n                                <\/div>\n                                <p id=\"cd-wpn2-desc\" class=\"ability-desc\">Ataque secundario con enfriamiento.<\/p>\n                            <\/div>\n\n                            <div class=\"ability-box\">\n                                <div class=\"ability-header\">\n                                    <span class=\"ability-type gadget\">PASIVA<\/span>\n                                    <h4 id=\"cd-skill\" class=\"ability-name\">Habilidad<\/h4>\n                                <\/div>\n                                <p id=\"cd-skill-desc\" class=\"ability-desc\">Efecto pasivo o habilidad especial \u00fanica de la clase.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n    \n    <!-- Bestiario Section -->\n    <div class=\"wiki-section\">\n        <h2 class=\"section-title\">Bestiario y NPCs<\/h2>\n        <p style=\"color:#524e4a; font-size:1.1rem; margin-bottom: 24px; font-weight: 500;\">En Runela, las criaturas tienen sus propios territorios y luchan entre s\u00ed de forma din\u00e1mica.<\/p>\n        \n        <div style=\"display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;\">\n            <div class=\"class-card\" style=\"cursor:default;\">\n                <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/lobo.png\" class=\"class-icon-img\" alt=\"Lobo\" \/>\n                <div class=\"class-info\"><h4>Lobo<\/h4><span>Manadas Territoriales<\/span><\/div>\n            <\/div>\n            <div class=\"class-card\" style=\"cursor:default;\">\n                <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/esqueleto.png\" class=\"class-icon-img\" alt=\"Esqueleto\" \/>\n                <div class=\"class-info\"><h4>Esqueleto<\/h4><span>Variantes Armadas<\/span><\/div>\n            <\/div>\n            <div class=\"class-card\" style=\"cursor:default;\">\n                <img decoding=\"async\" src=\"https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/goblin.png\" class=\"class-icon-img\" alt=\"Goblin\" \/>\n                <div class=\"class-info\"><h4>Goblin<\/h4><span>Campamentos<\/span><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    const classData = {\n        'guerrero': { name: 'Guerrero', role: 'Bruiser \/ Tanque', desc: 'Clase vers\u00e1til de combate cuerpo a cuerpo y a distancia. Su escudo le permite defenderse y resistir emboscadas. Excelente para 1v1 prolongados.', hp: 80, dmg: 70, spd: 50, w1: 'Espada Larga + Escudo', w1d: 'Combos balanceados de 3 golpes frontales con da\u00f1o moderado.', w2: 'Arco Largo', w2d: 'Permite hostigar a distancia a enemigos m\u00e1s lentos.', skill: 'Bloqueo Activo', skilld: 'Reduce dr\u00e1sticamente el da\u00f1o frontal recibido mientras el escudo est\u00e9 alzado.' },\n        \n        'barbaro': { name: 'B\u00e1rbaro', role: 'Fighter Agresivo', desc: 'Combatiente agresivo que hace da\u00f1o tremendo cuerpo a cuerpo pero carece de defensas s\u00f3lidas, apostando por aniquilar antes de morir.', hp: 90, dmg: 85, spd: 60, w1: 'Gran Hacha', w1d: 'Ataques pesados y barridos en \u00e1rea frente a \u00e9l.', w2: 'Jabalina', w2d: 'Arroja lanzas pesadas para frenar huidas.', skill: 'Furia Sangrienta', skilld: 'Aumenta su da\u00f1o progresivamente mientras se mantenga en combate.' },\n        \n        'picaro': { name: 'P\u00edcaro', role: 'Assassin \/ Movilidad', desc: 'Excelente para emboscadas. Letal si atrapa a un objetivo distra\u00eddo, pero muy fr\u00e1gil en un combate directo si pierde su ventaja de sorpresa.', hp: 40, dmg: 90, spd: 95, w1: 'Dagas Dobles', w1d: 'Golpes rapid\u00edsimos enfocados a un solo objetivo.', w2: 'Arco Corto', w2d: 'Tiros r\u00e1pidos para rematar.', skill: 'Evasi\u00f3n', skilld: 'Alta probabilidad de esquivar ataques b\u00e1sicos.' },\n        \n        'mago': { name: 'Mago', role: 'Caster a distancia', desc: 'Especialista en magia de \u00e1rea y control del campo de batalla. Muy vulnerable si los enemigos logran cerrar la distancia.', hp: 45, dmg: 80, spd: 55, w1: 'Bast\u00f3n M\u00e1gico', w1d: 'Proyectiles teledirigidos lentos.', w2: 'Daga', w2d: 'Ataque cuerpo a cuerpo desesperado.', skill: 'Nova Arcana', skilld: 'Al recibir da\u00f1o severo, empuja a los enemigos cercanos.' },\n        \n        'explorador': { name: 'Explorador', role: 'Ranger Dual', desc: 'Equilibrado, \u00e1gil, domina tanto el ataque cuerpo a cuerpo r\u00e1pido como el hostigamiento desde los bosques.', hp: 60, dmg: 65, spd: 75, w1: 'Espadas Cortas', w1d: 'Doble impacto veloz.', w2: 'Arco Largo', w2d: 'Tiros precisos a larga distancia.', skill: 'Camuflaje Natural', skilld: 'Su radio de detecci\u00f3n por parte de los NPCs se reduce en la naturaleza.' },\n        \n        'druida': { name: 'Druida', role: 'Soporte \/ Control', desc: 'Clase de control de zonas y supervivencia, capaz de resistir y fastidiar a sus oponentes alterando el entorno.', hp: 70, dmg: 50, spd: 55, w1: 'Cimitarra', w1d: 'Golpes curvos est\u00e1ndar.', w2: 'Bast\u00f3n de Ra\u00edces', w2d: 'Invoca enredaderas que ralentizan.', skill: 'Regeneraci\u00f3n', skilld: 'Recupera pasivamente salud con el tiempo.' },\n        \n        'clerigo': { name: 'Cl\u00e9rigo', role: 'Soporte Resistente', desc: 'Alta supervivencia y sustain. M\u00e1s lento en movilidad pero muy dif\u00edcil de derribar, ideal para desgastar al rival.', hp: 85, dmg: 55, spd: 40, w1: 'Lucero del Alba', w1d: 'Impactos contundentes perfora-armaduras.', w2: 'Ballesta Ligera', w2d: 'Disparos lentos pero potentes.', skill: 'Bendici\u00f3n Divina', skilld: 'Otorga un escudo temporal al inicio del combate.' },\n        \n        'brujo': { name: 'Brujo', role: 'Dark Caster', desc: 'Usa magia oscura para drenar la vida de sus rivales. Sus estad\u00edsticas lo hacen escurridizo en los duelos.', hp: 60, dmg: 75, spd: 65, w1: 'Cimitarra Oscura', w1d: 'Ataque m\u00e1gico cuerpo a cuerpo.', w2: 'Maldici\u00f3n', w2d: 'Proyectil que inflige da\u00f1o continuo.', skill: 'Sif\u00f3n de Alma', skilld: 'Parte del da\u00f1o infligido se convierte en salud.' },\n        \n        'hechicero': { name: 'Hechicero', role: 'Caster Ofensivo', desc: 'Magia ofensiva directa y contundente, enfocada en da\u00f1o explosivo y r\u00e1fagas impredecibles.', hp: 50, dmg: 85, spd: 60, w1: 'Espada Corta', w1d: 'Ataque secundario defensivo.', w2: 'Orbes Elementales', w2d: 'Lanza proyectiles explosivos de fuego o hielo.', skill: 'Sobrecarga', skilld: 'Cada 3 ataques, el siguiente proyectil tiene doble \u00e1rea.' },\n        \n        'monje': { name: 'Monje', role: 'Fighter \u00c1gil', desc: 'Luchador extremadamente \u00e1gil que encadena golpes r\u00e1pidos y se mueve velozmente por el mapa.', hp: 65, dmg: 70, spd: 80, w1: 'Pu\u00f1os de Hierro', w1d: 'R\u00e1faga de golpes a cort\u00edsima distancia.', w2: 'Patada Voladora', w2d: 'Cierra brechas r\u00e1pidamente hacia el objetivo.', skill: 'Flujo Marcial', skilld: 'Aumenta su velocidad de ataque al encadenar golpes.' }\n    };\n\n    function showClass(id) {\n        const d = classData[id];\n        if(!d) return;\n        \n        document.getElementById('cd-name').innerText = d.name;\n        document.getElementById('cd-role').innerText = d.role;\n        document.getElementById('cd-desc').innerText = d.desc;\n        \n        document.getElementById('cd-img').src = 'https:\/\/ericguerrero.es\/wp-content\/uploads\/runela-icons\/' + id + '.png';\n\n        document.getElementById('cd-hp').style.width = d.hp + '%';\n        document.getElementById('cd-hp-val').innerText = d.hp;\n        document.getElementById('cd-dmg').style.width = d.dmg + '%';\n        document.getElementById('cd-dmg-val').innerText = d.dmg;\n        document.getElementById('cd-spd').style.width = d.spd + '%';\n        document.getElementById('cd-spd-val').innerText = d.spd;\n        \n        document.getElementById('cd-wpn1').innerText = d.w1;\n        document.getElementById('cd-wpn1-desc').innerText = d.w1d;\n        \n        document.getElementById('cd-wpn2').innerText = d.w2;\n        document.getElementById('cd-wpn2-desc').innerText = d.w2d;\n\n        document.getElementById('cd-skill').innerText = d.skill;\n        document.getElementById('cd-skill-desc').innerText = d.skilld;\n        \n        const panel = document.getElementById('classDetails');\n        panel.classList.remove('active');\n        void panel.offsetWidth;\n        panel.classList.add('active');\n        \n        \/\/ Scroll adjustment depending on desktop\/mobile\n        const isMobile = window.innerWidth <= 768;\n        panel.scrollIntoView({ behavior: 'smooth', block: isMobile ? 'start' : 'nearest' });\n    }\n<\/script>\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-53","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/pages\/53","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=53"}],"version-history":[{"count":0,"href":"https:\/\/ericguerrero.es\/index.php?rest_route=\/wp\/v2\/pages\/53\/revisions"}],"wp:attachment":[{"href":"https:\/\/ericguerrero.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}