/* Badge POPULAR — card destacada + strip checkout (#flowPlanStrip, más compacto). Panel LED + barrido + aura. */

@keyframes zcPopularBadgeGlowStrip {
  0%,
  100% {
    box-shadow:
      0 1px 6px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(210, 170, 255, 0.1),
      0 0 10px rgba(195, 130, 255, 0.32),
      0 0 18px rgba(165, 95, 245, 0.22),
      0 0 28px rgba(130, 65, 210, 0.12),
      0 0 38px rgba(100, 45, 180, 0.07) !important;
  }
  50% {
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(235, 210, 255, 0.14),
      0 0 14px rgba(225, 175, 255, 0.42),
      0 0 24px rgba(185, 110, 255, 0.28),
      0 0 36px rgba(145, 75, 230, 0.14),
      0 0 48px rgba(110, 55, 200, 0.08) !important;
  }
}

@keyframes zcPopularBadgeGlow {
  0%,
  100% {
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(210, 170, 255, 0.1),
      0 0 20px rgba(195, 130, 255, 0.38),
      0 0 40px rgba(165, 95, 245, 0.26),
      0 0 64px rgba(130, 65, 210, 0.16),
      0 0 88px rgba(100, 45, 180, 0.09) !important;
  }
  50% {
    box-shadow:
      0 3px 14px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(235, 210, 255, 0.16),
      0 0 28px rgba(225, 175, 255, 0.52),
      0 0 52px rgba(185, 110, 255, 0.34),
      0 0 82px rgba(145, 75, 230, 0.2),
      0 0 110px rgba(110, 55, 200, 0.12) !important;
  }
}

@keyframes zcPopularBadgeSweep {
  0% {
    background-position: 140% 50%;
    opacity: 0.2;
  }
  42% {
    opacity: 1;
  }
  58% {
    background-position: -40% 50%;
    opacity: 1;
  }
  100% {
    background-position: -40% 50%;
    opacity: 0.15;
  }
}

.section--planes.plans-section .plans.plans-grid:not(.plans--checkout) > article.plan-card.featured.plan-card--featured.perma-hero-card .plan-card__badge.popular-badge,
.section--planes.plans-section .plans.plans-grid.plans--checkout > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden) .plan-card__badge.popular-badge {
  --pb-ch: 7px;

  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 6 !important;

  min-width: 0 !important;
  width: max-content !important;
  max-width: calc(100% - 24px) !important;
  height: 39px !important;
  padding: 0 17px 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: none !important;
  border-radius: 0 !important;

  background:
    radial-gradient(125% 160% at 50% -5%, rgba(240, 215, 255, 0.42) 0%, rgba(200, 150, 255, 0.2) 38%, transparent 58%),
    linear-gradient(180deg, rgba(88, 48, 138, 0.96) 0%, rgba(58, 28, 102, 0.96) 48%, rgba(44, 20, 82, 0.98) 100%) !important;

  clip-path: polygon(
    var(--pb-ch) 0,
    calc(100% - var(--pb-ch)) 0,
    100% var(--pb-ch),
    100% calc(100% - var(--pb-ch)),
    calc(100% - var(--pb-ch)) 100%,
    var(--pb-ch) 100%,
    0 calc(100% - var(--pb-ch)),
    0 var(--pb-ch)
  ) !important;

  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 8px rgba(230, 200, 255, 0.75),
    0 0 16px rgba(170, 100, 245, 0.45) !important;

  overflow: visible !important;
  isolation: isolate !important;

  animation: zcPopularBadgeGlow 2.4s ease-in-out infinite !important;

  filter:
    drop-shadow(0 0 0.35px rgba(255, 250, 255, 0.98))
    drop-shadow(0 0 0.4px rgba(235, 200, 255, 0.95))
    drop-shadow(0 0 0.6px rgba(200, 140, 255, 0.95))
    drop-shadow(0 0 1px rgba(175, 110, 250, 0.9))
    drop-shadow(0 0 6px rgba(160, 90, 240, 0.55))
    drop-shadow(0 0 14px rgba(130, 70, 210, 0.38))
    drop-shadow(0 0 28px rgba(150, 85, 230, 0.28))
    drop-shadow(0 0 48px rgba(120, 60, 200, 0.18)) !important;
}

