/* ============================================================
   RECARGAS MELIODAS · Diseño nuevo (tema neón, octubre 2026)
   Pedido del dueño: réplica del mockup "Tus juegos, a otro nivel".
   Fondo casi negro, un solo acento (magenta neón) más el verde de
   WhatsApp, tarjetas con borde fino que brilla, títulos en itálica.
   Las clases del flujo de compra (.card, .paq, .dato, .modal…) son
   las mismas de meliodas.css para que el JS y la página del pedido
   funcionen igual: acá solo cambia cómo se ven.
   ============================================================ */

:root {
  --bg:        #07030E;
  --surface:   #110820;
  --surface-2: #180C2B;
  --surface-3: #25133F;

  --magenta:   #FF2EA6;
  --magenta-2: #E6218C;
  --purple:    #D21F8F;    /* botones de acción (mismo nombre que el tema viejo) */
  --purple-hi: #FF2EA6;
  --neon:      rgba(255, 46, 166, .45);
  --neon-soft: rgba(255, 46, 166, .18);

  --text:      #F7F1FC;
  --soft:      #BBA9D4;
  --dim:       #806D9C;

  --border:      #3B1C55;
  --border-soft: #2A1540;

  --green: #22C55E;
  --wa:    #25D366;
  --amber: #F59E0B;
  --red:   #F43F5E;

  --radius:    16px;
  --radius-sm: 12px;
  --maxw:      600px;
  --wide:      1120px;
  --gap:       12px;
  --cab:       66px;      /* alto del encabezado */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Un solo resplandor, arriba a la derecha, detrás del hero. El resto del fondo es liso. */
  background:
    radial-gradient(55% 38% at 92% 0%, rgba(255, 46, 166, .13), transparent 70%),
    var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 86px;                 /* aire para la barra inferior */
  min-height: 100vh;
}
body.sin-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 14px; }
.oculto { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ancla { display: block; position: relative; top: calc(-1 * var(--cab) - 8px); visibility: hidden; height: 0; }
.min0 { min-width: 0; }
.enlace { background: none; border: 0; color: var(--magenta); font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }

/* ── Encabezado ─────────────────────────────────────────────── */
.nv-top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 3, 14, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nv-top-in {
  max-width: var(--wide); margin: 0 auto; height: var(--cab);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 14px;
}
.nv-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nv-logo img {
  width: 42px; height: 42px; flex: none; border-radius: 11px; object-fit: cover;
  box-shadow: 0 0 16px var(--neon-soft);
}
.nv-marca { display: flex; flex-direction: column; line-height: 1; }
.nv-marca small { font-size: 9.5px; font-weight: 700; letter-spacing: 3.2px; text-transform: uppercase; color: var(--soft); }
.nv-marca b {
  font-size: 19px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 14px var(--neon);
}
.nv-navdesk { display: none; gap: 24px; font-size: 13.5px; font-weight: 600; color: var(--soft); }
.nv-navdesk a { padding: 6px 0; border-bottom: 2px solid transparent; transition: .15s; }
.nv-navdesk a:hover, .nv-navdesk a.activo { color: #fff; border-color: var(--magenta); }
.nv-top-acc { display: flex; align-items: center; gap: 10px; }
.nv-wa {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #0E1A12; color: var(--wa); border: 2px solid var(--wa);
  box-shadow: 0 0 14px rgba(37, 211, 102, .45); transition: .15s;
}
.nv-wa:hover { background: var(--wa); color: #06240F; }
.nv-menu {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: #fff; cursor: pointer;
}
.nv-menu:hover { border-color: var(--border); background: var(--surface); }
/* La línea neón angulada de abajo del encabezado */
.nv-linea { height: 2px; position: relative; overflow: visible; }
.nv-linea::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0, var(--magenta) 12%, var(--magenta) 58%, transparent 100%);
  box-shadow: 0 0 10px var(--neon);
}
.nv-linea::after {
  content: ''; position: absolute; left: 56%; top: 0; width: 22px; height: 2px;
  background: var(--magenta); transform: skewX(-45deg) translateX(14px); box-shadow: 0 0 10px var(--neon);
}

/* ── Menú lateral ───────────────────────────────────────────── */
.nv-velo { position: fixed; inset: 0; background: rgba(4, 2, 9, .7); z-index: 80; }
.nv-velo[hidden] { display: none; }
.nv-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); z-index: 90;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -10px 0 40px rgba(0, 0, 0, .5);
  transform: translateX(104%); transition: transform .22s ease;
  display: flex; flex-direction: column; padding: 12px 10px 16px; overflow-y: auto;
}
.nv-drawer.abierto { transform: none; }
.nv-drawer-cab { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 14px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; }
.nv-cerrar { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: #fff; display: grid; place-items: center; cursor: pointer; }
.nv-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600; color: var(--text); transition: .15s;
}
.nv-item svg { color: var(--magenta); flex: none; }
.nv-item:hover { background: var(--surface-2); }
.nv-drawer-sep { height: 1px; background: var(--border-soft); margin: 8px 10px; }
.nv-drawer-pie { margin-top: auto; padding: 14px 12px 0; font-size: 12px; color: var(--dim); }
.nv-drawer-pie a { color: var(--soft); }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero-in {
  position: relative; max-width: var(--wide); margin: 0 auto;
  padding: 34px 18px 30px; min-height: 340px;
  display: flex; align-items: center;
}
/* Velo de izquierda a derecha, a todo el ancho: el texto queda sobre fondo oscuro y el arte sigue
   brillando a la derecha (si cubriera solo el contenedor, en escritorio se notaría el rectángulo). */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 3, 14, .94) 0%, rgba(7, 3, 14, .78) 34%, rgba(7, 3, 14, .18) 66%, rgba(7, 3, 14, 0) 100%);
}
.hero-in { z-index: 2; }
.hero-arte {
  position: absolute; right: -24%; top: 50%; transform: translateY(-50%); z-index: 0;
  /* el arte va debajo del velo de .hero::before (z-index 1), por eso vive dentro de .hero-in pero sin z-index propio alto */
  width: min(84vw, 380px); max-width: none; opacity: .9;
  mix-blend-mode: screen; pointer-events: none;
  /* Solo el emblema (el nombre ya va en el encabezado) y bordes difuminados: el archivo trae su
     propio fondo negro y sin esto se notaba el rectángulo. */
  clip-path: inset(0 0 26% 0);
  -webkit-mask-image: radial-gradient(ellipse 56% 44% at 50% 37%, #000 55%, transparent 80%);
          mask-image: radial-gradient(ellipse 56% 44% at 50% 37%, #000 55%, transparent 80%);
  filter: drop-shadow(0 0 28px rgba(255, 46, 166, .35));
}
.hero-arte.personaje {
  mix-blend-mode: normal; opacity: 1; right: -6%; width: min(80vw, 420px);
  clip-path: none; -webkit-mask-image: none; mask-image: none;
  filter: drop-shadow(0 0 30px rgba(255, 46, 166, .5));
}
.hero-txt { position: relative; z-index: 2; max-width: 600px; }
/* Antetítulo editorial: línea corta + texto en versalitas. Se usa en el hero y en cada sección. */
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--magenta);
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--magenta); flex: none; }
.hero h1 {
  font-size: clamp(36px, 10.5vw, 52px); line-height: .94; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -1px; display: flex; flex-direction: column; gap: 2px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
.hero h1 .l2 { color: var(--magenta); }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; margin: 20px 0 22px; }
.hero-chips li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.hero-chips li + li::before { content: ''; width: 1px; height: 14px; background: var(--border); margin: 0 14px; }
.hero-chips svg { color: var(--magenta); flex: none; }
/* Botón principal con las esquinas cortadas del mockup, sin resplandor: el color ya pesa solo */
.btn-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--magenta); color: #fff; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 16px 28px;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: background .15s, transform .15s;
}
.btn-cta:hover { background: #FF4DB3; transform: translateY(-1px); }
.btn-cta:active { transform: none; }
.hero-nota { margin-top: 16px; font-size: 12.5px; color: var(--soft); line-height: 1.5; max-width: 420px; }
/* Rayas neón decorativas en las esquinas del hero (como las del mockup) */
.hero-dec { position: absolute; height: 2px; background: var(--magenta); box-shadow: 0 0 10px var(--neon); pointer-events: none; }
.hero-dec-a { left: -20px; bottom: 24px; width: 140px; transform: skewX(-45deg); }
.hero-dec-b { right: -20px; top: 18px; width: 120px; transform: skewX(-45deg); }

/* ── Ticker (apagado por defecto) ───────────────────────────── */
.ticker { background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); overflow: hidden; padding: 8px 0; }
.ticker-pista { display: flex; gap: 30px; white-space: nowrap; width: max-content; animation: correr 55s linear infinite; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { font-size: 12px; color: var(--soft); display: flex; align-items: center; gap: 7px; }
.ticker-item b { color: var(--text); font-weight: 700; }
.ticker-item .cant { color: var(--magenta); font-weight: 700; }
.punto { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex: none; }

/* ── Juegos: buscador, píldoras y tarjetas ──────────────────── */
.nv-juegos { max-width: var(--wide); margin: 0 auto; padding: 22px 14px 0; }
.nv-sec-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nv-sec-cab .eyebrow { margin-bottom: 6px; }
.nv-sec-cab h2 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.nv-conteo { font-size: 12px; font-weight: 600; color: var(--dim); white-space: nowrap; padding-bottom: 4px; }
.nv-filtros { display: block; }
.nv-busca {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 30px;
  padding: 0 8px 0 16px; height: 52px; transition: border-color .15s;
}
.nv-busca:focus-within { border-color: var(--magenta); }
.nv-busca svg { color: var(--soft); flex: none; }
.nv-busca input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font-size: 15px; color: #fff; height: 100%; }
.nv-busca input::placeholder { color: var(--dim); }
.nv-busca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nv-busca-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--soft); display: grid; place-items: center; cursor: pointer; }
.nv-pills { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 6px; scrollbar-width: none; -ms-overflow-style: none; }
.nv-pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); color: var(--soft);
  border-radius: 30px; padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: .15s; white-space: nowrap;
}
.pill svg { flex: none; }
.pill:hover { border-color: var(--magenta); color: #fff; }
.pill.activa { background: var(--magenta); border-color: var(--magenta); color: #fff; }

.nv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.tarj {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.tarj:hover, .tarj:focus-visible { border-color: var(--magenta); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transform: translateY(-2px); }
.tarj .banner { position: relative; aspect-ratio: 16 / 10; background: var(--surface-3); overflow: hidden; }
.tarj .desde {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  background: rgba(7, 3, 14, .78); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 6px; letter-spacing: .2px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tarj .banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s; }
.tarj:hover .banner img { transform: scale(1.04); }
.tarj .banner::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, transparent, rgba(7, 3, 14, .78));
}
.tarj .letras { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30px; font-weight: 800; color: var(--soft); letter-spacing: 2px; }
.tarj .cuerpo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px 12px; }
.tarj .nom { font-size: 14.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.tarj .disp { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--green); }
.tarj .disp::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.tarj .disp.no { color: var(--amber); }
.tarj .flecha { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: #fff; transition: .15s; }
.tarj:hover .flecha { background: var(--magenta); border-color: var(--magenta); }
.tarj.agotado .banner img { filter: grayscale(.7); opacity: .6; }
.nv-vacio { grid-column: 1 / -1; text-align: center; color: var(--soft); font-size: 14px; padding: 26px 10px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); margin-top: 10px; }

