\u2728 La App de Signos de Sof\u00eda \u2728<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Definici\u00f3n de variables CSS con tus colores personalizados *\/\n :root {\n --custom-violet: #8B5CF6;\n --custom-lilac: #C4B5FD;\n --custom-dark-purple: #5B21B6;\n --custom-light-lilac: #EDE9FE;\n \/* --whatsapp-green: #25D366; Ya no se necesita *\/\n --app-bg-color: #F3E8FF; \/* Color de fondo general de la app *\/\n }\n\n body {\n font-family: 'Inter', sans-serif;\n background-color: var(--app-bg-color); \/* Usando variable CSS para el fondo *\/\n }\n \n #appTitleFixed {\n color: var(--custom-dark-purple);\n }\n\n #resultadoSigno {\n background-color: var(--custom-light-lilac);\n }\n \n .input-custom-border {\n border-color: var(--custom-lilac);\n }\n .input-custom-border:focus {\n --tw-ring-color: var(--custom-violet); \n border-color: var(--custom-violet);\n }\n \n .consejo-text {\n color: var(--custom-violet);\n border-top-color: var(--custom-lilac);\n }\n \n .strong-text-custom {\n color: var(--custom-dark-purple);\n }\n \n .resultado-animado {\n animation: fadeIn 0.5s ease-in-out;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n select {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238B5CF6%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: right 0.7rem center;\n background-size: 0.65em auto;\n padding-right: 2.5rem; \n }\n .hidden-default {\n display: none;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col items-center justify-center p-4 selection:bg-[var(--custom-violet)] selection:text-white\">\n\n <div class=\"bg-white shadow-2xl rounded-xl p-6 md:p-10 w-full max-w-lg\">\n <header class=\"text-center mb-6 md:mb-8\">\n <h1 id=\"appTitleFixed\" class=\"text-3xl md:text-4xl font-bold\">\u2728 La App de Signos de Sof\u00eda \u2728<\/h1>\n <p class=\"text-gray-600 mt-2\">Dime tu nombre y fecha de nacimiento (d\u00eda y mes) y te contar\u00e9 un secreto de las estrellas.<\/p>\n <\/header>\n\n <main>\n <div class=\"mb-6\">\n <label for=\"nombre\" class=\"block text-sm font-medium text-gray-700 mb-1\">Tu nombre:<\/label>\n <input type=\"text\" id=\"nombre\" name=\"nombre\" placeholder=\"Escribe tu nombre aqu\u00ed\"\n class=\"w-full p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-[var(--custom-violet)] input-custom-border\">\n <\/div>\n\n <div class=\"grid grid-cols-2 gap-4 mb-6\">\n <div>\n <label for=\"dia\" class=\"block text-sm font-medium text-gray-700 mb-1\">D\u00eda:<\/label>\n <input type=\"number\" id=\"dia\" name=\"dia\" min=\"1\" max=\"31\" placeholder=\"Ej: 15\"\n class=\"w-full p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-[var(--custom-violet)] input-custom-border\">\n <\/div>\n <div>\n <label for=\"mes\" class=\"block text-sm font-medium text-gray-700 mb-1\">Mes:<\/label>\n <select id=\"mes\" name=\"mes\"\n class=\"w-full p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-[var(--custom-violet)] bg-white input-custom-border\">\n <option value=\"\" disabled selected>Selecciona un mes<\/option>\n <option value=\"1\">Enero<\/option>\n <option value=\"2\">Febrero<\/option>\n <option value=\"3\">Marzo<\/option>\n <option value=\"4\">Abril<\/option>\n <option value=\"5\">Mayo<\/option>\n <option value=\"6\">Junio<\/option>\n <option value=\"7\">Julio<\/option>\n <option value=\"8\">Agosto<\/option>\n <option value=\"9\">Septiembre<\/option>\n <option value=\"10\">Octubre<\/option>\n <option value=\"11\">Noviembre<\/option>\n <option value=\"12\">Diciembre<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <button id=\"verSignoButton\" onclick=\"mostrarSigno()\"\n class=\"w-full bg-[var(--custom-violet)] text-white font-semibold py-3 px-4 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-[var(--custom-violet)] focus:ring-opacity-50\">\n \u00a1Ver mi signo!\n <\/button>\n\n <div id=\"resultadoSigno\" class=\"mt-8 p-6 rounded-lg shadow-inner min-h-[150px]\">\n <p class=\"text-center text-gray-500\">Ingresa tus datos para ver la magia…<\/p>\n <\/div>\n \n <button id=\"buscarOtroButton\" onclick=\"reiniciarBusqueda()\"\n class=\"hidden-default mt-4 w-full bg-[var(--custom-violet)] text-white font-semibold py-3 px-4 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-[var(--custom-violet)] focus:ring-opacity-50\">\n Buscar otro signo\n <\/button>\n <\/main>\n\n <footer class=\"text-center mt-8\">\n <p class=\"text-xs text-gray-500\">Hecho con cari\u00f1o para peque\u00f1os astr\u00f3logos \u2728<\/p>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ Referencias a elementos del DOM\n const nombreInput = document.getElementById('nombre');\n const diaInput = document.getElementById('dia');\n const mesInput = document.getElementById('mes');\n const resultadoDiv = document.getElementById('resultadoSigno');\n const verSignoButton = document.getElementById('verSignoButton');\n const buscarOtroButton = document.getElementById('buscarOtroButton');\n \n const placeholderResultado = '<p class=\"text-center text-gray-500\">Ingresa tus datos para ver la magia...<\/p>';\n\n \/\/ Array con la informaci\u00f3n de los signos zodiacales\n const signosZodiaco = [\n {\n nombre: \"Aries\",\n rango: { inicio: { mes: 3, dia: 21 }, fin: { mes: 4, dia: 19 } },\n emoji: \"\u2648\ufe0f\",\n descripcion: \"\u00a1Eres Aries, como una chispita de energ\u00eda! Te encanta empezar cosas nuevas y eres muy valiente. \u00a1Nada te detiene cuando te propones algo!\",\n amigos: \"Con tus amigos, eres el alma de la aventura. Siempre tienes ideas geniales para jugar y te gusta animar a todos. \u00a1Eres un l\u00edder natural!\",\n familia: \"En casa, llenas todo de alegr\u00eda y entusiasmo. A veces puedes ser un poquito impaciente, \u00a1pero tu gran coraz\u00f3n y tus abrazos lo compensan todo!\",\n consejo: \"\u00a1Sigue brillando con tu energ\u00eda y nunca dejes de intentar cosas nuevas!\"\n },\n {\n nombre: \"Tauro\",\n rango: { inicio: { mes: 4, dia: 20 }, fin: { mes: 5, dia: 20 } },\n emoji: \"\u2649\ufe0f\",\n descripcion: \"\u00a1Eres Tauro, como un \u00e1rbol fuerte y tranquilo! Te gustan las cosas bonitas, los abrazos calentitos y sentirte seguro y feliz.\",\n amigos: \"Con tus amigos, eres s\u00faper leal y cari\u00f1oso. Te encanta compartir tus juguetes favoritos y disfrutas de los juegos calmados y creativos, \u00a1como dibujar o construir!\",\n familia: \"En tu familia, eres quien trae la calma y la dulzura. Disfrutas mucho de los mimos de tus pap\u00e1s y de los momentos tranquilos en casa. \u00a1Un buen cuento es tu plan perfecto!\",\n consejo: \"\u00a1Disfruta de las peque\u00f1as cosas lindas de la vida y recuerda lo especial que eres!\"\n },\n {\n nombre: \"G\u00e9minis\",\n rango: { inicio: { mes: 5, dia: 21 }, fin: { mes: 6, dia: 20 } },\n emoji: \"\u264a\ufe0f\",\n descripcion: \"\u00a1Eres G\u00e9minis, como una mariposa curiosa y parlanchina! Te encanta aprender cosas nuevas, hacer preguntas y hablar con todo el mundo.\",\n amigos: \"Con tus amigos, \u00a1eres pura diversi\u00f3n! Siempre tienes algo interesante que contar y te llevas bien con todos. Hacer amigos es muy f\u00e1cil para ti porque eres muy simp\u00e1tico.\",\n familia: \"En casa, tu curiosidad no tiene fin. \u00a1Preguntas mucho porque quieres saberlo todo! A veces cambias de idea r\u00e1pido, pero tu alegr\u00eda y tus ganas de charlar contagian a todos.\",\n consejo: \"\u00a1Sigue explorando el mundo con tu curiosidad y comparte tus ideas geniales con todos!\"\n },\n {\n nombre: \"C\u00e1ncer\",\n rango: { inicio: { mes: 6, dia: 21 }, fin: { mes: 7, dia: 22 } },\n emoji: \"\u264b\ufe0f\",\n descripcion: \"\u00a1Eres C\u00e1ncer, como un cangrejito tierno y protector! Tienes un coraz\u00f3n enorme, eres muy cari\u00f1oso y te importa mucho c\u00f3mo se sienten los dem\u00e1s.\",\n amigos: \"Con tus amigos, eres el m\u00e1s dulce y cuidadoso. Siempre est\u00e1s ah\u00ed para escuchar y dar los mejores abrazos. \u00a1Te encanta cuidar de tus amigos como si fueran tu tesoro!\",\n familia: \"Para tu familia, eres un sol de cari\u00f1o y ternura. Te encanta estar en casa, sentirte protegido y dar mucho amor. \u00a1Los momentos en familia son tus favoritos!\",\n consejo: \"\u00a1Sigue escuchando a tu gran coraz\u00f3n y repartiendo amor por donde vayas!\"\n },\n {\n nombre: \"Leo\",\n rango: { inicio: { mes: 7, dia: 23 }, fin: { mes: 8, dia: 22 } },\n emoji: \"\u264c\ufe0f\",\n descripcion: \"\u00a1Eres Leo, como un le\u00f3n valiente y brillante! Te gusta ser el centro de atenci\u00f3n, tienes mucha confianza y un coraz\u00f3n generoso.\",\n amigos: \"Con tus amigos, eres el rey o la reina de la diversi\u00f3n. Te encanta organizar los juegos y que todos se diviertan contigo. \u00a1Tu alegr\u00eda es contagiosa!\",\n familia: \"En casa, brillas con luz propia. Te gusta que te feliciten por tus logros y tienes un gran coraz\u00f3n para compartir. \u00a1Eres el sol de tu hogar!\",\n consejo: \"\u00a1Deja que tu luz brille fuerte y comparte tu gran coraz\u00f3n con el mundo!\"\n },\n {\n nombre: \"Virgo\",\n rango: { inicio: { mes: 8, dia: 23 }, fin: { mes: 9, dia: 22 } },\n emoji: \"\u264d\ufe0f\",\n descripcion: \"\u00a1Eres Virgo, como una abejita trabajadora y muy inteligente! Te gusta que todo est\u00e9 ordenado, ayudar a los dem\u00e1s y aprender cosas nuevas.\",\n amigos: \"Con tus amigos, eres detallista y siempre est\u00e1s dispuesto a ayudar. Te fijas en las peque\u00f1as cosas y te gusta que los juegos salgan perfectos. \u00a1Eres un gran compa\u00f1ero!\",\n familia: \"En tu familia, eres muy colaborador y te gusta que todo est\u00e9 en su sitio. Disfrutas ayudando en casa y aprendiendo cosas \u00fatiles de tus pap\u00e1s. \u00a1Eres muy responsable!\",\n consejo: \"\u00a1Sigue usando tu inteligencia para ayudar y crear cosas geniales!\"\n },\n {\n nombre: \"Libra\",\n rango: { inicio: { mes: 9, dia: 23 }, fin: { mes: 10, dia: 22 } },\n emoji: \"\u264e\ufe0f\",\n descripcion: \"\u00a1Eres Libra, como una balanza que busca la armon\u00eda y la belleza! Te gusta que todos se lleven bien, amas las cosas bonitas y eres muy amable.\",\n amigos: \"Con tus amigos, eres el pacificador. No te gustan las peleas y siempre buscas que todos est\u00e9n contentos. \u00a1Te encanta compartir y jugar en equipo!\",\n familia: \"En casa, traes paz y alegr\u00eda. Te gusta que tu hogar sea un lugar bonito y tranquilo. Disfrutas mucho de la compa\u00f1\u00eda de tu familia y de hacer cosas juntos.\",\n consejo: \"\u00a1Sigue buscando la belleza y la amistad en todo lo que haces!\"\n },\n {\n nombre: \"Escorpio\",\n rango: { inicio: { mes: 10, dia: 23 }, fin: { mes: 11, dia: 21 } },\n emoji: \"\u264f\ufe0f\",\n descripcion: \"\u00a1Eres Escorpio, como un detective misterioso y con mucha energ\u00eda! Eres muy intenso, curioso y tienes sentimientos muy profundos.\",\n amigos: \"Con tus amigos, eres muy leal y protector. Guardas los secretos como un tesoro y, aunque a veces parezcas serio, \u00a1eres un amigo incre\u00edble y divertido!\",\n familia: \"En tu familia, eres muy unido y sientes las cosas con mucha fuerza. Eres valiente y siempre defender\u00e1s a los tuyos. \u00a1Tu amor por ellos es muy profundo!\",\n consejo: \"\u00a1Conf\u00eda en tu gran intuici\u00f3n y sigue siendo ese amigo leal y valiente!\"\n },\n {\n nombre: \"Sagitario\",\n rango: { inicio: { mes: 11, dia: 22 }, fin: { mes: 12, dia: 21 } },\n emoji: \"\u2650\ufe0f\",\n descripcion: \"\u00a1Eres Sagitario, como un aventurero explorador y muy optimista! Te encanta aprender, viajar (\u00a1aunque sea con la imaginaci\u00f3n!) y siempre ves el lado bueno de las cosas.\",\n amigos: \"Con tus amigos, eres el m\u00e1s divertido y entusiasta. Siempre tienes una sonrisa y ganas de probar juegos nuevos y emocionantes. \u00a1La aventura te llama!\",\n familia: \"En casa, eres una fuente de alegr\u00eda y buen humor. Te encanta contar historias y hacer re\u00edr a tu familia. \u00a1Tu optimismo ilumina a todos!\",\n consejo: \"\u00a1Nunca pierdas tu esp\u00edritu aventurero y tu sonrisa contagiosa!\"\n },\n {\n nombre: \"Capricornio\",\n rango: { inicio: { mes: 12, dia: 22 }, fin: { mes: 1, dia: 19 } }, \n emoji: \"\u2651\ufe0f\",\n descripcion: \"\u00a1Eres Capricornio, como una cabrita monta\u00f1esa decidida y paciente! Te gusta trabajar para conseguir tus metas y eres muy responsable.\",\n amigos: \"Con tus amigos, eres leal y un poco serio a veces, \u00a1pero muy confiable! Te gustan los juegos que requieren pensar y te esfuerzas para que todo salga bien.\",\n familia: \"En tu familia, eres un ejemplo de esfuerzo. Te tomas en serio tus responsabilidades y te gusta ayudar. \u00a1Tus pap\u00e1s est\u00e1n muy orgullosos de ti!\",\n consejo: \"\u00a1Sigue trabajando por tus sue\u00f1os, pasito a pasito llegar\u00e1s muy alto!\"\n },\n {\n nombre: \"Acuario\",\n rango: { inicio: { mes: 1, dia: 20 }, fin: { mes: 2, dia: 18 } },\n emoji: \"\u2652\ufe0f\",\n descripcion: \"\u00a1Eres Acuario, como un inventor original y amigo de todos! Te encanta ser diferente, tienes ideas geniales y te preocupas por hacer del mundo un lugar mejor.\",\n amigos: \"Con tus amigos, eres \u00fanico y muy divertido. Te gusta tener muchos amigos diferentes y siempre tienes ideas originales para jugar. \u00a1Respetas a todos tal como son!\",\n familia: \"En casa, eres el toque de originalidad. A veces sorprendes con tus ideas y tu forma de ver las cosas. \u00a1Tu familia valora mucho tu gran coraz\u00f3n y tu mente creativa!\",\n consejo: \"\u00a1Sigue siendo t\u00fa mismo y usa tus ideas geniales para ayudar a los dem\u00e1s!\"\n },\n {\n nombre: \"Piscis\",\n rango: { inicio: { mes: 2, dia: 19 }, fin: { mes: 3, dia: 20 } },\n emoji: \"\u2653\ufe0f\",\n descripcion: \"\u00a1Eres Piscis, como un pececito so\u00f1ador y lleno de imaginaci\u00f3n! Tienes un coraz\u00f3n muy grande, eres muy sensible y te encanta ayudar a los dem\u00e1s.\",\n amigos: \"Con tus amigos, eres s\u00faper dulce, comprensivo y un gran artista. Te encanta inventar historias y juegos m\u00e1gicos. A veces necesitas tu espacio para so\u00f1ar un poquito.\",\n familia: \"Para tu familia, eres un tesoro de cari\u00f1o y sensibilidad. Sientes mucho las emociones de los dem\u00e1s y siempre buscas que todos est\u00e9n felices. \u00a1Tus abrazos son m\u00e1gicos!\",\n consejo: \"\u00a1Nunca dejes de so\u00f1ar y de usar tu incre\u00edble imaginaci\u00f3n para crear cosas maravillosas!\"\n }\n ];\n\n \/\/ Funci\u00f3n para limpiar campos y reiniciar la vista\n function reiniciarBusqueda() {\n nombreInput.value = '';\n diaInput.value = '';\n mesInput.value = ''; \/\/ Esto resetea el select a la primera opci\u00f3n si no hay una con value=\"\"\n mesInput.selectedIndex = 0; \/\/ Asegura que se muestre \"Selecciona un mes\"\n \n resultadoDiv.innerHTML = placeholderResultado;\n \n buscarOtroButton.style.display = 'none'; \/\/ Ocultar bot\u00f3n \"Buscar otro signo\"\n verSignoButton.style.display = 'block'; \/\/ Asegurar que el bot\u00f3n principal est\u00e9 visible\n \n nombreInput.focus(); \/\/ Poner el foco en el campo del nombre\n \n \/\/ Limpiar estilos de error si los hubiera\n nombreInput.classList.remove('border-red-500');\n diaInput.classList.remove('border-red-500');\n mesInput.classList.remove('border-red-500');\n nombreInput.classList.add('input-custom-border');\n diaInput.classList.add('input-custom-border');\n mesInput.classList.add('input-custom-border');\n }\n\n \/\/ Funci\u00f3n para mostrar el signo zodiacal\n function mostrarSigno() {\n \/\/ Limpiar estilos de error previos\n nombreInput.classList.remove('border-red-500');\n diaInput.classList.remove('border-red-500');\n mesInput.classList.remove('border-red-500');\n nombreInput.classList.add('input-custom-border');\n diaInput.classList.add('input-custom-border');\n mesInput.classList.add('input-custom-border');\n \n buscarOtroButton.style.display = 'none'; \/\/ Ocultar por si acaso\n\n const nombreUsuario = nombreInput.value.trim(); \n const dia = parseInt(diaInput.value);\n const mes = parseInt(mesInput.value);\n\n let isValid = true;\n let mensajeError = \"\";\n\n if (nombreUsuario === \"\") {\n nombreInput.classList.remove('input-custom-border');\n nombreInput.classList.add('border-red-500');\n mensajeError = \"Por favor, escribe tu nombre.\";\n isValid = false;\n }\n\n if (isNaN(dia) || dia < 1 || dia > 31) {\n diaInput.classList.remove('input-custom-border');\n diaInput.classList.add('border-red-500');\n if (isValid) mensajeError = \"Por favor, ingresa un d\u00eda v\u00e1lido.\";\n isValid = false;\n }\n\n if (isNaN(mes) || mes === \"\" || mes < 1 || mes > 12) {\n mesInput.classList.remove('input-custom-border');\n mesInput.classList.add('border-red-500');\n if (isValid) mensajeError = \"Por favor, selecciona un mes.\";\n isValid = false;\n }\n \n if (isValid) {\n const diasPorMes = [0, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; \n if (dia > diasPorMes[mes]) {\n diaInput.classList.remove('input-custom-border');\n diaInput.classList.add('border-red-500');\n mensajeError = `El mes de ${mesInput.options[mesInput.selectedIndex].text} no tiene ${dia} d\u00edas.`;\n isValid = false;\n }\n }\n\n if (!isValid) {\n resultadoDiv.innerHTML = `<p class=\"text-center text-red-600 font-semibold resultado-animado\">${mensajeError}<\/p>`;\n return;\n }\n \n nombreInput.classList.remove('border-red-500');\n nombreInput.classList.add('input-custom-border');\n diaInput.classList.remove('border-red-500');\n diaInput.classList.add('input-custom-border');\n mesInput.classList.remove('border-red-500');\n mesInput.classList.add('input-custom-border');\n\n let signoEncontrado = null;\n const fechaUsuarioNum = mes * 100 + dia;\n\n for (const signo of signosZodiaco) {\n const inicioNum = signo.rango.inicio.mes * 100 + signo.rango.inicio.dia;\n const finNum = signo.rango.fin.mes * 100 + signo.rango.fin.dia;\n\n if (inicioNum <= finNum) { \n if (fechaUsuarioNum >= inicioNum && fechaUsuarioNum <= finNum) {\n signoEncontrado = signo;\n break;\n }\n } else { \n if (fechaUsuarioNum >= inicioNum || fechaUsuarioNum <= finNum) {\n signoEncontrado = signo;\n break;\n }\n }\n }\n\n if (signoEncontrado) {\n const infoSigno = `\n <div class=\"resultado-animado text-center\">\n <p class=\"text-6xl mb-4\">${signoEncontrado.emoji}<\/p> \n <h2 class=\"text-2xl md:text-3xl font-bold text-[var(--custom-violet)] text-center mb-3\">${nombreUsuario}, tu signo es ${signoEncontrado.nombre}<\/h2>\n <div class=\"space-y-3 text-gray-700 text-left\">\n <p><strong class=\"strong-text-custom\">\ud83c\udf1f As\u00ed eres t\u00fa (${signoEncontrado.nombre}):<\/strong> ${signoEncontrado.descripcion}<\/p>\n <p><strong class=\"strong-text-custom\">\ud83d\udc6b Con tus amigos:<\/strong> ${signoEncontrado.amigos}<\/p>\n <p><strong class=\"strong-text-custom\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d\udc66 Con tu familia:<\/strong> ${signoEncontrado.familia}<\/p>\n <p class=\"mt-4 pt-3 border-t italic text-center consejo-text font-semibold\">${signoEncontrado.consejo}<\/p>\n <\/div>\n <\/div>\n `;\n resultadoDiv.innerHTML = infoSigno;\n \n verSignoButton.style.display = 'none'; \/\/ Ocultar bot\u00f3n \"Ver mi signo\"\n buscarOtroButton.style.display = 'block'; \/\/ Mostrar bot\u00f3n \"Buscar otro signo\"\n\n } else {\n resultadoDiv.innerHTML = `<p class=\"text-center text-red-600 font-semibold resultado-animado\">\u00a1Oh! No pudimos encontrar tu signo con esa fecha. Revisa los datos e intenta de nuevo.<\/p>`;\n verSignoButton.style.display = 'block'; \/\/ Asegurar que el bot\u00f3n principal est\u00e9 visible si hay error\n buscarOtroButton.style.display = 'none';\n }\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u2728 La App de Signos de Sof\u00eda \u2728 \u2728 La App de Signos de Sof\u00eda \u2728 Dime tu nombre y fecha de nacimiento (d\u00eda y mes) y te contar\u00e9 un secreto de las estrellas. Tu nombre: D\u00eda: Mes: Selecciona un mesEneroFebreroMarzoAbrilMayoJunioJulioAgostoSeptiembreOctubreNoviembreDiciembre \u00a1Ver mi signo! Ingresa tus datos para ver la magia… Buscar otro signo Hecho […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-187","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/pages\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":3,"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/pages\/187\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/pages\/187\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/media?parent=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":187,"date":"2025-05-16T15:30:35","date_gmt":"2025-05-16T13:30:35","guid":{"rendered":"https:\/\/elcalafate.online\/?page_id=187"},"modified":"2025-05-16T15:54:20","modified_gmt":"2025-05-16T13:54:20","slug":"los-signos-de-sofi","status":"publish","type":"page","link":"https:\/\/elcalafate.online\/index.php\/los-signos-de-sofi\/","title":{"rendered":"Los Signos de Sofi"},"content":{"rendered":"\n\n\n\n \n \n \u2728 La App de Signos de Sof\u00eda \u2728<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Definici\u00f3n de variables CSS con tus colores personalizados *\/\n :root {\n --custom-violet: #8B5CF6;\n --custom-lilac: #C4B5FD;\n --custom-dark-purple: #5B21B6;\n --custom-light-lilac: #EDE9FE;\n \/* --whatsapp-green: #25D366; Ya no se necesita *\/\n --app-bg-color: #F3E8FF; \/* Color de fondo general de la app *\/\n }\n\n body {\n font-family: 'Inter', sans-serif;\n background-color: var(--app-bg-color); \/* Usando variable CSS para el fondo *\/\n }\n \n #appTitleFixed {\n color: var(--custom-dark-purple);\n }\n\n #resultadoSigno {\n background-color: var(--custom-light-lilac);\n }\n \n .input-custom-border {\n border-color: var(--custom-lilac);\n }\n .input-custom-border:focus {\n --tw-ring-color: var(--custom-violet); \n border-color: var(--custom-violet);\n }\n \n .consejo-text {\n color: var(--custom-violet);\n border-top-color: var(--custom-lilac);\n }\n \n .strong-text-custom {\n color: var(--custom-dark-purple);\n }\n \n .resultado-animado {\n animation: fadeIn 0.5s ease-in-out;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n select {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238B5CF6%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: right 0.7rem center;\n background-size: 0.65em auto;\n padding-right: 2.5rem; \n }\n .hidden-default {\n display: none;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col items-center justify-center p-4 selection:bg-[var(--custom-violet)] selection:text-white\">\n\n <div class=\"bg-white shadow-2xl rounded-xl p-6 md:p-10 w-full max-w-lg\">\n <header class=\"text-center mb-6 md:mb-8\">\n <h1 id=\"appTitleFixed\" class=\"text-3xl md:text-4xl font-bold\">\u2728 La App de Signos de Sof\u00eda \u2728<\/h1>\n <p class=\"text-gray-600 mt-2\">Dime tu nombre y fecha de nacimiento (d\u00eda y mes) y te contar\u00e9 un secreto de las estrellas.<\/p>\n <\/header>\n\n <main>\n <div class=\"mb-6\">\n <label for=\"nombre\" class=\"block text-sm font-medium text-gray-700 mb-1\">Tu nombre:<\/label>\n <input type=\"text\" id=\"nombre\" name=\"nombre\" placeholder=\"Escribe tu nombre aqu\u00ed\"\n class=\"w-full p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-[var(--custom-violet)] input-custom-border\">\n <\/div>\n\n <div class=\"grid grid-cols-2 gap-4 mb-6\">\n <div>\n <label for=\"dia\" class=\"block text-sm font-medium text-gray-700 mb-1\">D\u00eda:<\/label>\n <input type=\"number\" id=\"dia\" name=\"dia\" min=\"1\" max=\"31\" placeholder=\"Ej: 15\"\n class=\"w-full p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-[var(--custom-violet)] input-custom-border\">\n <\/div>\n <div>\n <label for=\"mes\" class=\"block text-sm font-medium text-gray-700 mb-1\">Mes:<\/label>\n <select id=\"mes\" name=\"mes\"\n class=\"w-full p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-[var(--custom-violet)] bg-white input-custom-border\">\n <option value=\"\" disabled selected>Selecciona un mes<\/option>\n <option value=\"1\">Enero<\/option>\n <option value=\"2\">Febrero<\/option>\n <option value=\"3\">Marzo<\/option>\n <option value=\"4\">Abril<\/option>\n <option value=\"5\">Mayo<\/option>\n <option value=\"6\">Junio<\/option>\n <option value=\"7\">Julio<\/option>\n <option value=\"8\">Agosto<\/option>\n <option value=\"9\">Septiembre<\/option>\n <option value=\"10\">Octubre<\/option>\n <option value=\"11\">Noviembre<\/option>\n <option value=\"12\">Diciembre<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <button id=\"verSignoButton\" onclick=\"mostrarSigno()\"\n class=\"w-full bg-[var(--custom-violet)] text-white font-semibold py-3 px-4 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-[var(--custom-violet)] focus:ring-opacity-50\">\n \u00a1Ver mi signo!\n <\/button>\n\n <div id=\"resultadoSigno\" class=\"mt-8 p-6 rounded-lg shadow-inner min-h-[150px]\">\n <p class=\"text-center text-gray-500\">Ingresa tus datos para ver la magia…<\/p>\n <\/div>\n \n <button id=\"buscarOtroButton\" onclick=\"reiniciarBusqueda()\"\n class=\"hidden-default mt-4 w-full bg-[var(--custom-violet)] text-white font-semibold py-3 px-4 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-[var(--custom-violet)] focus:ring-opacity-50\">\n Buscar otro signo\n <\/button>\n <\/main>\n\n <footer class=\"text-center mt-8\">\n <p class=\"text-xs text-gray-500\">Hecho con cari\u00f1o para peque\u00f1os astr\u00f3logos \u2728<\/p>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ Referencias a elementos del DOM\n const nombreInput = document.getElementById('nombre');\n const diaInput = document.getElementById('dia');\n const mesInput = document.getElementById('mes');\n const resultadoDiv = document.getElementById('resultadoSigno');\n const verSignoButton = document.getElementById('verSignoButton');\n const buscarOtroButton = document.getElementById('buscarOtroButton');\n \n const placeholderResultado = '<p class=\"text-center text-gray-500\">Ingresa tus datos para ver la magia...<\/p>';\n\n \/\/ Array con la informaci\u00f3n de los signos zodiacales\n const signosZodiaco = [\n {\n nombre: \"Aries\",\n rango: { inicio: { mes: 3, dia: 21 }, fin: { mes: 4, dia: 19 } },\n emoji: \"\u2648\ufe0f\",\n descripcion: \"\u00a1Eres Aries, como una chispita de energ\u00eda! Te encanta empezar cosas nuevas y eres muy valiente. \u00a1Nada te detiene cuando te propones algo!\",\n amigos: \"Con tus amigos, eres el alma de la aventura. Siempre tienes ideas geniales para jugar y te gusta animar a todos. \u00a1Eres un l\u00edder natural!\",\n familia: \"En casa, llenas todo de alegr\u00eda y entusiasmo. A veces puedes ser un poquito impaciente, \u00a1pero tu gran coraz\u00f3n y tus abrazos lo compensan todo!\",\n consejo: \"\u00a1Sigue brillando con tu energ\u00eda y nunca dejes de intentar cosas nuevas!\"\n },\n {\n nombre: \"Tauro\",\n rango: { inicio: { mes: 4, dia: 20 }, fin: { mes: 5, dia: 20 } },\n emoji: \"\u2649\ufe0f\",\n descripcion: \"\u00a1Eres Tauro, como un \u00e1rbol fuerte y tranquilo! Te gustan las cosas bonitas, los abrazos calentitos y sentirte seguro y feliz.\",\n amigos: \"Con tus amigos, eres s\u00faper leal y cari\u00f1oso. Te encanta compartir tus juguetes favoritos y disfrutas de los juegos calmados y creativos, \u00a1como dibujar o construir!\",\n familia: \"En tu familia, eres quien trae la calma y la dulzura. Disfrutas mucho de los mimos de tus pap\u00e1s y de los momentos tranquilos en casa. \u00a1Un buen cuento es tu plan perfecto!\",\n consejo: \"\u00a1Disfruta de las peque\u00f1as cosas lindas de la vida y recuerda lo especial que eres!\"\n },\n {\n nombre: \"G\u00e9minis\",\n rango: { inicio: { mes: 5, dia: 21 }, fin: { mes: 6, dia: 20 } },\n emoji: \"\u264a\ufe0f\",\n descripcion: \"\u00a1Eres G\u00e9minis, como una mariposa curiosa y parlanchina! Te encanta aprender cosas nuevas, hacer preguntas y hablar con todo el mundo.\",\n amigos: \"Con tus amigos, \u00a1eres pura diversi\u00f3n! Siempre tienes algo interesante que contar y te llevas bien con todos. Hacer amigos es muy f\u00e1cil para ti porque eres muy simp\u00e1tico.\",\n familia: \"En casa, tu curiosidad no tiene fin. \u00a1Preguntas mucho porque quieres saberlo todo! A veces cambias de idea r\u00e1pido, pero tu alegr\u00eda y tus ganas de charlar contagian a todos.\",\n consejo: \"\u00a1Sigue explorando el mundo con tu curiosidad y comparte tus ideas geniales con todos!\"\n },\n {\n nombre: \"C\u00e1ncer\",\n rango: { inicio: { mes: 6, dia: 21 }, fin: { mes: 7, dia: 22 } },\n emoji: \"\u264b\ufe0f\",\n descripcion: \"\u00a1Eres C\u00e1ncer, como un cangrejito tierno y protector! Tienes un coraz\u00f3n enorme, eres muy cari\u00f1oso y te importa mucho c\u00f3mo se sienten los dem\u00e1s.\",\n amigos: \"Con tus amigos, eres el m\u00e1s dulce y cuidadoso. Siempre est\u00e1s ah\u00ed para escuchar y dar los mejores abrazos. \u00a1Te encanta cuidar de tus amigos como si fueran tu tesoro!\",\n familia: \"Para tu familia, eres un sol de cari\u00f1o y ternura. Te encanta estar en casa, sentirte protegido y dar mucho amor. \u00a1Los momentos en familia son tus favoritos!\",\n consejo: \"\u00a1Sigue escuchando a tu gran coraz\u00f3n y repartiendo amor por donde vayas!\"\n },\n {\n nombre: \"Leo\",\n rango: { inicio: { mes: 7, dia: 23 }, fin: { mes: 8, dia: 22 } },\n emoji: \"\u264c\ufe0f\",\n descripcion: \"\u00a1Eres Leo, como un le\u00f3n valiente y brillante! Te gusta ser el centro de atenci\u00f3n, tienes mucha confianza y un coraz\u00f3n generoso.\",\n amigos: \"Con tus amigos, eres el rey o la reina de la diversi\u00f3n. Te encanta organizar los juegos y que todos se diviertan contigo. \u00a1Tu alegr\u00eda es contagiosa!\",\n familia: \"En casa, brillas con luz propia. Te gusta que te feliciten por tus logros y tienes un gran coraz\u00f3n para compartir. \u00a1Eres el sol de tu hogar!\",\n consejo: \"\u00a1Deja que tu luz brille fuerte y comparte tu gran coraz\u00f3n con el mundo!\"\n },\n {\n nombre: \"Virgo\",\n rango: { inicio: { mes: 8, dia: 23 }, fin: { mes: 9, dia: 22 } },\n emoji: \"\u264d\ufe0f\",\n descripcion: \"\u00a1Eres Virgo, como una abejita trabajadora y muy inteligente! Te gusta que todo est\u00e9 ordenado, ayudar a los dem\u00e1s y aprender cosas nuevas.\",\n amigos: \"Con tus amigos, eres detallista y siempre est\u00e1s dispuesto a ayudar. Te fijas en las peque\u00f1as cosas y te gusta que los juegos salgan perfectos. \u00a1Eres un gran compa\u00f1ero!\",\n familia: \"En tu familia, eres muy colaborador y te gusta que todo est\u00e9 en su sitio. Disfrutas ayudando en casa y aprendiendo cosas \u00fatiles de tus pap\u00e1s. \u00a1Eres muy responsable!\",\n consejo: \"\u00a1Sigue usando tu inteligencia para ayudar y crear cosas geniales!\"\n },\n {\n nombre: \"Libra\",\n rango: { inicio: { mes: 9, dia: 23 }, fin: { mes: 10, dia: 22 } },\n emoji: \"\u264e\ufe0f\",\n descripcion: \"\u00a1Eres Libra, como una balanza que busca la armon\u00eda y la belleza! Te gusta que todos se lleven bien, amas las cosas bonitas y eres muy amable.\",\n amigos: \"Con tus amigos, eres el pacificador. No te gustan las peleas y siempre buscas que todos est\u00e9n contentos. \u00a1Te encanta compartir y jugar en equipo!\",\n familia: \"En casa, traes paz y alegr\u00eda. Te gusta que tu hogar sea un lugar bonito y tranquilo. Disfrutas mucho de la compa\u00f1\u00eda de tu familia y de hacer cosas juntos.\",\n consejo: \"\u00a1Sigue buscando la belleza y la amistad en todo lo que haces!\"\n },\n {\n nombre: \"Escorpio\",\n rango: { inicio: { mes: 10, dia: 23 }, fin: { mes: 11, dia: 21 } },\n emoji: \"\u264f\ufe0f\",\n descripcion: \"\u00a1Eres Escorpio, como un detective misterioso y con mucha energ\u00eda! Eres muy intenso, curioso y tienes sentimientos muy profundos.\",\n amigos: \"Con tus amigos, eres muy leal y protector. Guardas los secretos como un tesoro y, aunque a veces parezcas serio, \u00a1eres un amigo incre\u00edble y divertido!\",\n familia: \"En tu familia, eres muy unido y sientes las cosas con mucha fuerza. Eres valiente y siempre defender\u00e1s a los tuyos. \u00a1Tu amor por ellos es muy profundo!\",\n consejo: \"\u00a1Conf\u00eda en tu gran intuici\u00f3n y sigue siendo ese amigo leal y valiente!\"\n },\n {\n nombre: \"Sagitario\",\n rango: { inicio: { mes: 11, dia: 22 }, fin: { mes: 12, dia: 21 } },\n emoji: \"\u2650\ufe0f\",\n descripcion: \"\u00a1Eres Sagitario, como un aventurero explorador y muy optimista! Te encanta aprender, viajar (\u00a1aunque sea con la imaginaci\u00f3n!) y siempre ves el lado bueno de las cosas.\",\n amigos: \"Con tus amigos, eres el m\u00e1s divertido y entusiasta. Siempre tienes una sonrisa y ganas de probar juegos nuevos y emocionantes. \u00a1La aventura te llama!\",\n familia: \"En casa, eres una fuente de alegr\u00eda y buen humor. Te encanta contar historias y hacer re\u00edr a tu familia. \u00a1Tu optimismo ilumina a todos!\",\n consejo: \"\u00a1Nunca pierdas tu esp\u00edritu aventurero y tu sonrisa contagiosa!\"\n },\n {\n nombre: \"Capricornio\",\n rango: { inicio: { mes: 12, dia: 22 }, fin: { mes: 1, dia: 19 } }, \n emoji: \"\u2651\ufe0f\",\n descripcion: \"\u00a1Eres Capricornio, como una cabrita monta\u00f1esa decidida y paciente! Te gusta trabajar para conseguir tus metas y eres muy responsable.\",\n amigos: \"Con tus amigos, eres leal y un poco serio a veces, \u00a1pero muy confiable! Te gustan los juegos que requieren pensar y te esfuerzas para que todo salga bien.\",\n familia: \"En tu familia, eres un ejemplo de esfuerzo. Te tomas en serio tus responsabilidades y te gusta ayudar. \u00a1Tus pap\u00e1s est\u00e1n muy orgullosos de ti!\",\n consejo: \"\u00a1Sigue trabajando por tus sue\u00f1os, pasito a pasito llegar\u00e1s muy alto!\"\n },\n {\n nombre: \"Acuario\",\n rango: { inicio: { mes: 1, dia: 20 }, fin: { mes: 2, dia: 18 } },\n emoji: \"\u2652\ufe0f\",\n descripcion: \"\u00a1Eres Acuario, como un inventor original y amigo de todos! Te encanta ser diferente, tienes ideas geniales y te preocupas por hacer del mundo un lugar mejor.\",\n amigos: \"Con tus amigos, eres \u00fanico y muy divertido. Te gusta tener muchos amigos diferentes y siempre tienes ideas originales para jugar. \u00a1Respetas a todos tal como son!\",\n familia: \"En casa, eres el toque de originalidad. A veces sorprendes con tus ideas y tu forma de ver las cosas. \u00a1Tu familia valora mucho tu gran coraz\u00f3n y tu mente creativa!\",\n consejo: \"\u00a1Sigue siendo t\u00fa mismo y usa tus ideas geniales para ayudar a los dem\u00e1s!\"\n },\n {\n nombre: \"Piscis\",\n rango: { inicio: { mes: 2, dia: 19 }, fin: { mes: 3, dia: 20 } },\n emoji: \"\u2653\ufe0f\",\n descripcion: \"\u00a1Eres Piscis, como un pececito so\u00f1ador y lleno de imaginaci\u00f3n! Tienes un coraz\u00f3n muy grande, eres muy sensible y te encanta ayudar a los dem\u00e1s.\",\n amigos: \"Con tus amigos, eres s\u00faper dulce, comprensivo y un gran artista. Te encanta inventar historias y juegos m\u00e1gicos. A veces necesitas tu espacio para so\u00f1ar un poquito.\",\n familia: \"Para tu familia, eres un tesoro de cari\u00f1o y sensibilidad. Sientes mucho las emociones de los dem\u00e1s y siempre buscas que todos est\u00e9n felices. \u00a1Tus abrazos son m\u00e1gicos!\",\n consejo: \"\u00a1Nunca dejes de so\u00f1ar y de usar tu incre\u00edble imaginaci\u00f3n para crear cosas maravillosas!\"\n }\n ];\n\n \/\/ Funci\u00f3n para limpiar campos y reiniciar la vista\n function reiniciarBusqueda() {\n nombreInput.value = '';\n diaInput.value = '';\n mesInput.value = ''; \/\/ Esto resetea el select a la primera opci\u00f3n si no hay una con value=\"\"\n mesInput.selectedIndex = 0; \/\/ Asegura que se muestre \"Selecciona un mes\"\n \n resultadoDiv.innerHTML = placeholderResultado;\n \n buscarOtroButton.style.display = 'none'; \/\/ Ocultar bot\u00f3n \"Buscar otro signo\"\n verSignoButton.style.display = 'block'; \/\/ Asegurar que el bot\u00f3n principal est\u00e9 visible\n \n nombreInput.focus(); \/\/ Poner el foco en el campo del nombre\n \n \/\/ Limpiar estilos de error si los hubiera\n nombreInput.classList.remove('border-red-500');\n diaInput.classList.remove('border-red-500');\n mesInput.classList.remove('border-red-500');\n nombreInput.classList.add('input-custom-border');\n diaInput.classList.add('input-custom-border');\n mesInput.classList.add('input-custom-border');\n }\n\n \/\/ Funci\u00f3n para mostrar el signo zodiacal\n function mostrarSigno() {\n \/\/ Limpiar estilos de error previos\n nombreInput.classList.remove('border-red-500');\n diaInput.classList.remove('border-red-500');\n mesInput.classList.remove('border-red-500');\n nombreInput.classList.add('input-custom-border');\n diaInput.classList.add('input-custom-border');\n mesInput.classList.add('input-custom-border');\n \n buscarOtroButton.style.display = 'none'; \/\/ Ocultar por si acaso\n\n const nombreUsuario = nombreInput.value.trim(); \n const dia = parseInt(diaInput.value);\n const mes = parseInt(mesInput.value);\n\n let isValid = true;\n let mensajeError = \"\";\n\n if (nombreUsuario === \"\") {\n nombreInput.classList.remove('input-custom-border');\n nombreInput.classList.add('border-red-500');\n mensajeError = \"Por favor, escribe tu nombre.\";\n isValid = false;\n }\n\n if (isNaN(dia) || dia < 1 || dia > 31) {\n diaInput.classList.remove('input-custom-border');\n diaInput.classList.add('border-red-500');\n if (isValid) mensajeError = \"Por favor, ingresa un d\u00eda v\u00e1lido.\";\n isValid = false;\n }\n\n if (isNaN(mes) || mes === \"\" || mes < 1 || mes > 12) {\n mesInput.classList.remove('input-custom-border');\n mesInput.classList.add('border-red-500');\n if (isValid) mensajeError = \"Por favor, selecciona un mes.\";\n isValid = false;\n }\n \n if (isValid) {\n const diasPorMes = [0, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; \n if (dia > diasPorMes[mes]) {\n diaInput.classList.remove('input-custom-border');\n diaInput.classList.add('border-red-500');\n mensajeError = `El mes de ${mesInput.options[mesInput.selectedIndex].text} no tiene ${dia} d\u00edas.`;\n isValid = false;\n }\n }\n\n if (!isValid) {\n resultadoDiv.innerHTML = `<p class=\"text-center text-red-600 font-semibold resultado-animado\">${mensajeError}<\/p>`;\n return;\n }\n \n nombreInput.classList.remove('border-red-500');\n nombreInput.classList.add('input-custom-border');\n diaInput.classList.remove('border-red-500');\n diaInput.classList.add('input-custom-border');\n mesInput.classList.remove('border-red-500');\n mesInput.classList.add('input-custom-border');\n\n let signoEncontrado = null;\n const fechaUsuarioNum = mes * 100 + dia;\n\n for (const signo of signosZodiaco) {\n const inicioNum = signo.rango.inicio.mes * 100 + signo.rango.inicio.dia;\n const finNum = signo.rango.fin.mes * 100 + signo.rango.fin.dia;\n\n if (inicioNum <= finNum) { \n if (fechaUsuarioNum >= inicioNum && fechaUsuarioNum <= finNum) {\n signoEncontrado = signo;\n break;\n }\n } else { \n if (fechaUsuarioNum >= inicioNum || fechaUsuarioNum <= finNum) {\n signoEncontrado = signo;\n break;\n }\n }\n }\n\n if (signoEncontrado) {\n const infoSigno = `\n <div class=\"resultado-animado text-center\">\n <p class=\"text-6xl mb-4\">${signoEncontrado.emoji}<\/p> \n <h2 class=\"text-2xl md:text-3xl font-bold text-[var(--custom-violet)] text-center mb-3\">${nombreUsuario}, tu signo es ${signoEncontrado.nombre}<\/h2>\n <div class=\"space-y-3 text-gray-700 text-left\">\n <p><strong class=\"strong-text-custom\">\ud83c\udf1f As\u00ed eres t\u00fa (${signoEncontrado.nombre}):<\/strong> ${signoEncontrado.descripcion}<\/p>\n <p><strong class=\"strong-text-custom\">\ud83d\udc6b Con tus amigos:<\/strong> ${signoEncontrado.amigos}<\/p>\n <p><strong class=\"strong-text-custom\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d\udc66 Con tu familia:<\/strong> ${signoEncontrado.familia}<\/p>\n <p class=\"mt-4 pt-3 border-t italic text-center consejo-text font-semibold\">${signoEncontrado.consejo}<\/p>\n <\/div>\n <\/div>\n `;\n resultadoDiv.innerHTML = infoSigno;\n \n verSignoButton.style.display = 'none'; \/\/ Ocultar bot\u00f3n \"Ver mi signo\"\n buscarOtroButton.style.display = 'block'; \/\/ Mostrar bot\u00f3n \"Buscar otro signo\"\n\n } else {\n resultadoDiv.innerHTML = `<p class=\"text-center text-red-600 font-semibold resultado-animado\">\u00a1Oh! No pudimos encontrar tu signo con esa fecha. Revisa los datos e intenta de nuevo.<\/p>`;\n verSignoButton.style.display = 'block'; \/\/ Asegurar que el bot\u00f3n principal est\u00e9 visible si hay error\n buscarOtroButton.style.display = 'none';\n }\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u2728 La App de Signos de Sof\u00eda \u2728 \u2728 La App de Signos de Sof\u00eda \u2728 Dime tu nombre y fecha de nacimiento (d\u00eda y mes) y te contar\u00e9 un secreto de las estrellas. Tu nombre: D\u00eda: Mes: Selecciona un mesEneroFebreroMarzoAbrilMayoJunioJulioAgostoSeptiembreOctubreNoviembreDiciembre \u00a1Ver mi signo! Ingresa tus datos para ver la magia… Buscar otro signo Hecho […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-187","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/pages\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":3,"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/pages\/187\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/pages\/187\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/elcalafate.online\/index.php\/wp-json\/wp\/v2\/media?parent=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}