:root{--tex-stone:none;--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,.74),rgba(8,5,5,.74)),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:14px;max-width:1180px;padding-top:9px;padding-bottom:9px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--title);font-weight:800;letter-spacing:.1em;font-size:.95rem;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:15px}
nav.main a.l{font-family:var(--title);font-weight:600;font-size:.72rem;letter-spacing:.06em;white-space:nowrap;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:.7rem;letter-spacing:.08em;padding:9px 14px;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.wide{grid-column:span 6;min-height:0;flex-direction:column}.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.3fr 1fr 1fr 1fr 1fr;gap:24px}
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,.room.wide{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}
}

/* fondos base cuando no hay textura real */
.room,.card-dark,.adv{background-color:#1c1412}
.room.big.tesoro{background-color:#2a140d}

/* ===== Academia: manuales y demos ===== */
:root{--die-fill:#1b1210;--die-stroke:#e0b877;--die-num:#f6ecd9;--good:#1f7a3f;--bad:#a3271a}
.crumbs{font-size:.85rem;color:var(--muted);margin:0 0 18px}.crumbs a{color:inherit}
.learn h2{margin-top:38px}.learn ol.steps{padding-left:0;list-style:none;counter-reset:s}
.learn ol.steps li{counter-increment:s;position:relative;padding:4px 0 4px 46px;margin:12px 0}
.learn ol.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;background:var(--ember);color:#1a0703;font-family:var(--title);font-weight:800;display:flex;align-items:center;justify-content:center}
.note{border-left:4px solid var(--ember);padding:10px 16px;background:rgba(255,255,255,.05);border-radius:0 6px 6px 0}
.gloss dt{font-family:var(--title);font-weight:700;color:var(--brass);margin-top:14px}.gloss dd{margin:2px 0 0}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:14px 0}.tbl th,.tbl td{padding:9px 12px;border-bottom:1px solid rgba(168,118,58,.4);text-align:left}.tbl th{font-family:var(--title);color:var(--brass);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.pager{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:40px 0 24px;padding-top:18px;border-top:1px solid rgba(168,118,58,.4)}
.cta-box{text-align:center;padding:26px 22px;border:2px solid var(--bronze);border-radius:8px;background:rgba(0,0,0,.25)}.cta-box h3{margin-bottom:4px}.cta-box p{margin:0 0 16px}
.demo{background:var(--parch);color:var(--ink);border:3px solid var(--bronze);border-radius:10px;padding:22px 20px;margin:18px 0;box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 0 40px rgba(138,90,40,.2)}
.demo p,.demo label{color:var(--ink)}
.demo .scene{font-style:italic;margin:0 0 14px;min-height:3em}
.controls{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.controls label{display:flex;flex-direction:column;font-size:.8rem;font-family:var(--title);letter-spacing:.06em;text-transform:uppercase;gap:4px}
select{font:inherit;font-size:1rem;padding:8px 10px;border-radius:6px;border:1px solid #8a6a3a;background:#fff8e8;color:var(--ink)}
.stage{display:flex;align-items:center;gap:22px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.stage.two{gap:14px}
.die{width:104px;height:104px;display:inline-block}
.die-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.die-body{fill:var(--die-fill);stroke:var(--die-stroke);stroke-width:3;stroke-linejoin:round}
.die-inner{fill:none;stroke:var(--die-stroke);stroke-width:1.6;opacity:.7}
.die-num{fill:var(--die-num);font-family:var(--title);font-weight:800;font-size:30px}
.die.rolling .die-svg{animation:tumble .6s linear infinite}
@keyframes tumble{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.12)}100%{transform:rotate(360deg) scale(1)}}
.die.landed .die-svg{animation:land .5s ease-out}
@keyframes land{0%{transform:scale(1.25) rotate(-12deg)}60%{transform:scale(.95) rotate(4deg)}100%{transform:none}}
.die.crit .die-body{stroke:#ffd45a;stroke-width:5;filter:drop-shadow(0 0 10px #ffd45a)}
.die.fumble .die-body{stroke:#d1301f;stroke-width:5}.die.fumble .die-svg{animation:shake .45s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.die.discard{opacity:.3;filter:grayscale(1)}
.result{min-height:3.2em;margin:12px 0 0;font-size:1.02rem}.result em{color:#8a5a00}
.good{color:var(--good)}.bad{color:var(--bad)}
.meter{position:relative;height:54px;margin:18px 6px 6px}
.meter-track{position:absolute;left:0;right:0;top:22px;height:10px;border-radius:5px;background:linear-gradient(90deg,#c9b08a,#8a6a3a)}
.meter-dc{position:absolute;top:8px;width:0;height:38px;border-left:3px dashed #a3271a;transition:left .3s}.meter-dc span{position:absolute;top:-16px;left:-22px;font-size:.75rem;font-family:var(--title);color:#a3271a;white-space:nowrap}
.meter-marker{position:absolute;top:16px;left:0;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#3a2a18;border:3px solid #f0d98c;transition:left 1s cubic-bezier(.2,.9,.2,1)}
.meter-marker.ok{background:var(--good)}.meter-marker.ko{background:var(--bad)}
.meter-marker span{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:.8rem;font-weight:700;color:var(--ink)}
.meter-scale{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:space-between;font-size:.7rem;color:#6d5a3e;font-style:normal}.meter-scale i{font-style:normal}
.modes{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:8px}.modes label{cursor:pointer}
.dice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.dice-btn{background:rgba(255,255,255,.4);border:2px solid #8a6a3a;border-radius:10px;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;color:var(--ink);transition:.2s}
.dice-btn:hover,.dice-btn:focus-visible{background:rgba(255,255,255,.75);transform:translateY(-3px)}
.dice-btn .die{width:72px;height:72px}.dice-name{font-family:var(--title);font-weight:800}.dice-use{font-size:.78rem;opacity:.75}
.dice-out{min-height:1.6em;text-align:center;margin:14px 0 0;font-weight:600}
.fighters{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:12px;align-items:center}
.fighter{background:rgba(255,255,255,.45);border:2px solid #8a6a3a;border-radius:10px;padding:12px;text-align:center;transition:.25s}
.fighter.active{border-color:#c8340f;box-shadow:0 0 0 3px rgba(200,52,15,.25);transform:translateY(-3px)}
.fighter.dead{opacity:.45;filter:grayscale(1)}
.ava{font-size:2.2rem;line-height:1}.fighter b{display:block;font-family:var(--title)}.fighter small{display:block;opacity:.75;margin-bottom:6px}
.hp{height:12px;background:#d8c9a8;border-radius:6px;overflow:hidden;border:1px solid #8a6a3a}.hp-fill{height:100%;width:100%;background:linear-gradient(90deg,#b3261a,#e0583a);transition:width .8s}
.hp-num{font-size:.8rem;font-weight:700}.mid{text-align:center}.round{font-family:var(--title);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#a3271a;min-height:1.2em;display:block}
.mid .die{width:76px;height:76px}
.why{background:rgba(255,255,255,.55);border-left:4px solid #c8340f;padding:10px 14px;border-radius:0 6px 6px 0;margin:14px 0;min-height:4.4em}
.log{list-style:none;margin:10px 0 0;padding:0;font-size:.9rem;max-height:190px;overflow:auto}.log li{padding:5px 0;border-bottom:1px dashed rgba(138,106,58,.5);color:var(--ink)}
.cycle{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.cycle>div{position:relative;background:linear-gradient(170deg,var(--stone2),var(--stone));border:2px solid var(--bronze);border-radius:8px;padding:14px 12px;text-align:center;opacity:.45;animation:cyc 6s infinite}
.cycle .c2{animation-delay:2s}.cycle .c3{animation-delay:4s}
.cycle b{display:flex;width:34px;height:34px;margin:0 auto 8px;border-radius:50%;background:var(--ember);color:#1a0703;font-family:var(--title);align-items:center;justify-content:center}
.cycle span{font-size:.92rem;color:var(--text)}
@keyframes cyc{0%,30%{opacity:1;transform:translateY(-4px);box-shadow:0 0 22px rgba(255,140,60,.5)}40%,100%{opacity:.45;transform:none;box-shadow:none}}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
.timeline>div{background:linear-gradient(170deg,var(--stone2),var(--stone));border:2px solid var(--bronze);border-radius:8px;padding:12px 10px;text-align:center}
.timeline b{display:flex;width:30px;height:30px;margin:0 auto 6px;border-radius:50%;background:var(--ember);color:#1a0703;font-family:var(--title);align-items:center;justify-content:center}
.timeline h4{font-family:var(--title);margin:0 0 4px;font-size:.9rem;color:var(--brass)}.timeline p{margin:0;font-size:.82rem;color:var(--text)}
.room.wide{flex-direction:row;align-items:center;gap:26px}.room.wide .n{margin:0}
.room.acad{background-color:#1c2a1f}
@media(max-width:860px){
 .fighters{grid-template-columns:1fr}.cycle{grid-template-columns:1fr}.timeline{grid-template-columns:1fr}
 .room.wide{flex-direction:column;align-items:flex-start;gap:4px}
 .demo{padding:16px 12px}.die{width:88px;height:88px}
 footer .cols{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.die.rolling .die-svg,.cycle>div,.die.landed .die-svg{animation:none}.cycle>div{opacity:1}}

/* galerías */
.gal{display:grid;gap:18px;margin-top:26px}.gal.g4{grid-template-columns:repeat(4,1fr)}.gal.g3{grid-template-columns:repeat(3,1fr)}
.gal figure{background:rgba(0,0,0,.28);border:2px solid var(--bronze);border-radius:8px;padding:8px;text-align:center}
.gal figure img{width:100%;height:auto;border-radius:4px;box-shadow:none}
.gal figcaption{font-size:.86rem;padding:8px 4px 4px;color:var(--text)}.gal figcaption strong{display:block;font-family:inherit;color:var(--brass)}
.gal.g3 figure img{aspect-ratio:4/3;object-fit:cover}
@media(max-width:860px){.gal.g4{grid-template-columns:repeat(2,1fr)}.gal.g3{grid-template-columns:1fr}}
.bg2 .gal figcaption{color:#e6ecd7}

/* Academia Junior / minijuego */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kidgame{font-size:1.12rem;line-height:1.55;color:#2a2416}
.kidgame h2{margin:0;color:#5b1a14;font-size:1.7rem}
.k-card{background:var(--parch,#f0ead2);border:4px solid #8a5a2b;border-radius:16px;padding:24px;box-shadow:0 16px 36px rgba(0,0,0,.45);margin:14px 0}
.k-big{font-size:1.2rem}
.k-bar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:rgba(0,0,0,.4);color:#fff4d6;border-radius:12px;padding:8px 14px;font-weight:700;font-size:1.05rem}
.k-scene{display:flex;align-items:center;gap:14px}.k-emo{font-size:2.6rem}
.k-heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:16px}
.k-hero{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 10px;min-height:56px;border:3px solid #8a5a2b;border-radius:14px;background:#fff8e2;color:#2a2416;font:inherit;cursor:pointer}
.k-hero span{font-size:2.6rem}.k-hero small{font-size:.92rem;color:#4b3f27}
.k-hero:hover,.k-hero:focus-visible{border-color:#c0392b;background:#fff0c4;outline:3px solid #e8b04b}
.k-go,.k-opt{font:inherit;font-weight:700;font-size:1.1rem;min-height:52px;padding:10px 22px;border-radius:14px;border:3px solid #8a2418;background:linear-gradient(180deg,#e8623f,#b8321c);color:#fff;cursor:pointer;margin:6px 6px 6px 0}
.k-go.big{font-size:1.35rem;min-height:64px;padding:12px 30px}.k-go.alt{background:linear-gradient(180deg,#5a8f5a,#2f6a3a);border-color:#1f4d2a}
.k-opt{background:#fff8e2;color:#2a2416;border-color:#8a5a2b;display:block;width:100%;text-align:left;margin:8px 0}
.k-opt:hover:not(:disabled),.k-go:hover{filter:brightness(1.08)}.k-opt:disabled{opacity:.45;cursor:default}
.k-go:focus-visible,.k-opt:focus-visible,.k-hero:focus-visible{outline:4px solid #e8b04b;outline-offset:2px}
.k-rule{background:#fff3b8;border:2px dashed #b9891f;border-radius:12px;padding:10px 14px;margin:10px 0;font-size:1.05rem}
.k-ask{background:rgba(255,255,255,.55);border-radius:10px;padding:10px 14px}.k-bonus{background:#2f6a3a;color:#fff;border-radius:8px;padding:2px 8px;font-weight:700;white-space:nowrap}
.k-riddle{font-style:italic;font-size:1.25rem;background:#fff8e2;border-left:6px solid #b8321c;padding:12px 16px;border-radius:8px}
.k-dice{display:flex;gap:16px;justify-content:center;min-height:86px;margin:12px 0}
.k-die{display:grid;place-items:center;width:76px;height:76px;border-radius:16px;background:#fff;border:4px solid #2a2416;font-size:2.4rem;font-weight:800;box-shadow:0 6px 0 #2a2416}
.k-dice.roll .k-die{animation:kshake .14s infinite alternate}
@keyframes kshake{from{transform:rotate(-12deg) translateY(-4px)}to{transform:rotate(12deg) translateY(2px)}}
.k-msg{min-height:1.5em;font-size:1.15rem}.k-calc{display:block;background:#2a2416;color:#fff4d6;border-radius:8px;padding:6px 12px;margin:8px 0;font-size:1rem}
.k-foes{font-size:1.3rem;text-align:center;margin:8px 0}
.k-book{background:rgba(0,0,0,.35);color:#f6ecd0;border-radius:12px;padding:12px 16px;margin-top:10px}
.k-book ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px}.k-book li{opacity:.55}.k-book li.on{opacity:1;font-weight:700}
.k-label{display:block;margin:12px 0;font-weight:700}.k-label input{display:block;width:100%;max-width:340px;margin-top:6px;font:inherit;padding:10px;border:3px solid #8a5a2b;border-radius:10px}
.cta-box.big{border-width:3px}
@media(prefers-reduced-motion:reduce){.k-dice.roll .k-die{animation:none}}

/* Diploma */
.k-diploma{position:relative;aspect-ratio:1.414/1;width:100%;max-width:640px;margin:18px auto;color:#3a2a12;text-align:center;
 background:radial-gradient(ellipse at center,rgba(255,250,225,.55),rgba(190,140,60,.28)),url(/img/textura-pergamino.jpg) center/cover,#f1e2b8;
 border:10px solid #7a4a1f;border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 0 0 4px #e3b54a,inset 0 0 0 7px #7a4a1f,inset 0 0 40px rgba(120,70,20,.35);
 container-type:inline-size;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.k-diploma::before,.k-diploma::after{content:"❦";position:absolute;font-size:7cqw;line-height:1;color:#a8781a;opacity:.85}
.k-diploma::before{top:2.5cqw;left:3.5cqw;transform:rotate(-90deg) scaleY(-1)}.k-diploma::after{bottom:2.5cqw;right:3.5cqw;transform:rotate(90deg) scaleY(-1)}
.kd-in{position:absolute;inset:7cqw 8cqw 6cqw;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.6cqw}
.kd-top{letter-spacing:.35em;font-size:2.3cqw;color:#7a4a1f;font-weight:700}
.kd-title{font-size:3.4cqw;letter-spacing:.18em;text-transform:uppercase;color:#7a4a1f}
.kd-big{font-family:var(--title);font-size:7.6cqw;line-height:1.05;color:#8a2418;text-shadow:0 1px 0 rgba(255,255,255,.6),0 0 .8cqw rgba(232,176,75,.7)}
.kd-line{font-size:2.6cqw;font-style:italic}
.kd-name{font-family:var(--title);font-size:6cqw;line-height:1.1;min-height:7cqw;color:#2a2416;border-bottom:.35cqw solid #a8781a;padding:0 3cqw;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kd-text{font-size:2.5cqw;line-height:1.35;max-width:82%}
.kd-stars{font-size:3.2cqw;letter-spacing:.2cqw;min-height:4cqw}
.kd-foot{display:flex;justify-content:space-between;width:100%;font-size:2.4cqw;padding-top:.8cqw;border-top:.25cqw solid rgba(122,74,31,.5)}
.kd-seal{position:absolute;right:6cqw;bottom:9cqw;width:13cqw;height:13cqw;background:var(--seal) center/contain no-repeat;filter:drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.4));transform:rotate(-10deg)}
.k-diploma.hasframe{border:0;box-shadow:none;background:url(/img/diploma-marco.jpg) center/100% 100% no-repeat}.k-diploma.hasframe::before,.k-diploma.hasframe::after{display:none}
@page{size:A4 landscape;margin:8mm}
@media print{body.print-dip{background:#fff!important}body.print-dip header,body.print-dip footer,body.print-dip .k-bar,body.print-dip .k-book,body.print-dip .k-card>*:not(.k-diploma),body.print-dip #d20,body.print-dip .pagehead,body.print-dip .crumbs,body.print-dip .micro,body.print-dip .k-scene,body.print-dip .k-ask,body.print-dip #toast{display:none!important}body.print-dip .k-card{border:0;box-shadow:none;background:none;padding:0;margin:0}body.print-dip .k-diploma{max-width:none;width:100%;margin:0;box-shadow:none}}
.kd-seal{right:auto;left:50%;bottom:4.2cqw;margin-left:-6.5cqw;width:12cqw;height:12cqw}
.k-diploma::before{top:1.2cqw;left:2cqw}.k-diploma::after{bottom:1.2cqw;right:2cqw}
.k-diploma::before,.k-diploma::after{font-size:5.5cqw}
.kd-in{inset:6.5cqw 9cqw 6.5cqw}
.k-diploma::after{display:none}
.kd-seal{left:auto;margin-left:0;right:2.6cqw;bottom:2.6cqw;width:11cqw;height:11cqw}
.kd-in{inset:6.5cqw 13cqw 6.5cqw 9cqw}
@media print{body.print-dip .wrap,body.print-dip .wrap.narrow,body.print-dip .kidgame{max-width:none!important;padding:0!important;width:100%!important}body.print-dip section{padding:0!important;background:none!important}}
@media print{body.print-dip .k-diploma{width:92%!important;margin:0 auto!important}}


/* Tarjeta de descarga */
.dl-wrap{max-width:1040px}
.dl{position:relative;display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(20px,4vw,44px);align-items:center;padding:clamp(20px,3.5vw,38px);background:var(--tex-parch);background-size:400px;color:var(--ink);border:2px solid var(--bronze);border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 60px rgba(255,106,31,.18),inset 0 0 50px rgba(138,90,40,.25)}
.dl-cover{position:relative;justify-self:center;width:100%;max-width:280px;transform:rotate(-2deg)}
.dl-cover img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 18px 36px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.4),0 0 0 5px var(--bronze)}
.dl-free{position:absolute;top:-12px;right:-14px;background:var(--ember);color:#1a0703;font:800 .78rem/1 var(--title);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:4px;transform:rotate(6deg);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.dl-body h2{margin:0 0 8px;color:#3a1608;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.15}
.dl-sum{margin:0 0 12px;color:#4a3d2e;font-size:.98rem}
.dl .chips{margin:0 0 12px}
.dl-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px;font-size:.95rem;color:#3d2f20}
.dl-list li{position:relative;padding-left:26px}
.dl-list li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;background:var(--ember);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.dl-form{display:grid;gap:10px}
.dl-form label:not(.dl-check){font:700 .72rem/1 var(--title);letter-spacing:.16em;text-transform:uppercase;color:#6d4a2c}
.dl-row{display:flex;gap:10px;flex-wrap:wrap}
.dl-row input{flex:1 1 220px;min-width:0;height:52px;padding:0 16px;border:2px solid #b8925a;border-radius:8px;background:rgba(255,252,240,.95);font:500 1.05rem var(--serif);color:#2b1d10}
.dl-row input:focus{outline:3px solid rgba(255,150,60,.55);border-color:var(--ember)}
.dl-row .btn{flex:0 0 auto;height:52px;padding:0 24px;border-radius:8px;cursor:pointer;border-width:1px}
.dl-row .btn.busy{opacity:.6;cursor:wait}
.dl-check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.4;color:#4a3d2e;cursor:pointer}
.dl-check input{margin-top:3px;width:18px;height:18px;accent-color:#b8340f;flex:0 0 auto}
.dl-check a{color:#8a2a0f}
.dl-msg{margin:0;min-height:1.2em;font-size:.88rem;color:#4a3d2e}.dl-msg.err{color:#a01c0c;font-weight:600}
.dl-tally{margin-bottom:6px}.dl-h{margin:0 0 4px;font:700 .8rem/1.2 var(--title);letter-spacing:.14em;text-transform:uppercase;color:#6d4a2c}
.dl-tally iframe{display:block;border:0;border-radius:6px}.dl-tally .fallback{margin:4px 0 0;font-size:.82rem;color:#6d4a2c}.dl-tally .fallback a{color:#8a2a0f}
.dl-trust{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px dashed rgba(109,74,44,.5);display:flex;gap:6px 22px;flex-wrap:wrap;font:600 .72rem/1 var(--title);letter-spacing:.1em;text-transform:uppercase;color:#6d4a2c}
.dl-trust li::before{content:"✓ ";color:#2f7a3d;font-weight:800}
@media(max-width:760px){.dl{grid-template-columns:1fr;text-align:left}.dl-cover{max-width:210px}.dl-free{right:-8px}.dl-row .btn{flex:1 1 100%}}


/* Menú desplegable también en pantallas medianas (evita solape cabecera/nav) */
@media(min-width:861px) and (max-width:1200px){
 .burger{display:block}
 nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--night,#0b0e13);flex-direction:column;align-items:flex-start;padding:16px 24px 22px;gap:14px;border-bottom:1px solid var(--bronze,#333);z-index:60}
 nav.main.open{display:flex}
}