/*
 * Diseño público estilo TopLevel (2026-09-29).
 * Solo cambia la apariencia de la tienda pública: se activa con la clase
 * body.tl-skin, que header.php pone fuera del panel admin. Los colores salen
 * de las variables del tema (Configuración > Personalizar colores), así que
 * siguen siendo editables. El !important solo se usa para ganarle a estilos
 * en línea del HTML/JS existente.
 */

body.tl-skin {
  --tl-font: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --tl-display: "Saira Condensed", "Barlow", "Segoe UI", system-ui, sans-serif;
  --tl-beam: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.05) 44%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.05) 56%, transparent 62%);
  --tl-card: var(--theme-surface);
  --tl-card-rgb: var(--theme-surface-rgb);
  --tl-card-2: var(--theme-surface-alt);
  --tl-blue: var(--theme-primary);
  --tl-blue-rgb: var(--theme-primary-rgb);
  --tl-radius: 12px;
  --tl-line: rgba(255, 255, 255, 0.1);
  font-family: var(--tl-font);
  color: var(--theme-text);
  background-color: var(--theme-bg-main) !important;
  background-image:
    radial-gradient(ellipse 70% 45% at 18% 12%, rgba(var(--tl-blue-rgb), 0.75), transparent 70%),
    radial-gradient(ellipse 60% 50% at 88% 48%, rgba(var(--theme-secondary-rgb), 0.55), transparent 70%),
    radial-gradient(ellipse 80% 40% at 30% 88%, rgba(var(--tl-blue-rgb), 0.5), transparent 70%),
    linear-gradient(180deg, var(--theme-bg-alt) 0%, var(--theme-bg-main) 55%, var(--theme-bg-deep) 100%) !important;
  background-attachment: fixed !important;
}

body.tl-skin {
  padding: 0 !important;
}
@media (min-width: 992px) {
  body.tl-skin.site-topbar-enabled { --site-topbar-height: 78px; }
}

body.tl-skin.site-media-background-active {
  background-image: none !important;
}

body.tl-skin :where(h1, h2, h3, h4, h5, h6, p, span, a, button, div, label, input, select, textarea, small, strong, li, td, th, article) {
  font-family: var(--tl-font) !important;
}

body.tl-skin h1, body.tl-skin h2, body.tl-skin h3,
body.tl-skin h4, body.tl-skin h5, body.tl-skin h6 {
  letter-spacing: 0 !important;
}

/* Los brillos de colores del diseño anterior. */
body.tl-skin .site-shell-frame > .rounded-circle {
  display: none !important;
}

body.tl-skin .store-shell {
  max-width: 1360px !important;
}

body.tl-skin .site-shell-frame {
  overflow: visible !important;
}

