/* rediseno.css — capa del rediseño UX (auditoría 2026-10). Se carga DESPUÉS de style.css y solo
   usa sus tokens (--bg, --card, --pri…), así que funciona igual en tema oscuro y claro.
   Secciones: 1) base y accesibilidad · 2) barra superior + navegación inferior · 3) home · 4) checkout. */

:root{
  --tap:44px;            /* área táctil mínima (iOS 44pt / Android 48dp) */
  --bnav-h:62px;         /* alto de la barra de navegación inferior (móvil) */
  --topbar-h:64px;       /* lo actualiza checkout-ux.js con la altura real */
  --gold:#f5b301;        /* Deivis Points */
  --ok-soft:rgba(34,197,94,.14);
}
html[data-theme="light"]{ --gold:#a86b00; --ok-soft:rgba(22,163,74,.12) }

/* ================= 1) Base y accesibilidad ================= */
/* Foco visible en TODO lo interactivo (antes solo los inputs, y con outline:none). */
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
.btn:focus-visible,.pkg:focus-visible,.method:focus-visible{outline:2px solid var(--pri);outline-offset:3px}

/* Reducir movimiento: se respeta en toda la web (antes 1 regla para 5 animaciones). */
/* Reducir movimiento: se quitan los DESPLAZAMIENTOS y bucles; los cambios de estado (color, borde,
   opacidad) se mantienen con una transición corta para no perder la respuesta visual. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .slides,.speed-step,.speed-arrow,.pkg-skel{animation:none !important}
  .slides{transition:none !important}
  .pkg:hover,.game:hover,.mv-pkg:hover,.wa-fab:hover{transform:none !important}
  .ck-steps .sp i,.btn,.pkg,.jchip,.ck-tabs button{transition-duration:.12s !important}
}

/* Iconos SVG (sprite de /js/ux.js) */
.ic{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;display:inline-block}
.ic-gem{color:var(--gem)}
.ic-coin{color:var(--gold)}

/* Una sola familia de texto (Poppins) + Bebas para titulares: Montserrat ya no se descarga. */

/* Botón deshabilitado legible: antes era el botón primario al 50 % de opacidad ("¿está roto?"). */
.btn:disabled,.btn:disabled:hover{opacity:1;background:var(--inner);color:var(--muted);border:1px solid var(--line);box-shadow:none;filter:none}

/* ================= 2) Barra superior + navegación inferior ================= */
.theme-toggle{width:var(--tap);height:var(--tap)}
/* Puntos del carrusel: 8px visibles dentro de un botón de 28px (WCAG 2.5.8) */
.dots{bottom:4px;gap:0}
.dots .dot,.dots .dot.on{width:28px;height:28px;background:transparent;border-radius:50%;display:grid;place-items:center}
.dots .dot::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:width .2s,background .2s}
.dots .dot.on::before{width:20px;border-radius:5px;background:var(--pri)}
.cnav{width:var(--tap);height:var(--tap)}
.foot a{display:inline-block;padding:12px 4px}

.bnav{display:none}
@media (max-width:720px){
  body.has-bnav{padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px))}
  /* El menú superior no cabía (5 enlaces de 32px cortados en "Consu…"): pasa a la barra inferior. */
  body.has-bnav .topbar .nav{display:none}
  body.has-bnav .topbar{flex-wrap:nowrap;padding:8px 12px;row-gap:0}
  .topbar .brand img{height:36px}
  .region-btn,#cuentaLink,.topbar .btn.ghost{min-height:var(--tap)}
  .bnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:44;
    height:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));padding:4px 4px env(safe-area-inset-bottom,0px);
    background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.25)}
  .bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--tap);
    color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:600;border-radius:12px}
  .bnav a .ic{width:22px;height:22px}
  .bnav a.on{color:var(--pri)}
  .bnav a:active{background:var(--inner)}
  body.has-bnav .wa-fab{bottom:calc(var(--bnav-h) + 14px + env(safe-area-inset-bottom,0px))}
}
.wa-fab{width:52px;height:52px}
.wa-fab .ic{width:26px;height:26px}

/* ================= 3) Home ================= */
@media (min-width:761px){.hero-2col{align-items:flex-start}}
.hero-home{text-align:left !important;min-width:0}
.hero-home h1{font-size:clamp(30px,8vw,46px);line-height:1.02;text-wrap:balance;margin:.05em 0 .15em}
.hero-home > p{font-size:14.5px;line-height:1.5;max-width:46ch}
@media (max-width:760px){
  /* Antes el banner iba PRIMERO (order:-1) y empujaba el precio 350px hacia abajo. */
  .hero-2col .carousel{order:0}
  .hero-2col .hero.hero-home{padding:4px 0 0}
}

/* Selector de juego */
.jchips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;margin:16px -4px 0;padding:2px 4px 6px;scrollbar-width:none}
.jchips::-webkit-scrollbar{display:none}
.jchips:empty{min-height:var(--tap)}
.jchip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px 0 6px;
  border-radius:999px;border:1px solid var(--line);background:var(--inner);color:var(--txt);font:600 13px/1 'Poppins',system-ui,sans-serif;
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.jchip img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.jchip:hover{border-color:var(--pri)}
.jchip.on{border-color:var(--pri);background:rgba(0,219,255,.12);color:var(--pri)}
.jchip-more{padding:0 14px;color:var(--muted)}

