{"id":548,"date":"2026-10-30T18:25:49","date_gmt":"2026-10-30T21:25:49","guid":{"rendered":"https:\/\/d3fa.opik.net\/?page_id=548"},"modified":"2026-10-30T22:49:31","modified_gmt":"2026-10-31T01:49:31","slug":"beats","status":"publish","type":"page","link":"https:\/\/d3fa.opik.net\/?page_id=548","title":{"rendered":"BEATS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"548\" class=\"elementor elementor-548\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1d73bdf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1d73bdf\" 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-9fb74c8\" data-id=\"9fb74c8\" 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-b41b3f7 elementor-widget elementor-widget-html\" data-id=\"b41b3f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==========================================\r\n     1. ESTRUCTURA HTML (LOGO Y MEN\u00da)\r\n     ========================================== -->\r\n<!-- Logo con imagen fija arriba a la izquierda (redirige al inicio) -->\r\n<a href=\"https:\/\/d3fa.opik.net\/\" id=\"site-logo\">\r\n  <img decoding=\"async\" src=\"https:\/\/d3fa.opik.net\/wp-content\/uploads\/2026\/10\/DEFA-PNG-2-300x143.png\" alt=\"Logo\">\r\n<\/a>\r\n\r\n<!-- Bot\u00f3n para abrir\/cerrar el men\u00fa (arriba a la derecha) -->\r\n<button id=\"toggle-btn\" onclick=\"toggleMenu()\">\u2630 Men\u00fa<\/button>\r\n\r\n<!-- Panel lateral (Sidebar a la derecha) -->\r\n<nav id=\"sidebar\" class=\"sidebar\">\r\n  <div class=\"sidebar-header\">\r\n    <h3>Navegaci\u00f3n<\/h3>\r\n    <button class=\"close-btn\" onclick=\"toggleMenu()\">&times;<\/button>\r\n  <\/div>\r\n  <ul class=\"sidebar-links\">\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/\" onclick=\"toggleMenu()\">Inicio<\/a><\/li>\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=528\" onclick=\"toggleMenu()\">M\u00fasica<\/a><\/li>\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=658\" onclick=\"toggleMenu()\">Videos<\/a><\/li>\r\n    <!-- Opci\u00f3n Beats con su enlace independiente configurado -->\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=548\" onclick=\"toggleMenu()\">Beats<\/a><\/li>\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=531\" onclick=\"toggleMenu()\">Sobre m\u00ed<\/a><\/li>\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=583\" onclick=\"toggleMenu()\">Contacto<\/a><\/li>\r\n  <\/ul>\r\n<\/nav>\r\n\r\n<!-- Capa oscura de fondo al abrir el men\u00fa -->\r\n<div id=\"overlay\" onclick=\"toggleMenu()\"><\/div>\r\n\r\n\r\n<!-- ==========================================\r\n     2. ESTILOS CSS\r\n     ========================================== -->\r\n<style>\r\n  \/* Desplazamiento suave global *\/\r\n  html {\r\n    scroll-behavior: smooth;\r\n  }\r\n\r\n  \/* LOGO SIN CUADRO Y M\u00c1S GRANDE *\/\r\n  #site-logo {\r\n    position: fixed;\r\n    top: 20px;\r\n    left: 20px;\r\n    z-index: 99999;\r\n    display: flex;\r\n    align-items: center;\r\n    background-color: transparent;\r\n    backdrop-filter: none;\r\n    -webkit-backdrop-filter: none;\r\n    padding: 0;\r\n    border: none;\r\n    box-shadow: none;\r\n    text-decoration: none;\r\n    transition: opacity 0.3s ease;\r\n  }\r\n\r\n  #site-logo:hover {\r\n    opacity: 0.8;\r\n  }\r\n\r\n  \/* Tama\u00f1o de la imagen del logo a 60px *\/\r\n  #site-logo img {\r\n    height: 60px; \r\n    width: auto;\r\n    display: block;\r\n  }\r\n\r\n  \/* Bot\u00f3n flotante para abrir el men\u00fa (arriba a la derecha) *\/\r\n  #toggle-btn {\r\n    position: fixed;\r\n    top: 20px;\r\n    right: 20px;\r\n    z-index: 99999;\r\n    padding: 10px 18px;\r\n    background-color: rgba(20, 20, 25, 0.4);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    color: #ffffff;\r\n    border: 1px solid rgba(255, 255, 255, 0.15);\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n    transition: background 0.3s ease;\r\n  }\r\n\r\n  #toggle-btn:hover {\r\n    background-color: rgba(30, 30, 40, 0.6);\r\n  }\r\n\r\n  \/* Panel lateral desplegable *\/\r\n  .sidebar {\r\n    position: fixed;\r\n    top: 0;\r\n    right: -280px;\r\n    left: auto;\r\n    width: 260px;\r\n    height: 100vh;\r\n    background-color: rgba(15, 15, 20, 0.35);\r\n    backdrop-filter: blur(15px);\r\n    -webkit-backdrop-filter: blur(15px);\r\n    color: #ffffff;\r\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);\r\n    transition: right 0.3s ease-in-out;\r\n    z-index: 100000;\r\n    padding: 20px;\r\n    box-sizing: border-box;\r\n    border-left: 1px solid rgba(255, 255, 255, 0.12);\r\n  }\r\n\r\n  .sidebar.active {\r\n    right: 0;\r\n  }\r\n\r\n  .sidebar-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.15);\r\n    padding-bottom: 15px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .sidebar-header h3 {\r\n    margin: 0;\r\n    color: #fff;\r\n    font-size: 20px;\r\n  }\r\n\r\n  .close-btn {\r\n    background: none;\r\n    border: none;\r\n    color: #ccc;\r\n    font-size: 28px;\r\n    cursor: pointer;\r\n    line-height: 1;\r\n    transition: color 0.2s;\r\n  }\r\n\r\n  .close-btn:hover {\r\n    color: #fff;\r\n  }\r\n\r\n  .sidebar-links {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  .sidebar-links li {\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .sidebar-links a {\r\n    color: #ddd;\r\n    text-decoration: none;\r\n    font-size: 16px;\r\n    display: block;\r\n    padding: 10px 14px;\r\n    border-radius: 6px;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .sidebar-links a:hover {\r\n    background-color: rgba(255, 255, 255, 0.15);\r\n    color: #ffffff;\r\n    padding-left: 18px;\r\n  }\r\n\r\n  #overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    background: rgba(0, 0, 0, 0.4);\r\n    display: none;\r\n    z-index: 99998;\r\n    backdrop-filter: blur(2px);\r\n  }\r\n\r\n  #overlay.active {\r\n    display: block;\r\n  }\r\n<\/style>\r\n\r\n\r\n<!-- ==========================================\r\n     3. L\u00d3GICA JAVASCRIPT\r\n     ========================================== -->\r\n<script>\r\n  function toggleMenu() {\r\n    const sidebar = document.getElementById('sidebar');\r\n    const overlay = document.getElementById('overlay');\r\n    \r\n    sidebar.classList.toggle('active');\r\n    overlay.classList.toggle('active');\r\n  }\r\n<\/script>\t\t\t\t<\/div>\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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-53d90b2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"53d90b2\" 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-ee720d0\" data-id=\"ee720d0\" 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-47fe241 elementor-widget elementor-widget-html\" data-id=\"47fe241\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==========================================\r\n     1. ESTRUCTURA HTML (CAT\u00c1LOGO ESTILO BEATSTARS)\r\n     ========================================== -->\r\n<div class=\"beats-marketplace-container\">\r\n\r\n  <!-- SIDEBAR DE FILTROS (IZQUIERDA) -->\r\n  <aside class=\"market-sidebar\">\r\n    <div class=\"sidebar-block\">\r\n      <h3 class=\"block-title\">Categor\u00edas<\/h3>\r\n      <ul class=\"block-list\">\r\n        <li class=\"active\"><a href=\"#\">\ud83c\udfb5 Tracks<\/a><\/li>\r\n        <li><a href=\"#\">\ud83c\udf99\ufe0f Artistas \/ Beats<\/a><\/li>\r\n        <li><a href=\"#\">\ud83d\udcbf Playlists<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <div class=\"sidebar-block\">\r\n      <h3 class=\"block-title\">Filtros<\/h3>\r\n      \r\n      <!-- Desplegable G\u00e9neros -->\r\n      <details class=\"filter-dropdown\" open>\r\n        <summary>\ud83c\udfa7 G\u00e9nero<\/summary>\r\n        <div class=\"filter-options\">\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('Reggaet\u00f3n')\"> Reggaet\u00f3n<\/label>\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('Trap')\"> Trap<\/label>\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('Rap')\"> Rap<\/label>\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('R&B')\"> R&B \/ Neo-Soul<\/label>\r\n        <\/div>\r\n      <\/details>\r\n\r\n      <!-- Desplegable BPM \/ Tempo -->\r\n      <details class=\"filter-dropdown\">\r\n        <summary>\ud83e\udd41 Tempo \/ BPM<\/summary>\r\n        <div class=\"filter-options\">\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('80-100 BPM')\"> Slow (80 - 100 BPM)<\/label>\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('100-130 BPM')\"> Mid (100 - 130 BPM)<\/label>\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('130+ BPM')\"> Fast (130+ BPM)<\/label>\r\n        <\/div>\r\n      <\/details>\r\n\r\n      <!-- Desplegable Precio -->\r\n      <details class=\"filter-dropdown\">\r\n        <summary>\ud83c\udff7\ufe0f Precio \/ Licencia<\/summary>\r\n        <div class=\"filter-options\">\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('B\u00e1sica')\"> Licencia B\u00e1sica ($25)<\/label>\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('Premium')\"> Licencia Premium ($50)<\/label>\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('Exclusiva')\"> Licencia Exclusiva<\/label>\r\n        <\/div>\r\n      <\/details>\r\n\r\n      <!-- Desplegable Mood -->\r\n      <details class=\"filter-dropdown\">\r\n        <summary>\ud83d\udd25 Mood \/ Vibra<\/summary>\r\n        <div class=\"filter-options\">\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('Dark')\"> Dark \/ Agresivo<\/label>\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('Melanc\u00f3lico')\"> Melanc\u00f3lico<\/label>\r\n          <label><input type=\"checkbox\" onclick=\"applyFilter('Club')\"> Club \/ Bailable<\/label>\r\n        <\/div>\r\n      <\/details>\r\n    <\/div>\r\n  <\/aside>\r\n\r\n\r\n  <!-- SECCI\u00d3N PRINCIPAL DE BEATS (DERECHA) -->\r\n  <main class=\"market-content\">\r\n    \r\n    <!-- Header superior del contenido -->\r\n    <div class=\"market-header\">\r\n      <div class=\"header-left\">\r\n        <h2>Tracks<\/h2>\r\n        <div class=\"active-tags-container\" id=\"active-tags\">\r\n          <!-- Aqu\u00ed se insertan los tags activos desde el buscador o filtros -->\r\n          <span class=\"active-tag\" id=\"search-tag-display\">\r\n            <span id=\"search-text\">Todos<\/span>\r\n            <button onclick=\"clearSearch()\">&times;<\/button>\r\n          <\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"header-right\">\r\n        <span class=\"sort-label\">Ordenar por:<\/span>\r\n        <select class=\"sort-select\">\r\n          <option>Relevancia<\/option>\r\n          <option>M\u00e1s recientes<\/option>\r\n          <option>BPM (Menor a Mayor)<\/option>\r\n          <option>Precio<\/option>\r\n        <\/select>\r\n      <\/div>\r\n    <\/div>\r\n\r\n\r\n    <!-- LISTA DE TRACKS -->\r\n    <div class=\"tracks-list\">\r\n\r\n      <!-- ITEM DE BEAT 1 -->\r\n      <div class=\"track-row\">\r\n        <span class=\"track-num\">1<\/span>\r\n        <div class=\"track-cover\" style=\"background-image: url('https:\/\/d3fa.opik.net\/wp-content\/uploads\/2026\/10\/DEFA-PNG-2-300x143.png');\"><\/div>\r\n        \r\n        <div class=\"track-info\">\r\n          <h4 class=\"track-title\">PRODKEIF X DEFA - \"La Noche\" <span class=\"badge-type\">Type Beat<\/span><\/h4>\r\n          <p class=\"track-sub\">DEFA &bull; 95 BPM &bull; Reggaet\u00f3n Dark<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"track-actions\">\r\n          <button class=\"btn-icon\" title=\"Descargar Preview\" onclick=\"alert('Descargando preview...')\">\ud83d\udce5<\/button>\r\n          <a href=\"#contacto\" class=\"btn-price\">$28.00<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ITEM DE BEAT 2 -->\r\n      <div class=\"track-row\">\r\n        <span class=\"track-num\">2<\/span>\r\n        <div class=\"track-cover\" style=\"background-image: url('https:\/\/d3fa.opik.net\/wp-content\/uploads\/2026\/10\/DEFA-PNG-2-300x143.png');\"><\/div>\r\n        \r\n        <div class=\"track-info\">\r\n          <h4 class=\"track-title\">Cris MJ x FloyyMenor Type Beat - \"Ma\u00f1ana\"<\/h4>\r\n          <p class=\"track-sub\">DEFA &bull; 98 BPM &bull; Reggaet\u00f3n Club<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"track-actions\">\r\n          <button class=\"btn-icon\" title=\"Descargar Preview\" onclick=\"alert('Descargando preview...')\">\ud83d\udce5<\/button>\r\n          <a href=\"#contacto\" class=\"btn-price\">$29.99<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ITEM DE BEAT 3 -->\r\n      <div class=\"track-row\">\r\n        <span class=\"track-num\">3<\/span>\r\n        <div class=\"track-cover\" style=\"background-image: url('https:\/\/d3fa.opik.net\/wp-content\/uploads\/2026\/10\/DEFA-PNG-2-300x143.png');\"><\/div>\r\n        \r\n        <div class=\"track-info\">\r\n          <h4 class=\"track-title\">DETROIT X PLUGG - \"Esc\u00e1pate Conmigo\"<\/h4>\r\n          <p class=\"track-sub\">DEFA &bull; 140 BPM &bull; Trap \/ Plugg<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"track-actions\">\r\n          <button class=\"btn-icon\" title=\"Descargar Preview\" onclick=\"alert('Descargando preview...')\">\ud83d\udce5<\/button>\r\n          <a href=\"#contacto\" class=\"btn-price\">$25.99<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ITEM DE BEAT 4 -->\r\n      <div class=\"track-row\">\r\n        <span class=\"track-num\">4<\/span>\r\n        <div class=\"track-cover\" style=\"background-image: url('https:\/\/d3fa.opik.net\/wp-content\/uploads\/2026\/10\/DEFA-PNG-2-300x143.png');\"><\/div>\r\n        \r\n        <div class=\"track-info\">\r\n          <h4 class=\"track-title\">FASHION WEEK | INSTRUMENTAL<\/h4>\r\n          <p class=\"track-sub\">DEFA &bull; 100 BPM &bull; R&B \/ Neo-Soul<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"track-actions\">\r\n          <button class=\"btn-icon\" title=\"Descargar Preview\" onclick=\"alert('Descargando preview...')\">\ud83d\udce5<\/button>\r\n          <a href=\"#contacto\" class=\"btn-price\">$25.00<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/main>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- ==========================================\r\n     2. ESTILOS CSS (DARK MARKETPLACE TRANSL\u00daCIDO)\r\n     ========================================== -->\r\n<style>\r\n  .beats-marketplace-container {\r\n    display: flex;\r\n    gap: 25px;\r\n    max-width: 1200px;\r\n    width: 100%;\r\n    margin: 40px auto;\r\n    padding: 0 20px;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* SIDEBAR IZQUIERDO *\/\r\n  .market-sidebar {\r\n    width: 260px;\r\n    flex-shrink: 0;\r\n    background: rgba(15, 15, 20, 0.55);\r\n    backdrop-filter: blur(14px);\r\n    -webkit-backdrop-filter: blur(14px);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 12px;\r\n    padding: 20px;\r\n    box-sizing: border-box;\r\n    height: fit-content;\r\n  }\r\n\r\n  .sidebar-block {\r\n    margin-bottom: 25px;\r\n  }\r\n\r\n  .block-title {\r\n    color: #ffffff;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    margin: 0 0 12px 0;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n    padding-bottom: 8px;\r\n  }\r\n\r\n  .block-list {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  .block-list li a {\r\n    color: #aaaaaa;\r\n    text-decoration: none;\r\n    display: block;\r\n    padding: 8px 10px;\r\n    border-radius: 6px;\r\n    font-size: 14px;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .block-list li.active a, .block-list li a:hover {\r\n    background: rgba(255, 255, 255, 0.12);\r\n    color: #ffffff;\r\n  }\r\n\r\n  \/* Filtros desplegables *\/\r\n  .filter-dropdown {\r\n    margin-bottom: 10px;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n    padding-bottom: 8px;\r\n  }\r\n\r\n  .filter-dropdown summary {\r\n    color: #dddddd;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    padding: 6px 0;\r\n    outline: none;\r\n    user-select: none;\r\n  }\r\n\r\n  .filter-options {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n    padding: 8px 0 6px 10px;\r\n  }\r\n\r\n  .filter-options label {\r\n    color: #aaaaaa;\r\n    font-size: 13px;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  \/* SECCI\u00d3N DERECHA \/ MARKET CONTENT *\/\r\n  .market-content {\r\n    flex: 1;\r\n    background: rgba(15, 15, 20, 0.55);\r\n    backdrop-filter: blur(14px);\r\n    -webkit-backdrop-filter: blur(14px);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 12px;\r\n    padding: 25px 30px;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .market-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 25px;\r\n    padding-bottom: 15px;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n  }\r\n\r\n  .header-left {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n  .header-left h2 {\r\n    color: #ffffff;\r\n    font-size: 24px;\r\n    margin: 0;\r\n  }\r\n\r\n  .active-tag {\r\n    background: rgba(255, 255, 255, 0.15);\r\n    color: #ffffff;\r\n    padding: 4px 10px;\r\n    border-radius: 15px;\r\n    font-size: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n  }\r\n\r\n  .active-tag button {\r\n    background: none;\r\n    border: none;\r\n    color: #fff;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    line-height: 1;\r\n  }\r\n\r\n  .header-right {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .sort-label {\r\n    color: #888888;\r\n    font-size: 13px;\r\n  }\r\n\r\n  .sort-select {\r\n    background: rgba(30, 30, 40, 0.8);\r\n    color: #ffffff;\r\n    border: 1px solid rgba(255, 255, 255, 0.15);\r\n    padding: 6px 12px;\r\n    border-radius: 6px;\r\n    font-size: 13px;\r\n    outline: none;\r\n  }\r\n\r\n  \/* LISTA DE TRACKS (FILAS) *\/\r\n  .tracks-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n  }\r\n\r\n  .track-row {\r\n    display: flex;\r\n    align-items: center;\r\n    background: rgba(25, 25, 35, 0.4);\r\n    border: 1px solid rgba(255, 255, 255, 0.06);\r\n    padding: 12px 16px;\r\n    border-radius: 8px;\r\n    transition: background 0.2s ease, transform 0.2s ease;\r\n  }\r\n\r\n  .track-row:hover {\r\n    background: rgba(35, 35, 50, 0.65);\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  .track-num {\r\n    color: #666677;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    width: 25px;\r\n  }\r\n\r\n  .track-cover {\r\n    width: 48px;\r\n    height: 48px;\r\n    border-radius: 6px;\r\n    background-size: cover;\r\n    background-position: center;\r\n    margin-right: 15px;\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n  }\r\n\r\n  .track-info {\r\n    flex: 1;\r\n  }\r\n\r\n  .track-title {\r\n    color: #ffffff;\r\n    font-size: 15px;\r\n    margin: 0 0 4px 0;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .badge-type {\r\n    font-size: 10px;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    padding: 2px 6px;\r\n    border-radius: 4px;\r\n    color: #ccc;\r\n    font-weight: normal;\r\n  }\r\n\r\n  .track-sub {\r\n    color: #888899;\r\n    font-size: 12px;\r\n    margin: 0;\r\n  }\r\n\r\n  .track-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .btn-icon {\r\n    background: rgba(255, 255, 255, 0.08);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 6px;\r\n    padding: 8px 10px;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    transition: background 0.2s ease;\r\n  }\r\n\r\n  .btn-icon:hover {\r\n    background: rgba(255, 255, 255, 0.2);\r\n  }\r\n\r\n  \/* BOT\u00d3N AZUL ESTILO BEATSTARS *\/\r\n  .btn-price {\r\n    background-color: #2b6bf3;\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    font-weight: 700;\r\n    font-size: 13px;\r\n    padding: 8px 18px;\r\n    border-radius: 6px;\r\n    transition: background-color 0.2s ease, transform 0.2s ease;\r\n  }\r\n\r\n  .btn-price:hover {\r\n    background-color: #1e56d0;\r\n    transform: scale(1.03);\r\n  }\r\n\r\n  \/* ADAPTABILIDAD RESPONSIVA *\/\r\n  @media (max-width: 900px) {\r\n    .beats-marketplace-container {\r\n      flex-direction: column;\r\n    }\r\n    .market-sidebar {\r\n      width: 100%;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n\r\n<!-- ==========================================\r\n     3. L\u00d3GICA JAVASCRIPT (CAPTURA B\u00daSQUEDA URL)\r\n     ========================================== -->\r\n<script>\r\n  \/\/ Detecta el par\u00e1metro de b\u00fasqueda enviada desde el buscador (ej: ?search=reggaeton)\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    const urlParams = new URLSearchParams(window.location.search);\r\n    const searchQuery = urlParams.get('search');\r\n    \r\n    if (searchQuery) {\r\n      document.getElementById('search-text').innerText = searchQuery;\r\n    } else {\r\n      document.getElementById('search-tag-display').style.display = 'none';\r\n    }\r\n  });\r\n\r\n  function clearSearch() {\r\n    document.getElementById('search-tag-display').style.display = 'none';\r\n    \/\/ Limpia el filtro de la URL sin recargar\r\n    window.history.replaceState({}, document.title, window.location.pathname);\r\n  }\r\n\r\n  function applyFilter(filterName) {\r\n    const tagDisplay = document.getElementById('search-tag-display');\r\n    tagDisplay.style.display = 'inline-flex';\r\n    document.getElementById('search-text').innerText = filterName;\r\n  }\r\n<\/script>\t\t\t\t<\/div>\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":"<p>\u2630 Men\u00fa Navegaci\u00f3n &times; Inicio M\u00fasica Videos Beats Sobre m\u00ed Contacto Categor\u00edas \ud83c\udfb5 Tracks \ud83c\udf99\ufe0f Artistas \/ Beats \ud83d\udcbf Playlists Filtros \ud83c\udfa7 G\u00e9nero Reggaet\u00f3n Trap Rap R&#038;B \/ Neo-Soul \ud83e\udd41 Tempo \/ BPM Slow (80 &#8211; 100 BPM) Mid (100 &#8211; 130 BPM) Fast (130+ BPM) \ud83c\udff7\ufe0f Precio \/ Licencia Licencia B\u00e1sica ($25) Licencia Premium &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/d3fa.opik.net\/?page_id=548\"> <span class=\"screen-reader-text\">BEATS<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-548","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/pages\/548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=548"}],"version-history":[{"count":30,"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/pages\/548\/revisions"}],"predecessor-version":[{"id":704,"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/pages\/548\/revisions\/704"}],"wp:attachment":[{"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}