/* Dunquest · página de presentación. Mismos colores, letras y marcos de pixel art que el juego (css/dunquest.css) */
:root{
  --bg:#14101a;--panel:#2a2236;--inset:#1c1624;--negro:#0d0a11;
  --text:#f4ecda;--muted:#b9ad95;--oro:#e6c64a;
  --ui:'Rubik',system-ui,'Segoe UI',Arial,sans-serif;--title:'Pixelify Sans','Rubik',system-ui,sans-serif;
  --marco:url(../img/marco.svg);--marco-b:url(../img/marco-fino.svg);--marco-b-on:url(../img/marco-fino-on.svg);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 var(--ui);-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
.cont{width:min(1140px,100% - 32px);margin-inline:auto}

/* botones: el marco fino del juego, pintado 10 px hacia dentro */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 16px/1 var(--ui);color:var(--text);text-decoration:none;background:var(--panel);background-clip:padding-box;border:2px solid var(--negro);border-image:var(--marco-b) 5 / 10px stretch;box-shadow:inset 0 -3px 0 #0005;padding:16px 22px;cursor:pointer}
.btn:hover{border-image-source:var(--marco-b-on)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.play:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.btn.oro,.btn.on{background-color:#5a4420;color:#fff3c8;border-image-source:var(--marco-b-on)}
.btn.oro:hover{background-color:#6e5528}
.btn.mini{font-size:13px;padding:10px 12px;min-width:44px}
.px{display:inline-flex;width:20px;height:20px;flex:none}
.px svg{width:100%;height:100%}
.botones{display:flex;flex-wrap:wrap;gap:12px}

/* el marco grueso de las ventanas del juego */
.marco{border:16px solid transparent;border-image:var(--marco) 8 / 16px round;background:var(--panel);background-clip:padding-box;box-shadow:0 10px 24px #000b}

/* portada */
.portada{position:relative;isolation:isolate;border-bottom:4px solid var(--negro);padding-bottom:72px}
.portada::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/fondo.webp) center/cover no-repeat}
.portada::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 28% 34%,#2a1f3ac2 0%,#14101ae2 55%,#0b0810f7 100%)}
.barra{display:flex;justify-content:flex-end;padding:16px 0}
.idiomas{display:flex;gap:6px}
.portada-caja{display:grid;gap:40px;align-items:center;padding-top:24px}
.portada-texto{display:flex;flex-direction:column;align-items:center;text-align:center}
.pronto{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font:700 15px/1 var(--title);letter-spacing:3px;text-transform:uppercase;color:#ffe9a8;background:#120e18;border:2px solid var(--negro);box-shadow:inset 0 0 0 1px #3a3050;padding:8px 12px}
.pronto::before{content:"";width:8px;height:8px;background:var(--oro);animation:parpadeo 1.6s steps(1) infinite}
@keyframes parpadeo{50%{opacity:.25}}
.logo{margin:0;line-height:1}
.logo b{display:block;font:700 clamp(50px,13.5vw,100px)/1 var(--title);color:#f2c94c;letter-spacing:2px;text-shadow:4px 5px 0 #7c5a1a,-3px 0 0 #2a1c08,3px 0 0 #2a1c08,0 -3px 0 #2a1c08,0 3px 0 #2a1c08}
.logo span{display:inline-block;margin-top:14px;padding-top:10px;border-top:4px solid var(--text);font:700 clamp(14px,3.4vw,21px)/1 var(--title);letter-spacing:3px;color:var(--text)}
.lema{margin:26px 0 28px;max-width:34em;font-size:clamp(17px,2.2vw,19px);color:var(--text)}
.nota{margin:18px 0 0;font-size:14px;color:var(--muted)}
.portada-texto .botones{justify-content:center}

/* tráiler */
.video{position:relative;line-height:0;background:#000}
.video video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.play{position:absolute;inset:0;margin:auto;width:92px;height:76px;display:flex;align-items:center;justify-content:center;color:#fff3c8;background:#5a4420;background-clip:padding-box;border:2px solid var(--negro);border-image:var(--marco-b-on) 5 / 10px stretch;box-shadow:inset 0 -4px 0 #0006,0 6px 0 #0007;cursor:pointer}
.play:hover{background-color:#6e5528}
.play .px{width:30px;height:30px;margin-left:5px}

/* apartados */
.tramo{padding:76px 0}
.tramo.oscuro{background:#100c15;border-top:4px solid var(--negro)}
.tit{margin:0;font:700 clamp(28px,5.6vw,40px)/1.1 var(--title);color:var(--oro);text-align:center;text-shadow:3px 3px 0 var(--negro)}
.tit::after{content:"";display:block;width:84px;height:4px;margin:16px auto 0;background:var(--text)}

.cartas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;margin-top:44px}
.carta{display:flex;flex-direction:column;padding:12px 12px 16px;background:linear-gradient(180deg,#322944 0%,#261f33 100%);background-clip:padding-box;border:2px solid var(--negro);border-image:var(--marco-b) 5 / 10px stretch;box-shadow:0 6px 14px #0008}
.carta img{display:block;width:100%;height:auto;border:2px solid var(--negro)}
.carta h3{margin:16px 6px 6px;font:700 23px/1.15 var(--title);color:var(--oro)}
.carta p{margin:0 6px;font-size:15.5px;line-height:1.5;color:var(--muted)}

.comunidad{max-width:760px;margin-inline:auto;padding:30px 22px 32px;text-align:center}
.comunidad p{margin:22px auto 0;max-width:32em}
.comunidad .nota{margin-top:20px}
.redes{justify-content:center;margin-top:26px}

.pie{border-top:4px solid var(--negro);padding:26px 0 34px;font-size:14px;color:var(--muted)}
.pie .cont{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.pie a{color:var(--oro)}

/* en pantallas anchas la portada va en dos columnas: el texto a la izquierda y el tráiler a la derecha */
@media (min-width:1000px){
  .portada{padding-bottom:96px}
  .portada-caja{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;padding-top:48px}
  .portada-texto{align-items:flex-start;text-align:left}
  .portada-texto .botones{justify-content:flex-start}
  .logo b{font-size:clamp(64px,7.4vw,92px)}
}
@media (max-width:520px){
  .portada-texto .botones,.redes{flex-direction:column;align-self:stretch}
  .tramo{padding:56px 0}
  .comunidad{padding-inline:14px}
  .play{width:74px;height:62px}
  .play .px{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pronto::before{animation:none}
}