/* Stockdle (16-oct-2026). Paleta y tipografía de la portada v3 (src/home.html): near-black
   cálido, crema, burdeos, Frank Ruhl Libre + IBM Plex Sans + JetBrains Mono. Las reglas de
   marca/rediseno_slides/INVESTIGACION.md §3.10 valen aquí: sin degradados, sin píldoras de
   etiqueta, sin antetítulos en mayúscula espaciada, sin el punto medio como separador. */
:root{
  --burgundy:#910713; --cream:#f5e5ba;
  --bg:#0d0a0b; --bg-2:#120e0f; --surf:#171214; --elev:#221a1d; --elev-2:#2c2226;
  --fg-1:#f5ecd9; --fg-2:#b8a99a; --fg-3:#897a70;
  --rule:rgba(245,229,186,.12); --rule-2:rgba(245,229,186,.22); --rule-3:rgba(245,229,186,.34);
  --pos:#3aa771; --neg:#d63743;
  --ok:#3aa771; --casi:#c99a2e; --no:#3a2f33;
  --lv1:#e8c66a; --lv2:#5cbf8a; --lv3:#7f9ef5; --lv4:#b48cf4;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Frank Ruhl Libre',Georgia,serif;
  --mono:'JetBrains Mono',Menlo,Consolas,monospace;
  --e-o3:cubic-bezier(.16,1,.3,1);
}
body.hc{ --ok:#f5793a; --casi:#85c0f9 }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--fg-1); font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; -webkit-tap-highlight-color:transparent}
::selection{background:var(--burgundy);color:var(--cream)}
a{color:inherit}
button{font:inherit; color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding-inline:28px}
@media (max-width:640px){ .wrap{padding-inline:16px} }
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.vacio{color:var(--fg-2); padding:60px 0}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.hd{position:sticky; top:0; z-index:40; background:rgba(13,10,11,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule)}
.hd-in{display:flex; align-items:center; gap:24px; height:58px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{display:block}
.brand b{font-family:var(--serif); font-weight:600; font-size:18px}
.nav{display:flex; gap:2px; margin-left:auto}
.nav a{text-decoration:none; font-size:14px; color:var(--fg-2); padding:8px 11px}
.nav a:hover{color:var(--fg-1)}
.nav a.on{color:var(--fg-1); box-shadow:inset 0 -1.5px 0 var(--cream)}
@media (max-width:560px){ .nav a[href="/analisis/"], .nav a[href="/scan/#/glosario"]{display:none} .hd-in{gap:10px} }

footer{border-top:1px solid var(--rule); margin-top:80px; padding:30px 0 60px; color:var(--fg-3); font-size:13px}
footer p{max-width:64ch; margin:0}

/* ── Hub ──────────────────────────────────────────────────────────────── */
.hub{max-width:760px; margin:0 auto; padding-top:56px}
.hub h1{font-family:var(--serif); font-weight:700; font-size:clamp(46px,8vw,84px); letter-spacing:-.025em; line-height:.98; margin:0}
.hub h1 em{font-style:normal; color:var(--cream)}
.hub .lede{color:var(--fg-2); font-size:clamp(16px,1.7vw,18.5px); margin:18px 0 0; max-width:46ch}
.hub-meta{display:flex; flex-wrap:wrap; gap:6px 22px; margin:22px 0 0; font-size:13.5px; color:var(--fg-3)}
.hub-meta b{color:var(--fg-1); font-weight:600}
.games{list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--rule)}
.games li{border-bottom:1px solid var(--rule)}
.g{display:grid; grid-template-columns:76px minmax(0,1fr) auto; align-items:center; gap:22px; padding:22px 4px; text-decoration:none;
  transition:background .25s}
.g:hover{background:rgba(245,229,186,.025)}
.g:hover .g-go span{transform:translateX(3px)}
.g-n{font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:-.01em; display:block}
.g-d{display:block; color:var(--fg-2); font-size:14.5px; margin-top:2px}
.g-go{font-size:14px; font-weight:600; color:var(--cream); white-space:nowrap}
.g-go span{display:inline-block; transition:transform .3s var(--e-o3)}
.g-go.hecho{color:var(--fg-2); font-weight:500; font-family:var(--mono); font-size:13px}
.g-go.hecho i{font-style:normal; color:var(--pos)}
.g-go.hecho i.x{color:var(--neg)}
@media (max-width:560px){
  .g{grid-template-columns:56px minmax(0,1fr); gap:6px 16px; padding:18px 0}
  .g-go{grid-column:2}
  .g-n{font-size:21px}
}
/* miniaturas: cada juego dibujado en chico, sin íconos genéricos */
.mini{width:76px; height:56px; display:grid; place-items:center}
@media (max-width:560px){ .mini{width:56px; height:48px; transform:scale(.82); transform-origin:left center} }
.mini-tk{display:flex; gap:3px}
.mini-tk i{width:15px; height:15px; border-radius:2px; background:var(--no); display:grid; place-items:center;
  font:700 9px var(--mono); color:#fff; font-style:normal}
.mini-tk i.o{background:var(--ok)} .mini-tk i.c{background:var(--casi)}
.mini-gr{display:grid; grid-template-columns:repeat(4,11px); gap:2px}
.mini-gr i{height:11px; border-radius:2px; background:var(--elev-2)}
.mini-gr i.a{background:var(--lv1)} .mini-gr i.b{background:var(--lv3)}
.mini-sg{font:700 10px/1.3 var(--mono); color:var(--fg-2); text-align:left; white-space:nowrap}
.mini-sg b{color:var(--cream); font-size:14px}
.mini-im{display:grid; grid-template-columns:repeat(5,9px); gap:4px}
.mini-im i{width:9px; height:9px; border-radius:50%; background:var(--fg-3)}
.mini-im i.x{background:var(--neg)}
.mini-ms{display:flex; align-items:flex-end; gap:6px; height:38px}
.mini-ms i{width:16px; background:var(--elev-2); border-radius:2px 2px 0 0}
.mini-ms i.w{background:var(--cream)}

.next{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 20px; margin-top:28px;
  font-size:14px; color:var(--fg-3)}
.next b{font-family:var(--mono); color:var(--fg-1); font-weight:600; font-size:15px}
.next button{background:none; border:0; padding:0; color:var(--fg-2); text-decoration:underline; text-decoration-color:var(--rule-3);
  text-underline-offset:3px; cursor:pointer; font-size:14px}
.next button:hover{color:var(--cream)}

/* ── Cabecera de cada juego ───────────────────────────────────────────── */
.juego{max-width:560px; margin:0 auto; padding-top:22px}
.juego.ancho{max-width:720px}
.gh{display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--rule); margin-bottom:22px}
.gh .back{text-decoration:none; color:var(--fg-2); font-size:14px; padding:6px 0}
.gh .back:hover{color:var(--cream)}
.gh h1{font-family:var(--serif); font-weight:600; font-size:24px; margin:0 0 0 6px; letter-spacing:-.01em}
.gh .num{font-family:var(--mono); color:var(--fg-3); font-size:13px}
.gh .sp{margin-left:auto}
.ib{width:34px; height:34px; border-radius:50%; border:1px solid var(--rule-2); background:none; cursor:pointer;
  display:grid; place-items:center; color:var(--fg-2); transition:border-color .2s, color .2s}
.ib:hover{border-color:var(--cream); color:var(--cream)}
.ib svg{width:16px; height:16px}
.pide{color:var(--fg-2); font-size:14.5px; margin:0 0 18px}
.pide b{color:var(--fg-1); font-weight:600}

/* ── Botones ──────────────────────────────────────────────────────────── */
.bt{appearance:none; border:1px solid var(--rule-3); background:none; color:var(--fg-1); border-radius:8px; padding:11px 18px;
  font-size:14.5px; font-weight:600; cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .15s}
.bt:hover{border-color:var(--cream)}
.bt:active{transform:scale(.97)}
.bt.pri{background:var(--cream); color:var(--bg); border-color:var(--cream)}
.bt.pri:hover{background:#fff3d4}
.bt:disabled{opacity:.38; cursor:default; transform:none}
.bt:disabled:hover{border-color:var(--rule-3)}
.bt.pri:disabled:hover{background:var(--cream)}
.acc{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px}

/* ── Ticker (Wordle) ──────────────────────────────────────────────────── */
.tab{--n:4; display:grid; gap:6px; justify-content:center; margin:6px auto 0}
.fila{display:grid; grid-template-columns:repeat(var(--n), var(--tw)); gap:6px}
/* el lado de la ficha lo limita el ancho y también el alto: en un celular el tablero y el
   teclado tienen que verse juntos sin bajar */
.tab{--tw:min(62px, calc((100vw - 32px - (var(--n) - 1) * 6px) / var(--n)), max(40px, calc((100svh - 500px) / 6)))}
.ti{width:var(--tw); height:var(--tw); display:grid; place-items:center; border:2px solid var(--rule-2); border-radius:6px;
  font:800 calc(var(--tw) * .5)/1 var(--mono); text-transform:uppercase; color:var(--fg-1); background:transparent;
  transition:transform .12s}
.ti.lleno{border-color:var(--rule-3); animation:pop .12s}
@keyframes pop{50%{transform:scale(1.07)}}
.ti.o, .ti.c, .ti.x{border-color:transparent; color:#fff}
.ti.o{background:var(--ok)} .ti.c{background:var(--casi)} .ti.x{background:var(--no)}
.ti.flip{animation:flip .5s ease var(--d,0s) both}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.fila.mal{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.fila.gana .ti{animation:salta .5s ease var(--d,0s)}
@keyframes salta{40%{transform:translateY(-12px)}70%{transform:translateY(2px)}}

/* las pistas en una franja de tres columnas: el tablero y el teclado caben en una pantalla de celular */
.pistas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:18px 0 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.pista{padding:9px 10px 10px; font-size:13.5px; line-height:1.3; min-width:0}
.pista + .pista{border-left:1px solid var(--rule)}
.pista span{display:block; color:var(--fg-3); font-size:12px; margin-bottom:2px}
.pista b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:600}
.pista.cerr b{color:var(--fg-3); font-weight:400}
@media (max-width:640px){
  .juego{padding-top:12px}
  .gh{margin-bottom:14px; padding-bottom:10px}
  .pide{margin-bottom:12px}
  .pista{padding:8px 8px 9px; font-size:12.5px}
  .kb{margin-top:14px}
}
.pista.nueva b{animation:aparece .6s var(--e-o3)}
@keyframes aparece{from{opacity:0; transform:translateY(6px)}}

.kb{margin-top:20px; display:grid; gap:7px; user-select:none}
.kr{display:flex; gap:5px; justify-content:center}
.k{flex:1 1 0; max-width:44px; height:54px; border-radius:6px; border:0; background:#3d3237; color:var(--fg-1);
  font:700 14px var(--mono); cursor:pointer; display:grid; place-items:center; transition:background .25s; touch-action:manipulation}
.k.w{flex:1.55 1 0; max-width:68px; font:600 12px var(--sans)}
.k.o{background:var(--ok)} .k.c{background:var(--casi)} .k.x{background:#181214; color:#5c4f52}
.k:active{filter:brightness(1.25)}
@media (max-width:400px){ .kr{gap:4px} .k{height:52px; font-size:13px} }

/* ── Tarjeta de empresa (revelación) ──────────────────────────────────── */
.emp{display:flex; align-items:center; gap:14px; padding:18px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-top:22px}
.logo{width:46px; height:46px; border-radius:50%; background:var(--elev); flex:none; object-fit:cover}
.logo.ph{display:grid; place-items:center; font:700 13px var(--mono); color:var(--fg-2)}
.emp-id{min-width:0; flex:1}
.emp-id b{display:block; font-size:17px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.emp-id span{color:var(--fg-2); font-size:13.5px}
.emp a{font-size:13.5px; color:var(--cream); text-decoration:none; white-space:nowrap}
.emp a:hover{text-decoration:underline}
.fin{text-align:center; margin-top:26px}
.fin h2{font-family:var(--serif); font-weight:600; font-size:30px; margin:0; letter-spacing:-.01em}
.fin p{color:var(--fg-2); margin:6px 0 0; font-size:14.5px}

/* ── Grupos ───────────────────────────────────────────────────────────── */
.gr{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px}
.gt{appearance:none; border:0; border-radius:8px; background:var(--elev); min-height:76px; padding:8px 6px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
  transition:background .18s, transform .18s, color .18s; touch-action:manipulation}
.gt:hover{background:var(--elev-2)}
.gt b{font:800 clamp(14px,3.9vw,18px)/1 var(--mono); letter-spacing:-.01em}
.gt span{font-size:11.5px; color:var(--fg-2); line-height:1.2; max-width:100%; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical}
.gt.sel{background:var(--cream); color:var(--bg); transform:scale(.97)}
.gt.sel span{color:rgba(13,10,11,.7)}
.gt.sube{animation:sube .45s var(--e-o3) var(--d,0s)}
@keyframes sube{40%{transform:translateY(-8px)}}
.gr.mal .gt.sel{animation:shake .4s}
.grs{display:grid; gap:7px; margin-bottom:7px}
.gs{border-radius:8px; padding:12px 14px; color:var(--bg); text-align:center; animation:aparece .5s var(--e-o3)}
.gs b{display:block; font-size:14.5px; font-weight:700}
.gs span{display:block; font:600 13px/1.4 var(--mono); margin-top:3px}
.gs span em{font:500 11.5px var(--sans); font-style:normal; opacity:.75}
.gs.l1{background:var(--lv1)} .gs.l2{background:var(--lv2)} .gs.l3{background:var(--lv3)} .gs.l4{background:var(--lv4)}
.err{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; font-size:14px; color:var(--fg-2)}
.err i{width:11px; height:11px; border-radius:50%; background:var(--fg-2); transition:background .3s, transform .3s}
.err i.u{background:var(--elev-2); transform:scale(.8)}
@media (max-width:400px){ .gt{min-height:68px; padding:6px 3px} .gt span{font-size:10.5px} }

/* ── Siglas ───────────────────────────────────────────────────────────── */
.prog{display:flex; gap:4px; margin-bottom:22px}
.prog i{flex:1; height:4px; border-radius:2px; background:var(--elev-2)}
.prog i.o{background:var(--pos)} .prog i.x{background:var(--neg)} .prog i.a{background:var(--cream)}
.ronda{text-align:center; animation:aparece .45s var(--e-o3)}
.ronda .q{color:var(--fg-3); font-size:14px; margin:0 0 14px}
.ronda .logo{width:64px; height:64px; margin:0 auto 12px; display:block}
.ronda .logo.ph{display:grid}
.ronda .nm{font-family:var(--serif); font-size:clamp(26px,6vw,36px); font-weight:600; line-height:1.1; margin:0; letter-spacing:-.01em}
.ronda .sec{color:var(--fg-3); font-size:13.5px; margin-top:6px}
.ronda .big{font:800 clamp(44px,12vw,68px)/1 var(--mono); letter-spacing:-.02em; color:var(--cream); margin:4px 0 0}
.inp{display:flex; gap:8px; max-width:340px; margin:24px auto 0}
.inp input{flex:1; min-width:0; background:var(--surf); border:1px solid var(--rule-3); border-radius:8px; padding:12px 14px;
  font:700 20px var(--mono); color:var(--fg-1); text-transform:uppercase; letter-spacing:.04em; outline:none}
.inp input:focus{border-color:var(--cream); box-shadow:0 0 0 3px rgba(245,229,186,.13)}
.ops{display:grid; gap:8px; margin-top:24px}
.op{appearance:none; text-align:left; border:1px solid var(--rule-2); background:none; border-radius:8px; padding:14px 16px;
  font-size:15.5px; font-weight:500; cursor:pointer; transition:border-color .2s, background .2s}
.op:hover:not(:disabled){border-color:var(--cream)}
.op:disabled{cursor:default}
.op.o{border-color:var(--pos); background:rgba(58,167,113,.14)}
.op.x{border-color:var(--neg); background:rgba(214,55,67,.14)}
.veredicto{margin-top:18px; font-size:15px; min-height:24px}
.veredicto b{font-family:var(--mono)}
.veredicto .o{color:var(--pos)} .veredicto .x{color:var(--neg)}
.lista{list-style:none; padding:0; margin:22px 0 0; border-top:1px solid var(--rule)}
.lista li{display:grid; grid-template-columns:22px 64px minmax(0,1fr); gap:10px; align-items:center; padding:9px 2px; border-bottom:1px solid var(--rule); font-size:14px}
.lista li b{font-family:var(--mono)}
.lista li span{color:var(--fg-2); line-height:1.35}
.lista .o{color:var(--pos)} .lista .x{color:var(--neg)}

/* ── Impostor ─────────────────────────────────────────────────────────── */
.cat{font-family:var(--serif); font-weight:600; font-size:clamp(26px,5.6vw,36px); line-height:1.1; letter-spacing:-.01em; margin:0}
.im{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:20px}
@media (min-width:640px){ .im{grid-template-columns:repeat(5,minmax(0,1fr))} }
.it{appearance:none; border:1.5px solid var(--rule-2); background:var(--surf); border-radius:10px; padding:12px 10px; cursor:pointer;
  display:flex; align-items:center; gap:10px; text-align:left; transition:border-color .2s, background .2s, transform .15s; touch-action:manipulation}
@media (min-width:640px){ .it{flex-direction:column; text-align:center; padding:16px 8px} }
.it .logo{width:36px; height:36px}
.it b{display:block; font:800 15px var(--mono)}
.it span{display:block; font-size:12px; color:var(--fg-2); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.it > div{min-width:0}
.it em{display:block; font:600 11.5px var(--mono); font-style:normal; margin-top:4px; color:var(--fg-2)}
.it:hover:not(:disabled){border-color:var(--rule-3)}
.it.sel{border-color:var(--cream); background:rgba(245,229,186,.08)}
.it:disabled{cursor:default}
.it.ok-sel{border-color:var(--pos); background:rgba(58,167,113,.14)}
.it.imp-sel{border-color:var(--neg); background:rgba(214,55,67,.16)}
.it.ok-falta{border-color:var(--pos); border-style:dashed}
.it.imp{opacity:.5}

/* ── Más o menos ──────────────────────────────────────────────────────── */
.mm{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px}
.mc{appearance:none; border:1.5px solid var(--rule-2); background:var(--surf); border-radius:12px; padding:20px 12px 18px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; transition:border-color .2s, background .2s, transform .15s;
  touch-action:manipulation; min-width:0}
.mc:hover:not(:disabled){border-color:var(--cream); transform:translateY(-2px)}
.mc:disabled{cursor:default}
.mc .logo{width:52px; height:52px; margin-bottom:4px}
.mc b{font:800 20px var(--mono)}
.mc span{font-size:13px; color:var(--fg-2); line-height:1.25; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.mc .val{font:700 16px var(--mono); color:var(--fg-1); margin-top:8px; min-height:22px}
.mc.gana{border-color:var(--pos)}
.mc.gana .val{color:var(--pos)}
.mc.elegida.pierde{border-color:var(--neg)}
.mm-q{font-family:var(--serif); font-weight:600; font-size:clamp(22px,5vw,28px); text-align:center; margin:0 0 18px; line-height:1.15}

/* ── Diálogo y aviso ──────────────────────────────────────────────────── */
dialog{border:1px solid var(--rule-2); background:var(--bg-2); color:var(--fg-1); border-radius:14px; padding:26px 26px 22px;
  max-width:min(460px, calc(100vw - 24px)); width:100%; max-height:calc(100vh - 40px)}
dialog::backdrop{background:rgba(5,3,4,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
dialog h2{font-family:var(--serif); font-weight:600; font-size:24px; margin:0 0 12px}
dialog p, dialog li{color:var(--fg-2); font-size:14.5px}
dialog ul{padding-left:18px; margin:10px 0}
dialog .cerrar{position:absolute; top:14px; right:14px}
dialog .ej{display:flex; gap:5px; margin:12px 0 4px}
dialog .ej .ti{--tw:38px; font-size:18px}
.chk{display:flex; gap:10px; align-items:center; margin-top:16px; font-size:14px; color:var(--fg-2); cursor:pointer}
.st{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center; margin:8px 0 18px}
.st b{display:block; font:700 26px var(--mono)}
.st span{font-size:12px; color:var(--fg-3)}
.dist{display:grid; gap:4px}
.dist div{display:grid; grid-template-columns:22px 1fr; gap:8px; align-items:center; font:600 13px var(--mono)}
.dist i{display:block; height:20px; background:var(--elev-2); border-radius:3px; text-align:right; padding:0 7px; font-style:normal; font-size:12px; line-height:20px; min-width:24px}
.dist i.hoy{background:var(--pos); color:#fff}
#toast{position:fixed; left:50%; top:76px; transform:translate(-50%,-8px); background:var(--cream); color:var(--bg); font-weight:600;
  font-size:14px; padding:10px 16px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s, transform .25s var(--e-o3); z-index:90}
#toast.on{opacity:1; transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}