@font-face{font-family:Cinzel;src:url('assets/cinzel-09941fb1c1.woff2') format('woff2');font-weight:400 700;font-display:swap}@font-face{font-family:Cinzel;src:url('assets/cinzel-8fc2606f8a.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-02FF}@font-face{font-family:Inter;src:url('assets/inter-3100e775e8.woff2') format('woff2');font-weight:300 800;font-display:swap}
:root{color-scheme:dark;--gold:#cfb77d;--pale:#efdfb6;--line:#9c865240;--card-width:clamp(235px,22vw,322px);--card-height:clamp(405px,57vh,570px);--spread:clamp(195px,19.1vw,279px)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100svh;background:#0b1511;color:var(--pale);font-family:Inter,Arial,sans-serif;display:flex;flex-direction:column;overflow-x:hidden}.forest{position:fixed;inset:0;z-index:-3;background:#0b1511 url('assets/bosque.webp') center 42%/cover no-repeat}.atmosphere{position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 40%,#07100b10 5%,#06100b44 48%,#030a08cc 100%),linear-gradient(#06100a22,transparent 35%,#050c09bb)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}a{color:inherit}header{height:130px;flex-shrink:0;display:flex;justify-content:center;align-items:center;padding-top:13px}.logo{width:clamp(210px,20vw,290px);height:auto;display:block;filter:drop-shadow(0 3px 15px #000a)}header a{display:block}main{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;width:100%}.heading{display:flex;align-items:center;gap:24px;margin:8px 0 11px}h1{font-family:Cinzel,Georgia,serif;font-size:clamp(18px,1.55vw,24px);font-weight:400;letter-spacing:3px;margin:0;text-align:center;text-shadow:0 3px 15px #000}.rule{display:block;width:70px;height:1px;position:relative;background:linear-gradient(90deg,transparent,#aa915e7a)}.rule:last-child{transform:rotate(180deg)}.rule:after{content:'';width:4px;height:4px;position:absolute;right:0;top:-1.5px;border:1px solid #ac945c;transform:rotate(45deg);background:#263023}.filters{display:flex;align-items:center;gap:15px;color:#a4ad96;font-size:10px;letter-spacing:1.4px;margin-top:6px;z-index:10}.filters button{padding:10px 7px 12px;position:relative;transition:color .2s}.filters button[aria-pressed=true]{color:#e3cf9e}.filters button[aria-pressed=true]:after{content:'';position:absolute;bottom:5px;left:25%;right:25%;height:1px;background:linear-gradient(90deg,transparent,#ceb778,transparent)}.filters button:hover{color:#f1dfb3}.filters>span{color:#6b705c;font-size:14px}.carousel{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:calc(var(--card-height) + 100px);min-height:480px;flex:1;perspective:1600px;outline-offset:-7px;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:clip}.cards{position:absolute;inset:0;transform-style:preserve-3d;isolation:isolate}.character-card{position:absolute;top:50%;left:50%;width:var(--card-width);height:var(--card-height);padding:5px;border:1px solid #a08c58a6;border-radius:13px;background:linear-gradient(155deg,#9d8c5d,#17251c 8%,#0a130e 91%,#73613e);box-shadow:0 15px 45px #0008,inset 0 0 0 2px #0c160f;overflow:hidden;transform:translate(-50%,-50%) translateX(var(--x,0px)) translateZ(var(--z,0px)) rotateY(var(--rot,0deg)) scale(var(--scale,1));opacity:var(--opacity,1);filter:brightness(var(--brightness,1)) saturate(var(--saturation,.94));transition:transform .65s cubic-bezier(.22,.68,.12,1),opacity .45s,filter .55s,border-color .4s,box-shadow .4s;will-change:transform;backface-visibility:hidden;outline-offset:5px}.character-card[data-active=true]{border-color:#ead39b;box-shadow:0 0 0 1px #8d784d,0 0 30px #b9a06b18,0 20px 60px #000b,inset 0 0 0 2px #122015}.card-inner{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid #9b87534f;border-radius:8px;background:#0c170f;display:flex;flex-direction:column}.portrait{position:relative;flex:1;min-height:0;overflow:hidden}.portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 65%,#0b140d66 88%,#0b140df5),linear-gradient(90deg,#0002,transparent 15%,transparent 85%,#0002);pointer-events:none}.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%;pointer-events:none;-webkit-user-drag:none}.card-name{height:73px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:1px 10px 8px;background:linear-gradient(#0b140d,#101c13);position:relative}.card-name:before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#ad935b66,transparent)}.card-name span{font-family:Cinzel,Georgia,serif;font-size:clamp(20px,2vw,29px);font-weight:600;letter-spacing:1px;line-height:1.2;text-shadow:0 2px 6px #0009;color:#e4c98f;text-transform:uppercase}.card-name span.long{font-size:clamp(16px,1.5vw,23px);letter-spacing:.5px}.corner{position:absolute;width:20px;height:20px;z-index:2;pointer-events:none;color:#d9be83;opacity:.8}.corner:before,.corner:after{content:'';position:absolute;background:currentColor}.corner:before{width:15px;height:1px;top:5px;left:5px}.corner:after{height:15px;width:1px;top:5px;left:5px}.corner.top-left{top:7px;left:7px}.corner.top-right{right:7px;top:7px;transform:rotate(90deg)}.corner.bottom-right{bottom:7px;right:7px;transform:rotate(180deg)}.corner.bottom-left{left:7px;bottom:7px;transform:rotate(270deg)}.navigation{display:flex;align-items:center;gap:36px;z-index:10;flex-shrink:0;margin:0 0 17px}.arrow{height:43px;width:58px;border:1px solid #9b87534d;background:#0b170f66;border-radius:3px;display:grid;place-items:center;transition:background .2s,border-color .2s}.arrow:hover{background:#283327bb;border-color:#b69e64}.arrow svg{width:30px;height:20px;stroke:#d3bc86;stroke-width:1.2;fill:none}.position{display:flex;align-items:center;gap:14px;min-width:106px;justify-content:center;font-size:11px;letter-spacing:1px;font-variant-numeric:tabular-nums;color:#8c9582}#current{color:#e7d1a0}.divider{width:36px;height:1px;background:#9b875357;display:block}.hint{font-size:9px;letter-spacing:1.3px;color:#889581;margin:0;text-align:center;line-height:1.8}.hint>span[aria-hidden]{padding:0 10px;color:#a08c58}footer{display:flex;align-items:center;justify-content:center;gap:16px;padding:25px 0 20px;flex-shrink:0}.footer-line{height:1px;width:70px;background:linear-gradient(90deg,transparent,#9b87534d)}.footer-line:last-child{transform:rotate(180deg)}.seal{color:#b09863;font-size:18px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#loading{font-family:Cinzel,Georgia,serif;font-size:15px;color:#c6b17c}#loading[hidden]{display:none}button:focus-visible,a:focus-visible,.carousel:focus-visible{outline:2px solid #e7cd91;outline-offset:5px}.carousel:focus-visible{outline-offset:-8px}.character-card:focus-visible{border-color:#fff0c6}dialog{padding:0;border:1px solid #b49b62;border-radius:12px;background:#101b13;color:#e4c98f;max-height:92svh;width:min(430px,calc(100% - 40px));max-width:430px;box-shadow:0 30px 100px #000c;overflow:auto}dialog::backdrop{background:#030a07cf;backdrop-filter:blur(8px)}.close{position:absolute;top:12px;right:12px;width:34px;height:34px;background:#08110abf;border:1px solid #c8ae6a66;border-radius:50%;font-size:25px;z-index:2}.detail-art{height:min(64svh,600px);overflow:hidden}.detail-art img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;display:block}.detail-name{padding:20px 20px 25px;text-align:center;background:linear-gradient(#0c150e,#152117)}.detail-name h2{font-family:Cinzel,Georgia,serif;font-weight:500;text-transform:uppercase;margin:0 0 18px;font-size:27px}.detail-name a{font-size:11px;text-decoration:none;border-bottom:1px solid #a8905b80;padding-bottom:5px;color:#c2b18b}.detail-name a span{margin-left:16px}@media(min-height:1050px){:root{--card-height:650px;--card-width:350px;--spread:295px}.carousel{max-height:780px}.heading{margin-top:20px}.navigation{margin-top:7px}}@media(max-width:1150px){:root{--card-width:27vw;--card-height:46vw;--spread:22vw}.carousel{min-height:470px}.heading{margin-top:7px}.character-card{border-radius:11px}.card-name{height:65px}.card-name span{font-size:24px}header{height:115px}}@media(max-width:700px){:root{--card-width:47vw;--card-height:79vw;--spread:31vw}.carousel{height:calc(var(--card-height) + 80px);min-height:360px;flex:1;perspective:1000px}header{height:105px;padding-top:9px}.logo{width:220px;max-width:66vw}.heading{gap:13px;margin:6px 0 12px}.heading h1{font-size:17px;letter-spacing:1.5px}.rule{width:35px}.filters{font-size:9px;margin-top:0;gap:11px}.character-card{padding:3px;border-radius:9px}.card-inner{border-radius:5px}.card-name{height:52px;padding:0 6px 6px}.card-name span{font-size:19px;letter-spacing:.4px}.card-name span.long{font-size:13px}.corner{width:14px;height:14px}.corner:before{width:10px;top:3px;left:3px}.corner:after{height:10px;top:3px;left:3px}.corner.top-left{top:5px;left:5px}.corner.top-right{top:5px;right:5px}.corner.bottom-left{bottom:5px;left:5px}.corner.bottom-right{bottom:5px;right:5px}.navigation{gap:25px;margin:3px 0 16px}.arrow{width:54px;height:40px}.hint{font-size:8px}.keyboard-hint,.hint>span[aria-hidden]{display:none}footer{padding:18px 0}.forest{background-position:52% center}}@media(max-height:650px) and (min-width:700px){:root{--card-width:190px;--card-height:315px;--spread:180px}header{height:65px;padding-top:5px}.logo{width:190px}.heading{margin:0 0 2px}.heading h1{font-size:16px}.filters{font-size:9px}.filters button{padding:5px 7px 8px}.carousel{min-height:340px}.card-name{height:47px}.card-name span{font-size:20px}.card-name span.long{font-size:15px}.navigation{margin:2px 0 9px;gap:24px}.arrow{height:33px;width:48px}.hint{font-size:8px}footer{padding:7px 0 10px}}@media(prefers-reduced-motion:reduce){.character-card{transition:none}.arrow,.filters button{transition:none}}

/* Controles de selección: bronce, relieve y flechas heráldicas. */
.filters{gap:16px;margin:14px 12px 8px;font-family:Cinzel,Georgia,serif;font-size:17px;letter-spacing:1px}.filters>span{display:none}.filters button{min-width:130px;min-height:50px;padding:12px 22px;border:1px solid #967847;border-radius:5px;background:linear-gradient(160deg,#334132ee,#101c15ee 55%,#263025ee);box-shadow:inset 0 0 0 3px #0a140e,inset 0 0 0 4px #9c80513d,0 4px 12px #0008;color:#ccbd96;text-shadow:0 2px 3px #000}.filters button[aria-pressed=true]{color:#ffedbd;border-color:#e2bf76;background:linear-gradient(160deg,#655234ee,#283422ee 60%,#152318ee);box-shadow:inset 0 0 0 3px #152116,inset 0 0 0 4px #cba86680,0 0 18px #d3af4920}.filters button[aria-pressed=true]:after{bottom:7px;left:30%;right:30%}.filters button:hover{border-color:#f1ce86;background-color:#465139}.navigation{gap:48px;margin:6px 0 18px}.arrow{position:relative;width:96px;height:58px;border:2px solid #aa8b51;border-radius:9px 3px;background:linear-gradient(135deg,#6b5737,#263026 35%,#101b13 65%,#51432b);box-shadow:inset 0 0 0 3px #101b13,inset 0 0 0 4px #b49b5d66,0 5px 15px #0009}.arrow:before,.arrow:after{content:"◆";position:absolute;font-size:9px;color:#d5b372;left:5px;top:4px}.arrow:after{left:auto;top:auto;right:5px;bottom:4px}.arrow svg{width:64px;height:36px;fill:none;stroke-width:1}.arrow-metal{fill:#c4a264;stroke:#f0d89e;filter:drop-shadow(0 2px 1px #000)}.arrow-etch{stroke:#6d512d;fill:none}.arrow-gem{fill:#355d42;stroke:#e4c17c}.arrow#next svg{transform:scaleX(-1)}.arrow:hover{border-color:#f5d18b;background:linear-gradient(135deg,#8c7045,#3a4936 45%,#18291b);box-shadow:inset 0 0 0 3px #152015,inset 0 0 0 4px #d4b77988,0 0 20px #b994482b}.arrow:active{transform:translateY(2px)}@media(max-width:700px){.filters{gap:9px;font-size:13px;margin-top:8px}.filters button{min-width:0;min-height:48px;padding:12px 16px}.navigation{gap:38px}.arrow{width:86px;height:54px}}@media(max-height:650px) and (min-width:700px){.filters{font-size:13px;margin:4px 0}.filters button{min-height:40px;padding:8px 18px}.arrow{width:82px;height:46px}.navigation{margin-bottom:9px}}

.character-card{text-decoration:none;text-align:center}