:root{
  --bg:#03070d;
  --white:#f4f7fb;
  --yellow:#ffbd00;
  --yellow2:#ffcf36;
  --blue2:#008cff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#03060d 0%,#06111f 55%,#03060d 100%);
  background-attachment:fixed;
  min-height:100vh;
  color:var(--white);
  font-family:'Bebas Neue', 'Arial Narrow', Impact, Arial, Helvetica, sans-serif;
  letter-spacing:1px;
  overflow-x:hidden;
}

/* ===== FONDO GALAXIA: estrellas estáticas (muy ligeras) ===== */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(1.8px 1.8px at 22px 32px,   rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1.2px 1.2px at 96px 18px,   rgba(255,255,255,.60), transparent 55%),
    radial-gradient(2.2px 2.2px at 150px 140px, rgba(180,220,255,.80), transparent 55%),
    radial-gradient(1px   1px   at 44px 110px,  rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1.5px 1.5px at 190px 64px,  rgba(255,255,255,.90), transparent 55%),
    radial-gradient(1px   1px   at 250px 160px, rgba(255,255,255,.40), transparent 55%),
    radial-gradient(1.5px 1.5px at 30px 220px,  rgba(255,220,150,.70), transparent 55%),
    radial-gradient(1px   1px   at 300px 250px, rgba(255,255,255,.50), transparent 55%),
    radial-gradient(1.3px 1.3px at 120px 40px,  rgba(255,255,255,.70), transparent 55%),
    radial-gradient(1px   1px   at 210px 130px, rgba(150,200,255,.50), transparent 55%),
    radial-gradient(1.6px 1.6px at 60px 180px,  rgba(255,255,255,.80), transparent 55%),
    radial-gradient(1px   1px   at 170px 90px,  rgba(255,255,255,.50), transparent 55%),
    radial-gradient(1.2px 1.2px at 280px 60px,  rgba(255,255,255,.60), transparent 55%),
    radial-gradient(1.9px 1.9px at 100px 240px, rgba(255,200,120,.55), transparent 55%),
    radial-gradient(1px   1px   at 230px 200px, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1.1px 1.1px at 320px 120px, rgba(220,240,255,.75), transparent 55%),
    radial-gradient(1.4px 1.4px at 60px 280px,  rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px   1px   at 140px 330px, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1.7px 1.7px at 260px 30px,  rgba(180,220,255,.75), transparent 55%),
    radial-gradient(1px   1px   at 320px 210px, rgba(255,255,255,.50), transparent 55%),
    radial-gradient(1.3px 1.3px at 40px 150px,  rgba(255,220,150,.60), transparent 55%),
    radial-gradient(1px   1px   at 200px 290px, rgba(255,255,255,.40), transparent 55%),
    radial-gradient(1.5px 1.5px at 110px 70px,  rgba(255,255,255,.80), transparent 55%),
    radial-gradient(1px   1px   at 290px 130px, rgba(200,230,255,.55), transparent 55%);
  background-size:340px 320px, 280px 300px, 300px 260px, 220px 240px,
                  360px 280px, 260px 220px, 320px 360px, 380px 300px,
                  250px 200px, 300px 340px, 350px 250px, 240px 320px,
                  310px 270px, 270px 300px, 380px 260px, 220px 280px,
                  260px 300px, 320px 240px, 340px 300px, 360px 320px,
                  280px 260px, 380px 340px, 300px 280px, 340px 360px;
}

a{color:inherit;text-decoration:none}

/* ===== FONDO: símbolos PlayStation flotando ===== */
.ps-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.ps-bg-inner{position:absolute;inset:0}
.ps-glyph{
  position:absolute;
  bottom:-14vh;
  left:var(--lx);
  width:var(--sz);
  height:var(--sz);
  opacity:var(--op);
  color:var(--col);
  filter:drop-shadow(0 0 8px var(--col));
  transform-style:preserve-3d;
  animation:psFloat var(--dur) linear var(--del) infinite;
}
.ps-glyph svg{width:100%;height:100%;display:block}
@keyframes psFloat{
  0%  {transform:translate3d(0,0,0) rotate(0) rotateX(var(--tilt,0deg))}
  50% {transform:translate3d(var(--sx),-55vh,0) rotate(var(--rot)) rotateX(calc(var(--tilt,0deg) * -1))}
  100%{transform:translate3d(calc(var(--sx)*-1),-122vh,0) rotate(calc(var(--rot)*-1)) rotateX(var(--tilt,0deg))}
}

/* ===== FONDO GAMER: capas de efecto ===== */