.section--planes.plans-section .plans.plans-grid:not(.plans--checkout) > article.plan-card.featured.plan-card--featured.perma-hero-card .plan-card__badge.popular-badge::before,
.section--planes.plans-section .plans.plans-grid.plans--checkout > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden) .plan-card__badge.popular-badge::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  --pb-in: 5px;
  clip-path: polygon(
    var(--pb-in) 0,
    calc(100% - var(--pb-in)) 0,
    100% var(--pb-in),
    100% calc(100% - var(--pb-in)),
    calc(100% - var(--pb-in)) 100%,
    var(--pb-in) 100%,
    0 calc(100% - var(--pb-in)),
    0 var(--pb-in)
  ) !important;
  border: 1px solid rgba(220, 185, 255, 0.42) !important;
  background: linear-gradient(180deg, rgba(120, 70, 170, 0.18) 0%, rgba(40, 18, 72, 0.12) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.section--planes.plans-section .plans.plans-grid:not(.plans--checkout) > article.plan-card.featured.plan-card--featured.perma-hero-card .plan-card__badge.popular-badge::after,
.section--planes.plans-section .plans.plans-grid.plans--checkout > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden) .plan-card__badge.popular-badge::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  clip-path: polygon(
    var(--pb-ch) 0,
    calc(100% - var(--pb-ch)) 0,
    100% var(--pb-ch),
    100% calc(100% - var(--pb-ch)),
    calc(100% - var(--pb-ch)) 100%,
    var(--pb-ch) 100%,
    0 calc(100% - var(--pb-ch)),
    0 var(--pb-ch)
  ) !important;

  background: linear-gradient(
    108deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 252, 255, 0.58) 50%,
    rgba(240, 210, 255, 0.4) 53%,
    transparent 58%,
    transparent 100%
  ) !important;
  background-size: 260% 100% !important;
  background-position: 140% 50% !important;
  mix-blend-mode: screen !important;

  animation: zcPopularBadgeSweep 2.85s cubic-bezier(0.45, 0, 0.25, 1) infinite !important;
}

.section--planes.plans-section .plans.plans-grid:not(.plans--checkout) > article.plan-card.featured.plan-card--featured.perma-hero-card .plan-card__badge.popular-badge span,
.section--planes.plans-section .plans.plans-grid.plans--checkout > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden) .plan-card__badge.popular-badge span {
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 8px rgba(230, 200, 255, 0.75),
    0 0 14px rgba(150, 90, 230, 0.45) !important;
}

.section--planes.plans-section .plans.plans-grid:not(.plans--checkout) > article.plan-card.featured.plan-card--featured.perma-hero-card .plan-card__badge.popular-badge:hover,
.section--planes.plans-section .plans.plans-grid.plans--checkout > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden) .plan-card__badge.popular-badge:hover {
  filter:
    drop-shadow(0 0 0.4px rgba(255, 250, 255, 1))
    drop-shadow(0 0 0.5px rgba(240, 215, 255, 1))
    drop-shadow(0 0 0.7px rgba(210, 160, 255, 1))
    drop-shadow(0 0 1.15px rgba(185, 120, 255, 0.98))
    drop-shadow(0 0 7px rgba(170, 100, 245, 0.62))
    drop-shadow(0 0 16px rgba(140, 75, 220, 0.42))
    drop-shadow(0 0 32px rgba(160, 95, 240, 0.32))
    drop-shadow(0 0 52px rgba(125, 65, 205, 0.22)) !important;
}

/* Strip «Tu plan»: mismo lenguaje visual que la card, escala reducida (inline en meta-top). */
#flowPlanStrip .flow-plan-strip__meta-top .flow-plan-strip__popular.flow-plan-strip__popular.plan-card__badge.popular-badge {
  --pb-ch: 4px;

  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;

  min-width: 0 !important;
  width: max-content !important;
  max-width: 100% !important;
  height: 24px !important;
  padding: 0 11px 0 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: none !important;
  border-radius: 0 !important;

  background:
    radial-gradient(125% 160% at 50% -5%, rgba(240, 215, 255, 0.38) 0%, rgba(200, 150, 255, 0.18) 38%, transparent 58%),
    linear-gradient(180deg, rgba(88, 48, 138, 0.96) 0%, rgba(58, 28, 102, 0.96) 48%, rgba(44, 20, 82, 0.98) 100%) !important;

  clip-path: polygon(
    var(--pb-ch) 0,
    calc(100% - var(--pb-ch)) 0,
    100% var(--pb-ch),
    100% calc(100% - var(--pb-ch)),
    calc(100% - var(--pb-ch)) 100%,
    var(--pb-ch) 100%,
    0 calc(100% - var(--pb-ch)),
    0 var(--pb-ch)
  ) !important;

  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 5px rgba(230, 200, 255, 0.7),
    0 0 10px rgba(170, 100, 245, 0.4) !important;

  overflow: visible !important;
  isolation: isolate !important;

  animation: zcPopularBadgeGlowStrip 2.4s ease-in-out infinite !important;

  filter:
    drop-shadow(0 0 0.25px rgba(255, 250, 255, 0.98))
    drop-shadow(0 0 0.3px rgba(235, 200, 255, 0.95))
    drop-shadow(0 0 0.45px rgba(200, 140, 255, 0.95))
    drop-shadow(0 0 0.75px rgba(175, 110, 250, 0.9))
    drop-shadow(0 0 4px rgba(160, 90, 240, 0.5))
    drop-shadow(0 0 9px rgba(130, 70, 210, 0.34))
    drop-shadow(0 0 18px rgba(150, 85, 230, 0.24))
    drop-shadow(0 0 30px rgba(120, 60, 200, 0.14)) !important;
}

