* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --nova-bg: #14101f;
  --nova-bg-rgb: 20, 16, 31;
  --nova-bg-alt: #100c1a;
  --nova-purple: #9b5de5;
  --nova-purple-rgb: 155, 93, 229;
  --nova-pink: #f15bb5;
  --nova-pink-rgb: 241, 91, 181;
  --nova-gold: #ffd23f;
  --nova-gold-rgb: 255, 210, 63;
  --nova-teal: #3fc7b0;
  --nova-teal-rgb: 63, 199, 176;
  --nova-text-muted: #b8aed1;
  --nova-gradient: linear-gradient(135deg, var(--nova-purple), var(--nova-pink), var(--nova-gold));
  --nova-gradient-alt: linear-gradient(135deg, var(--nova-pink), var(--nova-gold), var(--nova-purple));
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  color: #ffffff;
  background-color: var(--nova-bg);
  overflow-x: hidden;
  /* Soft glow background using the NovaPixel logo palette */
  background-image: radial-gradient(circle at 20% 80%, rgba(var(--nova-gold-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--nova-purple-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(var(--nova-pink-rgb), 0.05) 0%, transparent 50%);
  animation: novaGlow 8s linear infinite alternate;
  /* Updated padding to account for unified navbar height */
  padding-top: 120px;
}

@keyframes novaGlow {
  0% {
    background-image: radial-gradient(circle at 20% 80%, rgba(var(--nova-gold-rgb), 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(var(--nova-purple-rgb), 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(var(--nova-pink-rgb), 0.05) 0%, transparent 50%);
  }
  100% {
    background-image: radial-gradient(circle at 25% 75%, rgba(var(--nova-gold-rgb), 0.15) 0%, transparent 50%),
      radial-gradient(circle at 75% 25%, rgba(var(--nova-purple-rgb), 0.15) 0%, transparent 50%),
      radial-gradient(circle at 45% 35%, rgba(var(--nova-pink-rgb), 0.08) 0%, transparent 50%);
  }
}

@keyframes novaPulse {
  0%,
  100% {
    background: var(--nova-gradient);
  }
  50% {
    background: var(--nova-gradient-alt);
  }
}

/* Added glow effect animation */
@keyframes novaGlowText {
  0%,
  100% {
    text-shadow: 0 0 10px rgba(var(--nova-gold-rgb), 0.5), 0 0 20px rgba(var(--nova-purple-rgb), 0.3);
  }
  50% {
    text-shadow: 0 0 20px rgba(var(--nova-gold-rgb), 0.8), 0 0 30px rgba(var(--nova-purple-rgb), 0.5), 0 0 40px rgba(var(--nova-pink-rgb), 0.3);
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Updated navbar to contain both topbar and main navigation */
.navbar {
  background: rgba(var(--nova-bg-rgb), 0.95);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(var(--nova-gold-rgb), 0.3);
}

/* Added styling for unified navbar top section */
.navbar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--nova-gold-rgb), 0.1);
}

.topbar-text {
  font-size: 14px;
  color: var(--nova-text-muted);
}

.social-links {
  display: flex;
  gap: 20px;
}

.social-link {
  color: var(--nova-gold);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.social-link:hover {
  color: var(--nova-purple);
  text-shadow: 0 0 10px rgba(var(--nova-gold-rgb), 0.5);
}

.nav-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  /* Added padding to main navigation section */
  padding: 15px 0;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 40px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
  justify-content: center;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-links a:hover {
  color: var(--nova-purple);
  text-shadow: 0 0 8px rgba(var(--nova-purple-rgb), 0.4);
}

/* "VIP" lleva a la tienda exclusiva, así que va en dorado como el resto
   de lo VIP (banner, tarjetas Donador) y no como un link normal. */
.nav-links a.nav-link-vip {
  color: var(--nova-gold);
  font-weight: 700;
}

.nav-links a.nav-link-vip:hover {
  color: var(--nova-gold);
  text-shadow: 0 0 10px rgba(var(--nova-gold-rgb), 0.6);
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  /* Just enough top padding to clear the fixed navbar; bottom padding keeps the stats row clear of the carousel dots */
  padding: 80px 0 50px;
  /* Added background image setup with fallback gradient */
  background: linear-gradient(135deg, rgba(var(--nova-bg-rgb), 0.8), rgba(26, 26, 46, 0.9)),
    url("/placeholder.svg?height=1080&width=1920") center / cover;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Updated hero overlay for better text readability over background images */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Vignette instead of a flat wash: lighter in the middle so the photo reads through, darker at the edges for text contrast and depth */
  background: radial-gradient(ellipse at center, rgba(var(--nova-bg-rgb), 0.15) 0%, rgba(var(--nova-bg-rgb), 0.35) 55%, rgba(var(--nova-bg-rgb), 0.75) 100%);
  z-index: -1;
}

.hero-content {
  z-index: 1;
  animation: fadeInUp 1s ease-out;
}

.hero-logo img {
  height: 180px;
  margin-bottom: 5px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  background: var(--nova-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Added pulsing glow animation */
  animation: novaGlowText 2s linear infinite alternate;
}

.hero-subtitle {
  font-size: 1.3rem;
  color: var(--nova-text-muted);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.btn-primary {
  background: var(--nova-gradient);
  background-size: 200% 200%;
  animation: novaPulse 4s linear infinite;
  color: #000000;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(var(--nova-bg-rgb), 0.3);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(var(--nova-gold-rgb), 0.4), 0 0 20px rgba(var(--nova-purple-rgb), 0.3);
  animation-duration: 2s;
}

.btn-secondary {
  background: transparent;
  color: var(--nova-gold);
  border: 2px solid var(--nova-gold);
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--nova-gold), var(--nova-purple));
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(var(--nova-gold-rgb), 0.3);
}

/* Added carousel styles for multiple hero images */
.hero-carousel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
  /* Slow Ken Burns zoom for a sense of depth/perspective while the slide is showing */
  transition: transform 9s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
}

.hero-slide.active img {
  transform: scale(1.12);
}

.carousel-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 2;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(var(--nova-gold-rgb), 0.4);
  border: 2px solid rgba(var(--nova-gold-rgb), 0.6);
  cursor: pointer;
  /* Updated transition timing for smoother dot animation */
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.dot.active,
.dot:hover {
  background: linear-gradient(135deg, var(--nova-gold), var(--nova-purple));
  box-shadow: 0 0 15px rgba(var(--nova-gold-rgb), 0.6);
  transform: scale(1.2);
}

.server-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--nova-gold);
  text-shadow: 0 0 10px rgba(var(--nova-gold-rgb), 0.3);
}

.stat-label {
  font-size: 1rem;
  color: var(--nova-text-muted);
}

/* Info Section */
.info-section {
  padding: 100px 0;
  background: linear-gradient(135deg, rgba(var(--nova-bg-rgb), 0.9), rgba(var(--nova-gold-rgb), 0.05));
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 60px;
  color: #ffffff;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.feature-card {
  background: rgba(var(--nova-bg-rgb), 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--nova-gold-rgb), 0.2);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(var(--nova-gold-rgb), 0.2), 0 0 30px rgba(var(--nova-purple-rgb), 0.1);
  border-color: rgba(var(--nova-purple-rgb), 0.4);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: var(--nova-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
  color: #000000;
  /* Added subtle pulse animation */
  animation: novaPulse 6s linear infinite;
  box-shadow: 0 0 20px rgba(var(--nova-gold-rgb), 0.3);
}

.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffffff;
}

.feature-card p {
  color: var(--nova-text-muted);
  line-height: 1.6;
}

/* Rules Section */
.rules-section {
  padding: 100px 0;
  background: var(--nova-bg-alt);
}

.rules-container {
  max-width: 800px;
  margin: 0 auto;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
  padding: 25px;
  background: rgba(var(--nova-bg-rgb), 0.8);
  border-radius: 15px;
  border-left: 4px solid var(--nova-gold);
  transition: all 0.3s ease;
  border: 1px solid rgba(var(--nova-gold-rgb), 0.1);
}

