:root{--bg:#09051a;--bg2:#160a2e;--gold:#f0cf85;--gold2:#b8893a;--vio:#8b5cff;--rose:#ff6ec7;--tx:#f5eeff;--mut:#b9abd8;--gl:rgba(255,255,255,.07);--bd:rgba(240,207,133,.22);--ar:.52;--r:18px;--nav:72px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
body{min-height:100dvh;background:radial-gradient(120% 70% at 50% -10%,#2a1260 0%,var(--bg2) 45%,var(--bg) 100%) fixed;overflow-x:hidden}
h1,h2,h3,.serif{font-family:"Cinzel","Cormorant Garamond",Georgia,serif;letter-spacing:.04em;margin:0}
h1{font-size:clamp(26px,7vw,38px);line-height:1.1}h2{font-size:22px}h3{font-size:17px}
p{line-height:1.55;margin:.5em 0}.mut{color:var(--mut)}.gold{color:var(--gold)}.sm{font-size:13px}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#view{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px calc(var(--nav) + 28px + env(safe-area-inset-bottom));animation:in .5s ease both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* navegación */
#tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));width:min(640px,calc(100% - 20px));height:var(--nav);z-index:20;display:flex;gap:2px;padding:6px;border-radius:24px;background:rgba(18,9,40,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--bd);box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 30px rgba(139,92,255,.25)}
#tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--mut);text-decoration:none;font-size:10.5px;border-radius:18px;transition:.3s}
#tabs a b{font-size:22px;font-weight:400;filter:grayscale(.6);transition:.3s}
#tabs a.on{color:var(--gold);background:linear-gradient(180deg,rgba(139,92,255,.35),rgba(139,92,255,.08))}
#tabs a.on b{filter:none;transform:translateY(-3px) scale(1.15)}
/* componentes */
.glass{background:var(--gl);border:1px solid var(--bd);border-radius:var(--r);padding:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;color:#1b0f33;font-weight:700;font-size:15px;padding:13px 22px;border-radius:999px;background:linear-gradient(135deg,#ffe9ad,var(--gold) 45%,var(--gold2));box-shadow:0 6px 24px rgba(240,207,133,.35);position:relative;overflow:hidden;text-decoration:none;transition:transform .2s}
.btn:active{transform:scale(.96)}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 3.5s infinite}
@keyframes shine{to{left:140%}}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold2);box-shadow:none}.btn.ghost::after{display:none}
.btn[disabled]{opacity:.45;pointer-events:none}.btn.sm{padding:9px 16px;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--bd);background:var(--gl);color:var(--tx);font-size:13px;cursor:pointer;transition:.25s}
.chip.on{background:linear-gradient(135deg,rgba(139,92,255,.6),rgba(255,110,199,.35));border-color:var(--gold)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.grid{display:grid;gap:12px}.g2{grid-template-columns:1fr 1fr}
.head{display:flex;justify-content:space-between;align-items:center;margin:6px 0 14px}
input,textarea,select{width:100%;background:rgba(255,255,255,.07);border:1px solid var(--bd);color:var(--tx);border-radius:14px;padding:12px 14px;font:inherit;outline:0}
input:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,207,133,.15)}
label{display:block;font-size:13px;color:var(--mut);margin:12px 0 5px}
.pill{font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(240,207,133,.15);color:var(--gold);border:1px solid var(--bd)}
.back{background:none;border:0;color:var(--gold);font-size:14px;cursor:pointer;padding:6px 0}
/* hero 3D */
.hero{text-align:center;padding-top:4px}
.scene{perspective:900px;height:270px;display:grid;place-items:center;margin:4px 0 0;overflow:visible;touch-action:pan-y}
.tiltwrap{transform-style:preserve-3d;transition:transform .15s}
.ring{position:relative;width:118px;height:228px;transform-style:preserve-3d;animation:spin 32s linear infinite}
.ring figure{position:absolute;inset:0;margin:0;border-radius:10px;overflow:hidden;transform:rotateY(calc(var(--i)*45deg)) translateZ(200px);box-shadow:0 0 24px rgba(139,92,255,.55);border:1px solid var(--gold2)}
.ring img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes spin{to{transform:rotateY(360deg)}}
.halo{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(139,92,255,.45),transparent 65%);filter:blur(10px);z-index:-1;animation:pulse 5s ease-in-out infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.25);opacity:.6}}
.title-glow{background:linear-gradient(90deg,#fff,var(--gold),var(--rose),var(--gold));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 8s linear infinite}
@keyframes flow{to{background-position:300% 0}}
/* tarjetas inclinables */
.tilt{transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .3s;will-change:transform;position:relative}
.tilt>*{transform:translateZ(18px)}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.tilt.hot::after{opacity:1}
.tile{display:block;color:inherit;text-decoration:none;padding:18px 14px;border-radius:var(--r);border:1px solid var(--bd);background:linear-gradient(160deg,hsla(var(--h,270),80%,45%,.45),rgba(20,10,45,.6));min-height:118px;cursor:pointer;text-align:left;font:inherit}
.tile .ic{font-size:34px;display:block;margin-bottom:8px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}.tile b{display:block;font-family:"Cinzel",Georgia,serif;font-size:15px}.tile span.s{font-size:12px;color:var(--mut)}
.float{animation:flt 5s ease-in-out infinite}@keyframes flt{50%{transform:translateY(-8px)}}
/* cartas */
.tc{perspective:900px;aspect-ratio:var(--ar);width:100%;cursor:pointer;position:relative}
.tc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.2,.8,.2,1)}
.tc.up .tc-in{transform:rotateY(180deg)}
.tc-b,.tc-f{position:absolute;inset:0;border-radius:10px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid var(--gold);box-shadow:0 10px 28px rgba(0,0,0,.55),0 0 18px rgba(240,207,133,.25)}
.tc-b{background:#fff url(../img/cartas/etu-reverso.webp) center/cover}
.tc-f{transform:rotateY(180deg);background:#fff}
.tc-f img{width:100%;height:100%;object-fit:cover;display:block}.tc.rev .tc-f img,.tc.rev .face{transform:rotate(180deg)}
.face{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:linear-gradient(160deg,hsl(var(--h),70%,35%),#150a30);color:var(--gold);font-family:"Cinzel",Georgia,serif;padding:8px}
.face .big{font-size:clamp(34px,11vw,56px);line-height:1}.face small{font-size:12px;color:#fff}
.tc.sel{transform:translateY(-14px);filter:drop-shadow(0 0 14px var(--gold))}
.fan{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.fan .tc{transition:transform .3s}
.fan .tc:hover{transform:translateY(-6px)}
.spread{display:grid;gap:10px;margin:14px 0}.spread.n1{grid-template-columns:minmax(0,150px);justify-content:center}.spread.n3{grid-template-columns:repeat(3,1fr)}.spread.n5{grid-template-columns:repeat(3,1fr)}
.spread figcaption,.cap{text-align:center;font-size:12px;color:var(--gold);margin-top:6px}.spread figure{margin:0}
.reading p{font-size:15.5px}.reading .who{color:var(--gold);font-family:"Cinzel",serif}
.think{display:flex;gap:6px;justify-content:center;padding:18px}.think i{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:dot 1.2s infinite}.think i:nth-child(2){animation-delay:.2s}.think i:nth-child(3){animation-delay:.4s}
@keyframes dot{50%{transform:translateY(-8px);opacity:.4}}
.bubble{padding:10px 14px;border-radius:16px;margin:8px 0;max-width:88%;line-height:1.5}.bubble.me{margin-left:auto;background:rgba(139,92,255,.35)}.bubble.lu{background:var(--gl);border:1px solid var(--bd)}
/* runas / péndulo */
.runes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.rune{perspective:700px;aspect-ratio:.8}
.rune .tc-in{transition:transform 1s}.rune .tc-b,.rune .tc-f{border-radius:50% 50% 46% 46%/58% 58% 42% 42%}
.rune .tc-b{background:radial-gradient(circle at 35% 30%,#6b6477,#2a2536 70%)}
.rune .tc-f{background:radial-gradient(circle at 35% 30%,#7d7390,#2a2536 75%);display:grid;place-items:center;font-size:54px;color:var(--gold);text-shadow:0 0 14px var(--gold)}
.pend-stage{height:300px;position:relative;perspective:700px;display:grid;justify-items:center}
.pend-stage::before{content:"";width:2px;height:0}
.pendulum{transform-origin:50% 0;position:absolute;top:0;left:50%;margin-left:-23px;display:flex;flex-direction:column;align-items:center}
.pendulum .cord{width:2px;height:190px;background:linear-gradient(var(--gold2),var(--gold))}
.pendulum .bob{width:46px;height:70px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:radial-gradient(circle at 35% 30%,#fff3c8,var(--gold) 40%,var(--gold2));box-shadow:0 0 30px rgba(240,207,133,.7)}
.pendulum.si{animation:swY 1.4s ease-in-out infinite}.pendulum.no{animation:swX 1.4s ease-in-out infinite}.pendulum.tal{animation:cir 2.2s linear infinite}
@keyframes swY{0%,100%{transform:rotateX(-28deg)}50%{transform:rotateX(28deg)}}@keyframes swX{0%,100%{transform:rotateZ(-28deg)}50%{transform:rotateZ(28deg)}}
@keyframes cir{0%{transform:rotateX(24deg) rotateZ(0)}25%{transform:rotateX(0) rotateZ(24deg)}50%{transform:rotateX(-24deg) rotateZ(0)}75%{transform:rotateX(0) rotateZ(-24deg)}100%{transform:rotateX(24deg) rotateZ(0)}}
.pendulum.idle{animation:idle 6s ease-in-out infinite}@keyframes idle{50%{transform:rotateZ(3deg)}}
/* rituales */
.rcard{display:flex;gap:12px;align-items:stretch;padding:0;overflow:hidden;cursor:pointer;color:inherit;text-decoration:none;border-radius:var(--r);border:1px solid var(--bd);background:var(--gl)}
.rimg{flex:0 0 96px;display:grid;place-items:center;font-size:44px;background:radial-gradient(circle at 50% 70%,hsl(var(--h),90%,60%),hsl(var(--h),70%,22%) 70%);position:relative;overflow:hidden}
.rimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rimg::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.4))}
.rbody{padding:12px 12px 12px 0;flex:1;min-width:0}.rbody h3{font-size:15px;margin-bottom:4px}.rbody p{margin:0;font-size:13px;color:var(--mut)}
.lock{filter:grayscale(.7);opacity:.75}
.hero-r{height:190px;border-radius:var(--r);display:grid;place-items:center;font-size:80px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 80%,hsl(var(--h),95%,62%),hsl(var(--h),70%,20%) 75%);margin-bottom:14px}
.hero-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-r span{filter:drop-shadow(0 0 20px rgba(255,220,150,.9));animation:flame 2.4s ease-in-out infinite;position:relative}@keyframes flame{50%{transform:scale(1.1) translateY(-4px)}}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0}ol.steps li{counter-increment:s;position:relative;padding:4px 0 14px 46px;line-height:1.5}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#1b0f33;background:linear-gradient(135deg,#ffe9ad,var(--gold2))}
ul.mats{padding-left:18px;margin:6px 0}ul.mats li{margin:3px 0}
/* tarotistas */
.tarot-card{display:flex;gap:14px;align-items:flex-start}
.av{flex:0 0 74px;height:74px;border-radius:50%;background:linear-gradient(135deg,var(--vio),var(--rose));display:grid;place-items:center;font-size:30px;font-family:"Cinzel",serif;position:relative;overflow:visible;border:2px solid var(--gold)}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.dot{position:absolute;right:0;bottom:2px;width:15px;height:15px;border-radius:50%;border:2px solid var(--bg2);background:#6b6280}.dot.on{background:#3ddc84;box-shadow:0 0 10px #3ddc84;animation:pulse2 1.8s infinite}@keyframes pulse2{50%{box-shadow:0 0 0 7px rgba(61,220,132,0)}}
/* planes */
.plan{position:relative}.plan.top{border-color:var(--gold);box-shadow:0 0 30px rgba(240,207,133,.25)}.plan.cur{outline:2px solid var(--rose)}
.price{font-family:"Cinzel",serif;font-size:24px;color:var(--gold)}
.plan ul{padding-left:18px;margin:8px 0 12px}.plan li{margin:3px 0;font-size:14px}
.big-card{max-width:190px;margin:10px auto}
/* modal */
#modal{position:fixed;inset:0;z-index:50;background:rgba(5,2,15,.75);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;overflow:auto}
#modal[hidden]{display:none}#modal .box{max-width:440px;width:100%;background:linear-gradient(160deg,#241050,#12082a);border:1px solid var(--gold2);border-radius:22px;padding:22px;animation:in .35s both}
.toast{position:fixed;left:50%;bottom:calc(var(--nav) + 30px);transform:translateX(-50%);background:#241050;border:1px solid var(--gold);padding:10px 18px;border-radius:999px;z-index:60;font-size:14px;animation:in .3s both}
.disc{font-size:11.5px;color:var(--mut);text-align:center;margin:18px 0 0}
@media (min-width:700px){.fan{grid-template-columns:repeat(8,1fr)}.ring{width:140px;height:270px}.ring figure{transform:rotateY(calc(var(--i)*45deg)) translateZ(240px)}.scene{height:320px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a.chip{text-decoration:none}
.row{scrollbar-width:none}.row::-webkit-scrollbar{display:none}