/* ── ¿Cómo recargar? ────────────────────────────────────────── */
.nv-como { max-width: var(--wide); margin: 0 auto; padding: 38px 14px 6px; }
.nv-tit {
  text-align: center; font-size: 24px; font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 20px; position: relative;
}
.nv-tit b { color: var(--magenta); text-shadow: 0 0 16px var(--neon); }
.nv-tit::before, .nv-tit::after {
  content: ''; position: absolute; top: 50%; width: 18%; height: 2px; display: none;
  background: linear-gradient(90deg, transparent, var(--magenta)); opacity: .6;
}
.nv-tit::before { left: 0; }
.nv-tit::after { right: 0; transform: scaleX(-1); }
.nv-pasos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nv-pasos li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 2px; }
.nv-pasos li:not(:last-child)::after {
  content: ''; position: absolute; right: -9px; top: 22px; width: 10px; height: 10px;
  border-right: 2px solid var(--magenta); border-top: 2px solid var(--magenta); transform: rotate(45deg); opacity: .8;
}
.nv-paso-ic {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--magenta); color: var(--magenta);
}
.nv-paso-tx .n { display: block; font-size: 16px; font-weight: 800; color: var(--magenta); line-height: 1; margin-bottom: 4px; }
.nv-paso-tx b { display: block; font-size: 12.5px; line-height: 1.25; }
.nv-paso-tx p { font-size: 10.5px; color: var(--soft); line-height: 1.4; margin-top: 4px; }

