Consultas Cósmicas – Quantum Travel :root { –color-primary: #4a00e0; –color-secondary: #8e2de2; –color-dark: #1a1a2e; –color-light: #f8f9fa; –color-accent: #00b4db; –color-gradient: linear-gradient(135deg, var(–color-primary), var(–color-secondary)); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(–color-dark); color: var(–color-light); line-height: 1.6; padding: 20px; background-image: radial-gradient(circle at 10% 20%, rgba(74, 0, 224, 0.1) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(142, 45, 226, 0.1) 0%, transparent 20%); } .container { max-width: 800px; margin: 0 auto; padding: 30px; background: rgba(26, 26, 46, 0.8); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); border: 1px solid rgba(74, 0, 224, 0.3); } header { text-align: center; margin-bottom: 30px; } .logo { font-size: 2.5rem; font-weight: 700; background: var(–color-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; } h1 { font-size: 1.8rem; margin-bottom: 10px; color: var(–color-light); } .subtitle { color: var(–color-accent); margin-bottom: 20px; } .form-group { margin-bottom: 25px; } label { display: block; margin-bottom: 8px; font-weight: 500; color: var(–color-accent); } input, textarea, select { width: 100%; padding: 12px 15px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: var(–color-light); font-size: 16px; transition: all 0.3s ease; border: 1px solid rgba(74, 0, 224, 0.2); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(–color-primary); box-shadow: 0 0 0 2px rgba(74, 0, 224, 0.3); } textarea { min-height: 120px; resize: vertical; } .btn { background: var(–color-gradient); color: white; border: none; padding: 14px 25px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: block; width: 100%; letter-spacing: 1px; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .response-area { margin-top: 40px; padding: 20px; border-radius: 10px; background: rgba(0, 180, 219, 0.1); border: 1px solid rgba(0, 180, 219, 0.3); display: none; } .response-title { color: var(–color-accent); margin-bottom: 15px; font-size: 1.3rem; } .response-content { line-height: 1.8; } .cosmic-animation { height: 4px; width: 100%; background: var(–color-gradient); border-radius: 10px; margin: 20px 0; position: relative; overflow: hidden; } .cosmic-animation::after { content: ”; position: absolute; height: 100%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: cosmic-flow 3s infinite linear; } @keyframes cosmic-flow { 0% { left: -30%; } 100% { left: 100%; } } footer { text-align: center; margin-top: 40px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); } @media (max-width: 600px) { .container { padding: 20px; } .logo { font-size: 2rem; } h1 { font-size: 1.5rem; } } document.getElementById(‘quantumForm’).addEventListener(‘submit’, function(e) { e.preventDefault(); // Obtener valores del formulario const topic = document.getElementById(‘topic’).value; const question = document.getElementById(‘question’).value; // Generar una respuesta “cuántica” basada en el tema let response = generateQuantumResponse(topic, question); // Mostrar la respuesta document.getElementById(‘responseContent’).innerHTML = response; document.getElementById(‘responseArea’).style.display = ‘block’; // Desplazarse suavemente a la respuesta document.getElementById(‘responseArea’).scrollIntoView({ behavior: ‘smooth’ }); }); function generateQuantumResponse(topic, question) { // Respuestas predefinidas según el tema seleccionado const responses = { conciencia: `

Tu consulta sobre expansión de conciencia resuena en la matriz cuántica. La conciencia no es un punto fijo, sino un campo de infinitas posibilidades. Para expandirla, comienza observando tus patrones mentales sin juzgarlos, permitiendo que nuevas frecuencias vibracionales se manifiesten.

Te sugerimos meditar durante 11 minutos al día, visualizando cómo tu campo energético se expande más allá de los límites físicos, conectando con la red cósmica de información.

`, realidad: `

La manifestación de realidades paralelas es un proceso de alineación vibratoria. Tu pregunta indica que estás listo para conscientemente elegir entre líneas temporales posibles.

Recuerda: cada pensamiento y emoción sintoniza con una realidad específica. Para manifestar la realidad deseada, mantén una frecuencia emocional coherente con lo que deseas experimentar, especialmente en estados meditativos o previos al sueño.

`, energia: `

Los flujos energéticos cósmicos están siempre disponibles, aunque nuestra capacidad para percibirlos y canalizarlos varía. Tu ser esencial es tanto un receptor como un emisor de estas energías.

Te recomendamos practicar la respiración consciente, imaginando cómo con cada inhalación absorbes energía cósmica pura, y con cada exhalación liberas bloqueos que impiden tu flujo natural.

`, tiempo: `

El tiempo no-lineal es un concepto que la física cuántica explora con interés. Más que una línea recta, el tiempo es una red de posibilidades simultáneas donde pasado, presente y futuro coexisten e interactúan.

Para experimentar esta no-linealidad, practica recordar eventos futuros con la misma claridad con que recuerdas el pasado, disolviendo así las limitaciones perceptivas convencionales.

`, universo: `

La conexión con la inteligencia universal es inherente a tu naturaleza cuántica. No necesitas “conectarte” sino más bien recordar que nunca has estado desconectado.

La sincronicidad es el lenguaje a través del cual el universo responde. Presta atención a las coincidencias significativas que ocurren después de formular tu pregunta, pues contienen mensajes específicos para tu camino.

`, otro: `

Tu consulta trasciende las categorías convencionales, indicando una mente que se expande beyond los paradigmas establecidos. La naturaleza cuántica del universo responde a la intención pura más que a las formas específicas.

Mantén tu pregunta en consciousness durante los próximos días, observando cómo el cosmos te responde a través de dreams, intuiciones y encuentros aparentemente casuales que resonarán con tu búsqueda.

`, default: `

Tu consulta ha sido recibida por el campo cuántico. La respuesta se manifestará en tu experiencia de formas multidimensionales: through sincronicidades, insights repentinos y encuentros significativos.

Mantén una actitud receptiva y observa cómo el universo conspira para responder a tu pregunta de maneras que trascienden la comprensión lineal.

` }; return responses[topic] || responses[‘default’]; } Análisis y mejoras para Consultas Cósmicas – Quantum Travel He revisado tu página web de “Consultas Cósmicas – Quantum Travel” y tiene un diseño muy atractivo con una estética cósmica y cuántica bien lograda. Sin embargo, hay varias mejoras que podrían implementarse para hacerla más funcional, atractiva y profesional. Mejoras propuestas: Agregar animaciones de carga para simular el proceso de “consulta cuántica” Implementar un sistema de preguntas aleatorias para hacer la experiencia más dinámica Añadir efectos de sonido para una experiencia más inmersiva Mejorar la estética visual con partículas y efectos cósmicos Agregar validación de formulario más robusta Incluir un historial de consultas en localStorage Hacer la página más interactiva con elementos que respondan al movimiento del mouse Implementación de mejoras: html Consultas Cósmicas – Quantum Travel :root { –color-primary: #4a00e0; –color-secondary: #8e2de2; –color-dark: #1a1a2e; –color-light: #f8f9fa; –color-accent: #00b4db; –color-gradient: linear-gradient(135deg, var(–color-primary), var(–color-secondary)); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(–color-dark); color: var(–color-light); line-height: 1.6; padding: 20px; background-image: radial-gradient(circle at 10% 20%, rgba(74, 0, 224, 0.1) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(142, 45, 226, 0.1) 0%, transparent 20%); overflow-x: hidden; min-height: 100vh; } /* Partículas cósmicas de fondo */ #particles-js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .container { max-width: 800px; margin: 0 auto; padding: 30px; background: rgba(26, 26, 46, 0.8); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); border: 1px solid rgba(74, 0, 224, 0.3); position: relative; z-index: 1; transition: transform 0.3s ease; } .container:hover { transform: translateY(-5px); } header { text-align: center; margin-bottom: 30px; } .logo { font-size: 2.5rem; font-weight: 700; background: var(–color-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; position: relative; display: inline-block; } .logo::after { content: ”; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background: var(–color-gradient); transform: scaleX(0); transform-origin: right; transition: transform 0.5s ease; } .logo:hover::after { transform: scaleX(1); transform-origin: left; } h1 { font-size: 1.8rem; margin-bottom: 10px; color: var(–color-light); } .subtitle { color: var(–color-accent); margin-bottom: 20px; } .form-group { margin-bottom: 25px; position: relative; } label { display: block; margin-bottom: 8px; font-weight: 500; color: var(–color-accent); } input, textarea, select { width: 100%; padding: 12px 15px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: var(–color-light); font-size: 16px; transition: all 0.3s ease; border: 1px solid rgba(74, 0, 224, 0.2); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(–color-primary); box-shadow: 0 0 0 2px rgba(74, 0, 224, 0.3); transform: scale(1.01); } textarea { min-height: 120px; resize: vertical; } .btn { background: var(–color-gradient); color: white; border: none; padding: 14px 25px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: block; width: 100%; letter-spacing: 1px; position: relative; overflow: hidden; } .btn::before { content: ”; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .btn:hover::before { left: 100%; } .loading { display: none; text-align: center; margin: 20px 0; } .quantum-loader { width: 50px; height: 50px; margin: 0 auto; border: 3px solid rgba(74, 0, 224, 0.3); border-radius: 50%; border-top-color: var(–color-accent); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .response-area { margin-top: 40px; padding: 20px; border-radius: 10px; background: rgba(0, 180, 219, 0.1); border: 1px solid rgba(0, 180, 219, 0.3); display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .response-area.show { opacity: 1; transform: translateY(0); } .response-title { color: var(–color-accent); margin-bottom: 15px; font-size: 1.3rem; } .response-content { line-height: 1.8; } .cosmic-animation { height: 4px; width: 100%; background: var(–color-gradient); border-radius: 10px; margin: 20px 0; position: relative; overflow: hidden; } .cosmic-animation::after { content: ”; position: absolute; height: 100%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: cosmic-flow 3s infinite linear; } @keyframes cosmic-flow { 0% { left: -30%; } 100% { left: 100%; } } .history-btn { background: transparent; color: var(–color-accent); border: 1px solid var(–color-accent); padding: 8px 15px; border-radius: 5px; margin-top: 15px; cursor: pointer; transition: all 0.3s ease; } .history-btn:hover { background: rgba(0, 180, 219, 0.1); } .history-container { display: none; margin-top: 20px; padding: 15px; border-radius: 10px; background: rgba(74, 0, 224, 0.1); border: 1px solid rgba(74, 0, 224, 0.3); } .history-item { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .history-item:last-child { border-bottom: none; } .question-examples { margin-top: 20px; padding: 15px; border-radius: 10px; background: rgba(142, 45, 226, 0.1); border: 1px solid rgba(142, 45, 226, 0.3); } .examples-title { color: var(–color-secondary); margin-bottom: 10px; font-size: 1.1rem; } .example-question { padding: 8px; margin: 5px 0; background: rgba(255, 255, 255, 0.05); border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .example-question:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(5px); } footer { text-align: center; margin-top: 40px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); } @media (max-width: 600px) { .container { padding: 20px; } .logo { font-size: 2rem; } h1 { font-size: 1.5rem; } } https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js // Inicializar partículas document.addEventListener(‘DOMContentLoaded’, function() { particlesJS(‘particles-js’, { particles: { number: { value: 80, density: { enable: true, value_area: 800 } }, color: { value: “#ffffff” }, shape: { type: “circle” }, opacity: { value: 0.5, random: true }, size: { value: 3, random: true }, line_linked: { enable: true, distance: 150, color: “#4a00e0”, opacity: 0.4, width: 1 }, move: { enable: true, speed: 2, direction: “none”, random: true, straight: false, out_mode: “out”, bounce: false } }, interactivity: { detect_on: “canvas”, events: { onhover: { enable: true, mode: “grab” }, onclick: { enable: true, mode: “push” }, resize: true } }, retina_detect: true }); // Cargar historial si existe loadHistory(); // Configurar ejemplos de preguntas setupQuestionExamples(); }); // Configurar ejemplos de preguntas function setupQuestionExamples() { const examples = document.querySelectorAll(‘.example-question’); examples.forEach(example => { example.addEventListener(‘click’, function() { document.getElementById(‘question’).value = this.getAttribute(‘data-question’); }); }); } // Cargar historial desde localStorage function loadHistory() { const history = JSON.parse(localStorage.getItem(‘quantumHistory’)) || []; const historyContainer = document.getElementById(‘historyContent’); if (history.length === 0) { historyContainer.innerHTML = ‘

Aún no has realizado consultas al cosmos.

‘; return; } let historyHTML = ”; history.slice(-5).reverse().forEach(item => { historyHTML += ` `; }); historyContainer.innerHTML = historyHTML; } // Alternar visibilidad del historial document.getElementById(‘viewHistory’).addEventListener(‘click’, function() { const historyContainer = document.getElementById(‘historyContainer’); if (historyContainer.style.display === ‘block’) { historyContainer.style.display = ‘none’; this.textContent = ‘Ver historial de consultas’; } else { historyContainer.style.display = ‘block’; this.textContent = ‘Ocultar historial’; loadHistory(); } }); document.getElementById(‘quantumForm’).addEventListener(‘submit’, function(e) { e.preventDefault(); // Obtener valores del formulario const name = document.getElementById(‘name’).value; const email = document.getElementById(’email’).value; const topic = document.getElementById(‘topic’).value; const question = document.getElementById(‘question’).value; // Validación básica if (!name || !email || !topic || !question) { alert(‘Por favor, completa todos los campos para conectar con el cosmos.’); return; } // Mostrar animación de carga document.getElementById(‘loading’).style.display = ‘block’; document.getElementById(‘responseArea’).classList.remove(‘show’); // Simular proceso de consulta cuántica setTimeout(() => { // Ocultar carga document.getElementById(‘loading’).style.display = ‘none’; // Generar una respuesta “cuántica” basada en el tema let response = generateQuantumResponse(topic, question); // Mostrar la respuesta document.getElementById(‘responseContent’).innerHTML = response; document.getElementById(‘responseArea’).style.display = ‘block’; setTimeout(() => { document.getElementById(‘responseArea’).classList.add(‘show’); }, 10); // Guardar en historial saveToHistory(question, topic); // Desplazarse suavemente a la respuesta document.getElementById(‘responseArea’).scrollIntoView({ behavior: ‘smooth’ }); }, 2000); // Simular 2 segundos de “procesamiento cuántico” }); function saveToHistory(question, topic) { const history = JSON.parse(localStorage.getItem(‘quantumHistory’)) || []; history.push({ question: question, topic: topic, date: new Date().toISOString() }); localStorage.setItem(‘quantumHistory’, JSON.stringify(history)); } function generateQuantumResponse(topic, question) { // Respuestas predefinidas según el tema seleccionado const responses = { conciencia: `

Tu consulta sobre expansión de conciencia resuena en la matriz cuántica. La conciencia no es un punto fijo, sino un campo de infinitas posibilidades. Para expandirla, comienza observando tus patrones mentales sin juzgarlos, permitiendo que nuevas frecuencias vibracionales se manifiesten.

Te sugerimos meditar durante 11 minutos al día, visualizando cómo tu campo energético se expande más allá de los límites físicos, conectando con la red cósmica de información.

La respuesta a tu pregunta “${question}” se manifestará en los próximos días a través de sincronicidades significativas.

`, realidad: `

La manifestación de realidades paralelas es un proceso de alineación vibratoria. Tu pregunta indica que estás listo para conscientemente elegir entre líneas temporales posibles.

Recuerda: cada pensamiento y emoción sintoniza con una realidad específica. Para manifestar la realidad deseada, mantén una frecuencia emocional coherente con lo que deseas experimentar, especialmente en estados meditativos o previos al sueño.

Tu consulta sobre “${question}” sugiere que ya estás en proceso de alineación con la realidad que buscas.

`, energia: `

Los flujos energéticos cósmicos están siempre disponibles, aunque nuestra capacidad para percibirlos y canalizarlos varía. Tu ser esencial es tanto un receptor como un emisor de estas energías.

Te recomendamos practicar la respiración consciente, imaginando cómo con cada inhalación absorbes energía cósmica pura, y con cada exhalación liberas bloqueos que impiden tu flujo natural.

En relación a tu pregunta “${question}“, observa cómo se manifiesta en tu nivel energético durante los cambios lunares.

`, tiempo: `

El tiempo no-lineal es un concepto que la física cuántica explora con interés. Más que una línea recta, el tiempo es una red de posibilidades simultáneas donde pasado, presente y futuro coexisten e interactúan.

Para experimentar esta no-linealidad, practica recordar eventos futuros con la misma claridad con que recuerdas el pasado, disolviendo así las limitaciones perceptivas convencionales.

Tu pregunta “${question}” será respondida de manera no-lineal, posiblemente a través de intuiciones o sueños reveladores.

`, universo: `

La conexión con la inteligencia universal es inherente a tu naturaleza cuántica. No necesitas “conectarte” sino más bien recordar que nunca has estado desconectado.

La sincronicidad es el lenguaje a través del cual el universo responde. Presta atención a las coincidencias significativas que ocurren después de formular tu pregunta, pues contienen mensajes específicos para tu camino.

Tu consulta “${question}” ya ha sido registrada en el campo cuántico y recibirás señales de respuesta.

`, otro: `

Tu consulta trasciende las categorías convencionales, indicando una mente que se expande beyond los paradigmas establecidos. La naturaleza cuántica del universo responde a la intención pura más que a las formas específicas.

Mantén tu pregunta “${question}” en consciousness durante los próximos días, observando cómo el cosmos te responde a través de dreams, intuiciones y encuentros aparentemente casuales que resonarán con tu búsqueda.

`, default: `

Tu consulta “${question}” ha sido recibida por el campo cuántico. La respuesta se manifestará en tu experiencia de formas multidimensionales: through sincronicidades, insights repentinos y encuentros significativos.

Mantén una actitud receptiva y observa cómo el universo conspira para responder a tu pregunta de maneras que trascienden la comprensión lineal.

` }; return responses[topic] || responses[‘default’]; } // Efectos de interacción con el mouse document.addEventListener(‘mousemove’, function(e) { const container = document.querySelector(‘.container’); const xAxis = (window.innerWidth / 2 – e.pageX) / 25; const yAxis = (window.innerHeight / 2 – e.pageY) / 25; container.style.transform = `perspective(1000px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; }); // Resetear la transformación cuando el mouse sale del contenedor document.querySelector(‘.container’).addEventListener(‘mouseleave’, function() { this.style.transform = ‘perspective(1000px) rotateY(0deg) rotateX(0deg)’; });