/* Premium Pagination */
    .premium-pagination-wrapper {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 50px;
      padding: 8px 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.6);
    }
    .nav-arrow { display: inline; }
    .page-text { display: inline; }
    .page-num { display: none; }
    .premium-pagination-list {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;
      gap: 5px;
    }
    @media (max-width: 768px) {
      .page-text { display: none; }
      .page-num { display: inline; }
      .nav-arrow { display: none; }
      .premium-pagination-list { justify-content: center; }
      .premium-pagination-wrapper {
        max-width: 100%;
        padding: 5px;
        flex-wrap: nowrap;
        border-radius: 30px;
      }
      .premium-pagination-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;        
      }
      .premium-pagination-list::-webkit-scrollbar {
        display: none;
      }
      .premium-page-link {
        padding: 6px 14px;
        font-size: 0.85rem;
        white-space: nowrap;
      }
    }
    .premium-page-link {
      display: inline-block;
      padding: 10px 22px;
      border-radius: 30px;
      color: #0b1a4a;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.95rem;
      transition: all 0.3s ease;
    }
    .premium-page-link:hover {
      color: #0c2364;
      background: rgba(12, 35, 100, 0.08);
    }
    .premium-page-link.active {
      background: linear-gradient(135deg, #0d2870, #1a42a0);
      color: white;
      box-shadow: 0 4px 14px rgba(13, 40, 112, 0.4);
    }

    /* Zoom overlay */
    .product-image-wrapper { position: relative; overflow: hidden; cursor: pointer; }
    .product-image-wrapper .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.2);
      opacity: 0;
      transition: opacity .25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1rem;   
      z-index: 2;
    }
    .product-image-wrapper:hover .overlay { opacity: 1; }

    /* Estilo del fondo Noche Mágica Gloria (Midnight Blue Studio Glow & Stars) */
    .gloria-section {
      background-color: #0a112c;
      background-image:
        radial-gradient(1.5px 1.5px at 15% 15%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2px 2px at 85% 25%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1.5px 1.5px at 30% 65%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 75% 75%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 50% 90%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2px 2px at 90% 95%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 10% 85%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(ellipse 100% 700px at 50% 320px, #1c368c 0%, #10215b 35%, rgba(10, 17, 44, 0) 75%),
        radial-gradient(ellipse 100% 700px at 50% 920px, #1c368c 0%, #10215b 35%, rgba(10, 17, 44, 0) 75%),
        radial-gradient(ellipse 100% 700px at 50% 1500px, #1c368c 0%, #10215b 35%, rgba(10, 17, 44, 0) 75%),
        linear-gradient(180deg, #101a44 0%, #090e24 50%, #101a44 100%);
      position: relative;
    }

    /* Fondo especial chocolate para Pasión */
    #page-3.gloria-section {
      background-color: #120f24;
      background-image:
        radial-gradient(1.5px 1.5px at 20% 20%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 80% 30%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(ellipse 100% 700px at 50% 320px, #362244 0%, #20142c 35%, rgba(18, 15, 36, 0) 75%),
        radial-gradient(ellipse 100% 700px at 50% 920px, #362244 0%, #20142c 35%, rgba(18, 15, 36, 0) 75%),
        linear-gradient(180deg, #1c152c 0%, #0d0a17 50%, #1c152c 100%);
    }

    /* Títulos y distintivos Gloria */
    .gloria-title-pill {
      background: linear-gradient(135deg, #0d2870, #081a4a);
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-radius: 50px;
      padding: 10px 35px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      display: inline-block;
    }
    .gloria-title-pill h2 {
      margin: 0;
      color: #ffffff;
      font-weight: 800;
      font-size: 1.8rem;
      letter-spacing: 0.5px;
    }
    .gloria-prod-name {
      color: #ffffff;
      font-size: 2.3rem;
      font-weight: 800;
      line-height: 1.2;
      text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }
    .gloria-badge-presentation {
      background: #081745;
      color: #ffffff;
      font-weight: 700;
      font-size: 1.15rem;
      padding: 8px 24px;
      border-radius: 8px;
      display: inline-block;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .promo-header-tag {
      font-size: 1.15rem;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 1px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .promo-header-tag::before,
    .promo-header-tag::after {
      content: "";
      display: inline-block;
      width: 45px;
      height: 1px;
      border-top: 2px dashed rgba(255, 255, 255, 0.45);
    }

    /* Price boxes inspiradas en el catálogo de las imágenes */
    .gloria-price-card {
      display: flex;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.25);
      max-width: 290px;
    }
    .gloria-price-col {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .gloria-price-col:first-child {
      border-right: 1px solid #d0d7e5;
    }
    .gloria-price-head {
      background: #081745;
      color: #ffffff;
      font-size: 0.85rem;
      font-weight: 700;
      text-align: center;
      padding: 8px 6px;
      line-height: 1.25;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .gloria-price-val {
      background: #ffffff;
      color: #081745;
      font-size: 1.35rem;
      font-weight: 800;
      text-align: center;
      padding: 10px 6px;
    }

    .hr-dashed {
      border-top: 2px dashed rgba(255, 255, 255, 0.25) !important;
      opacity: 1;
      margin: 3.5rem 0;
    }
.gloria-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #0a112c;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 6px 18px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}


.premium-pagination-group .premium-page-link:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.premium-pagination-group .premium-page-link:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.premium-pagination-group {
    gap: 0 !important;
}
@media (max-width: 768px) {
  .premium-pagination-group {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .premium-pagination-group::-webkit-scrollbar {
    display: none;
  }
  .premium-pagination-wrapper {
    padding: 0;
  }
}


  .premium-pagination-group .page-num {
    display: none !important;
  }
}

/* Premium Pagination Grid/Wrap Styles */
.premium-pagination-wrapper {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.premium-pagination-group {
  display: flex;
  flex-wrap: wrap !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
}
.premium-pagination-group .premium-page-link {
  flex: 1 1 auto;
  border-radius: 0 !important;
  margin: 0 0 -1px -1px !important;
  border: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 768px) {
  .premium-pagination-group .page-text {
    display: inline !important;
  }
  .premium-pagination-group .page-num {
    display: none !important;
  }
}