/* Más vendidos del juego elegido */
.mv-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:14px 0 10px}
.mv-tit{font-size:22px;margin:0;letter-spacing:.5px}
.mv-all{color:var(--pri);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;padding:10px 0}
.mv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mv-pkg{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;text-decoration:none;min-height:104px;padding:14px 12px 12px}
.mv-pkg:hover{transform:translateY(-2px)}
.mv-q{display:flex;align-items:center;gap:6px;font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--txt)}
.mv-q .ic{width:20px;height:20px}
.mv-q .ico-unit{height:22px}
.mv-q.mv-nombre{font-size:15px;line-height:1.25}
.mv-bono{font-size:12px;font-weight:600;color:var(--pri);background:rgba(0,219,255,.1);padding:2px 8px;border-radius:999px}
.mv-price{margin-top:auto;font-size:17px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
.mv-pkg .pkg-badge{left:auto;right:10px;transform:none}
.mv-vacio{grid-column:1/-1;color:var(--muted);font-size:14px;margin:6px 0}
.mv-vacio a{color:var(--pri)}
.pkg-skel{display:block;min-height:115px;cursor:default;background:linear-gradient(100deg,var(--inner) 30%,var(--card) 50%,var(--inner) 70%);background-size:300% 100%;animation:skel 1.4s ease-in-out infinite}
.pkg-skel:hover{transform:none;border-color:var(--line)}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
.hero-home .stats-strip{margin:14px 0 0}

/* Catálogo plegable: 8 visibles + "Ver todos" */
.games:not(.all) > :nth-child(n+9){display:none}
.games-more{display:block;margin:14px auto 0;min-height:var(--tap)}
.games-more[hidden]{display:none}

/* Iconos SVG en "entrega en segundos" y "por qué elegirnos" */
.speed-step .si .ic{width:28px;height:28px;color:var(--pri)}
.why-card .ic .ic,.why-card .ic svg{width:26px;height:26px;color:var(--pri)}

/* ================= 4) Checkout /juego/<slug> ================= */
/* Progreso fijo bajo la barra superior */
.ck-steps{list-style:none;margin:0 -20px 4px;padding:10px 20px;display:flex;gap:8px;position:sticky;top:var(--topbar-h);z-index:4;background:var(--bg)}
.ck-steps .sp{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.ck-steps .sp::before{display:none}  /* neutraliza la línea del stepper antiguo de style.css */
.ck-steps .sp i{display:block;height:4px;border-radius:4px;background:var(--line);transition:background .2s}
.ck-steps .sp.on{color:var(--txt)} .ck-steps .sp.on i{background:var(--pri)}
.ck-steps .sp.done{color:var(--ok)} .ck-steps .sp.done i{background:var(--ok)}
.step{scroll-margin-top:calc(var(--topbar-h) + 56px)}

/* Jugador verificado como tarjeta */
.nick.nick-ok{display:flex;align-items:center;gap:12px;border-color:color-mix(in srgb,var(--ok) 55%,transparent);background:var(--ok-soft);padding:10px 12px}
.nick-av{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.nick-av .ic{width:20px;height:20px}
.nick-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.nick-t b{font-size:15px;overflow-wrap:anywhere}
.nick.nick-ok .meta{margin-left:0;font-size:12.5px}
.nick-ck{flex:none;display:inline-flex;align-items:center;gap:4px;color:var(--ok);font-size:12.5px;font-weight:700}

/* Tarjetas de paquete: 3 datos (cantidad · bono · precio) y nada por debajo de 12px */
.pkg .pkg-dp{display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:700;color:var(--gold);margin-top:4px}
.pkg .pkg-agente,.pkg .pkg-oferta-nota{display:block;text-align:center;font-size:12px;font-weight:600;line-height:1.35;margin-top:4px}
.pkg .pkg-agente{color:var(--gold)} .pkg .pkg-oferta-nota{color:var(--muted)}
.pkg .price-dp{display:flex;align-items:center;justify-content:center;gap:4px;color:var(--gold)}
.pkg .pkg-falta{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.pkg .dia .ic{width:.95em;height:.95em}
.pkg-badge{font-size:11px;padding:3px 9px}
.pkg-badge-oferta{background:linear-gradient(90deg,#e0a800,#ff6a00)}
.pkg-badge-pase{background:linear-gradient(90deg,#7c3aed,#00a3cc)}
.pkg-off{opacity:.55}
.pkg.sel::after{content:"";position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;
  background:var(--pri) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304122b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.pkg.sel{box-shadow:0 0 0 2px var(--pri),0 0 22px -8px var(--pri)}
@media (max-width:600px){
  /* 2 columnas (antes 3 con textos de 9–10px partidos en 2–3 líneas) */
  #productGrid{grid-template-columns:repeat(2,1fr);gap:10px}
  #productGrid .pkg{padding:14px 10px 12px}
  #productGrid .pkg .dia{font-size:19px}
  #productGrid .pkg .dia.pkg-titulo{font-size:14px}
  #productGrid .pkg .bono{font-size:12px}
  #productGrid .pkg .price{font-size:16px;margin-top:6px}
  #productGrid .pkg-badge{font-size:11px;padding:3px 8px;top:-9px}
}
/* "Diamantes" y "Recibes X en total" salen de la tarjeta: el total se lee una vez en el resumen fijo */
#productGrid .pkg .dia-u,#productGrid .pkg .pkg-total{display:none}
#productGrid .pkg .price{font-variant-numeric:tabular-nums}

/* Pestañas de paquetes */
.ck-tabs{grid-column:1/-1;display:flex;gap:4px;padding:4px;margin:0 0 6px;background:var(--inner);border:1px solid var(--line);border-radius:12px;overflow-x:auto;scrollbar-width:none}
.ck-tabs::-webkit-scrollbar{display:none}
.ck-tabs button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:var(--tap);padding:4px 8px;border:0;border-radius:9px;
  background:transparent;color:var(--muted);font:600 13px/1.15 'Poppins',system-ui,sans-serif;cursor:pointer;text-align:center}
.ck-tabs button .ic{width:14px;height:14px}
.ck-tabs button small{font-size:11px;font-weight:700;background:var(--line);color:var(--txt);border-radius:999px;padding:2px 7px}
.ck-tabs button.on{background:var(--card);color:var(--txt);box-shadow:0 0 0 1px var(--line) inset}
.ck-tabs button.on small{background:var(--pri);color:var(--ink)}
.ck-tabs .tab-sm{display:none}
@media (max-width:420px){ .ck-tabs button{padding:4px 6px;font-size:12px} .ck-tabs button small{display:none} .ck-tabs .tab-lg{display:none} .ck-tabs .tab-sm{display:inline} }
#productGrid.ck-tabs-on > .pkg-seccion{display:none}
#productGrid.ck-tabs-on[data-activa="rec"] > [data-tab]:not([data-tab="rec"]),
#productGrid.ck-tabs-on[data-activa="pas"] > [data-tab]:not([data-tab="pas"]),
#productGrid.ck-tabs-on[data-activa="niv"] > [data-tab]:not([data-tab="niv"]),
#productGrid.ck-tabs-on[data-activa="ofe"] > [data-tab]:not([data-tab="ofe"]){display:none !important}

/* Método de pago y registro sin popup */
.method{min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center}
.reg-nudge{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;font-size:13px;line-height:1.45;color:var(--muted)}
.reg-nudge .ic{color:var(--gold);width:18px;height:18px;margin-top:1px}
.reg-nudge a{color:var(--pri);font-weight:700}

/* Resumen fijo con botón al pago */
.ck-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:12px;
  padding:10px max(16px,calc((100% - 760px) / 2)) calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--card);border-top:1px solid var(--line);box-shadow:0 -10px 28px -12px rgba(0,0,0,.45)}
.ck-bar[hidden]{display:none}
.ck-bar-s{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ck-bar-s span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-bar-s b{font-size:19px;font-variant-numeric:tabular-nums;color:var(--txt)}
.ck-bar .btn{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px}
.ck-bar .btn .ic{width:18px;height:18px}
body.ck-bar-on main{padding-bottom:96px}
body.ck-bar-on .wa-fab{bottom:96px}
@media (max-width:720px){
  body.has-bnav .ck-bar{bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));padding-bottom:10px}
  body.has-bnav.ck-bar-on .wa-fab{bottom:calc(var(--bnav-h) + 88px + env(safe-area-inset-bottom,0px))}
}
body:has(.modal:not([hidden])) .ck-bar{display:none}

/* Resumen dentro del paso de pago (todas las pantallas) */
.ck-sum{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--inner);border:1px solid var(--line)}
.ck-sum-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px}
.ck-sum-r span{color:var(--muted);flex:none}
.ck-sum-r b{text-align:right;font-weight:600;min-width:0;overflow-wrap:anywhere}
.ck-sum-r small{color:var(--muted);font-weight:500}
.ck-sum-total{padding-top:8px;margin-top:2px;border-top:1px solid var(--line)}
.ck-sum-total b{font-size:20px;font-weight:700;color:var(--pri);font-variant-numeric:tabular-nums}
.ck-sum-vacio{margin:0;color:var(--muted);font-size:13.5px}

/* ================= 5) Escritorio (≥1024px) =================
   Hasta aquí todo era la vista móvil centrada en 760px. En pantalla grande eso dejaba la columna de
   precios en ~310px junto a un banner más grande que el contenido. Aquí la página usa el ancho. */
@media (min-width:1024px){
  /* --- Home: 1120px, hero en 2 columnas equilibradas --- */
  .wrap.wrap-home{max-width:1120px;padding-inline:32px}
  .wrap-home .hero-2col{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center;margin:28px 0 36px}
  .wrap-home .hero-2col .carousel{max-width:none;width:100%;margin:0}
  .hero-home h1{font-size:58px}
  .hero-home > p{font-size:16px}
  .jchips{flex-wrap:wrap;overflow:visible;margin:22px 0 0;padding:0}
  .mv-head{margin:26px 0 12px}
  .mv-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .hero-home .stats-strip{margin-top:16px}
  .hero-home .stats-strip .stat{padding:12px 8px}
  /* Catálogo: 6 por fila, 2 filas visibles */
  .wrap-home .games{grid-template-columns:repeat(6,1fr);gap:14px}
  .wrap-home .games:not(.all) > :nth-child(n+9){display:block}
  .wrap-home .games:not(.all) > :nth-child(n+13){display:none}
  .wrap-home .catalogo .sec-tit{text-align:left}
  /* Secciones de confianza: usan el ancho con más columnas en lugar de estirar el texto */
  .wrap-home .card{padding:28px 32px}
  .wrap-home .why-grid{grid-template-columns:repeat(4,1fr)}
  .wrap-home .reviews-grid{grid-template-columns:repeat(3,1fr)}
  .wrap-home .why-sub{max-width:62ch;margin-inline:auto}
  .wrap-home .faq .faq-item{max-width:820px}

  /* --- Checkout: paquetes a la izquierda, pago + resumen fijo a la derecha --- */
  .wrap.wrap-ck{max-width:1120px;padding-inline:32px}
  .wrap-ck .hero-sm{text-align:left;padding:8px 0 4px}
  .wrap-ck .ck-steps{margin:0 0 6px;padding-inline:0;max-width:calc(100% - 384px)}
  .wizard.flow-all{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:24px;align-items:start}
  .wizard.flow-all > .step{margin:0 0 16px;grid-column:1}
  .wizard.flow-all > #step-pay{grid-column:2;grid-row:1 / span 3;position:sticky;top:calc(var(--topbar-h) + 16px)}
  #step-pay .methods{flex-direction:column}
  #step-pay .method{min-width:0}
  #step-pay .row#cuponRow input{min-width:0}
  #productGrid{grid-template-columns:repeat(4,1fr)}
  .ck-tabs button{flex:1 1 auto;white-space:nowrap;padding:4px 12px}
  /* El resumen ya está en el panel derecho: la barra inferior sobra */
  .ck-bar{display:none !important}
  body.ck-bar-on main{padding-bottom:0}
  body.ck-bar-on .wa-fab{bottom:16px}
  .consulta-link{text-align:left}
}

/* Tablet (761–1023px): el hero en fila dejaba los precios en una columna estrecha → se apila como en móvil */
@media (min-width:761px) and (max-width:1023px){
  .hero-2col{flex-direction:column;align-items:stretch;gap:20px}
  .hero-2col .hero.hero-home{flex-basis:auto}
  .hero-2col .carousel{flex-basis:auto;width:100%;max-width:440px;margin:0 auto}
  .mv-grid{grid-template-columns:repeat(4,1fr)}
}

/* ================= 6) Auditoría impeccable (2026-10) ================= */
/* Contraste del TEMA CLARO: el cian #0095c4 servía de fondo y de texto (3,0–3,4:1). #006a8e da
   5,0–6,1:1 sobre todos los fondos claros y 6,1:1 con texto blanco encima. */
html[data-theme="light"]{ --pri:#006a8e; --pri2:#005a7a; --gem:#006a8e; --gold:#8f5b00; --ok:#15803d; --err-text:#b91c1c }
:root{ --err-text:#f87171 }
.compare .no{color:var(--err-text)}
/* Etiquetas sobre degradado: texto blanco ≥5:1 (antes 2,6:1 en "Más vendido") */
.pkg-badge{background:linear-gradient(90deg,#c2410c,#c2185b)}
.pkg-badge-oferta{background:linear-gradient(90deg,#b45309,#c2410c)}
.pkg-badge-pase{background:linear-gradient(90deg,#6d28d9,#0e7490)}
.mv-bono{background:color-mix(in srgb,var(--pri) 12%,transparent)}

/* Texto por debajo de 12px en la home */
.stats-strip .stat span{font-size:12.5px}
.game-tag{font-size:11px}
.bnav a{font-size:12px}

/* "Entrega en segundos": se animaba la OPACIDAD al 45 % (texto apagado casi siempre). Ahora el texto
   queda siempre legible y lo que se mueve es el borde del paso activo. */
.speed-step,.speed-arrow{opacity:1}
@keyframes speedPulse{0%,72%,100%{border-color:var(--line);box-shadow:none}12%,42%{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri)}}
@media (max-width:520px){ .speed-step .st{font-size:12px} .speed-step .ss{font-size:12px} }

/* Áreas táctiles de 44px en los enlaces que quedaban cortos */
.volver-juegos,.mv-all{display:inline-flex;align-items:center;min-height:var(--tap)}
#comunidadBtn{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}
.consulta-link a{display:inline-block;padding:12px 4px}

/* Home: una sola capa de tarjetas. Las secciones dejan de ser tarjetas que contienen tarjetas;
   los puntos de "Por qué" pasan a ser una lista sin caja (icono + texto). */
.wrap-home .card.speed,.wrap-home .card.why,.wrap-home .card.reviews,.wrap-home .card.comunidad,.wrap-home .card.faq{
  background:none;border:0;box-shadow:none;border-radius:0;padding-inline:0;margin:40px 0}
.wrap-home .why-card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0 4px}
.wrap-home .why-card .ic{margin-bottom:6px}
.card{box-shadow:0 14px 30px -20px rgba(0,0,0,.7)}

/* Citas y notas: borde lateral de 1px (antes 3px de color: recurso de plantilla) */
.legal .note{border-left-width:1px}
.blog-body blockquote{border-left:1px solid var(--line);font-style:italic}

/* Superficies del navegador con la paleta de la marca */
::selection{background:color-mix(in srgb,var(--pri) 35%,transparent);color:inherit}
input,textarea{caret-color:var(--pri)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.modal-card:focus{outline:none}
.modal-card:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
/* El texto sobre banners va siempre sobre imagen oscura: cian fijo de la marca en ambos temas */
.slide h3,.slide.img .ovl h3,.cnav{color:#00dbff}
html[data-theme="light"]{ --ok:#166534 }
@media (max-width:520px){ .compare{font-size:12.5px} }
.topbar .brand{min-height:var(--tap)}

/* ================= 7) Modal de pago (rediseño 2026-10) =================
   Móvil: hoja a pantalla completa con cabecera fija (título + Cerrar) y la acción "Ya pagué" fija abajo.
   Computador: dos columnas cuando hay QR (se escanea con el teléfono), una columna si no. */
.modal-pago-card{padding:0;text-align:left;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.pg-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.pg-top .pago-titulo{margin:0;text-align:left;font-size:17px;line-height:1.25}
.modal-x.pg-cerrar{position:static;display:inline-flex;align-items:center;gap:6px;flex:none;min-height:var(--tap);padding:0 12px;
  border:1px solid var(--line);border-radius:10px;font:600 13px/1 'Poppins',system-ui,sans-serif;color:var(--muted)}
.modal-x.pg-cerrar:hover{color:var(--txt);border-color:var(--pri)}
#pago-instr{padding:16px 16px 0}
#pago-status{padding:16px}
.pago-panel .instr{background:none;border:0;padding:0;margin:0 0 12px}

.pg-head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.pg-monto{margin:0;font-size:32px;font-weight:700;line-height:1.05;color:var(--txt);font-variant-numeric:tabular-nums}
.pg-metodo{margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.pg-orden{margin:2px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.pg-orden code{font-size:13px;color:var(--txt);background:var(--inner);padding:2px 6px;border-radius:6px}
.btn-copy.pg-mini{min-height:32px;padding:0 10px;font-size:12px}
.pg-head .countdown{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:6px 0 0;padding:6px 12px;font-size:13.5px;font-weight:600}
.pg-head .countdown:empty{display:none}
.pg-head .countdown .ic{width:16px;height:16px}

.pg-pasos{list-style:none;counter-reset:pg;margin:4px 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.pg-pasos li{counter-increment:pg;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--txt)}
.pg-pasos li::before{content:counter(pg);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  font-size:12px;font-weight:700;color:var(--pri);border:1.5px solid var(--pri)}

.pg-datos{display:flex;flex-direction:column;background:var(--inner);border:1px solid var(--line);border-radius:14px;padding:4px 12px 12px}
.pg-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k b" "v b";column-gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.pg-fila:last-of-type{border-bottom:0}
.pg-k{grid-area:k;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.pg-k .ic{width:14px;height:14px}
.pg-v{grid-area:v;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;font-weight:700;color:var(--txt);overflow-wrap:anywhere}
.pg-fila .btn-copy{grid-area:b}
.btn-copy{min-height:var(--tap);padding:0 12px}
.btn-copy .ic{width:16px;height:16px}
.btn-copy.ok{background:var(--ok);color:#fff}
.pg-copiar-todo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;min-height:var(--tap)}
.pg-copiar-todo .ic{width:16px;height:16px}

.pg-nota{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pg-nota .ic{flex:none;width:18px;height:18px;margin-top:1px;color:var(--ok)}
.pg-nota b{color:var(--txt)}
.pg-nota-warn .ic{color:var(--gold)}
.pg-espera{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:10px 12px;border-radius:12px;background:var(--inner);font-size:13.5px;color:var(--txt)}
.pg-btn-ext{display:flex;justify-content:center;margin-top:8px}

/* QR: plegado en Pago Móvil/Nequi (no se escanea desde el mismo teléfono); principal en Bolivia y Binance */
.pg-qr{margin:0 0 14px;border:1px solid var(--line);border-radius:12px}
.pg-qr summary{display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 12px;cursor:pointer;color:var(--pri);font-size:13.5px;font-weight:600;list-style:none}
.pg-qr summary::-webkit-details-marker{display:none}
.pg-qr summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.pg-qr[open] summary::after{transform:rotate(-135deg)}
.pg-qr .qrbox{padding:0 12px 4px}
.pg-qr .pg-descargar{margin:4px 12px 12px;width:auto}
.pg-qr-main{margin:0 0 14px}
.pg-qr-main .qrbox img,.pg-qr .qrbox img{width:min(260px,78%);max-width:none;background:#fff;padding:10px;border-radius:14px}
.pg-qr-cargando{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px dashed var(--line);border-radius:14px}
.pg-descargar{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--tap);text-decoration:none}
.pg-descargar .ic{width:18px;height:18px}

/* Captura del comprobante: plegable si es opcional, abierta si es obligatoria */
details.comp-box{display:block;margin:14px 0 0;padding:0 12px;border:1px dashed var(--line);border-radius:12px}
details.comp-box > summary.comp-label{display:flex;align-items:center;gap:8px;min-height:var(--tap);cursor:pointer;list-style:none;font-size:13.5px}
details.comp-box > summary::-webkit-details-marker{display:none}
details.comp-box:not(.req) > summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
details.comp-box[open]:not(.req) > summary::after{transform:rotate(-135deg)}
details.comp-box.req{border-style:solid;border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
details.comp-box.req > summary{cursor:default}
.comp-label em{font-style:normal;color:var(--muted);font-weight:500}
details.comp-box .comp-pick{margin:2px 0 8px}
.comp-btn{min-height:var(--tap)}
.comp-warn,.comp-warn b{background:none;border:0;padding:0 0 12px;color:var(--muted);font-size:12.5px}

/* Acción "Ya pagué" fija abajo: siempre a mano al volver de la app del banco */
.pg-accion{position:sticky;bottom:0;z-index:2;margin:14px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--card);border-top:1px solid var(--line);box-shadow:0 -10px 24px -14px rgba(0,0,0,.5)}
.pg-accion:has(#refBlock[hidden]):has(#reportMsg:empty){display:none}
.ref-block{margin:0}
.ref-label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--txt)}
.ref-row{display:flex;gap:8px}
.ref-row input{flex:1;min-width:0}
.ref-row .btn{flex:none;min-height:48px;padding:0 18px}
.ref-help,.ref-help b{background:none;border:0;padding:0;margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
#reportMsg:not(:empty){margin:8px 0 0}
#btnCancelar{min-height:var(--tap);margin:6px auto 12px}

/* Estado del pedido */
.est-linea{list-style:none;display:flex;gap:6px;margin:14px 0 6px;padding:0;text-align:left}
.est-linea li{flex:1;display:flex;flex-direction:column;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted)}
.est-linea li::before{content:"";height:4px;border-radius:4px;background:var(--line)}
.est-linea li.done{color:var(--ok)} .est-linea li.done::before{background:var(--ok)}
.est-linea li.on{color:var(--txt)} .est-linea li.on::before{background:var(--pri)}
.status a{color:var(--pri)}

/* Aviso de orden abierta en la página (al cerrar el modal sin cancelar) */
.orden-pend{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 12px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);font-size:13.5px}
.orden-pend .ic{color:var(--gold);width:18px;height:18px;flex:none}
.orden-pend span{flex:1;min-width:180px}
.orden-pend .btn{min-height:var(--tap);padding:0 14px;font-size:13px}

@media (max-width:600px){
  .modal.modal-pago{padding:0}
  .modal-pago-card{max-width:none;min-height:100dvh;max-height:100dvh;border-radius:0;border:0}
}
@media (min-width:1024px){
  .modal-pago-card{max-width:560px}
  .modal-pago-card:has(.pg-con-qr){max-width:880px}
  .pg-grid.pg-con-qr{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start}
  #pago-instr{padding:20px 24px 0}
  .pg-accion{margin-inline:-24px;padding-inline:24px}
}
/* Ajustes tras la prueba visual: estilos heredados de .instr / .modal-card que pisaban el modal nuevo */
#instrBox .pg-monto{font-size:32px;font-weight:700;margin:0;color:var(--txt);text-align:left}
#instrBox .pg-metodo,#instrBox .pg-orden{text-align:left}
#instrBox .pg-head p{margin:0}
.pg-pasos li{display:block;position:relative;padding-left:32px}
.pg-pasos li::before{position:absolute;left:0;top:0;margin:0}
.ref-row .btn,.modal-card .ref-row .btn{width:auto}
.ref-row input{min-width:0;width:auto}
.pg-fila:not(:has(.btn-copy)) .pg-v{font-family:inherit;font-size:15px;font-weight:600}
.modal-card .pg-mini,.modal-card .btn-copy{width:auto}
.modal-pago-card p{margin:0;font-size:inherit;color:inherit;line-height:1.5}
#instrBox .pg-metodo{font-size:14px;color:var(--muted)}
#instrBox .pg-orden{font-size:12.5px;color:var(--muted);margin-top:2px}
#instrBox .pg-nota{margin-top:12px;font-size:13.5px;color:var(--muted)}
#instrBox .pg-espera{margin-top:14px;font-size:13.5px}
#instrBox .qrbox .k{display:block;margin-top:8px;font-size:13px;color:var(--muted);text-align:center}
.modal-pago-card .ref-help{margin-top:6px;font-size:12.5px;color:var(--muted)}
.modal-pago-card #reportMsg:not(:empty){margin-top:8px}
.modal-pago-card .comp-warn{padding-bottom:12px;font-size:12.5px;color:var(--muted)}
.modal-pago-card .status p{margin-top:8px;font-size:14px;color:var(--muted)}
.modal-pago-card .status .pill{display:inline-block;margin-top:8px}

/* ================= 8) Modal de pago tras el critique de impeccable (2026-10) ================= */
/* Dos fases: "paga" (datos + un solo botón abajo) y "reporta" (referencia). "auto" = se detecta solo. */
#pago-instr[data-fase="paga"] #pgFaseB,
#pago-instr[data-fase="paga"] #refBlock,
#pago-instr[data-fase="paga"] #compRow,
#pago-instr[data-fase="auto"] #pgFaseB,
#pago-instr[data-fase="auto"] #btnYaPague,
#pago-instr[data-fase="reporta"] #instrBox,
#pago-instr[data-fase="reporta"] #btnYaPague{display:none !important}
#pago-instr[data-fase="auto"] .pg-accion:has(#reportMsg:empty){display:none}
.pg-ya{width:100%;min-height:52px;font-size:15px}
.pg-fase-b{display:flex;flex-direction:column;gap:8px;margin:0 0 4px}
.pg-volver{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);padding:0 10px 0 4px;margin-left:-4px;
  background:none;border:0;border-radius:10px;color:var(--pri);font:600 13.5px/1 'Poppins',system-ui,sans-serif;cursor:pointer}
.pg-volver .ic{width:18px;height:18px}
.pg-fase-tit{margin:0;font:400 28px/1.05 'Bebas Neue',sans-serif;letter-spacing:.5px;color:var(--txt)}
.modal-pago-card .pg-recap{font-size:13.5px;color:var(--muted)}
.pg-recap code{font-size:12.5px;color:var(--txt);background:var(--inner);padding:1px 5px;border-radius:5px}
#pago-instr[data-fase="reporta"] .pg-accion{position:static;margin:16px 0 0;padding:0;border:0;box-shadow:none;background:none}
#pago-instr[data-fase="reporta"] details.comp-box{margin-top:16px}

/* Cabecera: monto con la tipografía de la marca; tiempo y orden como datos secundarios */
#instrBox .pg-monto{font:400 48px/1 'Bebas Neue',sans-serif;letter-spacing:.5px}
.pg-head .countdown{font-weight:500;background:var(--inner);border-color:var(--line);color:var(--txt)}
.pg-head .countdown b{font-variant-numeric:tabular-nums}
.pg-head .countdown.neutro{color:var(--muted)}
.pg-mini{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 6px;background:none;border:0;border-radius:8px;
  color:var(--pri);font:600 12px/1 'Poppins',system-ui,sans-serif;cursor:pointer}
.pg-mini .ic{width:14px;height:14px}
.pg-mini.ok{color:var(--ok);background:none}

/* "Copiar" secundario: el cian sólido queda solo para la acción principal. Al copiar, la fila queda marcada. */
.pg-fila .btn-copy{background:transparent;color:var(--pri);border:1px solid color-mix(in srgb,var(--pri) 45%,transparent);box-shadow:none}
.pg-fila .btn-copy:hover{background:color-mix(in srgb,var(--pri) 10%,transparent);transform:none}
.pg-fila .btn-copy.ok{background:transparent;color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.pg-fila.copiado .pg-k::after{content:"Copiado";margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;
  color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.code-box .btn-copy{background:transparent;color:var(--pri);border:1px solid color-mix(in srgb,var(--pri) 45%,transparent)}
html[data-theme="light"] .pg-fila .btn-copy,html[data-theme="light"] .code-box .btn-copy{color:var(--pri)}

/* Ayuda por WhatsApp en la cabecera (el botón verde queda tapado por el modal) */
.pg-top-acc{display:flex;align-items:center;gap:6px;flex:none}
.pg-ayuda{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 10px;border-radius:10px;text-decoration:none;
  color:var(--ok);font:600 13px/1 'Poppins',system-ui,sans-serif}
.pg-ayuda:hover{background:color-mix(in srgb,var(--ok) 12%,transparent)}
.pg-ayuda .ic{width:18px;height:18px}
.pg-ayuda[hidden]{display:none}
@media (max-width:380px){ .pg-ayuda span,.pg-cerrar span{display:none} }
#reportMsg a{color:var(--pri);font-weight:600}

/* Orden expirada (Binance): salida clara para quien ya pagó, sin invitar a pagar dos veces */
.pg-expirada{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:4px 0}
.pg-expirada > .ic{width:28px;height:28px;color:var(--gold)}
.pg-expirada h4{margin:0;font:400 28px/1.05 'Bebas Neue',sans-serif;letter-spacing:.5px;color:var(--txt)}
.modal-pago-card .pg-expirada p{font-size:14px;color:var(--muted)}
.pg-expirada .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px}

/* Texto de ejemplo del campo con contraste AA (antes 3,8:1) */
.modal-pago-card input::placeholder{color:#93a4bf;opacity:1}
html[data-theme="light"] .modal-pago-card input::placeholder{color:#55657e}

/* Escritorio: sombra corta (el borde fino + sombra de 60px era un recurso de plantilla) */
@media (min-width:601px){ .modal-pago-card{box-shadow:0 24px 48px -24px rgba(0,0,0,.75)} }
.pg-fila .btn-copy{min-width:112px;justify-content:center}

/* ================= Enlaces dentro de textos (revisión 2026-10-03) ================= */
.card a:not(.btn):not([class*="tab"]):not(.mv-all),.legal a:not(.btn),.k a,.msg a,.consulta-link a,.backlink{color:var(--pri);text-underline-offset:2px}
.card a:not(.btn):not([class*="tab"]):not(.mv-all):hover,.legal a:not(.btn):hover{text-decoration:underline}
.legal-tabs button{min-height:44px;padding-left:16px;padding-right:16px}
/* Consultar: error junto al campo */
.campo-err{margin:8px 0 0;font-size:13.5px;color:var(--err-text,#f87171)}
.campo-err[hidden]{display:none}

/* Mi cuenta: el botón de Google aparece sin empujar el formulario (CLS 0,117) */
#googleBox{min-height:44px}
#googleBox[hidden]{display:block !important;visibility:hidden}

/* Chips de juegos: espacio reservado antes de que lleguen (sin salto) */
.jchips:empty{min-height:52px}
@media (min-width:761px){ .jchips:empty{min-height:96px} }

/* Íconos SVG que reemplazan emojis grandes (torneos sin portada, blog sin imagen) */
.trn-fallback .ic,.trn-vacio-emoji .ic{width:56px;height:56px;color:var(--gold)}
.blog-card-noimg .ic{width:44px;height:44px;color:var(--pri)}
.foot .ic{color:var(--pri)}

/* Cabecera única de la tienda (server.js → cabeceraTienda) */
.topbar .top-acc{display:flex;align-items:center;gap:10px}
.topbar .top-cuenta,.topbar .top-salir{padding:8px 13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:40px}
.topbar .top-cuenta[aria-current="page"]{border-color:var(--pri);color:var(--pri)}

/* ===== Auditoría impeccable 2026-10-06 — mínimos del sistema: texto ≥12 px, toques ≥44 px, color por token ===== */
/* Texto: ninguna etiqueta baja de 12 px (DESIGN.md). Antes "DISPONIBLE", "Más vendido", contadores y la flecha del país iban a 9–11,5 px. */
.region-caret,.game-tag,.pkg-badge,#productGrid .pkg-badge,.ck-tabs button small,.pkg-juego-tag,.pkg .dia-u,.pkg .pkg-total,
#productGrid .pkg .bono,.trust-chip,.rtabla code,.review .rdate,.speed-step .ss,.speed-step .st,.stats-strip .stat span,
.vit-price small,.compare,.badge,.trn-modo,.est-linea li,.pg-fila.copiado .pg-k::after,.id-chip,.bnav a{font-size:12px}
/* Toques: los puntos del carrusel, el ojo de la contraseña, las X de cierre y "copiar" medían 26–32 px. */
.dots{bottom:0}
.dots .dot,.dots .dot.on{width:44px;height:44px}
.eye-btn{min-width:44px;min-height:44px;display:grid;place-items:center;right:2px}
.modal-x{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
.cr-x{position:absolute;top:6px;right:6px;width:44px;height:44px;padding:0;display:grid;place-items:center}
.cr-x .ic{width:20px;height:20px}
@media (max-width:760px){
  .btn-copy.pg-mini,.pg-mini{min-height:44px}
  .id-chip{min-height:44px;padding:8px 13px}
}
/* Selector de comprobante: el input real es invisible pero enfocable; el foco se ve en su botón. */
.comp-pick:focus-within .comp-btn,.cr-file:focus-within .btn{outline:2px solid var(--pri);outline-offset:2px}
/* Avisos con color de tema (el ámbar fijo quedaba en ~2:1 sobre blanco). */
.msg.warn{color:var(--gold)}
html[data-theme="light"] .pay-warn b{color:var(--gold)}
.pay-warn--parcial{border-color:var(--gold)}
/* WhatsApp flotante: se aparta mientras el cliente elige paquete (tapaba el precio del de la derecha). */
.wa-fab{transition:transform .25s ease-out,opacity .2s ease-out,visibility 0s linear 0s}
.wa-fab.wa-fab--aparte{transform:translateX(90px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s ease-out,opacity .2s ease-out,visibility 0s linear .25s}
@media (prefers-reduced-motion:reduce){
  .wa-fab,.wa-fab.wa-fab--aparte{transition:none}
  .spin{animation-duration:2.4s!important} /* sigue indicando carga, sin girar rápido */
  .field-hot{animation:none!important}
}
/* Reseña: estrellas como botones (teclado y lector de pantalla) con área de 44 px. */
.rate-star{background:none;border:0;padding:0;min-width:44px;min-height:44px;font:inherit;font-size:30px;line-height:1;color:var(--line);cursor:pointer;border-radius:10px}
.rate-star.on{color:var(--pri)}
.rate-star:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
/* Saltos al cargar (CLS): la cabecera compacta del celular dependía de body.has-bnav, que ux.js añade AL FINAL; hasta
   entonces salía la cabecera ancha en dos líneas (102 px → 61 px: todo subía 41 px). ux.js crea la barra inferior en
   toda página con cabecera, así que la versión compacta se aplica ya por ancho de pantalla. */
@media (max-width:720px){
  .topbar .nav{display:none}
  .topbar{flex-wrap:nowrap;padding:8px 12px;row-gap:0}
  .topbar .brand img{height:36px}
}
/* Títulos: mientras llega Bebas Neue, el respaldo (Roboto/Arial) es ~70 % más ancho y partía el título en 2 líneas
   que luego volvían a 1. Respaldo con el mismo ancho medio (medido: 1955 vs 3299/3384 px) → mismas líneas. */
@font-face{font-family:"Bebas Respaldo R";src:local("Roboto");size-adjust:59%;ascent-override:152%;descent-override:51%;line-gap-override:0%}
@font-face{font-family:"Bebas Respaldo A";src:local("Arial"),local("Helvetica");size-adjust:58%;ascent-override:155%;descent-override:52%;line-gap-override:0%}
h1,h2{font-family:'Bebas Neue','Bebas Respaldo R','Bebas Respaldo A',sans-serif}
/* Texto: Poppins es 25 % más ancha que Roboto y 13 % más que Arial; con el respaldo sin ajustar los párrafos ganaban
   líneas al llegar Poppins y empujaban todo hacia abajo (TikTok: 0,16 de CLS). Medido sobre una frase real. */
@font-face{font-family:"Poppins Respaldo R";src:local("Roboto");size-adjust:125%;ascent-override:84%;descent-override:28%;line-gap-override:8%}
@font-face{font-family:"Poppins Respaldo A";src:local("Arial"),local("Helvetica");size-adjust:113%;ascent-override:93%;descent-override:31%;line-gap-override:9%}
body{font-family:'Poppins','Poppins Respaldo R','Poppins Respaldo A',system-ui,sans-serif}
/* Gift Card / Streaming: "¿Cómo se canjea?" plegado para que los paquetes queden en la primera pantalla. */
.step-info{padding-block:12px}
.como-funciona summary{display:flex;align-items:center;gap:8px;min-height:var(--tap);cursor:pointer;font-weight:700;color:var(--txt);list-style:none}
.como-funciona summary::-webkit-details-marker{display:none}
.como-funciona summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease-out}
.como-funciona[open] summary::after{transform:rotate(225deg)}
.como-funciona summary .ic{width:20px;height:20px;color:var(--pri)}
.como-funciona .instructivo{padding-top:6px}
@media (prefers-reduced-motion:reduce){.como-funciona summary::after{transition:none}}
/* /recargar: la lista llega vacía ("Cargando juegos…") y el pie de página aparecía arriba hasta que se llenaba. */
#gamesGrid:has(> p.k:only-child){min-height:150vh}
/* Textos y toques que quedaban: "(mínimo 30 Monedas)", migas del blog y enlaces del pie. */
.step small,.card small{font-size:max(12px,.85em)}
.blog-crumb a{display:inline-flex;align-items:center;min-height:var(--tap)}
.foot-links a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);padding:0 2px}
.theme-toggle{width:var(--tap);height:var(--tap)}
/* /recargar: el título queda justo en el borde del celular; con Bebas termina en 2 líneas y con el respaldo en 1, y el
   cambio empujaba la lista (CLS 0,11). Se reservan las 2 líneas en pantallas angostas, que es como queda al final. */
@media (max-width:520px){.hero h1.h1-2l{min-height:2.1em}}
/* Logo de Legal / Mi cuenta (div.brand > a): el enlace medía 36 px de alto. */
.topbar .brand > a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap)}
.topbar a.btn.ghost{display:inline-flex;align-items:center;justify-content:center}
/* Mi cuenta · "Recargar de nuevo": cada fila es un enlace grande (paquete + jugador → Recargar). */
.repetir-lista{display:flex;flex-direction:column;gap:8px}
.repetir-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--inner);color:var(--txt);text-decoration:none}
.repetir-item:hover,.repetir-item:focus-visible{border-color:var(--pri)}
.repetir-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.repetir-txt small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.repetir-cta{display:inline-flex;align-items:center;gap:6px;color:var(--pri);font-weight:700;white-space:nowrap}
.repetir-cta .ic{width:16px;height:16px}
/* Recibos: acción principal y WhatsApp cuando algo no salió bien. */
.recibo .recibo-accion,.recibo .recibo-wa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;min-height:var(--tap);text-decoration:none}
.ck-antes{color:var(--muted);font-weight:500;font-size:.85em;margin-right:4px}
/* Paso de pago: cupón plegado ("¿Tienes un cupón?") y nota de DP para quien no tiene cuenta. */
.cupon-plegado{margin:12px 0 0}
.cupon-plegado summary{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);cursor:pointer;color:var(--pri);font-weight:600;list-style:none}
.cupon-plegado summary::-webkit-details-marker{display:none}
.cupon-plegado summary .ic{width:18px;height:18px}
.cupon-plegado[open] summary{margin-bottom:6px}
.dp-nota{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.dp-nota .ic{width:16px;height:16px;flex:none;margin-top:2px;color:var(--gold)}
.dp-nota a{color:var(--pri);font-weight:600}
/* Mi cuenta · recuperar contraseña */
.link-olvide{background:none;border:0;color:var(--pri);font:inherit;font-weight:600;font-size:14px;cursor:pointer;min-height:var(--tap);padding:0 4px;align-self:center}
.link-olvide:hover{text-decoration:underline}
.rc-tit{font-size:clamp(19px,5vw,24px);margin:0 0 6px}
.rc-ayuda{margin:0 0 4px;line-height:1.5}
.rc-lbl{margin:6px 0 -4px;font-weight:600;color:var(--txt)}
.rc-codigo{letter-spacing:8px;font-size:22px;text-align:center;font-variant-numeric:tabular-nums}
.en-recuperar #googleBox,.en-recuperar > .k{display:none !important}
#formRecuperar > .link-olvide{display:block;margin:6px auto 0}
/* Sobrepago = otro paquete (2026-10-09): el cliente elige en la web «Cambiar al pagado» o «Dejar lo pedido». */
.sobrepago-box{margin:14px 0 4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(0,200,255,.06);text-align:left;display:flex;flex-direction:column;gap:10px}
.sobrepago-box p{margin:0;line-height:1.5}
.sobrepago-acc{display:flex;flex-direction:column;gap:8px}
.sobrepago-acc .btn{width:100%;min-height:var(--tap,44px);text-transform:none}
/* Mi cuenta · pestañas y CHAT con soporte (2026-10-11) */
.cta-tabs{display:flex;gap:6px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none}
.cta-tabs::-webkit-scrollbar{display:none}
.cta-tabs button{flex:1 0 auto;min-height:var(--tap,44px);padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cta-tabs button.on{background:color-mix(in srgb,var(--pri) 14%,transparent);border-color:var(--pri);color:var(--pri)}
.cta-badge{min-width:18px;height:18px;border-radius:999px;background:var(--pri);color:#04122b;font-size:11px;display:inline-grid;place-items:center;padding:0 5px}
#dashView[data-ctab="recargas"] > :not(.cta-keep):not(#misRecargasBox):not(#repetirBox){display:none}
/* ---- CHAT flotante (2026-10-11, /js/chat-web.js): tarjeta abajo a la derecha en escritorio, pantalla completa en el celular */
.cdc{position:fixed;right:16px;bottom:84px;z-index:1000;width:380px;height:min(620px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden;opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;transition:opacity .18s ease-out,transform .18s ease-out}
.cdc.on{opacity:1;transform:none}
.cdc[hidden]{display:none}
.cdc-cab{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 30%,var(--card)),var(--card));border-bottom:1px solid var(--line)}
.cdc-logo{border-radius:50%;flex:none}
.cdc-tit{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cdc-tit b{font-size:15.5px}
.cdc-tit small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdc-x{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:inherit;font-size:18px;cursor:pointer;flex:none}
.cdc-x:hover{background:rgba(255,255,255,.08)}
.cdc-vista{flex:1;min-height:0;display:flex;flex-direction:column}
.cdc-vista[hidden]{display:none}
.cdc-login{overflow-y:auto;padding:18px 18px 8px;gap:12px}
.cdc-hola{margin:0;line-height:1.5;font-size:14px;color:var(--muted)}
.cdc-hola b{color:var(--txt,#fff);font-size:15.5px}
.cdc-google{display:flex;justify-content:center;min-height:44px}
.cdc-sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.cdc-sep::before,.cdc-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.cdc-form{display:flex;flex-direction:column;gap:10px;margin:0}
.cdc-form input,.cdc-form select{min-height:46px;font:inherit;font-size:15px}
.cdc-form .btn{min-height:46px}
.cdc-telfila{display:flex;gap:8px}
.cdc-telfila select{flex:0 0 104px}
.cdc-telfila input{flex:1;min-width:0}
.cdc-msg{margin:0;font-size:13px;min-height:1em;color:var(--muted)}
.cdc-msg.err{color:var(--err,#ff6b7d)}
.cdc-alt{margin:4px 0 0;font-size:13px;color:var(--muted);text-align:center;line-height:1.6}
.cdc-alt a{color:var(--pri);font-weight:600}
.cdc-carga{align-items:center;justify-content:center}
.cdc-spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--pri);animation:cdcGira .8s linear infinite}
@keyframes cdcGira{to{transform:rotate(360deg)}}
.cdc-msgs{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.cdc-b{max-width:85%;padding:9px 12px;border-radius:14px;line-height:1.45;font-size:14.5px;overflow-wrap:anywhere}
.cdc-b p{margin:0}
.cdc-b a{color:inherit;text-decoration:underline}
.cdc-img{display:block;text-decoration:none!important;margin-bottom:4px}
.cdc-img img{display:block;max-width:100%;max-height:300px;border-radius:10px;background:#fff}
.cdc-img-carga{font-size:13px;opacity:.75}
.cdc-b time{display:block;font-size:11px;opacity:.65;margin-top:3px;text-align:right}
.cdc-bot,.cdc-agente{align-self:flex-start;background:var(--inner);border:1px solid var(--line);border-bottom-left-radius:4px}
.cdc-yo{align-self:flex-end;background:color-mix(in srgb,var(--pri) 24%,var(--card));border:1px solid color-mix(in srgb,var(--pri) 45%,transparent);border-bottom-right-radius:4px}
.cdc-pend{opacity:.6}
.cdc-quien{display:block;font-size:11px;font-weight:700;color:var(--pri);margin-bottom:2px}
.cdc-adjunto{font-size:13px;opacity:.8}
.cdc-vacio,.cdc-error{text-align:center;color:var(--muted);font-size:13px;margin:6px 0}
.cdc-error{color:var(--err,#ff6b7d)}
.cdc-rapidos{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
.cdc-rapidos:empty{display:none}
.cdc-op{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--pri);background:transparent;color:var(--pri);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.cdc-op:hover{background:color-mix(in srgb,var(--pri) 12%,transparent)}
.cdc-entrada{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--line);margin:0}
.cdc-entrada textarea{flex:1;resize:none;min-height:44px;max-height:110px;border-radius:22px;padding:11px 14px;font:inherit;font-size:15px;line-height:1.35}
.cdc-adj{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);cursor:pointer;flex:none;font-size:18px}
.cdc-enviar{width:44px;height:44px;border-radius:50%;border:0;background:var(--pri);color:#fff;font-size:18px;cursor:pointer;flex:none}
.cdc-enviar:disabled{opacity:.5}
.cdc-pie{margin:0;padding:7px 12px 9px;text-align:center;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
.cdc-pie a{color:var(--pri)}
/* botón: con el chat abierto muestra ✕; punto rojo = respuesta nueva sin leer */
.wa-fab.wa-fab--chat{background:linear-gradient(135deg,#00dbff 0%,#7928ff 55%,#ff2da6 100%);color:#fff;box-shadow:0 8px 26px rgba(0,219,255,.35),0 0 0 3px rgba(255,255,255,.08)}
.wa-fab.wa-fab--chat .ic{width:28px;height:28px}
.wa-fab.cdc-fab-on{font-size:0}
.wa-fab.cdc-fab-on::after{content:"✕";font-size:22px;line-height:1}
.wa-fab.cdc-fab-on > *{display:none}
.wa-fab.cdc-nuevo::before{content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#ff3b5c;border:2px solid var(--bg)}
@media (max-width:640px){
  .cdc{inset:0;width:auto;height:100dvh;border-radius:0;border:0;transform:translateY(24px)}
  .cdc-cab{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .cdc-pie{padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
  body.cdc-abierto{overflow:hidden}
  body.cdc-abierto .wa-fab,body.cdc-abierto .bnav{display:none}
}