.rule-item:hover {
  transform: translateX(10px);
  box-shadow: 0 5px 20px rgba(var(--nova-gold-rgb), 0.2);
  border-left-color: var(--nova-purple);
}

.rule-number {
  background: var(--nova-gradient);
  color: #000000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(var(--nova-gold-rgb), 0.3);
}

.rule-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #ffffff;
}

.rule-content p {
  color: var(--nova-text-muted);
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Events Section */
.events-section {
  padding: 100px 0;
  background: linear-gradient(135deg, rgba(var(--nova-bg-rgb), 0.9), rgba(var(--nova-pink-rgb), 0.05));
}

.events-subtitle {
  text-align: center;
  color: var(--nova-text-muted);
  margin: -25px auto 40px;
  max-width: 640px;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.events-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--nova-text-muted);
  padding: 30px;
}

.event-card {
  background: rgba(var(--nova-bg-rgb), 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--nova-gold-rgb), 0.2);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.event-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(var(--nova-gold-rgb), 0.2), 0 0 30px rgba(var(--nova-purple-rgb), 0.1);
  border-color: rgba(var(--nova-purple-rgb), 0.4);
}

.event-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.event-card:hover .event-image img {
  transform: scale(1.1);
}

.event-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--nova-gradient);
  color: #000000;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(var(--nova-gold-rgb), 0.4);
}

.event-content {
  padding: 25px;
}

.event-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffffff;
}

.event-content p {
  color: var(--nova-text-muted);
  line-height: 1.6;
}

/* Footer */
.footer {
  background: var(--nova-bg);
  padding: 60px 0 20px;
  border-top: 1px solid rgba(var(--nova-gold-rgb), 0.3);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #ffffff;
}

.footer-section p {
  color: var(--nova-text-muted);
  line-height: 1.6;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section ul li a {
  color: var(--nova-text-muted);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-section ul li a:hover {
  color: var(--nova-purple);
  text-shadow: 0 0 5px rgba(var(--nova-purple-rgb), 0.3);
}

.footer-logo img {
  height: 60px;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-social-link {
  color: var(--nova-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.footer-social-link:hover {
  color: var(--nova-gold);
  text-shadow: 0 0 8px rgba(var(--nova-gold-rgb), 0.4);
}

.footer-qr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 5px;
  text-decoration: none;
  color: var(--nova-text-muted);
  font-size: 0.85rem;
}

.footer-qr img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 2px solid rgba(var(--nova-purple-rgb), 0.4);
  transition: all 0.3s ease;
}

.footer-qr:hover img {
  border-color: var(--nova-gold);
  box-shadow: 0 0 15px rgba(var(--nova-gold-rgb), 0.4);
}

.server-info p {
  margin-bottom: 8px;
  color: var(--nova-text-muted);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--nova-gold-rgb), 0.3);
  color: #666;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
    opacity: 0;
  }
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar-top {
    display: none;
  }

  .nav-content {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
  }

  .mobile-menu-btn {
    display: block;
  }

  /* Hasta que setupMobileMenu los mueve al desplegable, estos dos bloques
     cuelgan de .nav-content — y con los estilos de columna de más abajo se
     veían apilados y descolocados sobre el navbar durante la carga. Solo se
     enseñan una vez dentro del desplegable, que es su sitio en móvil. */
  .nav-content > .nav-links,
  .nav-content > .nav-actions {
    display: none;
  }

  .mobile-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    background: rgba(10, 10, 10, 0.98);
    padding: 20px 0;
    border-top: 1px solid rgba(var(--nova-purple-rgb), 0.3);
    z-index: 999;
  }

  .mobile-menu-dropdown.mobile-active {
    display: flex;
  }

  .nav-links {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
  }

  .nav-actions {
    width: 100%;
    justify-self: auto;
    justify-content: center;
  }

  body {
    padding-top: 76px;
  }

  .hero {
    padding-top: 180px;
  }

  .section-title {
    font-size: 2rem;
  }

  .feature-card,
  .rule-item,
  .event-content {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .feature-card,
  .rule-item,
  .event-content {
    padding: 20px;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  /* Sin height, las barras horizontales usaban la del navegador (unos
     15px) y engordaban la franja del menú de la tienda. */
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--nova-bg);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--nova-gold), var(--nova-purple));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--nova-purple), var(--nova-pink));
}

.store-btn {
  background: var(--nova-gradient);
  color: #000000;
  text-decoration: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  animation: novaPulse 4s linear infinite;
}

.store-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(var(--nova-gold-rgb), 0.4);
  animation-duration: 2s;
}

/* Tienda / Zona de Ventas Section */
.store-section {
  padding: 90px 0;
  background: linear-gradient(135deg, rgba(var(--nova-bg-rgb), 0.9), rgba(var(--nova-teal-rgb), 0.05));
}

.store-section .container {
  max-width: min(90%, 1800px);
}

.store-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.store-logo {
  height: 90px;
  filter: drop-shadow(0 0 15px rgba(var(--nova-purple-rgb), 0.4));
}

.store-header .section-title {
  margin-bottom: 0;
}

.store-subtitle {
  text-align: center;
  color: var(--nova-text-muted);
  margin-bottom: 50px;
}

.vip-hero {
  margin-top: -50px;
  margin-bottom: 50px;
}

.vip-hero-banner {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.vip-hero-banner:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 16px rgba(var(--nova-gold-rgb), 0.4));
}

.vip-hero-banner-img {
  display: block;
  /* El arte es alto (2.3:1) y a ancho completo empujaba el menú de
     categorías fuera de pantalla. Se limita la altura en vez de recortar:
     la imagen se escala entera y se centra, así no se pierde nada del
     diseño. max-width manda en pantallas angostas. */
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.vip-hero-category {
  display: none;
  background: linear-gradient(135deg, rgba(var(--nova-bg-rgb), 0.6), rgba(var(--nova-gold-rgb), 0.04));
  border: 1px solid rgba(var(--nova-gold-rgb), 0.25);
  border-radius: 20px;
  padding: 40px 32px;
}

body.vip-exclusive-mode .vip-hero-category {
  display: block;
  animation: fadeInUp 0.5s ease-out;
}

.vip-hero-intro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  text-align: left;
  margin-bottom: 36px !important;
}

.vip-permanent-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffe17a, #b8860b);
  color: #1a1200;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 999px;
  flex-shrink: 0;
}

.vip-hero-subsection {
  margin-bottom: 44px;
}

.vip-hero-subsection:last-child {
  margin-bottom: 0;
}

.vip-hero-subtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  text-align: left;
  margin-bottom: 20px !important;
}

.vip-hero-subtitle i {
  color: var(--nova-gold);
}

/* La imagen del producto abre el detalle de beneficios (reemplaza al viejo
   botón "Ver beneficios"), así que debe leerse como clicable. */
