:root {
  --color-main: #ff80c0;
  --color-main-light: #ffa8d3; /*For gradient background*/
  --color-main-dark: #ff3e9e; /*For gradient background*/
  --color-accent: #302409;
  --color-discord: #5865f2;
  --color-discord-light: #8791f6;/*For gradient background*/
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #d4d4d4;
  --color-red: #ef4444;
  --color-red-dark: #dc2626; /*For gradient background*/
  --color-green: #22c55e;
  --color-green-dark: #16a34a; /*For gradient background*/
  --color-blue: #38bdf8;
  --color-blue-dark: #3b82f6; /*For gradient background*/
  --color-top-donator: #5a01ff;
  --color-top-donator-dark: #4408b3; /*For gradient background*/
  --color-text-top-donator: #a6ff00;
  
  --bg-0: #0d0d0d;
  --bg-1: #171717; 
  --bg-2: #262626; 
  
  --logo-height: 215px;
  --header-image: url(https://i.ibb.co/hXKg1G8/j52hwkirtut71.webp);
  --header-image-height: 486px;
  --header-image-opacity: 0.25;
  --header-image-blur: 5px;
  
  --bg-error: 
}

body {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: "Baloo 2", "Montserrat", sans-serif;
  letter-spacing: 0.01em;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-height: 400px;
z-index: -1;
background: var(--bg-image) center center/cover no-repeat;
mask-image: linear-gradient(rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.25));
pointer-events: none;
}

.transition-all {
  transition-duration: 300ms !important;
}

.header-splash {
  background: var(--header-image) no-repeat 50% /cover;
  height: var(--header-image-height);
  opacity: var(--header-image-opacity);
  filter: blur(var( --header-image-blur));
}

.header-splash-gradient-overlay {
  background: linear-gradient(90deg, #333948, #2e2639 22.69%, #2d2539 45.62%, #312539 68.59%, #3b2339);
  height: var(--header-image-height);
}

.header-splash-gray-overlay {
  background: linear-gradient(180deg, #22222259, var(--bg-2));
  height: var(--header-image-height);
}

.my-text-main {
  color: var(--color-main);
}

.my-text-primary {
  color: var(--color-text-primary);
}

.my-text-primary-hover:hover {
  color: var(--color-text-primary) !important;
}

.my-text-secondary {
  color: var(--color-text-secondary);
}

.bg-1 {
  background-color: var(--bg-1);
}

.bg-2 {
  background-color: var(--bg-2);
}

.discord-bg {
  background: var(--color-discord);
  position: relative;
  overflow: hidden;
}

.main-bg {
  background: var(--color-main);
  position: relative;
  overflow: hidden;
}
.main-bg::before, .discord-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 100% 0;
  transition: background-position 0.6s ease;
  pointer-events: none;
}
.main-bg:hover::before, .discord-bg:hover::before {
  background-position: 0 100%;
}
.main-bg > *, .discord-bg > * {
  position: relative;
  z-index: 1;
}

.red-bg {
  background: var(--color-red);
}

.green-bg {
  background: linear-gradient(135deg, var(--color-main) 0%, #a855f7 100%) !important;
  position: relative;
  overflow: hidden;
}

.blue-bg {
  background: linear-gradient(135deg, #7c3aed 0%, #1e1b2e 100%) !important;
  position: relative;
  overflow: hidden;
}

.green-bg::before, .blue-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 100% 0;
  transition: background-position 0.6s ease;
  pointer-events: none;
}
.green-bg:hover::before, .blue-bg:hover::before {
  background-position: 0 100%;
}
.green-bg > *, .blue-bg > * {
  position: relative;
  z-index: 1;
}

/* ===== Tarjetas de producto: estilo Mineboom (rosa/morado/negro) ===== */
.store-product {
  border-radius: 1rem !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #fdf2f8 100%), linear-gradient(90deg, var(--color-main), #a855f7, #1e1b2e);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 3px solid transparent;
}
.product-image-glow .glow-blob {
  background: radial-gradient(circle, var(--color-main) 0%, #a855f7 55%, transparent 75%);
}
.store-product .image-link.btn-square {
  background-color: #1b1625 !important;
  color: #fff !important;
}
.store-product .image-link.btn-square:hover {
  background-color: #000 !important;
}
.store-product .actions .price {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(90deg, rgba(255,128,192,0.12), rgba(168,85,247,0.12));
  border-radius: 9999px;
  padding: 0.35rem 1rem;
}

/* ===== Selector de moneda: dropdown liviano anclado al boton (sin dialog/backdrop-blur) ===== */
.currency-dropdown-panel {
  position: fixed;
  z-index: 100;
  width: 280px;
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
  padding: 0.85rem;
}
.currency-dropdown-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.6rem;
  padding: 0 0.2rem;
}
.currency-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.currency-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.6rem;
  background: var(--bg-0);
  border: 1px solid rgb(255 255 255 / 0.06);
  color: var(--color-text-secondary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.currency-cell:hover {
  background: var(--bg-2);
  color: var(--color-text-primary);
  border-color: rgb(255 255 255 / 0.12);
}
.currency-cell-active {
  background: var(--bg-2);
  color: var(--color-text-primary);
  border-color: var(--color-main);
}
.currency-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.3rem;
  border-radius: 0.5rem;
  background: var(--bg-2);
  color: var(--color-main);
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.currency-cell-active .currency-symbol {
  background: var(--color-main);
  color: #fff;
}
.currency-check {
  margin-left: auto;
  color: var(--color-main);
  font-size: 0.75rem;
}

/* ===== Iconos de pasos "Cómo comprar" (un color distinto por paso) ===== */
.step-icon-1 { background: linear-gradient(135deg, var(--color-main), #ff3e9e); }
.step-icon-2 { background: linear-gradient(135deg, #c026d3, #a855f7); }
.step-icon-3 { background: linear-gradient(135deg, #22c55e, #16a34a); }

/* ===== Login: tarjetas de edicion ===== */
.edition-card {
  transition: all 0.25s ease;
}
.edition-card:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 20px -6px rgba(0,0,0,0.25);
}

/* ===== Footer logo ===== */
.footer-logo-glow::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 9999px;
  background: radial-gradient(circle, var(--color-main) 0%, transparent 70%);
  opacity: 0.35;
  z-index: 0;
}

.tooltip::before {
  background-color: var(--bg-2);
  color: var(--color-text-primary);
  border: 1px solid #a3a3a3;
}

.my-drop-shadow {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.5)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.3)) !important;
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.my-shadow {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sliderm__pagination[data-active="true"] {
  border-color: var(--color-main) !important;
}

.store-menu::before, .store-menu::after {
content: '';
display: block;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
position: absolute;
border-radius: 50%;
z-index: -1;
background-color: var(--color-main);
transition: 1s ease;
}
.store-menu::before {
top: -1em;
left: -1em;
}
.store-menu::after {
left: calc(100% + 1em);
top: calc(100% + 1em);
}
.store-menu:hover::before, .store-menu:hover::after {
height: 1200px;
width: 1200px;
}

.widget {
  padding-top: 1.5rem;
padding-bottom: 1.5rem; 
padding-left: 1.5rem;
padding-right: 1.5rem; 
border-radius: 0.375rem; 
border-width: 1px; 
border-color: #404040;
background: var(--bg-1);
}

@media (min-width: 1024px) { 
  .widget {
padding-left: 2.5rem;
padding-right: 2.5rem; 
}
}

.widget .widget-title {
  margin-bottom: 0.5rem; 
font-size: 1.125rem; 
line-height: 1.75rem; 
font-weight: 600; 
text-transform: uppercase; 
color: var(--color-main);
letter-spacing: 0.05em;
}

.widget-goal .progress {
  height: 12px;
  background: var(--bg-0);
  position: relative;
  border-radius: 5px;
  transition: all 0.2s ease-out;
}

.widget-goal .my-progress-bar {
  
  position: absolute;
  transition: all 0.2s ease-out;
  height: 100%;
  background: var(--color-main);
  border-radius: 5px;
}

.widget-goal .my-progress-bar.my-striped {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

.widget-goal .my-progress-bar.my-animated {
  animation: 1.5s linear infinite progress-bar-striped;
}

@keyframes progress-bar-striped {
  0% {
      background-position: 40px 0
  }

  100% {
      background-position: 0 0
  }
}

.widget-top-donator {
  background: var(--color-top-donator);
}

.store-product-popup-content {
      padding: 0 !important;
  max-width: 1032px;
}

.popup, .modal::backdrop, .drawer-toggle:checked~.drawer-side>.drawer-overlay {
  --tw-bg-opacity: 0.1;
  --tw-backdrop-blur: blur(16px);
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important;
}

.basket-popup-content .popup-close {
  z-index: 9999;
  opacity: 1;
  filter: brightness(0) saturate(100%);
}
.popup-scroll-cont {
  display: flex;
  height: 100%;
  inset: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: fixed;
  overflow: auto;
  
}

.login-popup-content {
      width: 100%;
  max-width: 1032px;
  overflow: hidden;
  padding: 120px 2rem 130px;
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  border-radius: 0.375rem;
  border: 1px solid #404040;
}

.store-product-full {
  background: var(--bg-1) !important;
  border-radius: 0.375rem !important;
  border: 1px solid #404040 !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  overflow: hidden;
}

.gift-form-popup .popup-content {
  background: var(--bg-1) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  border-radius: 0.375rem;
  border: 1px solid #404040;
  overflow: hidden;
}

.store-product-popup-content {
  max-height: 90vh;
}

.store-product-options {
      padding: 0px !important;
  border: 1px solid #262626 !important;
}

.store-product-options p {
  font-size: 0.875rem !important; 
line-height: 1.25rem !important; 
color: rgb(212,212,212) !important;
}

.basket-popup-content {
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}















.btn-primary,
.btn-secondary,
.btn-tertiary {
border-radius: 2px;
}

.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
box-shadow: 0 0 6px rgb(from var(--btn-color-bg-hover) r g b/0.6);
}

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

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

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

.site-home-categories .category {
border-radius: 5px;
padding: 20px var(--widget-padding);
background: var(--color-brighter-bg);
transition: color 0.15s ease-in-out;
}
.site-home-categories .category:hover {
color: var(--color-primary);
}

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

.store-text {
border-radius: 5px;
background: var(--color-brighter-bg);
}
.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-images .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 input[type=number] {
border: none;
}

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

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

@media (width > 600px) {
.popup-content {
  border-radius: 5px;
}
}

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

.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;
}

/* Animación de respiración del logo */
@keyframes breathe {
  0%, 100% { transform: scale(1.3); }
  50%       { transform: scale(1.5); }
}

.logo {
  animation: breathe 4.5s ease-in-out infinite;
  transform-origin: center;
}

.logo.aos-animate {
  animation: breathe 4.5s ease-in-out infinite;
}



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

/* Normaliza el contenido de los modulos de texto (Comunidad) para que no rompan el diseno
   si el texto configurado en el panel de Tebex trae tamanos o subrayados exagerados */
.widget-body {
  font-size: 0.875rem;
  line-height: 1.5;
}
.widget-body * {
  font-size: inherit !important;
  line-height: inherit !important;
}
.widget-body u {
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

/* ===== Hero: fondo con resplandor en vez de plano ===== */
.hero-glow {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(255,128,192,0.18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(139,92,246,0.16), transparent 70%),
    var(--bg-0);
}
.hero-blob {
  position: absolute;
  border-radius: 9999px;
  /* blur(70px) era muy caro de repintar (se usa en header/footer/varias secciones a la vez);
     45px se ve prácticamente igual y es mucho más liviano, sobre todo en celular. */
  filter: blur(45px);
  pointer-events: none;
  z-index: 0;
  will-change: auto;
}
@media (max-width: 768px) {
  .hero-blob { filter: blur(30px); }
}
.hero-blob-1 { width: 280px; height: 280px; background: var(--color-main); opacity: 0.25; top: -120px; left: -60px; }
.hero-blob-2 { width: 240px; height: 240px; background: #8b5cf6; opacity: 0.22; bottom: -100px; right: -40px; }
.hero-blob-3 { width: 180px; height: 180px; background: #ec4899; opacity: 0.18; top: 40%; left: 50%; transform: translate(-50%, -50%); }

/* ===== Comunidad: Top Comprador grande a la izquierda, recientes/meta/giftcard a la derecha ===== */
#comunidad-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.comunidad-thanks {
  background: var(--bg-1);
  border: 1px solid rgb(255 255 255 / 0.06);
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  #comunidad-grid {
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas:
      "donor thanks"
      "donor recent"
      "donor goal"
      "donor gift";
  }
  #comunidad-grid > .widget-top-donator { grid-area: donor; }
  #comunidad-grid > .comunidad-thanks { grid-area: thanks; }
  #comunidad-grid > .widget-recent { grid-area: recent; }
  #comunidad-grid > .widget-goal { grid-area: goal; }
  #comunidad-grid > .widget-gift-card { grid-area: gift; }
}
#comunidad-grid > .widget-gift-card .widget-content {
  margin-top: 0;
  flex-direction: column !important;
  align-items: stretch !important;
}
#comunidad-grid > .widget-gift-card .widget-content > * {
  width: 100% !important;
  min-width: 0 !important;
}
/* ===== Decoracion de las tarjetas de Comunidad (top-donador/meta/recientes/giftcard) ===== */
#comunidad-grid > .widget {
  border-radius: 0.75rem !important;
  box-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
#comunidad-grid > .widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgb(0 0 0 / 0.45);
}
#comunidad-grid > .widget-top-donator {
  border-top: 4px solid var(--color-text-top-donator);
  background: linear-gradient(160deg, var(--color-top-donator), var(--color-top-donator-dark)) !important;
  flex-direction: row !important;
  align-items: center !important;
  min-height: 0 !important;
}
#comunidad-grid > .widget-goal {
  border-top: 4px solid var(--color-main);
}
#comunidad-grid > .widget-recent {
  border-top: 4px solid #a855f7;
}
#comunidad-grid > .widget-gift-card {
  border-top: 4px solid #22c55e;
}
#comunidad-grid > .widget .widget-title {
  letter-spacing: 0.04em;
}
#comunidad-grid > .widget:not(.widget-top-donator):not(.widget-goal):not(.widget-recent):not(.widget-gift-card):not(.comunidad-thanks) {
  display: none;
}