/* ---------- Colores de utilidades de Bootstrap ---------- */
body.tl-skin .text-info { color: var(--theme-highlight) !important; }
body.tl-skin .text-neon { color: var(--theme-text) !important; }
body.tl-skin .text-secondary { color: var(--theme-text-muted) !important; }
body.tl-skin .border-info { border-color: rgba(var(--tl-blue-rgb), 0.9) !important; }
body.tl-skin .border-info-subtle { border-color: var(--tl-line) !important; }
body.tl-skin .bg-dark { background-color: var(--tl-card) !important; }
body.tl-skin a.text-info:hover { color: #fff !important; }

/* ---------- Botones ---------- */
body.tl-skin .btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
body.tl-skin .btn-info,
body.tl-skin .neon-btn-info,
body.tl-skin .btn-primary {
  background: var(--theme-button-primary) !important;
  border: 1px solid var(--theme-button-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.tl-skin .btn-info:hover,
body.tl-skin .neon-btn-info:hover,
body.tl-skin .btn-primary:hover {
  background: var(--theme-button-secondary) !important;
  border-color: var(--theme-button-secondary) !important;
}
body.tl-skin .btn-outline-info {
  background: rgba(var(--theme-button-primary-rgb), 0.18) !important;
  border: 1px solid var(--theme-button-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.tl-skin .btn-outline-info:hover {
  background: var(--theme-button-primary) !important;
}
body.tl-skin .btn-admin,
body.tl-skin .btn-dark {
  background: var(--tl-card-2) !important;
  border: 1px solid var(--tl-line) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.tl-skin .btn-admin:hover,
body.tl-skin .btn-dark:hover {
  background: var(--theme-button-primary) !important;
  border-color: var(--theme-button-primary) !important;
}
body.tl-skin .btn-warning,
body.tl-skin .btn-outline-warning {
  box-shadow: none !important;
}

/* ---------- Formularios ---------- */
body.tl-skin .form-control,
body.tl-skin .form-select {
  background-color: var(--tl-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--tl-radius) !important;
  color: #fff !important;
  box-shadow: none !important;
  min-height: 46px;
}
body.tl-skin .form-control::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}
body.tl-skin .form-control:focus,
body.tl-skin .form-select:focus {
  border-color: var(--tl-blue) !important;
  box-shadow: 0 0 0 3px rgba(var(--tl-blue-rgb), 0.35) !important;
}
body.tl-skin .form-label {
  color: #fff !important;
  font-weight: 600;
}

/* ---------- Cabecera fija ---------- */
body.tl-skin .site-header-topbar {
  --site-topbar-opacity: 1;
  background: var(--theme-topbar-bg) !important;
  border: 0 !important;
  border-bottom: 4px solid var(--tl-blue) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
  padding-block: 0.75rem !important;
  padding-inline: max(1rem, calc((var(--tl-vw, 100vw) - 1240px) / 2)) !important;
  gap: 0.75rem 1.25rem !important;
}
@media (min-width: 992px) {
  body.tl-skin .site-header-topbar { flex-wrap: nowrap !important; }
}
body.tl-skin .site-header:not(.site-header-topbar) {
  padding-block: 0.75rem;
}
body.tl-skin .site-brand-logo {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.tl-skin .site-brand {
  gap: 0.7rem !important;
}
body.tl-skin .site-brand-copy p {
  font-size: 0.6rem !important;
  letter-spacing: 0.22em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
}
body.tl-skin .site-brand-copy {
  min-width: 0;
  max-width: 340px;
}
body.tl-skin .site-brand-copy h1,
body.tl-skin .site-brand-copy p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.tl-skin .site-brand-copy h1 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Menú de navegación en línea (escritorio). */
body.tl-skin .tl-nav {
  display: none;
  align-items: center;
  gap: 2rem;
  margin-inline: auto;
}
body.tl-skin .tl-nav a {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}
body.tl-skin .tl-nav a:hover,
body.tl-skin .tl-nav a.is-active {
  color: #fff;
}
@media (min-width: 1200px) {
  body.tl-skin .tl-nav { display: flex; }
  body.tl-skin .site-header-topbar .site-topbar-search { margin-left: 0 !important; }
  body.tl-skin.tl-guest #menu-toggle { display: none !important; }
  body.tl-skin.tl-guest .site-header-topbar > div[aria-hidden="true"] { display: none !important; }
}

body.tl-skin #menu-toggle {
  width: 42px !important;
  height: 42px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Buscador de la barra superior. */
body.tl-skin .site-topbar-search {
  flex: 0 1 300px !important;
  min-width: 200px !important;
}
body.tl-skin .site-topbar-search-input {
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(var(--theme-topbar-search-bg-rgb), 0.85) !important;
  box-shadow: none !important;
  font-size: 0.92rem;
}
body.tl-skin .site-topbar-search-input:focus {
  border-color: rgba(255, 255, 255, 0.6) !important;
}
body.tl-skin .site-topbar-search-dropdown {
  background: var(--tl-card) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: var(--tl-radius) !important;
  backdrop-filter: none !important;
}
body.tl-skin .site-topbar-search-item {
  background: transparent !important;
  border-radius: 10px !important;
}
body.tl-skin .site-topbar-search-item:hover,
body.tl-skin .site-topbar-search-item.is-active {
  background: var(--tl-card-2) !important;
  border-color: transparent !important;
}
body.tl-skin .site-topbar-search-thumb {
  border-radius: 8px !important;
  border: 0 !important;
}

/* Botón de acceso y de cuenta: píldora blanca. */
body.tl-skin .site-auth-trigger,
body.tl-skin #user-trigger {
  border-radius: 999px !important;
  border: 1px solid var(--theme-topbar-login-border) !important;
  background: var(--theme-topbar-login-bg) !important;
  color: var(--theme-topbar-login-text) !important;
  box-shadow: none !important;
  padding: 0.55rem 1.1rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-width: 0 !important;
  gap: 0.55rem !important;
  white-space: nowrap;
}
body.tl-skin #user-trigger {
  padding: 0.3rem 0.95rem 0.3rem 0.35rem !important;
  gap: 0.6rem !important;
  max-width: 260px;
}
body.tl-skin .site-auth-label,
body.tl-skin #user-trigger-name {
  color: inherit !important;
  text-shadow: none !important;
}
body.tl-skin #user-trigger .small {
  font-size: 0.62rem !important;
  opacity: 0.6 !important;
  letter-spacing: 0.08em !important;
}
body.tl-skin #user-trigger-initials {
  width: 32px !important;
  height: 32px !important;
  background: var(--theme-topbar-bg) !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 0.8rem;
}
body.tl-skin #auth-menu,
body.tl-skin #user-menu {
  background: var(--tl-card) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: var(--tl-radius) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
}
body.tl-skin #user-menu-rewards-card {
  background: var(--tl-card-2) !important;
  border-color: var(--tl-line) !important;
  box-shadow: none !important;
}
body.tl-skin #user-menu-email { color: var(--theme-text-muted) !important; }

/* Menú lateral (hamburguesa). */
body.tl-skin #menu-panel {
  background: var(--tl-card) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}
body.tl-skin #menu-close {
  box-shadow: none !important;
}

/* ---------- Modales (acceso, perfil, pedidos, premios) ---------- */
body.tl-skin .neon-modal,
body.tl-skin #user-profile-modal > div:not([data-user-close]):not(.position-absolute),
body.tl-skin #user-orders-modal > div:not([data-user-close]):not(.position-absolute),
body.tl-skin #user-rewards-modal > div:not([data-user-close]):not(.position-absolute) {
  background: var(--tl-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}