.product-detail-trigger {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.product-detail-trigger:hover,
.product-detail-trigger:focus-visible {
  transform: scale(1.04);
  filter: drop-shadow(0 0 14px rgba(var(--nova-gold-rgb), 0.45));
  outline: none;
}

.vip-back-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(var(--nova-gold-rgb), 0.4);
  color: var(--nova-text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.vip-back-btn:hover {
  border-color: var(--nova-gold);
  color: #ffffff;
}

/* Modo tienda VIP exclusiva: oculta la tienda normal y solo deja ver los
   productos Donador VIP + el carrito, activado al hacer clic en el banner. */
body.vip-exclusive-mode .store-catalog {
  display: none;
}

body.vip-exclusive-mode .vip-hero-banner {
  display: none;
}

body.vip-exclusive-mode .vip-back-btn {
  display: inline-flex;
}

.store-page {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.store-main {
  flex: 1;
  min-width: 0;
  margin-right: 308px;
}

.store-catalog {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Una sola fila en todo ancho: en cuanto las pestañas + "Recargas" no
   caben, el propio menú se vuelve una barra deslizable, sin depender de un
   breakpoint fijo. Si caben (pantallas anchas) no aparece ninguna barra. */
.store-menu {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  position: sticky;
  /* El navbar mide distinto en escritorio, tablet y celular, así que su
     altura la mide script.js y la deja en --altura-navbar. Fijarlo a un
     número concreto dejaba el menú metido debajo del navbar en móvil. */
  top: calc(var(--altura-navbar, 110px) + 8px);
  z-index: 5;
  background: rgba(var(--nova-bg-rgb), 0.75);
  backdrop-filter: blur(8px);
  /* Franja delgada a propósito: al quedarse fija arriba, cada píxel de más
     es catálogo que el jugador deja de ver. */
  padding: 7px 8px;
  border-radius: 14px;
  border: 1px solid rgba(var(--nova-purple-rgb), 0.25);
}

/* Su propia barra de scroll, más fina todavía que la general. */
.store-menu::-webkit-scrollbar {
  height: 5px;
}

.store-menu::-webkit-scrollbar-track {
  background: transparent;
}

.store-menu .store-tab {
  flex: 0 0 auto;
  /* Más bajas que las pestañas sueltas: aquí van dentro de una franja fija
     y el alto de esa franja es alto que se le quita al catálogo. */
  padding: 9px 14px;
  gap: 8px;
  border-radius: 10px;
}

/* Buscador del catálogo. Vive justo debajo del menú de categorías y, mientras
   tiene texto, manda sobre las pestañas: se muestran todas las secciones y se
   ocultan las fichas que no coinciden. */
.store-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 14px 0 4px;
}

.store-search-icon {
  position: absolute;
  left: 16px;
  color: rgba(var(--nova-purple-rgb), 0.75);
  pointer-events: none;
  font-size: 0.95rem;
}

.store-search-input {
  width: 100%;
  padding: 13px 44px 13px 44px;
  border-radius: 14px;
  border: 1px solid rgba(var(--nova-purple-rgb), 0.25);
  background: rgba(var(--nova-bg-rgb), 0.75);
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.store-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.store-search-input:focus {
  outline: none;
  border-color: rgba(var(--nova-purple-rgb), 0.7);
  box-shadow: 0 0 0 3px rgba(var(--nova-purple-rgb), 0.18);
}

/* La X nativa de <input type="search"> se oculta: usamos la nuestra, que
   además devuelve el foco al campo. */
.store-search-input::-webkit-search-cancel-button {
  display: none;
}

.store-search-clear {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(var(--nova-purple-rgb), 0.18);
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}

.store-search-clear:hover {
  background: rgba(var(--nova-purple-rgb), 0.35);
}

.store-search-status {
  margin: 10px 2px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
}

/* Con búsqueda activa, .active deja de decidir qué sección se ve: las manda
   el buscador marcando cada ficha y cada sección con [hidden]. */
.store-items.searching .store-category {
  display: block;
}

.store-items.searching .store-category[hidden],
.store-items.searching .price-card[hidden],
.store-items.searching .rank-card[hidden],
.store-items.searching .deluxe-card[hidden] {
  display: none;
}

.store-items {
  min-width: 0;
}

.store-cart {
  position: fixed;
  top: 120px;
  right: 0;
  bottom: 0;
  width: 300px;
  background: rgba(var(--nova-bg-rgb), 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--nova-gold-rgb), 0.35);
  border-right: none;
  border-bottom: none;
  border-radius: 15px 0 0 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  z-index: 900;
}

.store-cart.pulse {
  border-color: rgba(var(--nova-gold-rgb), 0.9);
  box-shadow: 0 0 0 3px rgba(var(--nova-gold-rgb), 0.25);
}

.store-cart-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--nova-purple-rgb), 0.25);
}

.store-cart-header i {
  color: var(--nova-gold);
  font-size: 1.1rem;
}

.store-cart-close {
  display: none;
  background: none;
  border: none;
  color: var(--nova-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
}

.store-cart-close:hover {
  color: #ffffff;
}

.cart-fab {
  display: none;
}

.cart-backdrop {
  display: none;
}

.store-cart-header h3 {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.store-cart-count {
  background: var(--nova-gradient);
  color: #000000;
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.store-cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--nova-text-muted);
  padding: 30px 10px;
  font-size: 0.9rem;
}

.store-cart-empty i {
  display: block;
  font-size: 1.8rem;
  color: rgba(var(--nova-purple-rgb), 0.5);
  margin-bottom: 12px;
}

.store-cart-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 14px;
}

.store-cart-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--nova-purple-rgb), 0.2);
  border-radius: 10px;
  padding: 10px 12px;
}

.store-cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.store-cart-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-cart-item-price {
  font-size: 0.75rem;
  color: var(--nova-text-muted);
}

.store-cart-item-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-qty-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(var(--nova-purple-rgb), 0.4);
  background: rgba(var(--nova-bg-rgb), 0.9);
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.cart-qty-btn:hover {
  border-color: var(--nova-gold);
  color: var(--nova-gold);
}

.cart-qty-value {
  min-width: 16px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
}

.cart-item-remove {
  background: none;
  border: none;
  color: rgba(255, 90, 90, 0.7);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px;
  transition: color 0.2s ease;
}

.cart-item-remove:hover {
  color: #ff5a5a;
}

.store-cart-footer {
  border-top: 1px solid rgba(var(--nova-purple-rgb), 0.25);
  padding-top: 14px;
}

.store-cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 8px;
}

.store-cart-total strong {
  color: var(--nova-gold);
  font-size: 1.15rem;
}

.store-cart-balance {
  font-size: 0.8rem;
  color: var(--nova-text-muted);
  margin-bottom: 12px;
}

.store-cart-balance a {
  color: var(--nova-gold);
}

.store-cart-balance.insufficient {
  color: #ff5a5a;
}

.store-cart-checkout-btn {
  width: 100%;
  background: var(--nova-gradient);
  color: #000000;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

.store-cart-checkout-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.store-cart-checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.store-cart-clear-btn {
  width: 100%;
  background: none;
  border: 1px solid rgba(var(--nova-purple-rgb), 0.3);
  color: var(--nova-text-muted);
  border-radius: 10px;
  padding: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.store-cart-clear-btn:hover {
  border-color: rgba(255, 90, 90, 0.5);
  color: #ff5a5a;
}

@media (max-width: 1200px) {
  .store-cart {
    width: 260px;
  }

  .store-main {
    margin-right: 268px;
  }
}

.store-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: rgba(var(--nova-bg-rgb), 0.8);
  border: 1px solid rgba(var(--nova-purple-rgb), 0.3);
  color: var(--nova-text-muted);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.store-tab i {
  width: 18px;
  text-align: center;
  color: var(--nova-gold);
}

.store-tab:hover {
  border-color: rgba(var(--nova-pink-rgb), 0.5);
  color: #ffffff;
}

.store-tab.active {
  background: var(--nova-gradient);
  border-color: transparent;
  color: #000000;
}

.store-tab.active i {
  color: #000000;
}

/* Botón "Recargar GGcoins": mismo tamaño que las pestañas de categoría
   pero con acento dorado, para distinguirlo como una acción y no como una
   categoría más. Va justo después de "Todos" para que se vea sin
   necesidad de scrollear el menú (antes, al final, quedaba oculto). */
.store-tab-recharge {
  border-color: rgba(var(--nova-gold-rgb), 0.5);
  color: var(--nova-gold);
}

.store-tab-recharge:hover {
  border-color: var(--nova-gold);
  background: rgba(var(--nova-gold-rgb), 0.12);
  color: var(--nova-gold);
}

/* En tablet y celular el menú sí se fija: es la navegación de toda la
   tienda y perderla al bajar obliga a subir del todo para cambiar de
   categoría. Lo que sí se hace es adelgazarlo, que era el motivo real de
   haberlo soltado antes — comía demasiada altura útil. */
@media (max-width: 1100px) {
  .store-menu {
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
  }

  .store-menu .store-tab {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
}

.store-category {
  display: none;
}

.store-category.active {
  display: block;
  animation: fadeInUp 0.5s ease-out;
}

/* Compact price list (kits, protections, cosmetics). Base primero y
   siempre antes de sus @media: si va después, gana por orden de cascada
   y anula el responsive en cualquier ancho. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
}

@media (max-width: 1024px) {
  .price-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .store-page {
    flex-direction: column;
    /* align-items:flex-start (base) deja que .store-main crezca al ancho
       de su contenido en vez del contenedor — sin esto, .store-menu con
       overflow-x:auto nunca llega a recortar/scrollear y empuja toda la
       página a un ancho enorme (scroll horizontal en todo el sitio). */
    align-items: stretch;
  }

  .store-main {
    margin-right: 0;
    min-width: 0;
  }

  .price-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .store-cart {
    top: 0;
    right: 0;
    bottom: 0;
    width: 88%;
    max-width: 360px;
    border-radius: 0;
    border: none;
    border-left: 1px solid rgba(var(--nova-gold-rgb), 0.35);
    padding-top: max(20px, env(safe-area-inset-top));
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s ease;
    z-index: 1200;
  }

  .store-cart.mobile-open {
    transform: translateX(0);
    visibility: visible;
  }

  .store-cart-close {
    display: block;
    margin-left: auto;
  }

  .cart-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--nova-gradient);
    color: #000000;
    border: none;
    font-size: 1.3rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    z-index: 950;
    cursor: pointer;
  }

  .cart-fab-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff3b5c;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--nova-bg);
  }

  .cart-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .cart-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }
}

.store-category-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 25px;
  padding-left: 15px;
  border-left: 4px solid var(--nova-purple);
}

/* Fichas de información de productos (informacion.html) */
.info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-item {
  background: rgba(var(--nova-bg-rgb), 0.8);
  border: 1px solid rgba(var(--nova-purple-rgb), 0.2);
  border-radius: 14px;
  padding: 4px 22px;
  transition: border-color 0.3s ease;
}

.info-item[open] {
  border-color: rgba(var(--nova-gold-rgb), 0.4);
}

.info-item-summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.info-item-summary::-webkit-details-marker {
  display: none;
}

.info-item-summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--nova-gold);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.info-item[open] .info-item-summary::after {
  transform: rotate(180deg);
}

.info-item-body {
  padding: 4px 0 20px;
  border-top: 1px solid rgba(var(--nova-purple-rgb), 0.2);
}

.info-line {
  color: var(--nova-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 8px 0;
}

.info-line-head {
  color: var(--nova-gold);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 14px 0 2px;
}

.info-divider {
  border: none;
  border-top: 1px solid rgba(var(--nova-gold-rgb), 0.2);
  margin: 16px 0;
}

/* ============================================================
   Paquetes Deluxe Permanentes: tarjetas con acento de color por
   paquete, icono circular y los beneficios listados dentro de la
   propia tarjeta (no hace falta abrir el modal para compararlos).
   Cada variante solo cambia --deluxe-accent.
   ============================================================ */
.deluxe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.deluxe-card {
  --deluxe-accent: var(--nova-gold);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  background: linear-gradient(170deg, rgba(var(--nova-bg-rgb), 0.95), rgba(0, 0, 0, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--deluxe-accent);
  border-radius: 16px;
  padding: 26px 20px 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.deluxe-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.deluxe-card--inmortal {
  --deluxe-accent: #3ddc84;
}

.deluxe-card--absoluto {
  --deluxe-accent: #c86bff;
}

.deluxe-card--supremo {
  --deluxe-accent: #ff9f43;
}

.deluxe-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--deluxe-accent);
  color: #14101f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.deluxe-icon {
  width: 128px;
  height: 128px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 3px solid var(--deluxe-accent);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.deluxe-icon img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.deluxe-name {
  margin: 0 0 16px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.deluxe-benefits {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  width: 100%;
}

.deluxe-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--deluxe-accent);
  border-radius: 6px;
  padding: 8px 11px;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* El check se dibuja con ::before para no repetir un <i> en cada <li>. */
.deluxe-benefits li::before {
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--deluxe-accent);
  font-size: 0.72rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.deluxe-benefits strong {
  color: var(--deluxe-accent);
}

.deluxe-saving {
  width: 100%;
  text-align: center;
  color: var(--nova-text-muted);
  font-size: 0.76rem;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.deluxe-price {
  color: var(--nova-gold);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
}

.deluxe-price span {
  font-size: 1.1rem;
}

.deluxe-card .rank-buy-btn {
  margin-top: auto;
}

@media (max-width: 1100px) {
  .deluxe-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .deluxe-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .deluxe-icon {
    width: 104px;
    height: 104px;
  }
}

/* Rank tiers */
.rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

/* En celular los rangos van de a uno. Antes se forzaban 2 columnas para
   recorrer la tienda igual que el resto de categorías, pero la tarjeta de
   rango lleva imagen grande, precio tachado, badge y botón: a media
   pantalla todo eso queda ilegible. Los rangos son los productos caros,
   conviene que se vean. */
@media (max-width: 700px) {
  .rank-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.rank-card {
  position: relative;
  min-width: 0;
  background: rgba(var(--nova-bg-rgb), 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--nova-purple-rgb), 0.2);
  border-radius: 15px;
  padding: 30px 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.rank-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(var(--nova-purple-rgb), 0.2), 0 0 30px rgba(var(--nova-pink-rgb), 0.1);
  border-color: rgba(var(--nova-pink-rgb), 0.4);
}

.rank-card-featured {
  border-color: rgba(var(--nova-gold-rgb), 0.5);
}

/* Comprar GGcoins — estilo "luxury" inspirado en tiendas de moneda virtual
   tipo League of Legends: tarjetas casi negras, borde y brillo dorados. */
.gilcoin-luxury-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Mismo corte que el menú: en tablet (vertical y horizontal) van 2
   columnas. A 1024px las 4 columnas dejaban tarjetas de ~119px. */
@media (max-width: 1100px) {
  .gilcoin-luxury-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .gilcoin-luxury-grid {
    grid-template-columns: 1fr;
  }
}

/* Tarjeta suelta al final de una rejilla de dos columnas.
   Con 3 ítems, el tercero quedaba pegado a la izquierda y con medio ancho
   de hueco vacío al lado. Ahora ocupa la fila entera y se centra, pero
   conserva el ancho de una tarjeta normal para no verse gigante.
   :last-child:nth-child(odd) = es la última y va en posición impar, o sea
   en la columna 1 sin pareja. El ancho es la mitad menos medio hueco, que
   es exactamente lo que mide una columna. */
@media (max-width: 900px) {
  .price-grid > .price-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 10px); /* gap entre columnas: 20px */
    margin-inline: auto;
  }
}

/* Estas dos solo mientras siguen en dos columnas: por debajo pasan a una
   sola y entonces no hay nada que centrar. */
@media (min-width: 521px) and (max-width: 1100px) {
  .gilcoin-luxury-grid > .gilcoin-luxury-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 11px); /* gap: 22px */
    margin-inline: auto;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .deluxe-grid > .deluxe-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 12px); /* gap: 24px */
    margin-inline: auto;
  }
}

.gilcoin-luxury-card {
  position: relative;
  min-width: 0;
  background: linear-gradient(165deg, #14110a, #050403);
  border: 1px solid rgba(255, 199, 79, 0.3);
  border-radius: 14px;
  padding: 18px 14px 16px;
  text-align: center;
  overflow: hidden;
  transition: all 0.3s ease;
}

.gilcoin-luxury-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -10%, rgba(255, 199, 79, 0.15), transparent 60%);
  pointer-events: none;
}

.gilcoin-luxury-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 199, 79, 0.7);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 199, 79, 0.15);
}

.gilcoin-luxury-featured {
  border-color: rgba(255, 199, 79, 0.8);
  box-shadow: 0 0 25px rgba(255, 199, 79, 0.15);
}

.gilcoin-luxury-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #ffe17a, #b8860b);
  color: #1a1200;
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 16px 6px 14px;
  border-bottom-right-radius: 12px;
}

/* Bono de valor del paquete (cuánto rinde más por dólar que el más chico).
   Va en la esquina opuesta al badge "Popular" para que puedan convivir. */
.gilcoin-luxury-bonus {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(61, 220, 132, 0.16);
  border: 1px solid rgba(61, 220, 132, 0.5);
  border-top: none;
  border-right: none;
  color: #3ddc84;
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-bottom-left-radius: 12px;
}

.gilcoin-luxury-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #3a2a06;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #d4a017 55%, #8a6200);
  box-shadow: 0 0 25px rgba(255, 199, 79, 0.35);
  overflow: hidden;
}

.gilcoin-luxury-icon.gilcoin-luxury-icon--img {
  width: 140px;
  height: 140px;
  border-radius: 16px;
  background: none;
  box-shadow: none;
}

.gilcoin-luxury-icon--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 100%);
  mask-image: radial-gradient(circle, #000 58%, transparent 100%);
}

/* Coronas del Donador VIP. Son PNG con fondo transparente, así que no
   llevan ni el recorte circular ni el degradado dorado del icono base:
   la corona se muestra entera y el brillo la acompaña por fuera. */
.gilcoin-luxury-icon.gilcoin-luxury-icon--crown {
  width: clamp(112px, 13vw, 150px);
  height: clamp(112px, 13vw, 150px);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.gilcoin-luxury-icon--crown img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* Cada nivel se ilumina con el color de su gema. */
.gilcoin-luxury-icon--crown[data-detail="donador-vip-lv10"] img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px rgba(214, 138, 50, 0.4));
}
.gilcoin-luxury-icon--crown[data-detail="donador-vip-lv14"] img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(74, 200, 96, 0.42));
}
.gilcoin-luxury-icon--crown[data-detail="donador-vip-lv18"] img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 18px rgba(96, 176, 255, 0.45));
}
.gilcoin-luxury-icon--crown[data-detail="donador-vip-lv22"] img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(178, 94, 232, 0.5));
}

.gilcoin-luxury-icon--crown:hover img,
.gilcoin-luxury-icon--crown:focus-visible img {
  transform: translateY(-4px) scale(1.05);
}

.gilcoin-luxury-icon--crown:focus-visible {
  outline: 2px solid rgba(255, 199, 79, 0.9);
  outline-offset: 6px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .gilcoin-luxury-icon--crown img {
    transition: none;
  }
  .gilcoin-luxury-icon--crown:hover img,
  .gilcoin-luxury-icon--crown:focus-visible img {
    transform: none;
  }
}

.gilcoin-luxury-name {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.gilcoin-luxury-total {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffd75e;
  text-shadow: 0 0 15px rgba(255, 215, 90, 0.4);
  margin-bottom: 12px;
}

.gilcoin-luxury-total span {
  font-size: 0.95rem;
}

.gilcoin-luxury-breakdown {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
  margin: 4px 0 20px;
}

.gilcoin-opening-banner {
  text-align: center;
  color: var(--nova-teal);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.gilcoin-luxury-discount-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ff7a5c, #c0392b);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(192, 57, 43, 0.4);
}

.gilcoin-luxury-price-compare {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.gilcoin-luxury-price-old {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  font-size: 0.85rem;
}

.gilcoin-luxury-price-new {
  color: #ffd75e;
  font-weight: 700;
  font-size: 1.05rem;
}

.gilcoin-luxury-price-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gilcoin-luxury-buy-btn {
  background: linear-gradient(160deg, #4a3616, #241a08);
  border: 1px solid rgba(255, 199, 79, 0.5);
  color: #ffd75e;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.75rem;
  padding: 9px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gilcoin-luxury-buy-btn:hover {
  background: linear-gradient(160deg, #5c431c, #2f220a);
  border-color: rgba(255, 199, 79, 0.9);
}

.vip-product-buy-btn {
  width: 100%;
  background: linear-gradient(135deg, #ffe17a, #b8860b);
  border: none;
  color: #1a1200;
  font-weight: 800;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vip-product-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 199, 79, 0.4);
}

.rank-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nova-gradient);
  color: #000000;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.rank-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: var(--nova-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #000000;
  overflow: hidden;
}

.rank-icon.rank-icon--img {
  width: 100%;
  max-width: 190px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: none;
}

.rank-icon--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 0 20px rgba(var(--nova-gold-rgb), 0.3);
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 100%);
  mask-image: radial-gradient(circle, #000 58%, transparent 100%);
}

.rank-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.rank-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nova-gold);
  text-shadow: 0 0 10px rgba(var(--nova-gold-rgb), 0.3);
  margin-bottom: 20px;
}

.rank-price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nova-text-muted);
  text-shadow: none;
}

.rank-buy-btn {
  display: block;
  width: 100%;
  background: var(--nova-gradient);
  color: #000000;
  text-decoration: none;
  font-weight: 700;
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 0;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rank-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(var(--nova-gold-rgb), 0.4);
}

.price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-width: 0;
  background: rgba(var(--nova-bg-rgb), 0.8);
  border: 1px solid rgba(var(--nova-purple-rgb), 0.15);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--nova-pink-rgb), 0.4);
  box-shadow: 0 15px 25px rgba(var(--nova-purple-rgb), 0.2);
}

.price-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--nova-gradient);
  color: #000000;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: visible;
}

.price-icon.price-icon--img {
  width: 100%;
  max-width: 230px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 16px;
  background: none;
  overflow: visible;
}

.price-icon--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 100%);
  mask-image: radial-gradient(circle, #000 58%, transparent 100%);
}

/* Insignia de descuento reposicionada sobre la esquina del icono/imagen del
   producto (antes iba en línea junto al precio tachado). */
.price-icon .store-price-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(192, 57, 43, 0.4);
}

.price-icon-azul {
  background: #3a86ff;
  color: #ffffff;
}

.price-icon-agua {
  background: var(--nova-teal);
  color: #ffffff;
}

.price-icon-fuego {
  background: linear-gradient(135deg, #fb8b24, #d32f2f);
  color: #ffffff;
}

.price-icon-rosado {
  background: var(--nova-pink);
  color: #ffffff;
}

.price-icon-negro {
  background: #2a2a2a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.price-name {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.3;
}

/* Precio arriba y botón debajo ocupando todo el ancho. Antes iban lado a
   lado con el botón como ícono de carrito de 40px; se cambió a texto
   ("Añadir" / "Recargar") para que todas las categorías digan lo mismo que
   las tarjetas de rango y no haya que adivinar qué hace el ícono. */
.price-bottom-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
  width: 100%;
}

.price-value {
  display: inline-block;
  color: var(--nova-gold);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  white-space: nowrap;
}

.price-buy-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 25px;
  background: var(--nova-gradient);
  color: #000000;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 9px 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.price-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(var(--nova-gold-rgb), 0.4);
}

/* En celular la tarjeta queda en ~145px, así que se recorta el padding
   para ganar ancho útil y se achica el botón. La fila ya se apila sola. */
@media (max-width: 700px) {
  .price-card {
    padding: 14px 10px;
  }

  .price-bottom-row {
    gap: 8px;
  }

  .price-value {
    font-size: 0.95rem;
    white-space: normal;
  }

  .price-buy-btn {
    font-size: 0.82rem;
    padding: 8px 0;
  }
}

/* Aviso "añadido al carrito" (showToast en script.js) */
.novapixel-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 21000;
  display: flex;
  align-items: center;
  gap: 10px;
  /* max-content evita que el aviso se parta en varias líneas cuando cabe
     entero; el max-width lo mantiene dentro de la pantalla si no cabe. */
  width: max-content;
  max-width: calc(100vw - 40px);
  padding: 13px 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--nova-bg), var(--nova-bg-alt));
  border: 1px solid rgba(var(--nova-gold-rgb), 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.novapixel-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.novapixel-toast i {
  color: var(--nova-gold);
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Sobre el botón flotante del carrito, que ocupa la esquina inferior. */
@media (max-width: 900px) {
  .novapixel-toast {
    bottom: 96px;
  }
}

/* Checkout Modal */
.checkout-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 20000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.checkout-modal-overlay.active {
  display: flex;
}

.checkout-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* Sin esto, un modal más alto que la pantalla se desborda por arriba y
     por abajo del overlay centrado y queda imposible de recorrer (se veía
     en "Recargas" en celular, con los paquetes en una sola columna). */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  background: linear-gradient(160deg, var(--nova-bg), var(--nova-bg-alt));
  border: 1px solid rgba(var(--nova-gold-rgb), 0.3);
  border-radius: 16px;
  padding: 30px 25px 25px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: fadeInUp 0.25s ease-out;
}

.checkout-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--nova-text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.checkout-modal-close:hover {
  color: var(--nova-gold);
}

.checkout-modal-title {
  color: var(--nova-gold);
  margin: 0 0 20px;
  font-size: 1.3rem;
  text-align: center;
}

.checkout-modal-product {
  color: #ffffff;
  font-weight: 600;
  margin: 0 0 18px;
}

.checkout-modal-label {
  display: block;
  color: var(--nova-text-muted);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.checkout-nick-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

/* El avatar no reserva sitio mientras no hay ninguno que enseñar: si lo
   reservara, el campo del nick aparecería desplazado a la derecha respecto
   a los demás y parecería descuadrado. Crece con transición al cargarse. */
.checkout-nick-avatar {
  width: 0;
  height: 40px;
  border-radius: 8px;
  background: rgba(var(--nova-bg-rgb), 0.9);
  border: none;
  flex-shrink: 0;
  image-rendering: pixelated;
  opacity: 0;
  transition: width 0.2s ease, margin-right 0.2s ease, opacity 0.2s ease;
}

.checkout-nick-avatar.visible {
  width: 40px;
  margin-right: 10px;
  border: 1px solid rgba(var(--nova-purple-rgb), 0.4);
  opacity: 1;
}

.checkout-modal-input {
  flex: 1;
  width: 100%;
  /* Sin este margen cada campo quedaba pegado a la etiqueta del siguiente
     y el formulario se leía como un bloque apretado. */
  margin-bottom: 16px;
  background: rgba(var(--nova-bg-rgb), 0.9);
  border: 1px solid rgba(var(--nova-purple-rgb), 0.4);
  border-radius: 10px;
  padding: 12px 14px;
  color: #ffffff;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

/* Cuando el campo va dentro de un envoltorio (la fila del avatar o el ojo
   de la contraseña), el margen lo lleva el envoltorio: si lo llevaran los
   dos, el hueco se duplicaría. */
.checkout-nick-row .checkout-modal-input,
.password-field .checkout-modal-input {
  margin-bottom: 0;
}

.checkout-modal-input:focus {
  outline: none;
  border-color: var(--nova-gold);
}

/* Chrome pinta de blanco lo que autocompleta y no deja cambiarlo con
   background-color; el truco es una sombra interior enorme del color que
   toca. La transición absurda evita el fogonazo blanco del primer frame. */
.checkout-modal-input:-webkit-autofill,
.checkout-modal-input:-webkit-autofill:hover,
.checkout-modal-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px rgba(var(--nova-bg-rgb), 0.95) inset;
  caret-color: #ffffff;
  transition: background-color 9999s ease-out;
}

/* Ver la contraseña. El envoltorio y el botón los inyecta script.js sobre
   cada input[type=password] de los modales; es inline-block para ocupar el
   mismo hueco que ocupaba el campo suelto y no descuadrar el formulario. */
.password-field {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 16px;
}
.password-field .checkout-modal-input {
  display: block;
  padding-right: 46px;
}
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nova-text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 0 10px 10px 0;
  transition: color 0.2s ease;
}
.password-toggle:hover {
  color: var(--nova-gold);
}
.password-toggle:focus-visible {
  outline: 2px solid var(--nova-gold);
  outline-offset: -2px;
  color: var(--nova-gold);
}

.checkout-modal-hint {
  color: var(--nova-text-muted);
  font-size: 0.8rem;
  margin: 0 0 12px;
  line-height: 1.5;
  text-align: center;
}

/* Los enlaces del modal ("Regístrate", "¿Olvidaste tu contraseña?") salían
   con el azul por defecto del navegador —y morado al visitarlos—, ilegible
   sobre el fondo oscuro. Van en el dorado de la marca. */
.checkout-modal-hint a,
.checkout-modal-hint a:visited {
  color: var(--nova-gold);
  font-weight: 600;
  text-decoration: none;
}

.checkout-modal-hint a:hover,
.checkout-modal-hint a:focus-visible {
  text-decoration: underline;
}

/* El enlace "Inicia sesión" que cierra el formulario respira un poco más:
   es el final del bloque, no una nota más pegada al botón. */
.checkout-modal-submit + .checkout-modal-hint {
  margin-top: 16px;
}

.checkout-modal-error {
  color: #ff6b6b;
  font-size: 0.85rem;
  margin: 0 0 12px;
  min-height: 1em;
  display: none;
  text-align: center;
}

.checkout-modal-success {
  color: var(--nova-teal);
  font-size: 0.85rem;
  margin: 0 0 12px;
  min-height: 1em;
  display: none;
}

.checkout-modal-success.active {
  display: block;
}

.checkout-modal-error.active {
  display: block;
}

/* "Continuar con Google". Blanco sobre fondo oscuro a propósito: son las
   guías de marca de Google y, además, es el botón que la gente reconoce de
   otros sitios sin tener que leerlo. */
.google-signin-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  padding: 12px 0;
  margin-bottom: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 25px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.google-signin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.google-signin-btn:disabled {
  opacity: 0.65;
  cursor: default;
  transform: none;
}

/* Sin esto el atributo [hidden] no sirve de nada: el display:flex de arriba
   gana al display:none que el navegador aplica por defecto a [hidden], y el
   botón se seguía viendo (y pulsando) aunque Google no esté configurado. */
.google-signin-btn[hidden],
.auth-divider[hidden] {
  display: none;
}

.google-signin-logo {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Separador "o" entre el botón de Google y el formulario de siempre. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.checkout-modal-submit {
  width: 100%;
  background: var(--nova-gradient);
  color: #000000;
  font-weight: 700;
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 0;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkout-modal-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(var(--nova-gold-rgb), 0.4);
}

.checkout-modal-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.checkout-modal-buyer {
  color: #ffffff;
}

.checkout-modal-price {
  color: var(--nova-gold);
  font-weight: 600;
  margin: 4px 0;
}

.checkout-modal-balance {
  color: var(--nova-text-muted);
  font-size: 0.9rem;
  margin: 0 0 14px;
}

.checkout-modal-balance a {
  color: var(--nova-gold);
}

/* Modal "Ver beneficios" (product-detail-modal), reutiliza .checkout-modal */
.product-detail-modal {
  max-width: 460px;
  text-align: center;
}

.product-detail-image {
  width: 130px;
  height: 130px;
  margin: 0 auto 14px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nova-gradient);
  color: #000000;
  font-size: 2.2rem;
}

.product-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.product-detail-price {
  color: var(--nova-gold);
  font-weight: 700;
  font-size: 1.1rem;
}

.product-detail-duration {
  color: var(--nova-text-muted);
  font-size: 0.85rem;
  border: 1px solid rgba(var(--nova-purple-rgb), 0.4);
  border-radius: 999px;
  padding: 3px 12px;
}

/* Descripción del producto: va entre el precio y la lista de beneficios, y
   se oculta sola en los productos a los que todavía no se les ha escrito. */
.product-detail-description {
  margin: 0 0 18px;
  text-align: left;
  color: var(--nova-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.product-detail-benefits {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  text-align: left;
  max-height: 320px;
  overflow-y: auto;
}

.product-detail-benefits li {
  color: var(--nova-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--nova-purple-rgb), 0.15);
}

.product-detail-benefits li:last-child {
  border-bottom: none;
}

.checkout-modal-balance.insufficient strong {
  color: #ff6b6b;
}

/* Modal "Recargar GGcoins": más ancho que el checkout-modal base para que
   quepa la grilla de paquetes cómodamente. */
/* Columna flex para que solo scrollee la grilla de paquetes: así el título
   y el botón de cerrar quedan siempre a la vista, aunque la lista sea larga
   (en celular son 8 paquetes en una sola columna). */
.gilcoin-recharge-modal {
  max-width: 820px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.gilcoin-recharge-modal .gilcoin-luxury-grid {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding-right: 4px;
  /* Con altura definida (flex + overflow) las filas se reparten el alto
     disponible y aplastan las tarjetas — y como .gilcoin-luxury-card tiene
     overflow:hidden su alto mínimo es 0, así que nada las frena. start +
     max-content las deja a su tamaño real y hace scrollear el contenedor. */
  align-content: start;
  grid-auto-rows: max-content;
}

.gilcoin-recharge-modal .checkout-modal-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gilcoin-recharge-modal .checkout-modal-title i {
  color: var(--nova-gold);
}

.gilcoin-recharge-modal .checkout-modal-hint {
  margin: 0 0 22px;
}

/* Mini tutorial de 3 pasos, fijo entre el texto de arriba y la grilla que
   scrollea: solo texto y un número, para que quepa en una línea y no le
   quite espacio a los paquetes (que ya van justos en celular). */
.gilcoin-recharge-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex-shrink: 0;
}

.gilcoin-recharge-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nova-text-muted);
  font-size: 0.85rem;
}

.gilcoin-recharge-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--nova-gold-rgb), 0.15);
  border: 1px solid rgba(var(--nova-gold-rgb), 0.5);
  color: var(--nova-gold);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Botones de compra cuando el saldo de la cuenta no alcanza para ESE ítem:
   se ven distintos (borde dorado, sin relleno) y al hacer clic abren el
   modal de recarga en vez de agregar al carrito. */
.rank-buy-btn.needs-recharge,
.vip-product-buy-btn.needs-recharge {
  background: none;
  border: 2px solid var(--nova-gold);
  color: var(--nova-gold);
  box-shadow: none;
}

.price-buy-btn.needs-recharge {
  background: none;
  border: 2px solid var(--nova-gold);
  color: var(--nova-gold);
}

.price-buy-btn.needs-recharge:hover,
.rank-buy-btn.needs-recharge:hover,
.vip-product-buy-btn.needs-recharge:hover {
  background: rgba(var(--nova-gold-rgb), 0.15);
  transform: none;
  box-shadow: none;
}

/* Selector "30 días" / "Indefinido" dentro de la pestaña Rangos */
.rank-duration-toggle {
  display: inline-flex;
  gap: 6px;
  background: rgba(var(--nova-bg-rgb), 0.8);
  border: 1px solid rgba(var(--nova-purple-rgb), 0.3);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 26px;
}

.rank-duration-btn {
  background: none;
  border: none;
  color: var(--nova-text-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rank-duration-btn:hover {
  color: #ffffff;
}

.rank-duration-btn.active {
  background: var(--nova-gradient);
  color: #000000;
}

.rank-duration-panel {
  display: none;
}

.rank-duration-panel.active {
  display: block;
  animation: fadeInUp 0.35s ease-out;
}

/* Nav account area */
.nav-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-account-login-btn {
  background: none;
  border: 1px solid rgba(var(--nova-gold-rgb), 0.5);
  color: var(--nova-gold);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 18px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-account-login-btn:hover {
  background: rgba(var(--nova-gold-rgb), 0.1);
}

.nav-account-user {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nova-text-muted);
  font-size: 0.9rem;
}

.nav-account-user strong {
  color: #ffffff;
}

.nav-gilcoin-balance {
  color: var(--nova-gold);
  font-weight: 700;
}

.nav-account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  image-rendering: pixelated;
  border: 1px solid rgba(var(--nova-purple-rgb), 0.4);
}

.nav-account-user a,
.nav-account-user button {
  background: none;
  border: none;
  color: var(--nova-text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.nav-account-user a:hover,
.nav-account-user button:hover {
  color: var(--nova-gold);
}

@media (max-width: 768px) {
  .nav-account {
    flex-direction: column;
    gap: 12px;
  }
}

.reset-password-box {
  max-width: 420px;
  margin: 20px auto 0;
  background: linear-gradient(160deg, var(--nova-bg), var(--nova-bg-alt));
  border: 1px solid rgba(var(--nova-gold-rgb), 0.3);
  border-radius: 16px;
  padding: 30px 25px;
}

/* Mis Compras */
.purchases-empty {
  text-align: center;
  color: var(--nova-text-muted);
  padding: 40px 0;
}

.purchases-empty a {
  color: var(--nova-gold);
}

.purchases-login-btn {
  max-width: 220px;
  margin: 16px auto 0;
}

.purchases-table {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  background: rgba(var(--nova-bg-rgb), 0.8);
  border: 1px solid rgba(var(--nova-purple-rgb), 0.15);
  border-radius: 12px;
  overflow: hidden;
}

.purchases-table th,
.purchases-table td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(var(--nova-purple-rgb), 0.15);
}

.purchases-table th {
  color: var(--nova-gold);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.purchases-table td {
  color: #ffffff;
}

.purchases-table tbody tr:last-child td {
  border-bottom: none;
}

/* En celular las 3 columnas (Producto / Estado / Fecha) no caben sin
   apretarse o scrollear horizontal. Cada fila pasa a ser su propia
   tarjeta: la cabecera se oculta y cada celda muestra su etiqueta con
   data-label (puesto en script.js al renderizar las filas). */
@media (max-width: 700px) {
  .purchases-table {
    border: none;
    background: none;
    overflow: visible;
  }

  .purchases-table thead {
    display: none;
  }

  .purchases-table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .purchases-table tr {
    display: block;
    background: rgba(var(--nova-bg-rgb), 0.8);
    border: 1px solid rgba(var(--nova-purple-rgb), 0.15);
    border-radius: 12px;
    overflow: hidden;
  }

  .purchases-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    padding: 12px 16px;
  }

  .purchases-table td::before {
    content: attr(data-label);
    color: var(--nova-gold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
  }

  .purchases-table tr td:last-child {
    border-bottom: none;
  }
}

/* Tienda VIP */
.vip-nav-link {
  color: var(--nova-gold) !important;
  font-weight: 700;
}

body.vip-page {
  background-color: #050403;
}

.vip-section {
  padding: 100px 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 199, 79, 0.08), transparent 60%),
    linear-gradient(180deg, #0a0806, #050403);
  min-height: 70vh;
}

.vip-title {
  background: linear-gradient(135deg, #ffe17a, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vip-lifetime-total {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 30px;
}

.vip-lifetime-total strong {
  color: #ffd75e;
  font-size: 1.2rem;
}

.vip-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.vip-tier-card {
  position: relative;
  background: linear-gradient(165deg, #14110a, #050403);
  border: 1px solid rgba(255, 199, 79, 0.25);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
}

.vip-tier-card.unlocked {
  border-color: rgba(255, 199, 79, 0.8);
  box-shadow: 0 0 30px rgba(255, 199, 79, 0.2);
}

.vip-tier-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #3a2a06;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #d4a017 55%, #8a6200);
  box-shadow: 0 0 20px rgba(255, 199, 79, 0.3);
}

.vip-tier-card:not(.unlocked) .vip-tier-icon {
  filter: grayscale(0.8);
  opacity: 0.5;
}

.vip-tier-name {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 6px;
}

.vip-tier-threshold {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
  margin-bottom: 14px;
}

.vip-tier-progress-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 10px;
}

.vip-tier-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #b8860b, #ffd75e);
  border-radius: 4px;
}

.vip-tier-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

.vip-tier-card.unlocked .vip-tier-status {
  color: #ffd75e;
}

.vip-cta {
  text-align: center;
  margin-top: 30px;
}

.vip-cta a {
  color: var(--nova-gold);
  font-weight: 600;
}

/* Oferta de apertura (ficticia): precio tachado + insignia -15% junto al
   precio real de cada producto — NO se usa en la pestaña "Comprar GGcoins". */
.store-price-old {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  font-size: 0.75em;
  margin-right: 6px;
}

.store-price-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff7a5c, #c0392b);
  color: #fff;
  font-weight: 800;
  font-size: 0.65em;
  padding: 1px 7px;
  border-radius: 10px;
  vertical-align: middle;
}