/* ===== Trust cards: hover + acento ===== */
.trust-card {
  border-top: 3px solid transparent;
  transition: all 0.25s ease;
}
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
}
.trust-card-pink { border-top-color: var(--color-main); }
.trust-card-purple { border-top-color: #a855f7; }
.trust-card-blue { border-top-color: #3b82f6; }
.trust-card-green { border-top-color: #22c55e; }
.trust-icon-circle { border: 2px solid; }
.trust-card-pink .trust-icon-circle { background: rgba(255,128,192,0.12); border-color: var(--color-main); color: var(--color-main-dark); }
.trust-card-purple .trust-icon-circle { background: rgba(168,85,247,0.12); border-color: #a855f7; color: #9333ea; }
.trust-card-blue .trust-icon-circle { background: rgba(59,130,246,0.12); border-color: #3b82f6; color: #2563eb; }
.trust-card-green .trust-icon-circle { background: rgba(34,197,94,0.12); border-color: #22c55e; color: #16a34a; }

/* ===== Step cards "Como comprar": color + wash de fondo por paso ===== */
.step-card {
  border-top: 4px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
}
.step-card-1 { border-top-color: var(--color-main); background: linear-gradient(180deg, rgba(255,128,192,0.08), #fff 45%); }
.step-card-2 { border-top-color: #a855f7; background: linear-gradient(180deg, rgba(168,85,247,0.08), #fff 45%); }
.step-card-3 { border-top-color: #22c55e; background: linear-gradient(180deg, rgba(34,197,94,0.08), #fff 45%); }

/* ===== FAQ: animacion y sombra ===== */
.faq-item {
  border-left: 3px solid transparent;
  transition: all 0.25s ease;
}
.faq-item:hover {
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
  transform: translateY(-2px);
}
.faq-item[open] {
  border-left-color: var(--color-main);
}
.faq-item summary i.fa-chevron-down {
  transition: transform 0.3s ease;
}

/* ===== CTA Modalidad: animaciones ===== */
@keyframes dragon-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}
.dragon-float {
  animation: dragon-float 5s ease-in-out infinite;
}
@keyframes sparkle-float {
  0%, 100% { opacity: 0.1; transform: scale(0.8); }
  50% { opacity: 0.5; transform: scale(1.2); }
}
.sparkle-float {
  animation: sparkle-float 2.5s ease-in-out infinite;
}

/* ===== Pagina /modalidades: tarjetas grandes ===== */
.modalidad-card::before,
.modalidad-big-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 65%);
  pointer-events: none;
}
.modalidad-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 100% 0;
  transition: background-position 0.7s ease;
  pointer-events: none;
}
.modalidad-big-card:hover .modalidad-shine {
  background-position: 0 100%;
}

/* ===== Tarjetas de producto: fondo con resplandor detras del icono ===== */
.product-image-glow {
  min-height: 140px;
}
.product-image-glow .glow-blob {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 9999px;
  background: radial-gradient(circle, var(--color-main) 0%, transparent 70%);
  opacity: 0.25;
  z-index: 0;
  transition: all 0.4s ease;
}
.store-product:hover .product-image-glow .glow-blob {
  opacity: 0.4;
  transform: scale(1.15);
}
.store-product .actions.product-actions {
  padding: 0 1rem 1.25rem 1rem;
}
.store-product .actions.product-actions .price {
  font-size: 0.95rem;
}
.store-product .quantity-field,
.store-product .btn-wide {
  border-radius: 9999px !important;
}
.store-product .image-link.btn-square {
  border-radius: 9999px !important;
}

/* ===== Pestanas de subcategorias (estilo Mineboom) ===== */
.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
  font-family: "Baloo 2", "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  background: var(--bg-2);
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.tab-pill:hover {
  background: var(--color-main);
  color: #fff;
}
.tab-pill-active {
  background: var(--color-main) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.25);
}

/* ===== HALLOWEEN SEASON START (decoraciones de temporada, quitar/editar después del 1 nov) ===== */
.halloween-decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  opacity: 0.55;
  animation: halloween-float 6s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.4));
}
@keyframes halloween-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

.halloween-countdown-box {
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  min-width: 56px;
  text-align: center;
  padding: 8px 6px;
  box-shadow: 0 8px 18px -6px rgb(0 0 0 / 0.45);
  backdrop-filter: blur(6px);
}
.cat-hero-blend {
  background: linear-gradient(to bottom, var(--bg-0), var(--bg-1) 72px, var(--bg-1) 100%);
}
/* Transicion suave del hero-glow (oscuro) hacia una seccion clara (bg-neutral-50) justo debajo,
   para que no se note un corte duro entre ambos fondos. */
.hero-glow-to-light {
  position: relative;
}
.hero-glow-to-light::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  background: linear-gradient(to bottom,
    rgba(13,13,13,0) 0%,
    rgba(13,13,13,0.55) 35%,
    rgba(13,13,13,0.9) 65%,
    #fafafa 100%);
  pointer-events: none;
}
/* ===== HALLOWEEN SEASON END ===== */

/* ===== "Cómo entrar al servidor" (bottom section) ===== */
.platform-tab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: inherit;
  color: var(--color-text-secondary);
  background: var(--bg-0);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  text-align: left;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.platform-tab:hover {
  background: var(--bg-2);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}
.platform-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.06);
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.platform-tab-title {
  font-family: "Baloo 2", "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.platform-tab-sub {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.7;
}
.platform-tab-active {
  background: var(--color-main);
  color: var(--color-accent);
  border-color: var(--color-main);
}
.platform-tab-active .platform-tab-icon {
  background: rgb(0 0 0 / 0.12);
  color: var(--color-accent);
}
/* Color distintivo por plataforma (icono), para diferenciarlas de un vistazo */
.platform-tab[data-platform="java"] .platform-tab-icon { color: #fb923c; }
.platform-tab[data-platform="mobile"] .platform-tab-icon { color: #38bdf8; }
.platform-tab[data-platform="console"] .platform-tab-icon { color: #4ade80; }
.platform-tab[data-platform="switch"] .platform-tab-icon { color: #f472b6; }
.platform-tab-active[data-platform] .platform-tab-icon { color: var(--color-accent); }
.platform-tab-check {
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  background: rgb(0 0 0 / 0.15);
  color: var(--color-accent);
  font-size: 0.6rem;
  margin-left: auto;
  flex-shrink: 0;
}
.platform-tab-active .platform-tab-check {
  display: flex;
}
.entrar-card {
  background: var(--bg-0);
  border: 1px solid rgb(255 255 255 / 0.06);
}
.entrar-mascot {
  animation: entrar-mascot-float 4s ease-in-out infinite;
}
@keyframes entrar-mascot-float {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-10px); }
}

.cat-description {
  border-top: 4px solid var(--color-main);
}

/* ===== Banner de Discord (seccion dedicada) ===== */
.discord-banner {
  background: linear-gradient(135deg, var(--color-discord), #4752c4);
}

/* ===== Card de "Ayuda y soporte" ===== */
.help-support-card {
  background: #fff;
  border-top: 4px solid var(--color-main);
}
.help-support-card .hero-blob {
  filter: blur(60px);
}
.entrar-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: rgb(255 255 255 / 0.03);
  border-radius: 0.5rem;
  padding: 0.85rem;
}
.entrar-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 9999px;
  background: var(--color-main);
  color: var(--color-accent);
  font-weight: 800;
  font-size: 0.8rem;
  flex-shrink: 0;
}
/* ===== Placeholder "shimmer" para imagenes mientras cargan =====
   ANTES esto ocultaba la imagen con opacity:0 hasta que terminara de cargar (o un timer de
   respaldo de 1.5s la forzaba a mostrarse igual). El problema real (reportado por el usuario,
   confirmado a mano forzando este estado): opacity:0 no "oculta" nada util, lo que se ve en vez
   de la imagen es el fondo solido (blanco, en las tarjetas de producto) del contenedor de atras -
   es decir, exactamente el "recuadro blanco" que se queria evitar. Y en conexiones lentas la
   imagen real puede tardar bastante mas de 1.5s en descargar, asi que ese recuadro blanco vacio
   quedaba visible todo ese tiempo.
   SOLUCION: en vez de ocultar la imagen, se le pone de fondo un shimmer animado (gradiente que se
   desliza) mientras no tiene la clase "img-loaded". Un <img> SI puede mostrar su propio
   background-color/gradient en el area donde todavia no hay bitmap pintado, asi que esto se ve
   como un placeholder de carga intencional en vez de un vacio en blanco, sin importar cuanto
   tarde la descarga real. El JS (ver main.js) le agrega "img-loaded" en cuanto termina de cargar
   (o al toque si ya estaba en cache), lo que quita el shimmer y deja ver la imagen real. ===== */
img:not(.img-loaded) {
  background-image: linear-gradient(110deg, rgba(0,0,0,0.06) 8%, rgba(0,0,0,0.12) 18%, rgba(0,0,0,0.06) 33%);
  background-size: 300% 100%;
  animation: img-skeleton-shimmer 1.4s linear infinite;
}
img.img-loaded {
  background: none;
  animation: none;
}
@keyframes img-skeleton-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

/* ===== Oculta los iconos de Font Awesome hasta que su tipografia (webfont) termine de
   descargar. Si no se hace esto, en la primera visita (sin cache) se puede ver un "cuadro"
   vacio en vez del icono durante una fraccion de segundo, en casi cualquier boton/tarjeta del
   sitio ya que se usan iconos en todos lados. El JS (ver main.js, initFontsFade) agrega la
   clase "fonts-loaded" al <html> cuando la tipografia esta lista. El timeout de 1.2s de abajo
   es un respaldo por si ese evento nunca llega, para que el icono nunca quede invisible. ===== */
html:not(.fonts-loaded) .fa-solid,
html:not(.fonts-loaded) .fa-regular,
html:not(.fonts-loaded) .fa-brands,
html:not(.fonts-loaded) .fa-light,
html:not(.fonts-loaded) .fa-thin,
html:not(.fonts-loaded) .fa-duotone {
  opacity: 0;
  animation: icon-force-show 0s 1.2s forwards;
}
html.fonts-loaded .fa-solid,
html.fonts-loaded .fa-regular,
html.fonts-loaded .fa-brands,
html.fonts-loaded .fa-light,
html.fonts-loaded .fa-thin,
html.fonts-loaded .fa-duotone {
  opacity: 1;
  transition: opacity 0.25s ease;
}
@keyframes icon-force-show {
  to { opacity: 1; }
}