body.tl-skin [data-auth-close].position-absolute:not(.w-100) {
  width: 34px !important;
  height: 34px !important;
  background: transparent !important;
  border: 1.5px solid #fff !important;
  box-shadow: none !important;
}
body.tl-skin [data-auth-close].position-absolute:not(.w-100) svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}
body.tl-skin .modal-content {
  background: var(--tl-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 14px !important;
  color: #fff;
}

/* ---------- Banners del inicio (hero a todo lo ancho) ---------- */
body.tl-skin .promo-section-mobile {
  width: var(--tl-vw, 100vw) !important;
  margin-left: calc(50% - (var(--tl-vw, 100vw) / 2)) !important;
  margin-right: calc(50% - (var(--tl-vw, 100vw) / 2)) !important;
  margin-top: 0 !important;
}
body.tl-skin .site-topbar-enabled .promo-section-mobile,
body.tl-skin.site-topbar-enabled .promo-section-mobile {
  margin-top: -1.65rem !important;
}
body.tl-skin .promo-slider-track {
  gap: 0 !important;
}
body.tl-skin .promo-slide-card {
  min-width: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
  aspect-ratio: 1280 / 500 !important;
  background: var(--theme-bg-alt) !important;
}
body.tl-skin .promo-slide-image {
  object-fit: cover !important;
}
body.tl-skin .promo-slide-overlay {
  background: linear-gradient(90deg, rgba(4, 12, 48, 0.1) 30%, rgba(4, 12, 48, 0.55) 100%) !important;
}
body.tl-skin .promo-slide-content {
  align-items: flex-start;
  padding-left: 52% !important;
  padding-right: max(1rem, calc((var(--tl-vw, 100vw) - 1240px) / 2)) !important;
}
body.tl-skin .promo-slide-content > p:first-child {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.25em !important;
  font-size: clamp(0.7rem, 1.1vw, 1rem);
}
body.tl-skin .promo-slide-content > h2 {
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  line-height: 1.02 !important;
  font-size: clamp(1.5rem, 4.4vw, 4.5rem) !important;
  margin: 0.4rem 0 !important;
}
body.tl-skin .promo-slide-content > p.small {
  font-size: clamp(0.8rem, 1.2vw, 1.05rem) !important;
  max-width: 34rem;
  color: #fff !important;
}
body.tl-skin .promo-dots {
  justify-content: center;
  margin-top: 0.9rem !important;
}
body.tl-skin .promo-dot { background: rgba(255, 255, 255, 0.35) !important; box-shadow: none !important; }
body.tl-skin .promo-dot.is-active { background: #fff !important; }
body.tl-skin .promo-slider-shell > p.small { display: none; }
body.tl-skin .promo-slider-shell [data-action] {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
  margin-inline: max(1rem, calc((var(--tl-vw, 100vw) - 1320px) / 2));
}
@media (max-width: 767.98px) {
  body.tl-skin .promo-slide-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    justify-content: flex-end;
    padding-bottom: 1rem;
  }
  body.tl-skin .promo-slide-overlay {
    background: linear-gradient(0deg, rgba(4, 12, 48, 0.75) 0%, transparent 65%) !important;
  }
}

/* Banner destacado centrado. */
body.tl-skin .featured-section-mobile {
  max-width: 820px;
  margin-inline: auto;
}
body.tl-skin .featured-banner-card {
  border-radius: 10px !important;
  background: var(--theme-bg-alt) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
body.tl-skin .featured-banner-image {
  object-fit: cover !important;
}
body.tl-skin .featured-banner-content > p:first-child { color: #fff !important; }
body.tl-skin .featured-banner-content > h3 {
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.6vw, 2rem) !important;
}

/* ---------- Títulos de sección ---------- */
body.tl-skin section > .d-flex > h2,
body.tl-skin section > .d-flex > div > h2,
body.tl-skin #nov-section h2 {
  font-size: clamp(1.4rem, 2.2vw, 2rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
}
body.tl-skin section > .d-flex > a.small,
body.tl-skin section > .d-flex > div > a.small {
  color: #fff !important;
  background: var(--tl-blue);
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  text-transform: none !important;
  font-size: 0.85rem;
  text-decoration: none;
}
body.tl-skin section > .d-flex > a.small:hover { background: var(--theme-button-secondary); }
body.tl-skin section > .d-flex > div > p.text-uppercase {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ---------- Tarjetas de juego (imagen vertical + barra con el nombre) ---------- */
body.tl-skin .mini-game-card {
  display: block;
  border-radius: var(--tl-radius) !important;
  overflow: hidden;
  background: var(--tl-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  width: 100%;
  padding: 0;
  text-align: left;
}
body.tl-skin .mini-game-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(var(--tl-blue-rgb), 0.9);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--tl-blue-rgb), 0.6) !important;
}
body.tl-skin .mini-game-card-inner {
  display: flex !important;
  flex-direction: column;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  overflow: hidden;
}
body.tl-skin .mini-game-card-img {
  aspect-ratio: 5 / 6;
  width: 100%;
  height: auto !important;
  object-fit: cover;
  background: var(--theme-bg-alt);
}
body.tl-skin .mini-game-card-overlay {
  position: static !important;
  background: var(--tl-card) !important;
  padding: 0.85rem 1rem !important;
  min-height: 3.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.tl-skin .mini-game-card-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  line-height: 1.25 !important;
}
body.tl-skin .mini-game-card-price {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin-top: 0.2rem !important;
}
body.tl-skin .mini-game-card-price .price-val {
  color: var(--theme-price-text) !important;
  font-weight: 700;
}
body.tl-skin .mini-game-popular-star {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--tl-blue);
  color: #fff !important;
  font-size: 0.8rem !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
@media (max-width: 575.98px) {
  body.tl-skin .mini-game-card-overlay { padding: 0.65rem 0.75rem !important; min-height: 2.9rem; }
  body.tl-skin .mini-game-card-title { font-size: 0.82rem !important; }
}

/* ---------- Novedades (tarjeta vertical) ---------- */
body.tl-skin #nov-section .nov-card-fe {
  display: flex !important;
  flex-direction: column !important;
}
body.tl-skin #nov-section .nov-card-img-fe {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0 !important;
}

/* ---------- Página de juego ---------- */
body.tl-skin .game-feature-badge {
  border-radius: 999px !important;
  font-weight: 600;
}
body.tl-skin section.container.bg-dark,
body.tl-skin section.container-md > .mx-auto.bg-dark {
  background: var(--tl-card) !important;
  border: 1px solid rgba(var(--tl-blue-rgb), 0.85) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35) !important;
}
body.tl-skin section.container.bg-dark h2 {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Paquetes: ícono a la izquierda, nombre y precio verde a la derecha. */
body.tl-skin .pack-card {
  background: var(--tl-card) !important;
  border-radius: var(--tl-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}
body.tl-skin .pack-card::after {
  box-shadow: none !important;
}
body.tl-skin .pack-card:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35) !important;
}
body.tl-skin .pack-card.neon-selected,
body.tl-skin .pack-card[aria-pressed="true"] {
  border-color: var(--tl-blue) !important;
  box-shadow: 0 0 0 2px var(--tl-blue), 0 10px 26px rgba(var(--tl-blue-rgb), 0.3) !important;
}
body.tl-skin .pack-card .card-body {
  align-items: center !important;
}
body.tl-skin .pack-card-media {
  order: -1;
  width: 64px !important;
  height: 64px !important;
  margin: 0 0 0 1rem;
  padding: 6px !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  flex: 0 0 64px;
  align-self: center;
}
body.tl-skin .pack-card-image {
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  object-fit: contain;
}
body.tl-skin .pack-card-content {
  align-self: stretch;
  padding: 0.85rem 1rem !important;
}
body.tl-skin .pack-card-name {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.tl-skin .pack-card-footer {
  left: 1rem !important;
  bottom: 0.8rem !important;
  align-items: baseline;
  flex-direction: row-reverse;
  gap: 0.35rem !important;
}
body.tl-skin .precio-label {
  color: var(--theme-price-text) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
body.tl-skin .moneda-label {
  color: var(--theme-price-text) !important;
  opacity: 1 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
body.tl-skin .pack-card-discount-badge {
  border-radius: 999px !important;
}
@media (max-width: 575.98px) {
  body.tl-skin .pack-card-media { width: 44px !important; height: 44px !important; flex-basis: 44px; margin-left: 0.6rem; padding: 4px !important; }
  body.tl-skin .pack-card-content { padding: 0.65rem 0.7rem !important; }
  body.tl-skin .pack-card-name { font-size: 0.9rem !important; }
  body.tl-skin .precio-label, body.tl-skin .moneda-label { font-size: 1.05rem !important; }
  body.tl-skin .pack-card-footer { left: 0.7rem !important; bottom: 0.6rem !important; }
}

/* Selector de moneda y resumen de compra. */
body.tl-skin .currency-picker-btn {
  background: var(--tl-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 999px !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.tl-skin .currency-picker-dialog {
  background: var(--tl-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}
body.tl-skin .currency-picker-option {
  background: var(--tl-card-2) !important;
  border-color: var(--tl-line) !important;
  border-radius: 10px !important;
}
body.tl-skin .currency-picker-option.is-active {
  border-color: var(--tl-blue) !important;
  box-shadow: 0 0 0 1px var(--tl-blue) !important;
}
body.tl-skin .purchase-quantity-panel,
body.tl-skin .card {
  background: var(--tl-card) !important;
  border-color: rgba(var(--tl-blue-rgb), 0.85) !important;
  border-radius: var(--tl-radius) !important;
  box-shadow: none !important;
}
body.tl-skin .purchase-quantity-btn {
  background: var(--tl-card-2) !important;
  border: 1px solid var(--tl-line) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.tl-skin .purchase-quantity-input {
  background: var(--tl-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ---------- Pie de página ---------- */
body.tl-skin .tl-footer {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  width: 100%;
  background: #030712;
  color: rgba(255, 255, 255, 0.85);
  padding: 3.25rem 1rem 2rem;
}
body.tl-skin .tl-footer-inner {
  max-width: 1216px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr repeat(2, 1fr);
  gap: 2.5rem;
  align-items: start;
}
body.tl-skin .tl-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
body.tl-skin .tl-footer-brand-name {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  text-decoration: none;
}
body.tl-skin .tl-footer-brand-name img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}
body.tl-skin .tl-footer-brand p {
  margin: 0;
  max-width: 17rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.55;
}
body.tl-skin .tl-footer-col h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}
body.tl-skin .tl-footer-col h2 svg { color: var(--theme-highlight); }
body.tl-skin .tl-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
body.tl-skin .tl-footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.97rem;
}
body.tl-skin .tl-footer-col a:hover { color: #fff; }
body.tl-skin .tl-footer-col a svg { width: 16px; height: 16px; flex-shrink: 0; }
body.tl-skin .tl-footer-col .tl-ic-facebook { color: #60A5FA; }
body.tl-skin .tl-footer-col .tl-ic-instagram { color: #F472B6; }
body.tl-skin .tl-footer-col .tl-ic-tiktok { color: #E5E7EB; }
body.tl-skin .tl-footer-col .tl-ic-whatsapp { color: #4ADE80; }
body.tl-skin .tl-footer-col .tl-ic-link { color: #60A5FA; }
body.tl-skin .tl-footer-bottom {
  max-width: 1216px;
  margin: 2.5rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.9;
}
body.tl-skin .tl-footer-bottom strong { color: #fff; }
@media (max-width: 767.98px) {
  body.tl-skin .tl-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  body.tl-skin .tl-footer-brand { grid-column: 1 / -1; }
}

/* ---------- Botones flotantes (círculos azules) ---------- */
body.tl-skin .floating-social-button {
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
  border: 0 !important;
}

/* Botón principal de compra en el azul de la tienda. */
body.tl-skin #buy-button {
  background: var(--theme-button-primary) !important;
  border: 1px solid var(--theme-button-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  min-height: 50px;
  font-size: 1rem;
  letter-spacing: 0.02em !important;
  box-shadow: 0 10px 24px rgba(var(--theme-button-primary-rgb), 0.35) !important;
}
body.tl-skin #buy-button:hover:not(:disabled) {
  background: var(--theme-button-secondary) !important;
}
body.tl-skin #buy-button:disabled {
  opacity: 0.55;
  box-shadow: none !important;
}
body.tl-skin #apply-coupon-btn {
  border-radius: 0 var(--tl-radius) var(--tl-radius) 0 !important;
}
body.tl-skin .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Paneles de los modales de cuenta (perfil, pedidos, premios, acceso). */
body.tl-skin [style*="--theme-panel-gradient"] {
  background: var(--tl-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}
body.tl-skin [style*="--theme-panel-gradient"] > .border-bottom {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
  border-color: var(--tl-line) !important;
}
body.tl-skin [style*="--theme-panel-gradient"] .small.text-uppercase.text-info {
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.18em !important;
}
body.tl-skin [style*="--theme-panel-gradient"] [data-user-close].btn,
body.tl-skin [style*="--theme-panel-gradient"] [data-auth-close].btn {
  width: 34px !important;
  height: 34px !important;
  background: transparent !important;
  border: 1.5px solid #fff !important;
}
body.tl-skin [style*="--theme-panel-gradient"] .border-info.rounded-circle {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  background: var(--tl-card-2) !important;
}

/* Tablas de pedidos y movimientos dentro de los modales. */
body.tl-skin [style*="--theme-panel-gradient"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: #fff;
  --bs-table-border-color: var(--tl-line);
}
body.tl-skin [style*="--theme-panel-gradient"] .table thead th {
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600;
}

/* Selector de archivo. */
body.tl-skin .form-control[type="file"] {
  padding: 0 !important;
  overflow: hidden;
  line-height: 44px;
}
body.tl-skin .form-control[type="file"]::file-selector-button {
  height: 100%;
  min-height: 44px;
  margin: 0 0.9rem 0 0;
  padding: 0 1.1rem;
  border: 0;
  border-right: 1px solid var(--tl-line);
  background: var(--theme-button-primary);
  color: #fff;
  font-weight: 600;
}

/* Botones secundarios de cuenta: azul oscuro con borde azul, como en TopLevel. */
body.tl-skin .btn-admin {
  background: rgba(var(--theme-button-primary-rgb), 0.28) !important;
  border: 1px solid rgba(var(--theme-button-primary-rgb), 0.95) !important;
  color: #fff !important;
}
body.tl-skin .btn-admin:hover {
  background: var(--theme-button-primary) !important;
}
body.tl-skin #user-trigger.btn-admin {
  background: var(--theme-topbar-login-bg) !important;
  border-color: var(--theme-topbar-login-border) !important;
  color: var(--theme-topbar-login-text) !important;
}
body.tl-skin [style*="--theme-panel-gradient"] [data-user-close].btn svg { width: 16px; height: 16px; }

/* Cabecera en tablet y celular: logo + cuenta arriba, buscador abajo. */
@media (max-width: 991.98px) {
  body.tl-skin .site-header-topbar {
    padding-inline: 1rem !important;
    flex-wrap: wrap !important;
  }
  body.tl-skin .site-header-topbar .site-brand {
    order: 1;
    flex: 1 1 0 !important;
    min-width: 0;
  }
  body.tl-skin .site-header-topbar #menu-toggle,
  body.tl-skin .site-header-topbar > div[aria-hidden="true"] {
    order: 0;
  }
  body.tl-skin .site-header-topbar #auth-container {
    order: 2;
    flex: 0 0 auto;
  }
  body.tl-skin .site-header-topbar .site-topbar-search {
    order: 3;
    flex: 1 1 100% !important;
    max-width: none !important;
  }
}
@media (max-width: 575.98px) {
  body.tl-skin .site-auth-trigger,
  body.tl-skin #user-trigger {
    width: auto !important;
  }
  body.tl-skin .site-auth-trigger {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.8rem !important;
  }
  body.tl-skin #user-trigger {
    max-width: 150px;
    padding-right: 0.6rem !important;
  }
  body.tl-skin #user-trigger .small {
    display: none;
  }
  body.tl-skin .site-brand-logo {
    width: 36px !important;
    height: 36px !important;
  }
  body.tl-skin .site-brand-copy h1 {
    font-size: 1rem !important;
  }
}

/* Flotantes en color sólido (siguen los colores editables del tema). */
body.tl-skin .floating-social-button-channel {
  background: var(--theme-float-channel-bg) !important;
  color: var(--theme-float-channel-text) !important;
}
body.tl-skin .floating-social-button-whatsapp {
  background: var(--theme-float-whatsapp-bg) !important;
  color: var(--theme-float-whatsapp-text) !important;
}

/* Títulos del modal de acceso: blancos y sin brillo neón. */
body.tl-skin .neon-modal h2,
body.tl-skin .neon-modal h3 {
  color: #fff !important;
  text-shadow: none !important;
  font-size: 1.75rem !important;
}

/* =====================================================================
 * Capa 2 — nivel visual (2026-09-29)
 * Tipografía: Saira Condensed (títulos, nombres, precios) + Barlow (texto).
 * Motivo único: el haz de luz diagonal del fondo de TopLevel. Aparece en el
 * fondo (flota lento), en el hero (barre una vez al cargar) y en las
 * tarjetas (cruza al pasar el mouse).
 * ===================================================================== */

@keyframes tl-beam-drift {
  from { transform: translate3d(-10%, 0, 0); }
  to { transform: translate3d(10%, -3%, 0); }
}
@keyframes tl-sweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}
@keyframes tl-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes tl-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Fondo: haz flotante + grano ---------- */
body.tl-skin::before,
body.tl-skin::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
body.tl-skin::before {
  inset: -10% -30%;
  background:
    linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, 0.05) 46%, rgba(190, 210, 255, 0.2) 49.5%, rgba(255, 255, 255, 0.34) 50%, rgba(190, 210, 255, 0.18) 50.6%, rgba(255, 255, 255, 0.04) 54%, transparent 60%),
    linear-gradient(112deg, transparent 62%, rgba(255, 255, 255, 0.06) 66%, transparent 70%);
  filter: blur(2px);
  animation: tl-beam-drift 26s ease-in-out infinite alternate;
}
body.tl-skin::after {
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.tl-skin.site-media-background-active::before { display: none; }
body.tl-skin .site-shell-frame { z-index: 1; }

/* ---------- Tipografía display ---------- */
body.tl-skin .site-brand-copy h1,
body.tl-skin .promo-slide-content > h2,
body.tl-skin .featured-banner-content > h3,
body.tl-skin section > .d-flex > h2,
body.tl-skin section > .d-flex > div > h2,
body.tl-skin #nov-section h2,
body.tl-skin .mini-game-card-title,
body.tl-skin section.container.bg-dark h2,
body.tl-skin h3.text-info.fw-bold,
body.tl-skin .precio-label,
body.tl-skin .moneda-label,
body.tl-skin .tl-marquee-item,
body.tl-skin .tl-footer-brand-name,
body.tl-skin .tl-footer-col h2,
body.tl-skin .tl-footer-watermark,
body.tl-skin .neon-modal h2,
body.tl-skin [style*="--theme-panel-gradient"] h3 {
  font-family: var(--tl-display) !important;
}

/* ---------- Cabecera: vidrio que se aclara al bajar (usa la opacidad que ya calcula el JS) ---------- */
body.tl-skin .site-header-topbar {
  background: rgba(var(--theme-topbar-bg-rgb), max(0.78, var(--site-topbar-opacity, 1))) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border-bottom: 0 !important;
}
body.tl-skin .site-header-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, var(--tl-blue) 0%, var(--tl-blue) 30%, #9db4ff 50%, var(--tl-blue) 70%, var(--tl-blue) 100%);
  box-shadow: 0 0 18px rgba(var(--tl-blue-rgb), 0.9);
}
body.tl-skin .site-brand-copy h1 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
}
body.tl-skin .site-brand-copy p {
  font-family: var(--tl-display) !important;
  font-weight: 600;
  letter-spacing: 0.28em !important;
}
body.tl-skin .tl-nav a {
  position: relative;
  padding-block: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
body.tl-skin .tl-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
body.tl-skin .tl-nav a:hover::after,
body.tl-skin .tl-nav a.is-active::after {
  transform: scaleX(1);
}
body.tl-skin .site-auth-trigger,
body.tl-skin #user-trigger {
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
body.tl-skin .site-auth-trigger:hover,
body.tl-skin #user-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 255, 255, 0.18) !important;
}

/* ---------- Hero ---------- */
body.tl-skin .promo-slider-shell {
  position: relative;
}
body.tl-skin .promo-slide-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--tl-beam);
  transform: translateX(-110%);
  animation: tl-sweep 1.5s cubic-bezier(0.3, 0.6, 0.2, 1) 0.35s 1 both;
}
body.tl-skin .promo-slide-overlay {
  background:
    linear-gradient(180deg, transparent 62%, rgba(var(--theme-bg-main-rgb), 0.85) 100%),
    linear-gradient(90deg, rgba(4, 12, 48, 0.05) 35%, rgba(4, 12, 48, 0.55) 100%) !important;
}
body.tl-skin .promo-slide-content > * {
  animation: tl-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
body.tl-skin .promo-slide-content > :nth-child(2) { animation-delay: 0.12s; }
body.tl-skin .promo-slide-content > :nth-child(3) { animation-delay: 0.24s; }
body.tl-skin .promo-slide-content > p:first-child:not(:empty) {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 1.1rem 0.3rem 0.9rem;
  background: var(--tl-blue);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font-family: var(--tl-display) !important;
  font-weight: 700;
  letter-spacing: 0.2em !important;
  text-shadow: none !important;
}
body.tl-skin .promo-slide-content > h2 {
  font-weight: 800 !important;
  font-size: clamp(2rem, 5.6vw, 5.8rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.005em !important;
  text-shadow: 0 6px 30px rgba(3, 7, 30, 0.55) !important;
}
body.tl-skin .promo-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  z-index: 3;
  margin: 0 !important;
  gap: 0.45rem !important;
}
body.tl-skin .promo-dot {
  width: 28px !important;
  height: 4px !important;
  border-radius: 2px !important;
}
body.tl-skin .promo-dot.is-active {
  width: 46px !important;
}

/* ---------- Franja de juegos (bajo el hero) ---------- */
body.tl-skin .tl-marquee {
  position: relative;
  width: var(--tl-vw, 100vw);
  margin-left: calc(50% - (var(--tl-vw, 100vw) / 2));
  overflow: hidden;
  background: var(--tl-blue);
  border-block: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 50px rgba(var(--tl-blue-rgb), 0.35);
}
body.tl-skin .tl-marquee-track {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  width: max-content;
  padding: 0.95rem 0;
  animation: tl-marquee 45s linear infinite;
}
body.tl-skin .tl-marquee-item {
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}
body.tl-skin .tl-marquee-sep {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Encabezados de sección ---------- */
body.tl-skin section > .d-flex:has(> h2),
body.tl-skin section > .d-flex:has(> div > h2) {
  align-items: flex-end !important;
  padding-bottom: 0.9rem;
  margin-bottom: 1.6rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.tl-skin section > .d-flex > h2,
body.tl-skin section > .d-flex > div > h2,
body.tl-skin #nov-section h2,
body.tl-skin h3.text-info.fw-bold {
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  color: #fff !important;
}
body.tl-skin section > .d-flex > h2,
body.tl-skin section > .d-flex > div > h2,
body.tl-skin #nov-section h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem) !important;
}
body.tl-skin section > .d-flex > h2::before,
body.tl-skin section > .d-flex > div > h2::before,
body.tl-skin #nov-section h2::before,
body.tl-skin h3.text-info.fw-bold::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.82em;
  margin-right: 0.4em;
  vertical-align: -0.04em;
  background: var(--tl-blue);
  transform: skewX(-16deg);
  box-shadow: 0 0 16px rgba(var(--tl-blue-rgb), 0.9);
}
body.tl-skin h3.text-info.fw-bold {
  font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
  margin-bottom: 0.2rem;
}
body.tl-skin h3.text-info.fw-bold + span.text-uppercase,
body.tl-skin section > .d-flex > div > p.text-uppercase {
  font-family: var(--tl-display) !important;
  font-weight: 600;
  letter-spacing: 0.28em !important;
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
body.tl-skin section > .d-flex > a.small,
body.tl-skin section > .d-flex > div > a.small {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0 !important;
  padding: 0.55rem 1.3rem 0.55rem 1.1rem !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font-family: var(--tl-display) !important;
  font-weight: 700;
  font-size: 0.95rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease;
}
body.tl-skin section > .d-flex > a.small::after,
body.tl-skin section > .d-flex > div > a.small::after {
  content: "\2192";
  font-family: var(--tl-font);
  transition: transform 0.2s ease;
}
body.tl-skin section > .d-flex > a.small:hover::after,
body.tl-skin section > .d-flex > div > a.small:hover::after {
  transform: translateX(4px);
}

/* ---------- Tarjetas de juego ---------- */
body.tl-skin .mini-game-card {
  position: relative;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}
body.tl-skin .mini-game-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--tl-blue), 0 0 36px rgba(var(--tl-blue-rgb), 0.45) !important;
}
body.tl-skin .mini-game-card-inner {
  position: relative;
}
body.tl-skin .mini-game-card-img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}
body.tl-skin .mini-game-card:hover .mini-game-card-img {
  transform: scale(1.07);
  filter: saturate(1.15) brightness(1.05);
}
body.tl-skin .mini-game-card-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--tl-beam);
  transform: translateX(-110%);
  transition: transform 0.75s cubic-bezier(0.3, 0.6, 0.2, 1);
}
body.tl-skin .mini-game-card:hover .mini-game-card-inner::after {
  transform: translateX(110%);
}
body.tl-skin .mini-game-card-overlay {
  position: relative !important;
  z-index: 2;
  padding-right: 2.4rem !important;
}
body.tl-skin .mini-game-card-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--tl-blue);
  box-shadow: 0 0 14px rgba(var(--tl-blue-rgb), 0.9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
body.tl-skin .mini-game-card-overlay::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-6px, -50%) rotate(45deg);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
body.tl-skin .mini-game-card:hover .mini-game-card-overlay::before {
  transform: scaleX(1);
}
body.tl-skin .mini-game-card:hover .mini-game-card-overlay::after {
  opacity: 1;
  transform: translate(0, -50%) rotate(45deg);
}
body.tl-skin .mini-game-card-title {
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.015em !important;
  line-height: 1.05 !important;
}
body.tl-skin .mini-game-card-price {
  font-weight: 500;
}
body.tl-skin .mini-game-popular-star {
  z-index: 4;
  box-shadow: 0 0 0 3px rgba(var(--tl-blue-rgb), 0.35), 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}
@media (max-width: 575.98px) {
  body.tl-skin .mini-game-card-title { font-size: 1rem !important; }
  body.tl-skin .mini-game-card-overlay { padding-right: 1.8rem !important; }
  body.tl-skin .mini-game-card-overlay::after { right: 0.8rem; }
}

/* Las tarjetas aparecen al entrar en pantalla (solo navegadores que lo soportan). */
@supports (animation-timeline: view()) {
  body.tl-skin .row > .col:has(> .mini-game-card) {
    animation: tl-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 18%;
  }
}

/* ---------- Banner destacado ---------- */
body.tl-skin .featured-banner-card {
  isolation: isolate;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.tl-skin .featured-banner-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--tl-beam);
  transform: translateX(-110%);
  transition: transform 0.9s cubic-bezier(0.3, 0.6, 0.2, 1);
}
body.tl-skin .featured-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--tl-blue), 0 0 40px rgba(var(--tl-blue-rgb), 0.45) !important;
}
body.tl-skin .featured-banner-card:hover::after {
  transform: translateX(110%);
}

/* ---------- Página de juego ---------- */
body.tl-skin section.container.bg-dark:has(> .row > .col-auto img) {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(var(--tl-blue-rgb), 0.35) 0%, transparent 42%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 16px),
    var(--tl-card) !important;
  box-shadow: inset 4px 0 0 var(--tl-blue), 0 22px 50px rgba(0, 0, 0, 0.4) !important;
}
body.tl-skin section.container.bg-dark:has(> .row > .col-auto img) h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  line-height: 0.95;
}
body.tl-skin section.container.bg-dark:has(> .row > .col-auto img) .col-auto > div {
  width: 84px !important;
  height: 84px !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 4px rgba(var(--tl-blue-rgb), 0.35), 0 12px 28px rgba(0, 0, 0, 0.45);
}
body.tl-skin .game-feature-badge {
  font-family: var(--tl-display) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* Paquetes: haz al pasar, anillo azul al elegir. */
body.tl-skin .pack-card {
  isolation: isolate;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
}
body.tl-skin .pack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--tl-beam);
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(0.3, 0.6, 0.2, 1);
}
body.tl-skin .pack-card:hover {
  transform: translateY(-3px) !important;
}
body.tl-skin .pack-card:hover::before {
  transform: translateX(110%);
}
body.tl-skin .pack-card.neon-selected {
  background:
    linear-gradient(135deg, rgba(var(--tl-blue-rgb), 0.32), transparent 60%),
    var(--tl-card) !important;
  border-color: var(--tl-blue) !important;
  box-shadow: 0 0 0 2px var(--tl-blue), 0 0 34px rgba(var(--tl-blue-rgb), 0.55) !important;
}
body.tl-skin .pack-card.neon-selected .pack-card-media {
  border-color: var(--tl-blue) !important;
  background: rgba(var(--tl-blue-rgb), 0.18) !important;
}
body.tl-skin .precio-label,
body.tl-skin .moneda-label {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  line-height: 0.9 !important;
}
body.tl-skin .moneda-label {
  font-size: 1.2rem !important;
  opacity: 0.85 !important;
}
@media (max-width: 575.98px) {
  body.tl-skin .precio-label { font-size: 1.35rem !important; }
  body.tl-skin .moneda-label { font-size: 0.95rem !important; }
}

/* ---------- Pie: marca de agua con el nombre de la tienda ---------- */
body.tl-skin .tl-footer {
  overflow: hidden;
  border-top: 1px solid rgba(var(--tl-blue-rgb), 0.6);
  box-shadow: 0 -1px 0 rgba(var(--tl-blue-rgb), 0.25), 0 -30px 80px rgba(var(--tl-blue-rgb), 0.18);
}
body.tl-skin .tl-footer-inner,
body.tl-skin .tl-footer-bottom {
  position: relative;
  z-index: 1;
}
body.tl-skin .tl-footer-watermark {
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  transform: translateX(-50%);
  z-index: 0;
  font-weight: 800;
  font-size: clamp(4.5rem, 15vw, 15rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}
body.tl-skin .tl-footer-brand-name {
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
}
body.tl-skin .tl-footer-col h2 {
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
}
body.tl-skin .tl-footer-col a {
  transition: color 0.15s ease, transform 0.15s ease;
}
body.tl-skin .tl-footer-col a:hover {
  transform: translateX(3px);
}

/* ---------- Modales: títulos display ---------- */
body.tl-skin .neon-modal h2 {
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 2rem !important;
}
body.tl-skin [style*="--theme-panel-gradient"] h3 {
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 1.45rem !important;
  letter-spacing: 0.02em !important;
}

/* ---------- Foco visible y movimiento reducido ---------- */
body.tl-skin a:focus-visible,
body.tl-skin button:focus-visible,
body.tl-skin [role="button"]:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}
@media (prefers-reduced-motion: reduce) {
  body.tl-skin::before,
  body.tl-skin .promo-slide-card::after,
  body.tl-skin .promo-slide-content > *,
  body.tl-skin .tl-marquee-track,
  body.tl-skin .row > .col:has(> .mini-game-card) {
    animation: none !important;
  }
  body.tl-skin .mini-game-card-inner::after,
  body.tl-skin .pack-card::before,
  body.tl-skin .featured-banner-card::after {
    display: none;
  }
  body.tl-skin .mini-game-card,
  body.tl-skin .mini-game-card-img,
  body.tl-skin .pack-card {
    transition: none !important;
  }
}

