/* ═══════════════════════════════════════════════════════════════
   PROMO CARDS PRO — Diseño premium para anuncios patrocinados
   Bond Commerce — Se carga globalmente para todas las secciones
   ═══════════════════════════════════════════════════════════════ */

/* Animations */
@keyframes promoShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes promoGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(99,102,241,0.15), 0 4px 20px rgba(0,0,0,0.08); }
  50% { box-shadow: 0 0 25px rgba(99,102,241,0.25), 0 6px 30px rgba(0,0,0,0.12); }
}

/* ─── Card base ──────────────────────────────────────────────── */
.promo-card-pro {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: promoGlow 4s ease-in-out infinite;
}

/* Animated gradient border */
.promo-card-pro::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1.5px;
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 300% 300%;
  animation: promoShimmer 6s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

.promo-card-pro:hover {
  transform: translateY(-6px) scale(1.02);
  animation: none;
  box-shadow: 0 20px 40px rgba(99,102,241,0.25), 0 0 30px rgba(139,92,246,0.15);
}

/* ─── Inner content wrapper ──────────────────────────────────── */
.promo-card-pro .promo-inner {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
  border-radius: 15px;
  background: linear-gradient(165deg, #1a1d3a 0%, #151730 40%, #10122a 100%);
}

body:not(.dark-mode) .promo-card-pro .promo-inner,
body.light-mode .promo-card-pro .promo-inner {
  background: linear-gradient(165deg, #fefefe 0%, #f8f7ff 40%, #f3f1ff 100%);
}

/* ─── Header: Logo + Nombre + Badge ──────────────────────────── */
.promo-card-pro .promo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.promo-card-pro .promo-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid rgba(99,102,241,0.2);
}

.promo-card-pro .promo-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-card-pro .promo-logo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 10px;
}

.promo-card-pro .promo-header-info {
  flex: 1;
  min-width: 0;
}

.promo-card-pro .promo-dist-name {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e2e8f0;
}

body:not(.dark-mode) .promo-card-pro .promo-dist-name,
body.light-mode .promo-card-pro .promo-dist-name {
  color: #1e293b;
}

/* ─── Sponsored badge ────────────────────────────────────────── */
.promo-card-pro .promo-badge-sponsored {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(99,102,241,0.15);
  color: #818cf8;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  margin-top: 2px;
}

body:not(.dark-mode) .promo-card-pro .promo-badge-sponsored,
body.light-mode .promo-card-pro .promo-badge-sponsored {
  background: rgba(79,70,229,0.08);
  color: #6366f1;
}

/* ─── Title ──────────────────────────────────────────────────── */
.promo-card-pro .promo-titulo {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 6px;
  color: #c4b5fd;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body:not(.dark-mode) .promo-card-pro .promo-titulo,
body.light-mode .promo-card-pro .promo-titulo {
  color: #4c1d95;
}

/* ─── Subtitle ───────────────────────────────────────────────── */
.promo-card-pro .promo-subtitulo {
  font-size: 0.65rem;
  line-height: 1.4;
  color: #94a3b8;
  flex: 1;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body:not(.dark-mode) .promo-card-pro .promo-subtitulo,
body.light-mode .promo-card-pro .promo-subtitulo {
  color: #64748b;
}

/* ─── Address ────────────────────────────────────────────────── */
.promo-card-pro .promo-address {
  font-size: 0.6rem;
  color: #64748b;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.3;
}

body:not(.dark-mode) .promo-card-pro .promo-address,
body.light-mode .promo-card-pro .promo-address {
  color: #9ca3af;
}

.promo-card-pro .promo-address .pin-icon {
  flex-shrink: 0;
  font-size: 0.6rem;
}

.promo-card-pro .promo-address-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Feature badge (Ofertas activas, +50 productos, etc) ──── */
.promo-card-pro .promo-feature-badge,
.promo-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  margin-bottom: 8px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.06);
}

body:not(.dark-mode) .promo-feature-badge {
  border-color: rgba(0,0,0,0.04);
}

/* ─── Footer & CTA button ────────────────────────────────────── */
.promo-card-pro .promo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.promo-card-pro .promo-cta,
.promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  transition: all 0.3s;
  border: none;
  text-decoration: none;
}

