/* ===========================================================
   GAME PLUS ONE — capa de la tienda estática
   nexus.css trae el lenguaje visual (colores, relieves, 3D).
   Aquí va la maqueta que antes vivía en atributos style.
   =========================================================== */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: clip;
  padding-bottom: 0;
}
.oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* varias clases traen display propio y le ganaban a [hidden] */
[hidden] { display: none !important; }

/* ---------- banda de promoción y aviso ---------- */
.anuncio {
  background: var(--brand); color: var(--on-brand);
  text-align: center; padding: var(--space-2) var(--space-4);
  font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em;
}
.sticky-top { position: sticky; top: 0; z-index: 50; }

/* ---------- encabezado ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: 14px var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 10px 28px rgba(0,0,0,0.6);
  transition: padding .32s cubic-bezier(.2,.7,.3,1);
}
.site-header.compacta { padding: 7px var(--space-6); }

.hdr-search { position: relative; flex: 0 0 auto; }

.hdr-logo {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1 1 auto; min-width: 0; text-decoration: none;
}
/* el logotipo original: video en neón sobre negro. mix-blend-mode:screen
   borra el fondo negro, así el neón queda limpio sobre la cabecera */
.logo-fx {
  display: block; height: 86px; width: auto;
  mix-blend-mode: screen; object-fit: contain;
  transition: height .32s cubic-bezier(.2,.7,.3,1);
}
.site-header.compacta .logo-fx { height: 52px; }
.logo-word {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 20px; line-height: 24px; letter-spacing: 0.14em;
  color: var(--brand); white-space: nowrap;
  max-height: 26px; opacity: 1; margin-top: -8px;
  transition: opacity .22s ease, max-height .32s cubic-bezier(.2,.7,.3,1);
}
.site-header.compacta .logo-word { opacity: 0; max-height: 0; margin-top: 0; }

.hdr-actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.cur-wrap { position: relative; }
.cur-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 700;
  color: var(--brand); border: 1px solid var(--brand);
}
.cur-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.cur-btn svg { transition: transform .22s ease; }
.cur-flag { box-shadow: 0 0 0 1.5px var(--brand); background-size: cover; background-position: center; }
.cur-mx { background: linear-gradient(90deg,#006847 0 33%,#ffffff 33% 66%,#ce1126 66%); }
.cur-nota {
  padding: 8px 10px 6px; font-size: 10px; line-height: 14px;
  color: var(--ink-faint); border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px;
}
.cur-item .cur-cod { display: block; font-size: 12px; font-weight: 700; color: var(--ink); }
.cur-item .cur-pais { display: block; font-size: 11px; color: var(--ink-muted); }
.cur-item[aria-selected="true"] .cur-cod { color: var(--brand); }

.hdr-ico { position: relative; }
.globo {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 800; line-height: 16px; text-align: center;
}

/* buscador desplegable */
.search-pop { padding: 8px; }
.sp-fila { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.sp-lupa { display: flex; color: var(--brand); flex-shrink: 0; }
.sp-x { width: 28px; height: 28px; color: var(--ink-faint); flex-shrink: 0; }
.sp-sep { height: 1px; background: var(--border-subtle); margin: 4px 0 6px; }
.sp-cap { padding: 0 2px 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-faint); }
.sp-hit-img { width: 38px; height: 50px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #111; }
.sp-hit-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.sp-hit-nom { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-hit-meta { font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-hit-pre { font-size: 12px; font-weight: 800; color: var(--brand); flex-shrink: 0; }
.sp-vacio { padding: 14px 8px; font-size: 13px; line-height: 18px; color: var(--ink-faint); }

/* ---------- barra de bienvenida ---------- */
.welcome-bar {
  background: var(--acento, var(--brand)); color: var(--acento-texto, var(--on-brand));
  text-align: center; padding: var(--space-2) var(--space-4);
  font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em;
  transition: background .5s ease, color .5s ease;
}

/* ---------- hero ---------- */
.hero-sec {
  position: relative; width: 100%; height: 780px; overflow: hidden;
  background: #0a0a0a; scroll-margin-top: 130px;
  border: 1.5px solid var(--acento, var(--brand)); border-radius: var(--radius-lg);
  box-shadow: 0 0 34px var(--acento-brillo, rgba(205,253,81,.5)),
              inset 0 0 70px var(--acento-tinte, rgba(205,253,81,.18));
  transition: border-color .5s ease, box-shadow .5s ease;
}
.hero-aura { box-shadow: 0 0 44px 10px var(--acento-brillo, rgba(205,253,81,.5)); }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
.hero-velo-h { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.5) 38%,rgba(5,5,5,.2) 58%,rgba(5,5,5,.7) 100%); }
.hero-velo-v { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(5,5,5,.4) 0%,rgba(5,5,5,0) 28%,rgba(5,5,5,.75) 100%); }

.hero-player-col {
  position: absolute; right: var(--space-6); bottom: var(--space-6);
  width: 820px; max-width: calc(57% - 16px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; z-index: 3;
}
.hero-rankrow { display: flex; align-items: flex-start; gap: 9px; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.hero-rank-ico { flex-shrink: 0; margin-top: 2px; }
.hero-rank-t { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 18px; color: var(--brand); }
.hero-rank { font-size: 13px; line-height: 18px; color: var(--ink); }
.hero-rank b { font-weight: 800; }
.hero-watch {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: var(--radius-full); background: rgba(28,28,28,.88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; color: var(--brand); white-space: nowrap;
}
.hero-watch svg { flex-shrink: 0; }

.hero-player {
  position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}
.pl-capa { position: absolute; inset: 0; overflow: hidden; }
.pl-capa img, .pl-capa video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-sweep { position: absolute; top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 100%); }
.pl-velo { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%); }
.gp-badge {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 3;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.5); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: var(--radius-sm);
}
.gp-badge .gp-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
.gp-time {
  position: absolute; bottom: var(--space-4); right: var(--space-3); z-index: 3;
  background: rgba(0,0,0,.5); color: var(--ink-muted);
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm);
}
.pl-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.14); z-index: 3; }
.gp-progress { height: 100%; background: var(--brand); transform-origin: left center; }
.pl-poster { position: absolute; inset: 0; z-index: 4; transition: opacity .45s ease, visibility 0s linear .45s; }
.pl-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-poster-velo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5,5,5,.35); }
.hero-player.reproduciendo .pl-poster { opacity: 0; visibility: hidden; pointer-events: none; }
.gp-play { background: var(--brand); color: var(--on-brand); border-radius: 50%; box-shadow: var(--shadow-glow); }