/* ── Soporte por WhatsApp ───────────────────────────────────── */
.nv-soporte {
  max-width: var(--wide); margin: 26px auto 0; width: calc(100% - 28px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--wa); border-radius: var(--radius);
  padding: 14px 14px;
}
.nv-sop-ic { width: 50px; height: 50px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--wa); }
.nv-sop-tx { flex: 1; min-width: 150px; }
.nv-sop-tx b { font-size: 16px; display: block; }
.nv-sop-tx p { font-size: 12.5px; color: var(--soft); margin-top: 2px; }
.nv-sop-num { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.nv-sop-num:empty { display: none; }
.btn-wa {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  background: var(--wa); color: #06240F; border: 2px solid var(--wa); border-radius: 30px;
  padding: 11px 18px; font-size: 13.5px; font-weight: 800;
  transition: .15s;
}
.btn-wa:hover { background: #3ee07a; border-color: #3ee07a; }
@media (max-width: 420px) { .btn-wa { width: 100%; justify-content: center; } }

/* ── Barra inferior ─────────────────────────────────────────── */
.nv-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 66px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(10, 5, 18, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom);
}
.nv-bottom::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--magenta), transparent); opacity: .7; }
.nv-bottom a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--soft); transition: .15s; }
.nv-bottom a svg { transition: .15s; }
.nv-bottom a.activo { color: var(--magenta); }
.nv-bottom a.activo svg { filter: drop-shadow(0 0 8px var(--neon)); }
.nv-bottom a:hover { color: #fff; }

/* ── Pie ────────────────────────────────────────────────────── */
.pie {
  margin-top: 44px; color: var(--dim); font-size: 12px;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255, 46, 166, .04), rgba(7, 3, 14, .6));
  position: relative;
}
.pie::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--magenta), transparent); opacity: .55; }
.pie-in {
  max-width: var(--wide); margin: 0 auto; padding: 34px 14px 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px;
}
.pie-col h4 { font-size: 11px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--magenta); margin-bottom: 12px; }
.pie-col a { display: block; color: var(--soft); font-size: 14px; padding: 5px 0; transition: .15s; }
.pie-col a:hover { color: #fff; }
.pie-marca { grid-column: 1 / -1; }
.pie-marca .nv-logo { display: inline-flex; margin-bottom: 10px; }
.pie-marca .nv-logo img { width: 46px; height: 46px; }
.pie-tag { font-size: 13.5px; color: var(--soft); line-height: 1.5; max-width: 320px; margin: 0 0 14px; }
.pie .redes { display: flex; gap: 10px; }
.pie .redes a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--soft); transition: .15s; }
.pie .redes a:hover { color: #fff; border-color: var(--magenta); box-shadow: 0 0 12px var(--neon-soft); }
.pie-base {
  max-width: var(--wide); margin: 0 auto; padding: 16px 14px 20px;
  border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.pie-legal { font-size: 11px; line-height: 1.6; color: var(--dim); max-width: 760px; }

/* ── Vista del juego: franja, columna de compra y panel lateral ── */
.nv-juego-cab { display: flex; align-items: center; gap: 12px; }
.nv-juego-band { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-soft); }
/* El arte del juego, difuminado, como fondo de la franja (lo pone js/nuevo.js en --arte) */
.nv-juego-band::before { content: ''; position: absolute; inset: -40px; background: var(--arte, none) center / cover no-repeat; filter: blur(34px) saturate(1.3); opacity: .22; pointer-events: none; }
.nv-juego-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 3, 14, .92), rgba(7, 3, 14, .55) 50%, rgba(7, 3, 14, .88)); pointer-events: none; }
.nv-juego-band-in { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 16px 14px; }
.nv-juego-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 14px; }
.nv-juego-main { min-width: 0; }
.nv-juego-lado .seccion { margin-top: 30px; }
.nv-resumen { display: none; }
.nv-res-fila { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.nv-res-fila .k { color: var(--soft); flex: none; }
.nv-res-fila .v { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.nv-res-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; }
.nv-res-total .k { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--soft); }
.nv-res-total .v { font-size: 24px; font-weight: 800; color: var(--magenta); }
.nv-res-nota { font-size: 12px; color: var(--dim); margin: 0 0 12px; line-height: 1.5; }
.nv-volver { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: #fff; cursor: pointer; transition: .15s; }
.nv-volver:hover { border-color: var(--magenta); box-shadow: 0 0 12px var(--neon-soft); }
.nv-juego-arte { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; border: 1px solid var(--border); }
.nv-juego-tit { min-width: 0; }
.nv-juego-tit .k { font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--magenta); }
.nv-juego-tit h1 { font-size: 20px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; overflow-wrap: anywhere; }

/* ── Tarjeta (flujo) ────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-top: 16px; }
.card-tit { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; }
.card-tit svg { color: var(--magenta); flex: none; }
.juego-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.juego-cab img { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; flex: none; border: 1px solid var(--border); }
.juego-cab-nom { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 3px; }

.paso { display: inline-flex; align-items: center; gap: 7px; background: var(--magenta); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; padding: 5px 11px; border-radius: 20px; text-transform: uppercase; }
.paso-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; flex-wrap: wrap; }
.paso-head h2 { font-size: 14px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }

/* ── Campos ─────────────────────────────────────────────────── */
label.campo { display: block; font-size: 12px; color: var(--soft); margin-bottom: 6px; font-weight: 600; }
label.campo .req { color: var(--magenta); font-size: 10px; font-weight: 700; letter-spacing: .6px; margin-left: 5px; }
label.campo .opt { color: var(--dim); font-size: 10px; font-weight: 600; margin-left: 5px; }
.input, input[type=text], input[type=email], input[type=tel], input[type=number] {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 15px; font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--dim); }
.input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px var(--neon-soft); }
.input.grande { font-size: 21px; font-weight: 700; letter-spacing: 1.5px; text-align: center; }
.input.error { border-color: var(--red); }
.ayuda { font-size: 11.5px; color: var(--dim); margin-top: 6px; }
.ayuda.mal { color: var(--red); }
.ayuda.bien { color: var(--green); }
.fila-input { display: flex; gap: 10px; align-items: stretch; }
.fila-input .input { flex: 1; min-width: 0; }
.prefijo { display: flex; align-items: center; padding: 0 13px; background: var(--surface-2); border: 1px solid var(--border); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--soft); font-weight: 700; font-size: 15px; }
.prefijo + .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--magenta); color: #fff; border: 1px solid var(--magenta);
  border-radius: var(--radius-sm); padding: 14px 20px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: .15s;
}
.btn:hover:not(:disabled) { background: #FF4DB3; border-color: #FF4DB3; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ancho { width: 100%; }
.btn.fantasma { background: transparent; border-color: var(--border); color: var(--text); box-shadow: none; }
.btn.fantasma:hover:not(:disabled) { background: var(--surface-2); border-color: var(--magenta); box-shadow: none; }
.btn.chico { padding: 9px 14px; font-size: 13px; }
.btn.icono { padding: 14px; flex: none; }

/* ── Paquetes ───────────────────────────────────────────────── */
.grid-paq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
/* (en teléfono la grilla va en 3 columnas, 2 por debajo de 350 px: ver el bloque "Modelo de TELÉFONO" al final) */
.paq { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px 12px; cursor: pointer; text-align: center; transition: .15s; }
.paq:hover { border-color: var(--magenta); }
.paq[aria-pressed="true"] { border-color: var(--magenta); background: var(--surface-3); box-shadow: 0 0 16px var(--neon-soft); }
.paq .cantidad { display: flex; align-items: flex-start; justify-content: center; gap: 6px; font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.25; text-wrap: balance; }
.paq .cantidad svg { margin-top: 3px; color: var(--magenta); flex: none; }
.paq .bs { font-size: 15px; font-weight: 700; color: var(--magenta); margin-top: 5px; }
.paq .usd { font-size: 11px; color: var(--dim); }
.paq .pts { font-size: 11px; color: var(--soft); margin-top: 4px; }
.paq .stock { font-size: 11px; color: var(--soft); margin-top: 4px; margin-bottom: 30px; } /* sube la línea para que el botón +Carrito (absolute, abajo a la derecha) no tape el último dígito */
.paq .arte { display: block; width: 100%; height: auto; aspect-ratio: 640 / 298; object-fit: cover; border-radius: 8px; margin: -3px 0 10px; }
.paq.con-arte { padding: 12px 10px 14px; }
.paq.agotado { cursor: not-allowed; border-style: dashed; background: var(--surface); }
.paq.agotado:hover { border-color: var(--border); }
.paq.agotado .arte { filter: grayscale(1); opacity: .4; }
.paq.agotado .cantidad, .paq.agotado .bs { color: var(--dim); }
.paq.agotado .bs { text-decoration: line-through; }
.etiqueta { position: absolute; top: -8px; right: 9px; background: var(--magenta); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; }
.etiqueta.sin { background: var(--surface-3); color: var(--soft); border: 1px solid var(--border); }
.etiqueta.promo { background: #7C3AED; }
.paq .antes { font-size: 12px; color: var(--dim); text-decoration: line-through; margin-top: 5px; }
.paq .antes + .bs { margin-top: 0; }
.paq.bloqueado { cursor: not-allowed; border-style: dashed; background: var(--surface); }
.paq.bloqueado:hover { border-color: var(--border); }
.paq.bloqueado .arte { filter: grayscale(1); opacity: .45; }
.paq.bloqueado .cantidad, .paq.bloqueado .bs { color: var(--dim); }
.paq.bloqueado .usd { color: var(--amber); font-size: 10.5px; }
.subsec { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); margin: 22px 0 11px; display: flex; align-items: center; gap: 8px; }
.subsec::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tabs button { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 30px; padding: 11px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--soft); }
.tabs button[aria-selected="true"] { background: var(--magenta); border-color: var(--magenta); color: #fff; box-shadow: 0 0 12px var(--neon-soft); }

/* ── Cantidad ───────────────────────────────────────────────── */
.cants { display: flex; gap: 8px; }
.cants button { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 0; font-size: 15px; font-weight: 700; cursor: pointer; transition: .15s; }
.cants button[aria-pressed="true"] { border-color: var(--magenta); background: var(--surface-3); color: var(--text); box-shadow: 0 0 12px var(--neon-soft); }

/* Página del pedido: cuando hay varias recargas (cantidad > 1 o un combo) se apilan y el total va una vez */
.resumen-item + .resumen-item { margin-top: 8px; }
.resumen-item .nom .cant { color: var(--magenta); font-weight: 800; margin-left: 4px; }
.resumen-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: 12px; color: var(--soft); }

