:root{font-family:Lora,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fffffff2;background-color:#050510;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh;background:linear-gradient(#0009,#0009),url(../background.png);background-size:cover;background-position:center;background-attachment:fixed;overflow-x:hidden}#root{width:100%}.glass-card{background:#ffffff01;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid rgba(0,200,255,.5);border-radius:40px;box-shadow:0 0 25px #00c8ff26,inset 0 0 10px #00c8ff0d;padding:32px;transition:all .4s ease}.glass-card:hover{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 40px #00c8ff66,inset 0 0 20px #00c8ff1a;border-color:#00c8ffcc;transform:translateY(-2px)}.kin-nombre{font-family:Cinzel,serif;letter-spacing:2px;text-transform:uppercase}.afirmacion{font-family:Lora,serif;font-style:italic;font-size:1.1rem;line-height:1.6}.kin-image-glow{filter:drop-shadow(0 0 20px rgba(98,0,238,.6))}.animate-fade-in{animation:fadeIn 1s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.flip-card{background-color:transparent;perspective:1000px;cursor:pointer}.flip-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .8s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}.flip-card.is-flipped .flip-card-inner{transform:rotateY(180deg)}.card-front,.card-back{width:100%;backface-visibility:hidden;border-radius:40px}.card-back{transform:rotateY(180deg);position:absolute;top:0;left:0;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000000b3;padding:24px}.card-back img{max-width:100%;max-height:90%;object-fit:contain;border-radius:16px}@keyframes cosmicPulse{0%{transform:scale(.8);opacity:0}20%{opacity:.8}50%{transform:scale(1.1);opacity:1}to{transform:scale(1.8);opacity:0}}.infographic-wrapper{position:relative;width:100%;height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;background:#0f172a;font-family:Outfit,sans-serif;color:#fff;display:flex;flex-direction:column;border-radius:12px}.infographic-wrapper::-webkit-scrollbar{display:none}.infographic-bg-image{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;filter:blur(12px) brightness(.3) saturate(1.2);z-index:0;transform:scale(1.1)}.infographic-vignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,transparent 10%,rgba(10,10,20,.8) 70%,rgba(0,0,0,.95) 100%);z-index:1}.infographic-container{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;min-height:100%;padding:15px;box-sizing:border-box}.infographic-header{text-align:center;margin-bottom:5px}.infographic-kin-meta{font-size:.8rem;letter-spacing:4px;text-transform:uppercase;color:#ffffffb3;display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:5px}.infographic-kin-meta:before,.infographic-kin-meta:after{content:"";display:block;width:25px;height:1px;background:var(--theme-color, white)}.infographic-kin-title{font-family:Cinzel,serif;font-size:clamp(1.2rem,3.5vw,2.5rem);font-weight:700;margin:0;text-transform:uppercase;background:linear-gradient(180deg,#fff,#cbd5e1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));line-height:1.1}.infographic-main-content{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-grow:1;margin-bottom:10px;gap:10px}.infographic-tech-col{display:flex;flex-direction:column;gap:10px;width:20%;align-items:center;text-align:center}.infographic-tech-item{opacity:.9;width:100%}.infographic-tech-icon-container{width:clamp(40px,6vw,70px);height:clamp(40px,6vw,70px);background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:50%;margin:0 auto 5px;display:flex;align-items:center;justify-content:center}.infographic-tech-icon{width:80%;height:80%;filter:drop-shadow(0 0 10px var(--theme-glow, rgba(255, 255, 255, .5)))}.infographic-tech-label{font-family:Cinzel,serif;font-size:clamp(.6rem,1.1vw,.9rem);color:var(--theme-color, white);margin-bottom:2px}.infographic-tech-desc{font-size:clamp(.55rem,.8vw,.75rem);font-weight:300;line-height:1.3;opacity:.8;font-style:italic;display:none}@media(min-width:480px){.infographic-tech-desc{display:block}}.infographic-tech-separator{height:15px;border-left:1px dashed rgba(255,255,255,.15);margin:0 auto}.infographic-center-col{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:50%}.infographic-art-display{width:100%;max-width:280px;aspect-ratio:3/4;border-radius:12px;border:1px solid rgba(255,255,255,.3);box-shadow:0 0 30px var(--theme-glow, rgba(255, 255, 255, .3));overflow:hidden;margin-bottom:10px;position:relative;background:#0003}.infographic-art-img{width:100%;height:100%;object-fit:cover}.infographic-main-quote-box{width:95%;text-align:center}.infographic-wisdom-quote{font-family:Pinyon Script,cursive;font-size:clamp(1rem,2.2vw,1.6rem);color:#e2e8f0;text-shadow:0 2px 5px black;line-height:1.1}.infographic-oracle-col{width:20%;display:flex;flex-direction:column;gap:3px;background:#0003;border-radius:15px;padding:8px 4px;border:1px solid rgba(255,255,255,.05)}.infographic-oracle-item{display:flex;flex-direction:column;align-items:center;text-align:center;opacity:.85;margin-bottom:2px}.infographic-oracle-item.active-destiny{margin:2px 0;border:1px solid var(--theme-color, white);border-radius:8px;padding:2px;background:#ffffff0d}.infographic-oracle-role{font-size:clamp(.45rem,.7vw,.55rem);text-transform:uppercase;color:var(--theme-color, white);letter-spacing:1px;font-weight:700}.infographic-oracle-desc-role{font-size:.45rem;color:#fff9;font-style:italic;line-height:1;display:none}@media(min-width:600px){.infographic-oracle-desc-role{display:block}}.infographic-oracle-icon-sm{width:clamp(18px,3.2vw,30px);height:clamp(18px,3.2vw,30px)}.infographic-oracle-name{font-size:clamp(.45rem,.7vw,.55rem);font-weight:600;color:#fff}.infographic-footer-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"ideal avoid" "advice advice";gap:16px;margin-top:auto;width:100%}.footer-ideal{grid-area:ideal}.footer-avoid{grid-area:avoid}.footer-advice{grid-area:advice}.infographic-footer-col{display:flex;flex-direction:column;text-align:center;padding:16px 12px;background:#0f172a66;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:20px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #0000004d}.infographic-footer-col:hover{background:#ffffff0a;border-color:var(--theme-color, rgba(255, 255, 255, .3));transform:translateY(-2px);box-shadow:0 8px 30px #00000080,0 0 15px var(--theme-glow, transparent)}.infographic-col-title{font-size:clamp(.5rem,.8vw,.6rem);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;display:inline-block;align-self:center}.title-good{color:#4ade80;border-bottom:2px solid rgba(74,222,128,.2);padding-bottom:4px}.title-bad{color:#f87171;border-bottom:2px solid rgba(248,113,113,.2);padding-bottom:4px}.title-main{color:var(--theme-color, white);border-bottom:2px solid var(--theme-glow, white);padding-bottom:4px}.infographic-points-list{text-align:center;font-size:clamp(.55rem,.9vw,.8rem);line-height:1.3;color:#e2e8f0;font-weight:300;padding-left:5px;margin:0;list-style:none}.infographic-points-list li{margin-bottom:1px;display:flex;align-items:flex-start;justify-content:center}.infographic-points-list li:before{display:none}.infographic-col-text-main{font-size:clamp(.6rem,1vw,.9rem);line-height:1.2;color:#fff;font-weight:400;font-style:italic;padding:0 5px;display:flex;align-items:center;justify-content:center;height:100%}.infographic-wrapper.is-full-screen{border-radius:0;overflow-y:auto;height:100%}.infographic-wrapper.is-full-screen .infographic-container{padding:40px 20px;max-width:900px;margin:0 auto;justify-content:flex-start;min-height:fit-content}.infographic-wrapper.is-card{border-radius:15px;overflow:hidden}.infographic-wrapper.is-card .infographic-container{padding:8px;gap:4px;justify-content:space-between}.infographic-wrapper.is-card .infographic-header{margin-bottom:2px}.infographic-wrapper.is-card .infographic-kin-meta{font-size:.5rem;gap:5px;margin-bottom:2px}.infographic-wrapper.is-card .infographic-kin-meta:before,.infographic-wrapper.is-card .infographic-kin-meta:after{width:10px}.infographic-wrapper.is-card .infographic-kin-title{font-size:1.2rem}.infographic-wrapper.is-card .infographic-main-content{margin-bottom:2px;gap:2px}.infographic-wrapper.is-card .infographic-tech-col,.infographic-wrapper.is-card .infographic-oracle-col{gap:2px;padding:2px}.infographic-wrapper.is-card .infographic-tech-icon-container{width:30px;height:30px}.infographic-wrapper.is-card .infographic-tech-label{font-size:.4rem}.infographic-wrapper.is-card .infographic-tech-desc{display:none!important}.infographic-wrapper.is-card .infographic-art-display{max-width:160px;border-radius:8px;margin-bottom:0}.infographic-wrapper.is-card .infographic-wisdom-quote{font-size:.6rem;line-height:1;margin:2px 0}.infographic-wrapper.is-card .infographic-oracle-icon-sm{width:10px;height:10px}.infographic-wrapper.is-card .infographic-oracle-role,.infographic-wrapper.is-card .infographic-oracle-name{font-size:.28rem;line-height:1}.infographic-wrapper.is-card .infographic-footer-grid{font-size:.35rem;padding:2px;margin-top:2px;border-radius:4px;gap:4px}.infographic-wrapper.is-card .infographic-footer-col{padding:2px}.infographic-wrapper.is-card .infographic-col-title{font-size:.3rem;margin-bottom:1px}.infographic-wrapper.is-card .infographic-points-list{font-size:.28rem;margin:0;padding-left:6px}.infographic-wrapper.is-card .infographic-points-list li{margin-bottom:0}.infographic-wrapper.is-card .infographic-col-text-main{font-size:.28rem;line-height:1.1;margin-top:1px}.infographic-wrapper.is-card .infographic-points-list{font-size:.35rem;padding-left:2px;line-height:1.1}.infographic-wrapper.is-card .infographic-points-list li:before{margin-right:1px}@media(max-width:800px){.infographic-container{padding:15px;gap:15px}.infographic-footer-grid{display:flex;flex-direction:column;gap:12px;padding:0;margin-top:15px}.infographic-footer-col{width:100%!important;padding:15px 12px}.infographic-center-col{width:100%;order:1}.infographic-main-content{flex-direction:column;align-items:center;gap:15px}.infographic-tech-col{width:100%;flex-direction:row;justify-content:space-around;background:#0000004d;padding:10px;border-radius:10px;order:2}.infographic-oracle-col{width:100%;flex-direction:row;justify-content:space-around;background:#0000004d;padding:10px;border-radius:10px;order:3;flex-wrap:wrap}.infographic-tech-separator{display:none}.infographic-kin-title{font-size:1.4rem}.infographic-art-display{max-width:240px}}.infographic-close-btn{position:absolute;top:20px;right:20px;z-index:100;background:#ffffff26;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 16px;border-radius:20px;cursor:pointer;font-family:Outfit,sans-serif;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .2s ease;display:flex;align-items:center;gap:5px;box-shadow:0 4px 15px #0000004d}.infographic-close-btn:hover{background:#ffffff40;transform:scale(1.05)}.infographic-wrapper.is-card .infographic-container{padding:4px!important;gap:2px!important;justify-content:space-between}.infographic-wrapper.is-card .infographic-art-display{background:transparent!important;border:none!important;box-shadow:none!important;margin:0!important;border-radius:8px;align-self:center;max-height:120px!important;flex-grow:0;display:flex;align-items:center;justify-content:center}.infographic-wrapper.is-card .infographic-center-col{justify-content:center;gap:0;max-height:50%}.infographic-wrapper.is-card .infographic-art-img{width:auto;height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(0,0,0,.5))}