#flowPlanStrip .flow-plan-strip__meta-top .flow-plan-strip__popular.flow-plan-strip__popular.plan-card__badge.popular-badge::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  --pb-in: 3px;
  clip-path: polygon(
    var(--pb-in) 0,
    calc(100% - var(--pb-in)) 0,
    100% var(--pb-in),
    100% calc(100% - var(--pb-in)),
    calc(100% - var(--pb-in)) 100%,
    var(--pb-in) 100%,
    0 calc(100% - var(--pb-in)),
    0 var(--pb-in)
  ) !important;
  border: 1px solid rgba(220, 185, 255, 0.4) !important;
  background: linear-gradient(180deg, rgba(120, 70, 170, 0.18) 0%, rgba(40, 18, 72, 0.12) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#flowPlanStrip .flow-plan-strip__meta-top .flow-plan-strip__popular.flow-plan-strip__popular.plan-card__badge.popular-badge::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  clip-path: polygon(
    var(--pb-ch) 0,
    calc(100% - var(--pb-ch)) 0,
    100% var(--pb-ch),
    100% calc(100% - var(--pb-ch)),
    calc(100% - var(--pb-ch)) 100%,
    var(--pb-ch) 100%,
    0 calc(100% - var(--pb-ch)),
    0 var(--pb-ch)
  ) !important;

  background: linear-gradient(
    108deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 252, 255, 0.55) 50%,
    rgba(240, 210, 255, 0.38) 53%,
    transparent 58%,
    transparent 100%
  ) !important;
  background-size: 260% 100% !important;
  background-position: 140% 50% !important;
  mix-blend-mode: screen !important;

  animation: zcPopularBadgeSweep 2.85s cubic-bezier(0.45, 0, 0.25, 1) infinite !important;
}

#flowPlanStrip .flow-plan-strip__meta-top .flow-plan-strip__popular.flow-plan-strip__popular.plan-card__badge.popular-badge span {
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 5px rgba(230, 200, 255, 0.7),
    0 0 9px rgba(150, 90, 230, 0.4) !important;
}

#flowPlanStrip .flow-plan-strip__meta-top .flow-plan-strip__popular.flow-plan-strip__popular.plan-card__badge.popular-badge:hover {
  filter:
    drop-shadow(0 0 0.3px rgba(255, 250, 255, 1))
    drop-shadow(0 0 0.4px rgba(240, 215, 255, 1))
    drop-shadow(0 0 0.55px rgba(210, 160, 255, 1))
    drop-shadow(0 0 0.9px rgba(185, 120, 255, 0.98))
    drop-shadow(0 0 5px rgba(170, 100, 245, 0.58))
    drop-shadow(0 0 11px rgba(140, 75, 220, 0.38))
    drop-shadow(0 0 22px rgba(160, 95, 240, 0.28))
    drop-shadow(0 0 34px rgba(125, 65, 205, 0.18)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .section--planes.plans-section .plans.plans-grid:not(.plans--checkout) > article.plan-card.featured.plan-card--featured.perma-hero-card .plan-card__badge.popular-badge,
  .section--planes.plans-section .plans.plans-grid.plans--checkout > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden) .plan-card__badge.popular-badge {
    animation: none !important;
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.28),
      0 0 22px rgba(195, 130, 255, 0.36),
      0 0 48px rgba(150, 80, 220, 0.2),
      0 0 72px rgba(110, 55, 190, 0.12) !important;
  }

  .section--planes.plans-section .plans.plans-grid:not(.plans--checkout) > article.plan-card.featured.plan-card--featured.perma-hero-card .plan-card__badge.popular-badge::after,
  .section--planes.plans-section .plans.plans-grid.plans--checkout > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden) .plan-card__badge.popular-badge::after {
    animation: none !important;
    opacity: 0.35 !important;
    background-position: 50% 50% !important;
  }

  #flowPlanStrip .flow-plan-strip__meta-top .flow-plan-strip__popular.flow-plan-strip__popular.plan-card__badge.popular-badge {
    animation: none !important;
    box-shadow:
      0 1px 6px rgba(0, 0, 0, 0.26),
      0 0 12px rgba(195, 130, 255, 0.3),
      0 0 22px rgba(150, 80, 220, 0.16),
      0 0 32px rgba(110, 55, 190, 0.09) !important;
  }

  #flowPlanStrip .flow-plan-strip__meta-top .flow-plan-strip__popular.flow-plan-strip__popular.plan-card__badge.popular-badge::after {
    animation: none !important;
    opacity: 0.35 !important;
    background-position: 50% 50% !important;
  }
}