body:not(.dark-mode) .promo-card-pro .promo-cta,
body.light-mode .promo-card-pro .promo-cta {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.promo-card-pro:hover .promo-cta {
  background: linear-gradient(135deg, #764ba2, #667eea);
  box-shadow: 0 4px 15px rgba(102,126,234,0.4);
}

.promo-card-pro .promo-cta-arrow,
.promo-cta-arrow {
  transition: transform 0.3s;
  font-size: 0.65rem;
}

.promo-card-pro:hover .promo-cta-arrow {
  transform: translateX(3px);
}

/* ─── Decorative accent glow ─────────────────────────────────── */
.promo-card-pro .promo-accent-glow,
.promo-accent-glow {
  position: absolute;
  width: 60%;
  height: 50%;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.08;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -10%;
  right: -15%;
  z-index: 0;
  pointer-events: none;
}

body:not(.dark-mode) .promo-card-pro .promo-accent-glow,
body.light-mode .promo-card-pro .promo-accent-glow {
  opacity: 0.05;
}

/* ─── Camuflada entre ofertas ────────────────────────────────── */
.promo-card-camuflada.promo-card-pro {
  min-height: 180px;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT GRID PROMO CARD — .pgrid-*
   Card compacta intercalada en el grid de productos
   ═══════════════════════════════════════════════════════════════ */

/* Hero area */
.pgrid-hero {
  background: linear-gradient(160deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 130px !important;
  height: auto !important;
  padding: 18px 14px 14px !important;
  position: relative;
  overflow: hidden;
  gap: 6px;
}

body:not(.dark-mode) .pgrid-hero,
body.light-mode .pgrid-hero {
  background: linear-gradient(160deg, #eef2ff 0%, #e0e7ff 50%, #eef2ff 100%) !important;
}

/* Decorative circles */
.pgrid-deco-circle {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  opacity: 0.08;
  top: -25px;
  right: -20px;
  pointer-events: none;
}

.pgrid-deco-circle--sm {
  width: 40px;
  height: 40px;
  top: auto;
  right: auto;
  bottom: -10px;
  left: -10px;
  opacity: 0.06;
}

/* Sponsor tag */
.pgrid-sponsor-tag {
  position: absolute;
  top: 7px;
  left: 7px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(99,102,241,0.2);
  color: #a5b4fc;
  backdrop-filter: blur(4px);
  z-index: 2;
}

body:not(.dark-mode) .pgrid-sponsor-tag,
body.light-mode .pgrid-sponsor-tag {
  background: rgba(79,70,229,0.1);
  color: #6366f1;
}

/* Logo */
.pgrid-logo-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(99,102,241,0.25);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.pgrid-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pgrid-logo-fb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

/* Name under logo */
.pgrid-nombre {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.dark-mode) .pgrid-nombre,
body.light-mode .pgrid-nombre {
  color: #1e293b;
}

/* Body */
.pgrid-body {
  display: flex !important;
  flex-direction: column;
  padding: 10px 12px 12px !important;
  flex: 1;
  gap: 4px;
}

/* Title override */
.pgrid-titulo {
  cursor: pointer;
  color: #c4b5fd !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-bottom: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body:not(.dark-mode) .pgrid-titulo,
body.light-mode .pgrid-titulo {
  color: #4c1d95 !important;
}

/* Subtitle */
.pgrid-sub {
  font-size: 0.7rem;
  line-height: 1.35;
  color: #94a3b8;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body:not(.dark-mode) .pgrid-sub,
body.light-mode .pgrid-sub {
  color: #64748b;
}

/* Badge row */
.pgrid-badge-row {
  padding: 2px 0;
}

/* CTA row */
.pgrid-cta-row {
  margin-top: auto;
  padding-top: 6px;
}

.pgrid-cta {
  width: 100%;
  justify-content: center;
  padding: 6px 14px !important;
  font-size: 0.72rem !important;
  border-radius: 8px;
}

.bc-promo-card-inline:hover .pgrid-cta {
  background: linear-gradient(135deg, #764ba2, #667eea);
  box-shadow: 0 4px 15px rgba(102,126,234,0.4);
}

.bc-promo-card-inline:hover .promo-cta-arrow {
  transform: translateX(3px);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .promo-card-pro .promo-logo {
    width: 34px;
    height: 34px;
  }
  .promo-card-pro .promo-dist-name {
    font-size: 0.75rem;
  }
  .promo-card-pro .promo-titulo {
    font-size: 0.72rem;
  }
  .promo-card-pro .promo-cta {
    padding: 4px 10px;
    font-size: 0.65rem;
  }
  .pgrid-hero {
    min-height: 110px !important;
    padding: 14px 10px 10px !important;
  }
  .pgrid-logo-wrap {
    width: 44px;
    height: 44px;
  }
  .pgrid-nombre {
    font-size: 0.72rem;
  }
}