/* Nombre del paquete en dos partes (lo arma js/nuevo.js: nombrePaq). En escritorio van seguidas. */
.paq .num { font-weight: 800; }
.paq .unid { font-weight: 700; }

/* ── Modelo de TELÉFONO para la vista del juego (19/10/2026) ─────────────────────────────────────
   El dueño pidió que en teléfono la compra no se viera como la portada vieja (tarjetas apiladas con
   "Paso 1/3", dos columnas con el mismo arte repetido, el QR arriba de todo). En pantallas chicas:
   barra de pasos arriba, pantallas planas separadas por líneas, paquetes en tres columnas con el
   número grande y sin arte, el pago como un ticket con el QR plegado, y una barra fija abajo con el
   total y el botón. En escritorio no cambia nada: ahí manda el panel lateral. */
.nv-pasos-m, .nv-accion { display: none; }
.nv-solo-m { display: none !important; }
@media (max-width: 999px) {
  .nv-solo-m { display: inline-flex !important; }
  .nv-solo-m.oculto { display: none !important; }

  /* Cabecera: el chip del juego más compacto y la barra de los cuatro pasos */
  #bandaJuego { border-bottom: 0; }
  #bandaJuego .nv-juego-cab { padding: 12px 14px 2px; }
  #bandaJuego .nv-juego-tit .k { font-size: 10px; }
  #bandaJuego .nv-juego-tit h1 { font-size: 18px; }
  .nv-pasos-m { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; padding: 10px 14px 14px; position: relative; z-index: 1; }
  .nv-pasos-m li { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--dim); }
  .nv-pasos-m li::before { content: ''; display: block; height: 3px; width: 100%; border-radius: 3px; background: var(--surface-3); transition: background .2s; }
  .nv-pasos-m li.hecho { color: var(--soft); }
  .nv-pasos-m li.hecho::before { background: var(--magenta); opacity: .5; }
  .nv-pasos-m li.actual { color: var(--text); }
  .nv-pasos-m li.actual::before { background: var(--magenta); box-shadow: 0 0 10px var(--neon); }

  /* Pantallas planas en vez de tarjetas con borde */
  #vistaJuego .nv-juego-main .card { background: transparent; border: 0; border-radius: 0; padding: 18px 14px 22px; margin: 0; border-bottom: 1px solid var(--border-soft); }
  #vistaJuego .paso-head { gap: 8px; margin-bottom: 14px; }
  #vistaJuego .paso-head .paso { background: transparent; color: var(--magenta); padding: 0; font-size: 10.5px; letter-spacing: 1.6px; }
  #vistaJuego .paso-head .paso::before { content: ''; width: 18px; height: 2px; background: var(--magenta); }
  #vistaJuego .paso-head h2 { flex-basis: 100%; font-size: 19px; font-weight: 800; letter-spacing: -.2px; text-transform: none; }
  #avisoMarca { font-size: 11px; }
  #cardId .input.grande { font-size: 20px; border-radius: 30px; }
  #cardId .btn.icono { border-radius: 30px; }
  .jugador { border-radius: 40px; padding: 10px 16px 10px 10px; }
  .jugador .ic { border-radius: 50%; }

  /* Paquetes: tres columnas, CON arte, el número grande y el precio como píldora */
  .grid-paq { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .paq, .paq.con-arte { padding: 16px 6px 12px; border-radius: 14px; background: var(--surface); }
  .paq .cantidad { flex-direction: column; align-items: center; gap: 2px; line-height: 1.1; }
  .paq .cantidad svg { display: none; }
  .paq .num { font-size: 19px; letter-spacing: -.3px; }
  .paq .unid { font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--soft); }
  .paq .unid.sola { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--text); }
  .paq .bs { display: inline-block; max-width: 100%; margin-top: 9px; padding: 4px 7px; border-radius: 20px; background: var(--surface-3); color: var(--text); font-size: 11.5px; letter-spacing: -.2px; white-space: nowrap; }
  .paq .antes { font-size: 10px; margin-top: 7px; }
  .paq .antes + .bs { margin-top: 3px; }
  .paq .usd { font-size: 10px; margin-top: 5px; }
  .paq .pts { font-size: 9.5px; }
  .paq .stock { font-size: 9.5px; }
  .paq[aria-pressed="true"] { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--magenta), 0 0 18px var(--neon-soft); }
  .paq[aria-pressed="true"] .bs { background: var(--magenta); color: #fff; }
  .paq[aria-pressed="true"]::after { content: ''; position: absolute; top: 7px; left: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--magenta) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center / 10px no-repeat; }
  .paq.agotado .bs, .paq.bloqueado .bs { background: transparent; padding: 0; }
  .etiqueta { font-size: 8.5px; padding: 3px 6px; right: 6px; top: -7px; }
  .tabs button { padding: 10px; }
  .cants button { padding: 11px 0; border-radius: 30px; }

  /* Pago como un ticket: datos en lista, sin cajas, con el QR plegado */
  #cardPago .dato { background: transparent; border-width: 0 0 1px; border-radius: 0; padding: 11px 2px; margin: 0; }
  #cardPago .dato .v { font-size: 15px; }
  #cardPago .dato .v.plata { font-size: 20px; }
  #cardPago .qr-caja { display: none; }
  #cardPago .qr-caja.abierta { display: flex; }
  #btnQr { margin: 0 0 12px; border-radius: 30px; }
  #btnCopiarTodo { margin-top: 14px; border-radius: 30px; }

  /* Formulario y total */
  #cardDatos .input { border-radius: 30px; padding: 13px 16px; }
  #cardDatos .prefijo { border-radius: 30px 0 0 30px; }
  #cardDatos .prefijo + .input { border-radius: 0 30px 30px 0; }
  #cardDatos .subir { border-radius: 16px; }
  .total { border-radius: 16px; }

  /* Barra fija de abajo: reemplaza la navegación mientras se compra */
  .nv-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(13, 6, 24, .96); border-top: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .nv-accion::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--magenta), transparent); opacity: .7; }
  .nv-accion.oculto { display: none; }
  .nv-accion-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .nv-accion-tx .k { font-size: 11.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nv-accion-tx .v { font-size: 18px; font-weight: 800; color: var(--magenta); line-height: 1.15; }
  .nv-accion .btn { flex: none; padding: 12px 22px; border-radius: 30px; }
  body.con-accion .nv-bottom { display: none; }
  body.con-accion { padding-bottom: 92px; }
}
@media (max-width: 350px) { .grid-paq { grid-template-columns: repeat(2, 1fr); } }

