:root{--navy:#1F3A5F;--navy-2:#19304e}
/* ===== Tema Gamesphere =====
   Basado en gamesphere.mx: fondo azul noche, magenta #FF00FF, azul #0075FF,
   títulos en Orbitron, texto en Saira (alternativa libre a Eurostile) y botones
   en Share Tech (alternativa libre a ISOCPEUR). Fuentes con licencia OFL, servidas
   desde este mismo servidor. */
@font-face { font-family: "Orbitron"; font-weight: 500; font-display: swap; src: url(/fonts/orbitron-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 700; font-display: swap; src: url(/fonts/orbitron-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 800; font-display: swap; src: url(/fonts/orbitron-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 400; font-display: swap; src: url(/fonts/saira-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 500; font-display: swap; src: url(/fonts/saira-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 600; font-display: swap; src: url(/fonts/saira-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 700; font-display: swap; src: url(/fonts/saira-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Share Tech"; font-weight: 400; font-display: swap; src: url(/fonts/share-tech-latin-400-normal.woff2) format("woff2"); }

:root {
  --gs-noche: #0D121B; --gs-noche-2: #050714; --gs-panel: #161929; --gs-panel-2: #1D2136;
  --gs-linea: rgba(246, 244, 240, .10); --gs-texto: #F6F4F0; --gs-suave: #BCBCBB;
  --gs-magenta: #FF00FF; --gs-rosa: #F27EF2; --gs-azul: #0075FF; --gs-azul-claro: #4D9DFF;
  --ink: var(--gs-texto); --muted: var(--gs-suave); --line: var(--gs-linea); --bg: var(--gs-noche); --card: var(--gs-panel);
  --navy: var(--gs-azul); --accent: var(--gs-magenta);
  --ok: #4ADE80; --low: #FBBF24; --out: #F87171;
  --font: "Saira", "Segoe UI", system-ui, sans-serif;
  --titulo: "Orbitron", "Saira", sans-serif;
  --boton: "Share Tech", "Saira", sans-serif;
  --radius: 16px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(255, 0, 255, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(0, 117, 255, .14), transparent 60%),
    var(--gs-noche);
  background-attachment: fixed;
  color: var(--gs-texto);
  font-family: var(--font);
}
a { color: var(--gs-rosa); }
:focus-visible { outline: 3px solid var(--gs-rosa); outline-offset: 2px; }

/* Barra superior */
.topbar { background: rgba(5, 7, 20, .92); backdrop-filter: blur(8px); border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--gs-magenta), var(--gs-azul)) 1; }
.brand { gap: 12px; }
.brand-mark, .brand-text { display: none !important; }
.brand-logo { display: block !important; width: 168px; height: 40px; background: url(/marca-logo.png) left center / contain no-repeat; }
.brand-tag { display: inline-block !important; font-family: var(--titulo); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gs-noche); background: var(--gs-magenta); padding: 4px 10px; border-radius: 999px; }
.search input { background: rgba(255, 255, 255, .92); color: var(--gs-noche); border: 1px solid transparent; font-family: var(--font); font-size: 15.5px; }
.search input:focus { box-shadow: 0 0 0 3px rgba(255, 0, 255, .45); outline: none; }
.usernav .linkbtn, .usernav a.linkbtn { color: var(--gs-rosa); font-weight: 700; text-decoration: none; }
.usernav .linkbtn:hover { color: #fff; }
.username { color: var(--gs-suave); }
.linkbtn { color: var(--gs-rosa); }

/* Portada */
.hero { display: block; max-width: 1400px; margin: 0 auto; padding: 40px 20px 8px; text-align: center; }
.hero h1 { margin: 0; font-family: var(--titulo); font-weight: 700; font-size: clamp(24px, 4vw, 44px); color: var(--gs-texto); letter-spacing: .02em; }
.hero .par { color: var(--gs-magenta); text-shadow: 0 0 18px rgba(255, 0, 255, .7); }
.hero p { margin: 10px auto 0; max-width: 680px; color: var(--gs-azul-claro); font-size: 17px; }

/* Filtros */
.filters { background: rgba(22, 25, 41, .88); border: 1px solid var(--gs-linea); }
.filters h2 { font-family: var(--titulo); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.filters h3 { color: var(--gs-rosa); font-family: var(--titulo); font-size: 11.5px; letter-spacing: .14em; }
.catlist button { color: var(--gs-texto); }
.catlist button span { color: var(--gs-suave); }
.catlist button:hover { background: rgba(255, 255, 255, .05); }
.catlist button.active { background: linear-gradient(90deg, rgba(255, 0, 255, .22), rgba(0, 117, 255, .12)); color: #fff; box-shadow: inset 3px 0 0 var(--gs-magenta); }
.filters select, .sort select, .admin-bar select, .tbl select {
  background: var(--gs-noche); color: var(--gs-texto); border: 1px solid #2B3152; }
.check input { accent-color: var(--gs-magenta); }

/* Resultados */
.count { font-family: var(--titulo); font-weight: 700; letter-spacing: .04em; }
.meta { color: var(--gs-suave); }
.btn-ghost { background: var(--gs-panel); color: var(--gs-texto); border-color: #2B3152; }

/* Tarjetas */
.card { background: var(--gs-panel); border: 1px solid var(--gs-linea); }
.card:hover { box-shadow: 0 0 0 1px rgba(255, 0, 255, .55), 0 12px 34px rgba(255, 0, 255, .22); transform: translateY(-3px); }
.card-btn:focus-visible { outline-color: var(--gs-rosa); }
.card-img { background: #fff; border-bottom: 1px solid var(--gs-linea); }
.badge { background: var(--gs-magenta); color: var(--gs-noche); font-family: var(--titulo); font-weight: 800; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 14px rgba(255, 0, 255, .6); }
.card-brand { color: var(--gs-azul-claro); font-family: var(--titulo); font-size: 10.5px; letter-spacing: .14em; }
.card-name { color: var(--gs-texto); font-weight: 500; }
.card-price { color: #fff; font-family: var(--titulo); font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.card-price s, .pd-price s { color: #8A90A6; font-family: var(--font); }
.empty { background: var(--gs-panel); border-color: #2B3152; }

/* Paginación */
.pager button { background: var(--gs-panel); color: var(--gs-texto); border-color: #2B3152; font-family: var(--boton); }
.pager button[aria-current="page"] { background: linear-gradient(26deg, #fff 0%, var(--gs-azul) 100%); border-color: transparent; color: var(--gs-noche); box-shadow: 0 0 16px rgba(0, 117, 255, .5); }

/* Botones (estilo píldora con brillo, como en gamesphere.mx) */
.btn-primary { border-radius: 999px; font-family: var(--boton); font-size: 18px; font-weight: 400; letter-spacing: .02em; color: var(--gs-noche);
  background: linear-gradient(26deg, #fff 0%, var(--gs-azul) 100%); box-shadow: 0 0 18px rgba(255, 0, 255, .55); }
.btn-primary:hover { background: linear-gradient(26deg, #fff 0%, #3A92FF 100%); box-shadow: 0 0 26px rgba(255, 0, 255, .8); }
.btn-primary:disabled { background: #3A4060; color: #A5ABC3; box-shadow: none; }
.btn-wa { border-radius: 999px; border: 0; background: rgba(255, 255, 255, .88); color: var(--gs-noche); font-family: var(--boton); font-size: 17px; font-weight: 400;
  box-shadow: 0 0 14px rgba(255, 0, 255, .35); }
.btn-wa:hover { background: #fff; }
.btn-sec { border-radius: 999px; background: transparent; border-color: var(--gs-rosa); color: var(--gs-rosa); font-family: var(--boton); font-size: 16px; }

/* Ficha del producto */
.dlg { background: var(--gs-panel); color: var(--gs-texto); border: 1px solid rgba(255, 0, 255, .35); box-shadow: 0 0 60px rgba(255, 0, 255, .18), 0 30px 80px rgba(0, 0, 0, .6); }
.dlg::backdrop { background: rgba(5, 7, 20, .78); }
.dlg-close { background: rgba(255, 255, 255, .92); color: var(--gs-noche); }
.pd-img { background: #fff; border-right-color: var(--gs-linea); }
.pd-brand { color: var(--gs-azul-claro); font-family: var(--titulo); letter-spacing: .14em; }
.pd-info h2 { font-family: var(--titulo); font-weight: 700; font-size: 19px; line-height: 1.4; letter-spacing: .01em; }
.pd-ref, .pd-note { color: var(--gs-suave); }
.pd-price { font-family: var(--titulo); color: #fff; }
.req { background: var(--gs-noche); border-color: var(--gs-linea); }
.req h3 { font-family: var(--titulo); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-rosa); }
.req label { color: var(--gs-suave); }
.req input, .req textarea { background: var(--gs-panel-2); color: var(--gs-texto); border-color: #2B3152; }
.req input:focus, .req textarea:focus { border-color: var(--gs-magenta); outline: none; box-shadow: 0 0 0 3px rgba(255, 0, 255, .25); }
.req-msg.success { background: rgba(74, 222, 128, .12); color: #86EFAC; }
.req-msg.error { background: rgba(248, 113, 113, .12); color: #FCA5A5; }
.pd-more { border-top-color: var(--gs-linea); }
.pd-more h3 { font-family: var(--titulo); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-rosa); }
.pd-more p { color: #DAD8D4; }
.spec caption { color: var(--gs-azul-claro); }
.spec th, .spec td { border-bottom-color: var(--gs-linea); }
.spec th { color: var(--gs-suave); }
.mis li { border-color: var(--gs-linea); }
.pill { background: rgba(0, 117, 255, .18); color: #9CC8FF; }
.pill-nueva { background: rgba(255, 0, 255, .18); color: var(--gs-rosa); }
.notice { background: rgba(255, 0, 255, .12); color: var(--gs-rosa); border-bottom-color: rgba(255, 0, 255, .3); }

/* Envío */
.envio > label { color: var(--gs-suave); }
.envio-row input { background: var(--gs-panel-2); color: var(--gs-texto); border-color: #2B3152; }
.envio-row input:focus { border-color: var(--gs-magenta); outline: none; box-shadow: 0 0 0 3px rgba(255, 0, 255, .25); }
.btn-cp { border-radius: 999px; background: transparent; border-color: var(--gs-rosa); color: var(--gs-rosa); font-family: var(--boton); font-size: 15px; font-weight: 400; }
.envio-op { background: var(--gs-panel-2); border-color: #2B3152; color: var(--gs-texto) !important; }
.envio-op:has(input:checked) { border-color: var(--gs-magenta); box-shadow: 0 0 0 2px rgba(255, 0, 255, .3), 0 0 16px rgba(255, 0, 255, .2); }
.envio-op input, .req .envio-op input { accent-color: var(--gs-magenta); background: none; box-shadow: none; }
.envio-nom small { color: var(--gs-suave); }
.envio-pre { font-family: var(--titulo); color: #fff; }
.envio-msg { color: var(--gs-azul-claro); }
.envio-msg.error { color: #FCA5A5; }

/* Acceso del equipo */
.login { background: transparent; }
.login-card { background: var(--gs-panel); border: 1px solid rgba(255, 0, 255, .35); box-shadow: 0 0 50px rgba(255, 0, 255, .15); }
.login-logo { display: none; }
.login-brand { display: block !important; width: 240px; height: 58px; margin: 0 auto; background: url(/marca-logo.png) center / contain no-repeat; }
.login-card h1 { font-family: var(--titulo); font-size: 20px; letter-spacing: .04em; }
.clave-form label { color: var(--gs-suave); }
.clave-form input { background: var(--gs-noche); color: var(--gs-texto); border-color: #2B3152; }

/* Panel de asesoras */
.admin h1 { font-family: var(--titulo); letter-spacing: .03em; }
.tbl-wrap { background: var(--gs-panel); border-color: var(--gs-linea); }
.tbl th { background: var(--gs-panel-2); color: var(--gs-rosa); }
.tbl th, .tbl td { border-bottom-color: var(--gs-linea); }
.tbl textarea { background: var(--gs-noche); color: var(--gs-texto); border-color: #2B3152; }
.small { color: var(--gs-suave); }

@media (max-width: 900px) {
  .brand-logo { width: 140px; height: 34px; }
}
@media (max-width: 480px) {
  .brand .brand-logo { display: block !important; width: 120px; height: 30px; }
  .brand .brand-tag { display: none !important; }
}

/* v1.9 dirección y comprobantes */
.dir input, .dir textarea, .dir select, .det-liga input { background: var(--gs-panel-2); color: var(--gs-texto); border-color: #2B3152; }
.dir input:focus, .dir textarea:focus, .dir select:focus { border-color: var(--gs-magenta); outline: none; box-shadow: 0 0 0 3px rgba(255, 0, 255, .25); }
.dir-req { color: var(--gs-rosa); }
.dir-box summary { color: var(--gs-texto); }
.pago h1 { font-family: var(--titulo); letter-spacing: .02em; }
.pago-card { background: var(--gs-panel); }
.pago-card h2 { font-family: var(--titulo); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-rosa); }
.pago-num { background: var(--gs-magenta); color: var(--gs-noche); font-family: var(--titulo); }
.pago-inst { border-color: var(--gs-rosa); background: rgba(255, 0, 255, .06); }
.recibos li { background: var(--gs-noche); }
.chip { background: rgba(255, 255, 255, .08); color: var(--gs-suave); }
.chip-ok { background: rgba(74, 222, 128, .14); color: #86EFAC; }
.chip-warn { background: rgba(251, 191, 36, .14); color: #FCD34D; }
.chip-new { background: rgba(255, 0, 255, .22); color: #FFB3FF; }
.btn-mini { border-color: var(--gs-rosa); color: var(--gs-rosa); }
.btn-link { color: #FCA5A5; }
.det-sec h3 { color: var(--gs-rosa); }

/* v2.0 pago con tarjeta */
.mf-campo, .tdc select { background: var(--gs-panel-2); border-color: #2B3152; color: var(--gs-texto); }
.mf-campo.flex-microform-focused { border-color: var(--gs-magenta); box-shadow: 0 0 0 3px rgba(255, 0, 255, .25); }
.tdc h3, .pago-sub { color: var(--gs-texto); font-family: var(--titulo); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.tdc-ok { background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .5); color: #DCFCE7; }
.tdc-ok.tdc-esp { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .5); color: #FEF3C7; }
.pagos-tdc li { background: var(--gs-noche); }

/* v2.1 carrito */
.cart-link { color: var(--gs-rosa); }
.cart-n { background: var(--gs-magenta); color: var(--gs-noche); font-family: var(--titulo); }
.buy-qty input, .co-qty input { background: var(--gs-panel-2); color: var(--gs-texto); border-color: #2B3152; }
.wa-link { color: #86EFAC; }
.checkout h1 { font-family: var(--titulo); letter-spacing: .02em; }
.co-card { background: var(--gs-panel); }
.co-card h2 { font-family: var(--titulo); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-rosa); }
.co-total { color: var(--gs-texto); }

/* v2.3 · celular (tema Gamesphere) */
.f-n, .bn-n { background: var(--gs-magenta); color: var(--gs-noche); font-family: var(--titulo); }
.activos button { background: var(--gs-panel); border-color: #2B3152; color: var(--gs-texto); }
.activos .activos-todo { color: var(--gs-rosa); border-color: rgba(242, 126, 242, .5); }
.stepper { border-color: #2B3152; background: var(--gs-panel-2); }
.stepper button { color: var(--gs-rosa); }
@media (max-width: 760px) {
  .brand-logo { width: 132px; height: 32px; }
  .brand .brand-tag { display: none !important; }
  .catchips { background: rgba(13, 18, 27, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gs-linea); }
  .catchips button { background: var(--gs-panel); border-color: #2B3152; color: var(--gs-texto); font-family: var(--font); }
  .catchips button.on { background: linear-gradient(26deg, #fff 0%, var(--gs-azul) 100%); border-color: transparent; color: var(--gs-noche); box-shadow: 0 0 14px rgba(255, 0, 255, .45); }
  .catchips .chip-oferta { border-color: rgba(255, 0, 255, .55); color: var(--gs-rosa); }
  .catchips .chip-oferta.on { background: var(--gs-magenta); color: var(--gs-noche); }
  .hero h1 { font-size: 21px; }
  .hero-pts { color: var(--gs-azul-claro); }
  .hero-pts li::before { color: var(--gs-magenta); }
  .filters { background: var(--gs-panel); }
  .sheet-grip { background: #3A4060; }
  .sheet-x { background: var(--gs-panel-2); color: var(--gs-texto); }
  .catlist button { border-color: #2B3152; background: var(--gs-noche); }
  .catlist button.active { box-shadow: inset 0 0 0 1px var(--gs-magenta), 0 0 12px rgba(255, 0, 255, .25); }
  .card-price { font-size: 15.5px; }
  .pd-barra { background: rgba(22, 25, 41, .97); backdrop-filter: blur(8px); border-top-color: rgba(255, 0, 255, .35); }
  .pd-barra-precio { font-family: var(--titulo); }
  .pd-barra .btn-primary { font-size: 17px; }
  .pd-barra .btn-sec { font-size: 15px; }
  .bottomnav { background: rgba(5, 7, 20, .96); backdrop-filter: blur(10px); border-top: 1px solid transparent; border-image: linear-gradient(90deg, var(--gs-magenta), var(--gs-azul)) 1; }
  .bottomnav button, .bottomnav a { color: var(--gs-suave); font-family: var(--font); }
  .bottomnav button:active, .bottomnav a:active { color: var(--gs-rosa); }
  .bottomnav .bn-cart { color: var(--gs-rosa); }
  .mas .btn-sec { font-size: 16px; }
}

/* v2.4 · Banners y descuentos (tema Gamesphere) */
.bn-track { border: 1px solid var(--gs-linea); box-shadow: 0 0 40px rgba(255, 0, 255, .12); }
.bn-texto { background: radial-gradient(120% 140% at 0% 0%, rgba(255, 0, 255, .45) 0%, transparent 55%),
  radial-gradient(120% 140% at 100% 100%, rgba(0, 117, 255, .55) 0%, transparent 55%), var(--gs-noche-2); }
.bn-titulo { font-family: var(--titulo); font-weight: 800; letter-spacing: .02em; text-shadow: 0 0 22px rgba(255, 0, 255, .45); }
.bn-sub { color: var(--gs-azul-claro); opacity: 1; }
.bn-boton { font-family: var(--boton); font-weight: 400; font-size: 17px; color: var(--gs-noche); background: linear-gradient(26deg, #fff 0%, var(--gs-azul) 100%);
  box-shadow: 0 0 18px rgba(255, 0, 255, .55); }
.bn-flecha { background: rgba(13, 18, 27, .75); color: var(--gs-texto); border: 1px solid var(--gs-linea); }
.bn-puntos button { background: #2B3152; }
.bn-puntos button[aria-current="true"] { background: var(--gs-magenta); box-shadow: 0 0 10px rgba(255, 0, 255, .7); }
body.con-banners .hero-pts { color: var(--gs-azul-claro); font-family: var(--font); }
body.con-banners .hero-pts li::before { content: "✓ "; color: var(--gs-magenta); }
.badge-desc { font-size: 13px; letter-spacing: .04em; box-shadow: 0 0 14px rgba(255, 0, 255, .6); }
.badge-dest { background: var(--gs-azul); color: #fff; }
.card-oferta { border-color: rgba(255, 0, 255, .35); }
.card-ahorro { color: var(--ok); font-family: var(--font); }
.pd-desc { background: var(--gs-magenta); color: var(--gs-noche); font-family: var(--titulo); font-size: 14px; box-shadow: 0 0 14px rgba(255, 0, 255, .6); }
.pb-desc { background: var(--gs-magenta); color: var(--gs-noche); font-family: var(--titulo); }
.btn-destacar { color: var(--gs-suave); border-color: #2B3152; }
.btn-destacar.on { color: var(--gs-rosa); border-color: var(--gs-rosa); }
.bn-form select { background: var(--gs-panel-2); color: var(--gs-texto); border: 1px solid #2B3152; border-radius: 10px; padding: 0 10px; }
#frmDest input { background: var(--gs-panel-2); color: var(--gs-texto); border-color: #2B3152; }