.hero-info {
  position: absolute; left: var(--space-6); bottom: var(--space-6); z-index: 3;
  width: 420px; max-width: calc(39% - 16px);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.hero-sombra { display: flex; flex-direction: column; gap: var(--space-3); text-shadow: 0 2px 12px rgba(0,0,0,.9), 0 0 28px rgba(0,0,0,.75); }
.hero-info h1 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 28px; color: var(--ink); }
.hero-pub { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 500; }
.hero-plat { align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.hero-rate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-stars { display: flex; gap: 2px; }
.hero-nota { font-size: 13px; font-weight: 600; color: var(--ink); }
.hero-votos { font-size: 13px; color: var(--ink-muted); }
.hero-ver { font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: underline; }
.hero-price { font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 28px; color: var(--ink); }
.hero-btns { display: flex; align-items: center; gap: var(--space-3); }
.hero-buy { padding: 12px 28px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.hero-fav { border: 1px solid var(--border-default); color: var(--ink); }
.hero-fav[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); }
.hero-fav[aria-pressed="true"] svg { fill: var(--brand); }

/* ---------- categorías ---------- */
.cat-pills {
  display: flex; gap: var(--space-2);
  padding: var(--space-5) var(--space-6); overflow-x: auto;
}
.cat-pills button {
  padding: 10px 22px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  white-space: nowrap; flex-shrink: 0;
}
.cat-pills button small { font-weight: 700; opacity: .65; margin-left: 6px; font-size: 11px; }

/* ---------- carrusel de juegos ---------- */
.feat-sec {
  position: relative; z-index: 3; padding: 0;
  background: var(--acento, #111); transition: background .7s ease;
}
.feat-cuenta {
  padding: var(--space-5) var(--space-6) 0;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--acento-texto, var(--on-brand)); opacity: .8;
}
.feat-row {
  display: flex; gap: var(--space-5); overflow-x: auto;
  padding: var(--space-6) var(--space-6) var(--space-7);
  perspective: 1400px;
}
.feat-vacio {
  margin: var(--space-6); padding: var(--space-8) var(--space-6);
  border: 1px dashed rgba(0,0,0,.35); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  color: var(--acento-texto, #0a0a0a); font-weight: 600; text-align: center;
}

.game-card {
  position: relative; width: var(--gc-w, 220px); flex-shrink: 0;
  background: var(--surface-raised);
  border: 2px solid var(--ring, var(--border-default));
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column;
  transform: perspective(900px) rotateY(-4deg) rotateX(1deg) scale(1) translateY(0);
  box-shadow: 0 12px 22px rgba(0,0,0,.55), 7px 5px 14px rgba(0,0,0,.38);
  z-index: 1;
}
.game-card.es-elegida {
  transform: perspective(900px) rotateY(-11deg) rotateX(2deg) scale(1.12) translateY(-10px);
  box-shadow: 0 26px 50px rgba(0,0,0,.72), 14px 10px 26px rgba(0,0,0,.45), 0 0 30px var(--glow, rgba(0,0,0,.4));
  z-index: 2; margin: 0 14px;
}
.gc-barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 6px 10px; background: var(--ring, #333); color: var(--ring-texto, #fff);
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  transition: background .4s ease, color .4s ease;
}
.gc-tienda { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; opacity: .9; }
.gc-tienda-logo { display: block; height: 13px; width: auto; }
.game-case { position: relative; }
.gc-arte { display: block; width: 100%; aspect-ratio: 2/3; padding: 0; border-radius: 0; overflow: hidden; background: #0a0a0a; border: none; cursor: pointer; }
.gc-arte img, .gc-arte video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gc-clip { position: absolute; inset: 0; z-index: 2; }
.tile-fav {
  position: absolute; top: 4px; left: 4px; z-index: 3;
  width: 32px; height: 32px; background: rgba(0,0,0,.45); color: var(--ink);
}
.tile-fav[aria-pressed="true"] { color: var(--brand); }
.tile-fav[aria-pressed="true"] svg { fill: var(--brand); }
.tile-share { position: absolute; top: 4px; right: 4px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.tile-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; }
.tile-open {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  width: 100%; padding: 0; border: none; background: transparent; text-align: left; cursor: pointer;
}
.tile-title { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 17px; color: var(--ink); min-height: 34px; }
.tile-nota { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-muted); }
.tile-price { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--ink); }
.tile-buy {
  padding: 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  border-radius: var(--radius-sm); background: #d2df49; color: #0a0a0a; border: none; cursor: pointer;
}
.game-card.es-elegida .tile-buy { background: #626669; color: #d2df49; }
.gc-pronto {
  position: absolute; bottom: 6px; left: 6px; z-index: 3;
  background: rgba(0,0,0,.72); color: var(--brand);
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 7px; border-radius: var(--radius-sm);
}

/* ---------- pie ---------- */
.site-footer {
  background: var(--surface-raised); border-top: 1px solid var(--border-subtle);
  padding: var(--space-8) var(--space-6) 90px;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.foot-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); }
.foot-word { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 0.05em; color: var(--brand); }
.live-chip { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); padding: 12px var(--space-6); border-radius: var(--radius-full); }
.live-tag { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); display: inline-block; }
.live-num { font-size: 18px; font-weight: 800; }
.live-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; }
.foot-cols { display: flex; flex-wrap: wrap; gap: var(--space-7); font-size: 13px; line-height: 21px; color: var(--ink-muted); }
.foot-h { color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.foot-wa { display: inline-block; margin-top: 8px; color: var(--brand); font-weight: 700; }
.foot-legal { font-size: 11px; color: var(--ink-faint); border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }

/* ---------- panel lateral ---------- */
.telon {
  position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.telon.abierto { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.panel {
  position: fixed; z-index: 115; top: 0; right: 0; bottom: 0;
  width: min(420px, 94vw); background: #0d0f10;
  border-left: 1px solid var(--border-subtle);
  box-shadow: -24px 0 70px rgba(0,0,0,.65);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.panel.abierto { transform: none; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px 14px; border-bottom: 1px solid var(--border-subtle); }
.panel-cab h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: .1em; color: var(--brand); }
.panel-cuerpo { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.panel-pie { border-top: 1px solid var(--border-subtle); padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
.vacio { color: var(--ink-faint); font-size: 13px; line-height: 20px; }
.linea { display: flex; gap: 12px; align-items: flex-start; }
.linea img { width: 46px; height: 62px; object-fit: cover; border-radius: 6px; background: #111; flex-shrink: 0; }
.linea-txt { min-width: 0; flex: 1; }
.linea-nom { font-size: 13px; font-weight: 700; color: var(--ink); }
.linea-pre { font-size: 12px; color: var(--brand); font-weight: 700; margin-top: 2px; }
.cant { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cant button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-default); color: var(--ink); font-size: 14px; line-height: 1; }
.cant span { font-size: 13px; font-weight: 700; min-width: 16px; text-align: center; }
.total { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.total-nota { margin: -6px 0 12px; font-size: 12px; color: #ff9f1a; }
.btn-pedir { width: 100%; padding: 14px; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 800; letter-spacing: .1em; }

/* ---------- barra inferior ---------- */
.mnav { display: none; }
@media (max-width: 900px) {
  .mnav { display: block; }
  .site-footer { padding-bottom: 110px; }
}

/* ---------- pantallas chicas ---------- */
@media (max-width: 1280px) {
  .hero-sec { height: 700px; }
  .hero-player-col { width: 680px; }
}
@media (max-width: 1100px) {
  .hero-sec { height: 640px; }
  .hero-player-col { width: 560px; }
  .game-card { --gc-w: 200px; }
}
/* nexus.css fija la altura del logo con !important en estos anchos */
@media (max-width: 1024px) {
  .site-header.compacta .logo-fx { height: 42px !important; }
}
@media (max-width: 640px) {
  .site-header .logo-fx { height: 44px !important; }
  .site-header.compacta .logo-fx { height: 30px !important; }
}
/* En celular el hero se apila: primero el reproductor a todo lo ancho y
   debajo la ficha. nexus.css traía la maqueta lado a lado del artboard con
   !important (hero de 300 px y reproductor al 47 %), que dejaba el video
   del tamaño de una estampilla; aquí se anula. */
@media (max-width: 900px) {
  .site-header { padding: 10px var(--space-4); }
  .logo-word { font-size: 15px; letter-spacing: .1em; }
  .hdr-actions { gap: 2px; }
  .cur-btn { padding: 5px 9px; font-size: 11px; }

  .hero-sec {
    height: auto !important; min-height: 0;
    display: flex; flex-direction: column; border-radius: 0;
    padding-top: 180px;
  }
  .hero-bg, .hero-velo-h, .hero-velo-v { height: 300px; }

  .hero-player-col {
    position: static !important;
    width: 100% !important; max-width: 100% !important;
    right: auto !important; bottom: auto !important;
    order: 1; padding: 0 var(--space-4); gap: 10px !important;
  }
  .hero-player-col > span { padding: 6px 12px !important; gap: 7px !important; }
  .hero-player-col > span span { font-size: 11px !important; }

  .hero-info {
    position: static !important;
    width: 100% !important; max-width: 100% !important;
    left: auto !important; bottom: auto !important;
    order: 2; padding: var(--space-5) var(--space-4) var(--space-6);
    gap: var(--space-3) !important;
  }
  .hero-info h1 { font-size: 22px !important; line-height: 26px !important; }
  .hero-info .hero-pub { font-size: 13px !important; line-height: 18px !important; }
  .hero-info .pill { font-size: 11px !important; padding: 4px 10px !important; }
  .hero-info .hero-rate { font-size: 13px !important; }
  .hero-info .hero-rate svg { width: 14px !important; height: 14px !important; }
  .hero-info .hero-price { font-size: 22px !important; line-height: 26px !important; }
  .hero-info .btn-primary { padding: 12px 26px !important; font-size: 12px !important; }
  .hero-info .icon-btn { width: 44px !important; height: 44px !important; }
  .hero-info .icon-btn svg { width: 18px !important; height: 18px !important; }
  .hero-rankrow .hero-rank-ico { width: 24px !important; height: 21px !important; }
  .hero-rankrow .hero-rank-t { font-size: 13px !important; line-height: 17px !important; }

  .cat-pills { padding: var(--space-4); }
  .feat-row { padding: var(--space-5) var(--space-4) var(--space-6); }
  .game-card { --gc-w: 190px; }
  .game-card.es-elegida { margin: 0 10px; }
}
@media (max-width: 560px) {
  .hdr-logo .logo-word { font-size: 12px; letter-spacing: .06em; }
  .hero-sec { padding-top: 140px; }
  .hero-bg, .hero-velo-h, .hero-velo-v { height: 240px; }
  .game-card { --gc-w: 168px; }
  .tile-title { font-size: 13px; }
  .hero-info h1 { font-size: 20px !important; line-height: 24px !important; }
}

/* ===========================================================
   Secciones nuevas de la landing
   =========================================================== */

/* ---------- catálogo en movimiento ---------- */
.banda-sec { padding: var(--space-8) var(--space-6) 0; background: var(--surface); }
.catalog-band {
  position: relative; height: 560px; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}
.catalog-reel { display: flex; flex-direction: column; width: 100%; }
.banda-malla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 8px; width: 100%; }
.banda-malla img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: #111; }
.banda-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,5,.95) 0%, rgba(5,5,5,0) 24%, rgba(5,5,5,0) 76%, rgba(5,5,5,.95) 100%);
}
/* el sello de marca sobre el mosaico se quitó: el logotipo ya vive
   en el encabezado y repetirlo encima de las portadas sólo tapaba juegos */

/* ---------- nuevos lanzamientos ---------- */
.lanz-sec { padding: var(--space-7) var(--space-6) 0; background: var(--surface); }
.banner-title {
  margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--acento, var(--brand)); color: var(--acento-texto, var(--on-brand));
  border-radius: var(--radius-lg);
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 36px; letter-spacing: .04em; text-align: center;
  transition: background .8s ease, color .8s ease;
}
.banner-stage {
  /* con aspect-ratio + max-height el navegador encoge el ancho para
     respetar la proporción; sin margin auto la caja quedaba pegada
     a la izquierda en pantallas anchas */
  position: relative; aspect-ratio: 16/9; max-height: 620px;
  width: 100%; max-width: calc(620px * 16 / 9); margin: 0 auto; overflow: hidden;
  border-radius: var(--radius-lg); background: #0a0a0a;
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card);
}
.banner-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.banner-stage img.activa { opacity: 1; }
.banner-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,0) 40%, rgba(5,5,5,.55) 70%, rgba(5,5,5,.92) 100%); }
.banner-overlay {
  position: absolute; left: 0; right: 0; bottom: var(--space-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.banner-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px;
  border-radius: var(--radius-full); background: rgba(28,28,28,.88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; color: var(--brand); white-space: nowrap;
}
.banner-cta { padding: 14px 40px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.banner-dots { display: flex; align-items: center; }
.banner-dots button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.banner-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .3s ease; }
.banner-dots button[data-on="1"] span { background: var(--brand); }

/* ---------- explorar por categoría ---------- */
.cat-sec { padding: var(--space-8) var(--space-6) 0; background: var(--surface); }
.cat-h2 { margin: 0 0 var(--space-5); font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 32px; letter-spacing: .02em; color: var(--brand); }
.cat-card {
  position: relative; height: 210px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  background: #0d0d0d; cursor: pointer;
}
.cat-tinte { position: absolute; inset: 0; }
.cat-pill {
  position: relative; z-index: 2; max-width: 82%; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 19px;
  letter-spacing: .06em; padding: 12px 18px; border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.cat-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-4); }
.cat-dot { height: 8px; width: 14px; border-radius: var(--radius-full); border: none; background: #3c3c3c; cursor: pointer; padding: 0; }
.cat-dot[data-on="1"] { width: 34px; background: var(--brand); }

/* ---------- destacados ---------- */
.shop-sec { padding: var(--space-7) var(--space-6) 0; background: var(--surface); }
.shop-card { cursor: pointer; }
.shop-arte { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #0a0a0a; }
.shop-arte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-cb {
  position: absolute; left: 6px; top: 6px; display: flex; align-items: center; gap: 4px;
  background: var(--brand); color: var(--on-brand);
  font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 3px 6px; border-radius: var(--radius-sm);
}
.shop-store {
  position: absolute; right: 6px; top: 6px; display: flex; align-items: center; gap: 4px;
  background: rgba(5,5,5,.82); color: var(--ink-muted);
  font-size: 9px; font-weight: 700; letter-spacing: .03em; padding: 3px 6px; border-radius: var(--radius-sm);
}
.shop-info { padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.shop-title { font-weight: 600; }
.shop-region { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--brand); }
.shop-disc { margin-top: 2px; align-self: stretch; display: flex; flex-direction: column; border-radius: var(--radius-sm); overflow: hidden; }
.shop-prices { display: flex; flex-direction: row; align-items: stretch; }
.shop-off { display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--on-brand); font-family: var(--font-display); font-weight: 800; }
.shop-wasw { display: flex; align-items: center; padding: 4px 9px; background: #0f0f0f; }
.shop-was { font-weight: 500; color: rgba(255,255,255,.45); text-decoration: line-through; white-space: nowrap; }
.shop-nowrap { display: block; padding: 3px 9px 6px; background: #0f0f0f; text-align: center; }
.shop-now { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; color: var(--brand); white-space: nowrap; }

/* ---------- plataformas ---------- */
.mq-sec {
  position: relative; overflow: hidden; margin-top: var(--space-8);
  padding: var(--space-8) 0; background: var(--surface);
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.mq-row { overflow: hidden; }
.mq-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,5,5,.95) 0%, rgba(5,5,5,0) 16%, rgba(5,5,5,0) 84%, rgba(5,5,5,.95) 100%); }

/* ---------- opiniones ---------- */
.op-sec { padding: var(--space-8) var(--space-6); background: var(--surface); scroll-margin-top: 120px; }
.op-cab {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-7); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle);
}
.jm-block { display: flex; align-items: center; gap: var(--space-4); }
.jm-tile { flex-shrink: 0; width: 72px; height: 72px; border-radius: 18px; background: #4faf9d; display: flex; align-items: center; justify-content: center; }
.jm-txt { display: flex; flex-direction: column; gap: 6px; }
.jm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jm-name { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 38px; letter-spacing: -.01em; color: var(--ink); }
.jm-ver { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: var(--radius-full); background: #bdeee2; font-size: 12px; font-weight: 700; color: #0a0a0a; }
.jm-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--ink); }
.jm-stars { display: flex; gap: 2px; }
.jm-stars span { display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 3px; background: #4faf9d; }
.jm-avg { font-size: 17px; font-weight: 700; }
.rate-sum { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.rate-score { text-align: center; }
.rate-big { font-family: var(--font-display); font-weight: 700; font-size: 54px; line-height: 54px; letter-spacing: -.02em; color: var(--brand); }
.rate-lbl { margin-top: 4px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--brand); }
.rate-sub { margin-top: 12px; font-size: 13px; color: var(--ink-muted); }
.rate-bars { display: flex; flex-direction: column; gap: 7px; min-width: 300px; flex-grow: 1; }
.rate-fila { display: flex; align-items: center; gap: 12px; }
.rate-fila span { font-size: 14px; font-weight: 600; color: var(--ink); width: 88px; white-space: nowrap; }
.rate-pista { flex-grow: 1; height: 11px; border-radius: var(--radius-full); background: #cfcfcf; overflow: hidden; }
.rate-pista i { display: block; height: 100%; border-radius: var(--radius-full); background: #4faf9d; }

.rev-wall { position: relative; margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.rev-row { position: relative; overflow: hidden; }
.rev-card {
  width: 330px; flex-shrink: 0; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: var(--space-4);
  display: flex; flex-direction: column; gap: 6px;
}
.rev-top { display: flex; align-items: center; gap: 8px; }
.rev-score { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: #0a0a0a; border: 1px solid var(--border-strong); font-size: 11px; font-weight: 800; color: #fff; }
.rev-stars { display: flex; gap: 2px; }
.rev-fecha { font-size: 13px; font-weight: 700; color: var(--ink); }
.rev-texto { font-size: 14px; line-height: 20px; color: var(--ink); margin: 0; }
.rev-quien { font-size: 13px; color: var(--ink-muted); }

/* ---------- pie: redes y suscripción ---------- */
.foot-socials { display: flex; gap: var(--space-2); }
.soc-link { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sub-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); }
.sub-wrap { display: flex; align-items: center; gap: 10px; flex-grow: 1; max-width: 460px; }
.sub-ok { width: 100%; margin: 0; font-size: 12px; font-weight: 700; color: #d2df49; }
.foot-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: 12px; }
.foot-legal-links { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.foot-link { border: none; background: transparent; padding: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: underline; }

/* ---------- pantallas chicas: secciones nuevas ---------- */
@media (max-width: 1024px) {
  .cat-rail .cat-card { flex: 0 0 calc((100% - 2 * var(--space-4)) / 3); }
  .banner-title { font-size: 24px; line-height: 28px; padding: var(--space-3) var(--space-4); }
}
@media (max-width: 760px) {
  .banda-sec, .lanz-sec, .cat-sec, .shop-sec, .op-sec { padding-left: var(--space-4); padding-right: var(--space-4); }
  .catalog-band { height: 260px; }
  .banda-malla { grid-template-columns: repeat(4, 1fr); }
  .banner-title { font-size: 19px; line-height: 23px; }
  .cat-rail .cat-card { flex: 0 0 calc((100% - var(--space-4)) / 2); height: 150px; }
  .cat-h2 { font-size: 22px; line-height: 26px; }
  .jm-name { font-size: 24px; line-height: 28px; }
  .jm-tile { width: 54px; height: 54px; border-radius: 14px; }
  .jm-tile svg { width: 30px; height: 30px; }
  .rate-big { font-size: 42px; line-height: 42px; }
  .rate-bars { min-width: 0; }
  .rate-fila span { width: 70px; font-size: 12px; }
  .rev-card { width: 270px; }
  .op-cab { gap: var(--space-5); }
}

/* ---------- catálogo completo: ficha al pasar el cursor ---------- */
.shop-n { font-size: 14px; font-weight: 700; color: var(--ink-faint); letter-spacing: .04em; }
.shop-fin { padding: var(--space-6) 0 0; text-align: center; font-size: 12px; color: var(--ink-faint); letter-spacing: .06em; min-height: 24px; }
.shop-card.is-live .shop-reel-veil, .shop-card:hover .shop-reel-veil { height: 72%; }
.shop-cta-more { text-decoration: none; }
.shop-card .shop-reel-cta { gap: 5px; }

/* ---------- ficha al pasar el cursor: columna de acciones a la derecha ---------- */
/* El corazón manda arriba a la derecha; WhatsApp y compartir se forman
   debajo, del mismo lado, en una sola columna. */
.shop-card .shop-fav {
  top: 8px !important; right: 8px !important;
  width: 32px !important; height: 32px !important;
  opacity: 1; transform: none;
}
.shop-card .shop-fav svg { width: 15px !important; height: 15px !important; }
.shop-card .shop-share {
  position: absolute; z-index: 4;
  top: 46px !important; right: 8px !important; left: auto !important;
  display: flex; flex-direction: column; gap: 6px !important;
  pointer-events: auto; opacity: 1; transform: none;
}
.shop-card .shop-share .share-btn {
  width: 32px !important; height: 32px !important;
  background: rgba(5,5,5,.62); color: var(--ink);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.shop-card .shop-share .share-btn svg { width: 15px !important; height: 15px !important; }

/* al pasar el cursor o al tocarlos, el icono se llena de lima */
.shop-card .shop-share .share-btn:hover,
.shop-card .shop-share .share-btn:focus-visible,
.shop-card .shop-share .share-btn:active,
.shop-card .shop-fav:hover,
.shop-card .shop-fav:focus-visible,
.shop-card .shop-fav:active,
.shop-card .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,.22), 0 4px 14px rgba(205,253,81,.35);
}
.shop-card .shop-fav:hover svg,
.shop-card .shop-fav[aria-pressed="true"] svg { fill: var(--on-brand) !important; }
.shop-card .shop-share .share-btn:hover svg { stroke: var(--on-brand); }

/* sin descripción abajo: solo los dos botones, para que el gameplay se vea entero */
.shop-reel-cta {
  background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,.78) 38%, rgba(5,5,5,.94) 100%);
  padding: 22px 10px 8px; margin: 0 -10px -10px;
  left: 0 !important; right: 0 !important; bottom: 0 !important; gap: 5px;
}
.shop-card.is-live .shop-reel-veil, .shop-card:hover .shop-reel-veil { height: 34%; }
.shop-cta-more { text-decoration: none; }

/* ---------- botón de sonido del gameplay del hero ---------- */
.pl-sonido {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 5;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(5,5,5,.62); color: var(--ink); cursor: pointer;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pl-sonido:hover { transform: scale(1.06); border-color: var(--brand); color: var(--brand); }
.pl-sonido:active { transform: scale(.94); }
.pl-sonido:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* encendido: lima, como el resto de los controles */
.pl-sonido[aria-pressed="true"] {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(205,253,81,.22), 0 4px 14px rgba(205,253,81,.35);
}
.pl-sonido .ico-son  { display: none; }
.pl-sonido[aria-pressed="true"] .ico-mute { display: none; }
.pl-sonido[aria-pressed="true"] .ico-son  { display: block; }
@media (max-width: 640px) {
  .pl-sonido { width: 30px; height: 30px; top: 8px; right: 8px; }
  .pl-sonido svg { width: 14px; height: 14px; }
}

/* ---------- carrusel infinito del catálogo ---------- */
.feat-marco { position: relative; }
.feat-row {
  display: flex; gap: var(--space-5); overflow-x: auto; overflow-y: hidden;
  padding: var(--space-6) var(--space-6) var(--space-7);
  perspective: 1400px;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.feat-row.arrastrando { cursor: grabbing; scroll-behavior: auto; }
.feat-row.arrastrando .game-card { pointer-events: none; }
.feat-row img { -webkit-user-drag: none; user-select: none; }

/* flechas: el mismo relieve metálico de los demás controles */
.feat-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: none; border-radius: 50%; cursor: pointer;
  color: var(--brand);
  background: radial-gradient(circle at 72% 78%, #7d8184 0%, #686c70 28%, #53565a 55%, #3a3d40 80%, #2b2e31 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,.6), inset -3px -4px 8px rgba(255,255,255,.16), inset 4px 5px 10px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .22s ease, opacity .22s ease;
}
.feat-flecha:hover { background: radial-gradient(circle at 72% 78%, #8d9195 0%, #767a7e 28%, #5f6367 55%, #44474a 80%, #313437 100%); }
.feat-flecha:active { transform: translateY(-50%) scale(.94); box-shadow: inset 5px 6px 12px rgba(0,0,0,.6), inset -3px -3px 8px rgba(255,255,255,.12); }
.feat-flecha:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.feat-flecha:disabled { opacity: 0; pointer-events: none; }
.feat-izq { left: 10px; }
.feat-der { right: 10px; }
@media (max-width: 760px) {
  .feat-flecha { display: none; }   /* en celular se desliza con el dedo */
}

/* ===========================================================
   Hero en escritorio: la ficha al doble de tamaño
   El bloque "Lo más vendido" subió arriba del título.
   En celular no cambia nada: todo esto va de 901 px para arriba.
   =========================================================== */
@media (min-width: 901px) {
  .hero-sec { height: 880px; }

  .hero-info { width: 680px; max-width: calc(46% - 16px); gap: var(--space-5); }
  .hero-sombra { gap: var(--space-4); }

  /* el bloque de "lo más vendido", ahora arriba del título */
  .hero-info .hero-rankrow { gap: 14px; margin-bottom: 2px; }
  .hero-info .hero-rank-ico { width: 42px; height: 38px; margin-top: 3px; }
  .hero-info .hero-rank-t { font-size: 22px; line-height: 28px; }
  .hero-info .hero-rank { font-size: 20px; line-height: 27px; }

  .hero-info h1 { font-size: 46px; line-height: 52px; margin-bottom: 8px; }
  .hero-info .hero-pub { font-size: 22px; line-height: 29px; }
  .hero-info .hero-plat { font-size: 18px; padding: 8px 18px; border-radius: var(--radius-md); }

  .hero-info .hero-rate { gap: 12px; }
  .hero-info .hero-rate svg { width: 24px; height: 24px; }
  .hero-info .hero-nota, .hero-info .hero-votos, .hero-info .hero-ver { font-size: 20px; }

  .hero-info .hero-price { font-size: 46px; line-height: 52px; }

  .hero-info .hero-btns { gap: var(--space-4); }
  .hero-info .btn-primary { padding: 20px 50px; font-size: 20px; border-radius: var(--radius-md); }
  .hero-info .icon-btn { width: 64px; height: 64px; }
  .hero-info .icon-btn svg { width: 28px; height: 28px; }

  /* el reproductor cede un poco de ancho para que la ficha respire */
  .hero-player-col { width: 760px; max-width: calc(52% - 16px); }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .hero-sec { height: 800px; }
  .hero-info h1, .hero-info .hero-price { font-size: 38px; line-height: 44px; }
  .hero-info .hero-rank-t { font-size: 19px; line-height: 24px; }
  .hero-info .hero-rank, .hero-info .hero-pub { font-size: 18px; line-height: 24px; }
  .hero-info .btn-primary { padding: 17px 40px; font-size: 18px; }
  .hero-player-col { width: 620px; }
}

/* el ancho justo: en laptop la ficha y el reproductor se tocaban */
@media (min-width: 901px) {
  .hero-info { max-width: calc(44% - 20px); }
  .hero-player-col { max-width: calc(50% - 20px); }
}
/* al mudarse el bloque dentro de la ficha heredó los tamaños diminutos
   que nexus.css fija para celular; aquí se devuelven a algo legible */
@media (max-width: 900px) {
  .hero-info .hero-rankrow { gap: 10px !important; }
  .hero-info .hero-rank-ico { width: 26px !important; height: 23px !important; }
  .hero-info .hero-rank-t { font-size: 14px !important; line-height: 19px !important; }
  .hero-info .hero-rank { font-size: 13px !important; line-height: 19px !important; }
  .hero-info .hero-rank b { font-size: 13px !important; }
}

/* El hero se ajusta a la pantalla para que COMPRAR no quede cortado.
   Arriba del hero van la promo, el aviso, la cabecera y la bienvenida:
   unos 232 px que hay que descontar. */
@media (min-width: 901px) {
  .hero-sec { height: clamp(520px, calc(100vh - 248px), 880px); }
}
/* en pantallas bajas (laptops de 768 px) la ficha baja un escalón
   para seguir cabiendo entera */
@media (min-width: 901px) and (max-height: 860px) {
  .hero-info h1, .hero-info .hero-price { font-size: 36px !important; line-height: 42px !important; }
  .hero-info .hero-rank-t { font-size: 18px !important; line-height: 23px !important; }
  .hero-info .hero-rank, .hero-info .hero-pub { font-size: 17px !important; line-height: 23px !important; }
  .hero-info .hero-rank-ico { width: 32px !important; height: 29px !important; }
  .hero-info .hero-plat { font-size: 15px !important; padding: 6px 14px !important; }
  .hero-info .hero-nota, .hero-info .hero-votos, .hero-info .hero-ver { font-size: 16px !important; }
  .hero-info .hero-rate svg { width: 19px !important; height: 19px !important; }
  .hero-info .btn-primary { padding: 15px 36px !important; font-size: 17px !important; }
  .hero-info .icon-btn { width: 52px !important; height: 52px !important; }
  .hero-info { gap: var(--space-3); }
  .hero-sombra { gap: 10px; }
}

/* ===========================================================
   Fluidez: tres arreglos de rendimiento
   =========================================================== */

/* 1. EL LOGO. Antes se animaba su altura, y animar altura obliga al
   navegador a recalcular la página en cada cuadro; con un video encima eso
   se traba. Ahora la caja marca el alto y una capa intermedia escala, que
   es trabajo de tarjeta gráfica. La escala va en esa capa y no en el video
   porque el video ya tiene su propia animación de glitch, que ganaría. */
.logo-caja {
  display: flex; align-items: center; justify-content: center;
  height: 86px; overflow: hidden;
  transition: height .3s cubic-bezier(.2,.7,.3,1);
}
.logo-escala {
  display: flex; align-items: center;
  transform-origin: center center; transform: scale(1);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
  will-change: transform; backface-visibility: hidden;
}
.site-header.compacta .logo-caja  { height: 52px; }
.site-header.compacta .logo-escala { transform: scale(.605); }
.logo-fx { height: 86px !important; width: auto; display: block; }
@media (max-width: 1024px) {
  .logo-caja { height: 64px; }
  .site-header.compacta .logo-caja { height: 42px; }
  .logo-fx { height: 64px !important; }
  .site-header.compacta .logo-escala { transform: scale(.656); }
}
@media (max-width: 640px) {
  .logo-caja { height: 44px; }
  .site-header.compacta .logo-caja { height: 30px; }
  .logo-fx { height: 44px !important; }
  .site-header.compacta .logo-escala { transform: scale(.682); }
}

/* 2. EL CARRUSEL. nexus.css le pone will-change:transform a TODAS las
   tarjetas; con 224 el navegador crea 224 capas de composición y por eso
   el primer desplazamiento se siente pesado. Solo la elegida lo necesita. */
.game-card { will-change: auto; }
.game-card.es-elegida { will-change: transform; }
.feat-row { will-change: scroll-position; }
.gc-arte img { background: #0a0a0a; }

/* 3. LA CAUSA REAL DEL TIRÓN: cada tarjeta tenía su propia transformación
   3D (perspective + rotateY + rotateX). Con 224 en una sola fila el
   navegador rehace esa proyección en cada cuadro del desplazamiento.
   Medido: 54.7 ms por cuadro con 3D en todas, 18.4 ms con las normales
   planas. Solo la elegida conserva el 3D, que es donde se nota. */
#feat-row { perspective: none; }
#feat-row .game-card { transform: none; box-shadow: 0 10px 20px rgba(0,0,0,.55); }
#feat-row .game-card.es-elegida {
  transform: perspective(900px) rotateY(-11deg) rotateX(2deg) scale(1.12) translateY(-10px);
  box-shadow: 0 26px 50px rgba(0,0,0,.72), 14px 10px 26px rgba(0,0,0,.45), 0 0 30px var(--glow, rgba(0,0,0,.4));
}

/* La portada de Steam es 600x900 (2:3). Al mostrarla en esa misma
   proporción se ve completa, sin recortar la cabeza ni el logotipo. */
.shop-arte { aspect-ratio: 2/3; }

/* Portadas verticales completas en las dos secciones: la de Steam mide
   600x900, así que 2:3 la muestra entera, sin recortes. */
.gc-arte   { aspect-ratio: 2/3 !important; }
.shop-arte { aspect-ratio: 2/3 !important; }
/* las portadas ahora son enlaces: que no se vean como texto de enlace */
a.gc-arte, a.shop-arte { display: block; text-decoration: none; color: inherit; cursor: pointer; }

/* ===========================================================
   Carrusel: estante de carátulas
   Solo la portada, esquinas redondeadas y el color del juego en el borde.
   =========================================================== */
#feat-row .game-card {
  position: relative;
  width: var(--gc-w, 220px); flex-shrink: 0;
  background: #0a0a0a;
  border: 2px solid var(--ring, var(--border-default));
  border-radius: 14px;
  overflow: hidden;
  display: block;
  box-shadow: 0 10px 24px rgba(0,0,0,.6);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
#feat-row .game-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(0,0,0,.7); }
#feat-row .gc-arte {
  display: block; width: 100%; aspect-ratio: 2/3;
  border-radius: 0; overflow: hidden; background: #0a0a0a;
  border: none; padding: 0; margin: 0;
}
#feat-row .gc-arte img { display: block; width: 100%; height: 100%; object-fit: cover; }
#feat-row .game-card.es-elegida {
  transform: perspective(900px) rotateY(-9deg) rotateX(2deg) scale(1.08) translateY(-8px);
  box-shadow: 0 26px 50px rgba(0,0,0,.72), 0 0 30px var(--glow, rgba(0,0,0,.4));
  z-index: 2; margin: 0 14px;
}
#feat-row .gc-pronto {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  background: rgba(0,0,0,.78); color: var(--brand);
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 8px; border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------
   Carrusel: iconos de la tarjeta (arriba a la derecha)
   Corazón, WhatsApp y compartir en columna. Al activarse el
   fondo se llena de verde lima y el icono se pinta de gris.
   ----------------------------------------------------------- */
.gc-iconos {
  position: absolute; z-index: 4; top: 8px; right: 8px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: auto;
}
.gc-ico {
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(5,5,5,.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink, #fff);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gc-ico svg { width: 15px; height: 15px; display: block; }
.gc-ico:hover,
.gc-ico:focus-visible,
.gc-fav[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #53565a;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(205,253,81,.22), 0 4px 14px rgba(205,253,81,.35);
}
.gc-ico:hover svg,
.gc-ico:focus-visible svg,
.gc-fav[aria-pressed="true"] svg {
  fill: #53565a;
  stroke: #53565a;
}
.gc-ico:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* la tarjeta elegida mantiene los iconos legibles sobre el giro 3D */
#feat-row .game-card.es-elegida .gc-iconos { transform: translateZ(1px); }

@media (max-width: 640px) {
  .gc-ico { width: 27px; height: 27px; }
  .gc-ico svg { width: 13px; height: 13px; }
}

/* ===========================================================
   MODO SELECCIÓN — SOLO ESCRITORIO
   Al llegar, el hero entra a tamaño completo. En cuanto el
   visitante elige un juego del carrusel, el hero se compacta y
   el estante de portadas sube a la misma pantalla: así se puede
   saltar de un gameplay a otro sin bajar nunca.
   En móvil esto no se aplica: ahí la pantalla no da y el invento
   rompía el ancho del documento.
   =========================================================== */
@media (min-width: 901px) {
  body.modo-seleccion .hero-sec,
  body.modo-seleccion .cat-pills,
  body.modo-seleccion .feat-cuenta,
  body.modo-seleccion .feat-row,
  body.modo-seleccion #feat-row .game-card {
    transition: height .45s cubic-bezier(.2,.7,.3,1),
                padding .45s cubic-bezier(.2,.7,.3,1),
                width .45s cubic-bezier(.2,.7,.3,1),
                font-size .3s ease;
  }
}

/* ===========================================================
   AL ELEGIR: HERO Y ESTANTE EN LA MISMA PANTALLA
   La pantalla no da para el hero a tamaño completo Y el carrusel a
   la vez. Hay que comprar el espacio, y se compra donde no duele:
     · se recorta el aire del carril, que tenía 73 px de relleno
       alrededor de unas portadas de 242
     · se quita la línea de "235 juegos en el catálogo", que ya está
       escrita en la pestaña TODOS de arriba
     · las portadas bajan a 200 px: siguen leyéndose de sobra
   Con eso el hero se queda con todo lo que sobra, que es bastante
   más de lo que tenía el modo compacto viejo.
   El alto del reproductor manda sobre su ancho (16:9), no al revés:
   calcularlo por el ancho de la pantalla lo sacaba por arriba del
   hero en las laptops anchas.
   =========================================================== */
@media (min-width: 901px) {
  body.modo-seleccion {
    /* lo que ocupa todo lo que NO es el hero: cabecera fija, pestañas
       de categoría y el carril de portadas ya recortado */
    /* respaldo por si el JavaScript no llega a medir; el valor real lo
       escribe medirSeleccion() en tienda.js midiendo la pantalla */
    --hero-alto: clamp(300px, calc(100vh - 476px), 620px);
  }
  body.modo-seleccion .hero-sec { height: var(--hero-alto) !important; }

  body.modo-seleccion .hero-player-col {
    width: min(760px, calc(50% - 20px), calc((var(--hero-alto) - 150px) * 16 / 9)) !important;
    max-width: calc(50% - 20px) !important;
  }

  /* la tipografía de la ficha baja un escalón para que COMPRAR siga dentro */
  body.modo-seleccion .hero-info h1,
  body.modo-seleccion .hero-info .hero-price { font-size: 32px !important; line-height: 38px !important; }
  body.modo-seleccion .hero-info .hero-pub   { font-size: 15px !important; line-height: 21px !important; }
  body.modo-seleccion .hero-info .hero-plat  { font-size: 13px !important; padding: 5px 12px !important; }
  body.modo-seleccion .hero-info .hero-nota,
  body.modo-seleccion .hero-info .hero-votos,
  body.modo-seleccion .hero-info .hero-ver   { font-size: 14px !important; }
  body.modo-seleccion .hero-info .hero-rate svg { width: 17px !important; height: 17px !important; }
  body.modo-seleccion .hero-info .btn-primary   { padding: 13px 30px !important; font-size: 15px !important; }
  body.modo-seleccion .hero-info .icon-btn      { width: 46px !important; height: 46px !important; }
  body.modo-seleccion .hero-info   { gap: var(--space-3) !important; }
  body.modo-seleccion .hero-sombra { gap: 9px !important; }
  body.modo-seleccion .hero-cb { margin-top: 2px !important; padding: 4px 9px !important; font-size: 11px !important; }

  /* el espacio muerto entre el hero y el estante se recorta */
  body.modo-seleccion .cat-pills   { padding: var(--space-3) var(--space-6) !important; }
  body.modo-seleccion .feat-cuenta { display: none !important; }
  body.modo-seleccion .feat-row    { padding: var(--space-3) var(--space-6) !important; }
  body.modo-seleccion #feat-row .game-card { width: 150px !important; }
}

/* Pantallas cortas (una laptop de 768 px de alto): ahí el hero ya topó
   con su mínimo y el carril se salía 31 px. Se le pide un poco más a
   las portadas, que es lo que menos duele. */
@media (min-width: 901px) and (max-height: 820px) {
  body.modo-seleccion { --hero-alto: clamp(300px, calc(100vh - 446px), 620px); }
  body.modo-seleccion #feat-row .game-card { width: 128px !important; }
  body.modo-seleccion .hero-info h1,
  body.modo-seleccion .hero-info .hero-price { font-size: 27px !important; line-height: 32px !important; }
  body.modo-seleccion .hero-info .btn-primary { padding: 11px 24px !important; font-size: 14px !important; }
}

/* En móvil NO hay modo selección: el estante fijo ensanchaba el documento,
   el navegador alejaba la página y todo quedaba diminuto. El teléfono se
   queda exactamente como estaba: hero completo y carrusel en su sitio. */

/* ===========================================================
   ENFOQUE 3D DEL ESTANTE
   El mismo efecto de "La misma curiosidad" de la ficha: la
   portada del centro manda, las de los lados giran y se apagan.
   El transform lo calcula el JS tarjeta por tarjeta; aquí sólo
   va la perspectiva, la suavidad y el estado de la elegida.
   =========================================================== */
#feat-row { perspective: 1400px; }
#feat-row .game-card {
  transform-origin: center center;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.3,1),
              opacity   .45s ease,
              filter    .45s ease,
              box-shadow .3s ease;
}
/* durante el arrastre la transición estorba: el giro debe ir pegado al dedo */
#feat-row.cf-vivo .game-card { transition: box-shadow .3s ease; }
/* el brillo por filtro repinta la portada entera en cada cuadro: el
   oscurecido lo da la opacidad, que el navegador compone sin repintar */

/* el hover ya no levanta la tarjeta: lo haría pelear con el enfoque */
#feat-row .game-card:hover { transform: none; }
#feat-row .game-card:hover { box-shadow: 0 18px 38px rgba(0,0,0,.75); }

/* la elegida conserva su aro y su resplandor, pero no impone transform:
   quien manda sobre la posición es el enfoque del carril */
#feat-row .game-card.es-elegida {
  transform: none;
  margin: 0;
  box-shadow: 0 26px 50px rgba(0,0,0,.72), 0 0 30px var(--glow, rgba(0,0,0,.4));
  border-color: var(--brand);
}

/* -----------------------------------------------------------
   Muro de opiniones: que no ensanche el documento
   En móvil el muro quedaba como elemento flexible con min-width
   automática, así que tomaba el ancho de su contenido (6600 px).
   El documento crecía con él y el teléfono alejaba toda la página
   para que cupiera: por eso se veía diminuta.
   ----------------------------------------------------------- */
.rev-wall, .rev-row {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.rev-row { overflow: hidden; }

/* ===========================================================
   MODO SELECCIÓN EN MÓVIL (sin posiciones fijas)
   Objetivo: que al elegir un juego se vea el reproductor, la
   ficha completa y el estante de portadas en la misma pantalla,
   igual que en escritorio. El espacio sale de recortar el
   relleno muerto de arriba del hero, no de tapar nada.
   =========================================================== */
@media (max-width: 900px) {
  body.modo-seleccion .hero-sec,
  body.modo-seleccion .hero-info,
  body.modo-seleccion .cat-pills,
  body.modo-seleccion .feat-cuenta,
  body.modo-seleccion .feat-row,
  body.modo-seleccion #feat-row .game-card {
    transition: padding .4s cubic-bezier(.2,.7,.3,1),
                height  .4s cubic-bezier(.2,.7,.3,1),
                width   .4s cubic-bezier(.2,.7,.3,1),
                gap     .4s ease, font-size .3s ease;
  }

  /* 180 px de arte sobre el reproductor es un lujo que aquí no cabe */
  /* el hero llena lo que la pantalla deja libre sobre el estante, para que
     el arte del juego se vea completo y no como una franja */
  body.modo-seleccion .hero-sec {
    padding-top: 10px !important;
    /* El suelo es obligatorio: sin el, en una pantalla corta la resta
       daba 120 px de hero y el bloque de "lo mas vendido" se salia por
       arriba, donde el recorte del hero se lo comia. */
    /* El valor de respaldo vale si el JavaScript no llega a medir; el
       bueno lo escribe medirSeleccion() en tienda.js restando de verdad
       la cabecera, las pestanas, el estante y la barra flotante. */
    min-height: var(--hero-movil, max(330px, calc(100svh - 508px))) !important;
    justify-content: flex-start;
  }

  body.modo-seleccion .hero-info {
    padding: var(--space-3) var(--space-4) var(--space-4) !important;
    gap: 7px !important;
  }
  body.modo-seleccion .hero-sombra { gap: 7px !important; }
  body.modo-seleccion .hero-rankrow { gap: 9px !important; }
  body.modo-seleccion .hero-rank-ico { width: 24px !important; height: 22px !important; }
  body.modo-seleccion .hero-rank-t { font-size: 13px !important; line-height: 17px !important; }
  body.modo-seleccion .hero-rank    { font-size: 12px !important; line-height: 17px !important; }
  body.modo-seleccion .hero-info h1 { font-size: 20px !important; line-height: 24px !important; }
  body.modo-seleccion .hero-info .hero-pub { font-size: 12px !important; line-height: 15px !important; }
  body.modo-seleccion .hero-info .pill { font-size: 10px !important; padding: 3px 9px !important; }
  body.modo-seleccion .hero-info .hero-price { font-size: 20px !important; line-height: 24px !important; }
  body.modo-seleccion .hero-info .btn-primary { padding: 11px 24px !important; }
  body.modo-seleccion .hero-info .icon-btn { width: 40px !important; height: 40px !important; }

  /* el aire entre la ficha y el estante se recorta, no se elimina */
  body.modo-seleccion .cat-pills   { padding: 8px var(--space-4) !important; }
  body.modo-seleccion .feat-cuenta { padding: 8px var(--space-4) 0 !important; }
  body.modo-seleccion .feat-row    { padding: 10px var(--space-4) 12px !important; gap: 12px !important; }

  /* portadas más chicas: entra la fila completa con su efecto 3D */
  body.modo-seleccion #feat-row .game-card { width: 138px !important; }
  body.modo-seleccion .feat-flecha { display: none !important; }
}

/* Teléfonos cortos (iPhone SE y parecidos): aquí no caben las dos cosas
   enteras. Cede lo secundario — estudio, plataforma y estrellas — y se
   conserva lo que decide la compra: el gameplay, el título, el precio y
   el botón. Esos datos siguen a un dedo de distancia, en la ficha. */
@media (max-width: 900px) and (max-height: 780px) {
  body.modo-seleccion .hero-sec {
    padding-top: 6px !important;
    min-height: max(268px, calc(100svh - 464px)) !important;
  }
  body.modo-seleccion .hero-info .hero-pub,
  body.modo-seleccion .hero-info .pill,
  body.modo-seleccion .hero-info .hero-rate { display: none !important; }
  body.modo-seleccion .hero-info { padding: 10px var(--space-4) 12px !important; gap: 6px !important; }
  body.modo-seleccion .hero-sombra { gap: 6px !important; }
  body.modo-seleccion .hero-info h1 { font-size: 18px !important; line-height: 22px !important; }
  body.modo-seleccion .hero-info .hero-price { font-size: 18px !important; line-height: 22px !important; }
  body.modo-seleccion .hero-info .btn-primary { padding: 10px 22px !important; }
  body.modo-seleccion .hero-info .icon-btn { width: 36px !important; height: 36px !important; }
  body.modo-seleccion .cat-pills   { padding: 6px var(--space-4) !important; }
  body.modo-seleccion .feat-cuenta { padding: 6px var(--space-4) 0 !important; }
  body.modo-seleccion .feat-row    { padding: 6px var(--space-4) 6px !important; gap: 10px !important; }
  body.modo-seleccion #feat-row .game-card { width: 96px !important; }
}

/* ===========================================================
   HERO MÓVIL — ARTE A PANTALLA COMPLETA Y FICHA SOBRE EL VIDEO
   Tres cambios pedidos para el teléfono:
   1) el arte del juego ya no es una franja de 180 px: cubre
      todo el alto del hero, como en escritorio;
   2) la ficha (posición, título, precio y COMPRAR) se monta
      sobre el gameplay, abajo a la izquierda, con su velo para
      que el texto se lea sobre cualquier escena;
   3) lo secundario (estudio, plataforma, estrellas) sale del
      hero: en un teléfono roba las cuatro líneas que decide
      la compra, y sigue completo en la ficha del juego.
   =========================================================== */
@media (max-width: 900px) {
  .hero-sec { position: relative; }

  /* el arte cubre todo el hero, no una banda */
  .hero-bg, .hero-velo-h, .hero-velo-v { height: 100% !important; }
  .hero-bg { background-size: cover; background-position: center top; }
  /* velo vertical más marcado abajo: ahí se apoya el texto */
  .hero-velo-v {
    background: linear-gradient(180deg,
      rgba(5,5,5,.55) 0%, rgba(5,5,5,.15) 26%,
      rgba(5,5,5,.55) 68%, rgba(5,5,5,.94) 100%) !important;
  }

  .hero-player-col { position: relative; z-index: 2; }

  /* la ficha sube y se monta sobre el tercio bajo del gameplay */
  .hero-info {
    position: relative; z-index: 3;
    margin-top: 10px !important;
    padding: 0 var(--space-4) var(--space-5) !important;
    gap: 6px !important;
    align-items: flex-start; text-align: left;
    background: linear-gradient(180deg, rgba(5,5,5,.55) 0%,
                rgba(5,5,5,.78) 40%, rgba(5,5,5,.9) 100%);
  }
  .hero-sombra { gap: 6px !important; align-items: flex-start; }
  .hero-info > *, .hero-sombra > * { text-align: left; }

  /* fuera del hero: siguen enteros en la ficha del juego */
  .hero-info .hero-pub,
  .hero-info .pill,
  .hero-info .hero-rate { display: none !important; }

  .hero-rankrow { gap: 8px !important; }
  .hero-rank-ico { width: 20px !important; height: 18px !important; }
  .hero-rank-t { font-size: 11px !important; line-height: 14px !important; }
  .hero-rank    { font-size: 10px !important; line-height: 14px !important; }
  .hero-info h1 { font-size: 17px !important; line-height: 21px !important;
                  text-shadow: 0 2px 12px rgba(0,0,0,.9); }
  .hero-info .hero-price { font-size: 17px !important; line-height: 21px !important;
                  text-shadow: 0 2px 12px rgba(0,0,0,.9); }
  .hero-info .hero-btns { gap: 10px !important; }
  .hero-info .btn-primary { padding: 10px 22px !important; font-size: 12px !important; }
  .hero-info .icon-btn { width: 36px !important; height: 36px !important; }
  .hero-info .icon-btn svg { width: 17px !important; height: 17px !important; }
}

/* El gameplay llena el hero en el teléfono: así el arte se ve a pantalla
   completa y la ficha se apoya de verdad en su borde inferior, no a media
   altura. El video recorta (object-fit: cover), no se deforma. */
@media (max-width: 900px) {
  body.modo-seleccion .hero-sec { display: flex; flex-direction: column; }
  /* la columna se ciñe al reproductor: si se estira, deja 140 px de aire
     invisible debajo y la ficha ya no alcanza a montarse sobre el video */
  body.modo-seleccion .hero-player-col {
    flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column;
  }
  /* el reproductor vuelve a ser un panel: si llena el hero, tapa el arte
     del juego y el fondo deja de verse. Se queda en 16:9 y el arte respira
     alrededor y por debajo. */
  body.modo-seleccion .hero-player {
    flex: 0 0 auto; aspect-ratio: 16/9 !important;
  }
  /* la ficha va DEBAJO del gameplay: encima tapaba la escena justo donde
     pasa la acción, y un video que no se ve no vende nada */
  body.modo-seleccion .hero-info { margin-top: 10px !important; }
}

/* El estante del teléfono como panel flotante: se despega del borde, se
   redondea y se apoya sobre un velo oscuro, para que se lea como una capa
   por encima del arte y no como otra franja pegada. */
@media (max-width: 900px) {
  body.modo-seleccion .feat-sec {
    background: linear-gradient(180deg, rgba(8,8,10,.92), rgba(8,8,10,.99)) !important;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 -14px 34px rgba(0,0,0,.6);
    margin-top: -14px;
    position: relative; z-index: 4;
  }
  body.modo-seleccion .feat-cuenta { color: rgba(255,255,255,.72) !important; }
  body.modo-seleccion .cat-pills { position: relative; z-index: 5; }
}

/* Teléfonos cortos: el reproductor cede ancho (y con ello alto, porque es
   16:9) para que el estante no quede debajo de la barra flotante. */
@media (max-width: 900px) and (max-height: 780px) {
  body.modo-seleccion .hero-player { max-width: 296px; margin: 0 auto; }
  body.modo-seleccion .hero-info { padding: 0 var(--space-4) 8px !important; gap: 4px !important; }
  body.modo-seleccion .hero-sombra { gap: 4px !important; }
  body.modo-seleccion .hero-info h1,
  body.modo-seleccion .hero-info .hero-price { font-size: 15px !important; line-height: 19px !important; }
  body.modo-seleccion .hero-info .btn-primary { padding: 9px 20px !important; font-size: 11px !important; }
  body.modo-seleccion .hero-info .icon-btn { width: 32px !important; height: 32px !important; }
}

/* ===========================================================
   HERO MÓVIL v2 — LA COMPOSICIÓN DE ESCRITORIO EN EL TELÉFONO
   Arte cubriendo toda la sección, ficha a la izquierda en letra
   chica, y el reproductor como panel pequeño abajo a la derecha.
   El texto se reserva su mitad izquierda, así nada se encima.
   =========================================================== */
@media (max-width: 900px) {
  body.modo-seleccion .hero-sec {
    display: block !important;
    position: relative;
    padding: 0 !important;
    overflow: hidden;
  }

  /* el arte cubre la sección completa, de arriba abajo */
  body.modo-seleccion .hero-bg,
  body.modo-seleccion .hero-velo-h,
  body.modo-seleccion .hero-velo-v { height: 100% !important; inset: 0 !important; }
  body.modo-seleccion .hero-bg { background-size: cover !important; background-position: center !important; }
  body.modo-seleccion .hero-velo-h {
    background: linear-gradient(90deg, rgba(5,5,5,.93) 0%, rgba(5,5,5,.72) 48%,
                rgba(5,5,5,.38) 72%, rgba(5,5,5,.55) 100%) !important;
  }
  body.modo-seleccion .hero-velo-v {
    background: linear-gradient(180deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,.1) 30%,
                rgba(5,5,5,.45) 74%, rgba(5,5,5,.88) 100%) !important;
  }

  /* reproductor: panel chico, anclado abajo a la derecha */
  body.modo-seleccion .hero-player-col {
    position: absolute !important;
    right: 12px !important; bottom: 12px !important;
    left: auto !important; top: auto !important;
    width: 58% !important; max-width: 236px !important;
    padding: 0 !important; gap: 6px !important; z-index: 3;
  }
  body.modo-seleccion .hero-player { aspect-ratio: 16/9 !important; max-width: none; margin: 0; }
  /* el aviso de "gamers viendo" no cabe sobre un panel de 206 px */
  body.modo-seleccion .hero-watch { display: none !important; }
  body.modo-seleccion .pl-sonido { width: 28px !important; height: 28px !important;
                                   top: 6px !important; right: 6px !important; }
  body.modo-seleccion .pl-sonido svg { width: 13px !important; height: 13px !important; }

  /* ficha: mitad izquierda, letra chica, sin montarse sobre el video */
  body.modo-seleccion .hero-info {
    /* el !important es obligado: una regla móvil anterior fija position:static,
       y sin position el z-index no cuenta y los velos oscuros pintan encima
       del texto, que es justo lo que lo apagaba */
    position: relative !important; z-index: 2;
    margin-top: 0 !important;
    width: 100% !important; max-width: 100% !important;
    padding: var(--space-4) 50% var(--space-5) var(--space-4) !important;
    gap: 5px !important;
    background: none !important;
    align-items: flex-start; text-align: left;
  }
  body.modo-seleccion .hero-sombra { gap: 5px !important; align-items: flex-start; }

  /* el bloque de "lo más vendido" ya vive dentro de la columna del
     reproductor (lo mueve el JS), así que sólo necesita medidas */
  body.modo-seleccion .hero-player-col .hero-rankrow {
    width: 100% !important; margin: 0 0 2px !important;
    gap: 7px !important; align-items: flex-start;
    text-shadow: 0 2px 10px rgba(0,0,0,.9);
  }
  body.modo-seleccion .hero-rank-ico { width: 17px !important; height: 16px !important; }
  body.modo-seleccion .hero-rank-t { font-size: 10px !important; line-height: 13px !important; }
  body.modo-seleccion .hero-rank    { font-size: 9px  !important; line-height: 13px !important; }
  body.modo-seleccion .hero-info h1 { font-size: 15px !important; line-height: 19px !important;
                                      text-shadow: 0 2px 10px rgba(0,0,0,.9); }
  body.modo-seleccion .hero-info .hero-price { font-size: 15px !important; line-height: 19px !important;
                                      text-shadow: 0 2px 10px rgba(0,0,0,.9); }
  body.modo-seleccion .hero-info .btn-primary { padding: 9px 18px !important; font-size: 11px !important; }
  body.modo-seleccion .hero-info .icon-btn { width: 32px !important; height: 32px !important; }
  body.modo-seleccion .hero-info .icon-btn svg { width: 15px !important; height: 15px !important; }
  body.modo-seleccion .hero-info .hero-btns { gap: 8px !important; }
}

/* -----------------------------------------------------------
   El destello que barre el reproductor se apaga cuando hay
   gameplay corriendo. Encima de un video obliga al navegador a
   mezclar la imagen en cada cuadro, y en un teléfono eso se ve
   como un parpadeo. Sobre la portada quieta no cuesta nada, así
   que ahí se queda.
   ----------------------------------------------------------- */
.hero-player.reproduciendo .gp-sweep { animation: none !important; opacity: 0; }

/* el velo del reproductor también se aligera con el video corriendo:
   oscurecía la escena sin aportar nada, porque el texto ya no va encima */
.hero-player.reproduciendo .pl-velo {
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.3) 100%);
}

/* ===========================================================
   BANDA DE TABLETA (621 a 900 px)
   El diseño compacto estaba afinado para 390 px. En una tableta
   dejaba la ficha en una esquina, el reproductor diminuto en la
   otra y un hueco enorme en medio. Aquí las medidas crecen con
   la pantalla en vez de quedarse fijas en píxeles.
   =========================================================== */
@media (min-width: 621px) and (max-width: 900px) {
  /* el reproductor aprovecha el ancho disponible */
  body.modo-seleccion .hero-player-col {
    width: 52% !important;
    max-width: 440px !important;
    right: 24px !important; bottom: 24px !important;
  }

  /* la ficha se centra en vertical: deja de colgar de la esquina */
  body.modo-seleccion .hero-sec { display: flex !important; align-items: center; }
  body.modo-seleccion .hero-info {
    padding: var(--space-5) 52% var(--space-5) var(--space-6) !important;
    gap: 10px !important;
  }
  body.modo-seleccion .hero-info h1,
  body.modo-seleccion .hero-info .hero-price { font-size: 26px !important; line-height: 32px !important; }
  body.modo-seleccion .hero-rank-t { font-size: 14px !important; line-height: 18px !important; }
  body.modo-seleccion .hero-rank   { font-size: 13px !important; line-height: 18px !important; }
  body.modo-seleccion .hero-rank-ico { width: 24px !important; height: 22px !important; }
  body.modo-seleccion .hero-info .btn-primary { padding: 13px 30px !important; font-size: 14px !important; }
  body.modo-seleccion .hero-info .icon-btn { width: 44px !important; height: 44px !important; }
  body.modo-seleccion .pl-sonido { width: 34px !important; height: 34px !important; }
  body.modo-seleccion .pl-sonido svg { width: 16px !important; height: 16px !important; }

  /* el hero necesita más alto: el estante también cabe más grande */
  body.modo-seleccion .hero-sec { min-height: max(380px, calc(100svh - 470px)) !important; }
  body.modo-seleccion .feat-row { padding: 14px var(--space-5) 16px !important; gap: 16px !important; }
}

/* -----------------------------------------------------------
   Las portadas del estante dejan de medir un número fijo:
   crecen con la pantalla, con un suelo y un techo.
   ----------------------------------------------------------- */
@media (max-width: 900px) {
  body.modo-seleccion #feat-row .game-card {
    /* Mandan las dos medidas de la pantalla: el ancho, para que entren
       dos portadas y se asome la tercera, y el alto, para que una
       pantalla corta no acabe con la portada debajo del menu. */
    width: clamp(140px, min(44vw, 21svh), 230px) !important;
  }
  body.modo-seleccion .feat-row { padding: 12px var(--space-4) 14px !important; gap: 14px !important; }
}
@media (max-width: 900px) and (max-height: 780px) {
  body.modo-seleccion #feat-row .game-card {
    width: clamp(112px, min(36vw, 19svh), 170px) !important;
  }
}

/* ===========================================================
   TELÉFONO: la ficha se ancla abajo a la izquierda
   Deja de ir en el flujo y pasa a apoyarse en la esquina
   inferior izquierda del hero, en letra más chica, frente al
   reproductor que vive en la esquina opuesta.
   =========================================================== */
@media (max-width: 620px) {
  body.modo-seleccion .hero-info {
    position: absolute !important;
    left: 0 !important; right: auto !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    /* el reproductor ocupa 58% a la derecha: la ficha reserva 63% para
       no meterse debajo, con un dedo de aire entre los dos */
    padding: 0 63% 14px var(--space-4) !important;
    gap: 4px !important;
    justify-content: flex-end;
  }
  body.modo-seleccion .hero-sombra { gap: 4px !important; }

  body.modo-seleccion .hero-info h1 { font-size: 13px !important; line-height: 17px !important; }
  body.modo-seleccion .hero-info .hero-price { font-size: 14px !important; line-height: 18px !important; }
  body.modo-seleccion .hero-info .btn-primary { padding: 8px 16px !important; font-size: 10px !important; }
  body.modo-seleccion .hero-info .icon-btn { width: 28px !important; height: 28px !important; }
  body.modo-seleccion .hero-info .icon-btn svg { width: 13px !important; height: 13px !important; }
  body.modo-seleccion .hero-info .hero-btns { gap: 7px !important; }

  body.modo-seleccion .hero-rank-t { font-size: 9px !important; line-height: 12px !important; }
  body.modo-seleccion .hero-rank   { font-size: 8px !important; line-height: 12px !important; }
  body.modo-seleccion .hero-rank-ico { width: 15px !important; height: 14px !important; }
}

/* ===========================================================
   EL SELLO DE "LO MÁS VENDIDO", ENCIMA DEL GAMEPLAY
   Antes vivía junto al título, en la columna de texto. Ahí competía
   con el nombre del juego y el precio por la misma mirada. Encima del
   reproductor hace de titular del video: se lee primero y empuja a
   mirar el gameplay. El JS lo mueve de verdad dentro del documento;
   aquí sólo van sus medidas en escritorio.
   =========================================================== */
@media (min-width: 901px) {
  .hero-player-col .hero-rankrow {
    width: 100%; margin: 0 0 2px;
    align-items: flex-start;
    text-shadow: 0 2px 12px rgba(0,0,0,.9);
  }
  .hero-player-col .hero-rank-ico { width: 26px; height: 23px; }
  .hero-player-col .hero-rank-t   { font-size: 17px; line-height: 22px; }
  .hero-player-col .hero-rank     { font-size: 15px; line-height: 21px; }
}

/* ===========================================================
   PROMO 3X2 EN EL CARRITO
   Lo que el cliente tiene que ver sin preguntar: qué juego se
   lleva gratis, cuánto se ahorra y cuánto paga al final. Por eso
   el descuento no va solo como una cifra: va con el nombre del
   juego regalado al lado.
   =========================================================== */