/* Aurora azul/violeta en movimiento, estilo interfaz PS4 */
.ps-aurora{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(45% 34% at 20% 24%, rgba(0,140,255,.22), transparent 70%),
    radial-gradient(40% 30% at 79% 20%, rgba(126,64,255,.17), transparent 70%),
    radial-gradient(52% 38% at 56% 90%, rgba(0,200,255,.15), transparent 72%),
    radial-gradient(34% 26% at 8% 70%,  rgba(255,189,0,.10), transparent 72%);
  filter:blur(28px);
  animation:psAurora 36s ease-in-out infinite alternate;
}
@keyframes psAurora{
  0%  {transform:translate3d(-3%,-2%,0) scale(1)}
  50% {transform:translate3d(3%,2%,0) scale(1.09)}
  100%{transform:translate3d(-2%,3%,0) scale(1.03)}
}

/* Suelo con rejilla en perspectiva (efecto rejilla gamer) */
.ps-floor{
  position:absolute;
  left:-30%;
  right:-30%;
  bottom:-4%;
  height:40%;
  background:
    repeating-linear-gradient(90deg, rgba(0,140,255,.20) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg,  rgba(0,140,255,.15) 0 1px, transparent 1px 44px);
  transform:perspective(430px) rotateX(75deg);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(0deg,#000 4%,transparent 76%);
  mask-image:linear-gradient(0deg,#000 4%,transparent 76%);
  opacity:.5;
  animation:psFloor 9s linear infinite;
}
@keyframes psFloor{
  from{background-position:0 0, 0 0}
  to  {background-position:0 0, 0 44px}
}

/* Motas de luz ascendentes (scroll del patrón) */
.ps-motes{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 22px 60px,   rgba(120,210,255,.80), transparent 60%),
    radial-gradient(1.2px 1.2px at 92px 180px,  rgba(255,255,255,.70), transparent 60%),
    radial-gradient(2px   2px   at 162px 40px,   rgba(0,180,255,.75),   transparent 60%),
    radial-gradient(1.1px 1.1px at 232px 220px, rgba(255,205,120,.60), transparent 60%),
    radial-gradient(1.5px 1.5px at 276px 120px, rgba(200,235,255,.70), transparent 60%),
    radial-gradient(1.3px 1.3px at 62px 300px,  rgba(140,190,255,.60), transparent 60%);
  background-size:300px 600px;
  background-repeat:repeat;
  opacity:.6;
  animation:psMotes 15s linear infinite;
}
@keyframes psMotes{
  from{background-position:0 0}
  to  {background-position:0 -600px}
}

/* Barra de luz superior, estilo barra de sistema PS4 */
.ps-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,140,255,.9) 35%,rgba(255,189,0,.75) 65%,transparent);
  box-shadow:0 0 18px rgba(0,140,255,.65);
  animation:psBar 6s ease-in-out infinite;
}
@keyframes psBar{
  0%,100%{opacity:.35}
  50%    {opacity:1}
}

/* Scanlines + barrido de pantalla (sensación de consola) */
.ps-scan{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  opacity:.5;
}
.ps-scan::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:22vh;
  background:linear-gradient(180deg,transparent,rgba(0,140,255,.10) 45%,transparent);
  animation:psSweep 9s linear infinite;
}
@keyframes psSweep{
  from{top:-25vh}
  to  {top:105vh}
}

/* Viñeta para dar profundidad */
.ps-vig{
  position:absolute;
  inset:0;
  background:radial-gradient(122% 92% at 50% 44%, transparent 38%, rgba(0,0,0,.58) 100%);
}

/* Naves y Astro Bots (canvas) */
/* Respeta a quien pidió menos movimiento */
@media(prefers-reduced-motion:reduce){
  .ps-aurora,.ps-floor,.ps-motes,.ps-topbar,.ps-scan::after,.ps-glyph{animation:none !important}
}

.page{
  position:relative;
  z-index:1;
  width:min(1200px,96%);
  margin:0 auto;
}

