Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| <title>El Descifrador · Código Teshuá</title> | |
| <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=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet"> | |
| <style> | |
| :root{ | |
| --void:#120726; --void2:#1c0d38; | |
| --neb-glow:#6b2fb3; --violet:#8b5cf6; --lilac:#b57bff; --neb-pink:#e0aaff; | |
| --gold:#f5c451; --gold-soft:#ffd27f; --gold-pale:#ffe9b0; --gold-white:#fff6e0; | |
| --ink:#ece6ff; --ink-dim:#b9a9e6; --ink-mute:#8b78bd; | |
| --disp:"Cinzel Decorative",serif; --sub:"Cinzel",serif; --body:"EB Garamond",serif; | |
| } | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| html,body{min-height:100%} | |
| body{font-family:var(--body); color:var(--ink); background:var(--void); | |
| overflow-x:hidden; -webkit-font-smoothing:antialiased; min-height:100dvh} | |
| #cielo{position:fixed; inset:0; z-index:-2; | |
| background: | |
| radial-gradient(120% 80% at 50% 120%, var(--neb-glow) 0%, transparent 60%), | |
| radial-gradient(140% 120% at 50% -20%, #3a1f6e 0%, transparent 55%), | |
| linear-gradient(180deg, var(--void) 0%, var(--void2) 55%, #0d0520 100%)} | |
| #estrellas{position:fixed; inset:0; z-index:-1; pointer-events:none} | |
| .envoltura{min-height:100dvh; display:flex; flex-direction:column; align-items:center; | |
| justify-content:center; text-align:center; gap:22px; | |
| padding:clamp(26px,8vw,64px) 22px calc(40px + env(safe-area-inset-bottom)); max-width:520px; margin:0 auto} | |
| .sello{font-size:24px; letter-spacing:.5em; color:var(--lilac); opacity:.85} | |
| .marca{font-family:var(--sub); letter-spacing:.4em; text-transform:uppercase; | |
| font-size:11px; color:var(--lilac); opacity:.8} | |
| h1{font-family:var(--disp); font-weight:900; line-height:1.04; | |
| font-size:clamp(34px,10.5vw,60px); letter-spacing:.02em; | |
| background:linear-gradient(180deg,#fff 0%,var(--neb-pink) 55%,var(--lilac) 100%); | |
| -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; | |
| text-shadow:0 0 46px rgba(181,123,255,.35)} | |
| .lema{font-style:italic; font-size:clamp(16px,4.4vw,20px); color:var(--ink-dim); | |
| max-width:32ch; line-height:1.5; margin:0 auto} | |
| form{display:flex; flex-direction:column; gap:12px; width:100%; max-width:400px; margin:4px auto 0} | |
| .campo{text-align:left} | |
| .campo label,.filalbl{font-family:var(--sub); font-size:11px; letter-spacing:.2em; | |
| text-transform:uppercase; color:var(--ink-mute); margin-left:4px} | |
| input,select{width:100%; margin-top:6px; padding:14px 16px; font-family:var(--body); | |
| font-size:17px; color:var(--ink); background:rgba(28,13,56,.7); border:none; | |
| border-radius:12px; box-shadow:inset 0 0 0 1px rgba(181,123,255,.3); transition:box-shadow .25s} | |
| input:focus,select:focus{outline:none; | |
| box-shadow:inset 0 0 0 1px rgba(224,170,255,.9), 0 0 24px -6px rgba(181,123,255,.6)} | |
| .fila{display:grid; grid-template-columns:1fr 1.4fr 1.1fr; gap:9px; margin-top:6px} | |
| select{appearance:none} | |
| .aviso{font-size:14px; color:var(--gold-soft); min-height:18px; font-style:italic} | |
| .brasa{font-family:var(--sub); font-weight:600; letter-spacing:.16em; text-transform:uppercase; | |
| font-size:15px; color:#1a0e34; cursor:pointer; border:none; border-radius:999px; padding:16px 30px; | |
| background:linear-gradient(180deg,var(--gold-pale),var(--gold)); | |
| box-shadow:0 0 0 1px rgba(255,236,180,.6),0 14px 40px -10px rgba(245,196,81,.55),0 0 56px -8px rgba(245,196,81,.5); | |
| transition:transform .25s,box-shadow .35s} | |
| .brasa:hover,.brasa:focus-visible{transform:translateY(-2px);outline:none; | |
| box-shadow:0 0 0 1px rgba(255,236,180,.85),0 18px 52px -8px rgba(245,196,81,.75),0 0 90px -6px rgba(245,196,81,.8)} | |
| /* lectura del alma */ | |
| #lectura{display:none; width:100%; animation:emerge 1s ease both} | |
| #lectura.viva{display:flex; flex-direction:column; align-items:center; gap:18px} | |
| @keyframes emerge{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} | |
| .revelado{font-family:var(--sub); letter-spacing:.16em; text-transform:uppercase; | |
| font-size:12px; color:var(--ink-mute)} | |
| .tribu-nombre{font-family:var(--disp); font-weight:900; font-size:clamp(32px,10vw,54px); | |
| background:linear-gradient(180deg,var(--gold-white),var(--gold-soft) 60%,var(--gold)); | |
| -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; | |
| text-shadow:0 0 50px rgba(245,196,81,.45)} | |
| .emo-grande{font-size:44px; line-height:1} | |
| .tribu-sim{font-style:italic; color:var(--ink-dim); font-size:17px; max-width:28ch} | |
| .cifras{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; max-width:420px} | |
| .cifra{padding:12px 6px; border-radius:12px; background:rgba(28,13,56,.55); | |
| box-shadow:inset 0 0 0 1px rgba(181,123,255,.2)} | |
| .cifra b{display:block; font-family:var(--disp); font-weight:700; font-size:22px; color:var(--lilac)} | |
| .cifra span{font-family:var(--sub); font-size:9.5px; letter-spacing:.12em; | |
| text-transform:uppercase; color:var(--ink-mute)} | |
| .frase{font-style:italic; color:var(--gold-soft); font-size:16px; max-width:32ch; line-height:1.5} | |
| a.silencio{color:var(--ink-mute); font-family:var(--sub); font-size:11px; letter-spacing:.14em; | |
| text-transform:uppercase; text-decoration:none; cursor:pointer; | |
| border-bottom:1px solid rgba(139,120,189,.4); padding-bottom:2px} | |
| /* los 3 caminos */ | |
| .caminos{display:flex; flex-direction:column; gap:12px; width:100%; max-width:420px; margin-top:4px} | |
| .via{display:flex; align-items:center; gap:16px; text-align:left; text-decoration:none; | |
| padding:16px 18px; border-radius:16px; cursor:pointer; | |
| background:linear-gradient(180deg,rgba(45,27,82,.6),rgba(28,13,56,.6)); | |
| box-shadow:inset 0 0 0 1px rgba(181,123,255,.22); | |
| transition:transform .2s,box-shadow .3s,background .3s} | |
| .via:hover{transform:translateY(-2px); | |
| box-shadow:inset 0 0 0 1px rgba(224,170,255,.6),0 12px 34px -16px rgba(139,92,246,.8)} | |
| .via .icono{font-size:26px; min-width:34px; text-align:center} | |
| .via .txt h3{font-family:var(--sub); font-weight:600; letter-spacing:.1em; font-size:15px; color:var(--ink)} | |
| .via .txt p{font-size:14px; color:var(--ink-dim); margin-top:2px; line-height:1.35} | |
| .via.portal{background:linear-gradient(180deg,rgba(66,44,20,.7),rgba(35,20,8,.8)); | |
| box-shadow:inset 0 0 0 1px rgba(245,196,81,.55),0 -10px 30px -14px rgba(245,196,81,.6)} | |
| .via.portal .txt h3{color:var(--gold-white)} | |
| .via .flecha{margin-left:auto; color:var(--lilac); font-size:20px} | |
| .via.portal .flecha{color:var(--gold-soft)} | |
| .nota{font-family:var(--sub); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute)} | |
| @media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.1ms!important}} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="cielo"></div> | |
| <canvas id="estrellas"></canvas> | |
| <div class="envoltura"> | |
| <!-- ENTRADA: el descifrador --> | |
| <div id="entrada" style="display:flex;flex-direction:column;align-items:center;gap:22px;width:100%"> | |
| <div class="sello">✡</div> | |
| <div class="marca">Código Teshuá</div> | |
| <h1>El Descifrador</h1> | |
| <p class="lema">Tu nombre no es solo identidad — es misión. Tu fecha no es solo nacimiento — es sello. Descífralos.</p> | |
| <form onsubmit="descifrar(event)"> | |
| <div class="campo"><label>Nombre</label> | |
| <input id="in-nombre" autocomplete="given-name" placeholder="Tu nombre" required></div> | |
| <div class="campo"><label>Apellidos</label> | |
| <input id="in-apellidos" autocomplete="family-name" placeholder="Tus apellidos" required></div> | |
| <div> | |
| <div class="filalbl">Fecha de nacimiento</div> | |
| <div class="fila"> | |
| <input id="in-dia" inputmode="numeric" placeholder="Día" required> | |
| <select id="in-mes" required> | |
| <option value="" disabled selected>Mes</option> | |
| <option value="1">Enero</option><option value="2">Febrero</option><option value="3">Marzo</option> | |
| <option value="4">Abril</option><option value="5">Mayo</option><option value="6">Junio</option> | |
| <option value="7">Julio</option><option value="8">Agosto</option><option value="9">Septiembre</option> | |
| <option value="10">Octubre</option><option value="11">Noviembre</option><option value="12">Diciembre</option> | |
| </select> | |
| <input id="in-anio" inputmode="numeric" placeholder="Año" required> | |
| </div> | |
| </div> | |
| <div class="aviso" id="aviso"></div> | |
| <button class="brasa" type="submit">Descifrar mi código</button> | |
| </form> | |
| </div> | |
| <!-- LECTURA + 3 CAMINOS --> | |
| <div id="lectura"> | |
| <div class="revelado">Tu alma pertenece a la casa de</div> | |
| <div class="emo-grande" id="emo"></div> | |
| <div class="tribu-nombre" id="tribuNombre">—</div> | |
| <div class="tribu-sim" id="tribuSim"></div> | |
| <div class="cifras"> | |
| <div class="cifra"><b id="cSuma">–</b><span>Suma</span></div> | |
| <div class="cifra"><b id="cCodigo">–</b><span>Código</span></div> | |
| <div class="cifra"><b id="cCamino">–</b><span>Camino</span></div> | |
| <div class="cifra"><b id="cEsencia">–</b><span>Esencia</span></div> | |
| </div> | |
| <p class="frase">El número no describe lo que haces, sino el llamado con que fuiste enviado.</p> | |
| <div class="revelado" style="margin-top:6px">Tus tres caminos</div> | |
| <div class="caminos"> | |
| <a class="via" id="via-libro" onclick="abrir('LIBRO')"> | |
| <span class="icono">📖</span> | |
| <div class="txt"><h3>El Libro</h3><p>TESHUÁ · El Retorno del Alma a la Fuente Divina</p></div> | |
| <span class="flecha">→</span> | |
| </a> | |
| <a class="via" id="via-curso" onclick="abrir('CURSO')"> | |
| <span class="icono">✦</span> | |
| <div class="txt"><h3>El Curso</h3><p>El camino guiado del retorno, paso a paso</p></div> | |
| <span class="flecha">→</span> | |
| </a> | |
| <a class="via portal" id="via-portal" onclick="abrir('PORTAL')"> | |
| <span class="icono">🚪</span> | |
| <div class="txt"><h3>El Portal</h3><p>Entra al Círculo Sagrado — cruza tu Puerta del Retorno</p></div> | |
| <span class="flecha">→</span> | |
| </a> | |
| </div> | |
| <a class="silencio" onclick="reiniciar()">descifrar otro nombre</a> | |
| </div> | |
| </div> | |
| <script> | |
| /* ====== TUS 3 ENLACES — pega aquí las URLs ====== */ | |
| const ENLACES = { | |
| LIBRO: "https://drive.google.com/drive/folders/19jw7DjPpxHArqyZ98tmCdocT4sGUWAWU", | |
| CURSO: "https://cristobaljoseortizguerrero.hotmart.host/pagina-de-ventas-5376df3e-ca42-425e-bfe9-4ef24c8b255c", | |
| PORTAL: "https://cristobal299-circulo-sagrado.static.hf.space" | |
| }; | |
| function abrir(clave){ | |
| const url = ENLACES[clave]; | |
| if(url){ window.location.href = url; } | |
| else { | |
| const via = document.getElementById('via-'+clave.toLowerCase()); | |
| via.querySelector('h3').textContent = 'Pega aquí tu enlace'; | |
| via.querySelector('p').textContent = 'ENLACES.'+clave+' está vacío en el código'; | |
| } | |
| } | |
| /* ====== DESCIFRADOR (réplica exacta del sistema Teshuá) ====== */ | |
| const VALORES = {A:1,B:2,C:20,D:4,E:5,F:80,G:3,H:5,I:10,J:10,K:20,L:30,M:40,N:50, | |
| O:70,P:80,Q:100,R:200,S:60,T:400,U:6,V:6,W:6,X:60,Y:10,Z:7}; | |
| function limpiar(t){ return t.toUpperCase().normalize('NFD').replace(/[^A-Z]/g,''); } | |
| function reducir(n){ while(n>9 && n!==11 && n!==22 && n!==33){ n=(''+n).split('').reduce((s,d)=>s+ +d,0);} return n; } | |
| const TRIBUS = [ | |
| {n:1,nombre:'Rubén',emo:'🌊',sim:'Aguas impetuosas'}, | |
| {n:2,nombre:'Simeón',emo:'👂',sim:'Espada y dispersión'}, | |
| {n:3,nombre:'Leví',emo:'📖',sim:'Sacerdocio y servicio al altar'}, | |
| {n:4,nombre:'Judá',emo:'🦁',sim:'León y cetro'}, | |
| {n:5,nombre:'Isacar',emo:'🕯️',sim:'Asno fuerte entre los apriscos'}, | |
| {n:6,nombre:'Zabulón',emo:'⛵',sim:'Puerto de naves'}, | |
| {n:7,nombre:'Dan',emo:'⚖️',sim:'Serpiente en el camino, juez de su pueblo'}, | |
| {n:8,nombre:'Gad',emo:'🛡️',sim:'Tropa vencedora'}, | |
| {n:9,nombre:'Aser',emo:'🌾',sim:'Pan abundante, manjares de rey'}, | |
| {n:11,nombre:'Neftalí',emo:'🕊️',sim:'Cierva suelta, palabras hermosas'}, | |
| {n:22,nombre:'José',emo:'🌟',sim:'Rama fructífera junto a manantial'}, | |
| {n:33,nombre:'Benjamín',emo:'🏹',sim:'Lobo arrebatador, hijo de la mano derecha'} | |
| ]; | |
| function descifrar(e){ | |
| e.preventDefault(); | |
| const nombre=document.getElementById('in-nombre').value.trim(); | |
| const apellidos=document.getElementById('in-apellidos').value.trim(); | |
| const dia=parseInt(document.getElementById('in-dia').value,10); | |
| const mes=parseInt(document.getElementById('in-mes').value,10); | |
| const anio=parseInt(document.getElementById('in-anio').value,10); | |
| const aviso=document.getElementById('aviso'); | |
| if(!nombre||!apellidos||!(dia>=1&&dia<=31)||!mes||!(anio>=1&&anio<=9999)){ | |
| aviso.textContent='Escribe tu nombre completo y una fecha real.'; return; | |
| } | |
| aviso.textContent=''; | |
| const suma=limpiar(nombre+' '+apellidos).split('').reduce((s,c)=>s+(VALORES[c]||0),0); | |
| const codigo=reducir(suma); | |
| const camino=reducir((''+dia+''+mes+''+anio).split('').reduce((s,d)=>s+ +d,0)); | |
| const esencia=reducir(codigo+camino); | |
| const t=TRIBUS.find(x=>x.n===esencia)||TRIBUS[0]; | |
| document.getElementById('emo').textContent=t.emo; | |
| document.getElementById('tribuNombre').textContent=t.nombre; | |
| document.getElementById('tribuSim').textContent='«'+t.sim+'»'; | |
| document.getElementById('cSuma').textContent=suma; | |
| document.getElementById('cCodigo').textContent=codigo; | |
| document.getElementById('cCamino').textContent=camino; | |
| document.getElementById('cEsencia').textContent=esencia; | |
| document.getElementById('entrada').style.display='none'; | |
| document.getElementById('lectura').classList.add('viva'); | |
| window.scrollTo({top:0,behavior:'smooth'}); | |
| } | |
| function reiniciar(){ | |
| document.getElementById('lectura').classList.remove('viva'); | |
| document.getElementById('entrada').style.display='flex'; | |
| document.getElementById('aviso').textContent=''; | |
| } | |
| /* ====== nebulosa de fondo ====== */ | |
| (function(){ | |
| const c=document.getElementById('estrellas'),x=c.getContext('2d'); let w,h,pts; | |
| function medir(){w=c.width=innerWidth;h=c.height=innerHeight; | |
| pts=Array.from({length:Math.min(140,Math.floor(w*h/9500))},()=>({ | |
| x:Math.random()*w,y:Math.random()*h,r:Math.random()*1.6+.3, | |
| v:Math.random()*.22+.05,a:Math.random()*.6+.2,tw:Math.random()*6.28}));} | |
| medir(); addEventListener('resize',medir); | |
| const red=matchMedia('(prefers-reduced-motion: reduce)').matches; | |
| (function loop(){x.clearRect(0,0,w,h); | |
| for(const p of pts){p.tw+=.02; const b=p.a*(0.6+0.4*Math.sin(p.tw)); | |
| x.beginPath();x.arc(p.x,p.y,p.r,0,7);x.fillStyle=`rgba(224,200,255,${b})`;x.fill(); | |
| if(!red){p.y-=p.v; if(p.y<-4){p.y=h+4;p.x=Math.random()*w;}}} | |
| requestAnimationFrame(loop);})(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |