/* Panther /v2 -- capa de diseno adicional, solo para las paginas nuevas.
   No redefine nada del sitio viejo: todo esta bajo .v2-shell, cargado
   despues de style.css, asi que gana la cascada sin tocar un solo
   selector de las paginas .txt en produccion. */

.v2-shell {
  --v2-gold-1: #8b5cf6;
  --v2-gold-2: #4f8dff;
  --v2-gold-3: #22d3ee;
  --v2-border-hover: rgba(79, 141, 255, .42);
  --v2-shadow-soft: 0 14px 34px rgba(0, 0, 0, .3);
  --v2-shadow-lift: 0 22px 50px rgba(0, 0, 0, .42);
  --v2-glow-gold: 0 0 16px rgba(79, 141, 255, .45), 0 0 32px rgba(79, 141, 255, .18);
  --v2-radius-lg: 18px;
  --v2-radius-md: 14px;
}

/* ---- tipografia de titulares: fuente propia, no la generica del sistema ---- */
.v2-shell h1,
.v2-shell h2,
.v2-shell h3,
.v2-shell .badge,
.v2-shell .v2-page-head p,
.v2-shell .account-create-hero span,
.v2-shell .panel-head span,
.v2-shell .price-row b,
.v2-shell .pack-value,
.v2-shell .wallet-balance-card strong,
.v2-shell .summary-row.total strong,
.v2-shell .client-status__pill strong {
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .01em;
}
.v2-shell h1 {
  font-weight: 700;
  letter-spacing: .01em;
}

/* ---- transiciones base: todo lo interactivo se mueve suave ---- */
.v2-shell a,
.v2-shell button,
.v2-shell input,
.v2-shell select,
.v2-shell .pack,
.v2-shell .popular-card,
.v2-shell .store-category-card,
.v2-shell .trust-row div,
.v2-shell .account-card,
.v2-shell .client-status__pill,
.v2-shell .game-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .v2-shell * { animation: none !important; transition: none !important; }
}

/* ---- botones primarios: degrade dorado con brillo, no relleno plano ---- */
.v2-shell .hero-primary,
.v2-shell .nav-cta,
.v2-shell .primary,
.v2-shell button[type="submit"]:not(.secondary) {
  background: linear-gradient(135deg, var(--v2-gold-1), var(--v2-gold-2) 55%, var(--v2-gold-3));
  border: 0;
  box-shadow: 0 14px 32px rgba(79, 141, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.v2-shell .hero-primary:hover,
.v2-shell button[type="submit"]:not(.secondary):hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(79, 141, 255, .36), inset 0 1px 0 rgba(255, 255, 255, .45), var(--v2-glow-gold);
}
.v2-shell .hero-primary:active,
.v2-shell button[type="submit"]:not(.secondary):active {
  transform: translateY(0);
}

.v2-shell .hero-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .16);
}

.v2-shell .account-choice button.active {
  box-shadow: 0 14px 30px rgba(79, 141, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.v2-shell .account-choice button:hover {
  transform: translateY(-1px);
}

/* ---- hero: mas profundidad, resplandor sutil, entrada suave ---- */
.v2-shell .hero {
  position: relative;
}
.v2-shell .hero::before {
  content: "";
  position: absolute;
  inset: -14% -8% auto auto;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(79, 141, 255, .16), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.v2-shell .badge {
  box-shadow: 0 10px 22px rgba(79, 141, 255, .16);
}

.v2-shell .hero-proof span {
  backdrop-filter: blur(6px);
}
.v2-shell .hero-proof span:hover {
  border-color: var(--v2-border-hover);
  background: rgba(79, 141, 255, .1);
  transform: translateY(-1px);
}

/* Bug real: style.css tiene ".hero-preview { display:none !important }" sin scope (parte de un bloque
   viejo que ocultaba secciones del sitio de una sola pagina). Nadie la reactivo para /v2 -- el logo
   flotante junto al hero nunca se vio, ni en tablet ni en desktop. En mobile (<=1000px) si hay una
   regla propia y correcta que lo oculta a proposito (el hero ya es alto ahi, agregarlo alargaba mucho
   la seccion) -- se respeta esa, solo se reactiva arriba de 1000px. */
@media (min-width: 1001px) {
  .v2-shell .hero-preview {
    display: block !important;
  }
}
.v2-shell .hero-preview {
  transition: transform .25s ease, box-shadow .25s ease;
}
.v2-shell .hero-preview:hover {
  transform: translateY(-4px);
}

.v2-shell .hero__content > * {
  animation: v2FadeUp .55s ease both;
}
.v2-shell .hero__content > *:nth-child(2) { animation-delay: .04s; }
.v2-shell .hero__content > *:nth-child(3) { animation-delay: .08s; }
.v2-shell .hero__content > *:nth-child(4) { animation-delay: .12s; }
.v2-shell .hero__content > *:nth-child(5) { animation-delay: .16s; }

@keyframes v2FadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- client-status: tarjeta flotante, un poco mas viva al tocar ---- */
.v2-shell .client-status__pill:hover {
  transform: translateY(-2px);
  background: rgba(79, 141, 255, .06);
}

/* ---- trust-row: 4 items con iconos reales (antes eran siglas "OK/SL/WA" en texto) ----
   Bug real encontrado al verificar: style.css tiene "@media (max-width:680px) { .trust-row { display:none !important } }"
   heredado del sitio de una sola pagina (pensado para su navegacion por hash). Nadie lo parcheo para
   este bloque -- a diferencia de .hero, que si tiene su propio "display:block !important" de vuelta --
   asi que en celular (la mayoria del trafico) esta seccion entera de confianza nunca se vio, ni en /v2 ni en el sitio viejo. */
.v2-shell .trust-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.v2-shell .trust-row div {
  border-radius: var(--v2-radius-md);
}
.v2-shell .trust-row div:hover {
  transform: translateY(-3px);
  border-color: var(--v2-border-hover);
  box-shadow: var(--v2-shadow-soft);
}
.v2-shell .trust-row b {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(79, 141, 255, .24), rgba(79, 141, 255, .05));
}
.v2-shell .v2-trust-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--v2-gold-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- categorias de tienda ---- */
.v2-shell .store-category-card {
  border-radius: var(--v2-radius-lg);
}
.v2-shell .store-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--v2-shadow-lift);
  border-color: var(--v2-border-hover);
}
.v2-shell .store-categories__perks span::before {
  animation: v2Pulse 2.4s ease-in-out infinite;
}
@keyframes v2Pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* ---- saldo panther: mas profundidad ---- */
.v2-shell .balance-explain {
  border-radius: var(--v2-radius-lg);
}
.v2-shell .balance-example {
  transition: transform .2s ease, box-shadow .2s ease;
}
.v2-shell .balance-example:hover {
  transform: translateY(-3px);
}

/* ---- social band ----
   Bug real: style.css tiene ".social-band { display:none !important }" sin scope, en el mismo bloque
   que ocultaba .hero-preview. La seccion "Comunidad Panther" (TikTok/Instagram) al final de Inicio
   nunca se vio, en ningun ancho de pantalla -- confirmado en vivo a 390px, 768px y 1280px. */
.v2-shell .social-band {
  display: grid !important;
  border-radius: var(--v2-radius-lg);
}
.v2-shell .social-band__actions a:hover {
  transform: translateY(-2px);
}

/* ---- tarjetas de juego / paquetes: mismo trato en todas las paginas ---- */
.v2-shell .pack:hover,
.v2-shell .popular-card:hover,
.v2-shell .game-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--v2-shadow-soft);
}

/* ---- inputs: foco mas claro ---- */
.v2-shell input:focus-visible,
.v2-shell select:focus-visible,
.v2-shell textarea:focus-visible {
  outline: none;
  border-color: var(--v2-border-hover);
  box-shadow: 0 0 0 3px rgba(79, 141, 255, .18);
}

/* ---- tarjetas de cuenta / secciones generales: mas presencia ---- */
.v2-shell .account-card,
.v2-shell .section,
.v2-shell .account-access-info {
  border-radius: var(--v2-radius-md);
}

/* =========================================================
   Primitivas reutilizables para paginas sin hero de marketing
   (Catalogo, y las que sigan: Cuenta, Entrar, Registro)
   ========================================================= */

.v2-shell .v2-page-head {
  width: min(1180px, calc(100% - 36px));
  margin: 20px auto 4px;
  padding: 30px 4px 4px;
  animation: v2FadeUp .5s ease both;
}
.v2-shell .v2-page-head h1 {
  margin-top: 12px;
  color: #fff;
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.05;
}
.v2-shell .v2-page-head h1 span { color: var(--v2-gold-2); }
.v2-shell .v2-page-head p {
  margin-top: 10px;
  max-width: 620px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.v2-shell .v2-section-pad { padding: 0 18px 20px; }

/* ---- buscador prominente ---- */
.v2-shell .v2-search-wrap {
  position: relative;
  max-width: 440px;
  margin: 0 0 18px;
}
.v2-shell .v2-search-wrap input[type="search"] {
  width: 100%;
  min-height: 50px;
  padding: 0 16px 0 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  color: #fff;
  font-size: 15px;
}
.v2-shell .v2-search-wrap input[type="search"]::placeholder { color: #8a9088; }
.v2-shell .v2-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.v2-shell .v2-link-button {
  color: var(--v2-gold-2);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.v2-shell .v2-icon-arrow {
  width: 14px;
  height: 14px;
  margin-left: 5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  vertical-align: -2px;
  transition: transform .18s ease;
}

/* ---- tarjetas de juego del catalogo: mas ricas ---- */
.v2-shell .welcome-game {
  border-radius: var(--v2-radius-md);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
}
.v2-shell .welcome-game:hover {
  transform: translateY(-5px);
  border-color: var(--v2-border-hover);
  box-shadow: var(--v2-shadow-lift);
}
.v2-shell .welcome-game > b {
  background: linear-gradient(135deg, var(--v2-gold-1), var(--v2-gold-2));
  display: inline-flex;
  align-items: center;
}
.v2-shell .welcome-game:hover > b .v2-icon-arrow {
  transform: translateX(3px);
}
.v2-shell .welcome-game.is-consult > b {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.v2-shell .welcome-game.no-image {
  background:
    radial-gradient(circle at 30% 20%, rgba(79, 141, 255, .16), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)),
    #0c120f;
}
.v2-shell .welcome-game.no-image::before {
  content: "";
  position: absolute;
  right: -10px;
  top: -10px;
  width: 90px;
  height: 90px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(79, 141, 255, .14), transparent 70%);
  pointer-events: none;
}

/* mismo tratamiento "sin imagen" para las otras tarjetas que pueden quedar sin arte limpio */
.v2-shell .v3-game-card.no-image {
  background:
    radial-gradient(circle at 30% 20%, rgba(79, 141, 255, .16), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)),
    #0c120f;
}
.v2-shell .v3-game-card.no-image::before {
  content: "";
  position: absolute;
  right: -10px;
  top: -10px;
  width: 90px;
  height: 90px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(79, 141, 255, .14), transparent 70%);
  pointer-events: none;
}
.v2-shell .v2-popular__art.no-image {
  background:
    radial-gradient(circle at 30% 25%, rgba(79, 141, 255, .18), transparent 60%),
    #06090e;
}
.v2-shell .checkout-context__art.no-image {
  background:
    radial-gradient(circle at 35% 30%, rgba(79, 141, 255, .2), transparent 65%),
    #080c12;
}
.v2-shell .product-art.no-image {
  background: radial-gradient(circle at 40% 30%, rgba(79, 141, 255, .16), transparent 65%), rgba(255, 255, 255, .035);
}

/* =========================================================
   Juego / checkout -- misma logica, presentacion mas rica
   ========================================================= */

.v2-shell .checkout-main,
.v2-shell .summary-card,
.v2-shell .process {
  border-radius: var(--v2-radius-lg);
}

.v2-shell .v2-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 18px;
}
.v2-shell .v2-stepper__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  transition: all .2s ease;
}
.v2-shell .v2-stepper__item i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #cbd5e1;
  font-style: normal;
  font-size: 11px;
}
.v2-shell .v2-stepper__item.is-done {
  border-color: rgba(79, 141, 255, .3);
  color: #ffd66d;
}
.v2-shell .v2-stepper__item.is-done i {
  background: linear-gradient(135deg, var(--v2-gold-1), var(--v2-gold-2));
  color: #201400;
}
.v2-shell .v2-stepper__item.is-current {
  border-color: var(--v2-border-hover);
  background: rgba(79, 141, 255, .08);
  color: #fff;
}
.v2-shell .v2-stepper__item.is-current i {
  background: linear-gradient(135deg, var(--v2-gold-1), var(--v2-gold-2));
  color: #201400;
  box-shadow: 0 0 0 3px rgba(79, 141, 255, .18), var(--v2-glow-gold);
}
.v2-shell .v2-stepper__line {
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, .12);
  flex: 0 0 auto;
}
.v2-shell .v2-stepper__item.is-done + .v2-stepper__line {
  background: rgba(79, 141, 255, .4);
}
@media (max-width: 640px) {
  .v2-shell .v2-stepper__item strong { display: none; }
}

.v2-shell .step > span {
  background: linear-gradient(135deg, rgba(79, 141, 255, .28), rgba(79, 141, 255, .06));
  color: #ffd66d;
}

.v2-shell .tab,
.v2-shell .payment {
  border-radius: var(--v2-radius-md);
}
.v2-shell .tab:hover,
.v2-shell .payment:hover {
  transform: translateY(-2px);
  border-color: var(--v2-border-hover);
}
.v2-shell .tab.active,
.v2-shell .payment.active {
  box-shadow: 0 12px 28px rgba(79, 141, 255, .2);
}

.v2-shell .pack {
  border-radius: var(--v2-radius-md);
}
.v2-shell .pack.active {
  box-shadow: 0 0 0 1px var(--v2-gold-2), 0 16px 36px rgba(79, 141, 255, .26), var(--v2-glow-gold);
}

.v2-shell .discount-note {
  border-radius: var(--v2-radius-md);
  position: relative;
  overflow: hidden;
}
.v2-shell .discount-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(79, 141, 255, .14), transparent 55%);
  pointer-events: none;
}

.v2-shell .payment-live {
  border-radius: var(--v2-radius-lg);
}
.v2-shell .payment-live__qr {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}

.v2-shell .summary-card {
  box-shadow: var(--v2-shadow-soft);
}
.v2-shell .summary-row.total strong {
  font-size: 22px;
}

.v2-shell .process-grid div {
  border-radius: var(--v2-radius-md);
}
.v2-shell .process-grid i {
  background: linear-gradient(135deg, rgba(79, 141, 255, .22), rgba(79, 141, 255, .05));
  color: var(--v2-gold-2);
}

.v2-shell .v2-payment-icon {
  width: 20px;
  height: 20px;
  margin-bottom: 6px;
  fill: none;
  stroke: var(--v2-gold-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   Inicio: vitrina de precios reales ("Paquetes populares")
   ========================================================= */

.v2-shell .v2-popular {
  width: min(1180px, calc(100% - 32px));
  margin: 8px auto 22px;
}
.v2-shell .v2-popular__head {
  margin-bottom: 16px;
}
.v2-shell .v2-popular__head h2 {
  margin-top: 8px;
  color: #fff;
  font-size: clamp(26px, 3.4vw, 38px);
}
.v2-shell .v2-popular__head p {
  margin-top: 6px;
  color: var(--muted);
}
.v2-shell .v2-popular__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .v2-shell .v2-popular__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.v2-shell .v2-popular__card {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--v2-radius-md);
  background: rgba(255, 255, 255, .035);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}
.v2-shell .v2-popular__card:hover {
  transform: translateY(-4px);
  border-color: var(--v2-border-hover);
  box-shadow: var(--v2-shadow-lift);
}
.v2-shell .v2-popular__art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 8px;
  border-radius: calc(var(--v2-radius-md) - 6px);
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(79, 141, 255, .16), transparent 55%), #050806;
}
.v2-shell .v2-popular__art img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: min(84px, 50%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .4));
}
.v2-shell .v2-popular__card.no-art {
  padding-top: 16px;
  border-top: 3px solid var(--v2-gold-2);
}
.v2-shell .v2-popular__game {
  color: var(--v2-gold-2);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.v2-shell .v2-popular__card strong {
  font-size: 15px;
  line-height: 1.2;
}
.v2-shell .v2-popular__price {
  margin-top: 2px;
  color: #54e39d;
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

/* =========================================================
   Cuenta (dashboard logueado) + Entrar / Registro
   ========================================================= */

.v2-shell .customer-account,
.v2-shell .instant-recharge {
  border-radius: var(--v2-radius-lg);
}

.v2-shell .account-create-hero,
.v2-shell .customer-profile-card {
  border-radius: var(--v2-radius-lg);
}

/* Entrar/Registro: se saco el copy de marketing y la grilla de 4 tarjetas de preview que repetian
   lo que ya dice el propio formulario (LoginForm/RegisterForm ya traen su propio titulo y resumen).
   Referencia: worldsale.net -- login/registro minimos, sin texto alrededor del formulario. */
.v2-shell .account-create-hero--compact {
  padding: 12px 16px;
  display: flex;
  justify-content: center;
}
.v2-shell .account-create-hero--compact .account-choice {
  justify-content: center;
}
.v2-shell .account-access-shell--solo {
  display: flex;
  justify-content: center;
}
.v2-shell .account-access-shell--solo .account-forms {
  width: min(440px, 100%);
  margin: 0 auto;
}

.v2-shell .profile-avatar {
  box-shadow: 0 12px 30px rgba(79, 141, 255, .28);
}

.v2-shell .customer-profile-card .wallet-balance-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--v2-radius-md);
}
.v2-shell .customer-profile-card .wallet-balance-card::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(84, 227, 157, .16), transparent 65%);
  pointer-events: none;
}

.v2-shell .wallet-topup__chips button {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.v2-shell .wallet-topup__chips button:hover {
  transform: translateY(-2px);
}
.v2-shell .wallet-topup__chips button.active {
  box-shadow: 0 10px 24px rgba(79, 141, 255, .28);
}

.v2-shell .wallet-balance-card > button,
.v2-shell .account-phase-card button,
.v2-shell .account-card button:not(.saved-id__actions button):not(:disabled),
.v2-shell .account-settings-form button {
  background: linear-gradient(135deg, var(--v2-gold-1), var(--v2-gold-2) 55%, var(--v2-gold-3));
  box-shadow: 0 12px 28px rgba(79, 141, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.v2-shell .wallet-balance-card > button:hover,
.v2-shell .account-phase-card button:hover,
.v2-shell .account-settings-form button:hover {
  transform: translateY(-2px);
}

.v2-shell .account-phase-card {
  border-radius: var(--v2-radius-lg);
  position: relative;
  overflow: hidden;
}
.v2-shell .account-phase-card::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 45%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(79, 141, 255, .14), transparent 62%);
  pointer-events: none;
}
.v2-shell .account-phase-card.ready::before {
  background: radial-gradient(circle, rgba(32, 196, 122, .16), transparent 62%);
}

/* ---- login del cliente: mas presencia, iconos en los campos, botones legibles ----
   Bug real encontrado: .account-card--login button (en style.css) fija color de texto claro
   (#e2e8f0) pensado para un fondo gris plano, pero el override de .v2-shell de mas arriba ya le
   pone fondo degrade dorado -- el resultado en vivo era texto casi ilegible sobre dorado. */
.v2-shell .account-card--login {
  position: relative;
  overflow: hidden;
  border-color: rgba(79, 141, 255, .22);
}
.v2-shell .account-card--login::before {
  content: "";
  position: absolute;
  inset: -25% -15% auto auto;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(79, 141, 255, .14), transparent 62%);
  pointer-events: none;
}
.v2-shell .account-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-shell .account-card__head > span:last-child {
  color: #4f8dff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.v2-shell .account-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(79, 141, 255, .26), rgba(79, 141, 255, .06));
  box-shadow: 0 10px 22px rgba(79, 141, 255, .18);
}
.v2-shell .account-card__badge svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--v2-gold-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v2-shell .account-card--login button[type="submit"] {
  color: #201400;
  font-size: 15px;
}
.v2-shell .account-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.v2-shell .account-input-wrap input {
  width: 100%;
  padding-left: 40px;
}
.v2-shell .account-input-wrap .account-input-icon {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.v2-shell .account-input-wrap:focus-within .account-input-icon {
  stroke: var(--v2-gold-2);
}
.v2-shell .account-input-wrap input[type="password"],
.v2-shell .account-input-wrap input[type="text"] {
  padding-right: 40px;
}
.v2-shell .account-eye-toggle {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.v2-shell .account-eye-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v2-shell .account-eye-toggle:hover .account-eye-icon {
  stroke: var(--v2-gold-2);
}

.v2-shell .account-dashboard-nav button {
  border-radius: 999px;
}
.v2-shell .account-dashboard-nav button:hover {
  transform: translateY(-2px);
}

.v2-shell .saved-id,
.v2-shell .account-order,
.v2-shell .wallet-movement,
.v2-shell .instant-pack {
  border-radius: var(--v2-radius-md);
}
.v2-shell .saved-id:hover,
.v2-shell .account-order:hover,
.v2-shell .wallet-movement:hover {
  transform: translateY(-2px);
  border-color: var(--v2-border-hover);
}

.v2-shell .saved-id__actions button:first-child {
  background: linear-gradient(135deg, var(--v2-gold-1), var(--v2-gold-2));
  color: #201400;
}

.v2-shell .account-settings-card details {
  border-radius: var(--v2-radius-md);
}
.v2-shell .account-settings-card summary {
  list-style: none;
}
.v2-shell .account-settings-card summary::-webkit-details-marker { display: none; }
.v2-shell .account-settings-card summary::after {
  content: "+";
  margin-left: auto;
  color: var(--v2-gold-2);
  font-size: 20px;
  font-weight: 400;
  transition: transform .2s ease;
}
.v2-shell .account-settings-card details[open] summary::after {
  transform: rotate(45deg);
}

.v2-shell .register-steps button.active,
.v2-shell .register-steps button.done {
  background: linear-gradient(135deg, rgba(79, 141, 255, .28), rgba(79, 141, 255, .1)) !important;
}
.v2-shell .register-panel {
  border-radius: var(--v2-radius-md);
}

/* =========================================================
   Panther Storefront 2026
   Dirección visual inspirada en plataformas modernas de
   recargas, sin alterar cuenta, saldo, pedidos ni pagos.
   ========================================================= */

.v2-shell {
  --store-blue: #2f7df4;
  --store-blue-soft: #5a9cff;
  --store-cyan: #31c8ff;
  --store-gold: #4f8dff;
  --store-bg: #050912;
  --store-surface: #0a101b;
  --store-surface-2: #0d1522;
  --store-line: rgba(119, 157, 209, .16);
  --store-text: #f6f9ff;
  --store-muted: #8593a8;
  width: 100%;
  min-height: 100vh;
  color: var(--store-text);
  background:
    radial-gradient(circle at 50% -20%, rgba(47, 125, 244, .13), transparent 34%),
    var(--store-bg);
}

.v2-shell .topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(190px, auto) 1fr auto;
  align-items: center;
  gap: 28px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 10px max(28px, calc((100vw - 1210px) / 2));
  border: 0;
  border-bottom: 1px solid var(--store-line);
  border-radius: 0;
  background: rgba(5, 9, 18, .94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
  backdrop-filter: blur(18px);
}

.v2-shell .topnav .logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--store-text);
  text-decoration: none;
}

.v2-shell .topnav .logo::before {
  display: none !important;
  content: none !important;
}

.v2-shell .logo__mark {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(90, 156, 255, .34);
  border-radius: 10px;
  background: #070b12;
  box-shadow: 0 0 26px rgba(47, 125, 244, .18);
}

.v2-shell .logo__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-shell .logo__copy {
  display: grid;
  gap: 0;
  line-height: 1;
}

.v2-shell .logo__copy strong {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .03em;
}

.v2-shell .logo__copy > span {
  margin-top: 4px;
  color: var(--store-blue-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.v2-shell .domain-pill {
  display: none;
}

.v2-shell .topnav nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.v2-shell .topnav nav a,
.v2-shell .topnav__login,
.v2-shell .topnav__account {
  color: #dce7f7;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.v2-shell .topnav nav a:hover,
.v2-shell .topnav__login:hover,
.v2-shell .topnav__account:hover {
  color: #fff;
}

.v2-shell .topnav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.v2-shell .theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--store-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: var(--store-gold);
  font-size: 18px;
}

.v2-shell .theme-toggle:hover {
  border-color: rgba(90, 156, 255, .44);
  background: rgba(47, 125, 244, .11);
}

.v2-shell .topnav__register,
.v2-shell .topnav__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(90, 156, 255, .54);
  border-radius: 9px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(135deg, var(--store-blue-soft), var(--store-blue));
  box-shadow: 0 10px 28px rgba(47, 125, 244, .28);
}

.v2-shell .topnav__register:hover,
.v2-shell .topnav__account:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(47, 125, 244, .38);
}

.v2-shell .hero.hero--showcase {
  display: block;
  position: relative;
  width: min(1210px, calc(100% - 48px));
  min-height: clamp(390px, 45vw, 540px);
  margin: 26px auto 18px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(90, 156, 255, .27);
  border-radius: 19px;
  background: #070b13;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .48), 0 0 44px rgba(47, 125, 244, .08);
}

.v2-shell .hero.hero--showcase::before {
  display: none;
}

.v2-shell .hero--showcase picture,
.v2-shell .hero--showcase .hero__image {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.v2-shell .hero--showcase .hero__image {
  object-fit: cover;
  object-position: center;
  animation: none;
  opacity: .88;
}

.v2-shell .hero--showcase .hero__overlay {
  display: block !important;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 7, 14, .96) 0%, rgba(3, 7, 14, .78) 32%, rgba(3, 7, 14, .25) 66%, rgba(3, 7, 14, .12) 100%),
    linear-gradient(0deg, rgba(3, 7, 14, .72), transparent 45%);
}

.v2-shell .hero--showcase .hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: min(560px, 58%);
  min-height: clamp(390px, 45vw, 540px);
  padding: clamp(34px, 5vw, 72px);
}

.v2-shell .hero--showcase .badge {
  border-color: rgba(90, 156, 255, .36);
  background: rgba(47, 125, 244, .13);
  color: #9fc6ff;
  box-shadow: none;
}

.v2-shell .hero--showcase h1 {
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(48px, 6.4vw, 82px);
  line-height: .88;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.v2-shell .hero--showcase h1 span {
  color: var(--store-blue-soft);
  text-shadow: 0 0 32px rgba(47, 125, 244, .26);
}

.v2-shell .hero--showcase p {
  max-width: 490px;
  margin: 20px 0 0;
  color: #c6d2e3;
  font-size: 17px;
  line-height: 1.55;
}

.v2-shell .hero--showcase .hero-actions {
  margin-top: 25px;
}

.v2-shell .hero--showcase .hero-primary {
  min-height: 48px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--store-blue-soft), var(--store-blue));
  color: #fff;
  box-shadow: 0 14px 36px rgba(47, 125, 244, .30);
}

.v2-shell .hero--showcase .hero-primary:hover {
  box-shadow: 0 18px 44px rgba(47, 125, 244, .42);
}

.v2-shell .hero--showcase .hero-secondary {
  display: inline-flex !important;
  min-height: 48px;
  border-radius: 9px;
  background: rgba(4, 9, 18, .52);
}

.v2-shell .hero__assurance {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.v2-shell .hero__assurance span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(3, 7, 14, .66);
  color: #d9e5f6;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.v2-shell .hero__assurance span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--store-cyan);
  box-shadow: 0 0 10px rgba(49, 200, 255, .72);
}

.v2-shell .trust-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px;
  width: min(1210px, calc(100% - 48px));
  margin: 0 auto 20px;
}

.v2-shell .trust-row div {
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid var(--store-line);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(13, 21, 34, .96), rgba(7, 12, 21, .96));
  box-shadow: none;
}

.v2-shell .trust-row div:hover {
  border-color: rgba(90, 156, 255, .38);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
}

.v2-shell .trust-row b {
  background: linear-gradient(135deg, rgba(47, 125, 244, .24), rgba(47, 125, 244, .04));
}

.v2-shell .v2-trust-icon {
  stroke: var(--store-blue-soft);
}

.v2-shell .trust-row strong {
  color: #f6f9ff;
}

.v2-shell .trust-row span {
  color: var(--store-muted);
}

.v2-shell .client-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(760px, calc(100% - 48px));
  margin: 10px auto 34px;
  overflow: hidden;
  border: 1px solid var(--store-line);
  border-radius: 13px;
  background: var(--store-surface);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
}

.v2-shell .client-status__pill {
  min-height: 78px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.v2-shell .client-status__pill + .client-status__pill {
  border-left: 1px solid var(--store-line);
}

.v2-shell .client-status__pill span {
  color: var(--store-muted);
}

.v2-shell .client-status__pill strong {
  color: #f6f9ff;
}

.v2-shell .client-status.is-logged .client-status__pill:last-child strong {
  color: #54e39d;
}

.v2-shell .v2-catalog-entry {
  width: min(1210px, calc(100% - 48px));
  margin: 0 auto 34px;
}

.v2-shell .v2-catalog-entry__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46%;
  width: min(620px, 100%);
  min-height: 270px;
  overflow: hidden;
  border: 1px solid rgba(90, 156, 255, .21);
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 125, 244, .18), transparent 44%),
    linear-gradient(145deg, #0b1220, #060b13);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

.v2-shell .v2-catalog-entry__card > div {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px;
}

.v2-shell .v2-catalog-entry__card > div > span {
  color: var(--store-blue-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.v2-shell .v2-catalog-entry__card h2 {
  margin: 8px 0 0;
  color: #fff;
  font-size: 36px;
}

.v2-shell .v2-catalog-entry__card p {
  max-width: 280px;
  margin: 10px 0 22px;
  color: var(--store-muted);
  line-height: 1.45;
}

.v2-shell .v2-catalog-entry__card b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 14px;
  border: 1px solid rgba(90, 156, 255, .27);
  border-radius: 8px;
  color: #a9ccff;
}

.v2-shell .v2-catalog-entry__card b svg {
  width: 17px;
  height: 17px;
}

.v2-shell .v2-catalog-entry__card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .76;
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}

.v2-shell .v2-catalog-entry__card:hover {
  transform: translateY(-4px);
  border-color: rgba(90, 156, 255, .46);
  box-shadow: 0 30px 74px rgba(0, 0, 0, .38), 0 0 40px rgba(47, 125, 244, .08);
}

.v2-shell .v2-popular,
.v2-shell .balance-explain,
.v2-shell .v2-page-head,
.v2-shell .v2-section-pad,
.v2-shell .checkout,
.v2-shell .customer-account {
  width: min(1210px, calc(100% - 48px));
}

.v2-shell .v2-popular__card,
.v2-shell .welcome-game,
.v2-shell .pack {
  border-color: var(--store-line);
  background: linear-gradient(155deg, var(--store-surface-2), var(--store-surface));
}

.v2-shell .v2-popular__card:hover,
.v2-shell .welcome-game:hover,
.v2-shell .pack:hover {
  border-color: rgba(90, 156, 255, .44);
}

.v2-shell .balance-explain {
  border-color: var(--store-line);
  background:
    radial-gradient(circle at 85% 10%, rgba(47, 125, 244, .12), transparent 34%),
    var(--store-surface);
}

.v2-shell .v2-assurance-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(1210px, calc(100% - 48px));
  margin: 34px auto;
  overflow: hidden;
  border: 1px solid var(--store-line);
  border-radius: 15px;
  background: var(--store-surface);
}

.v2-shell .v2-assurance-strip > div {
  display: grid;
  gap: 4px;
  min-height: 88px;
  padding: 20px 22px;
}

.v2-shell .v2-assurance-strip > div + div {
  border-left: 1px solid var(--store-line);
}

.v2-shell .v2-assurance-strip b {
  color: #f1f6ff;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.v2-shell .v2-assurance-strip span {
  color: var(--store-muted);
  font-size: 13px;
}

.v2-shell .auth-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 34px;
  width: 100%;
  margin: 0;
  padding: 30px max(28px, calc((100vw - 1210px) / 2));
  border: 0;
  border-top: 1px solid var(--store-line);
  border-radius: 0;
  background: #04070d;
}

.v2-shell .auth-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v2-shell .auth-footer__brand strong {
  color: var(--store-blue-soft);
}

.v2-shell .auth-footer__brand span,
.v2-shell .auth-footer a {
  color: var(--store-muted);
  text-decoration: none;
}

.v2-shell .auth-footer__nav,
.v2-shell .footer-socials {
  display: flex;
  align-items: center;
  gap: 20px;
}

.v2-shell .auth-footer a:hover {
  color: #fff;
}

html[data-theme="light"] .v2-shell {
  --store-bg: #f4f7fc;
  --store-surface: #ffffff;
  --store-surface-2: #f8faff;
  --store-line: rgba(27, 73, 136, .14);
  --store-text: #0d1a2d;
  --store-muted: #617089;
  color: var(--store-text);
  background:
    radial-gradient(circle at 50% -20%, rgba(47, 125, 244, .13), transparent 34%),
    var(--store-bg);
}

html[data-theme="light"] .v2-shell .topnav {
  background: rgba(255, 255, 255, .94);
}

html[data-theme="light"] .v2-shell .logo__copy strong,
html[data-theme="light"] .v2-shell .topnav nav a,
html[data-theme="light"] .v2-shell .topnav__login,
html[data-theme="light"] .v2-shell .topnav__account,
html[data-theme="light"] .v2-shell .client-status__pill strong,
html[data-theme="light"] .v2-shell .trust-row strong,
html[data-theme="light"] .v2-shell .v2-assurance-strip b {
  color: #0d1a2d;
}

html[data-theme="light"] .v2-shell .auth-footer,
html[data-theme="light"] .v2-shell .hero.hero--showcase {
  color-scheme: dark;
}

@media (max-width: 900px) {
  .v2-shell .topnav {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 10px 18px;
  }

  .v2-shell .topnav nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 22px;
    order: 3;
    padding-top: 8px;
    border-top: 1px solid var(--store-line);
  }

  .v2-shell .topnav__actions {
    grid-column: 2;
    grid-row: 1;
  }

  .v2-shell .topnav__login {
    display: none;
  }

  .v2-shell .hero--showcase .hero__content {
    width: 72%;
  }

  .v2-shell .hero__assurance {
    left: 22px;
    right: auto;
  }

  .v2-shell .v2-assurance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-shell .v2-assurance-strip > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--store-line);
  }

  .v2-shell .v2-assurance-strip > div:nth-child(4) {
    border-top: 1px solid var(--store-line);
  }

  .v2-shell .auth-footer {
    grid-template-columns: 1fr auto;
  }

  .v2-shell .footer-socials {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .v2-shell .topnav {
    min-height: auto;
  }

  .v2-shell .logo__mark {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .v2-shell .logo__copy strong {
    font-size: 16px;
  }

  .v2-shell .logo__copy > span {
    font-size: 8px;
  }

  .v2-shell .topnav__register,
  .v2-shell .topnav__account {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }

  .v2-shell .hero.hero--showcase {
    width: calc(100% - 24px);
    min-height: 520px;
    margin: 12px auto;
    border-radius: 15px;
  }

  .v2-shell .hero--showcase .hero__image {
    object-position: 61% center;
  }

  .v2-shell .hero--showcase .hero__overlay {
    background:
      linear-gradient(0deg, rgba(3, 7, 14, .97) 0%, rgba(3, 7, 14, .74) 58%, rgba(3, 7, 14, .24) 100%);
  }

  .v2-shell .hero--showcase .hero__content {
    justify-content: flex-end;
    width: 100%;
    min-height: 520px;
    padding: 30px 22px 92px;
  }

  .v2-shell .hero--showcase h1 {
    font-size: clamp(44px, 14vw, 62px);
  }

  .v2-shell .hero--showcase p {
    max-width: 360px;
    font-size: 15px;
  }

  .v2-shell .hero__assurance {
    left: 18px;
    bottom: 18px;
    max-width: calc(100% - 36px);
    overflow-x: auto;
  }

  .v2-shell .hero__assurance span {
    white-space: nowrap;
  }

  .v2-shell .trust-row {
    grid-template-columns: 1fr !important;
    width: calc(100% - 24px);
    margin-bottom: 16px;
  }

  .v2-shell .client-status {
    width: calc(100% - 24px);
    margin-bottom: 24px;
  }

  .v2-shell .client-status__pill {
    min-height: 68px;
    padding: 12px;
  }

  .v2-shell .v2-catalog-entry,
  .v2-shell .v2-popular,
  .v2-shell .balance-explain,
  .v2-shell .v2-page-head,
  .v2-shell .v2-section-pad,
  .v2-shell .checkout,
  .v2-shell .customer-account,
  .v2-shell .v2-assurance-strip {
    width: calc(100% - 24px);
  }

  .v2-shell .v2-catalog-entry__card {
    grid-template-columns: 1fr;
    min-height: 330px;
  }

  .v2-shell .v2-catalog-entry__card > div {
    z-index: 3;
    min-height: 330px;
    padding: 24px;
    background: linear-gradient(90deg, rgba(4, 9, 18, .96), rgba(4, 9, 18, .58));
  }

  .v2-shell .v2-catalog-entry__card > img {
    position: absolute;
    inset: 0 0 0 auto;
    width: 68%;
    mask-image: linear-gradient(90deg, transparent, #000 34%);
  }

  .v2-shell .v2-assurance-strip {
    grid-template-columns: 1fr;
  }

  .v2-shell .v2-assurance-strip > div + div,
  .v2-shell .v2-assurance-strip > div:nth-child(3),
  .v2-shell .v2-assurance-strip > div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--store-line);
  }

  .v2-shell .auth-footer {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 20px;
  }

  .v2-shell .footer-socials {
    grid-column: auto;
  }
}

/* ---- feed de actividad en vivo (Home) -- prueba social, sin datos identificables ---- */
.v2-shell .live-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--p-glass-bg);
  border: 1px solid var(--p-glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.v2-shell .live-activity__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-neon);
}

.v2-shell .live-activity__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p-neon);
  box-shadow: 0 0 8px var(--p-neon);
}

@media (prefers-reduced-motion: no-preference) {
  .v2-shell .live-activity__dot {
    animation: v2Pulse 1.8s ease-in-out infinite;
  }
}

.v2-shell .live-activity__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v2-shell .live-activity__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.v2-shell .live-activity__item time {
  flex-shrink: 0;
  font-size: 11px;
  opacity: .7;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .v2-shell .live-activity {
    padding: 12px 14px;
  }
  .v2-shell .live-activity__item {
    flex-direction: column;
    gap: 2px;
  }
}