{"id":189,"date":"2025-04-22T01:17:44","date_gmt":"2025-04-22T01:17:44","guid":{"rendered":"https:\/\/creaxme.com.ar\/10rs\/?page_id=189"},"modified":"2026-02-16T03:53:23","modified_gmt":"2026-02-16T03:53:23","slug":"atp","status":"publish","type":"page","link":"https:\/\/creaxme.com.ar\/10rs\/atp\/","title":{"rendered":"ATP"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"189\" class=\"elementor elementor-189\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cdd9f7a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"cdd9f7a\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b7459f0\" data-id=\"b7459f0\" data-element_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-e4e4053 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"e4e4053\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">ATP<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ce37af elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"2ce37af\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">APTO PARA TODO P\u00daBLICO<\/h2>\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<div class=\"elementor-element elementor-element-fb927d5 e-flex e-con-boxed e-con e-parent\" data-id=\"fb927d5\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3180ff8 elementor-widget elementor-widget-heading\" data-id=\"3180ff8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u00bfEST\u00c1S READY?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89a7a6d elementor-widget elementor-widget-heading\" data-id=\"89a7a6d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Eleg\u00ed una de las tem\u00e1ticas para responder ! <p><i>(VERSI\u00d3N DEMO)<\/i><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-89941db e-grid e-con-boxed e-con e-child\" data-id=\"89941db\" data-element_type=\"container\" data-settings=\"{&quot;animation_mobile&quot;:&quot;fadeInRight&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-571cb46 elementor-widget elementor-widget-html\" data-id=\"571cb46\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Trivia Interactiva<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body {\r\n      font-family: 'Montserrat', sans-serif !important;\r\n      background: #111;\r\n      color: #fff;\r\n      margin: 0;\r\n      padding: 2rem;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 100vh;\r\n      gap: 2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .card {\r\n      background: #f4f4f4;\r\n      color: #333;\r\n      border-radius: 12px;\r\n      padding: 2rem;\r\n      text-align: center;\r\n      width: 250px;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .card i {\r\n      font-size: 40px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card h2 {\r\n      margin: 0 0 10px;\r\n      font-size: 24px;\r\n    }\r\n\r\n    .btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      font-size: 16px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-family: Montserrat;\r\n    }\r\n\r\n    .modal-overlay {\r\n      display: none;\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.8);\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n    }\r\n\r\n    .modal {\r\n      background: #fff;\r\n      color: #000;\r\n      width: 90%;\r\n      max-width: 500px !important;\r\n      padding: 2rem;\r\n      border-radius: 10px;\r\n      position: relative;\r\n      text-align: left;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .close-btn {\r\n      color: #800020 !important;\r\n      position: absolute;\r\n      top: 10px;\r\n      right: 15px;\r\n      font-size: 1.5rem;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .modal .pregunta {\r\n      margin-top: 2rem;\r\n      font-weight: bold;\r\n    }\r\n\r\n    .opciones p {\r\n      margin: 10px 0;\r\n    }\r\n\r\n    .opciones span {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .mostrar-btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      padding: 10px 18px;\r\n      font-size: 1rem;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 1.5rem;\r\n      cursor: pointer;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .respuesta-img {\r\n      margin-top: 20px;\r\n      max-width: 100%;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .modal h3 {\r\n      font-size: 1.2rem;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- Puedes duplicar estas tarjetas cambiando el tema -->\r\n  <div class=\"card\">\r\n   <i class=\"fas fa-running\"><\/i>\r\n    <h2>Deportes<\/h2>\r\n    <button class=\"btn\" onclick=\"abrirTrivia('deportes')\">Ver pregunta<\/button>\r\n  <\/div>\r\n\r\n  <!-- Modal gen\u00e9rico -->\r\n  <div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal\">\r\n      <button class=\"close-btn\" onclick=\"cerrarModal()\">\u00d7<\/button>\r\n      <h3>\u2753 Pregunta:<\/h3>\r\n      <p id=\"preguntaTexto\" class=\"pregunta\"><\/p>\r\n      <div id=\"opcionesContenedor\" class=\"opciones\"><\/div>\r\n      <div id=\"respuestaContenedor\"><\/div>\r\n      <button id=\"mostrarBtn\" class=\"mostrar-btn\" onclick=\"mostrarRespuesta()\">Mostrar Respuesta<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const imagenesRespuesta = {\r\n      A: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaA.jpg\",\r\n      B: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaB.jpg\",\r\n      C: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaC.jpg\"\r\n    };\r\n\r\n    let temaActual = null;\r\n    let preguntas = {};\r\n    let preguntaActual = null;\r\n    let preguntasMostradas = JSON.parse(localStorage.getItem(\"preguntasMostradas\")) || {};\r\n\r\n    \/\/ Limpiar las preguntas viejas (m\u00e1s de 1 hora)\r\n    for (let tema in preguntasMostradas) {\r\n      preguntasMostradas[tema] = preguntasMostradas[tema].filter(p => Date.now() - p.timestamp < 60 * 60 * 1000);\r\n    }\r\n\r\n    \/\/ Cargar preguntas desde archivo JSON seg\u00fan el tema\r\n    async function cargarPreguntas(tema) {\r\n      if (preguntas[tema]) return preguntas[tema]; \/\/ si ya est\u00e1 cargado, no volver a pedir\r\n      try {\r\n        const respuesta = await fetch(`https:\/\/creaxme.com.ar\/10rs\/preguntas\/preguntas_${tema}.json`);\r\n        if (!respuesta.ok) throw new Error(\"Error al cargar el archivo\");\r\n        const data = await respuesta.json();\r\n        preguntas[tema] = data;\r\n        return data;\r\n      } catch (error) {\r\n        console.error(\"Error cargando preguntas:\", error);\r\n        alert(\"No se pudieron cargar las preguntas del tema \" + tema);\r\n        return [];\r\n      }\r\n    }\r\n\r\n    async function abrirTrivia(tema) {\r\n      temaActual = tema;\r\n      const listaPreguntas = await cargarPreguntas(tema);\r\n      if (listaPreguntas.length === 0) return;\r\n\r\n      if (!preguntasMostradas[tema]) preguntasMostradas[tema] = [];\r\n\r\n      const indicesUsados = preguntasMostradas[tema].map(p => p.index);\r\n      const disponibles = listaPreguntas.map((_, i) => i).filter(i => !indicesUsados.includes(i));\r\n\r\n      if (disponibles.length === 0) {\r\n        alert(\"Ya viste todas las preguntas de este tema en la \u00faltima hora. Esper\u00e1 un rato \ud83d\ude09\");\r\n        return;\r\n      }\r\n\r\n      const index = disponibles[Math.floor(Math.random() * disponibles.length)];\r\n      preguntaActual = listaPreguntas[index];\r\n      preguntaActual.index = index;\r\n\r\n      document.getElementById(\"preguntaTexto\").textContent = preguntaActual.pregunta;\r\n      const opcionesContenedor = document.getElementById(\"opcionesContenedor\");\r\n      opcionesContenedor.innerHTML = \"\";\r\n\r\n      for (let letra in preguntaActual.opciones) {\r\n        opcionesContenedor.innerHTML += `<p><span>${letra}.<\/span> ${preguntaActual.opciones[letra]}<\/p>`;\r\n      }\r\n\r\n      document.getElementById(\"respuestaContenedor\").innerHTML = \"\";\r\n      document.getElementById(\"mostrarBtn\").style.display = \"block\";\r\n      document.getElementById(\"modalOverlay\").style.display = \"flex\";\r\n    }\r\n\r\n    function mostrarRespuesta() {\r\n      if (!preguntaActual) return;\r\n      const contenedor = document.getElementById(\"respuestaContenedor\");\r\n      contenedor.innerHTML = `<img decoding=\"async\" src=\"${imagenesRespuesta[preguntaActual.respuesta]}\" alt=\"Respuesta\" class=\"respuesta-img\">`;\r\n      document.getElementById(\"mostrarBtn\").style.display = \"none\";\r\n\r\n      preguntasMostradas[temaActual].push({ index: preguntaActual.index, timestamp: Date.now() });\r\n      localStorage.setItem(\"preguntasMostradas\", JSON.stringify(preguntasMostradas));\r\n    }\r\n\r\n    function cerrarModal() {\r\n      document.getElementById(\"modalOverlay\").style.display = \"none\";\r\n    }\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea89305 elementor-widget elementor-widget-html\" data-id=\"ea89305\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Trivia Interactiva<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body {\r\n      font-family: 'Montserrat', sans-serif !important;\r\n      background: #111;\r\n      color: #fff;\r\n      margin: 0;\r\n      padding: 2rem;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 100vh;\r\n      gap: 2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .card {\r\n      background: #f4f4f4;\r\n      color: #333;\r\n      border-radius: 12px;\r\n      padding: 2rem;\r\n      text-align: center;\r\n      width: 250px;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .card i {\r\n      font-size: 40px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card h2 {\r\n      margin: 0 0 10px;\r\n      font-size: 24px;\r\n    }\r\n\r\n    .btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      font-size: 16px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-family: Montserrat;\r\n    }\r\n\r\n    .modal-overlay {\r\n      display: none;\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.8);\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n    }\r\n\r\n    .modal {\r\n      background: #fff;\r\n      color: #000;\r\n      width: 90%;\r\n      max-width: 500px !important;\r\n      padding: 2rem;\r\n      border-radius: 10px;\r\n      position: relative;\r\n      text-align: left;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .close-btn {\r\n      color: #800020 !important;\r\n      position: absolute;\r\n      top: 10px;\r\n      right: 15px;\r\n      font-size: 1.5rem;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .modal .pregunta {\r\n      margin-top: 2rem;\r\n      font-weight: bold;\r\n    }\r\n\r\n    .opciones p {\r\n      margin: 10px 0;\r\n    }\r\n\r\n    .opciones span {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .mostrar-btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      padding: 10px 18px;\r\n      font-size: 1rem;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 1.5rem;\r\n      cursor: pointer;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .respuesta-img {\r\n      margin-top: 20px;\r\n      max-width: 100%;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .modal h3 {\r\n      font-size: 1.2rem;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- Puedes duplicar estas tarjetas cambiando el tema -->\r\n  <div class=\"card\">\r\n   <i class=\"fas fa-landmark\"><\/i>\r\n    <h2>Historia<\/h2>\r\n    <button class=\"btn\" onclick=\"abrirTrivia('historia')\">Ver pregunta<\/button>\r\n  <\/div>\r\n\r\n  <!-- Modal gen\u00e9rico -->\r\n  <div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal\">\r\n      <button class=\"close-btn\" onclick=\"cerrarModal()\">\u00d7<\/button>\r\n      <h3>\u2753 Pregunta:<\/h3>\r\n      <p id=\"preguntaTexto\" class=\"pregunta\"><\/p>\r\n      <div id=\"opcionesContenedor\" class=\"opciones\"><\/div>\r\n      <div id=\"respuestaContenedor\"><\/div>\r\n      <button id=\"mostrarBtn\" class=\"mostrar-btn\" onclick=\"mostrarRespuesta()\">Mostrar Respuesta<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const imagenesRespuesta = {\r\n      A: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaA.jpg\",\r\n      B: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaB.jpg\",\r\n      C: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaC.jpg\"\r\n    };\r\n\r\n    let temaActual = null;\r\n    let preguntas = {};\r\n    let preguntaActual = null;\r\n    let preguntasMostradas = JSON.parse(localStorage.getItem(\"preguntasMostradas\")) || {};\r\n\r\n    \/\/ Limpiar las preguntas viejas (m\u00e1s de 1 hora)\r\n    for (let tema in preguntasMostradas) {\r\n      preguntasMostradas[tema] = preguntasMostradas[tema].filter(p => Date.now() - p.timestamp < 60 * 60 * 1000);\r\n    }\r\n\r\n    \/\/ Cargar preguntas desde archivo JSON seg\u00fan el tema\r\n    async function cargarPreguntas(tema) {\r\n      if (preguntas[tema]) return preguntas[tema]; \/\/ si ya est\u00e1 cargado, no volver a pedir\r\n      try {\r\n        const respuesta = await fetch(`https:\/\/creaxme.com.ar\/10rs\/preguntas\/preguntas_${tema}.json`);\r\n        if (!respuesta.ok) throw new Error(\"Error al cargar el archivo\");\r\n        const data = await respuesta.json();\r\n        preguntas[tema] = data;\r\n        return data;\r\n      } catch (error) {\r\n        console.error(\"Error cargando preguntas:\", error);\r\n        alert(\"No se pudieron cargar las preguntas del tema \" + tema);\r\n        return [];\r\n      }\r\n    }\r\n\r\n    async function abrirTrivia(tema) {\r\n      temaActual = tema;\r\n      const listaPreguntas = await cargarPreguntas(tema);\r\n      if (listaPreguntas.length === 0) return;\r\n\r\n      if (!preguntasMostradas[tema]) preguntasMostradas[tema] = [];\r\n\r\n      const indicesUsados = preguntasMostradas[tema].map(p => p.index);\r\n      const disponibles = listaPreguntas.map((_, i) => i).filter(i => !indicesUsados.includes(i));\r\n\r\n      if (disponibles.length === 0) {\r\n        alert(\"Ya viste todas las preguntas de este tema en la \u00faltima hora. Esper\u00e1 un rato \ud83d\ude09\");\r\n        return;\r\n      }\r\n\r\n      const index = disponibles[Math.floor(Math.random() * disponibles.length)];\r\n      preguntaActual = listaPreguntas[index];\r\n      preguntaActual.index = index;\r\n\r\n      document.getElementById(\"preguntaTexto\").textContent = preguntaActual.pregunta;\r\n      const opcionesContenedor = document.getElementById(\"opcionesContenedor\");\r\n      opcionesContenedor.innerHTML = \"\";\r\n\r\n      for (let letra in preguntaActual.opciones) {\r\n        opcionesContenedor.innerHTML += `<p><span>${letra}.<\/span> ${preguntaActual.opciones[letra]}<\/p>`;\r\n      }\r\n\r\n      document.getElementById(\"respuestaContenedor\").innerHTML = \"\";\r\n      document.getElementById(\"mostrarBtn\").style.display = \"block\";\r\n      document.getElementById(\"modalOverlay\").style.display = \"flex\";\r\n    }\r\n\r\n    function mostrarRespuesta() {\r\n      if (!preguntaActual) return;\r\n      const contenedor = document.getElementById(\"respuestaContenedor\");\r\n      contenedor.innerHTML = `<img decoding=\"async\" src=\"${imagenesRespuesta[preguntaActual.respuesta]}\" alt=\"Respuesta\" class=\"respuesta-img\">`;\r\n      document.getElementById(\"mostrarBtn\").style.display = \"none\";\r\n\r\n      preguntasMostradas[temaActual].push({ index: preguntaActual.index, timestamp: Date.now() });\r\n      localStorage.setItem(\"preguntasMostradas\", JSON.stringify(preguntasMostradas));\r\n    }\r\n\r\n    function cerrarModal() {\r\n      document.getElementById(\"modalOverlay\").style.display = \"none\";\r\n    }\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed756d9 elementor-widget elementor-widget-html\" data-id=\"ed756d9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Trivia Interactiva<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body {\r\n      font-family: 'Montserrat', sans-serif !important;\r\n      background: #111;\r\n      color: #fff;\r\n      margin: 0;\r\n      padding: 2rem;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 100vh;\r\n      gap: 2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .card {\r\n      background: #f4f4f4;\r\n      color: #333;\r\n      border-radius: 12px;\r\n      padding: 2rem;\r\n      text-align: center;\r\n      width: 250px;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .card i {\r\n      font-size: 40px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card h2 {\r\n      margin: 0 0 10px;\r\n      font-size: 24px;\r\n    }\r\n\r\n    .btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      font-size: 16px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-family: Montserrat;\r\n    }\r\n\r\n    .modal-overlay {\r\n      display: none;\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.8);\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n    }\r\n\r\n    .modal {\r\n      background: #fff;\r\n      color: #000;\r\n      width: 90%;\r\n      max-width: 500px !important;\r\n      padding: 2rem;\r\n      border-radius: 10px;\r\n      position: relative;\r\n      text-align: left;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .close-btn {\r\n      color: #800020 !important;\r\n      position: absolute;\r\n      top: 10px;\r\n      right: 15px;\r\n      font-size: 1.5rem;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .modal .pregunta {\r\n      margin-top: 2rem;\r\n      font-weight: bold;\r\n    }\r\n\r\n    .opciones p {\r\n      margin: 10px 0;\r\n    }\r\n\r\n    .opciones span {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .mostrar-btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      padding: 10px 18px;\r\n      font-size: 1rem;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 1.5rem;\r\n      cursor: pointer;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .respuesta-img {\r\n      margin-top: 20px;\r\n      max-width: 100%;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .modal h3 {\r\n      font-size: 1.2rem;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- Puedes duplicar estas tarjetas cambiando el tema -->\r\n  <div class=\"card\">\r\n   <i class=\"fas fa-flask\"><\/i>\r\n    <h2>Ciencia<\/h2>\r\n    <button class=\"btn\" onclick=\"abrirTrivia('ciencia')\">Ver pregunta<\/button>\r\n  <\/div>\r\n\r\n  <!-- Modal gen\u00e9rico -->\r\n  <div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal\">\r\n      <button class=\"close-btn\" onclick=\"cerrarModal()\">\u00d7<\/button>\r\n      <h3>\u2753 Pregunta:<\/h3>\r\n      <p id=\"preguntaTexto\" class=\"pregunta\"><\/p>\r\n      <div id=\"opcionesContenedor\" class=\"opciones\"><\/div>\r\n      <div id=\"respuestaContenedor\"><\/div>\r\n      <button id=\"mostrarBtn\" class=\"mostrar-btn\" onclick=\"mostrarRespuesta()\">Mostrar Respuesta<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const imagenesRespuesta = {\r\n      A: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaA.jpg\",\r\n      B: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaB.jpg\",\r\n      C: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaC.jpg\"\r\n    };\r\n\r\n    let temaActual = null;\r\n    let preguntas = {};\r\n    let preguntaActual = null;\r\n    let preguntasMostradas = JSON.parse(localStorage.getItem(\"preguntasMostradas\")) || {};\r\n\r\n    \/\/ Limpiar las preguntas viejas (m\u00e1s de 1 hora)\r\n    for (let tema in preguntasMostradas) {\r\n      preguntasMostradas[tema] = preguntasMostradas[tema].filter(p => Date.now() - p.timestamp < 60 * 60 * 1000);\r\n    }\r\n\r\n    \/\/ Cargar preguntas desde archivo JSON seg\u00fan el tema\r\n    async function cargarPreguntas(tema) {\r\n      if (preguntas[tema]) return preguntas[tema]; \/\/ si ya est\u00e1 cargado, no volver a pedir\r\n      try {\r\n        const respuesta = await fetch(`https:\/\/creaxme.com.ar\/10rs\/preguntas\/preguntas_${tema}.json`);\r\n        if (!respuesta.ok) throw new Error(\"Error al cargar el archivo\");\r\n        const data = await respuesta.json();\r\n        preguntas[tema] = data;\r\n        return data;\r\n      } catch (error) {\r\n        console.error(\"Error cargando preguntas:\", error);\r\n        alert(\"No se pudieron cargar las preguntas del tema \" + tema);\r\n        return [];\r\n      }\r\n    }\r\n\r\n    async function abrirTrivia(tema) {\r\n      temaActual = tema;\r\n      const listaPreguntas = await cargarPreguntas(tema);\r\n      if (listaPreguntas.length === 0) return;\r\n\r\n      if (!preguntasMostradas[tema]) preguntasMostradas[tema] = [];\r\n\r\n      const indicesUsados = preguntasMostradas[tema].map(p => p.index);\r\n      const disponibles = listaPreguntas.map((_, i) => i).filter(i => !indicesUsados.includes(i));\r\n\r\n      if (disponibles.length === 0) {\r\n        alert(\"Ya viste todas las preguntas de este tema en la \u00faltima hora. Esper\u00e1 un rato \ud83d\ude09\");\r\n        return;\r\n      }\r\n\r\n      const index = disponibles[Math.floor(Math.random() * disponibles.length)];\r\n      preguntaActual = listaPreguntas[index];\r\n      preguntaActual.index = index;\r\n\r\n      document.getElementById(\"preguntaTexto\").textContent = preguntaActual.pregunta;\r\n      const opcionesContenedor = document.getElementById(\"opcionesContenedor\");\r\n      opcionesContenedor.innerHTML = \"\";\r\n\r\n      for (let letra in preguntaActual.opciones) {\r\n        opcionesContenedor.innerHTML += `<p><span>${letra}.<\/span> ${preguntaActual.opciones[letra]}<\/p>`;\r\n      }\r\n\r\n      document.getElementById(\"respuestaContenedor\").innerHTML = \"\";\r\n      document.getElementById(\"mostrarBtn\").style.display = \"block\";\r\n      document.getElementById(\"modalOverlay\").style.display = \"flex\";\r\n    }\r\n\r\n    function mostrarRespuesta() {\r\n      if (!preguntaActual) return;\r\n      const contenedor = document.getElementById(\"respuestaContenedor\");\r\n      contenedor.innerHTML = `<img decoding=\"async\" src=\"${imagenesRespuesta[preguntaActual.respuesta]}\" alt=\"Respuesta\" class=\"respuesta-img\">`;\r\n      document.getElementById(\"mostrarBtn\").style.display = \"none\";\r\n\r\n      preguntasMostradas[temaActual].push({ index: preguntaActual.index, timestamp: Date.now() });\r\n      localStorage.setItem(\"preguntasMostradas\", JSON.stringify(preguntasMostradas));\r\n    }\r\n\r\n    function cerrarModal() {\r\n      document.getElementById(\"modalOverlay\").style.display = \"none\";\r\n    }\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-799acb2 elementor-widget elementor-widget-html\" data-id=\"799acb2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Trivia Interactiva<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body {\r\n      font-family: 'Montserrat', sans-serif !important;\r\n      background: #111;\r\n      color: #fff;\r\n      margin: 0;\r\n      padding: 2rem;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 100vh;\r\n      gap: 2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .card {\r\n      background: #f4f4f4;\r\n      color: #333;\r\n      border-radius: 12px;\r\n      padding: 2rem;\r\n      text-align: center;\r\n      width: 250px;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .card i {\r\n      font-size: 40px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card h2 {\r\n      margin: 0 0 10px;\r\n      font-size: 24px;\r\n    }\r\n\r\n    .btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      font-size: 16px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-family: Montserrat;\r\n    }\r\n\r\n    .modal-overlay {\r\n      display: none;\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.8);\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n    }\r\n\r\n    .modal {\r\n      background: #fff;\r\n      color: #000;\r\n      width: 90%;\r\n      max-width: 500px !important;\r\n      padding: 2rem;\r\n      border-radius: 10px;\r\n      position: relative;\r\n      text-align: left;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .close-btn {\r\n      color: #800020 !important;\r\n      position: absolute;\r\n      top: 10px;\r\n      right: 15px;\r\n      font-size: 1.5rem;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .modal .pregunta {\r\n      margin-top: 2rem;\r\n      font-weight: bold;\r\n    }\r\n\r\n    .opciones p {\r\n      margin: 10px 0;\r\n    }\r\n\r\n    .opciones span {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .mostrar-btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      padding: 10px 18px;\r\n      font-size: 1rem;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 1.5rem;\r\n      cursor: pointer;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .respuesta-img {\r\n      margin-top: 20px;\r\n      max-width: 100%;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .modal h3 {\r\n      font-size: 1.2rem;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- Puedes duplicar estas tarjetas cambiando el tema -->\r\n  <div class=\"card\">\r\n   <i class=\"fas fa-square-root-alt\"><\/i>\r\n    <h2>Matematica<\/h2>\r\n    <button class=\"btn\" onclick=\"abrirTrivia('matematica')\">Ver pregunta<\/button>\r\n  <\/div>\r\n\r\n  <!-- Modal gen\u00e9rico -->\r\n  <div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal\">\r\n      <button class=\"close-btn\" onclick=\"cerrarModal()\">\u00d7<\/button>\r\n      <h3>\u2753 Pregunta:<\/h3>\r\n      <p id=\"preguntaTexto\" class=\"pregunta\"><\/p>\r\n      <div id=\"opcionesContenedor\" class=\"opciones\"><\/div>\r\n      <div id=\"respuestaContenedor\"><\/div>\r\n      <button id=\"mostrarBtn\" class=\"mostrar-btn\" onclick=\"mostrarRespuesta()\">Mostrar Respuesta<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const imagenesRespuesta = {\r\n      A: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaA.jpg\",\r\n      B: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaB.jpg\",\r\n      C: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaC.jpg\"\r\n    };\r\n\r\n    let temaActual = null;\r\n    let preguntas = {};\r\n    let preguntaActual = null;\r\n    let preguntasMostradas = JSON.parse(localStorage.getItem(\"preguntasMostradas\")) || {};\r\n\r\n    \/\/ Limpiar las preguntas viejas (m\u00e1s de 1 hora)\r\n    for (let tema in preguntasMostradas) {\r\n      preguntasMostradas[tema] = preguntasMostradas[tema].filter(p => Date.now() - p.timestamp < 60 * 60 * 1000);\r\n    }\r\n\r\n    \/\/ Cargar preguntas desde archivo JSON seg\u00fan el tema\r\n    async function cargarPreguntas(tema) {\r\n      if (preguntas[tema]) return preguntas[tema]; \/\/ si ya est\u00e1 cargado, no volver a pedir\r\n      try {\r\n        const respuesta = await fetch(`https:\/\/creaxme.com.ar\/10rs\/preguntas\/preguntas_${tema}.json`);\r\n        if (!respuesta.ok) throw new Error(\"Error al cargar el archivo\");\r\n        const data = await respuesta.json();\r\n        preguntas[tema] = data;\r\n        return data;\r\n      } catch (error) {\r\n        console.error(\"Error cargando preguntas:\", error);\r\n        alert(\"No se pudieron cargar las preguntas del tema \" + tema);\r\n        return [];\r\n      }\r\n    }\r\n\r\n    async function abrirTrivia(tema) {\r\n      temaActual = tema;\r\n      const listaPreguntas = await cargarPreguntas(tema);\r\n      if (listaPreguntas.length === 0) return;\r\n\r\n      if (!preguntasMostradas[tema]) preguntasMostradas[tema] = [];\r\n\r\n      const indicesUsados = preguntasMostradas[tema].map(p => p.index);\r\n      const disponibles = listaPreguntas.map((_, i) => i).filter(i => !indicesUsados.includes(i));\r\n\r\n      if (disponibles.length === 0) {\r\n        alert(\"Ya viste todas las preguntas de este tema en la \u00faltima hora. Esper\u00e1 un rato \ud83d\ude09\");\r\n        return;\r\n      }\r\n\r\n      const index = disponibles[Math.floor(Math.random() * disponibles.length)];\r\n      preguntaActual = listaPreguntas[index];\r\n      preguntaActual.index = index;\r\n\r\n      document.getElementById(\"preguntaTexto\").textContent = preguntaActual.pregunta;\r\n      const opcionesContenedor = document.getElementById(\"opcionesContenedor\");\r\n      opcionesContenedor.innerHTML = \"\";\r\n\r\n      for (let letra in preguntaActual.opciones) {\r\n        opcionesContenedor.innerHTML += `<p><span>${letra}.<\/span> ${preguntaActual.opciones[letra]}<\/p>`;\r\n      }\r\n\r\n      document.getElementById(\"respuestaContenedor\").innerHTML = \"\";\r\n      document.getElementById(\"mostrarBtn\").style.display = \"block\";\r\n      document.getElementById(\"modalOverlay\").style.display = \"flex\";\r\n    }\r\n\r\n    function mostrarRespuesta() {\r\n      if (!preguntaActual) return;\r\n      const contenedor = document.getElementById(\"respuestaContenedor\");\r\n      contenedor.innerHTML = `<img decoding=\"async\" src=\"${imagenesRespuesta[preguntaActual.respuesta]}\" alt=\"Respuesta\" class=\"respuesta-img\">`;\r\n      document.getElementById(\"mostrarBtn\").style.display = \"none\";\r\n\r\n      preguntasMostradas[temaActual].push({ index: preguntaActual.index, timestamp: Date.now() });\r\n      localStorage.setItem(\"preguntasMostradas\", JSON.stringify(preguntasMostradas));\r\n    }\r\n\r\n    function cerrarModal() {\r\n      document.getElementById(\"modalOverlay\").style.display = \"none\";\r\n    }\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ca1d29 elementor-widget elementor-widget-html\" data-id=\"8ca1d29\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Trivia Interactiva<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body {\r\n      font-family: 'Montserrat', sans-serif !important;\r\n      background: #111;\r\n      color: #fff;\r\n      margin: 0;\r\n      padding: 2rem;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 100vh;\r\n      gap: 2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .card {\r\n      background: #f4f4f4;\r\n      color: #333;\r\n      border-radius: 12px;\r\n      padding: 2rem;\r\n      text-align: center;\r\n      width: 250px;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .card i {\r\n      font-size: 40px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card h2 {\r\n      margin: 0 0 10px;\r\n      font-size: 24px;\r\n    }\r\n\r\n    .btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      font-size: 16px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-family: Montserrat;\r\n    }\r\n\r\n    .modal-overlay {\r\n      display: none;\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.8);\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n    }\r\n\r\n    .modal {\r\n      background: #fff;\r\n      color: #000;\r\n      width: 90%;\r\n      max-width: 500px !important;\r\n      padding: 2rem;\r\n      border-radius: 10px;\r\n      position: relative;\r\n      text-align: left;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .close-btn {\r\n      color: #800020 !important;\r\n      position: absolute;\r\n      top: 10px;\r\n      right: 15px;\r\n      font-size: 1.5rem;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .modal .pregunta {\r\n      margin-top: 2rem;\r\n      font-weight: bold;\r\n    }\r\n\r\n    .opciones p {\r\n      margin: 10px 0;\r\n    }\r\n\r\n    .opciones span {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .mostrar-btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      padding: 10px 18px;\r\n      font-size: 1rem;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 1.5rem;\r\n      cursor: pointer;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .respuesta-img {\r\n      margin-top: 20px;\r\n      max-width: 100%;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .modal h3 {\r\n      font-size: 1.2rem;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- Puedes duplicar estas tarjetas cambiando el tema -->\r\n  <div class=\"card\">\r\n   <i class=\"fas fa-film\"><\/i>\r\n    <h2>Cine<\/h2>\r\n    <button class=\"btn\" onclick=\"abrirTrivia('cine')\">Ver pregunta<\/button>\r\n  <\/div>\r\n\r\n  <!-- Modal gen\u00e9rico -->\r\n  <div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal\">\r\n      <button class=\"close-btn\" onclick=\"cerrarModal()\">\u00d7<\/button>\r\n      <h3>\u2753 Pregunta:<\/h3>\r\n      <p id=\"preguntaTexto\" class=\"pregunta\"><\/p>\r\n      <div id=\"opcionesContenedor\" class=\"opciones\"><\/div>\r\n      <div id=\"respuestaContenedor\"><\/div>\r\n      <button id=\"mostrarBtn\" class=\"mostrar-btn\" onclick=\"mostrarRespuesta()\">Mostrar Respuesta<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const imagenesRespuesta = {\r\n      A: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaA.jpg\",\r\n      B: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaB.jpg\",\r\n      C: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaC.jpg\"\r\n    };\r\n\r\n    let temaActual = null;\r\n    let preguntas = {};\r\n    let preguntaActual = null;\r\n    let preguntasMostradas = JSON.parse(localStorage.getItem(\"preguntasMostradas\")) || {};\r\n\r\n    \/\/ Limpiar las preguntas viejas (m\u00e1s de 1 hora)\r\n    for (let tema in preguntasMostradas) {\r\n      preguntasMostradas[tema] = preguntasMostradas[tema].filter(p => Date.now() - p.timestamp < 60 * 60 * 1000);\r\n    }\r\n\r\n    \/\/ Cargar preguntas desde archivo JSON seg\u00fan el tema\r\n    async function cargarPreguntas(tema) {\r\n      if (preguntas[tema]) return preguntas[tema]; \/\/ si ya est\u00e1 cargado, no volver a pedir\r\n      try {\r\n        const respuesta = await fetch(`https:\/\/creaxme.com.ar\/10rs\/preguntas\/preguntas_${tema}.json`);\r\n        if (!respuesta.ok) throw new Error(\"Error al cargar el archivo\");\r\n        const data = await respuesta.json();\r\n        preguntas[tema] = data;\r\n        return data;\r\n      } catch (error) {\r\n        console.error(\"Error cargando preguntas:\", error);\r\n        alert(\"No se pudieron cargar las preguntas del tema \" + tema);\r\n        return [];\r\n      }\r\n    }\r\n\r\n    async function abrirTrivia(tema) {\r\n      temaActual = tema;\r\n      const listaPreguntas = await cargarPreguntas(tema);\r\n      if (listaPreguntas.length === 0) return;\r\n\r\n      if (!preguntasMostradas[tema]) preguntasMostradas[tema] = [];\r\n\r\n      const indicesUsados = preguntasMostradas[tema].map(p => p.index);\r\n      const disponibles = listaPreguntas.map((_, i) => i).filter(i => !indicesUsados.includes(i));\r\n\r\n      if (disponibles.length === 0) {\r\n        alert(\"Ya viste todas las preguntas de este tema en la \u00faltima hora. Esper\u00e1 un rato \ud83d\ude09\");\r\n        return;\r\n      }\r\n\r\n      const index = disponibles[Math.floor(Math.random() * disponibles.length)];\r\n      preguntaActual = listaPreguntas[index];\r\n      preguntaActual.index = index;\r\n\r\n      document.getElementById(\"preguntaTexto\").textContent = preguntaActual.pregunta;\r\n      const opcionesContenedor = document.getElementById(\"opcionesContenedor\");\r\n      opcionesContenedor.innerHTML = \"\";\r\n\r\n      for (let letra in preguntaActual.opciones) {\r\n        opcionesContenedor.innerHTML += `<p><span>${letra}.<\/span> ${preguntaActual.opciones[letra]}<\/p>`;\r\n      }\r\n\r\n      document.getElementById(\"respuestaContenedor\").innerHTML = \"\";\r\n      document.getElementById(\"mostrarBtn\").style.display = \"block\";\r\n      document.getElementById(\"modalOverlay\").style.display = \"flex\";\r\n    }\r\n\r\n    function mostrarRespuesta() {\r\n      if (!preguntaActual) return;\r\n      const contenedor = document.getElementById(\"respuestaContenedor\");\r\n      contenedor.innerHTML = `<img decoding=\"async\" src=\"${imagenesRespuesta[preguntaActual.respuesta]}\" alt=\"Respuesta\" class=\"respuesta-img\">`;\r\n      document.getElementById(\"mostrarBtn\").style.display = \"none\";\r\n\r\n      preguntasMostradas[temaActual].push({ index: preguntaActual.index, timestamp: Date.now() });\r\n      localStorage.setItem(\"preguntasMostradas\", JSON.stringify(preguntasMostradas));\r\n    }\r\n\r\n    function cerrarModal() {\r\n      document.getElementById(\"modalOverlay\").style.display = \"none\";\r\n    }\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d10d82 elementor-widget elementor-widget-html\" data-id=\"3d10d82\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Trivia Interactiva<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body {\r\n      font-family: 'Montserrat', sans-serif !important;\r\n      background: #111;\r\n      color: #fff;\r\n      margin: 0;\r\n      padding: 2rem;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 100vh;\r\n      gap: 2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .card {\r\n      background: #f4f4f4;\r\n      color: #333;\r\n      border-radius: 12px;\r\n      padding: 2rem;\r\n      text-align: center;\r\n      width: 250px;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .card i {\r\n      font-size: 40px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card h2 {\r\n      margin: 0 0 10px;\r\n      font-size: 24px;\r\n    }\r\n\r\n    .btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      font-size: 16px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-family: Montserrat;\r\n    }\r\n\r\n    .modal-overlay {\r\n      display: none;\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.8);\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n    }\r\n\r\n    .modal {\r\n      background: #fff;\r\n      color: #000;\r\n      width: 90%;\r\n      max-width: 500px !important;\r\n      padding: 2rem;\r\n      border-radius: 10px;\r\n      position: relative;\r\n      text-align: left;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .close-btn {\r\n      color: #800020 !important;\r\n      position: absolute;\r\n      top: 10px;\r\n      right: 15px;\r\n      font-size: 1.5rem;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .modal .pregunta {\r\n      margin-top: 2rem;\r\n      font-weight: bold;\r\n    }\r\n\r\n    .opciones p {\r\n      margin: 10px 0;\r\n    }\r\n\r\n    .opciones span {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .mostrar-btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      padding: 10px 18px;\r\n      font-size: 1rem;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 1.5rem;\r\n      cursor: pointer;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .respuesta-img {\r\n      margin-top: 20px;\r\n      max-width: 100%;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .modal h3 {\r\n      font-size: 1.2rem;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- Puedes duplicar estas tarjetas cambiando el tema -->\r\n  <div class=\"card\">\r\n   <i class=\"fas fa-music\"><\/i>\r\n    <h2>Musica<\/h2>\r\n    <button class=\"btn\" onclick=\"abrirTrivia('musica')\">Ver pregunta<\/button>\r\n  <\/div>\r\n\r\n  <!-- Modal gen\u00e9rico -->\r\n  <div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal\">\r\n      <button class=\"close-btn\" onclick=\"cerrarModal()\">\u00d7<\/button>\r\n      <h3>\u2753 Pregunta:<\/h3>\r\n      <p id=\"preguntaTexto\" class=\"pregunta\"><\/p>\r\n      <div id=\"opcionesContenedor\" class=\"opciones\"><\/div>\r\n      <div id=\"respuestaContenedor\"><\/div>\r\n      <button id=\"mostrarBtn\" class=\"mostrar-btn\" onclick=\"mostrarRespuesta()\">Mostrar Respuesta<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const imagenesRespuesta = {\r\n      A: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaA.jpg\",\r\n      B: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaB.jpg\",\r\n      C: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaC.jpg\"\r\n    };\r\n\r\n    let temaActual = null;\r\n    let preguntas = {};\r\n    let preguntaActual = null;\r\n    let preguntasMostradas = JSON.parse(localStorage.getItem(\"preguntasMostradas\")) || {};\r\n\r\n    \/\/ Limpiar las preguntas viejas (m\u00e1s de 1 hora)\r\n    for (let tema in preguntasMostradas) {\r\n      preguntasMostradas[tema] = preguntasMostradas[tema].filter(p => Date.now() - p.timestamp < 60 * 60 * 1000);\r\n    }\r\n\r\n    \/\/ Cargar preguntas desde archivo JSON seg\u00fan el tema\r\n    async function cargarPreguntas(tema) {\r\n      if (preguntas[tema]) return preguntas[tema]; \/\/ si ya est\u00e1 cargado, no volver a pedir\r\n      try {\r\n        const respuesta = await fetch(`https:\/\/creaxme.com.ar\/10rs\/preguntas\/preguntas_${tema}.json`);\r\n        if (!respuesta.ok) throw new Error(\"Error al cargar el archivo\");\r\n        const data = await respuesta.json();\r\n        preguntas[tema] = data;\r\n        return data;\r\n      } catch (error) {\r\n        console.error(\"Error cargando preguntas:\", error);\r\n        alert(\"No se pudieron cargar las preguntas del tema \" + tema);\r\n        return [];\r\n      }\r\n    }\r\n\r\n    async function abrirTrivia(tema) {\r\n      temaActual = tema;\r\n      const listaPreguntas = await cargarPreguntas(tema);\r\n      if (listaPreguntas.length === 0) return;\r\n\r\n      if (!preguntasMostradas[tema]) preguntasMostradas[tema] = [];\r\n\r\n      const indicesUsados = preguntasMostradas[tema].map(p => p.index);\r\n      const disponibles = listaPreguntas.map((_, i) => i).filter(i => !indicesUsados.includes(i));\r\n\r\n      if (disponibles.length === 0) {\r\n        alert(\"Ya viste todas las preguntas de este tema en la \u00faltima hora. Esper\u00e1 un rato \ud83d\ude09\");\r\n        return;\r\n      }\r\n\r\n      const index = disponibles[Math.floor(Math.random() * disponibles.length)];\r\n      preguntaActual = listaPreguntas[index];\r\n      preguntaActual.index = index;\r\n\r\n      document.getElementById(\"preguntaTexto\").textContent = preguntaActual.pregunta;\r\n      const opcionesContenedor = document.getElementById(\"opcionesContenedor\");\r\n      opcionesContenedor.innerHTML = \"\";\r\n\r\n      for (let letra in preguntaActual.opciones) {\r\n        opcionesContenedor.innerHTML += `<p><span>${letra}.<\/span> ${preguntaActual.opciones[letra]}<\/p>`;\r\n      }\r\n\r\n      document.getElementById(\"respuestaContenedor\").innerHTML = \"\";\r\n      document.getElementById(\"mostrarBtn\").style.display = \"block\";\r\n      document.getElementById(\"modalOverlay\").style.display = \"flex\";\r\n    }\r\n\r\n    function mostrarRespuesta() {\r\n      if (!preguntaActual) return;\r\n      const contenedor = document.getElementById(\"respuestaContenedor\");\r\n      contenedor.innerHTML = `<img decoding=\"async\" src=\"${imagenesRespuesta[preguntaActual.respuesta]}\" alt=\"Respuesta\" class=\"respuesta-img\">`;\r\n      document.getElementById(\"mostrarBtn\").style.display = \"none\";\r\n\r\n      preguntasMostradas[temaActual].push({ index: preguntaActual.index, timestamp: Date.now() });\r\n      localStorage.setItem(\"preguntasMostradas\", JSON.stringify(preguntasMostradas));\r\n    }\r\n\r\n    function cerrarModal() {\r\n      document.getElementById(\"modalOverlay\").style.display = \"none\";\r\n    }\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2644908 elementor-widget elementor-widget-html\" data-id=\"2644908\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Trivia Interactiva<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body {\r\n      font-family: 'Montserrat', sans-serif !important;\r\n      background: #111;\r\n      color: #fff;\r\n      margin: 0;\r\n      padding: 2rem;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 100vh;\r\n      gap: 2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .card {\r\n      background: #f4f4f4;\r\n      color: #333;\r\n      border-radius: 12px;\r\n      padding: 2rem;\r\n      text-align: center;\r\n      width: 250px;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .card i {\r\n      font-size: 40px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card h2 {\r\n      margin: 0 0 10px;\r\n      font-size: 24px;\r\n    }\r\n\r\n    .btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      font-size: 16px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-family: Montserrat;\r\n    }\r\n\r\n    .modal-overlay {\r\n      display: none;\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.8);\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n    }\r\n\r\n    .modal {\r\n      background: #fff;\r\n      color: #000;\r\n      width: 90%;\r\n      max-width: 500px !important;\r\n      padding: 2rem;\r\n      border-radius: 10px;\r\n      position: relative;\r\n      text-align: left;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .close-btn {\r\n      color: #800020 !important;\r\n      position: absolute;\r\n      top: 10px;\r\n      right: 15px;\r\n      font-size: 1.5rem;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .modal .pregunta {\r\n      margin-top: 2rem;\r\n      font-weight: bold;\r\n    }\r\n\r\n    .opciones p {\r\n      margin: 10px 0;\r\n    }\r\n\r\n    .opciones span {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .mostrar-btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      padding: 10px 18px;\r\n      font-size: 1rem;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 1.5rem;\r\n      cursor: pointer;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .respuesta-img {\r\n      margin-top: 20px;\r\n      max-width: 100%;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .modal h3 {\r\n      font-size: 1.2rem;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- Puedes duplicar estas tarjetas cambiando el tema -->\r\n  <div class=\"card\">\r\n   <i class=\"fas fa-globe\"><\/i>\r\n    <h2>Geografia<\/h2>\r\n    <button class=\"btn\" onclick=\"abrirTrivia('geografia')\">Ver pregunta<\/button>\r\n  <\/div>\r\n\r\n  <!-- Modal gen\u00e9rico -->\r\n  <div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal\">\r\n      <button class=\"close-btn\" onclick=\"cerrarModal()\">\u00d7<\/button>\r\n      <h3>\u2753 Pregunta:<\/h3>\r\n      <p id=\"preguntaTexto\" class=\"pregunta\"><\/p>\r\n      <div id=\"opcionesContenedor\" class=\"opciones\"><\/div>\r\n      <div id=\"respuestaContenedor\"><\/div>\r\n      <button id=\"mostrarBtn\" class=\"mostrar-btn\" onclick=\"mostrarRespuesta()\">Mostrar Respuesta<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const imagenesRespuesta = {\r\n      A: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaA.jpg\",\r\n      B: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaB.jpg\",\r\n      C: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaC.jpg\"\r\n    };\r\n\r\n    let temaActual = null;\r\n    let preguntas = {};\r\n    let preguntaActual = null;\r\n    let preguntasMostradas = JSON.parse(localStorage.getItem(\"preguntasMostradas\")) || {};\r\n\r\n    \/\/ Limpiar las preguntas viejas (m\u00e1s de 1 hora)\r\n    for (let tema in preguntasMostradas) {\r\n      preguntasMostradas[tema] = preguntasMostradas[tema].filter(p => Date.now() - p.timestamp < 60 * 60 * 1000);\r\n    }\r\n\r\n    \/\/ Cargar preguntas desde archivo JSON seg\u00fan el tema\r\n    async function cargarPreguntas(tema) {\r\n      if (preguntas[tema]) return preguntas[tema]; \/\/ si ya est\u00e1 cargado, no volver a pedir\r\n      try {\r\n        const respuesta = await fetch(`https:\/\/creaxme.com.ar\/10rs\/preguntas\/preguntas_${tema}.json`);\r\n        if (!respuesta.ok) throw new Error(\"Error al cargar el archivo\");\r\n        const data = await respuesta.json();\r\n        preguntas[tema] = data;\r\n        return data;\r\n      } catch (error) {\r\n        console.error(\"Error cargando preguntas:\", error);\r\n        alert(\"No se pudieron cargar las preguntas del tema \" + tema);\r\n        return [];\r\n      }\r\n    }\r\n\r\n    async function abrirTrivia(tema) {\r\n      temaActual = tema;\r\n      const listaPreguntas = await cargarPreguntas(tema);\r\n      if (listaPreguntas.length === 0) return;\r\n\r\n      if (!preguntasMostradas[tema]) preguntasMostradas[tema] = [];\r\n\r\n      const indicesUsados = preguntasMostradas[tema].map(p => p.index);\r\n      const disponibles = listaPreguntas.map((_, i) => i).filter(i => !indicesUsados.includes(i));\r\n\r\n      if (disponibles.length === 0) {\r\n        alert(\"Ya viste todas las preguntas de este tema en la \u00faltima hora. Esper\u00e1 un rato \ud83d\ude09\");\r\n        return;\r\n      }\r\n\r\n      const index = disponibles[Math.floor(Math.random() * disponibles.length)];\r\n      preguntaActual = listaPreguntas[index];\r\n      preguntaActual.index = index;\r\n\r\n      document.getElementById(\"preguntaTexto\").textContent = preguntaActual.pregunta;\r\n      const opcionesContenedor = document.getElementById(\"opcionesContenedor\");\r\n      opcionesContenedor.innerHTML = \"\";\r\n\r\n      for (let letra in preguntaActual.opciones) {\r\n        opcionesContenedor.innerHTML += `<p><span>${letra}.<\/span> ${preguntaActual.opciones[letra]}<\/p>`;\r\n      }\r\n\r\n      document.getElementById(\"respuestaContenedor\").innerHTML = \"\";\r\n      document.getElementById(\"mostrarBtn\").style.display = \"block\";\r\n      document.getElementById(\"modalOverlay\").style.display = \"flex\";\r\n    }\r\n\r\n    function mostrarRespuesta() {\r\n      if (!preguntaActual) return;\r\n      const contenedor = document.getElementById(\"respuestaContenedor\");\r\n      contenedor.innerHTML = `<img decoding=\"async\" src=\"${imagenesRespuesta[preguntaActual.respuesta]}\" alt=\"Respuesta\" class=\"respuesta-img\">`;\r\n      document.getElementById(\"mostrarBtn\").style.display = \"none\";\r\n\r\n      preguntasMostradas[temaActual].push({ index: preguntaActual.index, timestamp: Date.now() });\r\n      localStorage.setItem(\"preguntasMostradas\", JSON.stringify(preguntasMostradas));\r\n    }\r\n\r\n    function cerrarModal() {\r\n      document.getElementById(\"modalOverlay\").style.display = \"none\";\r\n    }\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed98978 elementor-widget elementor-widget-html\" data-id=\"ed98978\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Trivia Interactiva<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body {\r\n      font-family: 'Montserrat', sans-serif !important;\r\n      background: #111;\r\n      color: #fff;\r\n      margin: 0;\r\n      padding: 2rem;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 100vh;\r\n      gap: 2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .card {\r\n      background: #f4f4f4;\r\n      color: #333;\r\n      border-radius: 12px;\r\n      padding: 2rem;\r\n      text-align: center;\r\n      width: 250px;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .card i {\r\n      font-size: 40px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card h2 {\r\n      margin: 0 0 10px;\r\n      font-size: 24px;\r\n    }\r\n\r\n    .btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      font-size: 16px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-family: Montserrat;\r\n    }\r\n\r\n    .modal-overlay {\r\n      display: none;\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.8);\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n    }\r\n\r\n    .modal {\r\n      background: #fff;\r\n      color: #000;\r\n      width: 90%;\r\n      max-width: 500px !important;\r\n      padding: 2rem;\r\n      border-radius: 10px;\r\n      position: relative;\r\n      text-align: left;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .close-btn {\r\n      color: #800020 !important;\r\n      position: absolute;\r\n      top: 10px;\r\n      right: 15px;\r\n      font-size: 1.5rem;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .modal .pregunta {\r\n      margin-top: 2rem;\r\n      font-weight: bold;\r\n    }\r\n\r\n    .opciones p {\r\n      margin: 10px 0;\r\n    }\r\n\r\n    .opciones span {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .mostrar-btn {\r\n      background-color: #800020;\r\n      color: white;\r\n      padding: 10px 18px;\r\n      font-size: 1rem;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 1.5rem;\r\n      cursor: pointer;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .respuesta-img {\r\n      margin-top: 20px;\r\n      max-width: 100%;\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .modal h3 {\r\n      font-size: 1.2rem;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- Puedes duplicar estas tarjetas cambiando el tema -->\r\n  <div class=\"card\">\r\n   <i class=\"fas fa-random\"><\/i>\r\n    <h2>Random<\/h2>\r\n    <button class=\"btn\" onclick=\"abrirTrivia('ATPrandom')\">Ver pregunta<\/button>\r\n  <\/div>\r\n\r\n  <!-- Modal gen\u00e9rico -->\r\n  <div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal\">\r\n      <button class=\"close-btn\" onclick=\"cerrarModal()\">\u00d7<\/button>\r\n      <h3>\u2753 Pregunta:<\/h3>\r\n      <p id=\"preguntaTexto\" class=\"pregunta\"><\/p>\r\n      <div id=\"opcionesContenedor\" class=\"opciones\"><\/div>\r\n      <div id=\"respuestaContenedor\"><\/div>\r\n      <button id=\"mostrarBtn\" class=\"mostrar-btn\" onclick=\"mostrarRespuesta()\">Mostrar Respuesta<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const imagenesRespuesta = {\r\n      A: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaA.jpg\",\r\n      B: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaB.jpg\",\r\n      C: \"https:\/\/creaxme.com.ar\/10rs\/wp-content\/uploads\/2025\/05\/respuestaC.jpg\"\r\n    };\r\n\r\n    let temaActual = null;\r\n    let preguntas = {};\r\n    let preguntaActual = null;\r\n    let preguntasMostradas = JSON.parse(localStorage.getItem(\"preguntasMostradas\")) || {};\r\n\r\n    \/\/ Limpiar las preguntas viejas (m\u00e1s de 1 hora)\r\n    for (let tema in preguntasMostradas) {\r\n      preguntasMostradas[tema] = preguntasMostradas[tema].filter(p => Date.now() - p.timestamp < 60 * 60 * 1000);\r\n    }\r\n\r\n    \/\/ Cargar preguntas desde archivo JSON seg\u00fan el tema\r\n    async function cargarPreguntas(tema) {\r\n      if (preguntas[tema]) return preguntas[tema]; \/\/ si ya est\u00e1 cargado, no volver a pedir\r\n      try {\r\n        const respuesta = await fetch(`https:\/\/creaxme.com.ar\/10rs\/preguntas\/preguntas_${tema}.json`);\r\n        if (!respuesta.ok) throw new Error(\"Error al cargar el archivo\");\r\n        const data = await respuesta.json();\r\n        preguntas[tema] = data;\r\n        return data;\r\n      } catch (error) {\r\n        console.error(\"Error cargando preguntas:\", error);\r\n        alert(\"No se pudieron cargar las preguntas del tema \" + tema);\r\n        return [];\r\n      }\r\n    }\r\n\r\n    async function abrirTrivia(tema) {\r\n      temaActual = tema;\r\n      const listaPreguntas = await cargarPreguntas(tema);\r\n      if (listaPreguntas.length === 0) return;\r\n\r\n      if (!preguntasMostradas[tema]) preguntasMostradas[tema] = [];\r\n\r\n      const indicesUsados = preguntasMostradas[tema].map(p => p.index);\r\n      const disponibles = listaPreguntas.map((_, i) => i).filter(i => !indicesUsados.includes(i));\r\n\r\n      if (disponibles.length === 0) {\r\n        alert(\"Ya viste todas las preguntas de este tema en la \u00faltima hora. Esper\u00e1 un rato \ud83d\ude09\");\r\n        return;\r\n      }\r\n\r\n      const index = disponibles[Math.floor(Math.random() * disponibles.length)];\r\n      preguntaActual = listaPreguntas[index];\r\n      preguntaActual.index = index;\r\n\r\n      document.getElementById(\"preguntaTexto\").textContent = preguntaActual.pregunta;\r\n      const opcionesContenedor = document.getElementById(\"opcionesContenedor\");\r\n      opcionesContenedor.innerHTML = \"\";\r\n\r\n      for (let letra in preguntaActual.opciones) {\r\n        opcionesContenedor.innerHTML += `<p><span>${letra}.<\/span> ${preguntaActual.opciones[letra]}<\/p>`;\r\n      }\r\n\r\n      document.getElementById(\"respuestaContenedor\").innerHTML = \"\";\r\n      document.getElementById(\"mostrarBtn\").style.display = \"block\";\r\n      document.getElementById(\"modalOverlay\").style.display = \"flex\";\r\n    }\r\n\r\n    function mostrarRespuesta() {\r\n      if (!preguntaActual) return;\r\n      const contenedor = document.getElementById(\"respuestaContenedor\");\r\n      contenedor.innerHTML = `<img decoding=\"async\" src=\"${imagenesRespuesta[preguntaActual.respuesta]}\" alt=\"Respuesta\" class=\"respuesta-img\">`;\r\n      document.getElementById(\"mostrarBtn\").style.display = \"none\";\r\n\r\n      preguntasMostradas[temaActual].push({ index: preguntaActual.index, timestamp: Date.now() });\r\n      localStorage.setItem(\"preguntasMostradas\", JSON.stringify(preguntasMostradas));\r\n    }\r\n\r\n    function cerrarModal() {\r\n      document.getElementById(\"modalOverlay\").style.display = \"none\";\r\n    }\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ATP APTO PARA TODO P\u00daBLICO \u00bfEST\u00c1S READY? Eleg\u00ed una de las tem\u00e1ticas para responder ! (VERSI\u00d3N DEMO) Trivia Interactiva Deportes Ver pregunta \u00d7 &#x2753; Pregunta: Mostrar Respuesta Trivia Interactiva Historia Ver pregunta \u00d7 &#x2753; Pregunta: Mostrar Respuesta Trivia Interactiva Ciencia Ver pregunta \u00d7 &#x2753; Pregunta: Mostrar Respuesta Trivia Interactiva Matematica Ver pregunta \u00d7 &#x2753; Pregunta:&hellip;&nbsp;<a href=\"https:\/\/creaxme.com.ar\/10rs\/atp\/\" rel=\"bookmark\"><span class=\"screen-reader-text\">ATP<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-189","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/creaxme.com.ar\/10rs\/wp-json\/wp\/v2\/pages\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creaxme.com.ar\/10rs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creaxme.com.ar\/10rs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creaxme.com.ar\/10rs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/creaxme.com.ar\/10rs\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":43,"href":"https:\/\/creaxme.com.ar\/10rs\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":1210,"href":"https:\/\/creaxme.com.ar\/10rs\/wp-json\/wp\/v2\/pages\/189\/revisions\/1210"}],"wp:attachment":[{"href":"https:\/\/creaxme.com.ar\/10rs\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}