@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
:root {
  --color-primary: #ff5252;
  /* La imagen de fondo del hero se configura desde head.twig usando --hero-bg-image */
}

body {
  font-family: Lato, sans-serif;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-height: 600px;
  z-index: -1;
  background: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
   mask-image: linear-gradient(rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.1));
  pointer-events: none;
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 25px;
  /* padding: 12px 24px; */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  box-shadow: 0 8px 25px rgb(from var(--color-primary) r g b/0.4);
  transform: translateY(-2px);
}

.quantity-field {
  border-radius: 15px;
}

.site-header-inner .info .image {
  border-radius: 12px;
}
.site-header-inner .user-name ul li {
  overflow: hidden;
}
.site-header-inner .user-name ul li:first-child {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.site-header-inner .user-name ul li:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.site-sale-banner {
  border-radius: 20px;
}

.site-home-categories .category {
  border-radius: 20px;
  padding: 25px var(--widget-padding);
  background: linear-gradient(135deg, var(--color-brighter-bg) 0%, rgb(from var(--color-brighter-bg) r g b / 0.8) 100%);
  border: 1px solid rgb(from var(--color-primary) r g b / 0.2);
  transition: all 0.3s ease;
}

.site-home-categories .category:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgb(from var(--color-primary) r g b/0.3);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.category-description {
  border-radius: 20px;
  background: var(--color-brighter-bg);
}

/* Estilos adicionales para elementos redondeados */
.store-product,
.widget {
  border-radius: 20px;
  background: var(--color-brighter-bg);
  border: 1px solid rgb(from var(--color-primary) r g b / 0.1);
}

.store-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgb(from var(--color-primary) r g b/0.2);
  border-color: rgb(from var(--color-primary) r g b / 0.3);
}

/* Formularios con bordes redondeados */
.store-form input,
.store-form select,
.store-form textarea {
  border-radius: 15px;
  border: 1px solid rgb(from var(--color-primary) r g b / 0.2);
  background: var(--color-brighter-bg);
}

.store-form input:focus,
.store-form select:focus,
.store-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 15px rgb(from var(--color-primary) r g b/0.3);
}

.store-text {
  border-radius: 5px;
}
.store-text h1,
.store-text h2,
.store-text h3,
.store-text h4,
.store-text h5,
.store-text h6 {
  text-align: center;
}

.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-products-list .store-product {

    gap: 6px !important;
}

.store-products-images .store-product {
  text-align: center;
}

.widget-title {
  text-align: center;
}

.widget .store-product {
  text-align: center;
}

.no-products {
  color: var(--color-text-secondary);
  background: var(--color-brighter-bg);
  border-radius: 5px;
}