/* ---------- Ajustes de celular (capa 2) ---------- */
body.tl-skin section > .d-flex > a.small,
body.tl-skin section > .d-flex > div > a.small {
  white-space: nowrap;
  flex-shrink: 0;
}
body.tl-skin .tl-footer-brand-name {
  line-height: 1.05;
}
@media (max-width: 575.98px) {
  body.tl-skin section > .d-flex > h2,
  body.tl-skin section > .d-flex > div > h2,
  body.tl-skin #nov-section h2 {
    font-size: 1.6rem !important;
  }
  body.tl-skin section > .d-flex > a.small,
  body.tl-skin section > .d-flex > div > a.small {
    padding: 0.45rem 1rem 0.45rem 0.85rem !important;
    font-size: 0.8rem !important;
  }
  body.tl-skin .promo-slide-content > h2 {
    font-size: 1.45rem !important;
    margin: 0.25rem 0 !important;
  }
  body.tl-skin .promo-slide-content > p.small {
    font-size: 0.75rem !important;
  }
  body.tl-skin .promo-slide-content > p:first-child:not(:empty) {
    font-size: 0.62rem;
    padding: 0.2rem 0.8rem 0.2rem 0.6rem;
  }
  /* Acceso solo con ícono; el texto queda para lectores de pantalla. */
  body.tl-skin .site-auth-trigger {
    width: 42px !important;
    height: 42px;
    padding: 0 !important;
    justify-content: center;
  }
  body.tl-skin .site-auth-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body.tl-skin .tl-marquee-track {
    padding: 0.7rem 0;
    gap: 1.5rem;
  }
  body.tl-skin .tl-footer-brand-name {
    font-size: 1.4rem;
  }
}

/* Textos vacíos del banner: no ocupan espacio. */
body.tl-skin .promo-slide-content > :empty {
  display: none !important;
}

/* Sin scroll horizontal por las franjas de borde a borde. */
body.tl-skin {
  overflow-x: clip;
}