/* ---- Cupón de descuento en el carrito ---- */
.store-cart-coupon { margin: .85rem 0 .35rem; }
.store-cart-coupon label {
  display: block; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nova-text-muted); margin-bottom: .4rem;
}
.store-cart-coupon-row { display: flex; gap: .5rem; }
.store-cart-coupon-row input {
  flex: 1 1 auto; min-width: 0; padding: .55rem .7rem;
  border: 1px solid rgba(var(--nova-purple-rgb), .45);
  border-radius: 8px; background: rgba(var(--nova-bg-rgb), .75);
  color: #fff; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
}
.store-cart-coupon-row input:focus {
  outline: none; border-color: var(--nova-purple);
  box-shadow: 0 0 0 3px rgba(var(--nova-purple-rgb), .25);
}
.store-cart-coupon-row input:disabled { opacity: .55; cursor: not-allowed; }
.store-cart-coupon-row button {
  flex: 0 0 auto; padding: .55rem 1rem; border: 0; border-radius: 8px;
  background: var(--nova-purple); color: #fff; font-weight: 600;
  cursor: pointer; transition: filter .15s;
}
.store-cart-coupon-row button:hover:not(:disabled) { filter: brightness(1.15); }
.store-cart-coupon-row button:disabled { opacity: .55; cursor: not-allowed; }
.store-cart-coupon-msg { margin: .45rem 0 0; font-size: .82rem; min-height: 1.1em; }
.store-cart-coupon-msg.ok { color: var(--nova-teal); }
.store-cart-coupon-msg.error { color: #ff6b6b; }
.store-cart-total .cart-total-tachado {
  text-decoration: line-through; opacity: .5; margin-right: .4rem; font-weight: 400;
}

/* ---- Pagina Mi cuenta ---- */
.cuenta-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 1.5rem;
}
.cuenta-card {
  background: rgba(var(--nova-bg-rgb), .6);
  border: 1px solid rgba(var(--nova-purple-rgb), .28);
  border-radius: 14px; padding: 1.4rem;
}
.cuenta-card-ancha { grid-column: 1 / -1; }
.cuenta-card h3 {
  margin: 0 0 1rem; font-size: 1.05rem; display: flex; align-items: center; gap: .55rem;
}
.cuenta-card h3 i { color: var(--nova-purple); }
.cuenta-fila {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.cuenta-fila:last-of-type { border-bottom: 0; }
.cuenta-label { flex: 0 0 8.5rem; color: var(--nova-text-muted); font-size: .85rem; }
.cuenta-valor { flex: 1 1 auto; font-weight: 600; word-break: break-word; min-width: 0; }
.cuenta-btn-mini {
  flex: 0 0 auto; padding: .3rem .7rem; font-size: .78rem;
  border: 1px solid rgba(var(--nova-purple-rgb), .5); border-radius: 6px;
  background: transparent; color: var(--nova-purple); cursor: pointer;
}
.cuenta-btn-mini:hover { background: rgba(var(--nova-purple-rgb), .15); }
.cuenta-form { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.cuenta-form label {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--nova-text-muted); margin-top: .5rem;
}
.cuenta-form input {
  padding: .6rem .75rem; border-radius: 8px; color: #fff; font-size: .95rem;
  border: 1px solid rgba(var(--nova-purple-rgb), .4);
  background: rgba(var(--nova-bg-rgb), .8);
}
.cuenta-form input:focus {
  outline: none; border-color: var(--nova-purple);
  box-shadow: 0 0 0 3px rgba(var(--nova-purple-rgb), .22);
}
.cuenta-ayuda { margin: .35rem 0 0; font-size: .78rem; color: var(--nova-text-muted); }
.cuenta-form-botones { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.cuenta-btn {
  display: inline-block; padding: .6rem 1.1rem; border: 0; border-radius: 8px;
  background: var(--nova-purple); color: #fff; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: filter .15s;
}
.cuenta-btn:hover:not(:disabled) { filter: brightness(1.15); }
.cuenta-btn:disabled { opacity: .55; cursor: not-allowed; }
.cuenta-btn-sec {
  padding: .6rem 1.1rem; border-radius: 8px; cursor: pointer; font-weight: 600;
  border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff;
}
.cuenta-msg { margin: .7rem 0 0; font-size: .85rem; min-height: 1.1em; }
.cuenta-msg.ok { color: var(--nova-teal); }
.cuenta-msg.error { color: #ff6b6b; }
.cuenta-aviso {
  margin-top: 1.5rem; padding: 1.5rem; text-align: center;
  border: 1px dashed rgba(var(--nova-purple-rgb), .4); border-radius: 14px;
  color: var(--nova-text-muted);
}
@media (max-width: 420px) {
  .cuenta-fila { flex-wrap: wrap; }
  .cuenta-label { flex-basis: 100%; }
}


/* Atajo al panel de administracion. Solo se pinta si el backend dice
   isStaff, asi que aqui solo se le da un aspecto que destaque del resto
   de enlaces del menu, que son texto subrayado sin mas. */
.nav-account-user a.nav-account-admin {
  color: var(--nova-gold);
  text-decoration: none;
  border: 1px solid var(--nova-gold);
  border-radius: 6px;
  padding: 2px 10px;
  font-weight: 600;
}

.nav-account-user a.nav-account-admin:hover {
  background: var(--nova-gold);
  color: #14101f;
}

/* Menu desplegable de la cuenta. Fuera de el solo quedan el saldo y el
   usuario; compras, pendientes, admin y salir viven dentro. */
.nav-account-menu {
  position: relative;
}

.nav-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 4px 8px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.nav-account-toggle:hover {
  color: var(--nova-gold);
}

.nav-account-caret {
  display: inline-flex;
  font-size: 0.75em;
  opacity: 0.7;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* La flecha apunta hacia arriba mientras el menu esta abierto. */
.nav-account-toggle[aria-expanded="true"] .nav-account-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Aviso de que hay entregas pendientes, visible con el menu cerrado. */
.nav-pending-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
}

.nav-account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--nova-bg-alt);
  border: 1px solid rgba(var(--nova-gold-rgb), 0.3);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* display:flex y display:inline-flex ganan a [hidden]: hay que anularlos. */
.nav-account-dropdown[hidden],
.nav-pending-badge[hidden],
.nav-pending-dot[hidden] {
  display: none;
}

.nav-account-dropdown a,
.nav-account-dropdown button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-account-dropdown a:hover,
.nav-account-dropdown button:hover {
  background: rgba(var(--nova-gold-rgb), 0.12);
  color: var(--nova-gold);
}

/* Dentro del menu el atajo al admin no lleva recuadro: desentonaria. */
.nav-account-dropdown a.nav-account-admin {
  border: 0;
  padding: 8px 10px;
  color: var(--nova-gold);
  font-weight: 600;
}

.nav-account-dropdown #nav-logout-btn {
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
}

.nav-pending-badge {
  padding: 1px 8px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
}