/* ===== Inicio (rediseño): encabezado con logo → pestañas de categorías → hero a ancho completo con carrusel → franja de ventajas.
   Solo lo carga index.html (body.home); checkout y pedido no cambian. Va después de style.css y lo sobrescribe. ===== */

/* --- encabezado --- */
body.home .top{gap:14px;padding:12px 24px;background:#050d24f2;border-bottom:1px solid #12306b}
body.home .top .logo{display:flex}
body.home .top .brand{height:46px;width:auto}
body.home .top .dnav{display:none}
body.home .ctry{margin-left:auto}
body.home .ctry-btn,body.home .lang,body.home .gbtn{height:46px;background:#071634;border:1px solid #16398a;border-radius:12px;padding:0 16px}
body.home .gbtn{gap:10px;opacity:1}
body.home .gbtn:disabled{opacity:.6}
body.home .gbtn img,body.home .gbtn .g{width:28px;height:28px;border-radius:50%}
body.home .gbtn>span:not(.g)::after{content:"";display:inline-block;width:7px;height:7px;margin:0 0 3px 10px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg)}
body.home .ctry-btn:hover,body.home .gbtn:not(:disabled):hover{border-color:var(--neon)}

/* --- estructura: todo el ancho --- */
body.home .shell{max-width:none}
body.home .main{padding-bottom:0}

/* --- pestañas de categorías --- */
body.home .tabs{padding:10px 24px;background:#050d24d9;border-bottom:1px solid #12306b;backdrop-filter:blur(8px)}
body.home .tabs .cats4{display:flex;gap:10px;grid-template-columns:none;overflow-x:auto;scrollbar-width:none}
body.home .tabs .cats4::-webkit-scrollbar{display:none}
/* botón pequeño: miniatura a la izquierda + nombre */
body.home .tabs .catbtn{flex-direction:row;align-items:center;gap:0;padding:0 18px 0 8px;width:auto;min-width:0;height:52px;border-radius:12px;background:#071634;border:1px solid #16398a;overflow:hidden;flex:none}
body.home .tabs .catbtn .clabel{display:flex;align-items:center;justify-content:flex-start;gap:10px;height:auto;width:auto;white-space:nowrap}
body.home .tabs .catbtn .cimg{display:block;width:38px;height:38px;flex:none;aspect-ratio:1/1;object-fit:cover;border-radius:9px;background:#030814;border:1px solid #16398a;transition:transform .25s}
body.home .tabs .catbtn .cimg[src$="cat-pass.png"]{object-fit:contain;padding:2px}
body.home .tabs .catbtn:hover:not(:disabled) .cimg{transform:scale(1.08)}
body.home .tabs .catbtn b{font-size:15px;font-weight:700;min-height:0;display:block;text-align:left}
body.home .tabs .catbtn small{display:none}
body.home .tabs .catbtn.on{border-color:var(--neon);background:#0a2150;box-shadow:0 0 18px #35c8ff55,inset 0 0 14px #1a8cff22}
body.home .tabs .catbtn.on::after{display:none}
body.home .tabs .catbtn:hover:not(:disabled){transform:none;border-color:var(--neon)}
body.home .tabs .catbtn:disabled .cimg{filter:grayscale(.7) brightness(.6)}
body.home .hero-buy .gem-s{width:30px;height:30px;object-fit:cover;border-radius:50%;flex:none;filter:drop-shadow(0 0 6px #35c8ffaa)}

/* --- hero --- */
body.home .hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,33vw);align-items:center;gap:40px;
  height:auto;min-height:clamp(420px,29vw,500px);margin:0;padding:44px clamp(24px,3.2vw,64px) 92px;border:0;border-radius:0;box-shadow:none;width:auto;aspect-ratio:auto;container-type:normal;overflow:hidden;background:#04091a}
body.home .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;z-index:0}
body.home .hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#04091acc 0%,#04091a66 36%,transparent 62%),linear-gradient(180deg,transparent 78%,#04091a99 100%)}
body.home .hero-copy{position:relative;z-index:2;max-width:720px;margin-top:70px}
body.home .hero-copy .kick{display:block;color:var(--neon);font-weight:800;font-size:clamp(18px,1.5vw,24px);letter-spacing:.5px;text-shadow:0 0 18px #1a8cff88}
body.home .hero-copy h1{margin:2px 0 8px;font-style:normal;font-weight:800;line-height:1.08;font-size:clamp(32px,3.6vw,60px);color:#fff;text-shadow:0 2px 18px #000a}
body.home .hero-copy p{margin:0;color:#dbe8ff;font-size:clamp(15px,1.2vw,19px);text-shadow:0 1px 10px #000a}
body.home .hero-buy{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:0 28px;height:56px;border:0;border-radius:999px;background:linear-gradient(90deg,#1a8cff,#0d6fe0);color:#fff;font-weight:700;font-size:17px;box-shadow:0 8px 26px #1a8cff66;transition:.2s}
body.home .hero-buy .ic{color:#fff;width:26px;height:26px}
body.home .hero-buy b{font-size:22px;font-weight:600}
body.home .hero-buy:hover{transform:translateY(-2px);box-shadow:0 12px 32px #35c8ff88}

/* --- carrusel (tarjeta de anuncios a la derecha) --- */
body.home .ads-wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;align-self:center}
body.home .ads{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid #4f78c8aa;box-shadow:0 14px 40px #000a,0 0 0 1px #0b1a3d;background:#06102a}
body.home .ads .slides{position:absolute;inset:0}
body.home .hnav{opacity:1;width:38px;height:38px;background:#04091acc}
body.home .hdots{position:static;transform:none}
body.home .ads .hbar{bottom:0}

/* anuncios construidos con las imágenes de la tienda */
body.home .ads .slide.ad{display:flex;align-items:center;padding:0 0 0 8%;background:radial-gradient(circle at 80% 50%,#1a8cff55,transparent 60%),linear-gradient(120deg,#07163a,#0b2a66)}
body.home .ads .slide.ad .ad-txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;width:52%}
body.home .ads .slide.ad .ad-txt b{font-size:clamp(18px,1.9vw,30px);line-height:1.1}
body.home .ads .slide.ad .ad-txt span{color:#cfe0ff;font-size:clamp(12px,1vw,15px)}
body.home .ads .slide.ad .ad-txt em{align-self:flex-start;margin-top:8px;font-style:normal;font-weight:700;font-size:clamp(12px,1vw,14px);padding:8px 16px;border-radius:999px;background:#1a8cff}
body.home .ads .slide.ad>img{position:absolute;right:0;top:0;width:52%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
body.home .ads .slide.ad-pass>img{object-fit:contain;padding:6% 4%;-webkit-mask-image:none;mask-image:none}

/* --- franja de ventajas (se monta sobre el borde del hero) --- */
body.home .feats{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);margin:-44px clamp(16px,2.2vw,44px) 0;background:#07122ef0;border:1px solid #16398a;border-radius:18px;box-shadow:0 12px 36px #0009;backdrop-filter:blur(8px)}
body.home .feats>div{display:flex;align-items:center;gap:16px;padding:22px 26px}
body.home .feats>div+div{border-left:1px solid #16398a88}
body.home .feats .fi{width:60px;height:60px;border-radius:16px;background:#0b1d46;border:1px solid #16398a;display:grid;place-items:center;flex:none}
body.home .feats .fi .ic{width:30px;height:30px}
body.home .feats b{display:block;font-size:17px;margin-bottom:3px}
body.home .feats small{display:block;color:#6fa8ff;font-size:14px;line-height:1.3}

/* --- tienda y secciones: centradas y con aire --- */
body.home .content,body.home .sec{max-width:1320px;margin-left:auto;margin-right:auto;width:100%}
body.home .content{padding-top:34px}
body.home .shop{scroll-margin-top:90px}

/* --- tablet / celular --- */
@media(max-width:1000px){
  body.home .hero{grid-template-columns:1fr;gap:26px;padding:32px 20px 78px}
  body.home .hero-copy{margin-top:0}
  body.home .ads-wrap{max-width:560px;width:100%;justify-self:center}
  body.home .feats{grid-template-columns:1fr 1fr}
  body.home .feats>div:nth-child(3){border-left:0}
  body.home .feats>div:nth-child(n+3){border-top:1px solid #16398a88}
}
@media(max-width:760px){
  body.home .top{padding:10px 14px;gap:8px}
  body.home .top .brand{height:30px}
  body.home .lang .ic{display:none}
  body.home .top .logo{min-width:0}
  body.home .ctry-btn,body.home .lang,body.home .gbtn{height:40px;padding:0 8px}
  body.home .burger{width:40px;height:40px}
  body.home .gbtn>span:not(.g){display:none}
  body.home .tabs{padding:8px 12px}
  body.home .tabs .catbtn{height:46px;padding:0 12px 0 6px}
  body.home .tabs .catbtn .cimg{width:32px;height:32px;border-radius:8px}
  body.home .tabs .catbtn .clabel{gap:8px}
  body.home .tabs .catbtn b{font-size:13.5px;min-height:0}
  body.home .hero{min-height:0;padding:26px 16px 70px}
  body.home .hero-copy h1{font-size:30px}
  body.home .hero-buy{height:50px;font-size:16px;margin-top:20px}
  body.home .hnav{display:none}
  body.home .feats{margin:-40px 12px 0;grid-template-columns:1fr 1fr}
  body.home .feats>div{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 14px}
  body.home .feats>div+div{border-left:0;border-top:0}
  body.home .feats>div:nth-child(even){border-left:1px solid #16398a88}
  body.home .feats>div:nth-child(n+3){border-top:1px solid #16398a88}
  body.home .feats b{font-size:15px}body.home .feats small{font-size:12.5px}
  body.home .feats .fi{width:48px;height:48px}
}


/* ===== Top compradores (inicio) ===== */
a.catbtn{color:var(--txt);text-decoration:none}
body.home .rank{position:relative;width:100%;max-width:920px;margin:0 auto;padding:22px 22px 20px;border:1px solid #1f4fb3;border-radius:18px;background:linear-gradient(180deg,#071634ee,#050d24ee);box-shadow:0 14px 44px #000a,0 0 28px #1a8cff22;overflow:hidden}
body.home .rank::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,#35c8ff,transparent);opacity:.8}
.rank-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rank-head h2{display:flex;align-items:center;gap:10px;margin:0;font-size:clamp(18px,2vw,24px);letter-spacing:1.5px;text-transform:uppercase;color:#cfe6ff}
.rank-head h2 .ic{width:26px;height:22px;color:#f5c84b;filter:drop-shadow(0 0 8px #f5c84b88)}
.rank-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#7dffb0}
.rank-live i{width:8px;height:8px;border-radius:50%;background:#35e07a;box-shadow:0 0 0 0 #35e07a99;animation:rkpulse 1.8s infinite}
@keyframes rkpulse{70%{box-shadow:0 0 0 9px #35e07a00}100%{box-shadow:0 0 0 0 #35e07a00}}
.rank-sub{margin:6px 0 16px;font-size:14px}
.rank-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rtab{height:42px;border-radius:10px;border:1px solid #16398a;background:#071634;color:#8fa6cf;font:inherit;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px;cursor:pointer;transition:.2s}
.rtab:hover{border-color:var(--neon);color:#fff}
.rtab.on{color:#fff;border-color:var(--neon);background:#0a2150;box-shadow:0 0 18px #35c8ff44,inset 0 0 12px #1a8cff22}
.rank-bar{height:3px;margin:10px 2px 14px;border-radius:3px;background:#0d1f4a;overflow:hidden}
.rank-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#1a8cff,#35c8ff)}
.rank-bar i.run{animation:rkbar var(--ev,6s) linear forwards}
.rank.paused .rank-bar i{animation-play-state:paused}
.rank.is-empty .rank-bar{display:none}
@keyframes rkbar{from{width:0}to{width:100%}}
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rk{display:grid;grid-template-columns:34px 42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 14px 8px 12px;border-radius:10px;background:#08142f;border-left:3px solid #16398a;opacity:0;animation:rkin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*55ms)}
.rank-list.swap .rk{animation-name:rkswap}
@keyframes rkin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rkswap{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.rk .pos{font-weight:800;font-size:17px;color:#6f86b3;text-align:center}
.rk.r1{border-left-color:#f5c84b;background:linear-gradient(90deg,#2a2208aa,#08142f 60%)}.rk.r1 .pos{color:#f5c84b}
.rk.r2{border-left-color:#cfd8ea;background:linear-gradient(90deg,#1c2433aa,#08142f 60%)}.rk.r2 .pos{color:#cfd8ea}
.rk.r3{border-left-color:#e08a3c;background:linear-gradient(90deg,#2b1a0baa,#08142f 60%)}.rk.r3 .pos{color:#e08a3c}
.rk .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;border:2px solid #ffffff22;text-shadow:0 1px 4px #0008}
.rk.r1 .av{border-color:#f5c84b;box-shadow:0 0 14px #f5c84b66}.rk.r2 .av{border-color:#cfd8ea}.rk.r3 .av{border-color:#e08a3c}
.av0{background:linear-gradient(135deg,#1a8cff,#35c8ff)}.av1{background:linear-gradient(135deg,#8a3ffc,#d36bff)}.av2{background:linear-gradient(135deg,#e5484d,#ff9a6b)}.av3{background:linear-gradient(135deg,#1f9d5c,#7be0a0)}
.av4{background:linear-gradient(135deg,#f08c00,#ffd166)}.av5{background:linear-gradient(135deg,#0ea5a5,#5eead4)}.av6{background:linear-gradient(135deg,#d6336c,#ff8fb1)}.av7{background:linear-gradient(135deg,#4263eb,#91a7ff)}
.rk .nm{display:flex;align-items:center;gap:8px;min-width:0}.rk .nt{font-weight:700;font-size:16px;color:#e9f1ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .fl{flex:none;border-radius:3px;box-shadow:0 0 0 1px #ffffff22}
.rk .amt{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:17px;color:var(--neon);font-variant-numeric:tabular-nums;text-shadow:0 0 12px #35c8ff55}
.rk .amt .ic{width:18px;height:18px}
.rk.sk{animation:rkpulse2 1.4s ease-in-out infinite;opacity:.55;animation-delay:calc(var(--i,0)*80ms)}
.rk.sk .av{background:#0d1f4a;border-color:transparent}.rk.sk .pos,.rk.sk .nm,.rk.sk .amt{height:14px;border-radius:7px;background:#0d1f4a}
@keyframes rkpulse2{50%{opacity:.25}}
.rank-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:34px 12px;text-align:center}
.rank-empty>b{font-size:17px;color:#cfe6ff;max-width:460px;line-height:1.4}
body.home .hero-buy.small{height:46px;margin-top:0;padding:0 22px;font-size:15px}
.rank-cta{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px auto 0;height:50px;max-width:420px;border-radius:999px;background:linear-gradient(90deg,#1a8cff,#0d6fe0);color:#fff;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 8px 26px #1a8cff55;transition:.2s}
.rank-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px #35c8ff88}
.rank.is-empty .rank-cta{display:none}
@media(max-width:760px){
  body.home .rank{padding:16px 12px 16px;border-radius:14px}
  .rank-tabs{gap:6px}.rtab{height:38px;font-size:12px;letter-spacing:.5px}
  .rk{grid-template-columns:24px 36px minmax(0,1fr) auto;gap:9px;padding:7px 10px 7px 8px}
  .rk .av{width:34px;height:34px;font-size:14px}.rk .nt{font-size:14.5px}.rk .amt{font-size:15px}.rk .pos{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.rk,.rank-list.swap .rk{animation:none;opacity:1}.rank-bar i.run{animation:none}.rank-live i{animation:none}}

/* ===== Página de la tienda (tienda.html) ===== */
body.shoppage .content{padding-top:26px;min-height:58vh}
body.shoppage .shop{scroll-margin-top:90px}


/* ===== v4.2: portales de juegos bajo el hero, banner nuevo en el carrusel, franja «Juega sin límites», ventajas al final ===== */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* fondo del inicio: azul marino oscuro (como el diseño nuevo); la tienda y el resto conservan su fondo */
body.home:not(.shoppage){background:radial-gradient(circle at 72% 0,#0b2460 0,#06112e 34%,#04091a 68%) fixed #04091a}

/* hero: el nombre del juego como logotipo grande; la tarjeta de anuncios un poco más ancha */
body.home .hero{grid-template-columns:minmax(0,1fr) minmax(340px,36vw);padding-bottom:56px}
body.home .hero-copy .kick{font-size:clamp(44px,5.6vw,92px);font-weight:900;font-style:italic;line-height:.95;letter-spacing:-.5px;text-transform:uppercase;color:#fff;text-shadow:0 4px 0 #0007,0 0 28px #1a8cff66}
body.home .hero-copy h1{font-size:clamp(28px,3vw,50px)}
body.home .ads{aspect-ratio:2.4/1}

/* portales: cada foto de juego es un botón que abre otra página de la misma web */
body.home .games{max-width:1320px;margin:0 auto;padding:28px clamp(16px,2.2vw,44px) 0}
.games-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.game{position:relative;display:block;padding:2px;border-radius:16px;color:#fff;background:conic-gradient(from var(--a),#16398a,#35c8ff,#1a8cff,#16398a);box-shadow:0 8px 22px #0008;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.game:hover,.game:focus-visible{transform:translateY(-5px);box-shadow:0 16px 36px #000a,0 0 28px #35c8ff77;animation:portalspin 3.2s linear infinite;outline:0}
@keyframes portalspin{to{--a:360deg}}
.gphoto{position:relative;display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#030814}
.gphoto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .3s}
.gphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#030814aa 0,transparent 38%);pointer-events:none}   /* la etiqueta va arriba para no tapar el logo de cada juego */
.game:hover .gphoto img,.game:focus-visible .gphoto img{transform:scale(1.08);filter:saturate(1.15)}
.gpill{position:absolute;z-index:2;right:10px;top:10px;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px 0 7px;border-radius:999px;background:linear-gradient(90deg,#1a8cff,#0d6fe0);color:#fff;font-weight:800;font-size:13px;letter-spacing:.9px;text-transform:uppercase;box-shadow:0 6px 18px #1a8cff77;transition:.25s}
.gpill .gem{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#071634}
.gpill .gem svg{width:16px;height:16px}
.game:hover .gpill{box-shadow:0 8px 24px #35c8ffaa;padding-right:22px}

/* efecto portal al tocar una foto: círculo de luz que se abre desde el clic */
.portal-fx{position:fixed;inset:0;z-index:999;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),#fff 0,#bfe9ff 6%,#35c8ff 15%,#1a8cff 34%,#04091a 72%);clip-path:circle(0 at var(--x) var(--y));animation:portalopen .42s cubic-bezier(.5,0,.3,1) forwards}
@keyframes portalopen{to{clip-path:circle(150vmax at var(--x) var(--y))}}

/* franja «Juega sin límites» */
body.home .isla{position:relative;width:calc(100% - clamp(32px,4.4vw,88px));max-width:1320px;height:clamp(96px,12vw,170px);margin:22px auto 0;border-radius:16px;overflow:hidden;border:1px solid #16398a;background:#04091a}
body.home .isla>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
body.home .isla::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#04091ab3,transparent 45%,transparent 60%,#04091a99)}
body.home .isla em{position:absolute;z-index:2;left:clamp(16px,2vw,30px);bottom:clamp(12px,1.6vw,22px);font-weight:900;font-style:italic;font-size:clamp(20px,2.7vw,42px);color:#fff;text-shadow:0 2px 14px #000,0 0 22px #1a8cffaa}
body.home .isla .isla-logo{position:absolute;z-index:2;right:clamp(14px,2vw,28px);bottom:clamp(10px,1.4vw,20px);height:clamp(26px,3.2vw,46px);width:auto}

/* franja de ventajas: al final de la web (ya no se monta sobre el hero) */
body.home .feats{width:calc(100% - clamp(32px,4.4vw,88px));max-width:1320px;margin:34px auto 34px}

/* página de un juego (juego.html) */
.gp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center;padding:22px;border:1px solid #1f4fb3;border-radius:18px;background:linear-gradient(180deg,#071634ee,#050d24ee);box-shadow:0 14px 44px #000a,0 0 28px #1a8cff22}
.gp-hero.nf{grid-template-columns:1fr}
.gp-img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:1px solid #16398a}
.gp-kick{display:block;font-weight:900;font-style:italic;text-transform:uppercase;color:var(--neon);font-size:clamp(18px,2vw,28px);text-shadow:0 0 18px #1a8cff88}
.gp-copy h1{margin:6px 0 10px;font-size:clamp(26px,3vw,44px);line-height:1.1}
.gp-copy p{margin:0;font-size:clamp(15px,1.2vw,18px)}
.gp-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:24px}
.gp-actions .hero-buy{margin-top:0}
.gp-back{display:inline-flex;align-items:center;height:56px;padding:0 24px;border:1px solid #16398a;border-radius:999px;background:#071634;font-weight:700;transition:.2s}
.gp-back:hover{border-color:var(--neon);box-shadow:0 0 18px #35c8ff44}
.gp-others-h{margin:32px 0 14px;font-size:clamp(18px,2vw,22px);letter-spacing:1px;text-transform:uppercase;color:#cfe6ff}
body.gamepage .content{max-width:1320px}

@media(max-width:1000px){
  body.home .hero{grid-template-columns:1fr}
  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gp-hero{grid-template-columns:1fr}
}
@media(max-width:760px){
  body.home .games{padding-top:20px}
  .games-grid{gap:12px}
  .gpill{height:32px;right:6px;top:6px;font-size:11.5px;letter-spacing:.5px;padding:0 12px 0 5px}
  .gpill .gem{width:22px;height:22px}.gpill .gem svg{width:14px;height:14px}
  body.home .feats{margin:26px auto 26px}
  body.home .hero-copy .kick{font-size:clamp(40px,12vw,60px)}
  .gp-hero{padding:14px}
  .gp-back,.gp-actions .hero-buy{height:50px}
}
@media(prefers-reduced-motion:reduce){.game,.game:hover,.game:focus-visible{animation:none;transition:none}.gphoto img{transition:none}.portal-fx{animation:none}}

/* ---------- v4.3: página de productos de cada juego + tarjeta genérica de juegos sin foto ---------- */
.tabs[hidden],.shop-sub[hidden]{display:none}
.gamehead{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.gamehead small{display:block;color:#7fc8ff;font-weight:600;letter-spacing:.02em}
.gamehead h1{margin:0;font-size:clamp(1.5rem,4.2vw,2.3rem);line-height:1.05;color:#fff}
.gh-img{flex:none;width:clamp(78px,20vw,112px);aspect-ratio:3/2;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2px #1a8cff,0 6px 18px #0009}
.gh-img img{display:block;width:100%;height:100%;object-fit:cover}
.gphoto.noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 35%,#0f2a63,#030814 70%)}
.gphoto.noimg .gbig{display:block;width:34%;max-width:92px}
.gphoto.noimg .gbig svg{display:block;width:100%;height:auto}
.gphoto.noimg .gname{font-size:clamp(1rem,2.2vw,1.35rem);color:#fff;text-align:center;padding:0 12px}

/* v4.5: el título «Free Fire» del inicio ahora es el logotipo real (solo las letras, sin fondo) */
body.home .hero-copy .kick{line-height:0;text-shadow:none}
body.home .hero-copy .kick .ff-logo{display:block;width:clamp(240px,34vw,560px);height:auto;max-width:100%;margin:0 0 14px;filter:drop-shadow(0 6px 18px #000a) drop-shadow(0 0 22px #1a8cff55)}
@media(max-width:560px){body.home .hero-copy .kick .ff-logo{width:min(78vw,330px)}}
/* usuarios en línea (v5.3): misma altura que los demás botones del encabezado */
body.home .online:not(.strip){height:46px;padding:0 16px;border-radius:12px;box-sizing:border-box}
@media(max-width:760px){body.home .online:not(.strip){height:40px;padding:0 10px}}

/* Redes sociales (sección Soporte): círculos pequeños, glifo blanco de línea, color de marca */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.soc{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid #ffffff2e;box-shadow:0 2px 8px #0006,inset 0 1px 0 #ffffff33;transition:transform .18s,box-shadow .18s,filter .18s}
.soc svg{width:19px;height:19px;display:block}
a.soc:hover,a.soc:focus-visible{transform:translateY(-2px);box-shadow:0 6px 14px #000a,0 0 0 2px #ffffff40;filter:brightness(1.08);outline:0}
a.soc:active{transform:translateY(0)}
.soc.wa{background:#25d366}
.soc.ig{background:linear-gradient(45deg,#f09433,#e6683c 28%,#dc2743 55%,#cc2366 78%,#bc1888)}
.soc.fb{background:#1877f2}
.soc.tg{background:#27a7e7}
.soc.yt{background:#f00}
.soc.tt{background:#111;border-color:#ffffff40}
.soc.off{opacity:.45;filter:grayscale(.35);cursor:default}


/* ===== v6.1 · Diseño compacto: tamaños más ordenados (PC y celular) =====
   Va al final para sobrescribir lo anterior. Para volver al diseño grande, borra este bloque. */

/* encabezado */
body.home .top{padding:8px 20px;gap:10px}
body.home .top .logo{flex:0 0 auto}
body.home .top .brand{height:32px}
body.home .ctry-btn,body.home .lang,body.home .gbtn,body.home .online:not(.strip){height:38px;padding:0 12px;border-radius:10px;font-size:13.5px}
body.home .gbtn img,body.home .gbtn .g{width:22px;height:22px}
body.home .burger{width:38px;height:38px}

/* pestañas de categorías */
body.home .tabs{padding:8px 20px}
body.home .tabs .catbtn{height:42px;padding:0 14px 0 6px;border-radius:10px}
body.home .tabs .catbtn .cimg{width:30px;height:30px;border-radius:8px}
body.home .tabs .catbtn .clabel{gap:8px}
body.home .tabs .catbtn b{font-size:14px}

/* hero */
body.home .hero{grid-template-columns:minmax(0,1fr) minmax(300px,31vw);gap:28px;min-height:clamp(300px,24vw,380px);padding:34px clamp(20px,3vw,48px) 44px}
body.home .hero-copy{margin-top:0;max-width:560px}
body.home .hero-copy .kick .ff-logo{width:clamp(180px,22vw,330px);margin:0 0 10px}
body.home .hero-copy h1{font-size:clamp(22px,2.2vw,34px);margin:0 0 6px}
body.home .hero-copy p{font-size:clamp(13px,1vw,16px)}
body.home .hero-buy{height:44px;padding:0 22px;gap:10px;margin-top:16px;font-size:15px;box-shadow:0 6px 18px #1a8cff55}
body.home .hero-buy .ic{width:20px;height:20px}
body.home .hero-buy b{font-size:18px}
body.home .hero-buy .gem-s{width:24px;height:24px}
body.home .hero-buy.small{height:40px;padding:0 18px;font-size:14px}
body.home .ads-wrap{gap:10px}
body.home .ads{border-radius:14px}
body.home .hnav{width:30px;height:30px;font-size:20px}

/* portales de juegos */
body.home .games{max-width:1040px;padding:22px 20px 0}
.games-grid{gap:14px}
.game{border-radius:13px}
.gphoto{border-radius:11px;aspect-ratio:16/10}
.gpill{height:28px;right:8px;top:8px;padding:0 12px 0 5px;gap:6px;font-size:11px;letter-spacing:.6px}
.gpill .gem{width:20px;height:20px}
.gpill .gem svg{width:12px;height:12px}

/* franja «Juega sin límites» */
body.home .isla{max-width:1000px;width:calc(100% - 40px);height:clamp(70px,8vw,104px);margin-top:16px;border-radius:13px}
body.home .isla em{font-size:clamp(16px,2vw,28px)}
body.home .isla .isla-logo{height:clamp(20px,2.4vw,32px)}

/* top compradores */
body.home .rank{max-width:760px;padding:16px 18px 16px;border-radius:14px}
.rank-head h2{font-size:clamp(15px,1.5vw,19px);letter-spacing:1px}
.rank-head h2 .ic{width:22px;height:19px}
.rank-live{font-size:11px}
.rank-sub{margin:4px 0 12px;font-size:13px}
.rtab{height:34px;font-size:12px;letter-spacing:.6px;border-radius:8px}
.rank-bar{margin:8px 2px 10px}
.rank-list{gap:5px}
.rk{grid-template-columns:28px 34px minmax(0,1fr) auto;gap:10px;padding:6px 12px 6px 10px;border-radius:8px}
.rk .pos{font-size:15px}
.rk .av{width:32px;height:32px;font-size:14px}
.rk .nt{font-size:14px}
.rk .amt{font-size:15px}
.rk .amt .ic{width:16px;height:16px}
.rank-empty{gap:12px;padding:22px 12px}
.rank-empty>b{font-size:15px}
.rank-cta{height:42px;margin-top:14px;font-size:14px;max-width:340px}

/* franja de ventajas */
body.home .feats{max-width:1000px;width:calc(100% - 40px);margin:26px auto;border-radius:14px}
body.home .feats>div{gap:12px;padding:14px 18px}
body.home .feats .fi{width:42px;height:42px;border-radius:12px}
body.home .feats .fi .ic{width:22px;height:22px}
body.home .feats b{font-size:14.5px;margin-bottom:2px}
body.home .feats small{font-size:12.5px}

/* secciones de abajo (Mis pedidos, Cómo comprar, Soporte) y páginas internas */
body.home .content,body.home .sec{max-width:1040px}
body.home .content{padding-top:24px}
body.gamepage .content{max-width:1040px}
.gp-hero{padding:16px;gap:20px;border-radius:14px}
.gp-kick{font-size:clamp(15px,1.5vw,20px)}
.gp-copy h1{font-size:clamp(22px,2.4vw,32px)}
.gp-copy p{font-size:clamp(13px,1vw,15.5px)}
.gp-actions{margin-top:16px;gap:10px}
.gp-back{height:44px;padding:0 18px;font-size:14px}
.gp-actions .hero-buy{height:44px}
.gp-others-h{margin:24px 0 10px;font-size:clamp(15px,1.6vw,18px)}
.gamehead h1{font-size:clamp(1.25rem,3vw,1.8rem)}
.gh-img{width:clamp(64px,16vw,92px)}

/* celular */
@media(max-width:1000px){
  body.home .hero{grid-template-columns:minmax(0,1fr);padding:24px 18px 34px;gap:18px}
  body.home .hero-copy{max-width:none}
  body.home .ads-wrap{max-width:520px;width:100%;justify-self:center}
  body.home .games,body.home .isla,body.home .feats{max-width:none}
}
@media(max-width:760px){
  body.home .top{padding:8px 10px;gap:6px}
  body.home .top .brand{height:26px}
  body.home .ctry-btn,body.home .lang,body.home .gbtn,body.home .online:not(.strip){height:36px;padding:0 8px}
  body.home .burger{width:36px;height:36px}
  body.home .tabs{padding:6px 10px}
  body.home .tabs .catbtn{height:38px;padding:0 10px 0 5px}
  body.home .tabs .catbtn .cimg{width:26px;height:26px}
  body.home .tabs .catbtn b{font-size:12.5px}
  body.home .hero{padding:18px 14px 26px}
  body.home .hero-copy .kick .ff-logo{width:min(56vw,220px);margin-bottom:8px}
  body.home .hero-copy h1{font-size:21px}
  body.home .hero-copy p{font-size:13px}
  body.home .hero-buy{height:40px;font-size:14px;margin-top:12px;padding:0 18px}
  body.home .games{padding:14px 12px 0}
  .games-grid{gap:8px}
  .gpill{height:24px;right:5px;top:5px;font-size:9.5px;padding:0 9px 0 4px;letter-spacing:.3px}
  .gpill .gem{width:17px;height:17px}.gpill .gem svg{width:10px;height:10px}
  body.home .isla{width:calc(100% - 24px);height:64px;margin-top:12px}
  body.home .isla em{font-size:16px}
  body.home .isla .isla-logo{height:18px}
  body.home .rank{padding:12px 10px;margin:0 12px;width:auto}
  .rtab{height:32px;font-size:11px}
  .rk{grid-template-columns:22px 30px minmax(0,1fr) auto;gap:8px;padding:5px 8px}
  .rk .av{width:28px;height:28px;font-size:12px}.rk .nt{font-size:13px}.rk .amt{font-size:13.5px}
  body.home .feats{width:calc(100% - 24px);margin:18px auto}
  body.home .feats>div{padding:12px}
  body.home .feats .fi{width:38px;height:38px}
  body.home .feats b{font-size:13.5px}body.home .feats small{font-size:11.5px}
}