/* WARDARKWORLD v6 — interfaz de MMORPG (marcos de oro, ventanas, botones de juego) */
:root{
  --fondo:#07060a;
  --texto:#ece6e1;
  --suave:#b2a8a3;
  --tenue:#857b77;
  --oro:#e2b45c;
  --oro2:#fff0b8;
  --oro-osc:#6e4310;
  --sangre:#c8231b;
  --sangre2:#ff4a33;
  --fuego:#ff7a1a;
  --vacio:#a26bff;
  --vacio2:#dcc6ff;
  --hielo:#6fd8ff;
  --ancho:1220px;
  --f-titulo:"Cinzel",Georgia,serif;
  --f-deco:"Cinzel Decorative","Cinzel",Georgia,serif;
  --f-sub:"Marcellus",Georgia,serif;
  --f-marca:"Oswald","Arial Narrow",sans-serif;
  --f-texto:"Barlow",system-ui,sans-serif;
  --borde-oro:linear-gradient(180deg,#fff0b8,#d9a441 30%,#7a4a10 60%,#f1cd73 85%,#8a5a18);
  --ruido:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--f-texto);font-size:17px;line-height:1.6;overflow-x:hidden;
  background-image:radial-gradient(1200px 800px at 50% 30%,rgba(110,60,200,.07),transparent 70%),url(/assets/img/piedra-runas.webp);background-size:auto,700px;background-blend-mode:normal,multiply}