/* ── Datos de pago copiables ────────────────────────────────── */
.dato { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 9px; }
.dato .k { font-size: 11px; color: var(--soft); text-transform: uppercase; letter-spacing: .9px; }
.dato .v { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.dato .v.plata { color: var(--green); }
.copiar { flex: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; color: var(--soft); transition: .15s; }
.copiar:hover { border-color: var(--magenta); color: var(--text); }
.copiar.hecho { border-color: var(--green); color: var(--green); }
.qr-caja { display: flex; gap: 14px; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; }
.qr-caja img { width: 108px; height: 108px; flex: none; background: #fff; border-radius: 8px; padding: 6px; object-fit: contain; }
.qr-txt { min-width: 0; }
.qr-tit { font-size: 13.5px; font-weight: 700; color: var(--magenta); margin-bottom: 4px; }
.qr-txt p { font-size: 12px; color: var(--soft); line-height: 1.5; }
.qr-o { color: var(--dim); margin-top: 6px; font-size: 11.5px; }
@media (max-width: 420px) { .qr-caja { flex-direction: column; text-align: center; } .qr-caja img { width: 150px; height: 150px; } }

/* ── Subir comprobante / total / jugador / cargando / último ── */
.subir { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 26px 16px; text-align: center; cursor: pointer; background: var(--bg); transition: .15s; }
.subir:hover { border-color: var(--magenta); }
.subir svg { color: var(--dim); margin-bottom: 8px; }
.subir .t1 { font-size: 14px; font-weight: 600; }
.subir .t2 { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.subir.cargado { border-style: solid; border-color: var(--green); }
.subir img { max-height: 150px; border-radius: 8px; margin: 0 auto; }
.total { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--magenta); border-radius: var(--radius-sm); padding: 16px; margin-top: 18px; }
.total .k { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--soft); }
.total .v { font-size: 24px; font-weight: 800; color: var(--magenta); }
.total .usd { font-size: 12px; color: var(--dim); text-align: right; }
.jugador { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--green); border-radius: var(--radius-sm); padding: 13px 15px; margin-top: 12px; }
.jugador .ic { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-3); display: grid; place-items: center; color: var(--green); flex: none; }
.jugador .k { font-size: 10.5px; color: var(--soft); text-transform: uppercase; letter-spacing: .9px; }
.jugador .v { font-size: 16px; font-weight: 700; }
.jugador.aviso { border-color: var(--amber); }
.jugador.aviso .ic { color: var(--amber); }
.cargando { text-align: center; padding: 26px 0; }
.cargando .txt { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--soft); margin-bottom: 13px; }
.barra { height: 3px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.barra i { display: block; height: 100%; width: 38%; background: var(--magenta); border-radius: 3px; box-shadow: 0 0 8px var(--neon); animation: vaiven 1.1s ease-in-out infinite; }
@keyframes vaiven { 0% { transform: translateX(-100%); } 100% { transform: translateX(365%); } }
.ultimo { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; margin-top: 11px; }
.ultimo .k { font-size: 11.5px; color: var(--soft); }
.ultimo .v { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 15px; font-weight: 700; color: var(--magenta); }

/* ── Otros juegos (en la vista del juego) ───────────────────── */
.seccion { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--soft); margin: 32px 0 14px; }
.nv-otros { display: grid; grid-template-columns: 1fr; gap: 10px; }
.juego { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: .15s; }
.juego:hover { border-color: var(--magenta); box-shadow: 0 0 14px var(--neon-soft); }
.juego .arte { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-3); }
.juego .arte-txt { width: 46px; height: 46px; border-radius: 10px; flex: none; background: var(--surface-3); display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--soft); }
.juego .nom { font-size: 15px; font-weight: 700; }
.juego .info { flex: 1; min-width: 0; }
.juego .flecha { color: var(--dim); flex: none; }
.badge { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; margin-top: 4px; }
.badge.si   { background: rgba(34, 197, 94, .14); color: var(--green); border: 1px solid rgba(34, 197, 94, .4); }
.badge.pron { background: var(--surface-3); color: var(--soft); }
.badge.no   { background: var(--surface-3); color: var(--soft); border: 1px solid var(--border); }

