Tarot de los Condenados \u2014 Casa de Terror<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;700;900&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap\" rel=\"stylesheet\">\n<style>\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESET & BASE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n :root {\n --blood: #8a1010; --blood-bright: #c01818; --blood-glow: rgba(180,20,20,0.5);\n --bone: #c8bca0; --bone-bright: #e8dcc0;\n --rust: #5a3825; --rust-light: #7a5035;\n --void: #060202; --void-light: #0e0505;\n --text: #8a7a6a; --text-dim: #5a4a3a;\n --font-display: 'Cinzel Decorative', serif;\n --font-heading: 'Cinzel', serif;\n --font-body: 'EB Garamond', Georgia, serif;\n }\n html { scroll-behavior: smooth; }\n body {\n background: var(--void);\n color: var(--text);\n font-family: var(--font-body);\n font-size: 18px;\n line-height: 1.75;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n }\n a { color: var(--blood-bright); text-decoration: none; transition: color 0.3s; }\n a:hover { color: var(--bone-bright); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CANVAS DE PART\u00cdCULAS DE FONDO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #particles-canvas {\n position: fixed; inset: 0; z-index: 0; pointer-events: none;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VI\u00d1ETA GLOBAL\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #vignette {\n position: fixed; inset: 0; z-index: 1; pointer-events: none;\n background: radial-gradient(ellipse at center, transparent 25%, rgba(3,1,1,0.85) 100%);\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONTENEDOR PRINCIPAL\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .page-content {\n position: relative; z-index: 2;\n max-width: 900px; margin: 0 auto; padding: 0 24px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVEGACI\u00d3N SUPERIOR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .top-nav {\n display: flex; align-items: center; justify-content: space-between;\n padding: 28px 0; border-bottom: 1px solid rgba(90,56,37,0.2);\n }\n .top-nav a {\n font-family: var(--font-heading); font-size: 12px;\n letter-spacing: 0.25em; color: var(--rust-light);\n text-transform: uppercase; transition: color 0.3s;\n }\n .top-nav a:hover { color: var(--blood-bright); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .hero {\n min-height: 100vh; display: flex; flex-direction: column;\n align-items: center; justify-content: center; text-align: center;\n padding: 60px 0 80px;\n }\n .hero-label {\n font-family: var(--font-heading); font-size: 11px;\n letter-spacing: 0.4em; color: var(--rust-light);\n text-transform: uppercase; margin-bottom: 20px;\n opacity: 0; animation: fadeUp 1s 0.3s forwards;\n }\n .hero-title {\n font-family: var(--font-display); font-size: clamp(36px, 7vw, 72px);\n color: var(--blood-bright); letter-spacing: 0.06em;\n line-height: 1.15; margin-bottom: 16px;\n text-shadow: 0 0 60px var(--blood-glow), 0 0 120px rgba(120,10,10,0.3);\n opacity: 0; animation: fadeUp 1.2s 0.6s forwards;\n }\n .hero-subtitle {\n font-family: var(--font-heading); font-size: clamp(11px, 2vw, 15px);\n letter-spacing: 0.35em; color: var(--rust);\n font-weight: 400; margin-bottom: 50px;\n opacity: 0; animation: fadeUp 1s 0.9s forwards;\n }\n .hero-text {\n max-width: 560px; font-size: 17px; color: var(--text);\n line-height: 1.85; margin-bottom: 50px;\n opacity: 0; animation: fadeUp 1s 1.2s forwards;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTA FLOTANTE (CSS puro)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .card-float {\n width: 160px; height: 240px; position: relative;\n margin-bottom: 60px; perspective: 800px;\n opacity: 0; animation: fadeUp 1.2s 1.5s forwards;\n }\n .card-inner {\n width: 100%; height: 100%; position: relative;\n transform-style: preserve-3d;\n animation: cardHover 6s ease-in-out infinite;\n }\n .card-face {\n position: absolute; inset: 0; border-radius: 8px;\n backface-visibility: hidden; overflow: hidden;\n }\n .card-front, .card-back {\n border: 2px solid var(--rust);\n box-shadow: 0 0 30px rgba(138,16,16,0.3), 0 20px 60px rgba(0,0,0,0.6);\n }\n .card-front {\n background: linear-gradient(135deg, #1a0808, #0e0404);\n display: flex; align-items: center; justify-content: center;\n }\n .card-front svg { width: 80%; height: auto; opacity: 0.9; }\n .card-back {\n background: linear-gradient(135deg, #b8a880, #a09070);\n transform: rotateY(180deg);\n display: flex; align-items: center; justify-content: center;\n flex-direction: column; padding: 20px;\n }\n .card-back .card-num {\n font-family: var(--font-display); font-size: 14px;\n color: var(--blood); margin-bottom: 12px;\n }\n .card-back .card-name-text {\n font-family: var(--font-heading); font-size: 11px;\n color: #3a0505; letter-spacing: 0.15em; text-align: center;\n text-transform: uppercase;\n }\n .card-back .card-mandala {\n width: 70px; height: 70px; border: 1px solid var(--rust);\n border-radius: 50%; margin-bottom: 12px; position: relative;\n display: flex; align-items: center; justify-content: center;\n }\n .card-back .card-mandala::before {\n content: ''; width: 50px; height: 50px;\n border: 1px solid var(--blood); border-radius: 50%;\n position: absolute;\n }\n .card-back .card-mandala::after {\n content: '\u2726'; color: var(--blood); font-size: 16px;\n }\n \/* Brillo bajo la carta *\/\n .card-glow {\n position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);\n width: 180px; height: 40px;\n background: radial-gradient(ellipse, rgba(138,16,16,0.4) 0%, transparent 70%);\n filter: blur(8px); animation: glowPulse 3s ease-in-out infinite;\n }\n\n @keyframes cardHover {\n 0%, 100% { transform: rotateY(-12deg) rotateX(3deg) translateY(0); }\n 25% { transform: rotateY(12deg) rotateX(-2deg) translateY(-8px); }\n 50% { transform: rotateY(-8deg) rotateX(4deg) translateY(-4px); }\n 75% { transform: rotateY(10deg) rotateX(-3deg) translateY(-10px); }\n }\n @keyframes glowPulse {\n 0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(1); }\n 50% { opacity: 1; transform: translateX(-50%) scaleX(1.15); }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BOT\u00d3N CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .cta-wrap {\n opacity: 0; animation: fadeUp 1s 1.8s forwards;\n }\n .cta-btn {\n display: inline-flex; align-items: center; gap: 14px;\n padding: 20px 48px; border: 1px solid var(--blood);\n border-radius: 2px; background: transparent;\n font-family: var(--font-heading); font-size: 14px;\n letter-spacing: 0.2em; color: var(--blood-bright);\n text-transform: uppercase; cursor: pointer;\n position: relative; overflow: hidden;\n transition: all 0.4s ease;\n text-decoration: none;\n }\n .cta-btn::before {\n content: ''; position: absolute; inset: 0;\n background: linear-gradient(135deg, rgba(138,16,16,0.15), rgba(138,16,16,0.05));\n transform: translateX(-100%); transition: transform 0.4s ease;\n }\n .cta-btn:hover::before { transform: translateX(0); }\n .cta-btn:hover {\n border-color: var(--blood-bright); color: var(--bone-bright);\n box-shadow: 0 0 40px rgba(138,16,16,0.3), 0 0 80px rgba(138,16,16,0.1);\n transform: translateY(-2px);\n }\n .cta-btn .arrow {\n font-size: 18px; transition: transform 0.3s;\n }\n .cta-btn:hover .arrow { transform: translateX(4px); }\n \/* Pulso sutil *\/\n .cta-btn::after {\n content: ''; position: absolute; inset: -2px;\n border: 1px solid var(--blood); border-radius: 2px;\n opacity: 0; animation: ctaPulse 2.5s ease-in-out infinite;\n }\n @keyframes ctaPulse {\n 0%, 100% { opacity: 0; transform: scale(1); }\n 50% { opacity: 0.4; transform: scale(1.04); }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N: C\u00d3MO FUNCIONA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .section {\n padding: 100px 0;\n border-top: 1px solid rgba(90,56,37,0.12);\n }\n .section-title {\n font-family: var(--font-display); font-size: clamp(22px, 4vw, 34px);\n color: var(--bone); letter-spacing: 0.08em;\n margin-bottom: 60px; text-align: center;\n }\n .section-title span { color: var(--blood-bright); }\n\n .steps {\n display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 40px; margin-bottom: 20px;\n }\n .step {\n text-align: center; padding: 30px 20px;\n opacity: 0; transform: translateY(30px);\n transition: all 0.6s ease;\n }\n .step.visible { opacity: 1; transform: translateY(0); }\n .step-icon {\n width: 64px; height: 64px; margin: 0 auto 20px;\n border: 1px solid rgba(138,16,16,0.3); border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 24px; color: var(--blood-bright);\n background: rgba(138,16,16,0.05);\n transition: all 0.4s;\n }\n .step:hover .step-icon {\n border-color: var(--blood-bright);\n box-shadow: 0 0 20px rgba(138,16,16,0.2);\n background: rgba(138,16,16,0.1);\n }\n .step-num {\n font-family: var(--font-heading); font-size: 11px;\n color: var(--blood); letter-spacing: 0.3em;\n margin-bottom: 10px;\n }\n .step-title {\n font-family: var(--font-heading); font-size: 15px;\n color: var(--bone); letter-spacing: 0.1em;\n margin-bottom: 10px;\n }\n .step-desc {\n font-size: 15px; color: var(--text-dim); line-height: 1.7;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N: ADVERTENCIA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .warning-box {\n max-width: 640px; margin: 0 auto; padding: 40px;\n border: 1px solid rgba(138,16,16,0.25); border-radius: 4px;\n background: rgba(138,16,16,0.03);\n position: relative; overflow: hidden;\n }\n .warning-box::before {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\n background: linear-gradient(90deg, transparent, var(--blood), transparent);\n }\n .warning-title {\n font-family: var(--font-heading); font-size: 13px;\n letter-spacing: 0.3em; color: var(--blood-bright);\n text-transform: uppercase; margin-bottom: 20px;\n display: flex; align-items: center; gap: 10px;\n }\n .warning-title::before {\n content: ''; width: 20px; height: 1px; background: var(--blood);\n }\n .warning-list {\n list-style: none; display: flex; flex-direction: column; gap: 12px;\n }\n .warning-list li {\n font-size: 15px; color: var(--text-dim);\n padding-left: 24px; position: relative; line-height: 1.6;\n }\n .warning-list li::before {\n content: '\u2726'; position: absolute; left: 0;\n color: var(--blood); font-size: 10px; top: 4px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N: PREVIEW DE CARTAS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .cards-preview {\n display: flex; justify-content: center; align-items: center;\n gap: 0; padding: 40px 0; perspective: 1000px;\n flex-wrap: wrap;\n }\n .preview-card {\n width: 100px; height: 150px; border-radius: 4px;\n border: 1px solid rgba(138,16,16,0.3);\n background: linear-gradient(135deg, #1a0808, #0e0404);\n margin: 0 -12px; position: relative;\n transition: all 0.5s ease; cursor: default;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n display: flex; align-items: center; justify-content: center;\n overflow: hidden;\n }\n .preview-card::after {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(circle at center, rgba(138,16,16,0.15) 0%, transparent 70%);\n }\n .preview-card .pc-symbol {\n font-family: var(--font-display); font-size: 20px;\n color: rgba(200,60,60,0.5); z-index: 1;\n }\n .preview-card:nth-child(1) { transform: rotate(-8deg) translateY(5px); z-index: 1; }\n .preview-card:nth-child(2) { transform: rotate(-3deg) translateY(-3px); z-index: 2; }\n .preview-card:nth-child(3) { transform: rotate(2deg) translateY(-8px); z-index: 3; }\n .preview-card:nth-child(4) { transform: rotate(5deg) translateY(-2px); z-index: 4; }\n .preview-card:nth-child(5) { transform: rotate(9deg) translateY(6px); z-index: 5; }\n .cards-preview:hover .preview-card:nth-child(1) { transform: rotate(-15deg) translateX(-15px) translateY(8px); }\n .cards-preview:hover .preview-card:nth-child(2) { transform: rotate(-7deg) translateX(-8px) translateY(-5px); }\n .cards-preview:hover .preview-card:nth-child(3) { transform: rotate(0deg) translateY(-12px) scale(1.05); box-shadow: 0 0 30px rgba(138,16,16,0.3); }\n .cards-preview:hover .preview-card:nth-child(4) { transform: rotate(8deg) translateX(8px) translateY(-4px); }\n .cards-preview:hover .preview-card:nth-child(5) { transform: rotate(16deg) translateX(15px) translateY(10px); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N: QUOTES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .quotes {\n display: flex; flex-direction: column; gap: 50px;\n max-width: 600px; margin: 0 auto;\n }\n .quote {\n text-align: center; opacity: 0; transform: translateY(20px);\n transition: all 0.7s ease;\n }\n .quote.visible { opacity: 1; transform: translateY(0); }\n .quote-text {\n font-family: var(--font-body); font-style: italic;\n font-size: 20px; color: var(--bone);\n line-height: 1.8; margin-bottom: 16px;\n }\n .quote-attr {\n font-family: var(--font-heading); font-size: 11px;\n letter-spacing: 0.25em; color: var(--text-dim);\n text-transform: uppercase;\n }\n .quote-divider {\n width: 40px; height: 1px; margin: 0 auto;\n background: var(--blood); opacity: 0.4;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CTA FINAL\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .final-cta {\n text-align: center; padding: 80px 0 120px;\n border-top: 1px solid rgba(90,56,37,0.12);\n }\n .final-cta p {\n font-size: 16px; color: var(--text-dim);\n margin-bottom: 40px; max-width: 480px; margin-left: auto; margin-right: auto;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .footer {\n text-align: center; padding: 40px 0;\n border-top: 1px solid rgba(90,56,37,0.12);\n }\n .footer p {\n font-family: var(--font-heading); font-size: 10px;\n letter-spacing: 0.3em; color: var(--text-dim);\n text-transform: uppercase;\n }\n .footer a { color: var(--rust-light); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ANIMACIONES GENERALES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(25px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Separador decorativo *\/\n .deco-line {\n width: 120px; height: 1px; margin: 0 auto 50px;\n background: linear-gradient(90deg, transparent, var(--rust), transparent);\n position: relative;\n }\n .deco-line::after {\n content: '\u25c6'; position: absolute; top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n font-size: 8px; color: var(--blood);\n background: var(--void); padding: 0 12px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (max-width: 640px) {\n .hero { padding: 40px 0 60px; }\n .card-float { width: 130px; height: 195px; }\n .steps { grid-template-columns: 1fr; gap: 24px; }\n .preview-card { width: 70px; height: 105px; margin: 0 -8px; }\n .preview-card .pc-symbol { font-size: 14px; }\n .cta-btn { padding: 16px 32px; font-size: 12px; }\n .warning-box { padding: 28px 20px; }\n .section { padding: 70px 0; }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n REDUCED MOTION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n .card-inner { animation: none; transform: rotateY(-5deg); }\n }\n<\/style>\n<\/head>\n<body>\n\n<canvas id=\"particles-canvas\"><\/canvas>\n<div id=\"vignette\"><\/div>\n\n<div class=\"page-content\">\n\n \n <nav class=\"top-nav\">\n <a href=\"\/\">Casa de Terror<\/a>\n <a href=\"#como-funciona\">C\u00f3mo funciona<\/a>\n <\/nav>\n\n \n <section class=\"hero\">\n <p class=\"hero-label\">Una experiencia interactiva de casadeterror.com<\/p>\n <h1 class=\"hero-title\">Tarot de los Condenados<\/h1>\n <p class=\"hero-subtitle\">Veintid\u00f3s cartas. Veintid\u00f3s maldiciones.<\/p>\n\n \n <div class=\"card-float\">\n <div class=\"card-inner\">\n <div class=\"card-face card-front\">\n <svg viewBox=\"0 0 120 180\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <rect x=\"4\" y=\"4\" width=\"112\" height=\"172\" rx=\"4\" stroke=\"#7a3020\" stroke-width=\"2\"\/>\n <rect x=\"10\" y=\"10\" width=\"100\" height=\"160\" rx=\"2\" stroke=\"#5a2015\" stroke-width=\"0.8\"\/>\n \n <circle cx=\"60\" cy=\"85\" r=\"42\" stroke=\"#a03030\" stroke-width=\"1\" fill=\"none\"\/>\n <g stroke=\"#c04040\" stroke-width=\"2\" stroke-linecap=\"round\">\n <line x1=\"60\" y1=\"43\" x2=\"60\" y2=\"32\"\/><line x1=\"91\" y1=\"54\" x2=\"100\" y2=\"47\"\/>\n <line x1=\"102\" y1=\"85\" x2=\"113\" y2=\"85\"\/><line x1=\"91\" y1=\"116\" x2=\"100\" y2=\"123\"\/>\n <line x1=\"60\" y1=\"127\" x2=\"60\" y2=\"138\"\/><line x1=\"29\" y1=\"116\" x2=\"20\" y2=\"123\"\/>\n <line x1=\"18\" y1=\"85\" x2=\"7\" y2=\"85\"\/><line x1=\"29\" y1=\"54\" x2=\"20\" y2=\"47\"\/>\n <\/g>\n \n <polygon points=\"60,50 76,108 36,74 84,74 44,108\" stroke=\"#e84848\" stroke-width=\"1.5\" fill=\"rgba(200,30,30,0.15)\"\/>\n <circle cx=\"60\" cy=\"85\" r=\"35\" stroke=\"#d04040\" stroke-width=\"0.8\" fill=\"none\"\/>\n \n <ellipse cx=\"60\" cy=\"85\" rx=\"12\" ry=\"7\" stroke=\"#e04040\" stroke-width=\"1.5\" fill=\"#120505\"\/>\n <circle cx=\"60\" cy=\"85\" r=\"4\" fill=\"#cc2020\"\/>\n <circle cx=\"60\" cy=\"85\" r=\"1.8\" fill=\"#050101\"\/>\n \n <path d=\"M60 92 Q62 105 60 112 Q58 105 60 92Z\" fill=\"#b02020\"\/>\n \n <text x=\"60\" y=\"162\" text-anchor=\"middle\" fill=\"#802525\" font-family=\"serif\" font-size=\"6\" letter-spacing=\"2\">CASA DE TERROR<\/text>\n <\/svg>\n <\/div>\n <div class=\"card-face card-back\">\n <div class=\"card-mandala\"><\/div>\n <div class=\"card-num\">XIII<\/div>\n <div class=\"card-name-text\">La Muerte<\/div>\n <\/div>\n <\/div>\n <div class=\"card-glow\"><\/div>\n <\/div>\n\n <p class=\"hero-text\">\n Un mazo maldito yace flotando en la oscuridad, esperando a alguien lo suficientemente valiente para invocarlo. Sin clics, sin pantallas t\u00e1ctiles \u2014 solo tu mano frente a la c\u00e1mara, movi\u00e9ndose entre las sombras.\n <\/p>\n\n <div class=\"cta-wrap\">\n <a href=\"\/tarot\/index.php\" class=\"cta-btn\">\n <span>Invocar las cartas<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n <\/section>\n\n \n <div class=\"cards-preview\" aria-hidden=\"true\">\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u221e<\/span><\/div>\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u263d<\/span><\/div>\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u26b7<\/span><\/div>\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u4e0d\u51fa<\/span><\/div>\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u2646<\/span><\/div>\n <\/div>\n\n \n <section class=\"section\" id=\"como-funciona\">\n <h2 class=\"section-title\">La <span>invocaci\u00f3n<\/span><\/h2>\n <div class=\"deco-line\"><\/div>\n <div class=\"steps\">\n <div class=\"step\" data-reveal>\n <div class=\"step-icon\">\u270b<\/div>\n <div class=\"step-num\">Paso I<\/div>\n <div class=\"step-title\">Muestra tu mano<\/div>\n <p class=\"step-desc\">La c\u00e1mara detectar\u00e1 tu presencia en la oscuridad. Ning\u00fan dato se almacena ni se env\u00eda.<\/p>\n <\/div>\n <div class=\"step\" data-reveal>\n <div class=\"step-icon\">\u2194<\/div>\n <div class=\"step-num\">Paso II<\/div>\n <div class=\"step-title\">Desliza a la izquierda<\/div>\n <p class=\"step-desc\">El mazo se desplegar\u00e1 en una rueda giratoria. Mueve tu mano para navegar entre las cartas.<\/p>\n <\/div>\n <div class=\"step\" data-reveal>\n <div class=\"step-icon\">\u270a<\/div>\n <div class=\"step-num\">Paso III<\/div>\n <div class=\"step-title\">Cierra el pu\u00f1o<\/div>\n <p class=\"step-desc\">La carta elegida se revelar\u00e1 ante ti con su maldici\u00f3n. No hay vuelta atr\u00e1s.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"warning-box\" data-reveal>\n <h3 class=\"warning-title\">Antes de continuar<\/h3>\n <ul class=\"warning-list\">\n <li>Se requiere acceso a la <strong style=\"color:var(--bone)\">c\u00e1mara del dispositivo<\/strong>. El procesamiento ocurre completamente en tu navegador \u2014 ninguna imagen sale de tu equipo.<\/li>\n <li>Funciona mejor en <strong style=\"color:var(--bone)\">escenas con buena iluminaci\u00f3n<\/strong> y un fondo que contraste con tu mano.<\/li>\n <li>La experiencia utiliza <strong style=\"color:var(--bone)\">WebGL y reconocimiento de gestos<\/strong>, por lo que se recomienda un dispositivo relativamente moderno.<\/li>\n <li>Los significados de las cartas son ficci\u00f3n creativa con fines de entretenimiento. No representan predicciones reales.<\/li>\n <li>Contiene <strong style=\"color:var(--bone)\">efectos de sonido y parpadeos de luz<\/strong>. Precauci\u00f3n si eres sensible a este tipo de est\u00edmulos.<\/li>\n <\/ul>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <h2 class=\"section-title\">Lo que dicen <span>los condenados<\/span><\/h2>\n <div class=\"deco-line\"><\/div>\n <div class=\"quotes\">\n <div class=\"quote\" data-reveal>\n <p class=\"quote-text\">“Me sali\u00f3 El Ahorcado. No pude dormir esa noche. La experiencia es perturbadoramente inmersiva.”<\/p>\n <p class=\"quote-attr\">\u2014 Visitante an\u00f3nimo<\/p>\n <\/div>\n <div class=\"quote-divider\"><\/div>\n <div class=\"quote\" data-reveal>\n <p class=\"quote-text\">“Ver las cartas girar solo con mover la mano da un escalofr\u00edo que no esperaba. Brillante para una noche de terror.”<\/p>\n <p class=\"quote-attr\">\u2014 Visitante an\u00f3nimo<\/p>\n <\/div>\n <div class=\"quote-divider\"><\/div>\n <div class=\"quote\" data-reveal>\n <p class=\"quote-text\">“El Falso Faro. Me acord\u00f3 de las peores pesadillas. Necesito m\u00e1s.”<\/p>\n <p class=\"quote-attr\">\u2014 Visitante an\u00f3nimo<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"final-cta\">\n <p>El mazo espera. Las sombras se agitan. Solo falta tu mano.<\/p>\n <a href=\"\/tarot\/index.php\" class=\"cta-btn\">\n <span>Entrar al Tarot<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/section>\n\n \n <footer class=\"footer\">\n <p>\u00a9 2025 <a href=\"\/\">casadeterror.com<\/a> \u2014 Todos los derechos reservados<\/p>\n <\/footer>\n\n<\/div>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ PART\u00cdCULAS DE FONDO (Canvas 2D ligero)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n(function() {\n const cv = document.getElementById('particles-canvas');\n const ctx = cv.getContext('2d');\n let W, H;\n const particles = [];\n const COUNT = 60;\n\n function resize() {\n W = cv.width = window.innerWidth;\n H = cv.height = window.innerHeight;\n }\n resize();\n window.addEventListener('resize', resize);\n\n \/\/ Crear part\u00edculas: ceniza y brasas\n for (let i = 0; i < COUNT; i++) {\n const isEmber = i < 15;\n particles.push({\n x: Math.random() * W,\n y: Math.random() * H,\n vx: (Math.random() - 0.5) * 0.3,\n vy: isEmber ? -(0.3 + Math.random() * 0.5) : (Math.random() - 0.5) * 0.15,\n size: isEmber ? 1.5 + Math.random() * 2 : 0.8 + Math.random() * 1.2,\n alpha: isEmber ? 0.6 + Math.random() * 0.4 : 0.15 + Math.random() * 0.2,\n r: isEmber ? 200 + Math.floor(Math.random() * 55) : 80 + Math.floor(Math.random() * 40),\n g: isEmber ? 40 + Math.floor(Math.random() * 50) : 40 + Math.floor(Math.random() * 30),\n b: isEmber ? 10 + Math.floor(Math.random() * 20) : 30 + Math.floor(Math.random() * 20),\n phase: Math.random() * Math.PI * 2,\n isEmber\n });\n }\n\n function draw() {\n ctx.clearRect(0, 0, W, H);\n const t = performance.now() * 0.001;\n\n particles.forEach(p => {\n p.x += p.vx + Math.sin(t * 0.5 + p.phase) * 0.15;\n p.y += p.vy;\n\n \/\/ Reciclar part\u00edculas\n if (p.isEmber) {\n if (p.y < -10) { p.y = H + 10; p.x = Math.random() * W; }\n } else {\n if (p.x < -10) p.x = W + 10;\n if (p.x > W + 10) p.x = -10;\n if (p.y < -10) p.y = H + 10;\n if (p.y > H + 10) p.y = -10;\n }\n\n const flicker = p.isEmber ? 0.7 + Math.sin(t * 3 + p.phase) * 0.3 : 1;\n const a = p.alpha * flicker;\n\n ctx.beginPath();\n ctx.arc(p.x, p.y, Math.max(0.5, p.size), 0, Math.PI * 2);\n ctx.fillStyle = `rgba(${p.r},${p.g},${p.b},${a})`;\n ctx.fill();\n\n \/\/ Brillo suave para brasas\n if (p.isEmber && p.size > 2) {\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(${p.r},${p.g},${p.b},${a * 0.1})`;\n ctx.fill();\n }\n });\n\n requestAnimationFrame(draw);\n }\n\n \/\/ Respetar prefers-reduced-motion\n if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n draw();\n }\n})();\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SCROLL REVEAL (IntersectionObserver)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n(function() {\n const elements = document.querySelectorAll('[data-reveal]');\n if (!elements.length) return;\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry, i) => {\n if (entry.isIntersecting) {\n \/\/ A\u00f1adir delay escalonado para elementos hermanos\n const siblings = entry.target.parentElement.querySelectorAll('[data-reveal]');\n let idx = 0;\n siblings.forEach((s, si) => { if (s === entry.target) idx = si; });\n setTimeout(() => {\n entry.target.classList.add('visible');\n }, idx * 150);\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\n\n elements.forEach(el => observer.observe(el));\n})();\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ PARALAJE SUTIL DEL HERO AL HACER SCROLL\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n(function() {\n const hero = document.querySelector('.hero');\n const card = document.querySelector('.card-float');\n if (!hero || !card) return;\n\n window.addEventListener('scroll', () => {\n const scrollY = window.scrollY;\n const heroH = hero.offsetHeight;\n if (scrollY < heroH) {\n const progress = scrollY \/ heroH;\n card.style.transform = `translateY(${scrollY * 0.3}px) scale(${1 - progress * 0.15})`;\n card.style.opacity = 1 - progress * 1.2;\n }\n }, { passive: true });\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Tarot de los Condenados \u2014 Casa de Terror Casa de Terror C\u00f3mo funciona Una experiencia interactiva de casadeterror.com Tarot de los Condenados Veintid\u00f3s cartas. Veintid\u00f3s maldiciones. CASA DE TERROR XIII La Muerte Un mazo maldito yace flotando en la oscuridad, esperando a alguien lo suficientemente valiente para invocarlo. Sin clics, sin pantallas t\u00e1ctiles \u2014 solo tu mano frente a la c\u00e1mara, movi\u00e9ndose entre las sombras. Invocar las cartas \u2192 \u221e \u263d \u26b7 \u4e0d\u51fa \u2646 La invocaci\u00f3n \u270b Paso I Muestra tu mano La c\u00e1mara detectar\u00e1 tu presencia en la oscuridad. Ning\u00fan dato se almacena ni se env\u00eda. \u2194 Paso II Desliza a la izquierda El mazo se desplegar\u00e1 en una rueda giratoria. Mueve tu mano para navegar entre las cartas. \u270a Paso III Cierra el pu\u00f1o La carta elegida se revelar\u00e1 ante ti con su maldici\u00f3n. No hay vuelta atr\u00e1s. Antes de continuar Se requiere acceso a la c\u00e1mara del dispositivo. El procesamiento ocurre completamente en tu navegador \u2014 ninguna imagen sale de tu equipo. Funciona mejor en escenas con buena iluminaci\u00f3n y un fondo que contraste con tu mano. La experiencia utiliza WebGL y reconocimiento de gestos, por lo que se recomienda un dispositivo relativamente moderno. Los significados de las cartas son ficci\u00f3n creativa con fines de entretenimiento. No representan predicciones reales. Contiene efectos de sonido y parpadeos de luz. Precauci\u00f3n si eres sensible a este tipo de est\u00edmulos. Lo que dicen los condenados “Me sali\u00f3 El Ahorcado. No pude dormir esa noche. La experiencia es perturbadoramente inmersiva.” \u2014 Visitante an\u00f3nimo “Ver las cartas girar solo con mover la mano da un escalofr\u00edo que no esperaba. Brillante para una noche de terror.” \u2014 Visitante an\u00f3nimo “El Falso Faro. Me acord\u00f3 de las peores pesadillas. Necesito m\u00e1s.” \u2014 Visitante an\u00f3nimo El mazo espera. Las sombras se agitan. Solo falta tu mano. Entrar al Tarot \u2192 \u00a9 2025 casadeterror.com \u2014 Todos los derechos reservados<\/p>\n","protected":false},"author":1,"featured_media":1317,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1315","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/pages\/1315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/casadeterror.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1315"}],"version-history":[{"count":1,"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/pages\/1315\/revisions"}],"predecessor-version":[{"id":1316,"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/pages\/1315\/revisions\/1316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/media\/1317"}],"wp:attachment":[{"href":"https:\/\/casadeterror.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1315,"date":"2026-07-16T18:43:23","date_gmt":"2026-07-16T23:43:23","guid":{"rendered":"https:\/\/casadeterror.com\/?page_id=1315"},"modified":"2026-07-16T18:43:23","modified_gmt":"2026-07-16T23:43:23","slug":"tarot-2","status":"publish","type":"page","link":"https:\/\/casadeterror.com\/?page_id=1315","title":{"rendered":"Tarot"},"content":{"rendered":"\n\n\n\n\n\nTarot de los Condenados \u2014 Casa de Terror<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;700;900&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap\" rel=\"stylesheet\">\n<style>\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESET & BASE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n :root {\n --blood: #8a1010; --blood-bright: #c01818; --blood-glow: rgba(180,20,20,0.5);\n --bone: #c8bca0; --bone-bright: #e8dcc0;\n --rust: #5a3825; --rust-light: #7a5035;\n --void: #060202; --void-light: #0e0505;\n --text: #8a7a6a; --text-dim: #5a4a3a;\n --font-display: 'Cinzel Decorative', serif;\n --font-heading: 'Cinzel', serif;\n --font-body: 'EB Garamond', Georgia, serif;\n }\n html { scroll-behavior: smooth; }\n body {\n background: var(--void);\n color: var(--text);\n font-family: var(--font-body);\n font-size: 18px;\n line-height: 1.75;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n }\n a { color: var(--blood-bright); text-decoration: none; transition: color 0.3s; }\n a:hover { color: var(--bone-bright); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CANVAS DE PART\u00cdCULAS DE FONDO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #particles-canvas {\n position: fixed; inset: 0; z-index: 0; pointer-events: none;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VI\u00d1ETA GLOBAL\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #vignette {\n position: fixed; inset: 0; z-index: 1; pointer-events: none;\n background: radial-gradient(ellipse at center, transparent 25%, rgba(3,1,1,0.85) 100%);\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONTENEDOR PRINCIPAL\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .page-content {\n position: relative; z-index: 2;\n max-width: 900px; margin: 0 auto; padding: 0 24px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVEGACI\u00d3N SUPERIOR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .top-nav {\n display: flex; align-items: center; justify-content: space-between;\n padding: 28px 0; border-bottom: 1px solid rgba(90,56,37,0.2);\n }\n .top-nav a {\n font-family: var(--font-heading); font-size: 12px;\n letter-spacing: 0.25em; color: var(--rust-light);\n text-transform: uppercase; transition: color 0.3s;\n }\n .top-nav a:hover { color: var(--blood-bright); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .hero {\n min-height: 100vh; display: flex; flex-direction: column;\n align-items: center; justify-content: center; text-align: center;\n padding: 60px 0 80px;\n }\n .hero-label {\n font-family: var(--font-heading); font-size: 11px;\n letter-spacing: 0.4em; color: var(--rust-light);\n text-transform: uppercase; margin-bottom: 20px;\n opacity: 0; animation: fadeUp 1s 0.3s forwards;\n }\n .hero-title {\n font-family: var(--font-display); font-size: clamp(36px, 7vw, 72px);\n color: var(--blood-bright); letter-spacing: 0.06em;\n line-height: 1.15; margin-bottom: 16px;\n text-shadow: 0 0 60px var(--blood-glow), 0 0 120px rgba(120,10,10,0.3);\n opacity: 0; animation: fadeUp 1.2s 0.6s forwards;\n }\n .hero-subtitle {\n font-family: var(--font-heading); font-size: clamp(11px, 2vw, 15px);\n letter-spacing: 0.35em; color: var(--rust);\n font-weight: 400; margin-bottom: 50px;\n opacity: 0; animation: fadeUp 1s 0.9s forwards;\n }\n .hero-text {\n max-width: 560px; font-size: 17px; color: var(--text);\n line-height: 1.85; margin-bottom: 50px;\n opacity: 0; animation: fadeUp 1s 1.2s forwards;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTA FLOTANTE (CSS puro)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .card-float {\n width: 160px; height: 240px; position: relative;\n margin-bottom: 60px; perspective: 800px;\n opacity: 0; animation: fadeUp 1.2s 1.5s forwards;\n }\n .card-inner {\n width: 100%; height: 100%; position: relative;\n transform-style: preserve-3d;\n animation: cardHover 6s ease-in-out infinite;\n }\n .card-face {\n position: absolute; inset: 0; border-radius: 8px;\n backface-visibility: hidden; overflow: hidden;\n }\n .card-front, .card-back {\n border: 2px solid var(--rust);\n box-shadow: 0 0 30px rgba(138,16,16,0.3), 0 20px 60px rgba(0,0,0,0.6);\n }\n .card-front {\n background: linear-gradient(135deg, #1a0808, #0e0404);\n display: flex; align-items: center; justify-content: center;\n }\n .card-front svg { width: 80%; height: auto; opacity: 0.9; }\n .card-back {\n background: linear-gradient(135deg, #b8a880, #a09070);\n transform: rotateY(180deg);\n display: flex; align-items: center; justify-content: center;\n flex-direction: column; padding: 20px;\n }\n .card-back .card-num {\n font-family: var(--font-display); font-size: 14px;\n color: var(--blood); margin-bottom: 12px;\n }\n .card-back .card-name-text {\n font-family: var(--font-heading); font-size: 11px;\n color: #3a0505; letter-spacing: 0.15em; text-align: center;\n text-transform: uppercase;\n }\n .card-back .card-mandala {\n width: 70px; height: 70px; border: 1px solid var(--rust);\n border-radius: 50%; margin-bottom: 12px; position: relative;\n display: flex; align-items: center; justify-content: center;\n }\n .card-back .card-mandala::before {\n content: ''; width: 50px; height: 50px;\n border: 1px solid var(--blood); border-radius: 50%;\n position: absolute;\n }\n .card-back .card-mandala::after {\n content: '\u2726'; color: var(--blood); font-size: 16px;\n }\n \/* Brillo bajo la carta *\/\n .card-glow {\n position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);\n width: 180px; height: 40px;\n background: radial-gradient(ellipse, rgba(138,16,16,0.4) 0%, transparent 70%);\n filter: blur(8px); animation: glowPulse 3s ease-in-out infinite;\n }\n\n @keyframes cardHover {\n 0%, 100% { transform: rotateY(-12deg) rotateX(3deg) translateY(0); }\n 25% { transform: rotateY(12deg) rotateX(-2deg) translateY(-8px); }\n 50% { transform: rotateY(-8deg) rotateX(4deg) translateY(-4px); }\n 75% { transform: rotateY(10deg) rotateX(-3deg) translateY(-10px); }\n }\n @keyframes glowPulse {\n 0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(1); }\n 50% { opacity: 1; transform: translateX(-50%) scaleX(1.15); }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BOT\u00d3N CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .cta-wrap {\n opacity: 0; animation: fadeUp 1s 1.8s forwards;\n }\n .cta-btn {\n display: inline-flex; align-items: center; gap: 14px;\n padding: 20px 48px; border: 1px solid var(--blood);\n border-radius: 2px; background: transparent;\n font-family: var(--font-heading); font-size: 14px;\n letter-spacing: 0.2em; color: var(--blood-bright);\n text-transform: uppercase; cursor: pointer;\n position: relative; overflow: hidden;\n transition: all 0.4s ease;\n text-decoration: none;\n }\n .cta-btn::before {\n content: ''; position: absolute; inset: 0;\n background: linear-gradient(135deg, rgba(138,16,16,0.15), rgba(138,16,16,0.05));\n transform: translateX(-100%); transition: transform 0.4s ease;\n }\n .cta-btn:hover::before { transform: translateX(0); }\n .cta-btn:hover {\n border-color: var(--blood-bright); color: var(--bone-bright);\n box-shadow: 0 0 40px rgba(138,16,16,0.3), 0 0 80px rgba(138,16,16,0.1);\n transform: translateY(-2px);\n }\n .cta-btn .arrow {\n font-size: 18px; transition: transform 0.3s;\n }\n .cta-btn:hover .arrow { transform: translateX(4px); }\n \/* Pulso sutil *\/\n .cta-btn::after {\n content: ''; position: absolute; inset: -2px;\n border: 1px solid var(--blood); border-radius: 2px;\n opacity: 0; animation: ctaPulse 2.5s ease-in-out infinite;\n }\n @keyframes ctaPulse {\n 0%, 100% { opacity: 0; transform: scale(1); }\n 50% { opacity: 0.4; transform: scale(1.04); }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N: C\u00d3MO FUNCIONA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .section {\n padding: 100px 0;\n border-top: 1px solid rgba(90,56,37,0.12);\n }\n .section-title {\n font-family: var(--font-display); font-size: clamp(22px, 4vw, 34px);\n color: var(--bone); letter-spacing: 0.08em;\n margin-bottom: 60px; text-align: center;\n }\n .section-title span { color: var(--blood-bright); }\n\n .steps {\n display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 40px; margin-bottom: 20px;\n }\n .step {\n text-align: center; padding: 30px 20px;\n opacity: 0; transform: translateY(30px);\n transition: all 0.6s ease;\n }\n .step.visible { opacity: 1; transform: translateY(0); }\n .step-icon {\n width: 64px; height: 64px; margin: 0 auto 20px;\n border: 1px solid rgba(138,16,16,0.3); border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 24px; color: var(--blood-bright);\n background: rgba(138,16,16,0.05);\n transition: all 0.4s;\n }\n .step:hover .step-icon {\n border-color: var(--blood-bright);\n box-shadow: 0 0 20px rgba(138,16,16,0.2);\n background: rgba(138,16,16,0.1);\n }\n .step-num {\n font-family: var(--font-heading); font-size: 11px;\n color: var(--blood); letter-spacing: 0.3em;\n margin-bottom: 10px;\n }\n .step-title {\n font-family: var(--font-heading); font-size: 15px;\n color: var(--bone); letter-spacing: 0.1em;\n margin-bottom: 10px;\n }\n .step-desc {\n font-size: 15px; color: var(--text-dim); line-height: 1.7;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N: ADVERTENCIA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .warning-box {\n max-width: 640px; margin: 0 auto; padding: 40px;\n border: 1px solid rgba(138,16,16,0.25); border-radius: 4px;\n background: rgba(138,16,16,0.03);\n position: relative; overflow: hidden;\n }\n .warning-box::before {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\n background: linear-gradient(90deg, transparent, var(--blood), transparent);\n }\n .warning-title {\n font-family: var(--font-heading); font-size: 13px;\n letter-spacing: 0.3em; color: var(--blood-bright);\n text-transform: uppercase; margin-bottom: 20px;\n display: flex; align-items: center; gap: 10px;\n }\n .warning-title::before {\n content: ''; width: 20px; height: 1px; background: var(--blood);\n }\n .warning-list {\n list-style: none; display: flex; flex-direction: column; gap: 12px;\n }\n .warning-list li {\n font-size: 15px; color: var(--text-dim);\n padding-left: 24px; position: relative; line-height: 1.6;\n }\n .warning-list li::before {\n content: '\u2726'; position: absolute; left: 0;\n color: var(--blood); font-size: 10px; top: 4px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N: PREVIEW DE CARTAS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .cards-preview {\n display: flex; justify-content: center; align-items: center;\n gap: 0; padding: 40px 0; perspective: 1000px;\n flex-wrap: wrap;\n }\n .preview-card {\n width: 100px; height: 150px; border-radius: 4px;\n border: 1px solid rgba(138,16,16,0.3);\n background: linear-gradient(135deg, #1a0808, #0e0404);\n margin: 0 -12px; position: relative;\n transition: all 0.5s ease; cursor: default;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n display: flex; align-items: center; justify-content: center;\n overflow: hidden;\n }\n .preview-card::after {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(circle at center, rgba(138,16,16,0.15) 0%, transparent 70%);\n }\n .preview-card .pc-symbol {\n font-family: var(--font-display); font-size: 20px;\n color: rgba(200,60,60,0.5); z-index: 1;\n }\n .preview-card:nth-child(1) { transform: rotate(-8deg) translateY(5px); z-index: 1; }\n .preview-card:nth-child(2) { transform: rotate(-3deg) translateY(-3px); z-index: 2; }\n .preview-card:nth-child(3) { transform: rotate(2deg) translateY(-8px); z-index: 3; }\n .preview-card:nth-child(4) { transform: rotate(5deg) translateY(-2px); z-index: 4; }\n .preview-card:nth-child(5) { transform: rotate(9deg) translateY(6px); z-index: 5; }\n .cards-preview:hover .preview-card:nth-child(1) { transform: rotate(-15deg) translateX(-15px) translateY(8px); }\n .cards-preview:hover .preview-card:nth-child(2) { transform: rotate(-7deg) translateX(-8px) translateY(-5px); }\n .cards-preview:hover .preview-card:nth-child(3) { transform: rotate(0deg) translateY(-12px) scale(1.05); box-shadow: 0 0 30px rgba(138,16,16,0.3); }\n .cards-preview:hover .preview-card:nth-child(4) { transform: rotate(8deg) translateX(8px) translateY(-4px); }\n .cards-preview:hover .preview-card:nth-child(5) { transform: rotate(16deg) translateX(15px) translateY(10px); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N: QUOTES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .quotes {\n display: flex; flex-direction: column; gap: 50px;\n max-width: 600px; margin: 0 auto;\n }\n .quote {\n text-align: center; opacity: 0; transform: translateY(20px);\n transition: all 0.7s ease;\n }\n .quote.visible { opacity: 1; transform: translateY(0); }\n .quote-text {\n font-family: var(--font-body); font-style: italic;\n font-size: 20px; color: var(--bone);\n line-height: 1.8; margin-bottom: 16px;\n }\n .quote-attr {\n font-family: var(--font-heading); font-size: 11px;\n letter-spacing: 0.25em; color: var(--text-dim);\n text-transform: uppercase;\n }\n .quote-divider {\n width: 40px; height: 1px; margin: 0 auto;\n background: var(--blood); opacity: 0.4;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CTA FINAL\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .final-cta {\n text-align: center; padding: 80px 0 120px;\n border-top: 1px solid rgba(90,56,37,0.12);\n }\n .final-cta p {\n font-size: 16px; color: var(--text-dim);\n margin-bottom: 40px; max-width: 480px; margin-left: auto; margin-right: auto;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .footer {\n text-align: center; padding: 40px 0;\n border-top: 1px solid rgba(90,56,37,0.12);\n }\n .footer p {\n font-family: var(--font-heading); font-size: 10px;\n letter-spacing: 0.3em; color: var(--text-dim);\n text-transform: uppercase;\n }\n .footer a { color: var(--rust-light); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ANIMACIONES GENERALES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(25px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Separador decorativo *\/\n .deco-line {\n width: 120px; height: 1px; margin: 0 auto 50px;\n background: linear-gradient(90deg, transparent, var(--rust), transparent);\n position: relative;\n }\n .deco-line::after {\n content: '\u25c6'; position: absolute; top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n font-size: 8px; color: var(--blood);\n background: var(--void); padding: 0 12px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (max-width: 640px) {\n .hero { padding: 40px 0 60px; }\n .card-float { width: 130px; height: 195px; }\n .steps { grid-template-columns: 1fr; gap: 24px; }\n .preview-card { width: 70px; height: 105px; margin: 0 -8px; }\n .preview-card .pc-symbol { font-size: 14px; }\n .cta-btn { padding: 16px 32px; font-size: 12px; }\n .warning-box { padding: 28px 20px; }\n .section { padding: 70px 0; }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n REDUCED MOTION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n .card-inner { animation: none; transform: rotateY(-5deg); }\n }\n<\/style>\n<\/head>\n<body>\n\n<canvas id=\"particles-canvas\"><\/canvas>\n<div id=\"vignette\"><\/div>\n\n<div class=\"page-content\">\n\n \n <nav class=\"top-nav\">\n <a href=\"\/\">Casa de Terror<\/a>\n <a href=\"#como-funciona\">C\u00f3mo funciona<\/a>\n <\/nav>\n\n \n <section class=\"hero\">\n <p class=\"hero-label\">Una experiencia interactiva de casadeterror.com<\/p>\n <h1 class=\"hero-title\">Tarot de los Condenados<\/h1>\n <p class=\"hero-subtitle\">Veintid\u00f3s cartas. Veintid\u00f3s maldiciones.<\/p>\n\n \n <div class=\"card-float\">\n <div class=\"card-inner\">\n <div class=\"card-face card-front\">\n <svg viewBox=\"0 0 120 180\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <rect x=\"4\" y=\"4\" width=\"112\" height=\"172\" rx=\"4\" stroke=\"#7a3020\" stroke-width=\"2\"\/>\n <rect x=\"10\" y=\"10\" width=\"100\" height=\"160\" rx=\"2\" stroke=\"#5a2015\" stroke-width=\"0.8\"\/>\n \n <circle cx=\"60\" cy=\"85\" r=\"42\" stroke=\"#a03030\" stroke-width=\"1\" fill=\"none\"\/>\n <g stroke=\"#c04040\" stroke-width=\"2\" stroke-linecap=\"round\">\n <line x1=\"60\" y1=\"43\" x2=\"60\" y2=\"32\"\/><line x1=\"91\" y1=\"54\" x2=\"100\" y2=\"47\"\/>\n <line x1=\"102\" y1=\"85\" x2=\"113\" y2=\"85\"\/><line x1=\"91\" y1=\"116\" x2=\"100\" y2=\"123\"\/>\n <line x1=\"60\" y1=\"127\" x2=\"60\" y2=\"138\"\/><line x1=\"29\" y1=\"116\" x2=\"20\" y2=\"123\"\/>\n <line x1=\"18\" y1=\"85\" x2=\"7\" y2=\"85\"\/><line x1=\"29\" y1=\"54\" x2=\"20\" y2=\"47\"\/>\n <\/g>\n \n <polygon points=\"60,50 76,108 36,74 84,74 44,108\" stroke=\"#e84848\" stroke-width=\"1.5\" fill=\"rgba(200,30,30,0.15)\"\/>\n <circle cx=\"60\" cy=\"85\" r=\"35\" stroke=\"#d04040\" stroke-width=\"0.8\" fill=\"none\"\/>\n \n <ellipse cx=\"60\" cy=\"85\" rx=\"12\" ry=\"7\" stroke=\"#e04040\" stroke-width=\"1.5\" fill=\"#120505\"\/>\n <circle cx=\"60\" cy=\"85\" r=\"4\" fill=\"#cc2020\"\/>\n <circle cx=\"60\" cy=\"85\" r=\"1.8\" fill=\"#050101\"\/>\n \n <path d=\"M60 92 Q62 105 60 112 Q58 105 60 92Z\" fill=\"#b02020\"\/>\n \n <text x=\"60\" y=\"162\" text-anchor=\"middle\" fill=\"#802525\" font-family=\"serif\" font-size=\"6\" letter-spacing=\"2\">CASA DE TERROR<\/text>\n <\/svg>\n <\/div>\n <div class=\"card-face card-back\">\n <div class=\"card-mandala\"><\/div>\n <div class=\"card-num\">XIII<\/div>\n <div class=\"card-name-text\">La Muerte<\/div>\n <\/div>\n <\/div>\n <div class=\"card-glow\"><\/div>\n <\/div>\n\n <p class=\"hero-text\">\n Un mazo maldito yace flotando en la oscuridad, esperando a alguien lo suficientemente valiente para invocarlo. Sin clics, sin pantallas t\u00e1ctiles \u2014 solo tu mano frente a la c\u00e1mara, movi\u00e9ndose entre las sombras.\n <\/p>\n\n <div class=\"cta-wrap\">\n <a href=\"\/tarot\/index.php\" class=\"cta-btn\">\n <span>Invocar las cartas<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n <\/section>\n\n \n <div class=\"cards-preview\" aria-hidden=\"true\">\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u221e<\/span><\/div>\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u263d<\/span><\/div>\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u26b7<\/span><\/div>\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u4e0d\u51fa<\/span><\/div>\n <div class=\"preview-card\"><span class=\"pc-symbol\">\u2646<\/span><\/div>\n <\/div>\n\n \n <section class=\"section\" id=\"como-funciona\">\n <h2 class=\"section-title\">La <span>invocaci\u00f3n<\/span><\/h2>\n <div class=\"deco-line\"><\/div>\n <div class=\"steps\">\n <div class=\"step\" data-reveal>\n <div class=\"step-icon\">\u270b<\/div>\n <div class=\"step-num\">Paso I<\/div>\n <div class=\"step-title\">Muestra tu mano<\/div>\n <p class=\"step-desc\">La c\u00e1mara detectar\u00e1 tu presencia en la oscuridad. Ning\u00fan dato se almacena ni se env\u00eda.<\/p>\n <\/div>\n <div class=\"step\" data-reveal>\n <div class=\"step-icon\">\u2194<\/div>\n <div class=\"step-num\">Paso II<\/div>\n <div class=\"step-title\">Desliza a la izquierda<\/div>\n <p class=\"step-desc\">El mazo se desplegar\u00e1 en una rueda giratoria. Mueve tu mano para navegar entre las cartas.<\/p>\n <\/div>\n <div class=\"step\" data-reveal>\n <div class=\"step-icon\">\u270a<\/div>\n <div class=\"step-num\">Paso III<\/div>\n <div class=\"step-title\">Cierra el pu\u00f1o<\/div>\n <p class=\"step-desc\">La carta elegida se revelar\u00e1 ante ti con su maldici\u00f3n. No hay vuelta atr\u00e1s.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"warning-box\" data-reveal>\n <h3 class=\"warning-title\">Antes de continuar<\/h3>\n <ul class=\"warning-list\">\n <li>Se requiere acceso a la <strong style=\"color:var(--bone)\">c\u00e1mara del dispositivo<\/strong>. El procesamiento ocurre completamente en tu navegador \u2014 ninguna imagen sale de tu equipo.<\/li>\n <li>Funciona mejor en <strong style=\"color:var(--bone)\">escenas con buena iluminaci\u00f3n<\/strong> y un fondo que contraste con tu mano.<\/li>\n <li>La experiencia utiliza <strong style=\"color:var(--bone)\">WebGL y reconocimiento de gestos<\/strong>, por lo que se recomienda un dispositivo relativamente moderno.<\/li>\n <li>Los significados de las cartas son ficci\u00f3n creativa con fines de entretenimiento. No representan predicciones reales.<\/li>\n <li>Contiene <strong style=\"color:var(--bone)\">efectos de sonido y parpadeos de luz<\/strong>. Precauci\u00f3n si eres sensible a este tipo de est\u00edmulos.<\/li>\n <\/ul>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <h2 class=\"section-title\">Lo que dicen <span>los condenados<\/span><\/h2>\n <div class=\"deco-line\"><\/div>\n <div class=\"quotes\">\n <div class=\"quote\" data-reveal>\n <p class=\"quote-text\">“Me sali\u00f3 El Ahorcado. No pude dormir esa noche. La experiencia es perturbadoramente inmersiva.”<\/p>\n <p class=\"quote-attr\">\u2014 Visitante an\u00f3nimo<\/p>\n <\/div>\n <div class=\"quote-divider\"><\/div>\n <div class=\"quote\" data-reveal>\n <p class=\"quote-text\">“Ver las cartas girar solo con mover la mano da un escalofr\u00edo que no esperaba. Brillante para una noche de terror.”<\/p>\n <p class=\"quote-attr\">\u2014 Visitante an\u00f3nimo<\/p>\n <\/div>\n <div class=\"quote-divider\"><\/div>\n <div class=\"quote\" data-reveal>\n <p class=\"quote-text\">“El Falso Faro. Me acord\u00f3 de las peores pesadillas. Necesito m\u00e1s.”<\/p>\n <p class=\"quote-attr\">\u2014 Visitante an\u00f3nimo<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"final-cta\">\n <p>El mazo espera. Las sombras se agitan. Solo falta tu mano.<\/p>\n <a href=\"\/tarot\/index.php\" class=\"cta-btn\">\n <span>Entrar al Tarot<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/section>\n\n \n <footer class=\"footer\">\n <p>\u00a9 2025 <a href=\"\/\">casadeterror.com<\/a> \u2014 Todos los derechos reservados<\/p>\n <\/footer>\n\n<\/div>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ PART\u00cdCULAS DE FONDO (Canvas 2D ligero)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n(function() {\n const cv = document.getElementById('particles-canvas');\n const ctx = cv.getContext('2d');\n let W, H;\n const particles = [];\n const COUNT = 60;\n\n function resize() {\n W = cv.width = window.innerWidth;\n H = cv.height = window.innerHeight;\n }\n resize();\n window.addEventListener('resize', resize);\n\n \/\/ Crear part\u00edculas: ceniza y brasas\n for (let i = 0; i < COUNT; i++) {\n const isEmber = i < 15;\n particles.push({\n x: Math.random() * W,\n y: Math.random() * H,\n vx: (Math.random() - 0.5) * 0.3,\n vy: isEmber ? -(0.3 + Math.random() * 0.5) : (Math.random() - 0.5) * 0.15,\n size: isEmber ? 1.5 + Math.random() * 2 : 0.8 + Math.random() * 1.2,\n alpha: isEmber ? 0.6 + Math.random() * 0.4 : 0.15 + Math.random() * 0.2,\n r: isEmber ? 200 + Math.floor(Math.random() * 55) : 80 + Math.floor(Math.random() * 40),\n g: isEmber ? 40 + Math.floor(Math.random() * 50) : 40 + Math.floor(Math.random() * 30),\n b: isEmber ? 10 + Math.floor(Math.random() * 20) : 30 + Math.floor(Math.random() * 20),\n phase: Math.random() * Math.PI * 2,\n isEmber\n });\n }\n\n function draw() {\n ctx.clearRect(0, 0, W, H);\n const t = performance.now() * 0.001;\n\n particles.forEach(p => {\n p.x += p.vx + Math.sin(t * 0.5 + p.phase) * 0.15;\n p.y += p.vy;\n\n \/\/ Reciclar part\u00edculas\n if (p.isEmber) {\n if (p.y < -10) { p.y = H + 10; p.x = Math.random() * W; }\n } else {\n if (p.x < -10) p.x = W + 10;\n if (p.x > W + 10) p.x = -10;\n if (p.y < -10) p.y = H + 10;\n if (p.y > H + 10) p.y = -10;\n }\n\n const flicker = p.isEmber ? 0.7 + Math.sin(t * 3 + p.phase) * 0.3 : 1;\n const a = p.alpha * flicker;\n\n ctx.beginPath();\n ctx.arc(p.x, p.y, Math.max(0.5, p.size), 0, Math.PI * 2);\n ctx.fillStyle = `rgba(${p.r},${p.g},${p.b},${a})`;\n ctx.fill();\n\n \/\/ Brillo suave para brasas\n if (p.isEmber && p.size > 2) {\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(${p.r},${p.g},${p.b},${a * 0.1})`;\n ctx.fill();\n }\n });\n\n requestAnimationFrame(draw);\n }\n\n \/\/ Respetar prefers-reduced-motion\n if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n draw();\n }\n})();\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SCROLL REVEAL (IntersectionObserver)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n(function() {\n const elements = document.querySelectorAll('[data-reveal]');\n if (!elements.length) return;\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry, i) => {\n if (entry.isIntersecting) {\n \/\/ A\u00f1adir delay escalonado para elementos hermanos\n const siblings = entry.target.parentElement.querySelectorAll('[data-reveal]');\n let idx = 0;\n siblings.forEach((s, si) => { if (s === entry.target) idx = si; });\n setTimeout(() => {\n entry.target.classList.add('visible');\n }, idx * 150);\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\n\n elements.forEach(el => observer.observe(el));\n})();\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ PARALAJE SUTIL DEL HERO AL HACER SCROLL\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n(function() {\n const hero = document.querySelector('.hero');\n const card = document.querySelector('.card-float');\n if (!hero || !card) return;\n\n window.addEventListener('scroll', () => {\n const scrollY = window.scrollY;\n const heroH = hero.offsetHeight;\n if (scrollY < heroH) {\n const progress = scrollY \/ heroH;\n card.style.transform = `translateY(${scrollY * 0.3}px) scale(${1 - progress * 0.15})`;\n card.style.opacity = 1 - progress * 1.2;\n }\n }, { passive: true });\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Tarot de los Condenados \u2014 Casa de Terror Casa de Terror C\u00f3mo funciona Una experiencia interactiva de casadeterror.com Tarot de los Condenados Veintid\u00f3s cartas. Veintid\u00f3s maldiciones. CASA DE TERROR XIII La Muerte Un mazo maldito yace flotando en la oscuridad, esperando a alguien lo suficientemente valiente para invocarlo. Sin clics, sin pantallas t\u00e1ctiles \u2014 solo tu mano frente a la c\u00e1mara, movi\u00e9ndose entre las sombras. Invocar las cartas \u2192 \u221e \u263d \u26b7 \u4e0d\u51fa \u2646 La invocaci\u00f3n \u270b Paso I Muestra tu mano La c\u00e1mara detectar\u00e1 tu presencia en la oscuridad. Ning\u00fan dato se almacena ni se env\u00eda. \u2194 Paso II Desliza a la izquierda El mazo se desplegar\u00e1 en una rueda giratoria. Mueve tu mano para navegar entre las cartas. \u270a Paso III Cierra el pu\u00f1o La carta elegida se revelar\u00e1 ante ti con su maldici\u00f3n. No hay vuelta atr\u00e1s. Antes de continuar Se requiere acceso a la c\u00e1mara del dispositivo. El procesamiento ocurre completamente en tu navegador \u2014 ninguna imagen sale de tu equipo. Funciona mejor en escenas con buena iluminaci\u00f3n y un fondo que contraste con tu mano. La experiencia utiliza WebGL y reconocimiento de gestos, por lo que se recomienda un dispositivo relativamente moderno. Los significados de las cartas son ficci\u00f3n creativa con fines de entretenimiento. No representan predicciones reales. Contiene efectos de sonido y parpadeos de luz. Precauci\u00f3n si eres sensible a este tipo de est\u00edmulos. Lo que dicen los condenados “Me sali\u00f3 El Ahorcado. No pude dormir esa noche. La experiencia es perturbadoramente inmersiva.” \u2014 Visitante an\u00f3nimo “Ver las cartas girar solo con mover la mano da un escalofr\u00edo que no esperaba. Brillante para una noche de terror.” \u2014 Visitante an\u00f3nimo “El Falso Faro. Me acord\u00f3 de las peores pesadillas. Necesito m\u00e1s.” \u2014 Visitante an\u00f3nimo El mazo espera. Las sombras se agitan. Solo falta tu mano. Entrar al Tarot \u2192 \u00a9 2025 casadeterror.com \u2014 Todos los derechos reservados<\/p>\n","protected":false},"author":1,"featured_media":1317,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1315","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/pages\/1315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/casadeterror.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1315"}],"version-history":[{"count":1,"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/pages\/1315\/revisions"}],"predecessor-version":[{"id":1316,"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/pages\/1315\/revisions\/1316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/casadeterror.com\/index.php?rest_route=\/wp\/v2\/media\/1317"}],"wp:attachment":[{"href":"https:\/\/casadeterror.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}