
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');
:root{--gold:#d9ad55;--gold2:#f1d38b;--ink:#071018;--deep:#061824;--paper:#e9e1cf;--muted:#aeb9bd}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#07131b;color:#f5f0e6;font-family:Montserrat,Arial,sans-serif;line-height:1.65}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.nav{height:76px;position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;gap:30px;padding:0 5vw;background:linear-gradient(180deg,rgba(3,10,14,.95),rgba(3,10,14,.65));backdrop-filter:blur(12px);border-bottom:1px solid rgba(217,173,85,.18)}
.brand{font-family:Cinzel;color:var(--gold2);text-decoration:none;font-size:21px;letter-spacing:.12em}.brand span{font-family:Montserrat;font-size:9px;display:block;letter-spacing:.28em;color:#aaa}
nav{margin-left:auto;display:flex;gap:25px}nav a,.ghost,.text-link{color:#eee;text-decoration:none;font-size:13px}nav a:hover,.ghost:hover,.text-link:hover{color:var(--gold2)}
.btn{display:inline-block;padding:14px 24px;background:linear-gradient(135deg,#9d6b20,var(--gold2),#a06d22);color:#111;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;border-radius:3px;box-shadow:0 10px 30px #0007}.btn.small{padding:10px 16px;font-size:10px}
.hero{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;padding:120px 8vw 70px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,14,.97) 8%,rgba(3,10,14,.82) 48%,rgba(3,10,14,.25)),url('assets/mapa-xenithar.png') center/cover;filter:saturate(.8);z-index:-2}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 45%,transparent,#02070b 85%);z-index:-1}
.eyebrow{font-size:11px;letter-spacing:.32em;color:var(--gold);font-weight:600;text-transform:uppercase}.hero h1{font-family:Cinzel;font-size:clamp(60px,9vw,132px);line-height:.85;margin:18px 0 8px;background:linear-gradient(#fff3c9,#bd7c27);-webkit-background-clip:text;color:transparent;letter-spacing:.03em}.hero h2{font-family:Cinzel;font-size:clamp(24px,3vw,46px);font-weight:500;margin:0 0 24px;color:#f0dfba}.lead{max-width:720px;color:#d3d7d7;font-size:17px}.actions{display:flex;align-items:center;gap:24px;margin-top:34px}
.cover-wrap{justify-self:center;perspective:900px}.cover-wrap img{max-height:70vh;max-width:35vw;box-shadow:20px 25px 70px #000;border:1px solid #d9ad5555;transform:rotateY(-5deg);border-radius:2px}
.section{padding:110px 9vw}.story{display:grid;grid-template-columns:1.4fr .6fr;gap:8vw;background:#e9e2d4;color:#172026}.story h2,.dark h2,.feature h2,.world h2,.social h2,.cta h2{font-family:Cinzel;font-size:clamp(32px,4vw,60px);line-height:1.1;margin:12px 0 25px}.story p{max-width:760px}.stone{align-self:center;text-align:center;padding:45px 30px;background:linear-gradient(145deg,#0a1820,#111);color:white;border:1px solid #d9ad5544;box-shadow:0 20px 60px #0004}.crystal{font-size:100px;color:#8fe7ff;text-shadow:0 0 12px #fff,0 0 45px #35c9ff,0 0 90px #5b59ff;animation:pulse 2.8s infinite}@keyframes pulse{50%{transform:scale(1.06);filter:brightness(1.35)}}.stone h3{font-family:Cinzel;color:var(--gold2)}
.dark{background:linear-gradient(#06141d,#071018)}.section-head{text-align:center;max-width:800px;margin:0 auto 55px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cards article{padding:30px 24px;background:linear-gradient(160deg,#112531,#09151c);border:1px solid #d9ad5528;min-height:230px}.cards h3{font-family:Cinzel;color:var(--gold2);font-size:25px}.cards p{color:#b8c2c6;font-size:14px}.characters-art{display:block;width:min(100%,1100px);max-height:560px;object-fit:contain;margin:60px auto 0;filter:drop-shadow(0 25px 35px #000)}
.feature{display:grid;grid-template-columns:1fr 1fr;min-height:750px;background:#02080d;align-items:center}.feature img{width:100%;height:750px;object-fit:cover;object-position:center}.feature>div{padding:8vw}.feature p:not(.eyebrow){color:#b9c3c8;max-width:600px}.text-link{display:inline-block;margin-top:20px;color:var(--gold2)}
.world{position:relative;background:#06131a;padding:0;overflow:hidden}.world img{display:block;width:100%;max-height:1140px;object-fit:cover;opacity:.76}.world-copy{position:absolute;z-index:2;left:8vw;top:8vw;width:min(520px,42vw);padding:34px;background:#051018dc;border-left:3px solid var(--gold);backdrop-filter:blur(8px)}.world-copy h2{font-size:clamp(28px,3.5vw,52px)}.world-copy p{color:#d4d8d8}
.social{display:flex;justify-content:space-between;align-items:center;gap:50px;background:linear-gradient(120deg,#311332,#07131b 60%)}.social>div{max-width:720px}.insta{white-space:nowrap}
.cta{text-align:center;padding:120px 20px;background:radial-gradient(circle at center,#173343,#06131b 65%)}.cta p{color:#c6cfd2}.cta .btn{margin-top:20px}
footer{padding:35px 6vw;border-top:1px solid #d9ad5525;display:flex;gap:25px;justify-content:center;flex-wrap:wrap;color:#829097;font-size:11px;letter-spacing:.08em}footer strong{font-family:Cinzel;color:var(--gold2)}
@media(max-width:900px){.nav nav{display:none}.nav .small{margin-left:auto}.hero{grid-template-columns:1fr;text-align:center}.hero-copy{z-index:2}.lead{margin-inline:auto}.actions{justify-content:center;flex-wrap:wrap}.cover-wrap{margin-top:55px}.cover-wrap img{max-width:70vw;max-height:55vh}.story,.feature{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.feature img{height:550px}.world-copy{position:relative;left:auto;top:auto;width:auto;margin:0;padding:60px 8vw;background:#06131a}.social{display:block}.social .btn{margin-top:25px}}
@media(max-width:560px){.nav{padding:0 18px}.brand{font-size:17px}.hero{padding:110px 22px 55px}.hero h1{font-size:54px}.section{padding:75px 24px}.cards{grid-template-columns:1fr}.feature img{height:430px}.feature>div{padding:70px 25px}.social{padding:75px 25px}}