/* ===== CABECERA: logo, título y botones dentro del panel ===== */
.logo{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  height:calc(100% - 6px);
  width:auto;
  max-width:112px;
  object-fit:contain;
  flex:none;
  margin:0;
  /* Borde luminoso con los colores de PlayStation. El logo es una silueta
     (PNG 99% transparente), por eso se usa drop-shadow en vez de border:
     asi el resplandor sigue la forma real en vez de dibujar un cuadrado. */
  filter:
    drop-shadow(0 0 1px #eaf6ff)
    drop-shadow(0 0 5px #0070d1)
    drop-shadow(0 0 12px #2e9be0)
    drop-shadow(0 0 24px #4fc3f7);
  animation:logoGlow 3.6s ease-in-out infinite;
}
/* el brillo se expande y se aclara, como si respirara */
@keyframes logoGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 1px #eaf6ff)
      drop-shadow(0 0 5px #0070d1)
      drop-shadow(0 0 12px #2e9be0)
      drop-shadow(0 0 24px #4fc3f7);
  }
  50%{
    filter:
      drop-shadow(0 0 1px #ffffff)
      drop-shadow(0 0 7px #2e9be0)
      drop-shadow(0 0 17px #4fc3f7)
      drop-shadow(0 0 32px #b3e5fc);
  }
}
@media(prefers-reduced-motion:reduce){
  .logo{ animation:none; }
}
.hero-top{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-top h1{flex:1 1 auto;min-width:0}
.brand-btns{
  flex:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}

.brand-btns .soc-btn{
  width:100%;
  min-width:117px;
  padding:5px 10px;
}

/* ===== TÍTULO CENTRAL (compacto) ===== */
.hero{
  position:relative;
  overflow:hidden;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:8px 0 10px;
  padding:7px 12px 6px;
  background:
    radial-gradient(480px 150px at 50% 42%, rgba(255,189,0,.16), transparent 65%),
    radial-gradient(380px 160px at 12% 50%, rgba(0,140,255,.18), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 24px),
    linear-gradient(160deg,#0e2036,#04101c 60%,#020a12);
  border:1px solid #2a5a80;
  border-radius:10px;
  box-shadow:
    inset 0 0 44px rgba(0,120,255,.12),
    0 0 20px rgba(0,140,255,.16);
}
.hero::before{
  content:"";
  position:absolute;
  top:0;left:18px;right:18px;height:2px;
  background:linear-gradient(90deg,transparent,var(--yellow),transparent);
  opacity:.85;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(0deg,rgba(0,120,255,.12),transparent);
  pointer-events:none;
}
.hero h1,.hero p,.brand-btns{position:relative;z-index:1}
.hero h1{
  font-family:'Bebas Neue', 'Arial Narrow', Impact, Arial, Helvetica, sans-serif;
  font-size:clamp(40px,10.5vw,104px);
  font-weight:400;
  letter-spacing:2.6px;
  line-height:1;
  text-transform:uppercase;
  color:var(--yellow);
  text-shadow:0 0 20px rgba(255,189,0,.3);
  margin:0;
}
.hero h1 .store{
  color:#fff;
  font-size:.9em;
  text-shadow:0 0 22px rgba(140,190,255,.5);
}
.hero h1 .store-word{
  font-size:.78em;
  letter-spacing:3.6px;
  vertical-align:baseline;
}
.hero p{
  font-family:Arial, Helvetica, sans-serif;
  font-size:12.5px;
  font-weight:400;
  letter-spacing:normal;
  color:#b6c6d6;
  margin:3px 0 0;
}
/* Los 3 botones se centran verticalmente respecto a la altura del panel */
.brand-btns{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  align-items:stretch;
}
.soc-btn img{height:14px;width:auto;flex:none;object-fit:contain}

/* ===== PASOS: cómo se usa la tienda ===== */
.pasos{
  margin:0 0 10px;
  padding:8px 10px;
  background:rgba(3,10,16,.55);
  border:1px solid #16344e;
  border-radius:10px;
}
.pasos h4{
  margin:0 0 7px;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:23px;
  font-weight:400;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--yellow);
}
.pasos ol{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:paso;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.pasos li{
  counter-increment:paso;
  margin:0;
  padding-left:26px;
  position:relative;
}
.pasos li::before{
  content:counter(paso);
  position:absolute;
  left:0;top:2px;
  width:20px;height:20px;
  border-radius:50%;
  background:linear-gradient(145deg,#ffd226,#f0a900);
  color:#0b0f14;
  font-weight:900;
  font-size:15px;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pasos strong{
  display:block;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-weight:400;
  font-size:20px;
  letter-spacing:1px;
  line-height:1.05;
  color:#fff;
}
.pasos p{
  margin:3px 0 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  letter-spacing:normal;
  line-height:1.35;
  color:#a9bbcb;
}

/* ===== FILTROS DE CATEGORÍA ===== */
.flt-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:0;
}
.flt-row.hidden{ display:none; }
.head-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.store-head .cat-menu{ margin-bottom:0; }
.filters{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}
.fbtn{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:20px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#cdd9e4;
  background:linear-gradient(160deg,#0b1826,#04101c);
  border:1px solid #2a5a80;
  border-radius:999px;
  padding:6px 18px;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.fbtn:hover{
  transform:translateY(-2px);
  border-color:var(--yellow);
  color:var(--yellow);
}
.fbtn.active{
  background:linear-gradient(145deg,#ffd226,#f0a900);
  color:#0b0f14;
  border-color:transparent;
  box-shadow:0 0 18px rgba(255,189,0,.4);
}

/* ===== MENÚ DE CATEGORÍAS ===== */
.cat-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:0;
}
.cat-btn{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#cdd9e4;
  background:linear-gradient(160deg,#0b1826,#04101c);
  border:1px solid #2a5a80;
  border-radius:999px;
  padding:4px 13px;
  cursor:pointer;
  transition:transform .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.cat-btn:hover{
  transform:translateY(-1px);
  border-color:var(--yellow);
  color:var(--yellow);
}
.cat-btn:disabled{ opacity:.45; cursor:default; filter:saturate(.25); }
.cat-btn:disabled:hover{ transform:none; border-color:#2a5a80; color:#cdd9e4; }
.cat-btn.active{
  color:#0b0f14;
  background:linear-gradient(145deg,#ffd226,#f0a900);
  border-color:transparent;
  box-shadow:0 0 12px rgba(255,189,0,.35);
}
.cb-name{ white-space:nowrap; }
.cb-count{
  font-family:Arial, Helvetica, sans-serif;
  font-size:9.5px;
  letter-spacing:.3px;
  color:#7d93a8;
  background:rgba(42,90,128,.35);
  border-radius:999px;
  padding:0 6px;
}
.cat-btn.active .cb-count{ color:#0b0f14; background:rgba(0,0,0,.18); }
.cd-caret{ width:10px; height:10px; color:currentColor; transition:transform .18s ease; }
.cat-dd{ position:relative; display:flex; align-items:center; }
.cat-dd.dd-open .cd-caret{ transform:rotate(180deg); }
.cat-sub{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:182px;
  max-width:min(182px,76vw);
  z-index:60;
  display:none;
  background:linear-gradient(160deg,#0d1f31,#061420);
  border:1px solid #2a5a80;
  border-radius:10px;
  padding:4px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.cat-dd.dd-open .cat-sub{
  display:block;
  animation:ddIn .16s ease;
}
.cat-opt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  text-align:left;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#cdd9e4;
  background:transparent;
  border:none;
  border-radius:8px;
  padding:7px 10px;
  cursor:pointer;
  transition:color .12s ease, background .12s ease;
}
.cat-opt:hover{ color:var(--yellow); background:rgba(255,189,0,.08); }
.cat-opt.active{ color:#0b0f14; background:linear-gradient(145deg,#ffd226,#f0a900); }
.csub-count{
  font-family:Arial, Helvetica, sans-serif;
  font-size:9.5px;
  letter-spacing:.5px;
  color:#7d93a8;
}
.cat-opt.active .csub-count{ color:#0b0f14; }

/* ===== ABECEDARIO / NÚMEROS (Temas) ===== */
.alpha{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  justify-content:flex-start;
  max-width:100%;
  padding:1px 0;
}
.alpha.hidden{ display:none; }
.store-head .alpha{ flex:0 0 100%; margin-top:-2px; }
.alpha::-webkit-scrollbar{ height:4px; }
.alpha::-webkit-scrollbar-track{ background:transparent; }
.alpha::-webkit-scrollbar-thumb{ background:#2a5a80; border-radius:4px; }
.a-btn{
  flex:0 0 auto;
  min-width:25px;
  height:25px;
  padding:0 6px;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:.3px;
  color:#cdd9e4;
  background:linear-gradient(160deg,#0b1826,#04101c);
  border:1px solid #2a5a80;
  border-radius:5px;
  cursor:pointer;
  text-align:center;
  line-height:20px;
  transition:transform .12s ease, border-color .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease;
}
.a-btn:hover{
  transform:translateY(-1px);
  border-color:var(--yellow);
  color:var(--yellow);
}
.a-btn.active{
  background:linear-gradient(145deg,#ffd226,#f0a900);
  color:#0b0f14;
  border-color:transparent;
  box-shadow:0 0 12px rgba(255,189,0,.35);
}

/* ===== TIENDA: cuadrícula de contenido ===== */
.store-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg,#0a1726,#040b13);
  border:1px solid #1c3f5e;
  border-radius:14px;
  padding:12px 14px 14px;
  margin-bottom:10px;
}
.store-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:9px;
  padding-bottom:9px;
  border-bottom:1px solid #1c3f5e;
}
.store-titles{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.store-titles h3{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:31px;
  font-weight:400;
  letter-spacing:1.5px;
  color:#fff;
  margin:0;
  text-shadow:0 2px 12px rgba(0,140,255,.35);
}
.search-box{
  flex:none;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:rgba(6,16,26,.85);
  border:1px solid #2a5a80;
  border-radius:999px;
  width:39px;
  transition:width .28s ease, border-color .12s ease, box-shadow .12s ease;
}
.search-box.open{
  width:215px;
}
.search-box:focus-within{
  border-color:var(--yellow);
  box-shadow:0 0 16px rgba(255,189,0,.25);
}
.search-toggle{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:39px;
  height:37px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:color .12s ease;
}
.search-toggle:hover{ color:var(--yellow) }
.search-toggle svg{
  width:17px;
  height:15px;
  color:#7d93a8;
  transition:color .12s ease;
}
.search-toggle:hover svg{ color:var(--yellow) }
.search-box input{
  width:0;
  flex:0 0 0;
  opacity:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  letter-spacing:normal;
  color:var(--white);
  background:transparent;
  border:none;
  outline:none;
  padding-right:12px;
  transition:opacity .2s ease .08s;
}
.search-box.open input{
  width:152px;
  flex:1 1 auto;
  opacity:1;
}
.search-box input::placeholder{color:#6c87a0}
.view-icons{
  flex:none;
  display:flex;
  align-items:center;
  gap:2px;
  padding:2px;
  background:rgba(9,22,35,.7);
  border:1px solid #1c3f5e;
  border-radius:999px;
}
.vic-btn{
  flex:none;
  width:29px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9fb4c6;
  background:transparent;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:color .12s ease, background .12s ease, box-shadow .12s ease;
}
.vic-btn svg{ width:15px; height:15px; }
.vic-btn:hover{ color:var(--yellow); }
.vic-btn.active{
  color:#0b0f14;
  background:linear-gradient(145deg,#ffd226,#f0a900);
  box-shadow:0 0 12px rgba(255,189,0,.4);
}
@keyframes ddIn{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}
.count{
  flex:none;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:'Bebas Neue', 'Arial Narrow', Impact, Arial, Helvetica, sans-serif;
  font-size:19px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,189,0,.22),rgba(0,140,255,.18));
  border:2px solid var(--yellow);
  border-radius:999px;
  padding:3px 14px;
  white-space:nowrap;
  box-shadow:0 0 16px rgba(255,189,0,.32), inset 0 0 12px rgba(255,189,0,.10);
}
.count-page{
  display:inline-block;
  font-size:14px;
  letter-spacing:1px;
  color:#0b0f14;
  background:linear-gradient(145deg,#ffd226,#f0a900);
  border-radius:999px;
  padding:1px 10px;
  box-shadow:0 1px 5px rgba(0,0,0,.3);
}
@media(max-width:520px){
  .count{ font-size:16px; gap:7px; padding:2px 11px; }
  .count-page{ font-size:12px; padding:1px 8px; }
}
.store-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
.si-info{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  flex:1;
  width:100%;
}
/* ===== VISTA COMPACTA ===== */
[data-view="compact"]{
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:8px;
}
[data-view="compact"] .si-card{padding:7px;gap:6px}
[data-view="compact"] .si-img{height:105px}
[data-view="compact"] .si-title{font-size:15.5px}
[data-view="compact"] .si-head{min-height:19px}
[data-view="compact"] .si-cat{font-size:12px;padding:1px 8px}
[data-view="compact"] .si-meta{font-size:9px}
[data-view="compact"] .si-go{font-size:15px;padding:3px 12px}
[data-view="compact"] .si-foot{gap:8px}
[data-view="compact"] .si-ver{font-size:12px;padding:2px 8px;letter-spacing:1px}
[data-view="compact"] .si-info{gap:4px}
/* ===== VISTA LISTA ===== */
.store-grid[data-view="list"]{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.store-grid[data-view="list"] .si-card{
  flex-direction:row;
  align-items:center;
  gap:14px;
  padding:9px 12px;
  animation:none;
}
.store-grid[data-view="list"] .si-card:hover{transform:translateX(4px)}
.store-grid[data-view="list"] .si-img{
  width:132px;
  height:78px;
  flex:none;
}
.store-grid[data-view="list"] .si-info{
  flex:1 1 auto;
}
.store-grid[data-view="list"] .si-go{
  margin-top:0;
  flex:none;
  align-self:center;
}
/* En lista el pie NO puede medir el 100%: con flex:0 0 auto el flex-basis
   resuelve a ese width y la tarjeta se desborda. Ahi manda solo el contenido. */
.store-grid[data-view="list"] .si-foot{ margin-top:0; flex:0 0 auto; gap:10px; width:auto; }
@media(max-width:760px){
  .store-grid[data-view="list"] .si-img{width:96px;height:60px}
  .store-grid[data-view="list"] .si-card{gap:9px;padding:7px 9px}
}
.si-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:10px;
  overflow:hidden;
  background:linear-gradient(160deg,#0b1826,#04101c);
  border:2px solid #2a5a80;
  border-radius:11px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  animation:cardIn .5s ease both;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.si-card::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-90%;
  width:55%;
  height:240%;
  transform:rotate(25deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  z-index:3;
  pointer-events:none;
  transition:left .7s ease;
}
.si-card:hover{
  transform:translateY(-5px);
  border-color:var(--yellow);
  background:linear-gradient(160deg,#123049,#072034);
  box-shadow:0 0 32px rgba(255,189,0,.45), 0 10px 24px rgba(0,0,0,.4);
}
.si-card:hover::after{left:135%}
.si-img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
  border:1px solid #1c3f5e;
  border-radius:8px;
  background:linear-gradient(160deg,#0b1826,#04101c);
  transition:transform .35s ease;
}
.si-card:hover .si-img{transform:scale(1.08)}
.si-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:24px;
}
.si-cat{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:15px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:2px 11px;
  border-radius:999px;
  border:1px solid #2a5a80;
  background:rgba(255,255,255,.05);
  color:#fff;
  white-space:nowrap;
}
.si-cat.App,
.si-cat.Aplicacion{color:#ffc1dd;border-color:#ff4fa3;background:rgba(255,79,163,.15)}
.si-cat.Herramienta{color:#c8f5d6;border-color:#43d17c;background:rgba(67,209,124,.15)}
.si-cat.Tema{color:#ffc1dd;border-color:#ff4fa3;background:rgba(255,79,163,.15)}
.si-nuevo{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:15px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#ff8fb9;
  background:rgba(255,79,163,.15);
  border:1px solid #ff4fa3;
  border-radius:999px;
  padding:2px 11px;
  white-space:nowrap;
}
.si-title{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:21px;
  font-weight:400;
  letter-spacing:1px;
  line-height:1.05;
  text-transform:uppercase;
  color:#eef4fa;
  word-break:break-word;
}
.si-card:hover .si-title{
  color:var(--yellow);
  text-shadow:0 0 14px rgba(255,189,0,.5);
}
/* pie de tarjeta: "Ver" a la izquierda, version a la derecha, abajo del todo */
.si-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.si-ver{
  display:inline-flex;
  align-items:center;
  flex:none;
  font-family:'Bebas Neue', 'Arial Narrow', Arial, Helvetica, sans-serif;
  font-size:14px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#8fd0ff;
  background:rgba(0,140,255,.10);
  border:1px solid #2f7db8;
  border-radius:999px;
  padding:3px 10px;
  white-space:nowrap;
}
.si-go{
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:18px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background:linear-gradient(145deg,#ffd226,#f0a900);
  color:#0b0f14;
  border-radius:999px;
  padding:5px 14px;
  box-shadow:0 2px 8px rgba(255,189,0,.25);
  transition:transform .12s ease, box-shadow .12s ease;
}
.si-card:hover .si-go{
  transform:scale(1.05);
  box-shadow:0 0 16px rgba(255,189,0,.55);
}
.si-card.empty{
  opacity:.5;
}
.store-empty{
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  letter-spacing:normal;
  color:#a9bbcb;
  text-align:center;
  padding:24px 10px;
  display:none;
}
.store-empty.show{display:block}

/* ===== PAGINACIÓN ===== */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.page-btn{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:22px;
  letter-spacing:1px;
  color:#cdd9e4;
  background:linear-gradient(160deg,#0b1826,#04101c);
  border:1px solid #2a5a80;
  border-radius:8px;
  min-width:44px;
  height:44px;
  padding:0 12px;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.page-btn:hover:not(.active):not([disabled]){
  transform:translateY(-2px);
  border-color:var(--yellow);
  color:var(--yellow);
}
.page-btn.active{
  background:linear-gradient(145deg,#ffd226,#f0a900);
  color:#0b0f14;
  border-color:transparent;
  box-shadow:0 0 16px rgba(255,189,0,.4);
}
.page-btn[disabled]{opacity:.4;cursor:default}
.page-btn.nav{font-size:25px;line-height:1}
.page-ellipsis{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:19px;
  color:#7d93a8;
  padding:0 2px;
}

/* ===== VISTA PREVIA (modal) ===== */
.modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(2,6,12,.82);
}
.modal-box{
  position:relative;
  order:2;
  flex:0 1 auto;
  width:min(560px,100%);
  min-width:0;
  max-height:92vh;
  overflow:auto;
  background:linear-gradient(160deg,#0e2036,#04101c);
  border:1px solid #2a5a80;
  border-radius:14px;
  box-shadow:0 0 60px rgba(0,140,255,.25);
}
.modal-box::before{
  content:"";
  position:absolute;
  top:0;left:20px;right:20px;height:2px;
  background:linear-gradient(90deg,transparent,var(--yellow),transparent);
  opacity:.85;
}
.modal-img{
  width:100%;
  height:clamp(170px,32vh,290px);
  object-fit:cover;
  object-position:center;
  display:block;
  border-bottom:1px solid #1c3f5e;
  background:linear-gradient(160deg,#0b1826,#04101c);
}
.modal-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:14px 16px 18px;
}
.modal-img-app{
  object-fit:contain;
  object-position:center;
  padding:20px;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(0,140,255,.18), transparent 72%),
    linear-gradient(160deg,#0b1826,#04101c);
}
.modal-title{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:30px;
  font-weight:400;
  letter-spacing:1px;
  line-height:1.05;
  text-transform:uppercase;
  color:var(--yellow);
  text-shadow:0 0 14px rgba(255,189,0,.3);
}
.modal-desc{
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  letter-spacing:normal;
  line-height:1.4;
  color:#a9bbcb;
  margin:0;
}
.modal-desc:empty{display:none}
.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:41px;
  height:41px;
  border-radius:50%;
  border:1px solid #2f5577;
  background:rgba(4,12,20,.72);
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.modal-close:hover{
  border-color:var(--yellow);
  color:var(--yellow);
  box-shadow:0 0 14px rgba(255,189,0,.3);
}
.modal-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
}
.modal-nav{
  position:static;
  transform:none;
  flex:none;
  width:53px;
  height:97px;
  border-radius:14px;
  border:1px solid #2f5577;
  background:rgba(4,12,20,.82);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  padding:0;
  transition:border-color .12s ease, color .12s ease, box-shadow .12s ease, background .12s ease;
}
.modal-nav svg{width:32px;height:32px}
.modal-nav:hover{
  border-color:var(--yellow);
  color:var(--yellow);
  background:rgba(10,25,42,.95);
  box-shadow:0 0 18px rgba(255,189,0,.35);
}
.modal-prev{order:1}
.modal-box{order:2}
.modal-next{order:3}
@media (max-width:700px){
  .modal-row{gap:4px}
  .modal-nav{width:39px;height:69px;border-radius:12px}
  .modal-nav svg{width:23px;height:23px}
}
.modal-tipo{ cursor:help; }
.modal-tipo.is-din{
  color:#7ce0a0;
  border-color:#2f7d5a;
  background:rgba(124,224,160,.10);
}
.modal-tipo.is-est{
  color:#9fb4c6;
  border-color:#2a5a80;
  background:rgba(42,90,128,.30);
}
.modal-chips{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.modal-toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  flex-wrap:wrap;
}
.modal-pos{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:15px;
  letter-spacing:2px;
  color:#cfe0f0;
  background:rgba(4,12,20,.6);
  border:1px solid #2f5577;
  border-radius:999px;
  padding:2px 11px;
  white-space:nowrap;
}
.dl-btn{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:22px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background:linear-gradient(145deg,#ffd226,#f0a900);
  color:#0b0f14;
  border-radius:999px;
  padding:8px 22px;
  box-shadow:0 4px 14px rgba(255,189,0,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.dl-btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 24px rgba(255,189,0,.6);
}
.dl-btn.disabled{
  opacity:.5;
  pointer-events:none;
  box-shadow:none;
}
.dl-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
}
/* version, a la derecha del boton Descargar */
.dl-ver{
  display:inline-flex;
  align-items:center;
  font-family:'Bebas Neue', 'Arial Narrow', Arial, Helvetica, sans-serif;
  font-size:19px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--yellow);
  background:rgba(255,189,0,.10);
  border:1px solid rgba(255,189,0,.45);
  border-radius:999px;
  padding:5px 16px;
  white-space:nowrap;
}
.dl-ver[hidden]{ display:none; }
.svc-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #2a5a80;
  background:rgba(9,22,35,.7);
  border-radius:999px;
  padding:5px 14px 5px 8px;
}
.svc-icon{
  height:24px;
  width:auto;
}
.svc-name{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:16px;
  letter-spacing:1.2px;
  color:#a9bbcb;
  text-transform:uppercase;
}
.si-meta{
  font-family:Arial, Helvetica, sans-serif;
  font-size:10.5px;
  letter-spacing:1.6px;
  color:#6c87a0;
  text-transform:uppercase;
}

/* ===== ICONOS DE APLICACIONES (cuadrados, sin recortar) ===== */
.si-card[data-cat="Aplicacion"] .si-img,
.si-card[data-cat="App"] .si-img{
  object-fit:contain;
  object-position:center;
  height:auto;
  aspect-ratio:1/1;
  max-height:200px;
  padding:14px;
  background:
    radial-gradient(75% 75% at 50% 42%, rgba(0,140,255,.16), transparent 70%),
    linear-gradient(160deg,#0b1826,#04101c);
}
.si-card[data-cat="Aplicacion"]:hover .si-img,
.si-card[data-cat="App"]:hover .si-img{
  transform:scale(1.03);
}
[data-view="compact"] .si-card[data-cat="Aplicacion"] .si-img,
[data-view="compact"] .si-card[data-cat="App"] .si-img{
  padding:9px;
  max-height:130px;
}
.store-grid[data-view="list"] .si-card[data-cat="Aplicacion"] .si-img,
.store-grid[data-view="list"] .si-card[data-cat="App"] .si-img{
  padding:6px;
  width:64px;
  height:64px;
  border-radius:10px;
}

/* ===== BOTONES SOCIALES ===== */
.soc-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 9px;
  border-radius:7px;
  font-weight:900;
  font-size:11.5px;
  letter-spacing:.4px;
  color:#fff;
  text-transform:uppercase;
  transition:box-shadow .15s ease, transform .15s ease;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
}
.soc-btn svg{width:14px;height:14px;fill:currentColor;flex:none}
.soc-btn.youtube{
  background:linear-gradient(145deg,#ff2b34,#c0000f);
  box-shadow:0 4px 14px rgba(255,0,25,.3);
}
.soc-btn.youtube:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(255,0,25,.55)}
.soc-btn.twitter{
  background:linear-gradient(145deg,#0b0f14,#05070a);
  border:1px solid #3a6a94;
  box-shadow:0 4px 14px rgba(29,161,242,.18);
}
.soc-btn.twitter:hover{transform:translateY(-2px);border-color:#fff;box-shadow:0 0 24px rgba(29,161,242,.55)}
.soc-btn.kofi{
  background:linear-gradient(145deg,#ff706c,#e04542);
  box-shadow:0 4px 14px rgba(255,94,91,.3);
}
.soc-btn.kofi:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(255,94,91,.6)}

/* ===== FOOTER (una línea) ===== */
footer{
  border-top:1px solid var(--yellow);
  margin-top:10px;
  padding:8px 4px 10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#c2ced9;
  font-size:14px;
  flex-wrap:wrap;
}
footer strong{color:var(--white)}
footer .yellow{color:var(--yellow)}

/* ===== BOTÓN VOLVER ARRIBA ===== */
.to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(8,20,32,.55);
  border:1px solid #2f9bff;
  border-radius:50%;
  color:#dce8f3;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  z-index:60;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.to-top svg{width:22px;height:22px}
.to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.to-top:hover{
  border-color:var(--yellow);
  color:var(--yellow);
  box-shadow:0 0 18px rgba(255,189,0,.35);
}

/* Pantallas más pequeñas: vuelve a apilarse */
@media(max-width:1300px){
  .hero{margin:8px 0 10px;padding-left:12px}
  .brand-btns{position:static;transform:none;flex:1 1 100%;flex-direction:row;justify-content:center;align-items:center}
  .pasos ol{grid-template-columns:repeat(2,1fr);gap:8px}
  .pasos li{padding-left:26px}
}
@media(max-width:1100px){
  .store-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .logo{
    position:static;
    height:48px;
    max-width:none;
    transform:none;
    margin:0 auto;
    /* en movil el logo es pequeno: un halo de 30px se comeria la pantalla */
    filter:
      drop-shadow(0 0 1px #eaf6ff)
      drop-shadow(0 0 4px #0070d1)
      drop-shadow(0 0 9px #2e9be0);
  }
  .hero{padding-left:12px}
  .hero-top{flex-wrap:wrap;justify-content:center}
  .pasos ol{grid-template-columns:1fr;gap:8px}
  .store-grid{grid-template-columns:1fr}
  .search-box{flex:none;width:39px}
  .search-box.open{width:min(60vw,215px)}
  .head-right{width:100%;justify-content:space-between}
}
@media(max-width:520px){
  .store-head{gap:8px}
  .page-btn{min-width:35px;font-size:20px}
  .pagination{gap:5px}
  .modal-nav{width:35px;height:60px}
}