/* ── Mensajes, sellos, pases, toast ─────────────────────────── */
.msg { border-radius: var(--radius-sm); padding: 13px 15px; margin-top: 14px; font-size: 13.5px; border: 1px solid; }
.msg.err  { background: #2A0A15; border-color: var(--red);   color: #FFB3C1; }
.msg.ok   { background: #08240F; border-color: var(--green); color: #A7F3C0; }
.msg.info { background: var(--surface-2); border-color: var(--border); color: var(--soft); }
.sellos { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 15px; margin-bottom: 14px; }
.sellos-cab { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--soft); }
.sellos-cab svg { color: var(--magenta); flex: none; }
.sellos-n { margin-left: auto; color: var(--text); font-size: 13px; letter-spacing: 0; }
.sellos-dots { display: flex; gap: 9px; flex-wrap: wrap; margin: 12px 0 10px; }
.sello { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px dashed var(--surface-3); background: #000; color: #fff; overflow: hidden; }
.sello.on { border: 2px solid var(--magenta); background: #000; box-shadow: 0 0 10px var(--neon); }
.sello-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sello:not(.on) .sello-img { filter: grayscale(1); opacity: .35; }
.sellos-txt { font-size: 12.5px; color: var(--soft); line-height: 1.5; margin: 0; }
.sellos-txt b { color: var(--text); }
.sellos-ok { background: #08240F; border: 1px solid var(--green); color: #A7F3C0; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
@media (max-width: 380px) { .sello { width: 34px; height: 34px; } }
.pases { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--magenta); border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 14px; }
.pases.ok  { border-color: var(--green); }
.pases.mal { border-color: var(--amber); }
.pases-tx { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.5; }
.pases-tx b { color: var(--text); }
.pases-tx p { font-size: 12px; color: var(--soft); margin-top: 4px; }
.pases .btn { flex: none; }
.toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); background: var(--surface-3); border: 1px solid var(--magenta); color: var(--text); padding: 11px 18px; border-radius: 22px; font-size: 13px; font-weight: 600; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .2s; box-shadow: 0 0 16px var(--neon-soft); }
.toast.ver { opacity: 1; }

/* ── Ventana de confirmación ────────────────────────────────── */
.modal-fondo { position: fixed; inset: 0; z-index: 110; background: rgba(4, 2, 9, .78); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .18s; }
.modal-fondo.ver { opacity: 1; pointer-events: auto; }
.modal { width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px; transform: translateY(10px); transition: transform .18s; box-shadow: 0 0 40px var(--neon-soft); }
.modal-fondo.ver .modal { transform: none; }
.modal-cab { text-align: center; margin-bottom: 18px; }
.modal-cab .ic { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--magenta); color: var(--magenta); box-shadow: 0 0 14px var(--neon-soft); }
.modal-cab h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.modal-cab p { font-size: 12.5px; color: var(--soft); margin-top: 6px; line-height: 1.5; }
.repaso { border-top: 1px solid var(--border-soft); }
.repaso .fila { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.repaso .fila .k { color: var(--soft); flex: none; }
.repaso .fila .v { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.repaso .fila.total { border-bottom: 0; padding-top: 14px; box-shadow: none; background: none; border: 0; margin: 0; padding-left: 0; padding-right: 0; }
.repaso .fila.total .k { font-weight: 700; color: var(--text); font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.repaso .fila.total .v { font-size: 19px; color: var(--magenta); }
.modal-botones { display: flex; gap: 10px; margin-top: 18px; }
.modal-botones .btn { flex: 1; }
.nota-codigo { display: flex; gap: 9px; margin-top: 14px; background: var(--surface-2); border: 1px solid var(--amber); border-radius: 8px; padding: 11px 12px; font-size: 12.5px; color: var(--soft); line-height: 1.55; text-align: left; }
.nota-codigo svg { color: var(--amber); flex: none; margin-top: 2px; }
.nota-codigo b { color: var(--text); }

/* ── Banner y ventana de la ruleta (los inyecta js/ruleta-modal.js) ────── */
body .rlt-banner { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--magenta); color: #fff; box-shadow: none; font-size: 14px; max-width: var(--wide); border-radius: 14px; }
body .rlt-banner span.em { display: inline-flex; font-size: inherit; }
body .rlt-banner:hover { border-color: var(--magenta); }
.rlt-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--magenta); vertical-align: middle; flex: none; }
.rlt-ico.ok { color: var(--green); border-color: rgba(34, 197, 94, .4); }
html.tema-nuevo .rlt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; }
html.tema-nuevo .rlt-card h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.2px; padding-right: 36px; }
html.tema-nuevo .rlt-x { width: 36px; height: 36px; border-radius: 10px; font-size: 24px; color: var(--soft); top: 12px; right: 12px; }
html.tema-nuevo .rlt-x:hover { background: var(--surface-2); color: #fff; }
html.tema-nuevo .rlt-wheel, html.tema-nuevo .wheel { border: 6px solid var(--surface-3); box-shadow: 0 0 0 2px var(--border), 0 12px 32px rgba(0, 0, 0, .45); }
/* Las etiquetas van un poco hacia adentro: pegadas al borde, la rueda (overflow hidden) las recortaba */
html.tema-nuevo .rlt-seg span, html.tema-nuevo .seg-lbl span { margin-top: 30px; font-size: 11px; font-weight: 800; letter-spacing: .2px; max-width: 74px; line-height: 1.1; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .6); }
html.tema-nuevo .rlt-ptr, html.tema-nuevo .wheel-pointer { border-top-color: #fff; filter: drop-shadow(0 0 6px var(--neon)); }
html.tema-nuevo .rlt-hub, html.tema-nuevo .wheel-hub {
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF2EA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12v10H4V12'/><path d='M2 7h20v5H2z'/><path d='M12 22V7'/><path d='M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7z'/><path d='M12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z'/></svg>") center / 22px no-repeat;
  border: 3px solid var(--magenta); color: transparent; font-size: 0;
}
html.tema-nuevo .rlt-hub svg { display: none; }
html.tema-nuevo .rlt-mov, html.tema-nuevo .rl-mov { border-top: 1px solid var(--border-soft); color: var(--soft); }
html.tema-nuevo .rlt-res { border-radius: 12px !important; border: 1px solid var(--border) !important; background: var(--surface-2); color: var(--text); }
html.tema-nuevo .rlt-res.gano { border-color: var(--green) !important; background: #08240F; }
html.tema-nuevo .rlt-res.mal { border-color: var(--red) !important; background: #2A0A15; color: #FFB3C1; }
html.tema-nuevo .rlt-res .rlt-ico { display: inline-grid; margin: 0 auto 8px; }

/* ── Subpáginas: lo que el diseño viejo dejaba sin estilo (campos sin clase, .help, .btn.ghost, emojis) ── */
html.tema-nuevo .emoji { display: none; }
.help { font-size: 11.5px; color: var(--dim); margin-top: 6px; }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--magenta); }
html.tema-nuevo .rl-wrap label, html.tema-nuevo #formCanje label, html.tema-nuevo .rlt-card label { display: block; font-size: 12px; color: var(--soft); font-weight: 600; margin-bottom: 6px; }
html.tema-nuevo .rl-wrap input, html.tema-nuevo #formCanje input, html.tema-nuevo .rlt-card input {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 15px; font-size: 16px; color: var(--text); font-family: inherit;
}
html.tema-nuevo .rl-wrap input:focus, html.tema-nuevo #formCanje input:focus, html.tema-nuevo .rlt-card input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px var(--neon-soft); }
html.tema-nuevo main.wrap > .card:first-child, html.tema-nuevo main.wrap > div:first-child > .card:first-child { margin-top: 20px; }
html.tema-nuevo main.wrap h1 { letter-spacing: -.3px; }
html.tema-nuevo .texto h1 { font-size: 26px; }
@media (min-width: 1000px) {
  html.tema-nuevo main.wrap { padding-top: 10px; }
  html.tema-nuevo main.wrap > .card:first-child, html.tema-nuevo main.wrap > div:first-child > .card:first-child { margin-top: 28px; }
}

/* ============================================================
   PÁGINA DEL PEDIDO (confirmacion.html) y páginas de texto:
   las mismas clases de meliodas.css con los colores nuevos, para
   que al cambiar de diseño todo el sitio siga el mismo tema.
   ============================================================ */