.linea.es-regalo { position: relative; }
.linea-tachado { text-decoration: line-through; opacity: .55; font-weight: 600; }
.linea-gratis {
  display: inline-block; margin-left: 6px; padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--brand); color: var(--on-brand);
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  vertical-align: 1px;
}
.total-sub {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--muted); margin-bottom: 6px;
}
.total-promo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 12px; font-weight: 700; color: var(--brand);
  margin-bottom: 10px;
}
.total-promo span:first-child { line-height: 1.35; }
.total-promo span:last-child { white-space: nowrap; }
/* el empujón a completar la terna: informativo, no un grito */
.promo-falta {
  margin: 0 0 10px; padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(200,255,0,0.08);
  border: 1px solid rgba(200,255,0,0.22);
  font-size: 12px; line-height: 1.4; color: var(--ink);
}

/* El menú flotante vive encima de todo y tapaba el total del carrito,
   justo la cifra que el cliente vino a ver. El pie del panel se aparta
   lo que mide la barra más su separación. */
@media (max-width: 640px) {
  .panel-pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* ===========================================================
   CASHBACK POR TRAMOS
   El porcentaje ya no es uno solo para toda la tienda: cada juego
   devuelve según lo que cuesta. En el carrito se enseña el dinero,
   no el porcentaje: "$18.00" convence más que "10%".
   =========================================================== */
.linea-cb {
  margin-top: 3px; font-size: 11px; font-weight: 600;
  color: var(--ink-muted, #a6abb4);
}
.linea-cb span {
  display: inline-block; margin-left: 5px; padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: rgba(200,255,0,0.14); color: var(--brand);
  font-size: 10px; font-weight: 800;
}
.total-cb {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: -6px 0 12px; font-size: 12px; font-weight: 700; color: var(--brand);
}
/* el sello junto al precio, en el hero y en la ficha del juego */
.hero-cb {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 5px 10px; border-radius: var(--radius-sm);
  background: rgba(200,255,0,0.12);
  border: 1px solid rgba(200,255,0,0.28);
  font-size: 12px; font-weight: 600; color: var(--ink);
  width: fit-content;
}
.hero-cb b { color: var(--brand); font-weight: 800; }
@media (max-width: 620px) {
  .hero-cb { font-size: 9px; padding: 3px 7px; margin-top: 3px; gap: 4px; }
}

/* la letra chica del cashback: la vigencia va donde se ve, no escondida */
.total-cb-nota {
  margin: -8px 0 12px; font-size: 11px; line-height: 1.4;
  color: var(--ink-muted, #a6abb4);
}

/* la vigencia va en su propia línea bajo el sello del hero */
.hero-cb { flex-wrap: wrap; }
.hero-cb i {
  flex-basis: 100%; font-style: normal;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-muted, #a6abb4); text-transform: uppercase;
}
@media (max-width: 620px) { .hero-cb i { font-size: 8px; } }

/* una redacción u otra, según quepa */
.hero-cb .cb-corto { display: none; }
@media (max-width: 620px) {
  .hero-cb .cb-largo { display: none; }
  .hero-cb .cb-corto { display: inline; }
  .hero-cb { font-size: 8px; padding: 3px 6px; gap: 3px; line-height: 1.3; }
  .hero-cb i { font-size: 7px; }
}

/* ===========================================================
   SELLOS DE CONFIANZA EN EL PIE
   El de TrustedSite llega con su propio tamaño y fondo claro, así
   que no se le toca el color: se le da aire y un sitio fijo, justo
   encima de la línea legal, que es donde el visitante busca las
   señales de que la tienda es seria.
   =========================================================== */
.foot-sellos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
/* Mientras el hueco no tenga el sello dentro, la franja no existe: un
   borde y un espacio vacíos en el pie se ven como un error de maquetación.
   :empty no sirve aquí porque el hueco lleva un comentario y espacios. */
.foot-sellos:not(:has(.sello-trustedsite > *)) { display: none; }
/* el sello ya trae su propio fondo y medidas: aqui solo se centra */
.sello-trustedsite .trustedsite-trustmark { display: block; }
/* El sello de TrustedSite se dibuja solo y trae su propio aspecto.
   Antes le ponia aqui un fondo blanco con line-height:0, pensado para
   una imagen: eso aplastaba lo que su script mete dentro y salia una
   pastilla diminuta. Ahora solo se reserva el sitio y se centra. */
.sello-trustedsite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 120px; min-height: 50px;
}
.sello-trustedsite img, .sello-trustedsite iframe { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .foot-sellos { padding: var(--space-4) var(--space-4); gap: var(--space-3); }
}

/* El segundo botón del carrito: pagar con tarjeta manda, pedir por
   WhatsApp sigue estando para quien prefiera hablar contigo. */
.btn-pedir-alt {
  margin-top: 8px;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-strong, rgba(255,255,255,.28)) !important;
}
.btn-pedir-alt:hover { border-color: var(--brand) !important; color: var(--brand) !important; }

/* ===========================================================
   QUE EL ENCABEZADO NO BRINQUE
   Al entrar en modo seleccion la pagina se acorta. Si en ese
   momento desaparece la barra de desplazamiento, el documento
   gana 15px de ancho de golpe y el logo, que va centrado, salta
   de lado. Reservando siempre ese hueco, no hay salto.
   =========================================================== */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* ===========================================================
   EL PRECIO DE LA TARJETA, COMO UNA ETIQUETA DE OFERTA
   Fuera "GLOBAL": ocupaba una linea entera para decir algo que
   el cliente da por hecho. En su lugar, el bloque que de verdad
   decide la compra: cuanto cuesta en la tienda oficial, cuanto
   te ahorras y cuanto pagas aqui.
   El tachado y el porcentaje SOLO salen cuando hay un precio de
   lista real. Sin ese dato, la tarjeta muestra el precio y ya:
   un descuento sobre un precio que nunca existio es publicidad
   enganosa, y en Mexico la multa la pone PROFECO.
   =========================================================== */
.shop-precio {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px 12px; margin: 2px -10px -10px;
  background: #0f0f0f; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-align: center;
}
.sp-rotulo {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  color: var(--ink-faint);
}
.sp-lista {
  font-size: 15px; font-weight: 600; color: rgba(255,255,255,.42);
  text-decoration: line-through; white-space: nowrap;
}
.sp-off {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  background: var(--brand); color: var(--on-brand);
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px; letter-spacing: .04em; white-space: nowrap;
}
.sp-ahora {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(19px, 2vw, 25px); line-height: 1.1;
  letter-spacing: -.02em; color: var(--brand); white-space: nowrap;
}
@media (max-width: 640px) {
  .shop-precio { padding: 8px 6px 10px; gap: 3px; }
  .sp-rotulo { font-size: 9px; }
  .sp-lista  { font-size: 13px; }
  .sp-off    { font-size: 11px; padding: 2px 8px; }
  .sp-ahora  { font-size: 18px; }
}

/* ===========================================================
   OPINIONES EN EL TELEFONO
   Cuatro carriles animados en una pantalla de 360px son un muro
   de 900px de alto donde no se lee nada: las tarjetas pasan de
   largo y el ojo no alcanza ninguna. En el telefono se queda con
   dos carriles, tarjetas mas anchas y el texto a un tamano que
   se pueda leer de verdad.
   =========================================================== */
@media (max-width: 640px) {
  .rev-wall { gap: 12px; margin-top: var(--space-5); }

  /* dos carriles bastan: el tercero y el cuarto solo anaden alto */
  .rev-row:nth-child(3),
  .rev-row:nth-child(4) { display: none; }

  .rev-track { gap: 12px !important; }
  .rev-track > div,
  .rev-card {
    width: min(78vw, 290px) !important;
    padding: 14px !important;
  }

  /* la tarjeta se despega del fondo: antes era gris sobre gris */
  .rev-card {
    background: #131315;
    border-color: rgba(255,255,255,.14);
  }
  .rev-texto { font-size: 14px !important; line-height: 21px !important; }
  .rev-fecha { font-size: 12px !important; }
  .rev-quien { font-size: 12px !important; }

  /* mas despacio: a la velocidad de escritorio no da tiempo a leer */
  .rev-a { animation-duration: 150s !important; }
  .rev-b { animation-duration: 168s !important; }

  /* la cabecera deja de pelearse por el ancho */
  .op-cab { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rate-bars { width: 100%; }
}

/* La linea que explica de donde vienen las opiniones. Va entre la
   cabecera y el muro: quien llega a gameplus.com.mx ve un sitio recien
   abierto, y conviene decirle que la trayectoria viene de antes. */
.op-desde {
  margin: 14px 0 0; font-size: 13px; line-height: 18px;
  letter-spacing: .02em; color: var(--ink-muted);
}
@media (max-width: 640px) {
  .op-desde { font-size: 12px; margin-top: 10px; }
}

/* ===========================================================
   FORMAS DE PAGO AL PIE DEL CARRITO
   Va debajo de los botones, que es cuando el cliente duda. Si el
   archivo de la imagen no existe, el propio bloque se quita solo:
   mas vale no ensenar nada que ensenar un icono roto justo en el
   momento de pagar.
   =========================================================== */
.panel-pagos {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 14px 0 2px; padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.pagos-txt {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  color: var(--ink-faint); text-transform: uppercase;
}
/* Los logos vienen en negro sobre blanco: Apple y Amex desaparecen
   sobre el panel oscuro. Van sobre una tarjeta blanca, igual que
   hacen las tiendas serias con esta tira. */
.panel-pagos img {
  display: block; width: 100%; max-width: 320px; height: auto;
  background: #fff; border-radius: 8px; padding: 7px 10px;
}
@media (max-width: 640px) {
  .panel-pagos { margin-top: 12px; padding-top: 12px; gap: 6px; }
  .panel-pagos img { max-width: 290px; }
  .pagos-txt { font-size: 9px; }
}

/* ===========================================================
   FRANJA DE CONFIANZA DEL PIE
   Cuatro hechos comprobables, no sellos prestados. Va justo
   encima de la linea legal, donde el visitante que duda baja a
   buscar senales de que la tienda es seria.
   =========================================================== */
.foot-confia {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.confia-item { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.confia-item svg {
  width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px;
  color: var(--brand);
}
.confia-item div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.confia-item b {
  font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--ink);
}
.confia-item span {
  font-size: 12px; line-height: 16px; color: var(--ink-muted);
}

@media (max-width: 1024px) {
  .foot-confia { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 640px) {
  .foot-confia {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: var(--space-5) var(--space-4) var(--space-4);
  }
  .confia-item svg { width: 20px; height: 20px; }
  .confia-item b { font-size: 12px; }
  .confia-item span { font-size: 11px; line-height: 15px; }
}

/* "Pagos procesados por Stripe" bajo la tira de formas de pago.
   Solo se dibuja cuando js/pago.js esta cargado, es decir cuando
   Stripe de verdad esta conectado: no se anuncia una pasarela que
   todavia no cobra. */
.pagos-stripe {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 2px;
  font-size: 10px; letter-spacing: .06em; color: var(--ink-faint);
}
.pagos-stripe img { height: 17px; width: auto; display: block; opacity: .9; }
@media (max-width: 640px) {
  .pagos-stripe { font-size: 9px; gap: 6px; }
  .pagos-stripe img { height: 15px; }
}