:root{
    --surface:#050505; --surface-raised:#111111; --surface-overlay:#1a1a1a;
    --border-subtle:#262626; --border-default:#3c3c3c; --border-strong:#707070;
    --ink:#ffffff; --ink-muted:#a3a3a3; --ink-faint:#6b6b6b;
    --brand:#cdfd51; --brand-hover:#b4df47; --brand-pressed:#9cc03e; --on-brand:#0a0a0a;
    --focus-ring:#cdfd51; --danger:#ff5c5c; --success:#35d07f;
    --font-display:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; --font-sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
    --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-full:9999px;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
    --shadow-card:0 1px 2px rgba(0,0,0,0.6); --shadow-overlay:0 8px 24px rgba(0,0,0,0.7); --shadow-glow:0 0 24px rgba(205,253,81,0.45);
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--surface);font-family:var(--font-sans);color:var(--ink);}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
  a{color:var(--brand);text-decoration:none;}
  a:hover{color:var(--brand-hover);}
  input{font-family:inherit;}
  .scroll-row{scrollbar-width:none;-ms-overflow-style:none;}
  .scroll-row::-webkit-scrollbar{display:none;}
  .btn-primary{background:var(--brand);color:var(--on-brand);border-radius:var(--radius-md);}
  .btn-primary:hover{background:var(--brand-hover);}
  .btn-primary:active{background:var(--brand-pressed);}
  .btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-md);}
  .btn-secondary:hover{border-color:var(--ink);}
  /* boton teñido con el color del juego: el brillo sustituye al cambio de color en hover */
  .btn-accent{border:none;border-radius:var(--radius-md);transition:background .4s ease,color .4s ease,filter .2s ease;}
  .btn-accent:hover{filter:brightness(1.14);}
  .btn-accent:active{filter:brightness(0.9);}
  .btn-accent:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
  .pill{background:var(--surface-raised);color:var(--ink);border:1px solid var(--border-subtle);}
  .pill-active{background:var(--brand);color:var(--on-brand);border:1px solid var(--brand);}
  .icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--ink);flex-shrink:0;}
  .icon-btn:hover{background:var(--surface-raised);}

  /* relieve 3D unicamente en la lupa del encabezado */
  .hdr-search > .icon-btn{
    background:linear-gradient(145deg,#6e7276 0%,#4e5255 100%);
    box-shadow:4px 5px 11px rgba(0,0,0,0.70), -3px -3px 9px rgba(255,255,255,0.10),
               inset 0 2px 3px rgba(255,255,255,0.30), inset 0 -3px 5px rgba(0,0,0,0.35);
    transition:box-shadow .22s ease, transform .18s ease, background .22s ease;
  }
  .hdr-search > .icon-btn:hover{
    background:linear-gradient(145deg,#7b7f83 0%,#55595d 100%);
    box-shadow:5px 6px 13px rgba(0,0,0,0.75), -3px -3px 10px rgba(255,255,255,0.13),
               inset 0 2px 3px rgba(255,255,255,0.34), inset 0 -3px 5px rgba(0,0,0,0.35);
  }
  .hdr-search > .icon-btn:active{
    transform:translateY(1px);
    background:linear-gradient(145deg,#4e5255 0%,#6e7276 100%);
    box-shadow:inset 4px 4px 9px rgba(0,0,0,0.55), inset -3px -3px 8px rgba(255,255,255,0.14);
  }

  /* --- relieve 3D (neumorfismo) para las pastillas de categoria --- */
  /* paleta TRAXION: superficie gris con luz arriba-izquierda y sombra abajo-derecha */
  /* categorias: gris en relieve con texto lima; la activa invierte a lima con texto gris */
  /* Flechas del carrusel: debajo de las tarjetas, nunca encima de las portadas */
  /* Paginacion numerada del carrusel: cuadros redondeados en gris con el
     numero en verde lima. El activo se invierte y marca un punto debajo. */
  .feat-nav{display:flex;justify-content:center;align-items:flex-start;gap:12px;padding:var(--space-4) var(--space-6) calc(var(--space-4) + 10px);background:#050505;}
  .feat-pg{position:relative;display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:13px;border:none;cursor:pointer;flex-shrink:0;
    font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1;
    color:var(--brand);
    background:radial-gradient(circle at 72% 78%, #7d8184 0%, #686c70 28%, #53565a 55%, #3a3d40 80%, #2b2e31 100%);
    box-shadow:0 6px 14px rgba(0,0,0,0.55),inset -3px -4px 8px rgba(255,255,255,0.16),inset 4px 5px 10px rgba(0,0,0,0.55);
    transition:transform .18s ease,box-shadow .22s ease,background .22s ease,color .22s ease;}
  .feat-pg:hover{background:radial-gradient(circle at 72% 78%, #8d9195 0%, #767a7e 28%, #5f6367 55%, #44474a 80%, #313437 100%);}
  .feat-pg:active{transform:translateY(1px);box-shadow:inset 5px 6px 12px rgba(0,0,0,0.6),inset -3px -3px 8px rgba(255,255,255,0.12);}
  .feat-pg:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
  .feat-pg[data-on="1"]{color:#0a0a0a;
    background:radial-gradient(circle at 50% 38%, #e8f58f 0%, #d9e65e 45%, #c6d442 100%);
    box-shadow:0 8px 18px rgba(0,0,0,0.6),0 0 22px rgba(205,253,81,0.35),inset -2px -3px 7px rgba(0,0,0,0.25),inset 3px 4px 9px rgba(255,255,255,0.35);}
  .feat-pg::after{content:"";position:absolute;left:50%;top:calc(100% + 8px);
    width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#cdfd51;
    opacity:0;transform:scale(0.3);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.3,1);}
  .feat-pg[data-on="1"]::after{opacity:1;transform:scale(1);}
  /* --- Pantalla de carga: fondo negro y el texto "cargando ..." con brillo que lo recorre --- */
  .loadscreen{
    position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
    background:#050505;opacity:1;transition:opacity .55s ease;
  }
  .loadscreen.is-out{opacity:0;pointer-events:none;}
  .load-line{
    font-family:var(--font-sans);font-weight:600;font-size:17px;letter-spacing:0.01em;
    display:flex;gap:7px;align-items:baseline;padding:0 24px;text-align:center;
  }
  .load-word-a{color:#f4f1e4;opacity:.92;}
  /* el brillo es un degradado recortado al texto que se desplaza de izquierda a derecha */
  .load-word-b{
    font-weight:700;color:#cdfd51;
    background:linear-gradient(100deg,#cdfd51 0%,#cdfd51 34%,#ffffff 50%,#cdfd51 66%,#cdfd51 100%);
    background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:load-shine 2.2s linear infinite;
    text-shadow:0 0 18px rgba(205,253,81,0.28);
  }
  @keyframes load-shine{from{background-position:140% 0;}to{background-position:-40% 0;}}
  /* chispa tenue arriba, como en la referencia */
  .load-spark{position:absolute;top:22%;left:50%;width:6px;height:6px;border-radius:50%;
    background:#b06bff;box-shadow:0 0 14px 4px rgba(176,107,255,0.55);animation:load-spark 3.4s ease-in-out infinite;}
  @keyframes load-spark{0%,100%{opacity:.35;transform:translateX(-50%) scale(.85);}50%{opacity:1;transform:translateX(-50%) scale(1.15);}}
  @media (max-width: 640px){ .load-line{font-size:15px;} }
  @media (prefers-reduced-motion: reduce){ .load-word-b,.load-spark{animation:none;} }
  @property --mnav-ang{syntax:'<angle>';initial-value:0deg;inherits:false;}
  /* --- Palabra de marca con relleno que sigue al cursor --- */
  .thx-sec{background:#050505;padding:0 16px;line-height:0;}
  .thx{display:block;width:100%;max-width:1180px;margin:0 auto;height:auto;cursor:crosshair;}
  .thx text{font-family:var(--font-display);font-weight:900;letter-spacing:0.02em;}
  .thx-base{fill:transparent;stroke:rgba(255,255,255,0.20);stroke-width:0.6;
            stroke-dasharray:1200;stroke-dashoffset:1200;
            animation:thx-draw 2.6s cubic-bezier(.25,.8,.3,1) .4s forwards;}
  @keyframes thx-draw{to{stroke-dashoffset:0;}}
  .thx-fill{fill:transparent;stroke-width:0.6;opacity:1;}
  @media (prefers-reduced-motion: reduce){ .thx-base{animation:none;stroke-dashoffset:0;} }
  /* ===== Ficha de juego a pantalla completa (misma estructura del artboard Ficha de Juego) ===== */

  /* ===== Ficha de producto: recorrido cinematografico dentro de la tienda =====
     Misma estructura del artboard "Descripcion de Producto" (inspirada en el
     paquete NEXUS). Se alimenta del juego que el comprador abrio, asi que el
     contenido cambia con cada producto. */
  .gpv{position:fixed;inset:0;z-index:500;overflow-y:auto;overflow-x:clip;background:#060708;
       color:#f3f4f0;-webkit-font-smoothing:antialiased;}
  .gpv *{box-sizing:border-box;}
  .gpv button{border:0;background:none;color:inherit;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;}
  .gv{--gvlime:#cdfd51;--gvink:#f3f4f0;--gvink2:#b7bcb8;--gvink3:#848a86;--gvgray:#626669;
      --gvacc:#cdfd51;--gvgut:clamp(22px,4.5vw,84px);--gvhdr:72px;
      --gvdisp:'Anton','Arial Narrow',Impact,var(--font-sans);position:relative;}

  /* barra superior de la ficha */
  .gv-bar{position:sticky;top:0;z-index:40;height:72px;display:flex;align-items:center;
    justify-content:space-between;gap:16px;padding:0 var(--gvgut);
    border-bottom:1px solid rgba(255,255,255,0.12);
    background:linear-gradient(180deg,rgba(6,7,8,0.9),rgba(6,7,8,0.4) 70%,transparent);backdrop-filter:blur(10px);}
  .gv-back{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 0;font-size:11px;font-weight:800;
    letter-spacing:0.09em;color:#d6dad5;transition:color .2s;}
  .gv-back:hover{color:var(--gvlime);}
  .gv-bkw{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .gv-bname{flex:0 1 auto;font-family:var(--gvdisp);font-size:16px;letter-spacing:0.01em;text-transform:uppercase;
    color:var(--gvlime);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw;}
  .gv-cart{flex:0 0 auto;background:var(--gvlime);color:#0a0a0a;font-size:11px;font-weight:800;
    letter-spacing:0.11em;padding:13px 24px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s;}
  .gv-cart:hover{background:var(--gvgray);color:var(--gvlime);}

  /* escenario */
  .gv-cine{position:relative;margin-top:calc(-1 * var(--gvhdr));}
  .gv-pin{position:sticky;top:0;height:100vh;min-height:420px;overflow:hidden;background:#07090a;}
  .gv-cv{position:absolute;inset:0;width:100%;height:100%;display:block;}
  .gv-shade{position:absolute;inset:0;pointer-events:none;z-index:2;
    background:linear-gradient(90deg,rgba(2,4,5,0.62),rgba(2,4,5,0.06) 66%),
               linear-gradient(0deg,rgba(2,4,5,0.86),transparent 26%,transparent 72%,rgba(2,4,5,0.55));}
  .gv-fr{position:absolute;left:0;right:0;height:13px;background:rgba(0,0,0,0.55);pointer-events:none;z-index:3;}
  .gv-fr-t{top:0;} .gv-fr-b{bottom:0;}
  .gv-copy{position:absolute;inset:0;z-index:6;pointer-events:none;}
  .gv-title{position:absolute;left:var(--gvgut);right:140px;top:50%;transform:translateY(-44%);will-change:opacity,transform;}
  .gv-eye{font-size:10px;letter-spacing:0.26em;text-transform:uppercase;line-height:1.8;color:var(--gvacc);
    display:flex;gap:14px;align-items:center;margin:0;}
  .gv-line{width:36px;height:1px;background:currentColor;flex:none;}
  .gv-title h1{font-family:var(--gvdisp);font-size:clamp(44px,7vw,120px);letter-spacing:0.004em;font-weight:400;
    line-height:0.94;margin:20px 0;text-transform:uppercase;text-shadow:0 3px 26px rgba(0,0,0,0.6);}
  .gv-title h1 span{display:block;}
  .gv-title h1 span+span{margin-top:7px;}
  .gv-title h1 span.gv-hl{display:inline-block;background:var(--gvlime);color:#0a0a0a;
    padding:0.035em 0.16em 0.075em;margin-left:-0.05em;text-shadow:none;}
  .gv-intro{font-size:clamp(12px,1vw,16px);line-height:1.75;color:#e4e6e0;max-width:430px;margin:0;}
  .gv-exp{display:flex;align-items:center;gap:13px;margin-top:28px;padding:0;font-size:9px;letter-spacing:0.2em;pointer-events:auto;}
  .gv-ca{display:grid;place-items:center;border:1px solid rgba(255,255,255,0.45);border-radius:50%;height:38px;width:38px;font-size:18px;transition:background .2s,border-color .2s,transform .2s;}
  .gv-exp:hover .gv-ca{background:rgba(205,253,81,0.12);border-color:var(--gvlime);transform:translateY(3px);}
  .gv-detail{position:absolute;left:var(--gvgut);bottom:21%;max-width:660px;opacity:0;will-change:transform,opacity;}
  .gv-detail h2{font-family:var(--gvdisp);font-size:clamp(30px,4vw,60px);font-weight:400;letter-spacing:0.004em;
    line-height:1.04;margin:16px 0;text-transform:uppercase;}
  .gv-detail h2 span{background:var(--gvlime);color:#0a0a0a;padding:0.03em 0.15em 0.07em;}
  .gv-dx{font-size:15px;line-height:1.75;max-width:440px;color:#e0e4e1;margin:0;}
  .gv-buy{display:flex;align-items:center;gap:16px;margin-top:24px;pointer-events:auto;flex-wrap:wrap;}
  .gv-price{font-size:9px;letter-spacing:0.22em;color:var(--gvink3);}
  .gv-price b{display:block;font-size:23px;color:var(--gvink);font-weight:800;margin-top:3px;}
  .gv-cta{background:var(--gvlime);color:#0a0a0a;font-size:11px;font-weight:800;letter-spacing:0.12em;
    padding:14px 22px;border-radius:999px;transition:background .2s,color .2s;}
  .gv-cta:hover{background:var(--gvgray);color:var(--gvlime);}
  .gv-rail{position:absolute;z-index:20;right:var(--gvgut);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:20px;}
  .gv-rail button{display:flex;align-items:center;justify-content:flex-end;gap:13px;color:#a4aba7;padding:6px 0;font-size:10px;letter-spacing:0.08em;min-width:44px;}
  .gv-rail button:after{content:'';height:1px;width:14px;background:currentColor;transition:width .25s;}
  .gv-rail button[data-on="1"]{color:var(--gvacc);}
  .gv-rail button[data-on="1"]:after{width:34px;}
  .gv-foot{position:absolute;z-index:10;left:var(--gvgut);right:var(--gvgut);bottom:30px;display:flex;align-items:center;justify-content:space-between;gap:18px;pointer-events:none;}
  .gv-loc,.gv-pc{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:0.22em;}
  .gv-lm{color:var(--gvacc);font-size:20px;line-height:1;}
  .gv-cue{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:11px;font-size:8px;letter-spacing:0.22em;white-space:nowrap;color:#e3e5e0;}
  .gv-cl{width:1px;height:26px;background:linear-gradient(transparent,var(--gvacc));animation:gv-pulse 2s ease-in-out infinite;}
  .gv-pc i{height:1px;width:38px;background:rgba(255,255,255,0.33);}
  .gv-tot{color:var(--gvink3);}
  @keyframes gv-pulse{0%,100%{opacity:.3;transform:scaleY(.75);transform-origin:top;}50%{opacity:1;transform:scaleY(1);}}

  /* carrusel 3D de otros juegos */
  .gv-rel{position:relative;background:#090a0b;border-top:1px solid rgba(255,255,255,0.12);}
  .gv-relpin{position:sticky;top:0;height:100vh;min-height:420px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--gvhdr) + 96px) 0 64px;}
  .gv-relhd{position:absolute;top:calc(var(--gvhdr) + 24px);left:var(--gvgut);right:var(--gvgut);z-index:6;pointer-events:none;}
  .gv-relhd h2{font-family:var(--gvdisp);font-size:clamp(26px,3vw,46px);line-height:1.1;font-weight:400;letter-spacing:0.004em;margin:12px 0 0;text-transform:uppercase;}
  .gv-relhd h2 span{background:var(--gvlime);color:#0a0a0a;padding:0.03em 0.15em 0.07em;}
  .gv-stage{position:relative;z-index:4;perspective:1500px;}
  .gv-track{display:flex;align-items:center;gap:clamp(26px,3vw,56px);transform-style:preserve-3d;will-change:transform;}
  .gv-rc{position:relative;flex:0 1 auto;flex-basis:clamp(220px,23vw,340px);transform-style:preserve-3d;will-change:transform,opacity;text-align:left;padding:0;}
  .gv-rcim{display:block;position:relative;overflow:hidden;border-radius:6px;height:clamp(230px,38vh,410px);background:#141b20;
    box-shadow:0 36px 80px rgba(0,0,0,0.65),0 0 0 1px rgba(255,255,255,0.07) inset;}
  .gv-rcim img{display:block;width:100%;height:100%;object-fit:cover;}
  .gv-rcn{position:absolute;left:14px;top:13px;font-size:10px;letter-spacing:0.18em;text-shadow:0 1px 10px #000;}
  .gv-rcar{position:absolute;bottom:14px;right:14px;border:1px solid rgba(255,255,255,0.4);background:rgba(0,0,0,0.4);height:36px;width:36px;display:grid;place-items:center;border-radius:50%;font-size:16px;transition:background .25s,color .25s;}
  .gv-rc:hover .gv-rcar{background:var(--gvlime);color:#0a0a0a;}
  .gv-rcc{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 2px 0;}
  .gv-rcc strong{font-family:var(--gvdisp);font-size:clamp(14px,1.3vw,21px);letter-spacing:0.01em;font-weight:400;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,0.85);}
  .gv-rcc small{font-size:9px;color:#9aa39f;letter-spacing:0.08em;white-space:nowrap;}
  .gv-relft{position:absolute;bottom:26px;left:var(--gvgut);right:var(--gvgut);z-index:6;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:8px;letter-spacing:0.2em;color:#9ea39f;}
  .gv-relbar{flex:1;max-width:340px;height:1px;background:rgba(255,255,255,0.16);position:relative;}
  .gv-relbar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--gvlime);display:block;}

  /* bloques de ficha */
  .gv-sec{position:relative;z-index:12;background:#090a0b;padding:clamp(60px,8vh,104px) var(--gvgut) 0;}
  .gv-in{max-width:1180px;margin:0 auto;}
  .gv-kick{font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:var(--gvlime);margin:0 0 12px;}
  .gv-h{font-family:var(--gvdisp);font-size:clamp(24px,2.9vw,40px);font-weight:400;letter-spacing:0.004em;line-height:1.14;margin:0;text-transform:uppercase;}
  .gv-h span{background:var(--gvlime);color:#0a0a0a;padding:0.03em 0.15em 0.07em;}
  .gv-lead{font-size:clamp(13px,1.1vw,17px);line-height:1.7;color:var(--gvink2);margin:16px 0 0;max-width:720px;}
  .gv-specs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px;}
  .gv-sp{background:#101112;border:1px solid rgba(255,255,255,0.09);border-radius:16px;padding:24px 24px 8px;}
  .gv-sp.is-rec{border-color:rgba(205,253,81,0.42);}
  .gv-sp h3{font-size:13px;font-weight:800;letter-spacing:0.1em;color:var(--gvlime);margin:0;}
  .gv-spn{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gvink3);margin:6px 0 18px;}
  .gv-row{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid rgba(255,255,255,0.08);}
  .gv-row:first-of-type{border-top:0;}
  .gv-row dt{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gvink3);margin:0;}
  .gv-row dd{font-size:14px;line-height:1.5;color:var(--gvink);margin:0;}
  .gv-warn{display:flex;gap:14px;margin-top:20px;font-size:12px;line-height:1.75;color:var(--gvink3);}
  .gv-warn:before{content:"";width:2px;flex:none;background:rgba(205,253,81,0.45);border-radius:2px;}
  .gp-vid{opacity:1;z-index:1;}
  .gp-play{width:38px;height:38px;flex:0 0 auto;transition:transform .2s ease,box-shadow .2s ease;}
  .gp-play:hover{transform:scale(1.08);}
  .gp-play:active{transform:scale(.94);}
  @media (max-width:640px){ .gp-play{width:34px;height:34px;} }
  .gv-g4{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;}
  .gv-ic.is-wide{grid-column:1 / -1;}
  .gv-lead{max-width:760px;margin:22px 0 0;font-size:15px;line-height:1.85;color:var(--gvink2);}
  .gv-lead + .gv-lead{margin-top:14px;}
  .gv-lead strong{color:var(--gvink);font-weight:600;}
  .gv-sub{margin:30px 0 0;font-size:11px;font-weight:800;letter-spacing:0.18em;color:var(--gvlime);}
  .gv-ic{background:#101112;border:1px solid rgba(255,255,255,0.09);border-radius:16px;padding:22px;}
  .gv-tick{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(205,253,81,0.14);color:var(--gvlime);font-size:16px;margin-bottom:14px;}
  .gv-ic h4{font-size:14px;font-weight:700;margin:0 0 8px;}
  .gv-ic p{font-size:13px;line-height:1.7;color:var(--gvink2);margin:0;}
  .gv-rate{font-family:var(--gvdisp);font-size:clamp(22px,2.7vw,36px);font-weight:400;letter-spacing:0.004em;margin:0;text-transform:uppercase;}
  .gv-rate span{background:var(--gvlime);color:#0a0a0a;padding:0.03em 0.15em 0.07em;}
  .gv-revs{display:grid;gap:14px;margin-top:26px;}
  .gv-rvc{background:#101112;border:1px solid rgba(255,255,255,0.09);border-radius:16px;padding:20px 22px;}
  .gv-rvt{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;}
  .gv-stars{color:var(--gvlime);font-size:14px;letter-spacing:0.14em;}
  .gv-date{font-size:12px;color:var(--gvink3);}
  .gv-rvc p{font-size:14px;line-height:1.7;margin:0 0 10px;}
  .gv-who{font-size:13px;font-weight:700;}
  .gv-note{font-size:11px;line-height:1.7;color:var(--gvink3);margin:14px 0 0;}
  .gv-close{position:relative;overflow:hidden;border-radius:20px;margin-top:36px;border:1px solid rgba(255,255,255,0.09);}
  .gv-closebg{position:absolute;inset:0;}
  .gv-closebg img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;}
  .gv-closebg:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,9,10,0.95) 28%,rgba(8,9,10,0.62));}
  .gv-closein{position:relative;z-index:2;padding:clamp(26px,4vw,42px);}
  .gv-closep{font-family:var(--gvdisp);font-size:clamp(24px,3vw,40px);font-weight:400;margin:0;}
  .gv-closep span{background:var(--gvlime);color:#0a0a0a;padding:0.03em 0.15em 0.07em;}
  .gv-closel{font-size:13px;line-height:1.7;color:var(--gvink2);margin:12px 0 24px;max-width:560px;}
  .gv-cartbig{display:block;width:100%;max-width:520px;background:var(--gvlime);color:#0a0a0a;font-size:13px;font-weight:800;letter-spacing:0.12em;padding:18px;border-radius:999px;transition:background .2s,color .2s;}
  .gv-cartbig:hover{background:var(--gvgray);color:var(--gvlime);}
  .gv-end{position:relative;z-index:12;background:#090a0b;padding:0 var(--gvgut) 28px;}
  .gv-endin{border-top:1px solid rgba(255,255,255,0.12);padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:8px;letter-spacing:0.18em;color:#aeb2ad;}
  .gv-cr{font-size:10px;color:#8b9391;line-height:1.8;margin-top:20px;max-width:760px;}
  /* entran al asomar; visibles por defecto si el guion no corre */
  .gv.js-rv .gv-rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.3,1);}
  .gv.js-rv .gv-rv.is-in{opacity:1;transform:none;}

  @media (max-width:860px){ .gv-specs,.gv-g4{grid-template-columns:1fr;} .gv-row{grid-template-columns:94px 1fr;} }
  @media (max-width:720px){
    .gv{--gvgut:22px;}
    .gv-bar{height:64px;} .gv-back{font-size:9px;} .gv-bname{font-size:13px;max-width:30vw;}
    .gv-cart{font-size:9px;padding:11px 15px;letter-spacing:0.07em;}
    .gv-title{left:22px;right:46px;} .gv-title h1{font-size:clamp(34px,10vw,64px);}
    .gv-intro{font-size:12px;max-width:250px;}
    .gv-rail{right:12px;gap:13px;} .gv-rail button{font-size:8px;gap:6px;min-width:26px;}
    .gv-detail{right:46px;bottom:24%;} .gv-detail h2{font-size:30px;} .gv-dx{font-size:12px;max-width:280px;}
    .gv-rc{flex-basis:68vw;} .gv-rcim{height:44vh;}
    .gv-relhd h2{font-size:25px;}
  }
  @media (max-width:470px){ .gv-bkw{display:none;} .gv-back{flex:0 1 auto;} }
  @media (prefers-reduced-motion:reduce){ .gv-cl{animation:none;} }

  .cat-pills .pill{
    background:linear-gradient(145deg,#64686c 0%,#44484b 100%) !important;
    color:var(--brand) !important;
    border:none !important;
    text-shadow:0 1px 1px rgba(0,0,0,0.45);
    box-shadow:4px 5px 11px rgba(0,0,0,0.70), -3px -3px 9px rgba(255,255,255,0.09),
               inset 0 2px 3px rgba(255,255,255,0.26), inset 0 -3px 5px rgba(0,0,0,0.38);
    transition:box-shadow .22s ease, transform .18s ease, background .22s ease, color .22s ease;
  }
  .cat-pills .pill:hover{background:linear-gradient(145deg,#72767a 0%,#4c5053 100%) !important;}
  .cat-pills .pill:active{
    transform:translateY(1px);
    box-shadow:inset 4px 4px 9px rgba(0,0,0,0.55), inset -3px -3px 8px rgba(255,255,255,0.12);
  }
  .cat-pills .pill-active{
    background:linear-gradient(145deg,#e4ef7e 0%,#bcc93c 100%) !important;
    color:#3f4346 !important;
    border:none !important;
    text-shadow:0 1px 0 rgba(255,255,255,0.40);
    box-shadow:4px 5px 12px rgba(0,0,0,0.65), -3px -3px 9px rgba(255,255,255,0.12),
               inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -3px 5px rgba(0,0,0,0.22);
  }
  .cat-pills .pill-active:active{
    transform:translateY(1px);
    box-shadow:inset 4px 4px 9px rgba(0,0,0,0.28), inset -3px -3px 8px rgba(255,255,255,0.45);
  }
  @media (prefers-reduced-motion: reduce){
    .cat-pills .pill,.cat-pills .pill-active{transition:none;}
  }
  button, a, input, [role="button"]{-webkit-tap-highlight-color:transparent;}
  button:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
  .btn-primary:focus-visible{box-shadow:var(--shadow-glow);}
  /* Comprar del hero y de lanzamientos: al pasar el cursor se invierte a gris con texto lima */
  .hero-info .btn-primary:hover,
  .banner-overlay .btn-primary:hover{background:#626669;color:#d2df49;}
  .hero-info .btn-primary:active,
  .banner-overlay .btn-primary:active{background:#55595c;color:#d2df49;}
  /* Agregar al carrito: lima con texto negro; la tarjeta elegida lo muestra en gris con texto lima */
  .tile-buy{transition:background .25s ease,color .25s ease;}
  .tile-buy:hover{background:#626669 !important;color:#d2df49 !important;}
  .tile-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  @keyframes catalog-reel-scroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,-50%,0);}}
  .catalog-reel{animation:catalog-reel-scroll 45s linear infinite;will-change:transform;}
  .game-card{transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .3s ease;will-change:transform;}
  /* estuche: lomo a la izquierda, canto grueso a la derecha y brillo de plastico */
  .game-case{position:relative;overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),
               inset -7px 0 16px rgba(0,0,0,0.5),
               inset 0 -12px 20px rgba(0,0,0,0.38);}
  .game-case::before{content:"";position:absolute;top:0;bottom:0;left:0;width:12px;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0.38) 0%,rgba(255,255,255,0.12) 20%,rgba(0,0,0,0.30) 46%,rgba(0,0,0,0.62) 74%,rgba(0,0,0,0.22) 100%);
    border-right:1px solid rgba(0,0,0,0.55);}
  .game-case::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(116deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.05) 20%,rgba(255,255,255,0) 40%),
               linear-gradient(270deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 8%);}
  @keyframes logo-word-breathe{
    0%,100%{text-shadow:0 0 8px rgba(205,253,81,0.35), 0 0 20px rgba(205,253,81,0.18);}
    50%{text-shadow:0 0 14px rgba(205,253,81,0.65), 0 0 32px rgba(205,253,81,0.35);}
  }
  .logo-word{position:relative;text-shadow:0 0 8px rgba(205,253,81,0.35), 0 0 20px rgba(205,253,81,0.18);animation:logo-word-breathe 3.6s ease-in-out infinite;}

  /* Botón de suscripción: flecha negra sobre el lima, y blanca al presionar */
  /* ===== Suscríbete: panel gris con relieve suave (paleta TRAXION) ===== */
  .sub-panel{--sub-gray:#626669;--sub-lime:#d2df49;background:var(--sub-gray);border-radius:26px;padding:var(--space-5) var(--space-6);box-shadow:10px 10px 24px rgba(0,0,0,0.55), -8px -8px 20px rgba(255,255,255,0.05);}
  .sub-title{font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:0.08em;color:var(--sub-lime);margin-bottom:6px;text-shadow:1px 1px 1px rgba(0,0,0,0.35);}
  .sub-copy{font-size:12px;line-height:17px;color:var(--sub-lime);opacity:.88;max-width:46ch;}
  .sub-field{position:relative;display:flex;align-items:center;flex-grow:1;min-width:0;border-radius:var(--radius-full);background:var(--sub-gray);box-shadow:inset 6px 6px 12px rgba(0,0,0,0.45), inset -6px -6px 12px rgba(255,255,255,0.09);transition:box-shadow .25s ease;}
  .sub-field:focus-within{box-shadow:inset 6px 6px 12px rgba(0,0,0,0.5), inset -6px -6px 12px rgba(255,255,255,0.10), 0 0 0 2px var(--sub-lime);}
  .sub-ico{flex-shrink:0;width:16px;height:16px;margin-left:16px;color:var(--sub-lime);opacity:.75;transition:opacity .25s ease;}
  .sub-field:focus-within .sub-ico{opacity:1;}
  .sub-input{flex-grow:1;min-width:0;border:none;outline:none;background:transparent;color:var(--sub-lime);font-family:inherit;font-size:13px;padding:13px 16px 13px 10px;}
  .sub-input::placeholder{color:var(--sub-lime);opacity:.6;}
  .btn-sub{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:none;cursor:pointer;border-radius:50%;background:linear-gradient(145deg,#e0ec6e,#bcc93c);color:#3f4346;box-shadow:6px 6px 13px rgba(0,0,0,0.45), -5px -5px 12px rgba(255,255,255,0.10), inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 5px rgba(0,0,0,0.2);transition:box-shadow .2s ease,transform .2s ease,background .2s ease,color .2s ease;}
  .btn-sub:hover{background:linear-gradient(145deg,#e9f58a,#c7d64a);transform:translateY(-1px);}
  .btn-sub:focus-visible{outline:2px solid var(--sub-lime);outline-offset:3px;}
  .btn-sub:active{transform:translateY(1px);background:linear-gradient(145deg,#4e5255,#6e7276);color:var(--sub-lime, #d2df49);box-shadow:inset 5px 5px 10px rgba(0,0,0,0.5), inset -4px -4px 9px rgba(255,255,255,0.12);}
  /* Contador en vivo: mismo relieve hundido que el campo de suscripción */
  .live-chip{--sub-gray:#626669;--sub-lime:#d2df49;background:var(--sub-gray);box-shadow:inset 6px 6px 12px rgba(0,0,0,0.45), inset -6px -6px 12px rgba(255,255,255,0.09);}
  .live-chip .live-tag{color:var(--sub-lime);opacity:.75;}
  .live-chip .live-num{color:var(--sub-lime);text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
  .live-chip .live-lbl{color:var(--sub-lime);}

  /* Redes sociales del pie: cada enlace toma el color de su plataforma al pasar el cursor */
  .foot-link{color:var(--ink-faint);transition:color .2s ease;}
  .foot-link:hover,.foot-link:focus-visible{color:var(--brand);}
  .foot-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px;}
  .soc-link{border:1px solid var(--border-default);color:var(--ink);transition:border-color .22s ease,color .22s ease,background .22s ease,transform .22s ease;}
  .soc-link:hover,.soc-link:focus-visible{border-color:var(--brand);color:var(--on-brand);background:var(--brand);transform:translateY(-2px);box-shadow:0 0 14px rgba(205,253,81,0.45);}
  .soc-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
  .soc-ico{width:18px;height:18px;object-fit:contain;filter:invert(1);opacity:0.9;transition:opacity .22s ease,filter .22s ease;}
  .soc-link:hover .soc-ico,.soc-link:focus-visible .soc-ico{opacity:1;filter:none;}

  /* Selector de moneda */
  .cur-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:264px;max-height:320px;overflow-y:auto;background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);padding:6px;}
  /* buscador del encabezado: se abre desde la lupa, pegado al borde izquierdo */
  .search-pop{left:0;right:auto;width:min(92vw,430px);max-height:420px;}
  .search-input{flex-grow:1;min-width:0;background:transparent;border:none;outline:none;color:var(--ink);font-size:14px;padding:8px 0;}
  .search-input::placeholder{color:var(--ink-faint);}
  .search-hit{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:background .18s ease;}
  .search-hit:hover{background:var(--surface-overlay);}
  /* boton de cerrar en la esquina de cada panel del encabezado */
  .cur-menu{position:absolute;}
  .pop-x{position:absolute;top:8px;right:8px;z-index:4;width:26px;height:26px;display:flex;align-items:center;
         justify-content:center;border:1px solid var(--border-subtle);border-radius:50%;background:var(--surface);
         color:var(--ink-faint);cursor:pointer;padding:0;transition:color .2s ease,border-color .2s ease,background .2s ease;}
  .pop-x:hover{color:var(--brand);border-color:var(--brand);background:var(--surface-overlay);}
  .pop-x:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
  .cur-menu::-webkit-scrollbar{width:8px;}
  .cur-menu::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-full);}
  .cur-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:background .18s ease;}
  .cur-item:hover{background:var(--surface-overlay);}
  .cur-flag{width:22px;height:22px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;}

  /* Halo del panel del hero: luz de ambiente con el color dominante del juego */
  @keyframes hero-aura-breathe{0%,100%{opacity:0.5;}50%{opacity:1;}}
  .hero-aura{position:absolute;inset:-1px;border-radius:var(--radius-lg);pointer-events:none;filter:blur(7px);animation:hero-aura-breathe 4.5s ease-in-out infinite;}
  @media (prefers-reduced-motion: reduce){.hero-aura{animation:none;opacity:0.75;}}

  /* Rejilla de catálogo estilo tienda de claves */
  .shop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);}
  /* --- Resplandor de colores en la orilla de la tarjeta, solo al pasar el cursor ---
     La tarjeta recorta lo que se sale (overflow:hidden), asi que el aro va POR DENTRO del borde,
     recortado con mascara, y el halo exterior se hace con box-shadow, que no se recorta. */
  @keyframes shop-glow-pan{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
  @keyframes shop-glow-halo{
    0%,100%{box-shadow:0 0 0 1px rgba(205,253,81,0.55), 0 0 26px rgba(205,253,81,0.38), 0 0 60px rgba(205,253,81,0.16);}
    25%{box-shadow:0 0 0 1px rgba(25,201,224,0.55), 0 0 26px rgba(25,201,224,0.38), 0 0 60px rgba(25,201,224,0.16);}
    50%{box-shadow:0 0 0 1px rgba(155,75,255,0.55), 0 0 26px rgba(155,75,255,0.38), 0 0 60px rgba(155,75,255,0.16);}
    75%{box-shadow:0 0 0 1px rgba(255,95,210,0.55), 0 0 26px rgba(255,95,210,0.38), 0 0 60px rgba(255,95,210,0.16);}
  }
  .shop-card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;
    z-index:6;pointer-events:none;opacity:0;transition:opacity .3s ease;
    padding:2px;
    background:radial-gradient(circle farthest-side at 0 100%,#cdfd51,transparent),
               radial-gradient(circle farthest-side at 100% 0,#19c9e0,transparent),
               radial-gradient(circle farthest-side at 100% 100%,#9b4bff,transparent),
               radial-gradient(circle farthest-side at 0 0,#ff5fd2,#0a0a0a);
    background-size:400% 400%;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
  }
  .shop-card:hover::after,
  .shop-card:focus-within::after{opacity:1;animation:shop-glow-pan 7s ease infinite;}
  .shop-card:hover,
  .shop-card:focus-within{animation:shop-glow-halo 7s ease infinite;}
  @media (prefers-reduced-motion: reduce){
    .shop-card::after{animation:none !important;}
    .shop-card:hover,.shop-card:focus-within{animation:none !important;}
  }
  .shop-card{position:relative;display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s ease,box-shadow .25s ease;}
  /* Al pasar el cursor, la toma en movimiento cubre la tarjeta completa durante 10 s en bucle */
  @keyframes shop-reel-pan{
    0%{transform:scale(1.18) translate3d(-4%,-2%,0);}
    50%{transform:scale(1.3) translate3d(4%,3%,0);}
    100%{transform:scale(1.18) translate3d(-4%,-2%,0);}
  }
  .shop-reel{position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s;overflow:hidden;background:#000;pointer-events:none;}
  .shop-card:hover .shop-reel,.shop-card:focus-within .shop-reel,.shop-card.is-live .shop-reel{opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s linear 0s;}
  .shop-reel img,.shop-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:shop-reel-pan 10s ease-in-out infinite;animation-play-state:paused;}
  .shop-card:hover .shop-reel img,.shop-card:hover .shop-reel video,.shop-card:focus-within .shop-reel img,.shop-card.is-live .shop-reel img,.shop-card.is-live .shop-reel video{animation-play-state:running;}
  /* franja inferior: el bloque del precio queda difuminado en negro sobre el video */
  .shop-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;z-index:1;}
  .shop-reel-veil{position:absolute;left:0;right:0;bottom:0;height:46%;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.72) 38%,rgba(0,0,0,0.94) 100%);}
  .shop-reel-cta{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;flex-direction:column;gap:6px;pointer-events:auto;transform:translateY(8px);opacity:0;transition:transform .3s cubic-bezier(.2,.7,.3,1) .06s,opacity .3s ease .06s;}
  .shop-card:hover .shop-reel-cta,.shop-card:focus-within .shop-reel-cta,.shop-card.is-live .shop-reel-cta{transform:translateY(0);opacity:1;}
  .shop-reel-cta{--gray-btn:#53565a;}
  .shop-cta-buy{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 10px;border:none;border-radius:var(--radius-sm);background:var(--brand);color:var(--on-brand);font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:0.07em;cursor:pointer;transition:filter .2s ease;}
  /* al elegirlos, los dos botones pasan a gris con la letra en verde lima */
  .shop-cta-buy:hover,.shop-cta-buy:focus-visible,.shop-cta-buy:active{
    background:var(--gray-btn);color:var(--brand);filter:none;
    box-shadow:0 0 0 1px rgba(205,253,81,0.45);}
  .shop-cta-buy:active{transform:scale(.985);}
  .shop-cta-buy:focus-visible{outline:none;}
  .shop-cta-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 10px;border:1px solid rgba(255,255,255,0.5);border-radius:var(--radius-sm);background:rgba(255,255,255,0.08);color:var(--ink);font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:0.07em;cursor:pointer;transition:background .2s ease,border-color .2s ease;}
  .shop-cta-more:hover,.shop-cta-more:focus-visible,.shop-cta-more:active{
    background:var(--gray-btn);color:var(--brand);border-color:var(--brand);}
  .shop-cta-more:active{transform:scale(.985);}
  .shop-cta-more:focus-visible{outline:none;}
  .shop-fav{position:absolute;top:8px;right:8px;z-index:4;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);background:rgba(5,5,5,0.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:var(--ink);cursor:pointer;pointer-events:auto;padding:0;opacity:0;transform:scale(.8);transition:opacity .28s ease .1s,transform .28s cubic-bezier(.2,.7,.3,1) .1s,color .2s ease,border-color .2s ease,background .2s ease;}
  .shop-card:hover .shop-fav,.shop-card:focus-within .shop-fav{opacity:1;transform:scale(1);}
  .shop-share{opacity:0;transform:scale(.8);transition:opacity .28s ease .14s,transform .28s cubic-bezier(.2,.7,.3,1) .14s;}
  .shop-card:hover .shop-share,.shop-card:focus-within .shop-share{opacity:1;transform:scale(1);}
  /* los tres iconos de la tarjeta se encienden en verde lima al elegirlos */
  .shop-fav:hover,.shop-fav:focus-visible,.shop-fav:active,
  .shop-fav[aria-pressed="true"]{
    background:var(--brand) !important;color:var(--on-brand) !important;
    border-color:var(--brand) !important;box-shadow:0 0 0 3px rgba(205,253,81,0.22),0 4px 14px rgba(205,253,81,0.35);}
  .shop-fav[aria-pressed="true"] svg{fill:var(--on-brand) !important;}
  .shop-fav:active{transform:scale(.88);}
  .shop-fav:focus-visible{outline:none;}
  .shop-reel-live{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:0.08em;color:var(--brand);background:rgba(0,0,0,0.6);padding:3px 7px;border-radius:var(--radius-sm);}
  @keyframes shop-live-dot{0%,100%{opacity:1;}50%{opacity:0.25;}}
  .shop-card:hover .shop-reel-live span,.shop-card.is-live .shop-reel-live span{animation:shop-live-dot 1.2s ease-in-out infinite;}
  .shop-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:0 16px 34px rgba(0,0,0,0.5);}
  .shop-title{font-size:12px;line-height:16px;color:var(--ink);height:32px;overflow:hidden;}
  .shop-store-logo{height:11px;width:auto;display:block;filter:invert(1);opacity:0.85;}
  /* Compartir por WhatsApp y por otras redes, debajo del logo de la tienda */
  .share-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:none;border-radius:50%;background:#ffffff;color:#111111;box-shadow:0 2px 8px rgba(0,0,0,0.45);cursor:pointer;transition:background .2s ease,transform .2s ease;}
  /* En el carrusel usan el mismo estilo que el corazon: circulo oscuro translucido */
  .tile-share .share-btn{width:32px;height:32px;background:rgba(0,0,0,0.45);color:var(--ink);box-shadow:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .2s ease,color .2s ease,transform .2s ease;}
  .tile-share .share-btn:hover{background:rgba(0,0,0,0.65);color:var(--brand);transform:scale(1.06);}
  .tile-share .share-btn svg{width:16px;height:16px;}
  .tile-open{transition:opacity .18s ease;}
  .tile-open:hover .tile-title,.tile-open:focus-visible .tile-title{color:var(--brand);}
  .tile-open:active{opacity:.75;}
  /* Dentro del reproductor del catalogo, mismo circulo oscuro que el corazon */
  .shop-share .share-btn{width:30px;height:30px;background:rgba(5,5,5,0.62);color:var(--ink);border:1px solid rgba(255,255,255,0.35);box-shadow:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;}
  .shop-share .share-btn:hover,.shop-share .share-btn:focus-visible,.shop-share .share-btn:active{
    background:var(--brand);color:var(--on-brand);border-color:var(--brand);transform:scale(1.06);
    box-shadow:0 0 0 3px rgba(205,253,81,0.22),0 4px 14px rgba(205,253,81,0.35);}
  .shop-share .share-btn:focus-visible{outline:none;}
  .shop-share .share-btn svg{width:15px;height:15px;}
  .share-btn svg{width:15px;height:15px;display:block;}
  .share-btn:hover{background:var(--brand);transform:scale(1.08);}
  .share-btn:active{transform:scale(.94);}
  .share-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

  /* Explorar por categoría: el mosaico del catálogo deriva despacio detrás de cada tarjeta */
  @keyframes cat-drift{
    0%{transform:scale(1.25) translate3d(-3%,-3%,0);}
    50%{transform:scale(1.35) translate3d(3%,2%,0);}
    100%{transform:scale(1.25) translate3d(-3%,-3%,0);}
  }
  .cat-stage{position:absolute;inset:0;animation:cat-drift 26s ease-in-out infinite;will-change:transform;}
  .cat-card:nth-child(5n+2) .cat-stage{animation-duration:30s;animation-delay:-6s;}
  .cat-card:nth-child(5n+3) .cat-stage{animation-duration:24s;animation-delay:-12s;}
  .cat-card:nth-child(5n+4) .cat-stage{animation-duration:32s;animation-delay:-4s;}
  .cat-card:nth-child(5n+5) .cat-stage{animation-duration:28s;animation-delay:-16s;}
  /* carrusel del fondo: tres portadas que se funden, una tras otra */
  @keyframes cat-cycle{
    0%{opacity:0;}
    3%{opacity:1;}
    30%{opacity:1;}
    34%{opacity:0;}
    100%{opacity:0;}
  }
  .cat-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:cat-cycle 15s linear infinite;will-change:opacity;}
  .cat-card .cat-shot:nth-of-type(1){animation-delay:0s;}
  .cat-card .cat-shot:nth-of-type(2){animation-delay:-10s;}
  .cat-card .cat-shot:nth-of-type(3){animation-delay:-5s;}
  .cat-card:nth-child(5n+2) .cat-shot:nth-of-type(1){animation-delay:-1s;}
  .cat-card:nth-child(5n+2) .cat-shot:nth-of-type(2){animation-delay:-11s;}
  .cat-card:nth-child(5n+2) .cat-shot:nth-of-type(3){animation-delay:-6s;}
  .cat-card:nth-child(5n+3) .cat-shot:nth-of-type(1){animation-delay:-2s;}
  .cat-card:nth-child(5n+3) .cat-shot:nth-of-type(2){animation-delay:-12s;}
  .cat-card:nth-child(5n+3) .cat-shot:nth-of-type(3){animation-delay:-7s;}
  .cat-card:nth-child(5n+4) .cat-shot:nth-of-type(1){animation-delay:-3s;}
  .cat-card:nth-child(5n+4) .cat-shot:nth-of-type(2){animation-delay:-13s;}
  .cat-card:nth-child(5n+4) .cat-shot:nth-of-type(3){animation-delay:-8s;}
  .cat-card:nth-child(5n+5) .cat-shot:nth-of-type(1){animation-delay:-4s;}
  .cat-card:nth-child(5n+5) .cat-shot:nth-of-type(2){animation-delay:-14s;}
  .cat-card:nth-child(5n+5) .cat-shot:nth-of-type(3){animation-delay:-9s;}
  .cat-card{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;}
  .cat-pill{background:#ffffff;color:#101010;transition:background .25s ease,color .25s ease;}
  .cat-card:hover .cat-pill,.cat-card:focus-within .cat-pill{background:var(--brand);color:#3a3a3a;}
  .cat-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.55);}
  .cat-dot{transition:width .25s ease,background .25s ease;}
  /* carril arrastrable: dedo, trackpad o cursor; la barra se oculta pero el scroll sigue vivo */
  .cat-rail{display:flex;gap:var(--space-4);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab;padding-bottom:2px;}
  .cat-rail::-webkit-scrollbar{display:none;}
  .cat-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;}
  .cat-rail.is-dragging .cat-card{transform:none;}
  .cat-rail .cat-card{flex:0 0 calc((100% - 4 * var(--space-4)) / 5);scroll-snap-align:start;user-select:none;}
  .cat-rail img{pointer-events:none;-webkit-user-drag:none;}

  /* Glitch del logo: ~10 s estable, ~0.9 s de interferencia, y vuelve a la normalidad */
  @keyframes logo-mark-glitch{
    0%,92%{transform:none;opacity:1;filter:none;}
    92.6%{transform:translate3d(-3px,0,0) skewX(-1.4deg);filter:saturate(1.8) hue-rotate(-14deg);}
    93.6%{transform:translate3d(4px,-1px,0);filter:saturate(0.5) brightness(1.35);}
    94.4%{transform:translate3d(-2px,1px,0) skewX(2deg);opacity:0.45;}
    95.4%{transform:translate3d(3px,0,0);filter:saturate(1.9) hue-rotate(16deg);}
    96.4%{transform:translate3d(-2px,0,0) skewX(-1deg);opacity:1;}
    97.4%{transform:translate3d(2px,1px,0);filter:brightness(1.2);}
    98.4%{transform:translate3d(-1px,0,0);filter:none;}
    99.2%{transform:translate3d(1px,0,0);}
    100%{transform:none;opacity:1;filter:none;}
  }
  @keyframes logo-word-glitch{
    0%,92%{transform:none;}
    92.6%{transform:translate3d(-3px,0,0) skewX(-1.4deg);}
    93.6%{transform:translate3d(4px,-1px,0);}
    94.4%{transform:translate3d(-2px,1px,0) skewX(2deg);}
    95.4%{transform:translate3d(3px,0,0);}
    96.4%{transform:translate3d(-2px,0,0) skewX(-1deg);}
    97.4%{transform:translate3d(2px,1px,0);}
    98.4%{transform:translate3d(-1px,0,0);}
    99.2%{transform:translate3d(1px,0,0);}
    100%{transform:none;}
  }
  /* las dos copias de color solo aparecen dentro de la ventana de glitch */
  @keyframes logo-rgb-magenta{
    0%,92%{opacity:0;transform:none;clip-path:inset(0 0 0 0);}
    92.6%{opacity:0.85;transform:translate3d(-4px,0,0);clip-path:inset(12% 0 55% 0);}
    93.6%{opacity:0.8;transform:translate3d(5px,0,0);clip-path:inset(48% 0 14% 0);}
    94.6%{opacity:0.85;transform:translate3d(-5px,1px,0);clip-path:inset(0 0 62% 0);}
    95.6%{opacity:0.75;transform:translate3d(3px,0,0);clip-path:inset(60% 0 0 0);}
    96.8%{opacity:0.6;transform:translate3d(-2px,0,0);clip-path:inset(25% 0 35% 0);}
    98%{opacity:0.3;transform:translate3d(2px,0,0);clip-path:inset(0 0 0 0);}
    99%,100%{opacity:0;transform:none;clip-path:inset(0 0 0 0);}
  }
  @keyframes logo-rgb-cyan{
    0%,92%{opacity:0;transform:none;clip-path:inset(0 0 0 0);}
    92.6%{opacity:0.85;transform:translate3d(4px,0,0);clip-path:inset(50% 0 10% 0);}
    93.6%{opacity:0.8;transform:translate3d(-5px,0,0);clip-path:inset(10% 0 52% 0);}
    94.6%{opacity:0.85;transform:translate3d(5px,-1px,0);clip-path:inset(58% 0 0 0);}
    95.6%{opacity:0.75;transform:translate3d(-3px,0,0);clip-path:inset(0 0 58% 0);}
    96.8%{opacity:0.6;transform:translate3d(2px,0,0);clip-path:inset(32% 0 28% 0);}
    98%{opacity:0.3;transform:translate3d(-2px,0,0);clip-path:inset(0 0 0 0);}
    99%,100%{opacity:0;transform:none;clip-path:inset(0 0 0 0);}
  }
  .logo-fx{animation:logo-mark-glitch 11s steps(1,end) infinite;}
  .logo-word-fx{animation:logo-word-breathe 3.6s ease-in-out infinite,logo-word-glitch 11s steps(1,end) infinite;}
  .logo-word-fx::before,.logo-word-fx::after{content:'GAME PLUS ONE';position:absolute;left:0;top:0;width:100%;pointer-events:none;text-shadow:none;opacity:0;}
  .logo-word-fx::before{color:#ff2bd6;animation:logo-rgb-magenta 11s steps(1,end) infinite;}
  .logo-word-fx::after{color:#00f0ff;animation:logo-rgb-cyan 11s steps(1,end) infinite;}
  @media (prefers-reduced-motion: reduce){.logo-word,.logo-fx,.logo-word-fx,.logo-word-fx::before,.logo-word-fx::after{animation:none;}}
  @keyframes gp-pan{from{transform:translate3d(-5%,0,0) scale(1.14);}to{transform:translate3d(5%,2%,0) scale(1.14);}}
  .gp-pan{animation:gp-pan 9s ease-in-out infinite alternate;}
  @keyframes gp-sweep{from{transform:translate3d(-140%,0,0) skewX(-12deg);}to{transform:translate3d(320%,0,0) skewX(-12deg);}}
  .gp-sweep{animation:gp-sweep 6s linear infinite;}
  @keyframes gp-pulse{0%,100%{opacity:.3;}50%{opacity:1;}}
  .gp-pulse{animation:gp-pulse 1.4s ease-in-out infinite;}
  @keyframes gp-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  .gp-progress{animation:gp-progress 26s linear infinite;}
  @keyframes mq-left{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
  @keyframes mq-right{from{transform:translate3d(-50%,0,0);}to{transform:translate3d(0,0,0);}}
  .mq-track{display:flex;align-items:center;gap:56px;width:max-content;will-change:transform;}
  .mq-track-left{animation:mq-left 38s linear infinite;}
  .mq-track-right{animation:mq-right 44s linear infinite;}
  .mq-row:hover .mq-track{animation-play-state:paused;}
  .mq-item{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1.2;letter-spacing:0.04em;white-space:nowrap;color:var(--brand);-webkit-text-stroke:1.5px var(--brand);transition:color .25s ease,-webkit-text-stroke-color .25s ease,opacity .25s ease,text-shadow .25s ease;}
  .mq-item:hover{color:var(--brand);-webkit-text-stroke-color:var(--brand);text-shadow:0 0 18px rgba(205,253,81,0.55);}
  /* logos oficiales: siluetas negras invertidas a blanco; al pasar el cursor encienden */
  .mq-logo{display:block;height:54px;width:auto;filter:invert(1);opacity:1;transition:opacity .25s ease,filter .25s ease;}
  .mq-logo:hover{opacity:1;filter:invert(1) drop-shadow(0 0 12px rgba(205,253,81,0.55));}
  /* reseñas en carril continuo: lento para poder leerlas, se detiene al pasar el cursor */
  @keyframes rev-scroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
  @keyframes rev-scroll-back{from{transform:translate3d(-50%,0,0);}to{transform:translate3d(0,0,0);}}
  .rev-track{display:flex;align-items:stretch;gap:var(--space-5);width:max-content;will-change:transform;}
  .rev-a{animation:rev-scroll 104s linear infinite;}
  .rev-b{animation:rev-scroll-back 122s linear infinite;}
  .rev-c{animation:rev-scroll 132s linear infinite;}
  .rev-d{animation:rev-scroll-back 114s linear infinite;}
  .rev-wall:hover .rev-track,.rev-wall:focus-within .rev-track{animation-play-state:paused;}


  /* ===== Menu flotante inferior (solo celular) ===== */
  /* Paleta tomada de la imagen de Max: lima #d2df49 y gris #626669 */
  .mnav{display:none;}
  @media (max-width: 640px){
    .mnav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;padding:0 12px calc(12px + env(safe-area-inset-bottom)) 12px;pointer-events:none;--mnav-lime:#d2df49;--mnav-gray:#626669;--mnav-halo:#8b2ef0;--mnav-halo-soft:#a85ff5;}
    .mnav-bar{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:space-around;gap:4px;height:62px;padding:0 10px;border-radius:26px;background:#626669;border:none;box-shadow:0 16px 36px rgba(0,0,0,0.60),0 2px 8px rgba(0,0,0,0.40);transition:box-shadow .4s ease;}
    /* halo lima alrededor de toda la barra */
    /* Borde vivo: un degradado conico gira y se recorta a un filo de 1.5px */
    .mnav-bar::before{
      content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
      padding:1.6px;
      background:conic-gradient(from var(--mnav-ang) at 50% 50%,
        #f4ffcf 0%, #cdfd51 14%, #7f8a3a 30%, #343a3d 50%, #7f8a3a 70%, #cdfd51 86%, #f4ffcf 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      mask-composite:exclude;
      animation:mnav-spin 2.6s linear infinite;
    }
    @keyframes mnav-spin{to{--mnav-ang:360deg;}}
    .mnav-bar.is-lit{box-shadow:0 16px 36px rgba(0,0,0,0.60),0 2px 8px rgba(0,0,0,0.40),0 0 22px rgba(210,223,73,0.35);}
    .mnav-bar.is-lit::before{animation-duration:1.4s;}
    @keyframes mnav-halo{0%,100%{opacity:.8;}50%{opacity:1;}}

    .mnav-btn{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:100%;padding:0;border:none;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;}
    .mnav-ico{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 72% 78%, #7d8184 0%, #686c70 28%, #53565a 55%, #3a3d40 80%, #2b2e31 100%);color:var(--mnav-lime);box-shadow:none;transition:transform .32s cubic-bezier(.2,.7,.3,1),background .25s ease,color .25s ease,box-shadow .32s ease;}
    .mnav-btn:hover .mnav-ico{background:radial-gradient(circle at 72% 78%, #8d9195 0%, #767a7e 28%, #5f6367 55%, #44474a 80%, #313437 100%);box-shadow:none;}
    .mnav-ico svg{width:19px;height:19px;}
    .mnav-lbl{font-family:var(--font-display);font-size:9px;font-weight:800;letter-spacing:0.06em;color:var(--mnav-lime);text-shadow:0 1px 2px rgba(0,0,0,0.55);position:absolute;left:0;right:0;bottom:7px;text-align:center;opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease;white-space:nowrap;}
    /* Activo: el icono sube y se vuelve una esfera gris con el glifo en lima */
    .mnav-btn.is-on .mnav-ico{transform:translateY(-26px) scale(1.10);background:radial-gradient(circle at 50% 42%, #e8f58f 0%, #d9e65e 45%, #c6d442 100%);color:#2b2e31;box-shadow:0 0 26px rgba(210,223,73,0.55),0 0 56px rgba(210,223,73,0.22);}
    .mnav-btn.is-on .mnav-lbl{opacity:1;transform:translateY(0);}
    .mnav-btn:active .mnav-ico{transform:translateY(0) scale(.94);}
    .mnav-btn.is-on:active .mnav-ico{transform:translateY(-24px) scale(1.0);}
    .mnav-buy .mnav-ico{width:44px;height:44px;}
    .mnav-buy .mnav-ico svg{width:21px;height:21px;}
    .mnav-dot{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;}
    .mnav-btn.is-on .mnav-dot{box-shadow:0 0 0 2px #d9e65e;}
    /* espacio para que la barra no tape el pie de pagina */
    .site-footer{padding-bottom:96px !important;}
  }
  @media (prefers-reduced-motion: reduce){.mnav-ico,.mnav-lbl{transition:none;}.mnav-bar::before{animation:none;}.mnav-bar.is-lit::before{animation:none;}}

  /* ============================================================
     ADAPTACIÓN A TABLET Y CELULAR
     Los estilos del diseño van escritos en cada elemento, así que
     aquí hace falta !important para poder sobrescribirlos.
     ============================================================ */

  /* --- TABLET: hasta 1024px --- */
  @media (max-width: 1024px){
    .shop-grid{grid-template-columns:repeat(3,1fr);}
    .cat-rail .cat-card{flex:0 0 calc((100% - 3 * var(--space-3)) / 4) !important;}
    .cat-rail{gap:var(--space-3) !important;}
    .cat-card{height:140px !important;}
    .cat-pill{font-size:11px !important;line-height:14px !important;padding:8px 11px !important;}
    .cat-pills{padding:var(--space-4) var(--space-5) !important;gap:6px !important;}
    .cat-pills button{padding:7px 14px !important;font-size:11px !important;letter-spacing:0.04em !important;}
    .feat-row{padding:38px var(--space-5) 32px var(--space-5) !important;gap:var(--space-4) !important;}
    .game-card{--gc-w:170px;}
    .tile-body{padding:8px !important;gap:4px !important;}
    .tile-title{font-size:11px !important;line-height:14px !important;min-height:28px !important;}
    .tile-price{font-size:12px !important;}
    .tile-buy{padding:6px !important;font-size:8px !important;letter-spacing:0.03em !important;}
    .shop-cb{font-size:8px !important;padding:2px 5px !important;}
    .shop-store{font-size:8px !important;padding:2px 5px !important;}
    .shop-store-logo{height:10px !important;}
    .shop-share{top:34px !important;right:6px !important;gap:5px !important;}
    .shop-share .share-btn{width:26px !important;height:26px !important;}
    .shop-share .share-btn svg{width:13px !important;height:13px !important;}
    .share-btn{width:22px !important;height:22px !important;}
    .tile-share{top:4px !important;gap:5px !important;}
    .tile-share .share-btn{width:26px !important;height:26px !important;}
    .tile-fav{width:26px !important;height:26px !important;}
    .tile-fav svg{width:14px !important;height:14px !important;}
    .tile-share .share-btn svg{width:14px !important;height:14px !important;}
    .share-btn svg{width:13px !important;height:13px !important;}
    .shop-title{font-size:11px !important;line-height:14px !important;height:28px !important;}
    .shop-region{font-size:9px !important;}
    .shop-off{font-size:14px !important;line-height:16px !important;padding:0 8px !important;}
    .shop-was{font-size:9px !important;line-height:11px !important;}
    .shop-now{font-size:26px !important;line-height:28px !important;}
    .cat-sec{padding-top:var(--space-5) !important;}
    .cat-h2{font-size:20px !important;line-height:24px !important;margin-bottom:var(--space-3) !important;}
    .shop-sec{margin-top:var(--space-5) !important;}
    /* El hero conserva la composicion del escritorio, solo a menor escala */
    .welcome-bar{font-size:11px !important;line-height:14px !important;padding:6px 12px !important;white-space:nowrap !important;}
    .hero-sec{height:470px !important;}
    .hero-player-col{right:var(--space-5) !important;bottom:var(--space-5) !important;width:52% !important;max-width:52% !important;}
    .hero-info{left:var(--space-5) !important;bottom:var(--space-5) !important;width:43% !important;max-width:43% !important;gap:var(--space-3) !important;}
    .hero-info h1{font-size:20px !important;line-height:24px !important;}
    .site-header .logo-fx{height:64px !important;}
    .gp-badge{font-size:6px !important;line-height:8px !important;letter-spacing:0.03em !important;padding:2px 6px !important;gap:4px !important;top:6px !important;left:6px !important;white-space:nowrap !important;}
    .gp-badge span{width:4px !important;height:4px !important;}
    .gp-time{font-size:8px !important;padding:1px 5px !important;bottom:8px !important;right:6px !important;}
    .banner-overlay{bottom:12px !important;gap:8px !important;}
    .banner-overlay > div:first-child span:last-child{padding:4px 8px !important;}
    .banner-overlay > div:first-child span:last-child span + span{font-size:11px !important;line-height:13px !important;}
    .banner-overlay > span{padding:3px 9px !important;}
    .banner-overlay > span span{font-size:9px !important;}
    .banner-overlay .btn-primary{padding:8px 22px !important;font-size:10px !important;}
    .banner-overlay > div:last-child button{width:24px !important;height:24px !important;}
    .catalog-band{height:300px !important;}
    .banner-title{font-size:24px !important;line-height:28px !important;}
    .mq-item{font-size:32px;}
    .mq-logo{height:40px;}
    .mq-track{gap:36px;}
  }

  /* --- CELULAR: hasta 640px --- */
  @media (max-width: 640px){
    /* Encabezado: logo centrado geometricamente e iconos mas chicos */
    .site-header{display:grid !important;grid-template-columns:1fr auto 1fr !important;align-items:center;padding:8px 10px !important;}
    .hdr-search{justify-self:start;position:static !important;}
    .hdr-search > .icon-btn{width:30px !important;height:30px !important;}
    .hdr-search > .icon-btn svg{width:17px !important;height:17px !important;}
    .hdr-logo{justify-self:center;}
    /* El logo se escala a mano: su altura viene calculada para escritorio */
    .site-header .logo-fx{height:38px !important;}
    .site-header .logo-word{font-size:9px !important;line-height:12px !important;letter-spacing:0.1em !important;margin-top:-2px !important;}
    .hdr-actions{justify-self:end;gap:2px !important;}
    .hdr-actions .pill{padding:3px 7px !important;font-size:10px !important;gap:3px !important;}
    .hdr-actions .pill span[aria-hidden]{width:13px !important;height:13px !important;}
    .hdr-actions .pill svg{width:9px !important;height:9px !important;}
    .hdr-actions .icon-btn{width:28px !important;height:28px !important;}
    .hdr-actions .icon-btn svg{width:16px !important;height:16px !important;}

    /* Tarjetas del carrusel debajo del hero: mas compactas */
    .cat-pills{padding:10px var(--space-4) !important;gap:5px !important;}
    .cat-pills button{padding:5px 11px !important;font-size:9px !important;letter-spacing:0.03em !important;}
    .feat-row{padding:30px var(--space-4) 26px var(--space-4) !important;gap:14px !important;}
    .feat-nav{gap:9px !important;padding:12px var(--space-4) 20px !important;}
    .feat-pg{width:36px !important;height:36px !important;border-radius:11px !important;font-size:14px !important;}
    .game-card{--gc-w:118px;}
    .tile-body{padding:6px !important;gap:3px !important;}
    .tile-title{font-size:9px !important;line-height:11px !important;min-height:22px !important;}
    .tile-open svg{width:8px !important;height:8px !important;}
    .tile-open span span{font-size:8px !important;}
    .tile-price{font-size:10px !important;}
    .tile-buy{padding:4px 3px !important;font-size:6px !important;letter-spacing:0.02em !important;}
    /* Rejilla del catalogo: insignias y precios a escala de celular */
    .shop-cb{font-size:6px !important;padding:2px 4px !important;gap:2px !important;left:4px !important;top:4px !important;}
    .shop-cb svg{width:6px !important;height:6px !important;}
    .shop-store{font-size:6px !important;padding:2px 4px !important;gap:3px !important;right:4px !important;top:4px !important;}
    .shop-store-logo{height:8px !important;}
    .shop-share{top:28px !important;right:5px !important;gap:4px !important;}
    .shop-share .share-btn{width:22px !important;height:22px !important;}
    .shop-share .share-btn svg{width:11px !important;height:11px !important;}
    .share-btn{width:18px !important;height:18px !important;}
    .tile-share{top:3px !important;right:3px !important;gap:4px !important;}
    .tile-share .share-btn{width:22px !important;height:22px !important;}
    .tile-fav{width:22px !important;height:22px !important;top:3px !important;left:3px !important;}
    .tile-fav svg{width:12px !important;height:12px !important;}
    .tile-share .share-btn svg{width:12px !important;height:12px !important;}
    .share-btn svg{width:11px !important;height:11px !important;}
    .shop-info{padding:7px !important;gap:3px !important;}
    .shop-title{font-size:10px !important;line-height:13px !important;height:26px !important;}
    .shop-region{font-size:7px !important;letter-spacing:0.06em !important;}
    .shop-off{font-size:11px !important;line-height:13px !important;padding:0 6px !important;}
    .shop-wasw{padding:3px 6px !important;}
    .shop-was{font-size:7px !important;line-height:9px !important;}
    .shop-now{font-size:21px !important;line-height:23px !important;}
    .cat-sec{padding-top:var(--space-4) !important;}
    .cat-h2{font-size:15px !important;line-height:19px !important;margin-bottom:10px !important;}
    .shop-sec{margin-top:var(--space-4) !important;}
    /* Resena: el bloque de Judge.me ocupa el hueco junto al 4,8 */
    #opiniones{display:grid !important;grid-template-columns:auto 1fr !important;gap:14px 14px !important;align-items:center;margin-top:var(--space-5) !important;padding-top:var(--space-5) !important;}
    .rate-sum{display:contents !important;}
    .rate-score{grid-column:1;grid-row:1;}
    .jm-block{grid-column:2;grid-row:1;gap:10px !important;}
    .rate-bars{grid-column:1 / -1;grid-row:2;min-width:0 !important;gap:5px !important;}
    .rate-bars span{font-size:10px !important;width:60px !important;}
    .rate-bars > div > div{height:8px !important;}
    .rate-score > div:first-child{font-size:34px !important;line-height:34px !important;}
    .rate-score > div:nth-child(2){font-size:10px !important;}
    .rate-score > div:nth-child(3){font-size:9px !important;margin-top:6px !important;}
    .jm-tile{width:40px !important;height:40px !important;border-radius:11px !important;}
    .jm-tile svg{width:23px !important;height:23px !important;}
    .jm-name{font-size:18px !important;line-height:21px !important;}
    .jm-head{gap:7px !important;}
    .jm-ver{padding:2px 8px !important;gap:4px !important;}
    .jm-ver span{font-size:9px !important;}
    .jm-ver svg{width:10px !important;height:10px !important;}
    .jm-block div > div:last-child span{font-size:10px !important;}
    .jm-block div > div:last-child span span{width:13px !important;height:13px !important;}
    .jm-block div > div:last-child span span svg{width:8px !important;height:8px !important;}

    /* Reproductor dentro de las tarjetas del catalogo: botones y etiquetas minimos */
    .shop-reel-live{font-size:6px !important;padding:2px 4px !important;gap:3px !important;top:5px !important;left:5px !important;}
    .shop-reel-veil{height:34% !important;}
    .shop-reel-cta{left:5px !important;right:5px !important;bottom:5px !important;gap:3px !important;}
    .shop-cta-buy{padding:4px 6px !important;font-size:7px !important;gap:3px !important;letter-spacing:0.04em !important;}
    .shop-cta-more{padding:4px 6px !important;font-size:7px !important;gap:3px !important;letter-spacing:0.04em !important;}
    .shop-reel-cta svg{width:8px !important;height:8px !important;}
    .shop-fav{width:22px !important;height:22px !important;top:5px !important;right:5px !important;}
    .shop-fav svg{width:11px !important;height:11px !important;}

    /* Pie de pagina: nombre, contador y redes centrados */
    .foot-top{flex-direction:column !important;align-items:center !important;text-align:center;gap:var(--space-4) !important;}
    .foot-word{font-size:20px !important;}
    .foot-socials{justify-content:center !important;width:100%;}

    /* Misma composicion que el escritorio: info a la izquierda, gameplay a la derecha */
    .welcome-bar{font-size:9px !important;line-height:12px !important;letter-spacing:0.03em !important;padding:5px 8px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
    .hero-sec{height:300px !important;}
    .hero-player-col{right:10px !important;bottom:10px !important;width:47% !important;max-width:47% !important;gap:5px !important;}
    .hero-player-col > span{padding:3px 7px !important;gap:4px !important;}
    .hero-player-col > span span{font-size:8px !important;}
    .hero-info{left:10px !important;bottom:10px !important;width:50% !important;max-width:50% !important;gap:7px !important;}
    .hero-info h1{font-size:13px !important;line-height:16px !important;}
    .hero-rankrow{gap:5px !important;}
    .hero-rankrow .hero-rank-ico{width:14px !important;height:13px !important;margin-top:1px !important;}
    .hero-rankrow .hero-rank-t{font-size:9px !important;line-height:11px !important;}
    .hero-rankrow .hero-rank{font-size:8px !important;line-height:11px !important;}
    .hero-info .hero-rank b{font-size:9px !important;}
    .hero-info .hero-rank-t{font-size:10px !important;line-height:13px !important;}
    .hero-info .hero-rank-ico{width:20px !important;height:18px !important;}
    .hero-info .hero-pub{font-size:9px !important;line-height:12px !important;}
    .hero-info .pill{font-size:8px !important;padding:2px 6px !important;}
    .hero-info .hero-rate{font-size:9px !important;}
    .hero-info .hero-rate svg{width:9px !important;height:9px !important;}
    .hero-info .hero-price{font-size:15px !important;line-height:18px !important;}
    .hero-info .btn-primary{padding:7px 14px !important;font-size:10px !important;}
    .hero-info .icon-btn{width:28px !important;height:28px !important;}
    .hero-info .icon-btn svg{width:13px !important;height:13px !important;}

    .shop-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3);}
    .shop-title{font-size:12px;}

    /* 1. HUD del reproductor: etiquetas pequenas para no tapar el gameplay */
    .gp-badge{font-size:4px !important;line-height:6px !important;letter-spacing:0.02em !important;padding:1px 4px !important;gap:2px !important;top:4px !important;left:4px !important;white-space:nowrap !important;border-radius:3px !important;}
    .gp-badge span{width:3px !important;height:3px !important;}
    .gp-time{font-size:5px !important;line-height:7px !important;padding:1px 3px !important;bottom:5px !important;right:4px !important;border-radius:3px !important;}

    /* 2. Explorar por categoria: tarjetas mas grandes y legibles */
    .cat-rail{gap:10px !important;}
    .cat-rail .cat-card{flex:0 0 calc((100% - 10px) / 2) !important;}
    .cat-card{height:112px !important;border-radius:var(--radius-md) !important;}
    .cat-pill{font-size:9px !important;line-height:12px !important;padding:6px 9px !important;max-width:90% !important;letter-spacing:0.03em !important;}

    /* 3. Enlaces legales centrados y mas chicos */
    .foot-legal{flex-direction:column !important;text-align:center;gap:var(--space-4) !important;font-size:10px !important;}
    .foot-legal-links{flex-direction:column !important;align-items:center !important;gap:10px !important;width:100%;}
    .foot-legal .foot-link{font-size:10px !important;line-height:14px !important;letter-spacing:0.02em !important;text-align:center;}

    /* 4. Contador en vivo: que quepa completo */
    .live-chip{flex-wrap:wrap !important;justify-content:center !important;gap:8px var(--space-3) !important;padding:9px var(--space-4) !important;width:100%;}
    .live-num{font-size:20px !important;line-height:22px !important;}
    .live-lbl{font-size:10px !important;letter-spacing:0.04em !important;}

    /* 5. Estrenos: menos informacion encima para que se vea la portada */
    .banner-stage{aspect-ratio:16/10 !important;}
    .banner-overlay{bottom:6px !important;gap:4px !important;}
    .banner-overlay > div:first-child span:last-child{padding:2px 5px !important;gap:0 !important;}
    .banner-overlay > div:first-child span:last-child span + span{font-size:7px !important;line-height:9px !important;}
    .banner-overlay > span{padding:2px 6px !important;gap:3px !important;}
    .banner-overlay > span span{font-size:6px !important;}
    .banner-overlay > span svg{width:8px !important;height:8px !important;}
    .banner-overlay .btn-primary{padding:5px 14px !important;font-size:7px !important;letter-spacing:0.04em !important;}
    .banner-overlay > div:last-child button{width:16px !important;height:16px !important;}
    .banner-overlay > div:last-child button span{width:5px !important;height:5px !important;}

    .catalog-band{height:200px !important;}
    .banner-title{font-size:17px !important;line-height:21px !important;padding:var(--space-3) var(--space-4) !important;letter-spacing:0.02em !important;}

    .rev-sec{padding:var(--space-6) var(--space-4) !important;}
    .rev-track > div{width:252px !important;}
    .rev-wall{gap:var(--space-3) !important;}

    .mq-item{font-size:22px;-webkit-text-stroke-width:1px;}
    .mq-logo{height:28px;}
    .mq-track{gap:24px;}

    .site-footer{padding:var(--space-6) var(--space-4) var(--space-5) var(--space-4) !important;}
    .sub-panel{padding:var(--space-4) !important;border-radius:20px !important;gap:var(--space-4) !important;}
    .sub-title{font-size:13px !important;}
    .sub-copy{font-size:11px !important;}

    /* los paneles del encabezado no deben salirse de la pantalla */
    /* Los desplegables se anclan a la barra fija (no al boton), asi nunca se cortan:
       anulo el position:relative de cada envoltorio y el panel ocupa el ancho de la pantalla. */
    .hdr-actions > div{position:static !important;}
    .search-pop{width:auto !important;max-height:calc(100vh - 190px) !important;}
    .cur-menu{
      left:8px !important; right:8px !important; width:auto !important; max-width:none !important;
      top:calc(100% + 6px) !important;
      max-height:calc(100vh - 190px) !important; overflow-y:auto !important;
      -webkit-overflow-scrolling:touch;
    }
    /* modales a pantalla casi completa */
    .modal-wrap{padding:var(--space-3) !important;}
    .modal-wrap > div{max-height:92vh !important;}
  }

  /* --- Evita que algo se salga de la pantalla en cualquier tamaño --- */
  @media (max-width: 1024px){
    img,video{max-width:100%;}
  }

  /* ===== Banner de promocion: cinta que corre arriba de todo =====
     Texto de cartel sobre fondo claro, con resaltador lima en las frases
     clave. La cinta se duplica y se desplaza media pista, asi el ciclo
     cierra sin salto visible. */
  .promo-bar{position:relative;overflow:hidden;background:#edebe4;border-bottom:2px solid #0a0a0a;}
  .promo-track{display:flex;width:max-content;align-items:center;animation:promo-run 26s linear infinite;}
  .promo-seq{display:flex;align-items:center;flex:none;}
  .promo-it{display:inline-flex;align-items:center;flex:none;
    font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;
    font-size:clamp(15px,1.5vw,21px);letter-spacing:0.012em;line-height:1;
    color:#0a0a0a;text-transform:uppercase;white-space:nowrap;padding:11px 0;}
  .promo-hl{background:#cdfd51;padding:0.17em 0.4em 0.23em;border-radius:2px;}
  .promo-sep{flex:none;width:clamp(26px,3vw,48px);text-align:center;color:#0a0a0a;
    font-size:clamp(11px,1.1vw,14px);line-height:1;opacity:0.5;}
  .promo-bar:before,.promo-bar:after{content:"";position:absolute;top:0;bottom:0;width:38px;z-index:2;pointer-events:none;}
  .promo-bar:before{left:0;background:linear-gradient(90deg,#edebe4,rgba(237,235,228,0));}
  .promo-bar:after{right:0;background:linear-gradient(270deg,#edebe4,rgba(237,235,228,0));}
  @keyframes promo-run{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
  .promo-bar:hover .promo-track{animation-play-state:paused;}
  @media (prefers-reduced-motion:reduce){.promo-track{animation:none;}}
  @media (max-width:640px){
    .promo-it{font-size:14px;padding:9px 0;}
    .promo-bar:before,.promo-bar:after{width:22px;}
  }

  /* El precio final manda y va al doble de tamano, en verde lima.
     Arriba, el descuento y el precio de lista tachado en medio de los dos.
     Ocupa su propio renglon porque a ese cuerpo no cabe en linea. */
  .shop-disc{max-width:100%;}
  .shop-prices{min-width:0;}
  /* el renglon de arriba se queda a la izquierda; solo el precio se centra */
  .shop-prices{align-self:flex-start;}
  .shop-off{font-size:17px;line-height:19px;padding:0 10px;}
  .shop-was{font-size:11px;line-height:13px;}
  .shop-now{font-size:34px;line-height:36px;}
  @media (max-width:1320px){ .shop-now{font-size:30px;line-height:32px;} }

  @media (prefers-reduced-motion: reduce){.catalog-reel,.gp-pan,.gp-sweep,.gp-pulse,.gp-progress,.mq-track,.rev-track,.cat-stage{animation:none;}.cat-shot{animation:none;}.cat-shot:nth-of-type(1){opacity:1;}.shop-reel img,.shop-reel video{animation:none;}.game-card,.cat-card{transition:none;}}