.ref-caja { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; }
.ref-caja .k { font-size: 10.5px; color: var(--soft); text-transform: uppercase; letter-spacing: .9px; }
.ref-caja .v { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 20px; font-weight: 800; color: var(--magenta); letter-spacing: 1px; }
.estado { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 15px; }
.estado .ic { width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--soft); }
.estado h1 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 4px; }
.estado p  { font-size: 13px; color: var(--soft); line-height: 1.55; }
.estado.esperando { border-color: var(--magenta); } .estado.esperando .ic { color: var(--magenta); }
.estado.listo { border-color: var(--green); } .estado.listo .ic { color: var(--green); }
.estado.parcial { border-color: var(--amber); } .estado.parcial .ic { color: var(--amber); }
.estado.malo { border-color: var(--red); } .estado.malo .ic { color: var(--red); }
.late { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.linea { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.linea:last-child { border-bottom: 0; }
.linea .k { color: var(--soft); }
.linea .v { font-weight: 700; text-align: right; }
.entrega { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; margin-bottom: 9px; }
.entrega .nom { font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.entrega .sub { font-size: 11.5px; color: var(--dim); }
.entrega .cod { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2); border: 1px solid var(--green); border-radius: 8px; padding: 11px 12px; margin-top: 10px; }
.entrega .cod code { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 15px; font-weight: 700; color: var(--green); word-break: break-all; line-height: 1.4; }
.entrega .est { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--soft); }
.cod-caja { margin-top: 10px; }
.cod-caja .cod-tit { font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
.cod-caja .cod { margin-top: 0; border-width: 2px; padding: 14px 13px; }
.cod-caja .cod code { font-size: 17px; letter-spacing: .5px; }
.cod-caja .ayuda { font-size: 12px; color: var(--soft); margin-top: 8px; line-height: 1.5; }
.cod-guarda, .a-favor { display: flex; gap: 9px; margin-top: 10px; background: var(--surface-2); border: 1px solid var(--amber); border-radius: 8px; padding: 11px 12px; font-size: 12.5px; color: var(--soft); line-height: 1.55; }
.cod-guarda svg { color: var(--amber); flex: none; margin-top: 2px; }
.cod-guarda b, .a-favor b { color: var(--text); }
.a-favor { margin: 0 0 14px; border-color: var(--magenta); }
.a-favor svg { color: var(--magenta); flex: none; margin-top: 2px; }
.texto h1 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.texto h1 b { color: var(--magenta); font-weight: 800; }
.texto .fecha { font-size: 11.5px; color: var(--dim); margin-top: 5px; }
.texto h2 { font-size: 13px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--soft); margin: 22px 0 8px; }
.texto h2:first-of-type { margin-top: 18px; }
.texto p { font-size: 13.5px; color: var(--soft); line-height: 1.65; }
.texto p + p { margin-top: 10px; }
.texto ul { margin: 8px 0 0 18px; }
.texto ul + p, .texto p + ul { margin-top: 10px; }
.texto li { font-size: 13.5px; color: var(--soft); line-height: 1.65; margin-bottom: 6px; }
.texto li::marker { color: var(--magenta); }
.texto b, .texto strong { color: var(--text); font-weight: 700; }
.preg { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); margin-bottom: 9px; overflow: hidden; }
.preg > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; background: none; border: 0; cursor: pointer; padding: 14px 15px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.preg > button svg { flex: none; color: var(--dim); transition: transform .2s, color .2s; }
.preg .r { max-height: 0; overflow: hidden; padding: 0 15px; font-size: 13.5px; color: var(--soft); line-height: 1.65; transition: max-height .25s ease, padding .25s ease; }
.preg.abierta { border-color: var(--magenta); }
.preg.abierta > button svg { transform: rotate(90deg); color: var(--magenta); }
.preg.abierta .r { max-height: 460px; padding: 0 15px 15px; overflow-y: auto; }
.preg .r p + p { margin-top: 9px; }
.preg .r ul { margin: 8px 0 0 17px; }
.preg .r li { margin-bottom: 5px; }
.preg .r li::marker { color: var(--magenta); }
.intentos { margin-top: 14px; }
.intento { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; color: var(--soft); }
.intento:last-child { border-bottom: 0; }
.intento .ic { width: 18px; height: 18px; flex: none; display: grid; place-items: center; }
.intento.buscando .ic { color: var(--magenta); }
.intento.buscando .ic svg { animation: girando 1.4s linear infinite; }
.intento.si .ic { color: var(--green); }
.intento.no .ic { color: var(--dim); }
.intento.si { color: var(--text); }
.no-encontrado ol { margin: 10px 0 0 18px; }
.no-encontrado li { font-size: 13px; color: var(--soft); line-height: 1.6; margin-bottom: 8px; }
.no-encontrado li b { color: var(--text); }
.no-encontrado li::marker { color: var(--magenta); font-weight: 700; }
.buscador { margin: 4px 0 14px; }
.buscador .subtit { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
.fila-busca { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.fila-busca input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 13px 12px; font-size: 15px; font-family: inherit; }
.fila-busca input:focus { outline: none; border-color: var(--magenta); }
.fila-busca input::placeholder { color: var(--dim); }
@media (max-width: 380px) { .fila-busca { grid-template-columns: 1fr; } }
.seguimiento { display: flex; flex-direction: column; gap: 0; }
.seg-paso { display: flex; gap: 13px; position: relative; padding-bottom: 18px; }
.seg-paso:last-child { padding-bottom: 0; }
.seg-paso:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 4px; width: 2px; background: var(--surface-3); }
.seg-paso.hecho:not(:last-child)::before { background: var(--green); }
.seg-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--surface-3); color: var(--dim); position: relative; z-index: 1; }
.seg-paso.hecho .seg-ic { background: var(--green); border-color: var(--green); color: #06240F; }
.seg-paso.ahora .seg-ic { background: var(--surface-2); border-color: var(--magenta); color: var(--magenta); }
.seg-paso.malo .seg-ic  { background: var(--surface-2); border-color: var(--red); color: var(--red); }
.seg-txt { padding-top: 4px; min-width: 0; }
.seg-tit { font-size: 14.5px; font-weight: 700; color: var(--dim); }
.seg-paso.hecho .seg-tit, .seg-paso.ahora .seg-tit { color: var(--text); }
.seg-sub { font-size: 12.5px; color: var(--soft); line-height: 1.5; margin-top: 3px; }
.seg-paso:not(.hecho):not(.ahora) .seg-sub { color: var(--dim); }
.seg-paso.ahora .seg-ic svg { animation: girando 1.6s linear infinite; }
@keyframes girando { to { transform: rotate(360deg); } }
.cab-estado { text-align: center; padding: 6px 0 18px; }
.cab-estado .ico-grande { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--magenta); color: var(--magenta); box-shadow: 0 0 16px var(--neon-soft); }
.cab-estado.listo .ico-grande { border-color: var(--green); color: var(--green); box-shadow: none; }
.cab-estado.malo .ico-grande  { border-color: var(--red); color: var(--red); box-shadow: none; }
.cab-estado.aviso .ico-grande { border-color: var(--amber); color: var(--amber); box-shadow: none; }
.cab-estado h1 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.cab-estado p { font-size: 13.5px; color: var(--soft); line-height: 1.6; margin-top: 7px; }
.resumen-item { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 13px; margin-top: 16px; }
.resumen-item img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: none; }
.resumen-item .nom { font-size: 14px; font-weight: 700; }
.resumen-item .sub { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.plegable > summary { cursor: pointer; list-style: none; padding: 13px 0; font-size: 13.5px; font-weight: 700; color: var(--soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary svg { transition: transform .2s; flex: none; color: var(--dim); }
.plegable[open] > summary svg { transform: rotate(90deg); color: var(--magenta); }
.plegable[open] > summary { color: var(--text); }
.pasos { counter-reset: p; }
.pasos li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 13px; color: var(--soft); line-height: 1.5; }
.pasos li .n { counter-increment: p; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.pasos li .n::before { content: counter(p); }
/* Compatibilidad con las páginas viejas que usan .topbar/.marca/.flotantes */
.topbar .marca { font-size: 17px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.topbar .marca b { color: var(--magenta); }
.flotantes { display: none; }

/* ============================================================
   RESPONSIVE: tablet y escritorio
   ============================================================ */
@media (max-width: 359px) {
  .nv-pasos { grid-template-columns: 1fr; gap: 14px; }
  .nv-pasos li { flex-direction: row; text-align: left; }
  .nv-pasos li:not(:last-child)::after { display: none; }
  .nv-grid { grid-template-columns: 1fr; }
}
@media (min-width: 600px) {
  .nv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .nv-paso-tx b { font-size: 14px; }
  .nv-paso-tx p { font-size: 12px; }
  .nv-tit { font-size: 28px; }
  .nv-otros { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) {
  .hero-in { padding: 54px 24px 50px; min-height: 420px; }
  .hero h1 { font-size: 64px; }
  .hero-chips li { font-size: 14px; }
  .hero-arte { right: 0; width: 440px; opacity: 1; }
  .hero-arte.personaje { width: 460px; right: 0; }
  .nv-tit::before, .nv-tit::after { display: block; }
  .nv-pasos { gap: 18px; }
  .nv-paso-ic { width: 64px; height: 64px; }
  .nv-soporte { padding: 18px 22px; }
}
@media (min-width: 1000px) {
  /* Escritorio: el contenido usa la pantalla (el contenedor crece con el ancho) y todo sube de escala */
  :root { --wide: 1320px; --cab: 84px; }
  body { padding-bottom: 30px; }
  .nv-bottom { display: none; }
  .nv-navdesk { display: flex; gap: 30px; font-size: 15px; }
  .nv-menu { display: none; }
  .nv-top-in { padding: 0 32px; }
  .nv-logo img { width: 54px; height: 54px; border-radius: 14px; }
  .nv-marca small { font-size: 11px; letter-spacing: 3.6px; }
  .nv-marca b { font-size: 24px; }
  .nv-wa { width: 50px; height: 50px; }
  /* Hero en fila: el texto a la izquierda (dos líneas de titular) y el emblema centrado en el espacio que queda */
  .hero-in { padding: 84px 32px 80px; min-height: 580px; display: flex; align-items: center; gap: 40px; }
  .hero-txt { flex: 0 0 auto; max-width: 720px; }
  .hero h1 { font-size: 84px; }
  .hero-chips { gap: 12px 0; margin: 26px 0 30px; }
  .hero-chips li { font-size: 15.5px; }
  .hero-chips svg { width: 18px; height: 18px; }
  .btn-cta { font-size: 17px; padding: 18px 34px; }
  .hero-nota { font-size: 14px; max-width: 520px; }
  .hero-arte { position: static; transform: none; margin: 0 auto; width: 520px; max-width: 42%; opacity: 1; order: 2; }
  .hero-arte.personaje { width: 560px; max-width: 46%; }
  .hero-dec-a { width: 320px; left: -40px; bottom: 44px; }
  .hero-dec-b { width: 280px; right: -40px; top: 30px; }
  .nv-juegos, .nv-como { padding-left: 32px; padding-right: 32px; }
  .nv-sec-cab { margin-bottom: 20px; }
  .nv-sec-cab h2 { font-size: 30px; }
  .nv-conteo { font-size: 13px; }
  .nv-filtros { display: flex; align-items: center; gap: 16px; }
  .nv-busca { flex: 0 1 540px; height: 54px; }
  .nv-pills { flex: 1; min-width: 0; padding: 0; overflow: visible; flex-wrap: wrap; }
  .pill { font-size: 13.5px; padding: 10px 17px; }
  .nv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
  .tarj .cuerpo { padding: 12px 14px 14px; }
  .tarj .nom { font-size: 16px; }
  .tarj .disp { font-size: 10.5px; }
  .tarj .flecha { width: 38px; height: 38px; }
  .nv-como { padding-top: 56px; }
  .nv-tit { font-size: 34px; margin-bottom: 32px; }
  .nv-pasos { gap: 24px; max-width: 1100px; margin: 0 auto; }
  .nv-paso-ic { width: 76px; height: 76px; border-radius: 20px; }
  .nv-paso-ic svg { width: 32px; height: 32px; }
  .nv-pasos li:not(:last-child)::after { width: 14px; height: 14px; top: 30px; right: -14px; }
  .nv-paso-tx .n { font-size: 20px; }
  .nv-paso-tx b { font-size: 17px; }
  .nv-paso-tx p { font-size: 14px; max-width: 280px; margin: 6px auto 0; }
  .nv-soporte { width: calc(100% - 64px); margin-top: 44px; padding: 22px 28px; gap: 18px; }
  .nv-sop-ic { width: 58px; height: 58px; }
  .nv-sop-tx b { font-size: 19px; }
  .nv-sop-tx p { font-size: 14px; }
  .btn-wa { font-size: 15px; padding: 13px 24px; }
  /* Vista del juego en escritorio: franja ancha, compra a la izquierda y panel fijo a la derecha */
  .nv-juego-band-in { max-width: 1180px; padding: 22px 32px; gap: 16px; }
  .nv-juego-arte { width: 68px; height: 68px; border-radius: 16px; }
  .nv-juego-tit h1 { font-size: 28px; }
  .nv-juego-grid { max-width: 1180px; padding: 0 32px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
  .nv-juego-lado { position: sticky; top: calc(var(--cab) + 16px); }
  .nv-resumen { display: block; margin-top: 16px; }
  .nv-juego-lado .seccion { text-align: left; margin: 26px 0 10px; letter-spacing: 2.4px; }
  .nv-juego-lado .nv-otros { grid-template-columns: 1fr; gap: 8px; }
  .nv-juego-lado .juego { padding: 10px 12px; }
  .nv-juego-lado .juego .arte, .nv-juego-lado .juego .arte-txt { width: 42px; height: 42px; }
  .nv-juego-lado .juego .nom { font-size: 14px; }
  .nv-juego-main .grid-paq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-in { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 24px 32px; padding: 44px 32px 26px; }
  .pie-marca { grid-column: auto; }
  .pie-base { padding: 18px 32px 24px; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .pie-legal { text-align: right; }
  .toast { bottom: 28px; }
}
@media (min-width: 1400px) {
  :root { --wide: 1480px; }
  .nv-juego-band-in, .nv-juego-grid { max-width: 1300px; }
  .nv-juego-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 44px; }
  .hero h1 { font-size: 92px; }
  .hero-txt { max-width: 800px; }
  .hero-in { min-height: 620px; }
  .hero-arte { width: 600px; }
  .nv-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1800px) {
  :root { --wide: 1640px; }
  .hero-arte { width: 660px; }
}
@media (min-width: 600px) and (max-width: 999.98px) {
  .pie-in { grid-template-columns: 1fr 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
  .pie-base { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-pista, .barra i, .seg-paso.ahora .seg-ic svg, .intento.buscando .ic svg { animation: none; }
  .tarj, .btn, .btn-cta, .nv-drawer { transition: none; }
}

/* CUENTA: píldora con la M del logo completo + la palabra en mayúscula, fondo negro. */
.nv-reg { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px 0 4px; margin-left: 10px;
  border-radius: 999px; background: #000; color: #fff; font-weight: 800; font-size: 11px;
  text-decoration: none; white-space: nowrap; transition: .15s; border: 0; text-transform: uppercase; letter-spacing: .4px; }
.nv-reg:hover { background: #111; }
.nv-reg img { width: 24px; height: 24px; object-fit: cover; display: block; }
@media (max-width: 560px) { .nv-reg { height: 30px; padding: 0 9px 0 3px; font-size: 10px; margin-left: 8px; } .nv-reg img { width: 20px; height: 20px; } }

/* EFECTO AL ELEGIR: logos M que salen de la tarjeta. */
.chispa-logo { position: fixed; z-index: 9999; pointer-events: none; object-fit: contain;
  animation: chispa-vuela .9s ease-out forwards; }
@keyframes chispa-vuela {
  0% { transform: translate(-50%, -50%) scale(.4) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(var(--rot)); opacity: 0; }
}
.paq.elegido-brillo { animation: paq-brillo .7s ease-out; }
@keyframes paq-brillo {
  0% { box-shadow: 0 0 0 0 rgba(217, 70, 160, .7); }
  100% { box-shadow: 0 0 0 18px rgba(217, 70, 160, 0); }
}

/* SELLO GANADO: golpe de timbre (el sello cae y marca). */
.sello-golpe { animation: sello-golpe .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes sello-golpe {
  0% { transform: translateY(-34px) scale(1.7); opacity: 0; }
  55% { transform: translateY(0) scale(1.18); opacity: 1; }
  75% { transform: translateY(0) scale(.92); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* SELLO GANADO: queda girando sin parar (lento, para que se note sin marear). */
.sello.on .sello-img, .sello-girando { animation: sello-girar 5s linear infinite; }
@keyframes sello-girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}