.store-product-full {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-product .quantity-field {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
.store-product .quantity-field input[type=number] {
  border: none;
}

@media (width > 960px) {
  .navigation-horizontal > ul {
    border-radius: 5px;
  }
}
.navigation-horizontal .has-children > ul {
  border-radius: 5px;
}

.widget {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
@media (width <= 960px) {
  .widget.site-navigation {
    border-radius: 0;
    background: transparent;
  }
}

.widget-gift-card .gift-card-input {
  border-radius: 2px;
}

.widget-top-donator .avatar {
  border-radius: 50%;
}

.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 2px;
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 2px;
}

.popup-content {
  border-radius: 5px;
}

.popup-close {
  border-radius: 0 5px 0 5px;
}

.basket-popup-content,
.basket-popup-content .popup-close {
  border-radius: 0;
}

.basket-items {
  padding: var(--widget-padding) calc(var(--content-padding) - var(--widget-padding));
}

.basket-item {
  border-radius: 5px;
}
.basket-item .quantity {
  border-radius: 2px;
}

.toast {
  border-radius: 6px;
}

.toast-close {
  border-radius: 2px;
}

.store-category-tiered {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3,
.store-category-tiered-header h4,
.store-category-tiered-header h5,
.store-category-tiered-header h6 {
  text-align: center;
}

.store-product-tiered {
  border-radius: 5px;
  background: rgb(from var(--color-bg) r g b/0.5);
}

/* Header moderno horizontal como en la imagen */
.modern-header .site-header-inner {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 15px 40px !important;
  height: auto !important;
  min-height: 70px;
  background: transparent;
  max-width: none !important;
  width: 100% !important;
}

.modern-header .header-logo {
  flex: none;
}

.modern-header .logo-image {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.modern-header .header-navigation {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 60px;
  max-width: none;
}

.modern-header .header-navigation .site-navigation {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
}

.modern-header .header-navigation .navigation-horizontal .menu {
  display: flex !important;
  justify-content: center;
  gap: 50px;
  padding: 0 !important;
  background: transparent !important;
  line-height: normal;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
}

.modern-header .header-navigation .navigation-horizontal .menu > li > a {
  padding: 10px 20px !important;
  color: var(--color-text-secondary);
  transition: all 0.3s ease;
  border-radius: 0;
  text-decoration: none;
  background: transparent !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  font-size: 15px !important;
}

.modern-header .header-navigation .navigation-horizontal .menu > li > a:hover,
.modern-header .header-navigation .navigation-horizontal .menu > li > a.link-active {
  color: var(--color-primary) !important;
  background: transparent !important;
}

.modern-header .header-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.modern-header .mobile-only {
  display: none;
}

/* Responsive para móviles */
@media (max-width: 960px) {
  .modern-header .site-header-inner {
    padding: 10px 20px !important;
  }
  
  .modern-header .header-navigation {
    display: none;
  }
  
  .modern-header .mobile-only {
    display: block !important;
  }
  
  .modern-header .header-actions {
    gap: 10px;
  }
  
  .modern-header .logo-image {
    height: 35px;
  }
}

/* Override estilos anteriores del header */
.modern-header .site-header-inner .actions,
.modern-header .site-header-inner .user-actions,
.modern-header .site-header-inner .log-in,
.modern-header .site-header-inner .site-title,
.modern-header .site-header-inner .info {
  position: static !important;
  margin: 0 !important;
}

/* Ajustes adicionales para el header moderno */
.modern-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
}

/* Ocultar navegación duplicada en layout */
.modern-header ~ .site-navigation {
  display: none;
}

/* Mejorar el espaciado del contenido después del header */
.modern-header ~ .site-content {
  margin-top: 20px;
}

/* Estilo para el botón hamburguesa en móvil */
.modern-header .toggle-navigation {
  background-image: url("https://webstore-template-assets.tebex.io/images/burger.svg");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: transparent;
  border: 1px solid rgb(from var(--color-primary) r g b / 0.3);
}

.modern-header .toggle-navigation:hover {
  background-color: rgb(from var(--color-primary) r g b / 0.1);
  border-color: var(--color-primary);
}

/* Responsive para tablets */
@media (max-width: 1200px) {
  .modern-header .header-navigation .navigation-horizontal .menu {
    gap: 35px;
  }
  
  .modern-header .header-navigation .navigation-horizontal .menu > li > a {
    padding: 8px 15px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  
  .hero-content {
    gap: 80px;
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .modern-header .site-header-inner {
    min-height: 60px;
  }
  
  .modern-header .logo-image {
    height: 30px;
  }
  
  /* Hero Banner Mobile */
  .hero-banner {
    min-height: 70vh;
    padding: 40px 20px;
  }
  
  .hero-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
    padding: 0;
  }
  
  .hero-text-left,
  .hero-logo-section {
    padding: 0;
    margin-bottom: 20px;
  }
  
  .hero-main-logo {
    max-height: 200px;
    margin: 20px 0;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
}

/* Hero Banner - Estilo como la imagen de OresMon */
.hero-banner {
  position: relative;
  height: 100vh;
  min-height: 700px;
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(42, 42, 42, 0.6) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

/* Imagen de fondo del hero banner - usando variable específica */
.hero-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hero-bg-image) center center/cover no-repeat;
  filter: brightness(0.6) contrast(1.2);
  z-index: 1;
}

/* Overlay gradient */
.hero-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg, 
    rgba(26, 26, 26, 0.3) 0%, 
    rgba(26, 26, 26, 0.3) 40%,
    rgba(26, 26, 26, 0.3) 60%,
    rgba(26, 26, 26, 0.3) 100%
  );
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  max-width: none;
  width: 100%;
  padding: 0 60px;
  margin-bottom: 60px;
}

.hero-text-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-title {
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: -1px;
}

.hero-brand {
  color: var(--color-primary);
  display: block;
}

.hero-description {
  font-size: 16px;
  line-height: 1.6;
  color: #ccc;
  max-width: none;
  padding-right: 40px;
}

.hero-text-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
  padding-left: 40px;
}

.hero-logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 40px;
}

.hero-main-logo {
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  transition: all 0.3s ease;
}

.hero-main-logo:hover {
  transform: scale(1.02);
  filter: drop-shadow(0 15px 40px rgba(255, 82, 82, 0.3));
}

.hero-subtitle {
  font-size: clamp(24px, 3vw, 48px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: -1px;
}

.hero-stats,
.hero-discord {
  font-size: 14px;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 16px;
}

.highlight {
  color: var(--color-primary);
  font-weight: 600;
}

/* Ajustes para página de inicio con hero */
.page-index .site {
  display: block;
}

.page-index .hero-banner {
  margin-top: 0;
}

/* Mejorar el texto del hero */
.hero-title, .hero-subtitle {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

.hero-description, .hero-stats, .hero-discord {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

/* Arreglar layout general y posicionamiento */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Asegurar que el header no interfiera con el contenido */
.site-content {
  flex: 1; /* Ocupa el espacio disponible */
  min-height: calc(100vh - 90px - 200px); /* Resta header y footer aproximado */
}

/* Footer siempre al fondo */
.site-footer {
  margin-top: auto;
  min-height: 120px; /* Altura mínima del footer */
}

/* Espaciado para páginas que NO son index (tienen header absoluto) */
.page-package .site-content,
.page-category .site-content,
.page-cms .site-content {
  margin-top: 90px !important;
  padding-top: 40px;
}

/* Página de inicio con hero banner - sin espaciado extra */
.page-index .site-content {
  margin-top: 0 !important;
  padding-top: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .site-content {
    min-height: calc(100vh - 70px - 150px);
  }
  
  .page-package .site-content,
  .page-category .site-content,
  .page-cms .site-content {
    margin-top: 70px !important;
    padding-top: 20px;
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .hero-content {
    gap: 80px;
    padding: 0 40px;
  }
}

@media (max-width: 900px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
    padding: 0 30px;
  }
  
  .hero-text-right {
    text-align: center;
    padding-left: 0;
  }
  
  .hero-description {
    padding-right: 0;
  }
  
  .hero-banner {
    min-height: 600px;
  }
}

@media (max-width: 600px) {
  .hero-content {
    gap: 30px;
    margin-bottom: 40px;
    padding: 0 20px;
  }
  
  .hero-title {
    margin-bottom: 20px;
  }
  
  .hero-subtitle {
    margin-bottom: 20px;
  }
  
  .hero-btn {
    padding: 14px 30px;
    font-size: 14px;
  }
}

/* Botones de iconos minimalistas como en la imagen */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 82, 82, 0.2);
}

.icon-btn svg {
  transition: all 0.3s ease;
}

.icon-btn:hover svg {
  transform: scale(1.1);
}

/* Estilos específicos para cada tipo de botón */
.user-btn:hover {
  background: rgba(255, 82, 82, 0.1);
}

.cart-btn:hover {
  background: rgba(255, 82, 82, 0.1);
}

.login-btn:hover {
  background: rgba(255, 82, 82, 0.1);
}

/* Ajustes para el header moderno */
.modern-header .header-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Dropdown para subcategorías en header horizontal */
.modern-header .header-navigation .navigation-horizontal .has-children {
  position: relative;
}

.modern-header .header-navigation .navigation-horizontal .has-children > ul {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-brighter-bg);
  border: 1px solid rgb(from var(--color-primary) r g b / 0.2);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.modern-header .header-navigation .navigation-horizontal .has-children:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(5px);
}

.modern-header .header-navigation .navigation-horizontal .has-children > ul > li {
  width: 100%;
}

.modern-header .header-navigation .navigation-horizontal .has-children > ul > li > a {
  display: block !important;
  padding: 12px 20px !important;
  color: var(--color-text-secondary) !important;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin: 2px 8px;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
}

.modern-header .header-navigation .navigation-horizontal .has-children > ul > li > a:hover,
.modern-header .header-navigation .navigation-horizontal .has-children > ul > li > a.link-active {
  background: rgb(from var(--color-primary) r g b / 0.1) !important;
  color: var(--color-primary) !important;
}

