html, body {
    max-width: 100%;
    overflow-x: hidden;
}
  .hero-bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(191 64 191 / 5%);
    z-index: -2;
  }
  .bg-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 40% 40%, rgb(191 64 191 / 15%), transparent 70%);
    z-index: -1;
    pointer-events: none;
    filter: blur(100px);
  }

  @media (prefers-reduced-motion: reduce) {
    .bg-glow {
      filter: blur(50px);
    }
  }
.feat-wrapper { padding:5rem 1rem; color:white; }
.feat-container { max-width:1400px; margin:0 auto; }
.feat-header { text-align:center; margin-bottom:4rem; }
.feat-badge {
    display:inline-flex; align-items:center; gap:10px; padding:10px 20px;
    background:rgba(147,51,234,0.1); border:1px solid rgba(147,51,234,0.3);
    border-radius:9999px; color:#c084fc; font-weight:600; font-size:0.9rem;
    backdrop-filter:blur(8px); margin-bottom:1.5rem;
  }
.center-title {
  width: 100% !important;
  text-align: center !important;
  font-size: 3.8rem !important;
  font-weight: 900 !important;
  margin: 0 auto 4rem auto !important;
  padding: 0 !important;
  display: block !important;

  background: linear-gradient(to right, rgb(191 64 191), rgb(0 0 0)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

@media (max-width: 768px) {
  .center-title {
    font-size: 2.8rem !important;
    margin-bottom: 3rem !important;
  }
}
@media (max-width: 480px) {
  .center-title {
    font-size: 2.4rem !important;
  }
}
.pln-main-badge {
    display:inline-flex; align-items:center; gap:12px; padding:12px 24px;
    background:rgb(191 64 191 / 12%); border:1px solid rgb(191 64 191 / 35%);
    border-radius:9999px; color:rgb(191 64 191); font-weight:700; font-size:1rem;
    backdrop-filter:blur(12px); margin-bottom:2rem;
  }
.pln-main-badge svg { width:22px; height:22px; }
.global-title {
  font-size: 3.8rem;
  font-weight: 900;
  margin: 0 0 1rem;
  background: linear-gradient(to right, #ffffff, rgb(191 64 191));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 28px;
    background: rgb(191 64 191 / 12%);
    border: 1px solid rgb(191 64 191 / 35%);
    border-radius: 9999px;
    color: rgb(191 64 191);
    font-weight: 700;
    font-size: 1rem;
    backdrop-filter: blur(12px);
    margin-bottom: 2rem;
  }
.pln-main-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: rgb(191 64 191 / 12%);
  border: 1px solid rgb(191 64 191 / 35%);
  border-radius: 9999px;
  color: rgb(191 64 191);
  font-weight: 700;
  font-size: 0.95rem;
  backdrop-filter: blur(10px);
  margin-bottom: 1.5rem;
}
.pln-main-badge svg { 
  width: 20px; 
  height: 20px; 
}
.page-badge svg { width: 22px; height: 22px; }
.feedback-slider-wrapper.second-row.fade-mask { padding-top: 20px; }
a { text-decoration:none !important; }

// Chatgpt css
.discord-panel-wrap { padding: 3.5rem 1rem; }

.discord-panel{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  padding: 2.5rem;
  border-radius: 28px;
  border: 1px solid rgba(191,64,191,.22);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 120px rgba(0,0,0,.55);
  position: relative;
  overflow: hidden;
}

.discord-panel:before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 30%, rgba(191,64,191,.22), transparent 55%),
    radial-gradient(circle at 80% 60%, rgba(191,64,191,.12), transparent 55%);
  filter: blur(70px);
  z-index:0;
}

.discord-panel > *{ position:relative; z-index:1; }

.dp-top{ grid-column: 1 / -1; }

.dp-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color: #fff;
  font-weight:700;
  font-size:.85rem;
}

.dp-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgb(191 64 191);
  box-shadow: 0 0 18px rgba(191,64,191,.8);
}

.dp-title{
  font-size: 3.1rem;
  line-height: 1.05;
  margin: .6rem 0 1rem;
  color: #fff;
  font-weight: 900;
}

.dp-accent{ color: rgb(191 64 191); }

.dp-caret{
  color: rgb(191 64 191);
  margin-left: 4px;
}

.dp-desc{
  color: rgba(255,255,255,.72);
  max-width: 640px;
}

.dp-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 1.4rem 0 1.8rem;
}

.dp-badge{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.85);
  font-weight:700;
  font-size:.9rem;
}

.dp-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(191,64,191,.18);
  border: 1px solid rgba(191,64,191,.35);
  color: #ffffff;
  font-weight: 900;
  min-width: 260px;
  box-shadow: 0 0 40px rgba(191,64,191,.18);
}

.dp-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,10,16,.55);
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  padding: 16px;
}

.dp-windowbar{
  display:flex;
  gap:8px;
  margin-bottom: 12px;
}

.dp-windowbar span{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.20);
}

.dp-card-head{
  display:flex;
  align-items:center;
  gap:12px;
}

.dp-avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(191,64,191,.18);
  border: 1px solid rgba(191,64,191,.35);
  font-weight: 900;
  color:#fff;
}

.dp-server{ font-weight: 900; color:#fff; }

.dp-sub{
  font-size:.85rem;
  color: rgba(255,255,255,.65);
  margin-top:2px;
}

.dp-join-mini{
  margin-left:auto;
  padding:10px 16px;
  border-radius:999px;
  background: rgba(191,64,191,.18);
  border: 1px solid rgba(191,64,191,.35);
  color:#fff;
  font-weight:900;
  box-shadow: 0 0 30px rgba(191,64,191,.12);
}

.dp-online{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.85);
  font-weight:800;
}

.dp-online-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgb(191 64 191);
  box-shadow: 0 0 16px rgba(191,64,191,.7);
}

.dp-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top: 16px;
}

.dp-stat{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.22);
  padding: 14px;
}

.dp-num{
  font-size: 1.6rem;
  font-weight: 900;
  color:#fff;
}

.dp-lbl{
  font-size:.82rem;
  color: rgba(255,255,255,.65);
  margin-top: 4px;
}

@media (max-width: 980px){
  .discord-panel{ grid-template-columns: 1fr; }
  .dp-title{ font-size: 2.3rem; }
}

.modal-backdrop,
.overlay,
.backdrop {
  pointer-events: none;
}

.modal-backdrop.show {
  pointer-events: auto;
}

/* Solo desactiva el backdrop cuando NO hay modal visible */
body.no-modal-visible .modal-backdrop{
  display: none !important;
  pointer-events: none !important;
}

body.no-modal-visible.modal-open{
  overflow: auto !important;
  padding-right: 0 !important;
}

/* Forzar visibilidad del contenido (por si .editor tiene estilos raros) */
.mm-terms__content,
.mm-terms__content *{
  color: rgba(255,255,255,0.88) !important;
}

.mm-terms__content{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Estado vacío bonito */
.mm-terms__empty{
  text-align: center;
  padding: 18px 10px;
}

.mm-terms__empty h3{
  margin: 0 0 8px 0;
  color: #bf40bf;
  font-weight: 800;
}

.mm-terms__empty p{
  margin: 0;
  opacity: .75;
}

/* 4 productos por fila (desktop) */
.products-page .products-grid,
.products-page .products-list,
#products .row,
.products .row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

/* Quita el comportamiento de columnas de Bootstrap dentro */
.products-page .products-grid > *,
.products-page .products-list > *,
#products .row > *,
.products .row > * {
  width: auto !important;
  max-width: none !important;
}

/* Responsive */
@media (max-width: 1200px){
  .products-page .products-grid,
  .products-page .products-list,
  #products .row,
  .products .row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 992px){
  .products-page .products-grid,
  .products-page .products-list,
  #products .row,
  .products .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 576px){
  .products-page .products-grid,
  .products-page .products-list,
  #products .row,
  .products .row {
    grid-template-columns: 1fr !important;
  }
}

/* ===============================
   PRODUCT GRID – NEBULA STYLE
   =============================== */

/* Contenedor más ancho */
.products-page .container,
.products-page .container-lg,
.products-page .container-xl {
  max-width: 1400px !important;
}

/* Grid de productos – 4 columnas */
.products-page .products-grid,
.products-page .products-list,
#products .row,
.products .row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

/* Quitar restricciones de ancho */
.products-page .products-grid > *,
.products-page .products-list > *,
#products .row > *,
.products .row > * {
  width: 100% !important;
  max-width: none !important;
}

/* Cards ocupan toda la celda */
.product-card,
.product-item,
.products-page .card {
  width: 100% !important;
  max-width: none !important;
  padding: 16px !important;
}

/* Responsive */
@media (max-width: 1200px){
  .products-page .products-grid,
  .products-page .products-list,
  #products .row,
  .products .row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 992px){
  .products-page .products-grid,
  .products-page .products-list,
  #products .row,
  .products .row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px){
  .products-page .products-grid,
  .products-page .products-list,
  #products .row,
  .products .row {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Remove divider line under product title + compact spacing ===== */

/* 1) Quita HR si existe */
.product-card-purge hr {
  display: none !important;
}

/* 2) Quita líneas hechas con pseudo-elementos */
.product-card-purge .product-content-purge::before,
.product-card-purge .product-content-purge::after {
  content: none !important;
  display: none !important;
}

/* 3) Quita el border-top que suele hacer esa línea */
.product-card-purge .product-content-purge,
.product-card-purge .product-content-purge > * {
  border-top: 0 !important;
}

/* 4) Reduce el espacio entre título y botones/precio */
.product-card-purge .product-content-purge {
  padding-top: 16px !important;
  padding-bottom: 14px !important;
}

.product-card-purge .product-content-purge h1,
.product-card-purge .product-content-purge h2,
.product-card-purge .product-content-purge h3,
.product-card-purge .product-content-purge h4,
.product-card-purge .product-content-purge .product-title {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}

/* 5) Si el contenedor de botones tiene margen/padding arriba, lo bajamos */
.product-card-purge .product-actions,
.product-card-purge .product-buttons,
.product-card-purge .product-bottom,
.product-card-purge .product-footer {
  margin-top: 8px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Quitar la línea separadora bajo el título del producto */
[data-component-id="products"] .product-content-purge .title-divider{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Acercar título y botones/precio (compactar) */
[data-component-id="products"] .product-content-purge{
  padding-top: 12px !important;
  padding-bottom: 10px !important;
}

[data-component-id="products"] .product-content-purge .title-with-badge{
  margin-bottom: 8px !important; /* baja/sube a tu gusto */
}

/* Por si el separador era el que daba espacio: quitar margen extra a los botones */
[data-component-id="products"] .product-content-purge .cta-buttons-purge{
  margin-top: 8px !important; /* pon 6px o 4px si lo quieres aún más pegado */
}