<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Astrología Cenuitica Profesional</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; }
body { font-family: 'Inter', sans-serif; background-color: #0f172a; color: #e2e8f0; }
.card { background-color: #1e293b; border: 1px solid #334155; border-radius: 1rem; padding: 1.5rem; transition: all 0.3s ease; }
.matiz-card { background-color: #334155; }
.btn-primary { background: linear-gradient(90deg, #818cf8, #c084fc); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(192, 132, 252, 0.2); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(192, 132, 252, 0.3); }
.btn-primary:disabled { background: #334155; cursor: not-allowed; }
.btn-secondary { background-color: #475569; border: 1px solid #64748b; }
.btn-secondary:hover { background-color: #64748b; }
.result-hidden { opacity: 0; transform: translateY(20px); max-height: 0; overflow: hidden; transition: all 0.7s ease-in-out; }
.result-visible { opacity: 1; transform: translateY(0); max-height: 20000px; transition: all 0.7s ease-in-out; }
.form-input { background-color: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 0.75rem; width: 100%; border-radius: 0.5rem; -moz-appearance: textfield; }
.form-input::-webkit-outer-spin-button, .form-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.form-input:focus, .form-select:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 2px #4338ca; }
.form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; background-color: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 0.75rem; width: 100%; border-radius: 0.5rem; }
</style>
</head>
<body class="py-8 md:py-12 px-4">
<main class="w-full max-w-4xl mx-auto space-y-8">
<div class="text-center">
<h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400 mb-2">Astrología Cenuitica</h1>
<p class="text-slate-400">Descubre tu perfil astrológico completo y tu historia personal.</p>
</div>
<div class="card">
<h2 class="text-xl font-semibold mb-4 text-slate-100">Introduce tus datos</h2>
<div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
<div class="sm:col-span-1"><label class="block text-xs font-medium text-slate-400 mb-1">Día</label><input type="number" id="birth-day" placeholder="DD" min="1" max="31" class="form-input text-lg"></div>
<div class="sm:col-span-1"><label class="block text-xs font-medium text-slate-400 mb-1">Mes</label><input type="number" id="birth-month" placeholder="MM" min="1" max="12" class="form-input text-lg"></div>
<div class="sm:col-span-1"><label class="block text-xs font-medium text-slate-400 mb-1">Año</label><input type="number" id="birth-year" placeholder="AAAA" min="1900" max="2100" class="form-input text-lg"></div>
<div class="sm:col-span-1"><label class="block text-xs font-medium text-slate-400 mb-1">Género</label><select id="gender" class="form-select text-lg h-[53px]"><option value="f">Femenino</option><option value="m">Masculino</option></select></div>
</div>
<div class="mt-4"><button id="calculateBtn" class="w-full px-6 py-3 font-semibold text-white rounded-lg btn-primary text-lg flex items-center justify-center"><span id="btn-text">Calcular Mi Perfil</span><div id="btn-spinner" class="spinner ml-3 hidden"></div></button></div>
<p id="error-message" class="text-red-400 mt-2 text-sm hidden"></p>
</div>
<div id="results" class="result-hidden space-y-6">
<div id="main-horoscope" class="card text-center"></div>
<div id="explanation-card" class="card"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div id="matiz-1" class="card matiz-card"></div>
<div id="matiz-2" class="card matiz-card"></div>
<div id="matiz-3" class="card matiz-card"></div>
<div id="matiz-4" class="card matiz-card"></div>
<div id="matiz-5" class="card matiz-card"></div>
</div>
<div id="synthesized-profile" class="card"></div>
<div id="character-story-card" class="card"></div>
<div id="life-situations-card" class="card"></div>
<div id="final-report-container" class="card"></div>
</div>
</main>
<script>
// --- ASTROLOGY DATA (MOVED HERE FOR STABILITY) ---
const ZODIAC_SIGNS = [
{ name: 'Aries', emoji: '♈', start: { m: 3, d: 21 }, detail: 'Tu esencia es la de un/a pionero/a, un/a guerrero/a que abre caminos. Eres una persona de acción, llena de energía pura y coraje, que no teme empezar de cero. Tu espíritu competitivo te impulsa a ser el/la primero/a y el/la mejor, y tu independencia es una de tus mayores fortalezas, aunque a veces puede llevarte a la impaciencia. Vives la vida de frente, con una honestidad brutal y un entusiasmo que puede inspirar a ejércitos enteros.'},
{ name: 'Tauro', emoji: '♉', start: { m: 4, d: 20 }, detail: 'Buscas la estabilidad, la seguridad y la belleza en todos los aspectos de tu vida. Eres paciente, leal y trabajador/a, con una increíble perseverancia que te permite construir imperios ladrillo a ladrillo. Disfrutas de los placeres sensoriales y valoras profundamente el confort material y la naturaleza. Eres confiable y firme como una roca, aunque tu aversión al cambio a veces puede convertirse en terquedad. Tu lema es "lento pero seguro".'},
{ name: 'Géminis', emoji: '♊', start: { m: 5, d: 21 }, detail: 'Tu mente es un torbellino de ideas: rápida, curiosa y siempre hambrienta de nueva información. Eres un/a comunicador/a nato/a, social y adaptable, capaz de ver todos los lados de una situación con una agilidad mental asombrosa. La variedad es la sal de tu vida y la rutina tu mayor enemigo. Tu dualidad te hace versátil y encantador/a, aunque a veces puede llevarte a la dispersión o a parecer superficial.'},
{ name: 'Cáncer', emoji: '♋', start: { m: 6, d: 21 }, detail: 'Tu núcleo es profundamente emocional y sensible. Eres intuitivo/a, protector/a y valoras por encima de todo los lazos familiares y afectivos. Tu capacidad para cuidar y nutrir a los demás es inmensa. Como el cangrejo, posees un caparazón para proteger tu tierno interior, lo que puede hacerte parecer reservado/a o tímido/a al principio. Tu memoria emocional es prodigiosa y tu lealtad a los tuyos es inquebrantable.'},
{ name: 'Leo', emoji: '♌', start: { m: 7, d: 23 }, detail: 'Posees un corazón noble, un carisma magnético y un brillo natural que atrae a los demás. Eres creativo/a, generoso/a y te sientes cómodo/a siendo el centro de atención, no por ego, sino por un deseo genuino de compartir tu luz y alegría. Tu lealtad y tu espíritu de liderazgo son magnéticos. Amas con grandeza y defiendes a los tuyos con la fiereza de un león/una leona, buscando siempre dejar una huella de tu paso por el mundo.'},
{ name: 'Virgo', emoji: '♍', start: { m: 8, d: 23 }, detail: 'Eres una persona analítica, práctica y orientada al detalle. Buscas la perfección en todo lo que haces, no por vanidad, sino por un profundo deseo de ser útil y eficiente. Tienes una fuerte vocación de servicio. Tu mente lógica y tu capacidad para organizar el caos te convierten en alguien en quien se puede confiar para resolver cualquier problema. A veces puedes ser demasiado crítico/a contigo mismo/a y con los demás, pero siempre es en pos de la mejora.'},
{ name: 'Libra', emoji: '♎', start: { m: 9, d: 23 }, detail: 'Eres el/la diplomático/a del zodiaco. Buscas el equilibrio, la justicia y la armonía en todas tus interacciones. Eres sociable, encantador/a y tienes un don para mediar en conflictos. Valoras las relaciones y la cooperación por encima de la competición. Tu fuerte sentido de la estética y la belleza se refleja en tu entorno y en tu persona. La toma de decisiones puede ser un desafío, ya que sopesas cada opción para encontrar la más justa y equitativa.'},
{ name: 'Escorpio', emoji: '♏', start: { m: 10, d: 23 }, detail: 'Tu naturaleza es intensa, apasionada y magnética. No te conformas con la superficie, buscas la verdad profunda en todo y en todos. Posees una fuerza de voluntad de acero y una increíble capacidad para transformarte y renacer de tus cenizas. Eres leal hasta la médula con quienes se ganan tu confianza, pero formidable si te traicionan. Tu mundo interior es un misterio fascinante, lleno de poder, estrategia y una profunda comprensión de la psique humana.'},
{ name: 'Sagitario', emoji: '♐', start: { m: 11, d: 22 }, detail: 'Eres el/la aventurero/a y filósofo/a del zodiaco, siempre apuntando tu flecha hacia nuevos horizontes. Amas la libertad por encima de todo y buscas constantemente expandir tu mundo, ya sea viajando, estudiando o explorando nuevas ideas. Tu optimismo es contagioso y tu honestidad, a veces brutal, nace de una mente que no entiende de filtros. Buscas el significado de la vida con un entusiasmo y una fe inquebrantables.'},
{ name: 'Capricornio', emoji: '♑', start: { m: 12, d: 22 }, detail: 'Eres la personificación de la ambición, la disciplina y la responsabilidad. Comprendes que las grandes metas se alcanzan con paciencia, trabajo duro y estrategia. Construyes tu vida sobre cimientos sólidos, con una visión a largo plazo. Aunque puedes parecer serio/a o reservado/a, posees un ingenio seco y un profundo sentido de la lealtad. Eres confiable y perseverante, la cabra que siempre llega a la cima de la montaña, sin importar lo escarpada que sea.'},
{ name: 'Acuario', emoji: '♒', start: { m: 1, d: 20 }, detail: 'Eres un ser original, independiente y con una visión puesta en el futuro. Valoras la amistad y el colectivo, y tienes un fuerte impulso humanitario para mejorar el mundo. Rompes con lo convencional y desafías el status quo. A veces puedes parecer distante o excéntrico/a, pero es porque tu mente opera en una frecuencia diferente, pensando en el progreso y la innovación. La libertad individual y la igualdad son tus más altos ideales.'},
{ name: 'Piscis', emoji: '♓', start: { m: 2, d: 19 }, detail: 'Tu esencia es compasiva, soñadora y profundamente conectada con el vasto océano de las emociones y lo espiritual. Tienes una imaginación sin límites y una empatía que te permite sentir lo que otros sienten, disolviendo las barreras entre tú y el resto del mundo. Eres el/la artista, el/la místico/a y el/la sanador/a del zodiaco. Tu sensibilidad es tu mayor don, aunque a veces necesites escapar de la dureza del mundo para recargar tu energía.'}
];
const MATIZ_INTERPRETATIONS = {
Aries: {
ascendente: "Te presentas al mundo de forma directa, enérgica y competitiva. Eres un/a iniciador/a nato/a, con una apariencia dinámica que irradia confianza y una pizca de impaciencia. La gente te ve como alguien valiente que no teme tomar la iniciativa.",
medioCielo: "Tu ambición es ser un/a líder, un/a pionero/a en tu campo. Te atraen las profesiones donde puedas competir, dirigir y ser autónomo/a. Tu reputación pública es la de alguien audaz, emprendedor/a y que no le teme al riesgo.",
descendente: "Buscas socios/as y parejas que sean independientes, directos/as y apasionados/as. Te atrae la gente con iniciativa propia y coraje. Sin embargo, tus relaciones pueden ser un campo de batalla si no aprendes a equilibrar tu yo con el nosotros.",
fondoCielo: "Tu hogar y tus raíces están llenos de actividad y energía, quizás con un toque de conflicto o competencia. Necesitas un espacio privado donde puedas ser independiente y recargar baterías. La autoafirmación es clave para tu seguridad emocional.",
lunar: "Reaccionas a las situaciones de forma instintiva, rápida y a veces impulsiva. Tus emociones son como un fuego que se enciende y se apaga con la misma velocidad. Necesitas sentirte libre para expresar tu enfado o tu pasión sin filtros para estar en paz."
},
Tauro: {
ascendente: "Proyectas una imagen de calma, solidez y fiabilidad. La gente te percibe como alguien estable, paciente y con los pies en la tierra. Tu presencia es tranquilizadora y tienes un gusto innato por la calidad y el confort.",
medioCielo: "Aspiras a construir algo sólido y duradero en tu carrera. Te van bien las profesiones relacionadas con las finanzas, el arte, la tierra o la creación de belleza tangible. Tu reputación es la de alguien trabajador/a, confiable y con una gran perseverancia.",
descendente: "Atraes a personas estables, leales y sensuales. Valoras la seguridad y la fiabilidad en tus parejas. Buscas a alguien que te ofrezca confort y con quien puedas construir una vida placentera y segura, paso a paso.",
fondoCielo: "Tu refugio ideal es un hogar cómodo, bello y estable. La seguridad material y emocional en tu vida privada es fundamental para ti. Tus raíces familiares probablemente te enseñaron el valor de la perseverancia y el trabajo duro.",
lunar: "Tus emociones son estables y profundas, aunque lentas para cambiar. Necesitas seguridad y confort para sentirte bien. Una vez que te aferras a un sentimiento o a una persona, eres increíblemente leal, pero también puedes ser muy testarudo/a."
},
Géminis: {
ascendente: "Tu carta de presentación es la curiosidad y la comunicación. Te muestras como alguien ingenioso/a, adaptable y sociable. Siempre tienes una pregunta o un dato interesante que compartir, y tu energía juvenil y mentalmente ágil es contagiosa.",
medioCielo: "Tu carrera ideal involucra la comunicación, la escritura, la enseñanza o el comercio. Necesitas un trabajo que estimule tu mente y te permita interactuar con mucha gente. Tu reputación es la de ser versátil, inteligente y un/a excelente comunicador/a.",
descendente: "Buscas parejas que sean intelectualmente estimulantes, curiosas y buenas conversadoras. Te atrae la gente que te enseña cosas nuevas y con la que nunca te aburres. Necesitas variedad y comunicación constante en tus relaciones.",
fondoCielo: "Tu hogar puede ser un centro de comunicación, lleno de libros, dispositivos y movimiento. Necesitas estímulo mental incluso en tu espacio privado. Tu seguridad emocional viene de entender las cosas y poder hablar de tus sentimientos.",
lunar: "Procesas tus emociones a través de la lógica y la palabra. Cuando sientes algo, tu primer instinto es analizarlo, hablarlo y entenderlo. Tus sentimientos pueden cambiar rápidamente, reflejando tu necesidad de estímulo y variedad."
},
Cáncer: {
ascendente: "Te muestras al mundo de una forma sensible, protectora y algo reservada. Al principio puedes parecer tímido/a, pero quienes te conocen descubren a una persona increíblemente cariñosa y leal. Tu instinto es cuidar y nutrir.",
medioCielo: "Tu vocación está ligada al cuidado, la nutrición o el trabajo con el público. Profesiones en hostelería, sanidad, o relacionadas con el hogar y la familia te sientan bien. Buscas una carrera que te ofrezca seguridad emocional y donde puedas proteger a otros.",
descendente: "Atraes a parejas que son protectoras, sensibles y que necesitan de tu cuidado, o que por el contrario, te ofrecen la seguridad emocional que anhelas. Buscas crear un vínculo familiar y un nido seguro con la persona que amas.",
fondoCielo: "El hogar es tu santuario absoluto. Tu base emocional, tus raíces y tu familia son el centro de tu universo. Necesitas un espacio privado donde sentirte completamente seguro/a y protegido/a para recargar tu energía emocional.",
lunar: "Tus emociones son profundas, poderosas y están muy ligadas al pasado. Eres muy intuitivo/a y tus estados de ánimo pueden fluctuar como las mareas. Tu instinto principal es protegerte a ti mismo/a y a tus seres queridos."
},
Leo: {
ascendente: "Irradias carisma, confianza y una energía cálida y magnética. Te presentas como alguien creativo/a, generoso/a y con un toque dramático. No pasas desapercibido/a y la gente se siente atraída por tu vitalidad y tu gran corazón.",
medioCielo: "Aspiras a una carrera donde puedas brillar, liderar y expresar tu creatividad. El escenario, la gestión, o cualquier campo que te permita ser el centro de atención es ideal. Buscas el reconocimiento y el aplauso por tus talentos.",
descendente: "Buscas una pareja que sea especial, alguien a quien puedas admirar y que te haga sentir orgulloso/a. Te atrae la gente original, sociable y quizás un poco diferente. En tus relaciones, eres leal y generoso/a, pero necesitas sentirte valorado/a.",
fondoCielo: "Tu hogar es tu castillo y te gusta que sea un reflejo de tu personalidad grandiosa. Eres el rey/la reina de tu casa. La lealtad y el orgullo familiar son fundamentales para tu seguridad y bienestar emocional.",
lunar: "Tus emociones son dramáticas, cálidas y necesitan ser expresadas y reconocidas. Eres orgulloso/a y tu corazón es noble. Cuando te sientes feliz, tu alegría es contagiosa, pero si hieren tu orgullo, tu reacción puede ser teatral."
},
Virgo: {
ascendente: "Te presentas de una forma modesta, inteligente y observadora. La gente te percibe como alguien eficiente, analítico/a y con una atención al detalle impresionante. Eres servicial y práctico/a, siempre buscando la manera de mejorar las cosas.",
medioCielo: "Tu carrera ideal requiere análisis, precisión y servicio. Campos como la sanidad, la investigación, la edición o cualquier trabajo que exija un alto nivel de especialización son perfectos. Tu reputación es la de ser competente, eficiente y perfeccionista.",
descendente: "Atraes a parejas que pueden ser más soñadoras, artísticas o incluso un poco caóticas, a las que sientes que puedes ayudar a poner orden. Buscas a alguien a quien servir y cuidar, pero necesitas aprender a no ser demasiado crítico/a en tus relaciones.",
fondoCielo: "Tu hogar es un espacio limpio, ordenado y funcional. Necesitas rutina y estructura en tu vida privada para sentirte en paz. La salud y los hábitos cotidianos son importantes para tu seguridad emocional.",
lunar: "Reaccionas a las situaciones con análisis y una necesidad de entender. Tu primer instinto es buscar la falla para poder arreglarla. Eres muy sensible a la crítica y te preocupas mucho, lo que te impulsa a buscar la perfección en todo."
},
Libra: {
ascendente: "Proyectas una imagen de encanto, diplomacia y amabilidad. Te muestras como una persona sociable, justa y con un gran sentido de la estética. Evitas el conflicto y buscas la armonía en tus interacciones, lo que te hace muy agradable.",
medioCielo: "Aspiras a una carrera relacionada con la justicia, el arte, la diplomacia o las relaciones públicas. Buscas un entorno laboral armonioso y cooperativo. Tu reputación es la de ser un/a buen/a mediador/a, justo/a y con buen gusto.",
descendente: "Buscas la autoafirmación a través de tus parejas. Te atrae la gente decidida, enérgica e independiente, que toma la iniciativa que a ti a veces te falta. Necesitas equilibrio en tus relaciones, un baile constante entre el yo y el tú.",
fondoCielo: "Tu hogar debe ser un oasis de paz, belleza y armonía. Detestas los conflictos en casa. La relación con tu pareja es fundamental para tu sensación de seguridad y equilibrio interior. La decoración y el ambiente son muy importantes para ti.",
lunar: "Tus emociones buscan el equilibrio. Antes de reaccionar, sopesas los pros y los contras, lo que puede hacerte parecer indeciso/a. Necesitas justicia y armonía para sentirte emocionalmente estable. La injusticia te desequilibra profundamente."
},
Escorpio: {
ascendente: "Tu presencia es magnética, intensa y misteriosa. Proyectas una imagen de poder y autocontrol, y la gente percibe que hay mucho más bajo la superficie. Inspiras respeto y una mezcla de fascinación y cautela.",
medioCielo: "Te atraen las profesiones que implican investigación, estrategia, poder o transformación. La psicología, la cirugía, el trabajo de detective o la gestión de grandes recursos son campos ideales. Tu reputación es la de ser poderoso/a, perspicaz y resiliente.",
descendente: "Buscas relaciones profundas, intensas y transformadoras. Te atraen las personas estables, fiables y con una belleza natural. Necesitas una lealtad absoluta y una conexión que vaya más allá de lo superficial, aunque puedes temer la vulnerabilidad que eso implica.",
fondoCielo: "Tu vida privada es extremadamente reservada y es tu fuente de poder. Necesitas control sobre tu entorno familiar. Tus lazos familiares son profundos e intensos, con posibles luchas de poder o secretos. Tu seguridad viene de tu fortaleza interior.",
lunar: "Tus emociones son abismales, apasionadas y todo o nada. Sientes con una intensidad que pocos pueden comprender. Eres extremadamente perceptivo/a y leal, pero si te sientes traicionado/a, tu reacción es poderosa. Necesitas sentir el control de tus emociones."
},
Sagitario: {
ascendente: "Te presentas al mundo con optimismo, entusiasmo y un gran sentido del humor. Proyectas una imagen de aventurero/a, honesto/a y amante de la libertad. Tu energía es expansiva y la gente te ve como alguien divertido/a y filosófico/a.",
medioCielo: "Aspiras a una carrera que te ofrezca libertad, viajes o la oportunidad de expandir conocimientos. La enseñanza superior, la filosofía, las leyes o el turismo son campos ideales. Tu reputación es la de ser un/a visionario/a, un/a experto/a y un/a buscador/a de la verdad.",
descendente: "Atraes a personas curiosas, inteligentes y comunicativas. Necesitas una pareja que sea tu compañera de aventuras intelectuales y que entienda tu necesidad de espacio y libertad. La comunicación y el aprendizaje mutuo son claves en tus relaciones.",
fondoCielo: "Tu hogar puede ser un reflejo de tus viajes y filosofías, o puedes sentir que tu verdadero hogar está en el mundo. Necesitas libertad y espacio en tu vida privada. Tu seguridad emocional viene de tu fe y tus convicciones personales.",
lunar: "Reaccionas a las situaciones con optimismo y una necesidad de entender el panorama general. Tus emociones son francas y directas. Necesitas sentirte libre para explorar tus sentimientos y no te gusta que te aten. La fe en el futuro te estabiliza."
},
Capricornio: {
ascendente: "Proyectas una imagen de seriedad, competencia y madurez. La gente te percibe como alguien responsable, ambicioso/a y con un gran autocontrol. Inspiras respeto y confianza por tu apariencia capaz y disciplinada.",
medioCielo: "Tu ambición es llegar a la cima de tu profesión y construir un legado duradero. La política, la dirección de empresas o cualquier campo que requiera estrategia y responsabilidad son ideales para ti. Buscas estatus y reconocimiento por tus logros.",
descendente: "Buscas en tus parejas el calor, el cuidado y la seguridad emocional que a veces no te permites mostrar. Te atrae la gente protectora y sensible. En tus relaciones, ofreces estructura y fiabilidad a cambio de nutrición emocional.",
fondoCielo: "La familia y las tradiciones son el pilar de tu seguridad. Eres el/la pilar de tu hogar. Asumes mucha responsabilidad en tu vida privada. Tu hogar es tu base de operaciones, desde donde planificas tus ambiciones.",
lunar: "Controlas tus emociones con disciplina. Tu reacción instintiva ante una crisis es tomar el control y ser práctico/a. No te sientes cómodo/a mostrando vulnerabilidad. Necesitas sentir que eres competente y que tienes el respeto de los demás para estar seguro/a."
},
Acuario: {
ascendente: "Te presentas como alguien original, amistoso/a e independiente. Proyectas una imagen un tanto excéntrica o de ir a contracorriente. La gente te ve como alguien inteligente, humanitario/a y un poco impredecible.",
medioCielo: "Aspiras a una carrera que sea innovadora, que tenga un impacto social o que esté relacionada con la tecnología o la ciencia. Necesitas libertad e independencia en tu trabajo. Tu reputación es la de ser un/a reformador/a, un/a visionario/a o un/a genio/a un poco loco/a.",
descendente: "Atraes a personas carismáticas, creativas y que tienen algo especial que les hace brillar. Te gusta tener una pareja que sea el centro de atención, mientras tú observas desde una perspectiva más objetiva. Necesitas una relación que respete tu independencia.",
fondoCielo: "Tu vida familiar puede ser poco convencional o inestable. Tu sentido de pertenencia puede estar más en tus grupos de amigos que en tu familia de origen. Necesitas libertad y espacio en tu hogar. Tu seguridad viene de tus ideales y amistades.",
lunar: "Procesas tus emociones desde una perspectiva lógica y desapegada. Tu reacción instintiva es analizar el sentimiento en lugar de sentirlo. Valoras la amistad y la igualdad en tus conexiones emocionales. Necesitas sentirte libre y único/a."
},
Piscis: {
ascendente: "Proyectas una imagen soñadora, compasiva y un poco esquiva. La gente te percibe como alguien sensible, artístico/a y empático/a, aunque a veces un poco perdido/a en tu propio mundo. Tu aura es suave y adaptable.",
medioCielo: "Tu vocación ideal está en el arte, la sanación, la espiritualidad o el servicio desinteresado. Buscas una carrera que te permita usar tu imaginación y compasión. Tu reputación puede ser la de un/a artista inspirado/a o un/a místico/a.",
descendente: "Buscas parejas que sean prácticas, organizadas y que te ayuden a poner los pies en la tierra. Te atrae la gente que pone orden en tu caos y que cuida de los detalles prácticos de la vida. Necesitas a alguien que te ancle.",
fondoCielo: "Tu hogar es tu santuario espiritual, un lugar para soñar y escapar de la dureza del mundo. La paz y la tranquilidad son fundamentales para tu bienestar. Eres muy sensible a las energías de tu entorno familiar.",
lunar: "Tus emociones son un océano sin límites. Eres extremadamente sensible, psíquico/a y compasivo/a. Absorbes los sentimientos de los demás como una esponja. Tu reacción instintiva es fluir, adaptarte o escapar a tu mundo de fantasía."
}
};
// --- APP LOGIC ---
const dayInput = document.getElementById('birth-day');
const monthInput = document.getElementById('birth-month');
const yearInput = document.getElementById('birth-year');
const genderSelect = document.getElementById('gender');
const calculateBtn = document.getElementById('calculateBtn');
const btnText = document.getElementById('btn-text');
const btnSpinner = document.getElementById('btn-spinner');
const resultsContainer = document.getElementById('results');
const errorMessage = document.getElementById('error-message');
function checkInputs() {
calculateBtn.disabled = !(dayInput.value && monthInput.value && yearInput.value.length === 4);
}
[dayInput, monthInput, yearInput].forEach(input => input.addEventListener('input', checkInputs));
checkInputs();
calculateBtn.addEventListener('click', async () => {
const day = parseInt(dayInput.value);
const month = parseInt(monthInput.value);
const year = parseInt(yearInput.value);
const gender = genderSelect.value;
if (!day || !month || !year) { errorMessage.textContent = 'Por favor, completa todos los campos.'; errorMessage.classList.remove('hidden'); return; }
const date = new Date(year, month - 1, day);
if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) { errorMessage.textContent = 'La fecha introducida no es válida (ej. 31 de Febrero).'; errorMessage.classList.remove('hidden'); return; }
errorMessage.classList.add('hidden');
const utcBirthDate = new Date(Date.UTC(year, month - 1, day));
if (utcBirthDate > new Date()) { errorMessage.textContent = 'La fecha de nacimiento no puede ser en el futuro.'; errorMessage.classList.remove('hidden'); return; }
calculateBtn.disabled = true;
btnText.textContent = 'Calculando...';
btnSpinner.classList.remove('hidden');
resultsContainer.classList.add('result-hidden');
const mainSign = getMainHoroscope(utcBirthDate);
const matiz1 = calculateMatiz1(utcBirthDate, mainSign);
const matiz2 = calculateMatiz2(utcBirthDate.getUTCFullYear());
const matiz3 = calculateMatiz3(utcBirthDate.getUTCFullYear());
const matiz4 = calculateMatiz4(utcBirthDate);
const matiz5 = calculateMatiz5(utcBirthDate);
const resultsData = { mainSign, matiz1, matiz2, matiz3, matiz4, matiz5, gender };
displayStaticContent(resultsData);
resultsContainer.classList.remove('result-hidden');
await displayCreativeContent(resultsData);
calculateBtn.disabled = false;
btnText.textContent = 'Calcular Mi Perfil';
btnSpinner.classList.add('hidden');
});
function getMainHoroscope(date) {
const day = date.getUTCDate(); const month = date.getUTCMonth() + 1;
for (let i = 0; i < ZODIAC_SIGNS.length; i++) {
const sign = ZODIAC_SIGNS[i]; const nextSign = ZODIAC_SIGNS[(i + 1) % 12];
if ((month === sign.start.m && day >= sign.start.d) || (month === nextSign.start.m && day < nextSign.start.d)) return sign;
}
return ZODIAC_SIGNS.find(s => s.name === 'Capricornio');
}
function calculateMatiz1(date, mainSign) {
let birthYear = date.getUTCFullYear(); const birthMonth = date.getUTCMonth() + 1;
let signStartYear = birthYear;
if (birthMonth < mainSign.start.m) { signStartYear = birthYear - 1; }
const signIndex = ZODIAC_SIGNS.findIndex(s => s.name === mainSign.name);
const nextSign = ZODIAC_SIGNS[(signIndex + 1) % 12];
const startDate = new Date(Date.UTC(signStartYear, mainSign.start.m - 1, mainSign.start.d));
let endDateYear = signStartYear;
if (nextSign.start.m < mainSign.start.m) { endDateYear++; }
const endDate = new Date(Date.UTC(endDateYear, nextSign.start.m - 1, nextSign.start.d));
const totalSignDuration = (endDate - startDate) / 86400000;
const daysIntoSign = (date - startDate) / 86400000;
const percentageIntoSign = daysIntoSign / totalSignDuration;
const subSignIndex = Math.max(0, Math.min(11, Math.floor(percentageIntoSign * 12)));
return ZODIAC_SIGNS[subSignIndex];
}
function calculateMatiz2(year) { const a = year / 12; const b = a / 12; const c = Math.floor(b) * 12; const d = Math.floor(a) - c; return ZODIAC_SIGNS[d % 12]; }
function calculateMatiz3(year) { const a = year / 12; const b = Math.floor(a) * 12; const c = year - b; return ZODIAC_SIGNS[c % 12]; }
function getTotalDaysFromYear1(birthDate) {
const birthDateUTC = Date.UTC(birthDate.getUTCFullYear(), birthDate.getUTCMonth(), birthDate.getUTCDate());
const yearOneDate = new Date(0); yearOneDate.setUTCFullYear(1, 0, 1); yearOneDate.setUTCHours(0,0,0,0);
return Math.round((birthDateUTC - yearOneDate.getTime()) / 86400000) + 1;
}
function calculateMatiz4(birthDate) { const totalDays = getTotalDaysFromYear1(birthDate); const a = totalDays / 12; const b = a / 12; const c = Math.floor(b) * 12; const d = Math.floor(a) - c; return ZODIAC_SIGNS[d % 12]; }
function calculateMatiz5(birthDate) { const totalDays = getTotalDaysFromYear1(birthDate); const a = totalDays / 12; const b = Math.floor(a) * 12; const c = totalDays - b; return ZODIAC_SIGNS[c % 12]; }
function personalizeText(text, gender) {
if (!text || typeof text !== 'string') return '';
const options = text.split('/');
if (options.length === 2) {
return gender === 'm' ? options[0] : options[1];
}
return text;
}
function generateCharacterName(signs) {
const part1 = signs[0].name.substring(0, 2);
const part2 = signs[1].name.substring(0, 1);
const part3 = signs[2].name.substring(0, 2);
const part4 = signs[3].name.substring(0, 1);
const part5 = signs[4].name.substring(0, 2);
const part6 = signs[5].name.substring(0, 1);
const name = part1 + part2 + part3 + part4 + part5 + part6;
return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
}
async function generateCreativeContent(prompt) {
const apiKey = "";
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
const payload = { contents: [{ role: "user", parts: [{ text: prompt }] }] };
try {
const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
if (!response.ok) throw new Error(`API request failed with status ${response.status}`);
const result = await response.json();
if (result.candidates && result.candidates[0].content.parts.length > 0) {
return result.candidates[0].content.parts[0].text;
}
return "No se pudo generar el contenido. La respuesta de la IA estaba vacía.";
} catch (error) {
console.error("Error fetching from Gemini API:", error);
return `Hubo un error de conexión con el servicio de IA. Por favor, revisa tu conexión e inténtalo de nuevo más tarde. (${error.message})`;
}
}
function displayStaticContent(data) {
const { mainSign, matiz1, matiz2, matiz3, matiz4, matiz5, gender } = data;
document.getElementById('main-horoscope').innerHTML = `<div class="text-6xl mb-4">${mainSign.emoji}</div><h3 class="text-2xl font-bold text-white">Tu Esencia: ${personalizeText(mainSign.name, gender)}</h3><p class="text-slate-300 mt-2">${personalizeText(mainSign.detail, gender)}</p>`;
document.getElementById('explanation-card').innerHTML = `<h3 class="text-xl font-bold text-slate-100 mb-2">Una Nota sobre los Matices</h3><p class="text-slate-400">Los siguientes cinco matices son calculados mediante el sistema Cenuitico. Aunque no son idénticos a los puntos de una carta astral tradicional, cada uno guarda un profundo paralelismo con conceptos astrológicos clave, ofreciendo una visión única de cómo tu energía se manifiesta en diferentes áreas de tu vida.</p>`;
const matizContexts = ['ascendente', 'medioCielo', 'descendente', 'fondoCielo', 'lunar'];
[matiz1, matiz2, matiz3, matiz4, matiz5].forEach((matiz, index) => {
const context = matizContexts[index];
document.getElementById(`matiz-${index + 1}`).innerHTML = createMatizCardHTML(matiz, index + 1, context, gender);
});
document.getElementById('synthesized-profile').innerHTML = `<h3 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-purple-300 mb-3">Tu Perfil en Síntesis</h3><p class="text-slate-300 space-y-3">${personalizeText(generateSynthesizedProfileText(data), gender).replace(/\n/g, '</p><p class="text-slate-300 space-y-3">')}</p>`;
}
async function displayCreativeContent(data) {
const { mainSign, matiz1, matiz2, matiz3, matiz4, matiz5, gender } = data;
const storyCard = document.getElementById('character-story-card');
const situationsCard = document.getElementById('life-situations-card');
const loadingHTML = (title) => `<h3 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-purple-300 mb-3">${title}</h3><div class="flex flex-col items-center justify-center p-8"><div class="spinner mb-4"></div><p class="text-slate-400">Generando texto creativo...</p></div>`;
const characterName = generateCharacterName([mainSign, matiz1, matiz2, matiz3, matiz4, matiz5]);
storyCard.innerHTML = loadingHTML(`La Historia de ${characterName}`);
const genderTerm = gender === 'm' ? 'un hombre' : 'una mujer';
const storyPrompt = `Eres un escritor de astrología creativa. Crea una historia corta sobre ${genderTerm} llamado/a ${characterName}. Su perfil es: Esencia de ${mainSign.name}, se presenta al mundo como un/a Ascendente ${matiz1.name}, su meta pública es un Medio Cielo en ${matiz2.name}, busca en otros un Descendente en ${matiz3.name}, su refugio es un Fondo del Cielo en ${matiz4.name} y su mundo emocional es una Luna en ${matiz5.name}. Muestra estos rasgos en acción en su vida, no los listes.`;
const story = await generateCreativeContent(storyPrompt);
storyCard.innerHTML = `<h3 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-purple-300 mb-3">La Historia de ${characterName}</h3><p class="text-slate-300 space-y-3">${story.replace(/\n\n/g, '</p><p class="text-slate-300 space-y-3">').replace(/\n/g, '<br>')}</p>`;
situationsCard.innerHTML = loadingHTML('Tu Dinámica en la Vida Real');
const situationsPrompt = `Eres un astrólogo práctico. Describe 2 o 3 situaciones realistas para una persona con: Esencia ${mainSign.name}, Ascendente ${matiz1.name}, Medio Cielo ${matiz2.name}, Descendente ${matiz3.name}, Fondo del Cielo ${matiz4.name} y Luna en ${matiz5.name}. Los ejemplos deben mostrar cómo esta combinación se manifiesta en decisiones, relaciones o desafíos cotidianos.`;
const situations = await generateCreativeContent(situationsPrompt);
situationsCard.innerHTML = `<h3 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-purple-300 mb-3">Tu Dinámica en la Vida Real</h3><p class="text-slate-300 space-y-3">${situations.replace(/\n\n/g, '</p><p class="text-slate-300 space-y-3">').replace(/\n/g, '<br>')}</p>`;
document.getElementById('final-report-container').innerHTML = generateFinalReportHTML();
document.getElementById('copyReportBtn').addEventListener('click', () => copyReportToClipboard(data, characterName, story, situations));
}
function generateSynthesizedProfileText(data) {
const { mainSign, matiz1, matiz2, matiz3, matiz4, matiz5 } = data;
return `Tu esencia solar de ${mainSign.name} te da un propósito central. Te presentas al mundo con la máscara de tu Ascendente (Matiz 1) en ${matiz1.name}, la primera impresión que causas.
Tu Medio Cielo (Matiz 2) en ${matiz2.name} revela tus ambiciones y tu rol público, mientras que tu Descendente (Matiz 3) en ${matiz3.name} describe lo que buscas en tus relaciones uno a uno.
Tu mundo interior se ancla en tu Fondo del Cielo (Matiz 4) en ${matiz4.name}, tus raíces y tu refugio emocional. Finalmente, tu Luna (Matiz 5) en ${matiz5.name} gobierna tu instinto y tu reacción emocional más íntima.`;
}
function createMatizCardHTML(sign, num, contextKey, gender) {
const contextTitles = {
ascendente: 'Matiz 1 (Ascendente)',
medioCielo: 'Matiz 2 (Medio Cielo)',
descendente: 'Matiz 3 (Descendente)',
fondoCielo: 'Matiz 4 (Fondo del Cielo)',
lunar: 'Matiz 5 (Signo Lunar)'
};
const title = contextTitles[contextKey];
const interpretation = MATIZ_INTERPRETATIONS[sign.name][contextKey];
return `<div class="flex items-center gap-4 mb-3"><span class="text-4xl">${sign.emoji}</span><div><p class="text-xs text-indigo-300 font-semibold uppercase">${title}</p><h4 class="font-bold text-lg text-white">${personalizeText(sign.name, gender)}</h4></div></div><p class="text-sm text-slate-400 leading-relaxed">${personalizeText(interpretation, gender)}</p>`;
}
function generateFinalReportHTML() {
return `<h3 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-purple-300 mb-3">Tu Informe Completo</h3><p class="text-slate-400 mb-4">Usa este botón para copiar todo tu perfil astrológico, incluyendo las historias generadas.</p><button id="copyReportBtn" class="w-full px-6 py-3 font-semibold text-white rounded-lg btn-secondary">Copiar Informe Completo</button>`;
}
function copyReportToClipboard(data, characterName, story, situations) {
const { mainSign, matiz1, matiz2, matiz3, matiz4, matiz5, gender } = data;
const contextKeys = ['ascendente', 'medioCielo', 'descendente', 'fondoCielo', 'lunar'];
let maticesText = '';
[matiz1, matiz2, matiz3, matiz4, matiz5].forEach((matiz, index) => {
const context = contextKeys[index];
maticesText += `- Matiz ${index + 1} (${matiz.name}): ${personalizeText(MATIZ_INTERPRETATIONS[matiz.name][context], gender)}\n`;
});
const fullReport = `INFORME DE ASTROLOGÍA CENUITICA
---
ESENCIA SOLAR: ${mainSign.name} ${mainSign.emoji}
${personalizeText(mainSign.detail, gender)}
---
SÍNTESIS DEL PERFIL:
${personalizeText(generateSynthesizedProfileText(data), gender)}
---
DETALLE DE MATICES:
${maticesText}
---
LA HISTORIA DE ${characterName.toUpperCase()}:
${story}
---
TU DINÁMICA EN LA VIDA REAL:
${situations}
`;
const textarea = document.createElement('textarea');
textarea.value = fullReport;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
const copyBtn = document.getElementById('copyReportBtn');
copyBtn.textContent = '¡Copiado!';
setTimeout(() => { copyBtn.textContent = 'Copiar Informe Completo'; }, 2000);
}
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario
Conclusiones y opiniones de los lectores: