:root{
  --bg:#0b0d1c; --bg2:#10132a;
  --panel:#161a36; --panel2:#1c2145; --linea:#2c325f;
  --tinta:#eef0ff; --tinta2:#9aa3cf;
  --oro:#ffc233; --oro-osc:#9c7310;
  --cian:#3de8c8; --magenta:#ff5c8a;
  --verde:#71e871; --rojo:#ff5757;
  --pixel:'Press Start 2P',monospace;
  --cuerpo:'Space Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--cuerpo); color:var(--tinta); min-height:100vh; overflow-x:hidden;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(61,232,200,.07), transparent 60%),
    radial-gradient(800px 520px at 0% 110%, rgba(255,194,51,.06), transparent 60%),
    linear-gradient(var(--bg2), var(--bg));
  background-attachment:fixed;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(120,130,200,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,130,200,.05) 1px, transparent 1px);
  background-size:34px 34px;
}
.scanlines{position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  animation:parpadeo 6s infinite;}
@keyframes parpadeo{0%,100%{opacity:.9}50%{opacity:.55}}
.particula{position:fixed; bottom:-40px; z-index:1; pointer-events:none;
  font-family:var(--mono); animation:flota linear infinite;}
@keyframes flota{to{transform:translateY(-115vh) rotate(20deg)}}

.ticker{position:relative; z-index:5; background:#080a15; border-bottom:1px solid var(--linea);
  overflow:hidden; white-space:nowrap; padding:7px 0;}
.ticker-track{display:inline-block; font-family:var(--pixel); font-size:8px; letter-spacing:1px;
  color:var(--oro); animation:desliza 45s linear infinite;}
.ticker-track b{color:var(--cian); font-weight:400}
@keyframes desliza{to{transform:translateX(-50%)}}

.top{position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:18px clamp(16px,4vw,48px);}
.logo{font-family:var(--pixel); font-size:13px; color:var(--oro); text-decoration:none;
  display:flex; align-items:center; gap:12px; text-shadow:3px 3px 0 rgba(0,0,0,.55);}
.logo-b{color:var(--cian)}
.dpad{position:relative; width:20px; height:20px; flex:none}
.dpad::before,.dpad::after{content:""; position:absolute; background:var(--magenta);
  box-shadow:0 0 10px rgba(255,92,138,.5)}
.dpad::before{left:7px; top:0; width:6px; height:20px}
.dpad::after{left:0; top:7px; width:20px; height:6px}
.top-dcha{display:flex; align-items:center}
.chip-beta{font-family:var(--pixel); font-size:7px; color:var(--bg); background:var(--magenta);
  padding:5px 8px; border-radius:3px; letter-spacing:1px}
.contador{font-family:var(--mono); font-size:12px; color:var(--tinta2); margin-left:12px}
.contador b{color:var(--oro)}

.contenedor{position:relative; z-index:2; max-width:1120px; margin:0 auto;
  padding:0 clamp(16px,4vw,32px) 80px}
.hero{max-width:780px; margin:clamp(40px,9vh,110px) auto 0; text-align:center}
.prompt-line{font-family:var(--mono); font-size:14px; color:var(--tinta2); margin-bottom:22px}
.simbolo{color:var(--cian); margin-right:6px}
.caret{color:var(--oro); animation:parpadea 1s steps(1) infinite}
@keyframes parpadea{50%{opacity:0}}

.caja{display:flex; align-items:center; gap:10px; background:var(--panel);
  border:2px solid var(--linea); border-radius:10px; padding:10px 10px 10px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  transition:border-color .25s, box-shadow .25s, transform .25s;}
.caja:focus-within{border-color:var(--oro); transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(255,194,51,.13), 0 12px 44px rgba(0,0,0,.5)}
.lupa{color:var(--tinta2); flex:none}
#q{flex:1; min-width:0; background:none; border:0; outline:0; color:var(--tinta);
  font:500 18px var(--cuerpo);}
#q::placeholder{color:#5b6390}
.btn-buscar{font-family:var(--pixel); font-size:10px; letter-spacing:1px; cursor:pointer;
  background:var(--oro); color:#221600; border:0; border-radius:6px; padding:16px 22px;
  box-shadow:0 5px 0 var(--oro-osc); transition:transform .08s, box-shadow .08s, filter .2s;}
.btn-buscar:hover{filter:brightness(1.08)}
.btn-buscar:active{transform:translateY(4px); box-shadow:0 1px 0 var(--oro-osc)}

.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px}
.chip{font-family:var(--mono); font-size:13px; color:var(--tinta2);
  background:rgba(255,255,255,.03); border:1px solid var(--linea); border-radius:999px;
  padding:8px 16px; cursor:pointer; transition:.2s;}
.chip:hover{color:var(--oro); border-color:var(--oro); background:rgba(255,194,51,.08);
  transform:translateY(-2px)}
.etiqueta{font-family:var(--pixel); font-size:8px; color:var(--tinta2); letter-spacing:1px;
  margin:34px 0 4px; text-align:center}

.pipeline{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  margin-top:38px; font-family:var(--mono); font-size:11px; color:var(--tinta2); letter-spacing:.5px}
.pipeline i{font-style:normal; font-family:var(--pixel); font-size:8px; margin-right:6px}
.pipeline span:nth-child(1) i{color:var(--oro)}
.pipeline span:nth-child(3) i{color:var(--cian)}
.pipeline span:nth-child(5) i{color:var(--magenta)}
.pipeline span:nth-child(7) i{color:var(--verde)}
.pipeline em{color:#454c7e; font-style:normal}

/* ── info de fuentes preferidas ── */
.preferidos-info{margin-top:22px; font-family:var(--mono); font-size:12px; color:var(--tinta2);
  padding:10px 16px; border:1px dashed var(--linea); border-radius:8px;
  background:rgba(255,194,51,.04);}
.preferidos-info b{color:var(--oro)}

/* ── resultados ── */
.barra-resultados{display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin:34px 0 22px; flex-wrap:wrap}
.btn-volver{font-family:var(--pixel); font-size:8px; letter-spacing:1px; color:var(--cian);
  background:none; border:1px solid var(--linea); border-radius:6px; padding:12px 16px;
  cursor:pointer; transition:.2s}
.btn-volver:hover{border-color:var(--cian); box-shadow:0 0 14px rgba(61,232,200,.2);
  transform:translateX(-3px)}
.meta-busqueda{font-family:var(--mono); font-size:12px; color:var(--tinta2)}
.meta-busqueda b{color:var(--oro)}

@keyframes entra{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.terminal{background:#070912; border:1px solid var(--linea); border-radius:10px;
  font-family:var(--mono); overflow:hidden; animation:entra .4s ease;}
.t-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; background:#0d1020;
  border-bottom:1px solid var(--linea); font-size:12px; color:var(--cian); letter-spacing:1px}
.t-luz{width:9px; height:9px; border-radius:50%; background:var(--rojo);
  box-shadow:0 0 8px var(--rojo); animation:parpadea .9s steps(1) infinite}
.t-lineas{padding:14px 18px 6px; font-size:13px; min-height:110px}
.t-lineas p{color:#8f97c4; margin:4px 0; animation:entra .3s ease}
.t-lineas p::before{content:"» "; color:var(--oro)}
.t-progress{margin:8px 18px 18px; height:8px; background:#141833; border-radius:4px; overflow:hidden}
.t-progress i{display:block; height:100%; width:5%; border-radius:4px; transition:width .5s ease;
  background:repeating-linear-gradient(90deg, var(--oro) 0 8px, #b8860b 8px 16px);}

.resumen{background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--linea); border-left:4px solid var(--oro); border-radius:10px;
  padding:20px 22px; margin-bottom:26px; animation:entra .5s ease;}
.etiqueta-ia{font-family:var(--pixel); font-size:8px; color:var(--cian); letter-spacing:1px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.resumen p+p{margin-top:12px; font-size:16px; line-height:1.65; color:var(--tinta)}
.tag-groq{font-family:var(--mono); font-size:10px; color:var(--tinta2);
  border:1px solid var(--linea); border-radius:4px; padding:3px 7px}

.grid-resultados{display:grid; grid-template-columns:1fr 290px; gap:26px; align-items:start}
.lista{display:grid; gap:18px}

.card{position:relative; background:var(--panel); border:2px solid var(--linea); border-radius:10px;
  padding:20px; opacity:0; animation:entra .5s ease forwards;
  transition:border-color .25s, transform .25s, box-shadow .25s;}
.card:hover{border-color:var(--cian); transform:translate(-3px,-3px);
  box-shadow:7px 7px 0 rgba(61,232,200,.15)}

/* ── tarjeta recomendada ── */
.card.recomendada{border-color:var(--oro);
  box-shadow:0 0 0 1px rgba(255,194,51,.2), 0 10px 30px rgba(255,194,51,.08);}
.card.recomendada:hover{border-color:var(--oro);
  box-shadow:7px 7px 0 rgba(255,194,51,.2);}
.badge-recomendado{margin:8px 0 14px; padding:9px 14px; border-radius:6px;
  font-family:var(--pixel); font-size:8px; letter-spacing:1.2px;
  color:#221600;
  background:linear-gradient(90deg, var(--oro), #ffd55c);
  box-shadow:0 4px 0 var(--oro-osc);
  display:flex; align-items:center; gap:8px;}

.card-top{display:flex; justify-content:space-between; gap:14px; align-items:flex-start}
.card h3{font-size:19px; font-weight:700; line-height:1.3}

.leds{display:flex; gap:5px; align-items:center; flex:none; padding-top:4px}
.led{width:9px; height:9px; border-radius:50%; background:#2a2f55}
.led.on-verde{background:var(--verde); box-shadow:0 0 8px var(--verde)}
.led.on-oro{background:var(--oro); box-shadow:0 0 8px var(--oro)}
.led.on-rojo{background:var(--rojo); box-shadow:0 0 8px var(--rojo)}
.fiab{font-family:var(--mono); font-size:10px; color:var(--tinta2); margin-left:4px;
  text-transform:uppercase; letter-spacing:1px}

.codigo{display:flex; align-items:center; gap:12px; margin:14px 0 12px; background:#070912;
  border:1px dashed rgba(255,194,51,.45); border-radius:8px; padding:13px 16px;}
.codigo code{flex:1; font-family:var(--mono); font-size:16px; font-weight:700; color:var(--oro);
  letter-spacing:.5px; word-break:break-all}
.btn-copiar{font-family:var(--pixel); font-size:8px; letter-spacing:1px; flex:none; cursor:pointer;
  color:var(--oro); background:none; border:2px solid var(--oro); border-radius:6px;
  padding:9px 12px; transition:.15s}
.btn-copiar:hover{background:var(--oro); color:#221600}
.btn-copiar.ok{border-color:var(--verde); color:var(--verde); background:none}
.card.copiada{animation:flash .6s ease}
@keyframes flash{0%{box-shadow:0 0 0 3px rgba(113,232,113,.6)}100%{box-shadow:none}}

.guia{margin:14px 0 6px; display:grid; gap:10px; list-style:none; counter-reset:paso}
.guia li{counter-increment:paso; position:relative; padding:11px 14px 11px 50px;
  background:#0a0d1c; border:1px solid var(--linea); border-radius:8px;
  font-size:14.5px; line-height:1.55; color:var(--tinta2);
  transition:border-color .2s, transform .2s;}
.guia li:hover{border-color:var(--cian); transform:translateX(3px)}
.guia li::before{content:counter(paso,decimal-leading-zero); position:absolute; left:14px; top:12px;
  font-family:var(--pixel); font-size:9px; color:var(--cian);}

.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.tag{font-family:var(--mono); font-size:11px; padding:4px 10px; border-radius:4px;
  border:1px solid; letter-spacing:.5px}
.tag-tipo{font-family:var(--pixel); font-size:7px; letter-spacing:1px; padding:6px 9px;
  border-radius:4px; border:none}
.tipo-codigo{color:#221600; background:var(--oro)}
.tipo-guia{color:#062a24; background:var(--cian)}
.tipo-info{color:#2a0a14; background:var(--magenta)}
.tag-juego{color:var(--magenta); border-color:rgba(255,92,138,.5); background:rgba(255,92,138,.08)}
.tag-plat{color:var(--cian); border-color:rgba(61,232,200,.4); background:rgba(61,232,200,.06)}
.como{margin-top:12px; font-size:14.5px; line-height:1.6; color:var(--tinta2)}
.como b{color:var(--tinta)}
.notas{margin-top:12px; font-size:13px; line-height:1.55; color:var(--oro);
  background:rgba(255,194,51,.07); border-left:3px solid var(--oro);
  padding:9px 12px; border-radius:0 6px 6px 0}
.card-pie{display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:16px; padding-top:12px; border-top:1px solid var(--linea)}
.verif{font-family:var(--mono); font-size:11px; color:var(--tinta2)}
.fuente-link{font-family:var(--mono); font-size:12.5px; color:var(--cian); text-decoration:none}
.fuente-link::after{content:" ↗"; display:inline-block; transition:.15s}
.fuente-link:hover{text-decoration:underline; text-underline-offset:3px}
.fuente-link:hover::after{transform:translate(2px,-2px)}

.fuentes{position:sticky; top:20px; background:var(--panel); border:1px solid var(--linea);
  border-radius:10px; padding:18px}
.fuentes h4{font-family:var(--pixel); font-size:9px; color:var(--oro); letter-spacing:1px;
  margin-bottom:14px}
.fuentes ol{list-style:none; display:grid; gap:12px; counter-reset:f}
.fuentes li{counter-increment:f; font-size:13px; line-height:1.45}
.fuentes li a{color:var(--tinta); text-decoration:none; display:block}
.fuentes li a::before{content:"[" counter(f,decimal-leading-zero) "] ";
  color:var(--cian); font-family:var(--mono)}
.fuentes li a:hover{color:var(--cian)}
.fuentes li small{color:var(--tinta2); font-family:var(--mono); font-size:11px;
  display:block; margin-top:2px; word-break:break-all}
.fuente-recomendada{display:inline-block; font-family:var(--pixel); font-size:7px;
  letter-spacing:1px; color:#221600; background:var(--oro);
  padding:3px 7px; border-radius:3px; margin-bottom:5px;}

.panel-fuera,.panel-error{border:2px solid; border-radius:10px; padding:34px 26px;
  text-align:center; animation:entra .4s ease}
.panel-fuera{border-color:var(--magenta); background:rgba(255,92,138,.06)}
.panel-error{border-color:var(--rojo); background:rgba(255,87,87,.06)}
.panel-fuera .pixel{color:var(--magenta)}
.panel-error .pixel{color:var(--rojo); font-size:18px; text-shadow:3px 3px 0 rgba(0,0,0,.5)}
.panel-fuera p+p,.panel-error p+p{margin-top:14px; color:var(--tinta2); line-height:1.6;
  max-width:540px; margin-inline:auto}
.pixel{font-family:var(--pixel); font-size:11px; letter-spacing:1px}

.pie{position:relative; z-index:2; text-align:center; padding:30px 20px 40px; color:#6b729e;
  font-family:var(--mono); font-size:12px; border-top:1px solid var(--linea); margin-top:20px}
.pixel-mini{font-family:var(--pixel); font-size:8px; color:var(--oro)}
.atajo{margin-top:8px}
kbd{background:var(--panel2); border:1px solid var(--linea); border-radius:4px;
  padding:2px 7px; color:var(--cian)}

@media (max-width:920px){.grid-resultados{grid-template-columns:1fr}.fuentes{position:static}}
@media (max-width:560px){
  #q{font-size:16px}
  .btn-buscar{padding:14px 16px}
  .pipeline em{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .card{opacity:1}
}

/* ── SEO: H1 y bloque de keywords ── */
.h1-seo{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.seo-subtitulo{
  max-width:640px; margin:0 auto 28px; font-size:17px; line-height:1.6;
  color:var(--tinta2);
}
.seo-subtitulo strong{color:var(--oro)}

.seo-bloque{
  margin-top:48px; padding:28px 26px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--linea); border-radius:12px;
  text-align:left; max-width:720px; margin-inline:auto;
}
.seo-bloque h2{
  font-size:18px; font-weight:700; color:var(--tinta);
  margin-bottom:14px; line-height:1.4;
}
.seo-kw{color:var(--oro)}
.seo-bloque p{
  font-size:14.5px; line-height:1.65; color:var(--tinta2);
  margin-bottom:12px;
}
.seo-bloque p strong{color:var(--tinta)}
.seo-lista{
  list-style:none; display:grid; gap:8px; margin-top:14px;
  font-size:14px; color:var(--tinta2);
}
.seo-lista li strong{color:var(--oro)}