/* Reino Latino — estilos compartidos (index, guias, 404). Lenguaje visual de la interfaz de Minecraft:
   paneles con bisel, ranuras de inventario, texturas pixeladas propias (img/tex) y fuente pixel. */
:root{
  color-scheme:dark;
  --fondo:#0c0a11;
  --fondo-tex:linear-gradient(rgba(12,10,17,.9),rgba(12,10,17,.9)),url(/img/tex/obsidiana.png);
  --banda-tex:linear-gradient(rgba(22,21,28,.93),rgba(22,21,28,.93)),url(/img/tex/pizarra.png);
  --texto:#ecebf2;--suave:#aaa7b9;--fuerte:#fff;
  --panel:#1b1a22;--panel-tex:linear-gradient(rgba(30,29,38,.94),rgba(30,29,38,.94)),url(/img/tex/pizarra.png);
  --luz:rgba(255,255,255,.12);--oscuro:rgba(0,0,0,.55);--linea:#000;
  --ranura:#2b2a34;--ranura-luz:#4b4a58;--ranura-osc:#0d0c12;
  --borde:rgba(255,255,255,.1);
  --acento:#ffaa00;--acento2:#ffd84a;
  --titulo-sombra:3px 3px 0 #000;
  --nav-solida:rgba(12,10,17,.9);
  --code-bg:rgba(0,0,0,.45);--code-tx:#ffd84a;
  --sombra:rgba(0,0,0,.6);
  --sv:#55ff55;--fc:#ff5555;--sb:#55ffff;--hc:#ffaa00;
  --r1:#55ff55;--r2:#00c800;--r3:#55ffff;--r4:#ff55ff;--r5:#ffaa00;
  --vip:#55ff55;--vipp:#55ffff;--ley:#ffaa00;
  --alto-nav:64px;
  --pixel:"Pixelify Sans","Courier New",monospace;
}
:root[data-theme="light"]{
  color-scheme:light;
  --fondo:#e9dfc3;
  --fondo-tex:linear-gradient(rgba(240,232,208,.82),rgba(240,232,208,.82)),url(/img/tex/arenisca.png);
  --banda-tex:linear-gradient(rgba(226,220,207,.86),rgba(226,220,207,.86)),url(/img/tex/abedul.png);
  --texto:#262626;--suave:#4b4b4b;--fuerte:#111;
  --panel:#c6c6c6;--panel-tex:linear-gradient(#c6c6c6,#c6c6c6);
  --luz:#fff;--oscuro:#555;--linea:#161616;
  --ranura:#8b8b8b;--ranura-luz:#fff;--ranura-osc:#373737;
  --borde:rgba(0,0,0,.18);
  --acento:#8a4f00;--acento2:#9a5a00;
  --titulo-sombra:2px 2px 0 rgba(0,0,0,.12);
  --nav-solida:rgba(233,225,200,.93);
  --code-bg:rgba(0,0,0,.1);--code-tx:#5a3500;
  --sombra:rgba(60,40,10,.3);
  --sv:#007a00;--fc:#b00000;--sb:#00707a;--hc:#9a5200;
  --r1:#1f8a1f;--r2:#006400;--r3:#00707a;--r4:#9a1f9a;--r5:#8a5000;
  --vip:#007a00;--vipp:#00707a;--ley:#8a5000;
}
/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-nav) + 12px);-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background-color:var(--fondo);background-image:var(--fondo-tex);background-size:auto,64px 64px;color:var(--texto);font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"calt" 0;overflow-x:clip;min-height:100vh}
*{font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"clig" 0,"calt" 0!important}
body,.mc,.banda,footer,.btn-mc,.icono-btn{image-rendering:pixelated}
img{max-width:100%;height:auto}
a{color:var(--acento)}
code{font-family:var(--pixel);background:var(--code-bg);color:var(--code-tx);padding:1px 6px;font-size:1.02em;white-space:nowrap}
h1,h2,h3,h4{overflow-wrap:break-word}
:focus-visible{outline:3px solid #ffd84a;outline-offset:3px}
.cont{max-width:1180px;margin:0 auto;padding:0 18px}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:#ffd84a;color:#2a1600;padding:10px 14px;font-weight:800;text-decoration:none}
.saltar:focus{top:10px}
.ico{width:32px;height:32px;flex:0 0 auto;image-rendering:pixelated;display:inline-block;vertical-align:middle}

/* ---------- paneles estilo interfaz de Minecraft ---------- */
.mc{background-color:var(--panel);background-image:var(--panel-tex);background-size:auto,64px 64px;border:3px solid var(--linea);box-shadow:inset 3px 3px 0 var(--luz),inset -3px -3px 0 var(--oscuro)}
.ranura{display:inline-grid;place-items:center;width:52px;height:52px;flex:0 0 52px;background:var(--ranura);box-shadow:inset 3px 3px 0 var(--ranura-osc),inset -3px -3px 0 var(--ranura-luz)}
.ranura .ico{width:32px;height:32px}
.info{background:rgba(16,0,16,.95);border:3px solid #0a000c;box-shadow:inset 0 0 0 3px #3b1488;color:#fff}
:root[data-theme="light"] .info{background:var(--panel);border-color:var(--linea);box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #555;color:var(--texto)}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:50;height:var(--alto-nav);border-bottom:3px solid transparent;transition:background-color .25s,border-color .25s}
.cab.solida,.cab.abierta{background:var(--nav-solida);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--linea)}
.cab .cont{display:flex;align-items:center;gap:12px;height:100%}
.cab .marca{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.cab .marca img{height:27px;width:auto;image-rendering:pixelated;display:block}
.cab .enlaces{flex:1;display:flex;justify-content:center;gap:2px}
.cab .enlaces a{display:flex;align-items:center;min-height:44px;padding:0 11px;color:var(--suave);text-decoration:none;font:600 18px/1 var(--pixel)}
.cab .enlaces a:hover,.cab .enlaces a[aria-current="page"]{color:var(--fuerte);background:var(--code-bg)}
.cab .acciones{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.btn-mc{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;color:#fff;text-decoration:none;font:600 18px/1 var(--pixel);text-shadow:2px 2px 0 #3a3a3a;background:#727272 url(/img/tex/piedra.png) 0 0/48px 48px;border:3px solid #000;box-shadow:inset 3px 3px 0 rgba(255,255,255,.35),inset -3px -3px 0 rgba(0,0,0,.4);cursor:pointer;white-space:nowrap}
.btn-mc:hover{box-shadow:inset 0 0 0 3px #fff;color:#ffffa0}
.btn-mc:active{box-shadow:inset 3px 3px 0 rgba(0,0,0,.45)}
.btn-mc[aria-disabled="true"]{opacity:.6;cursor:not-allowed;box-shadow:inset 3px 3px 0 rgba(255,255,255,.15),inset -3px -3px 0 rgba(0,0,0,.4);color:#ddd}
.btn-mc .ico{width:22px;height:22px}
.btn-mc.chico{min-height:42px;padding:0 12px;font-size:17px}
.icono-btn{display:inline-grid;place-items:center;width:44px;height:44px;flex:0 0 auto;padding:0;cursor:pointer;color:#fff;background:#727272 url(/img/tex/piedra.png) 0 0/48px 48px;border:3px solid #000;box-shadow:inset 3px 3px 0 rgba(255,255,255,.35),inset -3px -3px 0 rgba(0,0,0,.4)}
.icono-btn:hover{box-shadow:inset 0 0 0 3px #fff}
.icono-btn svg{width:20px;height:20px;filter:drop-shadow(2px 2px 0 #3a3a3a)}
.tema .luna{display:none}
:root[data-theme="light"] .tema .sol{display:none}
:root[data-theme="light"] .tema .luna{display:block}
.hamb{display:none}
.hamb span,.hamb span::before,.hamb span::after{display:block;width:20px;height:3px;background:currentColor;position:relative;transition:transform .2s,background-color .2s}
.hamb span::before,.hamb span::after{content:"";position:absolute;left:0}
.hamb span::before{top:-6px}.hamb span::after{top:6px}
.cab.abierta .hamb span{background:transparent}
.cab.abierta .hamb span::before{transform:translateY(6px) rotate(45deg)}
.cab.abierta .hamb span::after{transform:translateY(-6px) rotate(-45deg)}
.panel-menu{display:none}
.solo-ancho{display:inline}.solo-medio{display:none}
@media (max-width:1199px){.cab .enlaces .ini{display:none}.solo-ancho{display:none}.solo-medio{display:inline}.cab .enlaces a{padding:0 8px}}
@media (max-width:1023px){
  .cab .enlaces,.cab .acciones .escritorio{display:none}
  .cab .acciones{margin-left:auto}
  .hamb{display:inline-grid}
  .panel-menu{position:absolute;left:0;right:0;top:100%;background-color:var(--fondo);background-image:var(--fondo-tex);background-size:auto,64px 64px;border-bottom:3px solid var(--linea);padding:6px 18px 20px;max-height:calc(100vh - var(--alto-nav));overflow-y:auto;box-shadow:0 20px 40px var(--sombra)}
  .cab.abierta .panel-menu{display:block}
  .panel-menu ul{list-style:none;margin:0 0 16px;padding:0}
  .panel-menu li a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 6px;color:var(--texto);text-decoration:none;font:600 20px/1 var(--pixel);border-bottom:2px solid var(--borde)}
  .panel-menu li a .ico{width:24px;height:24px}
  .panel-menu .botones{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;max-width:420px}
  .panel-menu .botones>*{width:100%;justify-content:center}
  .panel-menu .botones .b3d{width:calc(100% - 6px)}
}
@media (max-width:380px){.cab .marca img{height:22px}.cab .cont{gap:8px}.cab .acciones{gap:8px}}

/* ---------- botón dorado animado "3D" (adaptado de 21st.dev a CSS puro; lo arma js/sitio.js) ---------- */
.b3d{--b3d-alto:50px;position:relative;display:inline-flex;align-items:stretch;border:0;padding:0;margin:3px 3px 9px;background:none;cursor:pointer;text-decoration:none;color:#3a2200;font:700 20px/1 var(--pixel);-webkit-tap-highlight-color:transparent;isolation:isolate;min-height:var(--b3d-alto);vertical-align:middle}
.b3d .bg{position:absolute;inset:0;background:linear-gradient(180deg,#ffe066,#ffc83a 50%,#f5a000);box-shadow:inset 3px 3px 0 rgba(255,255,255,.65),inset -3px -3px 0 rgba(160,80,0,.6),0 0 0 3px #000,0 6px 0 3px #000;transition:transform .12s,box-shadow .12s;z-index:-1}
.b3d:hover .bg{background:linear-gradient(180deg,#fff08a,#ffd84a 50%,#ffb21e)}
.b3d:active .bg{transform:translateY(4px);box-shadow:inset 3px 3px 0 rgba(255,255,255,.5),inset -3px -3px 0 rgba(160,80,0,.6),0 0 0 3px #000,0 2px 0 3px #000}
.b3d:active .wrap{transform:translateY(4px)}
.b3d .wrap{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 20px;min-height:var(--b3d-alto);width:100%;transition:transform .12s}
.b3d .path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.b3d .path path{stroke:#fff;stroke-dasharray:28 100;stroke-dashoffset:0;opacity:0}
.b3d .outline{position:absolute;inset:5px;border:2px solid rgba(255,255,255,0);transition:border-color .4s;pointer-events:none}
.b3d .content{position:relative;display:flex;align-items:center;gap:10px;white-space:nowrap}
.b3d .chars{display:grid}
.b3d .chars>.char{grid-area:1/1;display:flex;justify-content:center}
.b3d .char span{display:inline-block;white-space:pre}
.b3d .state-2 span{opacity:0}
.b3d .icon{position:relative;width:18px;height:18px;flex:0 0 18px}
.b3d .icon i{position:absolute;left:0;top:50%;width:15px;height:3px;margin-top:-1.5px;background:currentColor}
.b3d .icon i::before,.b3d .icon i::after{content:"";position:absolute;right:-1px;width:9px;height:3px;background:currentColor;transform-origin:right center}
.b3d .icon i::before{transform:rotate(45deg)}
.b3d .icon i::after{transform:rotate(-45deg)}
.b3d .splash{position:absolute;left:-44px;right:-44px;top:-48px;bottom:-48px;width:calc(100% + 88px);height:calc(100% + 96px);pointer-events:none;overflow:visible;z-index:-2}
.b3d .splash path{stroke:#ffc83a;stroke-width:3;stroke-dasharray:2 60;stroke-dashoffset:60;opacity:0}
:root[data-theme="light"] .b3d .splash path{stroke:#c77700}
.b3d-sm{--b3d-alto:40px;font-size:18px;margin:3px 3px 8px}
.b3d-sm .wrap{padding:0 14px}
.b3d-sm .bg{box-shadow:inset 3px 3px 0 rgba(255,255,255,.65),inset -3px -3px 0 rgba(160,80,0,.6),0 0 0 3px #000,0 4px 0 3px #000}
.b3d-sm .splash{left:-30px;right:-30px;top:-34px;bottom:-34px;width:calc(100% + 60px);height:calc(100% + 68px)}
.b3d.activo .state-1 span,.b3d:focus-visible .state-1 span{animation:charDisappear .45s cubic-bezier(.3,0,.6,1) forwards;animation-delay:calc(var(--i) * 28ms)}
.b3d.activo .state-2 span,.b3d:focus-visible .state-2 span{animation:charAppear .7s cubic-bezier(.2,.8,.2,1.2) forwards;animation-delay:calc(220ms + var(--i) * 32ms)}
.b3d.activo .icon i,.b3d:focus-visible .icon i{animation:arrow .9s cubic-bezier(.5,0,.3,1) both}
.b3d.activo .path path,.b3d:focus-visible .path path{animation:path 1.4s cubic-bezier(.4,0,.2,1) forwards}
.b3d.activo .outline,.b3d:focus-visible .outline{border-color:rgba(255,255,255,.7)}
.b3d.activo .splash path,.b3d:focus-visible .splash path{animation:splash .9s cubic-bezier(.3,.6,.4,1) forwards;animation-delay:calc(var(--i) * 18ms)}
@media (hover:hover){
  .b3d:hover .state-1 span{animation:charDisappear .45s cubic-bezier(.3,0,.6,1) forwards;animation-delay:calc(var(--i) * 28ms)}
  .b3d:hover .state-2 span{animation:charAppear .7s cubic-bezier(.2,.8,.2,1.2) forwards;animation-delay:calc(220ms + var(--i) * 32ms)}
  .b3d:hover .icon i{animation:arrow .9s cubic-bezier(.5,0,.3,1) both}
  .b3d:hover .path path{animation:path 1.4s cubic-bezier(.4,0,.2,1) forwards}
  .b3d:hover .outline{border-color:rgba(255,255,255,.7)}
  .b3d:hover .splash path{animation:splash .9s cubic-bezier(.3,.6,.4,1) forwards;animation-delay:calc(var(--i) * 18ms)}
}
@keyframes charDisappear{0%{transform:translateY(0);opacity:1;filter:blur(0)}100%{transform:translateY(-70%);opacity:0;filter:blur(3px)}}
@keyframes charAppear{0%{transform:translateY(50%);opacity:0;filter:blur(20px)}40%{transform:translateY(70%);opacity:.4}75%{transform:translateY(-15%);opacity:1;filter:blur(0)}100%{transform:translateY(0);opacity:1;filter:blur(0)}}
@keyframes arrow{0%{transform:translateX(0);opacity:1}35%{transform:translateX(46px);opacity:0}36%{transform:translateX(-40px);opacity:0}70%{transform:translateX(4px);opacity:1}100%{transform:translateX(0);opacity:1}}
@keyframes path{0%{stroke:#fff;stroke-dashoffset:0;opacity:1}70%{opacity:1}100%{stroke:#8a4a00;stroke-dashoffset:-128;opacity:0}}
@keyframes splash{0%{stroke-dasharray:2 60;stroke-dashoffset:60;opacity:1}60%{stroke-dasharray:22 60;stroke-dashoffset:10;opacity:1}100%{stroke-dasharray:2 60;stroke-dashoffset:-40;opacity:0}}

/* ---------- secciones y títulos ---------- */
section{padding:80px 0;position:relative}
.banda{background-image:var(--banda-tex);background-size:auto,64px 64px;border-top:3px solid var(--linea);border-bottom:3px solid var(--linea)}
.titulo{font:700 clamp(30px,4.2vw,48px)/1.1 var(--pixel);margin:0 0 12px;text-align:center;color:var(--fuerte);text-shadow:var(--titulo-sombra)}
.titulo span{color:var(--acento2)}
:root:not([data-theme="light"]) .titulo span{color:#ffaa00;text-shadow:3px 3px 0 #3f2a00}
.antetitulo{display:block;text-align:center;font:600 17px/1.2 var(--pixel);letter-spacing:2px;text-transform:uppercase;color:var(--suave);margin-bottom:6px}
.intro{color:var(--suave);text-align:center;max-width:700px;margin:0 auto 42px;font-size:18px}
.nota{max-width:760px;margin:26px auto 0;text-align:center;color:var(--suave)}
.sv{--c:var(--sv)}.fc{--c:var(--fc)}.sb{--c:var(--sb)}.hc{--c:var(--hc)}
.pronto{display:inline-flex;align-items:center;font:600 15px/1 var(--pixel);color:#2a1600;background:#ffd84a;border:2px solid #000;box-shadow:inset 2px 2px 0 #fff3b0,inset -2px -2px 0 #c98a00;padding:5px 9px;white-space:nowrap}
.tienda-abierta .pronto{display:none}

/* ---------- pie ---------- */
footer{position:relative;margin-top:30px;padding:34px 0 46px;color:#e2dccf;font-size:14px;text-align:center;background:linear-gradient(rgba(24,14,8,.74),rgba(24,14,8,.74)),url(/img/tex/tierra.png) 0 0/64px 64px;border-top:3px solid #000}
footer::before{content:"";position:absolute;left:0;right:0;top:-27px;height:24px;background:url(/img/tex/pasto.png) 0 0/64px 64px;image-rendering:pixelated;border-top:3px solid #000}
footer a{color:#fff}
footer .logo-pie{height:30px;width:auto;image-rendering:pixelated}
.pie-enlaces{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;list-style:none;padding:0;margin:14px 0 8px}
.pie-enlaces a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:none;font:600 19px/1 var(--pixel);text-shadow:2px 2px 0 #000}
.pie-enlaces a:hover{color:#ffff55}
.legal{max-width:780px;margin:14px auto 0;opacity:.8;font-size:13px}

/* ---------- aviso tipo "logro conseguido" ---------- */
.toast{position:fixed;right:16px;top:calc(var(--alto-nav) + 12px);display:flex;align-items:center;gap:12px;width:min(330px,calc(100vw - 32px));padding:10px 14px 10px 10px;background:#212121;border:3px solid #000;box-shadow:inset 3px 3px 0 #555,inset -3px -3px 0 #111,0 10px 30px rgba(0,0,0,.45);color:#fff;z-index:60;transform:translateX(calc(100% + 40px));transition:transform .35s cubic-bezier(.2,.9,.2,1.1);pointer-events:none}
.toast.ver{transform:none}
.toast .ranura{width:44px;height:44px;flex-basis:44px;box-shadow:inset 3px 3px 0 #0d0c12,inset -3px -3px 0 #4b4a58;background:#2b2a34}
.toast b{display:block;font:600 17px/1.2 var(--pixel);color:#ffff55}
.toast span{font:500 16px/1.3 var(--pixel);color:#fff}
@media (max-width:600px){.toast{top:auto;right:auto;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%,170px)}.toast.ver{transform:translate(-50%,0)}}

/* ---------- aparición al hacer scroll ---------- */
.js .revelar{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease}
.js .revelar.ok{opacity:1;transform:none}

@media (max-width:600px){
  section{padding:60px 0}
  .intro{font-size:16.5px;margin-bottom:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .revelar{opacity:1;transform:none}
  .b3d:is(:hover,:focus-visible,.activo) .state-1{visibility:hidden}
  .b3d:is(:hover,:focus-visible,.activo) .state-2 span{opacity:1}
}

/* Top de horas */
.top-horas{max-width:760px;margin:34px auto 0;padding:22px}
.top-horas h3{margin:0 0 4px;font-family:var(--pixel,inherit)}
.top-horas h3 small{display:block;font-size:.8rem;opacity:.7;font-weight:400}
.top-resumen{margin:0 0 14px;opacity:.85}
.top-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.top-lista li{display:grid;grid-template-columns:34px 32px 1fr auto;align-items:center;gap:10px;padding:8px 10px;background:rgba(0,0,0,.14)}
.top-lista .pos{font-weight:800;text-align:center}
.top-lista li:nth-child(1) .pos{color:#ffc83a}.top-lista li:nth-child(2) .pos{color:#cfd8dc}.top-lista li:nth-child(3) .pos{color:#d4884a}
.top-lista img{width:32px;height:32px;image-rendering:pixelated}
.top-lista .nom b{display:block}.top-lista .nom small{opacity:.75}
.top-lista .dat{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.top-pie{margin:12px 0 0;font-size:.85rem;opacity:.7}
@media (max-width:480px){.top-lista li{grid-template-columns:26px 28px 1fr;}.top-lista .dat{grid-column:3;text-align:left}}

.escalera .r6{background:linear-gradient(90deg,#8e2de2,#4a00e0);-webkit-background-clip:text;background-clip:text;color:transparent}
.escalera .r7{background:linear-gradient(90deg,#ff512f,#f09819);-webkit-background-clip:text;background-clip:text;color:transparent}