/* Indicador de dropdown */
.modern-header .header-navigation .navigation-horizontal .has-children > a::after {
  content: "▼";
  font-size: 10px;
  margin-left: 8px;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.modern-header .header-navigation .navigation-horizontal .has-children:hover > a::after {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* Eliminar sidebar completamente y hacer contenido full width */
.store-sidebar {
  display: none !important;
}

.site-content,
.site-content-widgets {
  grid-template-columns: 1fr !important;
  max-width: none !important;
  width: 100% !important;
}

/* Asegurar que el contenido principal use todo el ancho disponible */
.site-content > .content,
.site-content-widgets > .content {
  width: 100% !important;
  max-width: none !important;
}

/* Override de cualquier configuración de sidebar */
.is-sidebar-right .site-content,
.is-sidebar-right .site-content-widgets {
  grid-template-columns: 1fr !important;
}

.is-navigation-vertical .site-content,
.is-navigation-vertical .site-content-widgets {
  grid-template-columns: 1fr !important;
}

/* Eliminar espacios o márgenes relacionados con sidebar */
.site-content,
.site-content-widgets {
  gap: 0 !important;
  grid-column-gap: 0 !important;
}

/* Arreglar ancho del footer en páginas que no son home */
.page-package .site-footer,
.page-category .site-footer,
.page-cms .site-footer {
  width: 100% !important;
  margin: 0 !important;
}

.page-package .site-footer-inner,
.page-category .site-footer-inner,
.page-cms .site-footer-inner {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px var(--content-padding) !important;
}

/* Asegurar que el footer ocupe todo el ancho siempre */
.site-footer {
  width: 100% !important;
  box-sizing: border-box;
}

.site-footer-inner {
  box-sizing: border-box;
}

/* Asegurar que el contenedor del sitio no limite el footer */
.page-package .site,
.page-category .site,
.page-cms .site {
  width: 100% !important;
  max-width: none !important;
}

/* Override cualquier limitación de ancho en páginas específicas */
.page-package,
.page-category,
.page-cms {
  width: 100% !important;
  overflow-x: hidden;
}

/* Grid moderno para productos estilo gaming como en el código de referencia - SIN PADDING */
.store-products-list,
.store-products-images {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important; /* QUITAR PADDING DEL GRID */
  margin: 0 !important; /* QUITAR MARGIN DEL GRID */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* En móviles, solo 1 columna */
@media (max-width: 768px) {
  .store-products-list,
  .store-products-images {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Estilo de tarjeta exactamente como el código de referencia - SIN PADDING */
.store-product {
  display: flex !important;
  flex-direction: column !important;
  background: #0B0B0B !important;
  overflow: hidden !important;
  border: none !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  height: 28vh !important;
  position: relative !important;
  border-radius: 5px !important;
  padding: 0 !important; /* QUITAR TODO EL PADDING */
  margin: 0 !important; /* QUITAR TODO EL MARGIN */
  box-sizing: border-box !important;
}

/* En móviles, altura diferente */
@media (max-width: 768px) {
  .store-product {
    height: 30vh !important;
  }
}

.store-product:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Contenedor de imagen - background cover completo SIN márgenes */
.store-product .image-link {
  position: relative !important;
  width: 100% !important;
  height: calc(100% - 8vh) !important; /* Resta el espacio del título (3vh) + acciones (5vh) */
  overflow: hidden !important;
  display: block !important;
  z-index: 1 !important;
  transition: opacity 0.3s ease !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 !important;
  padding: 0 !important;
}

.store-product .image-link:hover {
  opacity: 0.4 !important;
}

/* Imagen como background - ocultamos el elemento img y usamos background */
.store-product .image {
  display: none !important;
}

/* Ocultar badges completamente */
.store-product .package-extra,
.store-product .package-badge {
  display: none !important;
}

/* Título del producto - con padding en la zona inferior */
.store-product .product-title {
  width: 100% !important;
  height: 3vh !important;
  padding: 6px 12px !important; /* Padding lateral y vertical */
  display: flex !important;
  align-items: center !important;
  font-family: "Inter", sans-serif !important;
  font-weight: bold !important;
  color: white !important;
  font-size: 18px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  z-index: 3 !important;
  background: transparent !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.store-product .product-title a {
  color: inherit !important;
  text-decoration: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.store-product .product-title a:hover {
  color: var(--color-primary) !important;
}

/* Franja inferior con precio y botón - más altura para el botón */
.store-product .actions {
  width: 100% !important;
  height: 4vh !important; /* Reducir altura */
  display: flex !important;
  justify-content: space-between !important;
  padding: 6px 12px !important; /* Padding lateral y vertical */
  background: transparent !important;
  position: relative !important;
  z-index: 3 !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Precio del producto - estilo del código de referencia */
.store-product .price {
  width: 70% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #E7434F !important;
  font-family: "Inter", sans-serif !important;
  font-weight: bold !important;
  font-size: 16px !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex: 1 !important;
}

/* Precio con descuento */
.store-product .price .discount {
  text-decoration: line-through !important;
  font-size: 16px !important;
  color: #3E3E3E !important;
  margin-left: 8px !important;
}

.store-product .price strong {
  font-size: 16px !important;
  font-weight: inherit;
}

/* Área de botones */
.store-product .actions .button-area {
  width: 10% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Botón del carrito - solo borde blanco redondeado */
.store-product .actions .btn-primary,
.store-product .actions .btn-secondary,
.store-product .actions .btn-terciary,
.store-product .actions .add {
  width: 0.9vw !important;
  height: 0.9vw !important;
  min-width: 30px !important;
  min-height: 30px !important;
  background: transparent !important; /* Sin fondo */
  /* border: 1px solid white !important; */
  border-radius: 6px !important; /* Esquinas redondeadas */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  color: white !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  
}

/* En móviles, tamaño diferente */
@media (max-width: 768px) {
  .store-product .actions .btn-primary,
  .store-product .actions .btn-secondary,
  .store-product .actions .btn-terciary,
  .store-product .actions .add {
    width: 5vw !important;
    height: 5vw !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }
}

/* SVG del carrito - exactamente como el código de referencia */
.store-product .actions .btn-primary::after,
.store-product .actions .add::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.51831 0L2.17775 5.84598H0.899841C0.761518 5.84613 0.625088 5.87813 0.501127 5.93951C0.377166 6.00088 0.269004 6.08998 0.185025 6.19989C0.101045 6.30981 0.0435054 6.43758 0.0168651 6.57331C-0.00977525 6.70905 -0.00480015 6.84909 0.0314044 6.98259L2.55032 16.2186C2.65473 16.5994 2.88119 16.9353 3.19494 17.1749C3.50869 17.4146 3.89241 17.5446 4.2872 17.5451H13.7122C14.5204 17.5451 15.2349 17.0007 15.4491 16.2177L17.968 6.98169C18.0046 6.84815 18.0099 6.70793 17.9834 6.57202C17.9568 6.4361 17.8992 6.30816 17.815 6.1982C17.7309 6.08823 17.6224 5.99922 17.4981 5.93812C17.3739 5.87702 17.2371 5.84548 17.0987 5.84598H15.8208L12.4802 0L10.9179 0.892735L13.7482 5.84598H4.2503L7.08059 0.892735L5.51831 0ZM10.7991 9.44571H12.599V13.9454H10.7991V9.44571ZM5.39952 9.44571H7.19938V13.9454H5.39952V9.44571Z' fill='white'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Efecto hover - fondo sutil */
.store-product .actions .btn-primary:hover,
.store-product .actions .btn-secondary:hover,
.store-product .actions .btn-tertiary:hover,
.store-product .actions .add:hover {
  background: rgba(255, 255, 255, 0.1) !important; /* Fondo blanco sutil al hacer hover */
  border-color: rgba(255, 255, 255, 0.8) !important; /* Borde más suave */
  transform: scale(1.05) !important; /* Pequeño zoom */
  box-shadow: none !important; /* Sin sombra */
}

/* Efecto hover con animación del SVG */
.store-product .actions .btn-primary:hover::after,
.store-product .actions .add:hover::after {
  animation: spin 0.5s linear !important;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Tags/etiquetas de los productos */
.store-product .countdown {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: var(--color-primary) !important;
  color: white !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  z-index: 3 !important;
}

/* Ocultar descripción para este estilo */
.store-product .descr {
  display: none !important;
}

/* Ocultar countdown para este estilo */
.store-product .countdown {
  display: none !important;
}

/* Estilos para elementos ocultos en el grid */
.store-product .actions .btn-secondary,
.store-product .actions .btn-terciary,
.store-product .actions .subscribe,
.store-product .actions .gift,
.store-product .actions .quantity-field {
  display: none !important;
}

/* Solo mostrar el botón principal de compra */
.store-product .actions .btn-primary,
.store-product .actions .add {
  display: flex !important;
}

/* Ajustes para el área de precio */
.store-product .actions .price-area {
  width: 70% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.store-product .actions .price-area .price {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #E7434F !important;
  font-family: "Inter", sans-serif !important;
  font-weight: bold !important;
  font-size: 20px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Precio con descuento dentro del área de precio */
.store-product .actions .price-area .price .discount {
  text-decoration: line-through !important;
  font-size: 16px !important;
  color: #3E3E3E !important;
  margin-left: 8px !important;
}

/* En móviles, ajustar tamaños de fuente */
@media (max-width: 768px) {
  .store-product .actions .price-area .price {
    font-size: 18px !important;
  }
  
  .store-product .actions .price-area .price .discount {
    font-size: 14px !important;
  }
  
  .store-product .product-title {
    font-size: 16px !important;
  }
}

/* RESTAURAR ESTILOS PARA PRODUCTO INDIVIDUAL (modal/página) */
/* El producto individual NO debe usar los estilos del grid */
.store-product-full {
  display: flex !important;
  flex-direction: column !important;
  background: var(--color-brighter-bg) !important;
  border-radius: 12px !important;
  padding: var(--widget-padding) !important;
  aspect-ratio: unset !important;
  height: auto !important;
  position: relative !important;
  gap: var(--widget-padding) !important;
}

.store-product-full .image-link {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-width: 300px !important;
  margin: 0 auto !important;
}

.store-product-full .image {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

.store-product-full .product-title {
  position: relative !important;
  bottom: unset !important;
  left: unset !important;
  right: unset !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  text-shadow: none !important;
  margin-bottom: var(--widget-padding) !important;
  text-align: center !important;
}

.store-product-full .actions {
  position: relative !important;
  bottom: unset !important;
  left: unset !important;
  right: unset !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 !important;
  border-top: none !important;
  z-index: auto !important;
}

.store-product-full .price {
  font-size: 28px !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  text-shadow: none !important;
}

.store-product-full .actions .btn-primary,
.store-product-full .actions .btn-secondary,
.store-product-full .actions .btn-tertiary {
  width: 100% !important;
  max-width: 240px !important;
  height: 50px !important;
  border-radius: 8px !important;
  margin: 0 auto !important;
  font-size: 16px !important;
  text-indent: 0 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.store-product-full .actions .btn-primary::before,
.store-product-full .actions .btn-secondary::before,
.store-product-full .actions .btn-tertiary::before {
  display: none !important;
}

.store-product-full .descr {
  display: block !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.6 !important;
  font-size: 16px !important;
  text-align: left !important;
}

/* Override específico para popup del producto - tamaño modal mediano */
.popup-content.store-product-full {
  max-width: 500px !important;
  width: 50vw !important;
  margin: auto !important;
}

/* Para tablets */
@media (max-width: 1024px) {
  .popup-content.store-product-full {
    width: 70vw !important;
    max-width: 600px !important;
  }
}

/* Para móviles */
@media (max-width: 768px) {
  .popup-content.store-product-full {
    width: 90vw !important;
    max-width: 400px !important;
  }
  
  .store-product-full {
    padding: 20px !important;
  }
  
  .store-product-full .product-title {
    font-size: 20px !important;
  }
  
  .store-product-full .price {
    font-size: 24px !important;
  }
}

/* Para móviles muy pequeños */
@media (max-width: 480px) {
  .popup-content.store-product-full {
    width: 95vw !important;
    max-width: 350px !important;
  }
}

/* ESTILOS PARA PRODUCT PREVIEW PERSONALIZADO */
.page-product-preview {
  background: #0B0B0B !important;
  color: #FFFFFF;
}

.product-preview-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background: #0B0B0B;
  color: #FFFFFF;
  font-family: Inter, sans-serif;
}

.product-preview-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
  align-items: start;
}

/* Sección izquierda - Imagen */
.product-preview-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.preview-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888888;
  margin: 0;
}

.preview-highlight {
  color: #E7434F;
}

.product-image-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.product-main-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: 400px;
  object-fit: cover;
}

/* Sección derecha - Información */
.product-preview-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 2rem;
}

.product-info-header {
  border-bottom: 1px solid #333333;
  padding-bottom: 1.5rem;
}

.product-name {
  font-size: 2rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.2;
}

.product-buy-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.buy-now-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: transparent;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
}

.buy-now-btn:hover {
  background: #E7434F;
  border-color: #E7434F;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(231, 67, 79, 0.3);
}

.price-highlight {
  color: #E7434F;
  font-weight: 700;
}

.cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sección de descripción */
.product-description-section {
  background: #111111;
  border-radius: 12px;
  padding: 2rem;
  margin-top: 2rem;
}

.description-container {
  max-width: 800px;
}

.description-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid #333333;
  padding-bottom: 1.5rem;
}

.description-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 0.5rem 0;
}

.description-subtitle {
  color: #CCCCCC;
  margin: 0;
  line-height: 1.6;
}

.documentation-link {
  color: #E7434F;
  text-decoration: none;
  font-weight: 600;
}

.documentation-link:hover {
  text-decoration: underline;
}

.description-content {
  color: #CCCCCC;
  line-height: 1.7;
  font-size: 1rem;
}

.description-content h1,
.description-content h2,
.description-content h3,
.description-content h4,
.description-content h5,
.description-content h6 {
  color: #FFFFFF;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.description-content p {
  margin-bottom: 1rem;
}

.description-content ul,
.description-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.description-content li {
  margin-bottom: 0.5rem;
}

.description-content code {
  background: #222222;
  color: #E7434F;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

.description-content pre {
  background: #222222;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1rem 0;
}

/* Responsive */
@media (max-width: 768px) {
  .product-preview-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .product-preview-right {
    padding-top: 0;
  }
  
  .product-name {
    font-size: 1.5rem;
  }
  
  .buy-now-btn {
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
  }
  
  .product-preview-container {
    padding: 1rem;
  }
}

/* OVERLAY PARA CUSTOM PRODUCT PREVIEW */
.custom-product-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.custom-product-preview-overlay.show {
  opacity: 1;
  visibility: visible;
}

.custom-preview-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}

.custom-preview-content {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.custom-preview-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #E7434F;
  color: #FFFFFF;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-preview-close:hover {
  background: #d63643;
  transform: scale(1.1);
}

.custom-preview-body {
  background: #0B0B0B;
  border-radius: 12px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* Ajustes para el preview dentro del overlay */
.custom-preview-body .product-preview-container {
  background: transparent;
  margin: 0;
  padding: 2rem;
}

/* Responsive para el overlay */
@media (max-width: 768px) {
  .custom-preview-content {
    padding: 1rem;
  }
  
  .custom-preview-body {
    max-height: 95vh;
  }
  
  .custom-preview-body .product-preview-container {
    padding: 1rem;
  }
  
  .custom-preview-close {
    top: 0.5rem;
    right: 0.5rem;
    width: 35px;
    height: 35px;
    font-size: 1.25rem;
  }
}

/* Título de sección de productos */
.products-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888888;
  margin: 0 0 1.5rem 0;
  text-align: left;
  font-family: Inter, sans-serif;
}

.products-title-highlight {
  color: #E7434F;
}

/* Recent Payments Carousel */
.recent-payments-carousel {
  width: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  padding: 40px 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.recent-payments-carousel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(231, 67, 79, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(231, 67, 79, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.carousel-container {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.carousel-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #888888;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.carousel-title .title-highlight {
  color: #E7434F;
}

.payments-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 0 20px 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Ocultar completamente la scrollbar */
.payments-carousel::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.payment-card {
  flex: 0 0 auto;
  width: 280px;
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.payment-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(231, 67, 79, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.payment-card:hover {
  transform: translateY(-2px);
  border-color: rgba(231, 67, 79, 0.3);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(231, 67, 79, 0.1);
}

.payment-card:hover::before {
  opacity: 1;
}

.payment-avatar {
  flex: 0 0 auto;
  position: relative;
}

.payment-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #E7434F;
  box-shadow: 
    0 0 10px rgba(231, 67, 79, 0.3),
    0 0 20px rgba(231, 67, 79, 0.1);
  transition: all 0.3s ease;
}

.payment-card:hover .payment-avatar img {
  box-shadow: 
    0 0 15px rgba(231, 67, 79, 0.6),
    0 0 30px rgba(231, 67, 79, 0.2);
  transform: scale(1.05);
}

.payment-info {
  flex: 1;
  min-width: 0;
}

.player-name {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-amount {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #E7434F;
  margin: 0;
  text-shadow: 0 0 10px rgba(231, 67, 79, 0.3);
}

/* About Us Section */
.about-us-section {
  width: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  padding: 60px 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.about-us-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 40%, rgba(231, 67, 79, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(231, 67, 79, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.about-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #888888;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.about-title .title-highlight {
  color: #E7434F;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.about-text {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  border-radius: 12px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.about-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(231, 67, 79, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.about-description {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #cccccc;
  margin: 0 0 20px 0;
  position: relative;
  z-index: 1;
}

.about-description:last-child {
  margin-bottom: 0;
}

.about-description .highlight {
  color: #E7434F;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(231, 67, 79, 0.3);
}

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

.feature-card {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  border-radius: 12px;
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(231, 67, 79, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(231, 67, 79, 0.3);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(231, 67, 79, 0.1);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  filter: grayscale(0.3);
  transition: filter 0.3s ease;
}

.feature-card:hover .feature-icon {
  filter: grayscale(0);
  transform: scale(1.1);
}

.feature-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 10px 0;
  position: relative;
  z-index: 1;
}

.feature-description {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #aaaaaa;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Responsive Design */
@media (min-width: 768px) {
  .about-content {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
  }
  
  .about-text {
    padding: 40px;
  }
  
  .about-description {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .about-us-section {
    padding: 40px 0;
  }
  
  .about-container {
    padding: 0 15px;
  }
  
  .about-title {
    font-size: 1.3rem;
    margin-bottom: 30px;
  }
  
  .about-text {
    padding: 25px;
  }
  
  .about-description {
    font-size: 0.95rem;
  }
  
  .feature-card {
    padding: 20px;
  }
  
  .feature-icon {
    font-size: 2rem;
  }
  
  .feature-title {
    font-size: 1rem;
  }
  
  .feature-description {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .about-features {
    grid-template-columns: 1fr;
  }
  
  .feature-card {
    padding: 18px;
  }
}

/* Header Layout Improvements */
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 70px;
}

/* Left section - Logo and Navigation close together */
.header-left-section {
  display: flex;
  align-items: center;
  gap: 30px; /* Espacio entre logo y navegación */
}

.header-logo {
  flex-shrink: 0;
}

.header-logo .logo-image {
  height: 40px;
  width: auto;
}

.header-navigation {
  display: flex;
  align-items: center;
}

/* Right section - Social Media and User Actions */
.header-right-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Social Links Styling */
.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cccccc;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.social-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(231, 67, 79, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.social-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(231, 67, 79, 0.3);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(231, 67, 79, 0.1);
}

.social-btn:hover::before {
  opacity: 1;
}

/* Discord specific styling */
.discord-btn:hover {
  color: #5865F2;
  border-color: rgba(88, 101, 242, 0.3);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(88, 101, 242, 0.2);
}

.discord-btn:hover::before {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.1) 0%, transparent 50%);
}

/* Twitter specific styling */
.twitter-btn:hover {
  color: #1DA1F2;
  border-color: rgba(29, 161, 242, 0.3);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(29, 161, 242, 0.2);
}

.twitter-btn:hover::before {
  background: linear-gradient(135deg, rgba(29, 161, 242, 0.1) 0%, transparent 50%);
}

/* Header Actions Styling */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cccccc;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.icon-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(231, 67, 79, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.icon-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(231, 67, 79, 0.3);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(231, 67, 79, 0.1);
  color: #E7434F;
}

.icon-btn:hover::before {
  opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .header-left-section {
    gap: 15px;
  }
  
  .header-right-section {
    gap: 10px;
  }
  
  .social-links {
    display: none; /* Ocultar redes sociales en móvil para ahorrar espacio */
  }
  
  .social-btn,
  .icon-btn {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .site-header-inner {
    padding: 0 15px;
    height: 60px;
  }
  
  .header-logo .logo-image {
    height: 32px;
  }
  
  .header-left-section {
    gap: 10px;
  }
  
  .header-actions {
    gap: 8px;
  }
}

/* Continue Browsing Button */
.continue-browsing-btn {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #E7434F;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
  width: 100%;
  font-size: 0.9rem;
  text-align: center;
}

.continue-browsing-btn:hover {
  background: #E7434F;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(231, 67, 79, 0.4);
}

.product-buy-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-content > .store-product-options {
  margin-top: 100px !important;
  max-width: 500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.site-content > .store-product-options .actions {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}