:root{--tex-stone:url(/img/textura-piedra.jpg);--tex-parch:url(/img/textura-pergamino.jpg);--seal:url(/img/sello-cera.png);--night:#080505;--char:#120b0a;--stone:#1b1210;--stone2:#261815;--blood:#8a1c0e;--ember:#ff6a1f;--flame:#ffb43a;--brass:#e0b877;--bronze:#a8763a;--parch:#eadcc0;--ink:#2a1a12;--muted:#b9a58f;--text:#eadcc7;
--serif:'Lora',Georgia,'Times New Roman',serif;--title:'Cinzel','Trajan Pro',Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font:18px/1.65 var(--serif);-webkit-font-smoothing:antialiased;background-color:var(--night);
background-image:linear-gradient(rgba(8,5,5,.50),rgba(8,5,5,.50)),var(--tex-stone);background-size:auto,512px}
img{max-width:100%;height:auto;display:block}a{color:var(--flame)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}.narrow{max-width:780px}
/* cabecera */
header.top{position:sticky;top:0;z-index:30;background:rgba(8,5,5,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(168,118,58,.45);box-shadow:0 6px 30px rgba(0,0,0,.6)}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--title);font-weight:800;letter-spacing:.14em;font-size:1.02rem;color:var(--brass);text-decoration:none;white-space:nowrap}
.logo img{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--bronze);box-shadow:0 0 14px rgba(255,106,31,.55)}
.logo span{color:var(--ember)}
nav.main{display:flex;align-items:center;gap:22px}
nav.main a.l{font-family:var(--title);font-weight:600;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
nav.main a.l:hover,nav.main a.l.on{border-color:var(--ember);color:var(--flame);text-shadow:0 0 12px rgba(255,106,31,.7)}
.nav-cta,.btn{font-family:var(--title);font-weight:700;text-transform:uppercase;text-decoration:none;color:#fff3dc;background:linear-gradient(180deg,#ff8a2a,#c8340f 70%,#8a1c0e);border:1px solid #ffb43a;text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:0 0 22px rgba(255,106,31,.35),inset 0 1px 0 rgba(255,220,160,.5);transition:transform .15s,box-shadow .2s}
.nav-cta{white-space:nowrap;font-size:.74rem;letter-spacing:.1em;padding:9px 16px;border-radius:6px}
.btn{display:inline-block;letter-spacing:.09em;font-size:.9rem;padding:15px 28px;border-radius:8px}
.btn:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,106,31,.65),inset 0 1px 0 rgba(255,220,160,.5)}
.btn.ghost{background:rgba(8,5,5,.5);color:var(--brass);border:1px solid var(--bronze);box-shadow:none;text-shadow:none}
.burger{display:none;background:none;border:1px solid var(--bronze);color:var(--brass);border-radius:8px;padding:5px 9px;font-size:1.2rem;cursor:pointer}
/* tipografía */
h1,h2,h3{font-family:var(--title)}
h1{font-weight:800;font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.05;margin:0 0 20px;color:var(--parch);text-shadow:0 2px 24px rgba(0,0,0,.8)}
h1 em{font-style:normal;color:var(--ember);text-shadow:0 0 28px rgba(255,106,31,.6)}
h2{font-weight:700;font-size:clamp(1.55rem,3.3vw,2.2rem);line-height:1.15;margin:0 0 14px;color:var(--brass)}
h3{font-weight:700;font-size:1.05rem;margin:0 0 8px;color:var(--brass)}
.eyebrow,.kicker{font-family:var(--title);font-weight:700;letter-spacing:.22em;font-size:.76rem;text-transform:uppercase;margin:0 0 12px}
.eyebrow{color:var(--flame)}.kicker{color:var(--ember)}
.lead{font-size:1.2rem;color:#ecdcc4;max-width:34em;margin:0 0 28px}
.sub{color:var(--muted);max-width:40em;margin:0 0 36px}
section{padding:76px 0;position:relative}
.micro{margin:12px 0 0;font-size:.9rem;color:var(--muted)}
.chips{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{font-size:.85rem;padding:6px 14px;border:1px solid var(--bronze);border-radius:4px;color:var(--brass);background:rgba(8,5,5,.55)}
.rule{height:26px;margin:0 auto;max-width:360px;background:linear-gradient(90deg,transparent,var(--bronze),transparent) center/100% 1px no-repeat;position:relative}
.rule::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);color:var(--ember);background:var(--night);padding:0 12px;font-size:.9rem}
/* héroe */
.hero{position:relative;overflow:hidden;min-height:min(760px,calc(100vh - 60px));display:flex;align-items:center;text-align:center;padding:40px 0 90px;
background:radial-gradient(900px 500px at 50% 35%,rgba(138,28,14,.5),transparent 70%),linear-gradient(180deg,#0a0606,#150806 60%,#0a0606)}
.hero.hasimg{background:radial-gradient(ellipse at 50% 38%,rgba(8,5,5,.30),rgba(8,5,5,.78) 80%),linear-gradient(180deg,rgba(8,5,5,.1),rgba(8,5,5,.88)),var(--bg) center/cover}
#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.torch{position:absolute;top:18%;width:260px;height:420px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,150,40,.55),rgba(255,90,20,.22) 45%,transparent 75%);mix-blend-mode:screen;animation:flick 3.2s infinite ease-in-out}
.torch.l{left:-90px}.torch.r{right:-90px;animation-delay:-1.4s}
@keyframes flick{0%,100%{opacity:.85;transform:scale(1)}20%{opacity:.6;transform:scale(.96)}45%{opacity:1;transform:scale(1.05)}70%{opacity:.7;transform:scale(.98)}}
.hero .wrap{position:relative;z-index:2}
.hero-logo{width:min(58vw,330px);margin:0 auto 6px;filter:drop-shadow(0 0 40px rgba(255,80,20,.35));animation:breathe 5s infinite ease-in-out}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 30px rgba(255,80,20,.25))}50%{filter:drop-shadow(0 0 60px rgba(255,90,20,.6))}}
.hero .lead{margin-left:auto;margin-right:auto}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}
.scrollhint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;font-family:var(--title);font-size:.7rem;letter-spacing:.3em;color:var(--brass);text-transform:uppercase;animation:bob 2s infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}
.pagehead{padding:76px 0 46px;position:relative;overflow:hidden;background:radial-gradient(800px 300px at 20% 0,rgba(138,28,14,.45),transparent 70%),linear-gradient(180deg,#1a0b09,#080505);border-bottom:1px solid rgba(168,118,58,.4)}
.pagehead.hasimg{padding:110px 0 70px;background:linear-gradient(90deg,rgba(8,5,5,.95) 35%,rgba(8,5,5,.72) 62%,rgba(8,5,5,.3)),linear-gradient(180deg,transparent 60%,#080505),var(--bg) center/cover}
.pagehead .wrap{position:relative}
.room-no{font-family:var(--title);color:var(--ember);letter-spacing:.2em;font-size:.75rem;text-transform:uppercase}
/* mapa de la mazmorra */
.dmap{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:34px 30px;padding:20px 0}
.dmap::before{content:"";position:absolute;left:8%;right:8%;top:50%;border-top:2px dashed rgba(168,118,58,.45)}
.room{position:relative;z-index:1;text-decoration:none;color:var(--text);display:flex;flex-direction:column;padding:26px 22px 22px;border-radius:6px;min-height:200px;
background:linear-gradient(160deg,rgba(38,24,21,.62),rgba(18,11,10,.72) 60%,rgba(14,8,7,.82)),var(--tex-stone);background-size:auto,256px;border:2px solid var(--bronze);box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6);transition:.25s}
.room::before{content:"";position:absolute;inset:6px;border:1px solid rgba(168,118,58,.35);border-radius:3px;pointer-events:none}
.room:hover{transform:translateY(-6px);border-color:var(--ember);box-shadow:inset 0 0 40px rgba(0,0,0,.6),0 0 40px rgba(255,106,31,.45),0 14px 34px rgba(0,0,0,.7)}
.room .n{font-family:var(--title);font-size:.72rem;letter-spacing:.24em;color:var(--ember);margin-bottom:8px}
.room h3{font-size:1.15rem;margin:0 0 8px;color:var(--parch)}
.room p{margin:0 0 14px;font-size:.92rem;color:var(--muted)}
.room .st{margin-top:auto;font-family:var(--title);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--flame)}
.room.sealed .st{color:var(--muted)}.room.sealed{border-style:dashed}
.room.big{grid-column:span 3}.room.mid{grid-column:span 2}
.room.big.tesoro{background:linear-gradient(160deg,#3a1209,var(--stone) 70%);border-color:var(--flame)}
/* tarjetas y bloques */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card-dark{background:linear-gradient(170deg,rgba(38,24,21,.66),rgba(18,11,10,.78)),var(--tex-stone);background-size:auto,256px;border:1px solid rgba(168,118,58,.5);border-radius:6px;padding:26px 24px;display:flex;flex-direction:column;box-shadow:inset 0 0 30px rgba(0,0,0,.5);transition:.25s}
a.card-dark:hover,.card-dark:hover{border-color:var(--ember);box-shadow:inset 0 0 30px rgba(0,0,0,.4),0 0 26px rgba(255,106,31,.3)}
.card-dark p{margin:0 0 14px;font-size:.98rem;color:#d9c9b2}
.card-dark .more{margin-top:auto}
.tag{align-self:flex-start;font-family:var(--title);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:12px;border:1px dashed var(--bronze);color:var(--brass)}
.tag.free{background:var(--ember);color:#1a0703;border:0;font-weight:700}
.more{color:var(--flame);font-family:var(--title);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.adv{display:grid;grid-template-columns:.7fr 1.3fr;gap:36px;align-items:center;background:linear-gradient(170deg,rgba(38,24,21,.66),rgba(18,11,10,.78)),var(--tex-stone);background-size:auto,256px;border:2px solid var(--bronze);border-radius:8px;padding:28px;box-shadow:inset 0 0 50px rgba(0,0,0,.6)}
.adv img,.cover img{border-radius:4px;box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 0 1px var(--bronze),0 0 60px rgba(255,106,31,.25)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.split{grid-template-columns:.8fr 1.2fr}.split2{grid-template-columns:1.2fr .8fr}
.ticks{padding-left:0;list-style:none;margin:20px 0 0}
.ticks li{position:relative;padding-left:32px;margin:12px 0}
.ticks li::before{content:"✦";position:absolute;left:0;color:var(--ember)}
.form{position:relative;padding-top:10px!important;background:var(--tex-parch);background-size:400px;color:var(--ink);border-radius:8px;padding:18px;border:2px solid var(--bronze);box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 50px rgba(255,106,31,.2),inset 0 0 40px rgba(138,90,40,.25)}
.form iframe{display:block;border:0;border-radius:6px}
.form .fallback{margin:6px 8px 4px;font-size:.85rem;color:#6d4a2c}.form .fallback a{color:#8a2a0f}
.legal{margin:14px 4px 0;font-size:.8rem;color:var(--muted)}
.bg2{background:linear-gradient(180deg,rgba(18,11,10,.9),rgba(30,14,10,.9));border-top:1px solid rgba(168,118,58,.3);border-bottom:1px solid rgba(168,118,58,.3)}
.cover{position:relative;justify-self:center;width:min(100%,320px);transform:rotate(2deg)}
.badge{position:absolute;top:-14px;right:-18px;background:var(--ember);color:#1a0703;font-family:var(--title);font-weight:800;font-size:.8rem;letter-spacing:.1em;padding:9px 14px;border-radius:4px;transform:rotate(6deg);box-shadow:0 8px 20px rgba(0,0,0,.6)}
figure{margin:0}figure img{border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 0 2px var(--bronze)}
figcaption{margin-top:12px;font-size:.85rem;color:var(--muted);text-align:center}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.shot{aspect-ratio:16/10;border:1px dashed var(--bronze);border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:.9rem;padding:14px;background:rgba(8,5,5,.6)}
blockquote{margin:0 auto;max-width:30em;font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1.5;font-style:italic;text-align:center}
blockquote strong{color:var(--ember);font-style:normal}
.prose h2{font-size:1.35rem;margin-top:34px}.prose p,.prose li{color:#e2d2bb}.prose ul{padding-left:22px}
.parch{position:relative;background:var(--tex-parch);background-size:400px;color:var(--ink);border-radius:8px;padding:34px 36px;border:2px solid var(--bronze);box-shadow:0 24px 60px rgba(0,0,0,.7),inset 0 0 60px rgba(138,90,40,.3)}
.parch h2{color:#6a1a0c;margin-top:28px}.parch h2:first-child{margin-top:0}.parch p,.parch li{color:#3a2618}.parch a{color:#9a2a0d}
.draft{border:1px dashed #9a2a0d;border-radius:6px;padding:12px 16px;color:#6a1a0c;font-size:.9rem}
footer{background:#050303;border-top:1px solid var(--bronze);padding:44px 0;font-size:.85rem;color:#a89684}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h4{font-family:var(--title);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 10px}
footer a{color:#b9a58f;text-decoration:none;display:block;margin:6px 0}footer a:hover{color:var(--flame)}
footer p{margin:6px 0}.fine{margin-top:30px;padding-top:18px;border-top:1px solid rgba(168,118,58,.2)}
.form::after,.parch::after{content:"";position:absolute;right:-14px;top:-18px;width:62px;height:62px;background:var(--seal) center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));pointer-events:none;transform:rotate(-8deg)}
.room.sealed::after{content:"";position:absolute;right:14px;top:12px;width:42px;height:42px;background:var(--seal) center/contain no-repeat;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));transform:rotate(10deg)}
.water{display:none}
.descarga{background:linear-gradient(180deg,#080505,#1a0a07)}
/* d20 secreto y avisos */
#d20{position:fixed;right:18px;bottom:18px;z-index:40;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--bronze);background:#120b0a;cursor:pointer;padding:8px;box-shadow:0 0 20px rgba(255,106,31,.35)}
#d20 svg{width:100%;height:100%;transition:transform .7s}
#d20.roll svg{transform:rotate(720deg)}
#toast{position:fixed;right:18px;bottom:84px;z-index:40;max-width:260px;background:var(--parch);color:var(--ink);border:2px solid var(--bronze);border-radius:8px;padding:12px 16px;font-size:.92rem;opacity:0;transform:translateY(10px);pointer-events:none;transition:.3s;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#toast.show{opacity:1;transform:none}
/* aparición al hacer scroll */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.torch,.hero-logo,.scrollhint{animation:none}.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
@media(max-width:860px){
 .hero{min-height:auto;padding:30px 0 80px}.two,.adv{grid-template-columns:1fr;gap:34px}
 .cover{width:min(62%,250px);margin:6px auto 0}
 .burger{display:block}
 .logo{font-size:.76rem;letter-spacing:.05em;gap:7px}.logo img{width:32px;height:32px}
 .nav-cta{font-size:.64rem;padding:8px 10px;letter-spacing:.05em}
 header.top .wrap{padding-left:14px;padding-right:14px}
 nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#080505;flex-direction:column;align-items:flex-start;padding:16px 24px 22px;gap:14px;border-bottom:1px solid var(--bronze)}
 nav.main.open{display:flex}
 .dmap{grid-template-columns:1fr;gap:22px}.dmap::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed rgba(168,118,58,.45)}
 .room.big,.room.mid{grid-column:auto}.room{min-height:0}
 .torch{width:160px;height:300px}.torch.l{left:-70px}.torch.r{right:-70px}
 .parch{padding:24px 20px}
 #d20{width:44px;height:44px;right:12px;bottom:12px;padding:6px}#toast{right:12px;bottom:66px}
 .btn{padding:14px 16px;font-size:.78rem;letter-spacing:.05em}.cta-row .btn{width:100%;text-align:center}
 footer .cols{grid-template-columns:1fr 1fr}
 section{padding:56px 0}body{font-size:17px}
}