body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;background-image:var(--ruido);opacity:.05;mix-blend-mode:overlay}
img,video{max-width:100%;display:block}
a{color:var(--oro)}
strong{color:#fff;font-weight:600}
button{font:inherit}
::selection{background:var(--sangre);color:#fff}
.saltar{position:absolute;left:-999px;top:8px;z-index:400;background:var(--sangre);color:#fff;padding:.5rem 1rem}
.saltar:focus{left:8px}
:focus-visible{outline:2px solid var(--oro2);outline-offset:3px}
.contenedor{width:min(var(--ancho),100% - 32px);margin-inline:auto}
.estrecho2{width:min(980px,100% - 32px)}

/* =========================================================
   PIEZAS DE INTERFAZ DE JUEGO
   ========================================================= */
/* Ventana con marco ornamentado (SVG 9-slice) */
.ventana{--marco:url(/assets/ui/marco-vacio.svg);position:relative;display:block;color:inherit;text-decoration:none;
  border:26px solid transparent;border-image:var(--marco) 40 / 26px / 0 stretch;
  background:linear-gradient(180deg,rgba(24,18,22,.97),rgba(10,8,11,.97)) padding-box;background-clip:padding-box;
  box-shadow:0 30px 70px -30px #000,0 0 40px -10px rgba(162,107,255,.18)}
.ventana-vacio{--marco:url(/assets/ui/marco-vacio.svg)}
.ventana-sangre{--marco:url(/assets/ui/marco-sangre.svg);box-shadow:0 30px 70px -30px #000,0 0 40px -10px rgba(255,74,51,.2)}
.ventana-hielo{--marco:url(/assets/ui/marco-hielo.svg)}
.ventana>*{position:relative}
/* brillo que recorre el marco */
.ventana::before{content:"";position:absolute;inset:-26px;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 40%,rgba(255,240,184,.22) 50%,transparent 60%) -150% 0/250% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) top/100% 26px no-repeat,linear-gradient(#000 0 0) bottom/100% 26px no-repeat,linear-gradient(#000 0 0) left/26px 100% no-repeat,linear-gradient(#000 0 0) right/26px 100% no-repeat;
  mask:linear-gradient(#000 0 0) top/100% 26px no-repeat,linear-gradient(#000 0 0) bottom/100% 26px no-repeat,linear-gradient(#000 0 0) left/26px 100% no-repeat,linear-gradient(#000 0 0) right/26px 100% no-repeat;
  animation:brillo-marco 7s ease-in-out infinite}
@keyframes brillo-marco{0%,55%{background-position:-150% 0}100%{background-position:250% 0}}
/* barra de título de ventana: piedra con runas + remaches */
.ventana-titulo{display:flex;align-items:center;gap:.7rem;margin:-8px -8px 0;padding:.75rem 1.1rem;position:relative;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.6)),url(/assets/img/piedra-runas.webp) center/600px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.7);border-bottom:2px solid transparent;border-image:linear-gradient(90deg,transparent,var(--oro),transparent) 1}
.ventana-titulo::before,.ventana-titulo::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff0b8,#b07a26 60%,#3a2306);box-shadow:0 0 0 1px #2b1a08}
.ventana-titulo::before{left:-4px}.ventana-titulo::after{right:-4px}
.ventana-titulo svg{width:22px;height:22px;color:var(--oro);flex:none;filter:drop-shadow(0 0 6px rgba(226,180,92,.6))}
.ventana-titulo span{font-family:var(--f-titulo);font-weight:700;font-size:1.02rem;letter-spacing:.06em;color:var(--oro2);text-shadow:0 2px 0 #000}
.ventana-titulo em{margin-left:auto;font-style:normal;font-family:var(--f-marca);font-weight:500;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#d8cfcb;
  border:1px solid rgba(226,180,92,.5);padding:.15rem .6rem;background:rgba(0,0,0,.4)}
.calidad-epica{color:#c99bff!important;border-color:rgba(162,107,255,.7)!important}
.calidad-leg{color:#ffb347!important;border-color:rgba(255,140,40,.7)!important}

/* Marco dorado sencillo para imágenes */
.marco-oro{position:relative;padding:4px;background:var(--borde-oro);box-shadow:0 0 0 1px #1b1006,0 20px 40px -18px #000}
.marco-oro::after{content:"";position:absolute;inset:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 0 60px rgba(0,0,0,.55);pointer-events:none}

/* BOTONES DE JUEGO */
.btn-juego{--c1:#ff5a3a;--c2:#b81a12;--c3:#4a0806;--brillo:rgba(255,190,160,.55);position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 2rem;cursor:pointer;text-decoration:none;border:0;isolation:isolate;
  font-family:var(--f-titulo);font-weight:700;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6);
  background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 52%,var(--c3) 100%);
  border-radius:4px;box-shadow:0 0 0 2px #2b1a08,0 0 0 4px #c8902f,0 0 0 5px #2b1a08,inset 0 2px 0 var(--brillo),inset 0 -4px 8px rgba(0,0,0,.45),0 12px 28px -10px rgba(0,0,0,.8);
  transition:transform .12s,filter .2s,box-shadow .2s;overflow:hidden;margin:5px}
.btn-juego>span{position:relative;z-index:2}
.btn-juego::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,240,184,.35);border-radius:2px;pointer-events:none;z-index:1}
.btn-juego::after{content:"";position:absolute;top:-60%;left:-70%;width:40%;height:220%;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);transform:skewX(-18deg);animation:barrido 5s ease-in-out infinite}
@keyframes barrido{0%,60%{left:-70%}100%{left:140%}}
.btn-juego:hover{filter:brightness(1.15);transform:translateY(-2px);box-shadow:0 0 0 2px #2b1a08,0 0 0 4px #ffd27a,0 0 0 5px #2b1a08,0 0 26px 4px rgba(255,150,60,.45),inset 0 2px 0 var(--brillo),inset 0 -4px 8px rgba(0,0,0,.45)}
.btn-juego:active{transform:translateY(1px);filter:brightness(.92);box-shadow:0 0 0 2px #2b1a08,0 0 0 4px #c8902f,0 0 0 5px #2b1a08,inset 0 4px 10px rgba(0,0,0,.6)}
.btn-sangre{--c1:#ff5a3a;--c2:#b81a12;--c3:#4a0806}
.btn-oro{--c1:#ffe08a;--c2:#d18a1c;--c3:#5e3306;--brillo:rgba(255,250,220,.8);color:#2a1503;text-shadow:0 1px 0 rgba(255,240,200,.6)}
.btn-acero{--c1:#6a6f79;--c2:#2c2f35;--c3:#101114;--brillo:rgba(255,255,255,.3)}
.btn-vacio{--c1:#b98bff;--c2:#6a2fd0;--c3:#1f0a45;--brillo:rgba(230,210,255,.6)}
.btn-mini{min-height:38px;padding:0 1.1rem;font-size:.8rem}
.btn-ancho{width:calc(100% - 10px)}
.btn-juego[disabled]{filter:grayscale(.6) brightness(.8);cursor:wait}

/* Separador con gema */
.separador{display:block;width:min(420px,80vw);height:auto;margin:1.2rem auto 0}

/* Tooltip estilo descripción de objeto */
.tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);width:260px;z-index:30;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s;
  text-align:left;padding:.8rem .9rem;background:rgba(8,10,22,.96);border:1px solid #6a6f88;box-shadow:0 0 0 1px #000,0 12px 30px rgba(0,0,0,.8);border-radius:4px;font-family:var(--f-texto)}
.tip b{display:block;font-family:var(--f-titulo);font-size:1.05rem;color:var(--tono);text-shadow:0 0 10px color-mix(in srgb,var(--tono) 50%,transparent)}
.tip i{display:block;font-style:normal;color:#fff;font-size:.86rem;margin:.15rem 0}
.tip em{display:block;font-style:normal;color:#1eff00;font-size:.84rem;margin-bottom:.35rem}
.tip span{display:block;color:#ffd100;font-size:.86rem;line-height:1.45}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem clamp(16px,4vw,48px);transition:background .35s,padding .35s}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--oro),transparent);opacity:0;transition:opacity .35s}
.nav.solida{background:rgba(8,6,9,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-block:.35rem}
.nav.solida::after{opacity:.7}
.nav-marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font-family:var(--f-titulo);font-weight:700;letter-spacing:.14em;font-size:1rem}
.nav-marca img{width:40px;height:auto;filter:drop-shadow(0 0 8px rgba(162,107,255,.5))}
.nav-menu{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem);list-style:none;margin:0;padding:0}
.nav-menu a:not(.btn-juego){color:#ece6e2;text-decoration:none;font-family:var(--f-titulo);font-weight:600;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;position:relative;padding:.3rem 0}
.nav-menu a:not(.btn-juego)::after{content:"";position:absolute;left:50%;right:50%;bottom:-4px;height:2px;background:var(--oro);box-shadow:0 0 8px var(--oro);transition:left .25s,right .25s}
.nav-menu a:not(.btn-juego):hover{color:var(--oro2)}
.nav-menu a:not(.btn-juego):hover::after{left:0;right:0}
.btn-nav{min-height:40px;padding:0 1.2rem;font-size:.82rem}
.nav-boton{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-boton span{display:block;width:26px;height:2px;background:var(--oro2);margin:6px 0;transition:transform .3s,opacity .3s}

/* =========================================================
   CABECERA (la cazadora anclada a la derecha: siempre visible)
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:6rem clamp(16px,5vw,90px) 7rem}
.hero-fondo{position:absolute;top:0;bottom:0;right:0;width:max(100%,179svh);z-index:-3}
.hero-img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 35%}
.hero-video{opacity:0;transition:opacity 1s}
.hero-video.lista{opacity:1}
.hero-velo{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,6,10,.96) 0%,rgba(7,6,10,.8) 28%,rgba(7,6,10,.3) 48%,transparent 62%),linear-gradient(180deg,rgba(7,6,10,.55) 0%,transparent 18%,transparent 70%,var(--fondo) 100%)}
.ascuas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-contenido{position:relative;width:min(620px,46vw);display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-logo{margin:0 0 .4rem;width:100%}
.hero-logo img{width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(162,107,255,.25));animation:logo-entra 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes logo-entra{from{opacity:0;transform:scale(.9);filter:brightness(2) blur(6px)}}
.lema{margin:.2rem 0 .3rem;font-family:var(--f-titulo);font-weight:700;font-size:clamp(.9rem,1.2vw,1.15rem);letter-spacing:.3em;text-transform:uppercase;color:#f6f0ff;text-shadow:0 0 18px rgba(162,107,255,.6),0 2px 0 #000}
.lema span{white-space:nowrap}
.lema i{font-style:normal;color:var(--vacio);margin:0 .4em;font-size:.7em;vertical-align:.15em}
.hero-sub{font-family:var(--f-sub);font-size:clamp(.98rem,1.2vw,1.12rem);color:#d6cede;margin:.2rem 0 1.1rem;text-shadow:0 2px 8px #000}
.pildora{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-marca);font-weight:500;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:linear-gradient(90deg,rgba(70,25,140,.9),rgba(14,8,22,.9));border:1px solid rgba(226,180,92,.6);padding:.45rem 1.2rem;border-radius:999px;box-shadow:0 0 18px rgba(162,107,255,.35)}
.punto{width:8px;height:8px;border-radius:50%;background:#7dff8a;box-shadow:0 0 0 0 rgba(125,255,138,.8);animation:late 1.8s infinite}
@keyframes late{70%{box-shadow:0 0 0 10px rgba(125,255,138,0)}100%{box-shadow:0 0 0 0 rgba(125,255,138,0)}}
.hero-botones{display:flex;flex-wrap:wrap;gap:.6rem 1rem;justify-content:center;margin-top:1.4rem}
.hero-contenido>*:not(.hero-logo){animation:entra .9s cubic-bezier(.2,.7,.2,1) both}
.hero-contenido>:nth-child(2){animation-delay:.35s}.hero-contenido>:nth-child(3){animation-delay:.45s}.hero-contenido>:nth-child(4){animation-delay:.55s}.hero-contenido>:nth-child(5){animation-delay:.65s}
@keyframes entra{from{opacity:0;transform:translateY(20px)}}
.hero-bajar{position:absolute;bottom:1.4rem;left:50%;translate:-50% 0;width:26px;height:42px;border:2px solid rgba(226,180,92,.6);border-radius:14px}
.hero-bajar span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;background:var(--oro2);animation:rueda 1.6s infinite}
@keyframes rueda{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* =========================================================
   BARRA DE ESTADO + LLAMADAS A LA ACCIÓN
   ========================================================= */
.estado-barra{position:relative;z-index:5;margin-top:-5.5rem}
.estado-ventana{display:grid;grid-template-columns:repeat(4,1fr)}
.estado-celda{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.8rem;align-items:center;padding:.6rem 1rem;position:relative}
.estado-celda+.estado-celda::before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:1px;background:linear-gradient(180deg,transparent,var(--oro),transparent)}
.estado-celda strong{font-family:var(--f-titulo);font-weight:700;font-size:1.3rem;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.estado-celda small{grid-column:2;font-family:var(--f-marca);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}
.estado-gema{grid-row:1/3;width:30px;height:30px;transform:rotate(45deg);border:2px solid #c8902f;box-shadow:0 0 0 1px #2b1a08,0 0 14px var(--g)}
.estado-gema::after{content:"";display:block;width:100%;height:100%;background:radial-gradient(circle at 35% 35%,#fff,var(--g) 40%,#000 100%)}
.gema-fuego{--g:#ff6a1a}.gema-vacio{--g:#a26bff}.gema-oro{--g:#ffd27a}.gema-hielo{--g:#6fd8ff}
.cta-tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:860px;margin:1.6rem auto 0}
.cta-tarjeta{position:relative;display:flex;align-items:center;min-height:120px;padding:1rem 1.2rem;text-decoration:none;color:#fff;overflow:hidden;
  background:linear-gradient(90deg,rgba(12,9,12,.96) 40%,rgba(12,9,12,.2)),var(--img) right 20%/55% auto no-repeat,#120d10;
  border:2px solid transparent;border-image:linear-gradient(135deg,#fff0b8,#c8902f 30%,#5a3508 60%,#f1cd73) 1;box-shadow:0 18px 40px -18px #000;transition:transform .25s,box-shadow .25s}
.cta-tarjeta:hover{transform:translateY(-4px);box-shadow:0 22px 50px -16px #000,0 0 30px -6px var(--tono)}
.cta-texto{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.cta-texto b{font-family:var(--f-titulo);font-weight:900;font-size:1.4rem;letter-spacing:.04em}
.cta-texto small{font-size:.9rem;color:var(--suave);margin-bottom:.3rem}
.cta-texto .btn-juego{margin:.3rem 0 0 5px}

/* =========================================================
   CABECERAS DE SECCIÓN
   ========================================================= */
.seccion{position:relative;padding:clamp(4rem,8vw,6.5rem) 0}
.cabeza{text-align:center;max-width:820px;margin:0 auto 2.6rem}
.antetitulo{font-family:var(--f-marca);font-weight:500;font-size:.82rem;letter-spacing:.36em;text-transform:uppercase;color:var(--fuego);margin:0 0 .5rem}
.titulo{font-family:var(--f-titulo);font-weight:900;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08;margin:0 0 1rem;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff8e0 0%,#f3d58e 40%,#b9852f 70%,#f6dc9c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 18px rgba(226,180,92,.25))}
.titulo.izq{text-align:left}
.entradilla{font-family:var(--f-sub);color:#ddd5d2;font-size:1.14rem;line-height:1.6;margin:0 0 1rem}
.cabeza .entradilla{margin:0}

/* =========================================================
   NOVEDAD
   ========================================================= */
.novedad-cuerpo{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;padding:1.2rem .4rem .4rem}
.novedad-img{margin:0;position:relative;padding:3px;background:var(--borde-oro)}
.novedad-img img{width:100%;height:auto}
.lista-gemas{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.55rem}
.lista-gemas li{position:relative;padding-left:1.6rem;color:#d8d0cc}
.lista-gemas li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;transform:rotate(45deg);background:radial-gradient(circle at 35% 35%,#fff,var(--vacio) 50%,#2a0f55);box-shadow:0 0 0 1px #c8902f,0 0 8px var(--vacio)}
.lista-gemas b{color:#fff}

/* =========================================================
   EL REINO (como «El mundo oscuro» del MU)
   ========================================================= */
.reino{overflow:hidden;isolation:isolate}
.reino-fondo{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--fondo) 0%,rgba(7,6,10,.82) 45%,rgba(7,6,10,.55) 100%),linear-gradient(180deg,var(--fondo),transparent 20%,transparent 80%,var(--fondo)),var(--img) center/cover}
.reino-rejilla{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.reino p{color:#d4ccc8}
.reino-lista{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.reino-lista li{text-align:right;padding-right:1.1rem;border-right:3px solid var(--oro);box-shadow:inset -10px 0 14px -12px var(--oro)}
.reino-lista b{display:block;font-family:var(--f-titulo);font-weight:700;font-size:1.45rem;color:#fff;text-shadow:0 2px 0 #000}
.reino-lista span{font-family:var(--f-marca);font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}
.aviso-fijo{display:flex;gap:.9rem;align-items:center;margin-top:1.4rem;padding:.9rem 1.1rem;background:rgba(10,8,14,.85);border:1px solid rgba(226,180,92,.45);border-radius:6px;box-shadow:0 0 24px -8px rgba(111,216,255,.4)}
.aviso-fijo svg{width:38px;height:38px;color:var(--hielo);flex:none}
.aviso-fijo b{display:block;color:#fff}
.aviso-fijo span{color:var(--suave);font-size:.95rem}

/* =========================================================
   EL MUNDO
   ========================================================= */
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.tesela{margin:0;overflow:hidden;aspect-ratio:16/9}
.tesela img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tesela:hover img{transform:scale(1.06)}
.tesela::before{content:"";position:absolute;inset:4px;z-index:1;background:linear-gradient(180deg,transparent 50%,rgba(5,5,7,.92));pointer-events:none}
.tesela-pie{position:absolute;left:1.4rem;bottom:1.1rem;z-index:2}
.tesela-pie span{font-family:var(--f-marca);font-weight:500;font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--acento);text-shadow:0 0 10px var(--acento)}
.tesela-pie h3{margin:.15rem 0 0;font-family:var(--f-titulo);font-weight:900;font-size:clamp(1.2rem,2vw,1.7rem);color:#fff;text-shadow:0 2px 0 #000}

/* =========================================================
   BANDA
   ========================================================= */
.banda{position:relative;min-height:clamp(340px,44vw,540px);display:grid;place-items:center;overflow:hidden;isolation:isolate;border-block:2px solid transparent;border-image:linear-gradient(90deg,transparent,var(--oro),transparent) 1}
.banda-fondo{position:absolute;inset:-12% 0;z-index:-1;background:var(--img) center 40%/cover no-repeat;will-change:transform}
.banda::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,6,10,.88) 0%,rgba(7,6,10,.4) 45%,rgba(7,6,10,.1) 100%)}
.banda-texto{display:flex}
.cita{font-family:var(--f-titulo);font-weight:700;font-size:clamp(1.5rem,3.3vw,2.8rem);line-height:1.15;color:#fff;text-shadow:0 3px 0 #000,0 0 30px rgba(0,0,0,.9);margin:0;max-width:640px;text-transform:uppercase}
.cita strong{display:block;margin-top:.35em;font-weight:900;color:var(--vacio2);text-shadow:0 3px 0 #000,0 0 30px rgba(140,70,255,.8)}

/* =========================================================
   ELIGE TU HÉROE
   ========================================================= */
.heroes{display:grid;grid-template-columns:repeat(7,1fr);gap:.9rem;margin-bottom:2.2rem}
.heroe{--tono:#fff;position:relative;display:block;padding:3px;aspect-ratio:3/4;border:0;cursor:pointer;background:linear-gradient(135deg,#fff0b8,#c8902f 30%,#4a2c08 60%,#e7bd62);
  border-radius:3px;box-shadow:0 0 0 1px #1b1006,0 14px 28px -14px #000;transition:transform .25s,box-shadow .25s}
.heroe img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.8);transition:filter .3s}
.heroe::after{content:"";position:absolute;inset:3px;background:linear-gradient(180deg,transparent 45%,rgba(5,4,6,.95));pointer-events:none}
.heroe-icono{position:absolute;top:8px;left:8px;z-index:2;width:34px;height:34px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#2a2c35,#08080b);
  border:2px solid #c8902f;box-shadow:0 0 0 1px #000,inset 0 0 8px rgba(0,0,0,.8);border-radius:3px}
.heroe-icono svg{width:22px;height:22px;color:var(--tono);filter:drop-shadow(0 0 4px var(--tono))}
.heroe-nombre{position:absolute;left:4px;right:4px;bottom:8px;z-index:2;font-family:var(--f-titulo);font-weight:700;font-size:.82rem;line-height:1.15;text-align:center;color:#fff;text-shadow:0 2px 0 #000}
.heroe-sello{position:absolute;top:8px;right:6px;z-index:2;font-family:var(--f-marca);font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--vacio);padding:.1rem .4rem;box-shadow:0 0 10px var(--vacio)}
.heroe:hover,.heroe:focus-visible{transform:translateY(-5px);box-shadow:0 0 0 1px #1b1006,0 0 24px 2px color-mix(in srgb,var(--tono) 55%,transparent),0 16px 30px -14px #000}
.heroe:hover img,.heroe[aria-selected=true] img{filter:saturate(1.05) brightness(1)}
.heroe:hover .tip,.heroe:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
.heroe[aria-selected=true]{background:linear-gradient(135deg,var(--tono),#fff0b8 30%,var(--tono) 60%,#c8902f);box-shadow:0 0 0 1px #000,0 0 28px 4px color-mix(in srgb,var(--tono) 60%,transparent)}
.heroe:nth-child(7n+1) .tip{left:0;transform:translate(0,6px)}
.heroe:nth-child(7n+1):hover .tip{transform:translate(0,0)}
.heroe:nth-child(7n) .tip{left:auto;right:0;transform:translate(0,6px)}
.heroe:nth-child(7n):hover .tip{transform:translate(0,0)}

.ficha{--tono:#fff;--marco:url(/assets/ui/marco-vacio.svg)}
.ficha-cuerpo{display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;padding:1.2rem .4rem .4rem;
  background:radial-gradient(600px 380px at 20% 50%,color-mix(in srgb,var(--tono) 14%,transparent),transparent 70%)}
.ficha-retrato{margin:0;padding:4px;background:linear-gradient(135deg,var(--tono),#fff0b8 25%,#5a3508 55%,var(--tono));box-shadow:0 0 50px color-mix(in srgb,var(--tono) 35%,transparent)}
.ficha-retrato img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ficha.entra .ficha-retrato img{animation:retrato .55s cubic-bezier(.2,.7,.2,1) both}
.ficha.entra .ficha-info>*{animation:entra .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes retrato{from{opacity:0;transform:scale(1.05);filter:brightness(1.7) saturate(.4)}}
.ficha-elemento{font-family:var(--f-marca);font-weight:500;font-size:.84rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tono);text-shadow:0 0 10px var(--tono)}
.ficha-info h3{margin:.4rem 0 .9rem;font-family:var(--f-titulo);font-weight:900;font-size:clamp(2rem,4vw,3.4rem);line-height:1;color:#fff;text-shadow:0 3px 0 #000,0 0 24px color-mix(in srgb,var(--tono) 45%,transparent)}
.sel-nuevo{display:inline-block;vertical-align:middle;font-family:var(--f-marca);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--vacio);padding:.2rem .6rem;text-shadow:none}
.sel-roles{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem;padding:0}
.sel-roles li{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-marca);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#eee;background:rgba(0,0,0,.5);border:1px solid rgba(226,180,92,.4);padding:.32rem .7rem}
.sel-roles svg{width:15px;height:15px;color:var(--tono)}
.ficha-info p{font-family:var(--f-sub);font-size:1.18rem;line-height:1.55;color:#e0d8d4;max-width:46ch;margin:0 0 1.3rem}
.ficha-botones{display:flex;flex-wrap:wrap;gap:.4rem}

/* =========================================================
   DESARROLLO: registro de misiones
   ========================================================= */
.desarrollo{overflow:hidden;isolation:isolate}
.desarrollo-fondo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--fondo),rgba(7,6,10,.6) 25%,rgba(7,6,10,.65) 75%,var(--fondo)),var(--img) center/cover}
.misiones-cuerpo{padding:1.4rem .6rem .4rem}
.xp{margin-bottom:1.4rem}
.xp-barra{position:relative;height:22px;border-radius:3px;background:linear-gradient(180deg,#0b0710,#1d1424);box-shadow:0 0 0 2px #2b1a08,0 0 0 4px #c8902f,0 0 0 5px #2b1a08,inset 0 3px 6px rgba(0,0,0,.8);overflow:hidden;margin:5px}
.xp-barra span{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(180deg,#d8a6ff 0%,#8f45ff 45%,#4b169e 100%);box-shadow:0 0 16px #a26bff,inset 0 1px 0 rgba(255,255,255,.6);transition:width 1.8s cubic-bezier(.2,.7,.2,1)}
.xp-barra span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent) -100% 0/40% 100% no-repeat;animation:xp-brillo 2.6s linear infinite}
@keyframes xp-brillo{to{background-position:300% 0}}
.xp.visto .xp-barra span,.revela.visto .xp-barra span{width:var(--p)}
.xp-barra i{position:absolute;top:0;bottom:0;width:2px;background:rgba(0,0,0,.6)}
.xp-barra i:nth-of-type(1){left:16.66%}.xp-barra i:nth-of-type(2){left:33.33%}.xp-barra i:nth-of-type(3){left:50%}.xp-barra i:nth-of-type(4){left:66.66%}.xp-barra i:nth-of-type(5){left:83.33%}
.xp-texto{display:flex;justify-content:space-between;margin-top:.5rem;font-family:var(--f-marca);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#e7dccf}
.resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.4rem}
.resumen>div{background:rgba(0,0,0,.45);border:1px solid rgba(226,180,92,.35);padding:.8rem 1rem;border-radius:3px}
.resumen-k{display:block;font-family:var(--f-marca);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--suave);margin-bottom:.2rem}
.resumen strong{font-family:var(--f-titulo);font-weight:700;font-size:1.05rem;color:#ffd100}
.hitos{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.hito{display:grid;grid-template-columns:30px 1fr auto;gap:1rem;align-items:center;padding:.75rem .9rem;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:3px}
.hito-marca{width:22px;height:22px;transform:rotate(45deg);border:2px solid #555;background:#111;margin-left:4px}
.hito.hecho .hito-marca{border-color:#c8902f;background:radial-gradient(circle at 35% 35%,#fff,#3cff6a 45%,#0b4a18);box-shadow:0 0 12px #3cff6a}
.hito.curso .hito-marca{border-color:#c8902f;background:radial-gradient(circle at 35% 35%,#fff,#ffd100 45%,#5a3a00);box-shadow:0 0 12px #ffd100;animation:late 1.8s infinite}
.hito h3{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:1.05rem;color:#ffd100}
.hito.hecho h3{color:#9a9a9a;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.hito p{margin:.15rem 0 0;color:#c8bfbb;font-size:.95rem}
.estado{font-family:var(--f-marca);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);white-space:nowrap}
.hito.hecho .estado{color:#3cff6a}.hito.curso .estado{color:#ffd100}

/* =========================================================
   PRERREGISTRO + TABLÓN
   ========================================================= */
.prerregistro{overflow:hidden;background:radial-gradient(760px 480px at 30% 45%,rgba(162,107,255,.16),transparent 70%)}
.dos-paneles{display:grid;grid-template-columns:1.25fr 1fr;gap:1.6rem;align-items:start;position:relative;z-index:1}
.registro-cuerpo{text-align:center;padding:1.2rem .8rem .6rem}
.registro-sello{width:120px;height:auto;margin:0 auto .2rem;filter:drop-shadow(0 0 24px rgba(140,70,255,.55))}
.registro .titulo{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.ventajas{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;margin:0 auto 1.4rem;padding:0}
.ventajas li{font-family:var(--f-marca);font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#1eff00;display:flex;align-items:center;gap:.4rem}
.ventajas li::before{content:"✓";font-weight:700}
.formulario{text-align:left;display:grid;gap:.9rem;max-width:460px;margin:0 auto}
.campo label{display:block;font-family:var(--f-marca);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro2);margin-bottom:.35rem}
.opcional{color:var(--suave);text-transform:none;letter-spacing:0;font-family:var(--f-texto)}
.campo input{width:100%;font:inherit;font-size:1rem;color:#fff;background:#050407;border:2px solid #5a3a10;border-radius:3px;padding:.85rem 1rem;box-shadow:inset 0 3px 8px rgba(0,0,0,.8);transition:border-color .2s,box-shadow .2s}
.campo input::placeholder{color:#6e6461}
.campo input:focus{outline:0;border-color:var(--oro);box-shadow:inset 0 3px 8px rgba(0,0,0,.8),0 0 14px rgba(226,180,92,.35)}
.campo input[aria-invalid=true]{border-color:#ff3b2b}
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.casilla{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--suave);cursor:pointer}
.casilla input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--oro);flex:none}
.mensaje{min-height:1.5em;margin:.2rem 0 0;text-align:center}
.mensaje.ok{color:#1eff00}.mensaje.error{color:#ff6b5e}
.columna-lateral{display:grid;gap:1.6rem}
.noticias{list-style:none;margin:0;padding:.8rem .2rem .2rem;display:grid;gap:.9rem}
.noticias li{display:grid;grid-template-columns:96px 1fr;gap:.9rem;align-items:start;padding-bottom:.9rem;border-bottom:1px solid rgba(226,180,92,.15)}
.noticias li:last-child{border-bottom:0;padding-bottom:0}
.noticias img{width:96px;height:54px;object-fit:cover;border:1px solid #c8902f}
.noticias b{display:block;color:#fff;font-family:var(--f-titulo);font-size:.98rem}
.noticias small{display:block;color:var(--tenue);font-size:.8rem;margin:.1rem 0 .2rem}
.noticias span{color:#cfc6c2;font-size:.92rem;line-height:1.45}
.mu-panel{--marco:url(/assets/ui/marco-sangre.svg)}
.mu-cuerpo{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding:1rem .3rem .2rem;background:linear-gradient(90deg,rgba(10,8,11,.92) 45%,rgba(10,8,11,.4)),url(/assets/img/mazmorra-720.webp) right center/cover}
.mu-cuerpo b{font-family:var(--f-titulo);font-weight:900;font-size:1.3rem;color:#fff}
.mu-cuerpo>span:not(.btn-juego){color:#d8cfcb;font-size:.95rem;max-width:34ch}

/* =========================================================
   PIE (como el del MU)
   ========================================================= */
.pie{position:relative;background:linear-gradient(180deg,rgba(14,10,12,.6),#040305),url(/assets/img/piedra-runas.webp) center/700px;background-blend-mode:multiply;padding:0 0 1.6rem;margin-top:2rem}
.pie-sep{margin:0 auto;transform:translateY(-20px)}
.pie-rejilla{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.4rem;padding:1rem 0 2.2rem}
.pie-marca img{width:min(300px,80%);height:auto;margin-bottom:.6rem}
.pie-marca span{display:block;color:var(--suave);font-size:.95rem;max-width:40ch}
.pie-col{display:flex;flex-direction:column;gap:.5rem}
.pie-col h3{margin:0 0 .4rem;font-family:var(--f-titulo);font-weight:700;font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.pie-col a{color:#d7cfcb;text-decoration:none;font-size:.98rem;transition:color .2s,padding .2s}
.pie-col a:hover{color:var(--oro2);padding-left:4px}
.pie-legal{border-top:1px solid rgba(226,180,92,.18);padding-top:1.3rem;display:flex;flex-direction:column;gap:.9rem}
.pie-legal>p{margin:0;color:var(--tenue);font-size:.86rem}
.pie-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pie-fila p{margin:0;color:var(--tenue);font-size:.86rem}
.do-sello{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:#222;text-decoration:none;border-radius:999px;padding:.25rem .8rem .25rem .9rem;font:600 .72rem/1 system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.do-sello img{height:30px;width:auto}

/* =========================================================
   HUMO, FLOTANTE, ANIMACIONES
   ========================================================= */
.humo{position:absolute;left:-10%;right:-10%;bottom:0;height:60%;z-index:0;pointer-events:none;background:url(/assets/img/humo.webp) center bottom/cover no-repeat;mix-blend-mode:screen;opacity:.4;animation:deriva 38s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%);mask-image:linear-gradient(180deg,transparent 0,#000 45%)}
.hero .humo{z-index:-1;opacity:.5}
@keyframes deriva{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.flotante{position:fixed;right:clamp(10px,3vw,26px);bottom:clamp(10px,3vw,26px);z-index:90;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s,transform .3s}
.flotante.visible{opacity:1;transform:none;pointer-events:auto}
.revela{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.revela.visto{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:1700px){
  .hero-contenido{width:min(820px,40vw)}
  .lema{font-size:1.35rem}.hero-sub{font-size:1.3rem}
  .btn-juego{min-height:60px;font-size:1.1rem;padding:0 2.4rem}
}
@media (max-width:1180px){
  .heroes{grid-template-columns:repeat(5,1fr)}
  .heroe:nth-child(n) .tip{left:50%;right:auto;transform:translate(-50%,6px)}
  .heroe:nth-child(n):hover .tip{transform:translate(-50%,0)}
  .heroe:nth-child(5n+1) .tip{left:0;transform:translate(0,6px)}
  .heroe:nth-child(5n) .tip{left:auto;right:0;transform:translate(0,6px)}
  .estado-ventana{grid-template-columns:repeat(2,1fr)}
  .estado-celda:nth-child(3)::before{display:none}
}
@media (max-width:900px),(max-aspect-ratio:5/4){
  /* v7: la escena arriba (caballero y dragón a la vista) y el logo/texto debajo, sin taparles la cara */
  .hero{display:block;min-height:0;padding:0 16px 6.6rem}
  .hero-fondo{top:0;bottom:auto;height:var(--alto-escena);width:max(100%,calc(var(--alto-escena)*1.79));-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);mask-image:linear-gradient(180deg,#000 74%,transparent)}
  .hero{--alto-escena:min(54svh,118vw)}
  .hero-velo{background:linear-gradient(180deg,rgba(7,6,10,.55) 0%,transparent 12%)}
  .hero-contenido{width:min(560px,100%);margin:calc(var(--alto-escena) - min(26vw,150px)) auto 0}
  .hero-logo{width:min(80vw,460px)}
  .hero-bajar{display:none}
}
@media (max-width:900px){
  .nav-boton{display:block;position:relative;z-index:2}
  .nav-menu{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:1.8rem;background:rgba(8,6,9,.97);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .nav-menu a:not(.btn-juego){font-size:1.15rem}
  .nav.abierta .nav-menu{opacity:1;visibility:visible}
  .nav.abierta .nav-boton span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav.abierta .nav-boton span:nth-child(2){opacity:0}
  .nav.abierta .nav-boton span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .estado-barra{margin-top:-4.5rem}
  .novedad-cuerpo,.reino-rejilla,.dos-paneles,.ficha-cuerpo{grid-template-columns:1fr}
  .ficha-retrato{width:min(320px,100%);margin-inline:auto}
  .ficha-info{text-align:center}.sel-roles,.ficha-botones{justify-content:center}.ficha-info p{margin-inline:auto}
  .reino-lista li{text-align:left;border-right:0;border-left:3px solid var(--oro);padding:0 0 0 1rem;box-shadow:inset 10px 0 14px -12px var(--oro)}
  .heroes{grid-template-columns:repeat(4,1fr)}
  .tip{display:none}
  .mosaico{grid-template-columns:1fr}
  .resumen{grid-template-columns:1fr}
  .cta-tarjetas{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}
  .banda::after{background:linear-gradient(0deg,rgba(7,6,10,.92) 0%,rgba(7,6,10,.3) 60%,rgba(7,6,10,.2))}
  .banda{place-items:end start;padding-bottom:2.2rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .ventana{border-width:18px;border-image-width:18px}
  .ventana::before{inset:-18px}
  .ventana-titulo span{font-size:.9rem}
  .heroes{grid-template-columns:repeat(3,1fr);gap:.6rem}
  .heroe-nombre{font-size:.72rem}
  .heroe-icono{width:28px;height:28px}.heroe-icono svg{width:18px;height:18px}
  .lema{letter-spacing:.18em;font-size:.8rem}
  .hero-botones .btn-juego{flex:1 1 100%}
  .estado-celda{padding:.5rem .4rem;column-gap:.5rem}
  .estado-celda strong{font-size:1.05rem}
  .estado-celda small{font-size:.6rem;letter-spacing:.1em}
  .estado-gema{width:22px;height:22px}
  .hito{grid-template-columns:26px 1fr}.hito .estado{grid-column:2}
  .pie-rejilla{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .revela{opacity:1;transform:none}
}