/* Club Leveling · experiencia visual premium 2026 */
.club-plan-card.membership-plan-card {
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .38s ease;
}
.club-plan-card.membership-plan-card:hover {
  transform: translateY(-9px) scale(1.012);
  box-shadow: 0 30px 74px rgba(7,7,7,.3), 0 0 55px var(--plan-glow);
}
.club-plan-card.membership-plan-card::before {
  inset: 9px;
  border-width: 1px;
  box-shadow: inset 0 0 30px color-mix(in srgb,var(--plan-accent) 7%,transparent);
}
.club-plan-card.membership-plan-card::after {
  right: 18px;
  bottom: -31px;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 158px;
  opacity: .15;
  text-shadow: 0 0 34px var(--plan-glow);
}
.club-plan-card.theme-classic::after { content: "✦"; }
.club-plan-card.theme-diamond::after { content: "◆"; }
.club-plan-card.theme-obsidian::after { content: "◈"; transform: rotate(14deg); }
.club-plan-card.theme-ruby::after { content: "♦"; }
.club-plan-card.theme-platinum::after { content: "◎"; }
.club-plan-emblem {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  margin-top: 28px;
  padding: 8px 12px 8px 9px;
  border: 1px solid var(--plan-line);
  border-radius: 999px;
  background: color-mix(in srgb,var(--plan-accent) 8%,rgba(0,0,0,.36));
  backdrop-filter: blur(10px);
  box-shadow: 0 0 24px color-mix(in srgb,var(--plan-glow) 55%,transparent);
}
.club-plan-emblem > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--plan-line);
  border-radius: 50%;
  color: var(--plan-accent);
  font-size: 14px;
  text-shadow: 0 0 13px var(--plan-accent);
  animation: clubEmblemPulse 3.4s ease-in-out infinite;
}
.club-plan-emblem small {
  color: rgba(255,255,255,.68);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.club-plan-card .club-plan-name { margin-top: 21px; }
.club-plan-card.selected::before { animation: clubInnerFrame 3.2s ease-in-out infinite; }
.club-plan-card.selected > button {
  background: var(--plan-accent);
  color: #090909;
  box-shadow: 0 10px 30px var(--plan-glow);
}

/* Segunda capa de profundidad: halo, constelación y sello propio por nivel. */
.membership-plan-card,
.membership-plan-preview { isolation: isolate; }
.membership-plan-card .membership-particles::before,
.membership-plan-preview .membership-particles::before {
  position: absolute;
  top: 7%;
  right: -13%;
  width: 46%;
  aspect-ratio: 1;
  border: 1px solid var(--plan-line);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 32px var(--plan-glow),0 0 28px color-mix(in srgb,var(--plan-glow) 55%,transparent);
  content: "";
  opacity: .42;
  animation: membershipConstellationOrbit 16s linear infinite;
}
.membership-plan-card .membership-particles::after,
.membership-plan-preview .membership-particles::after {
  position: absolute;
  top: 13%;
  right: 2%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--particle-secondary);
  box-shadow: 0 0 12px var(--particle-secondary),0 0 34px var(--plan-accent);
  content: "";
  animation: membershipConstellationPulse 3.6s ease-in-out infinite;
}
.theme-diamond .membership-particles::before { border-radius: 18%; transform: rotate(45deg); animation-name: membershipDiamondOrbit; animation-duration: 13s; }
.theme-obsidian .membership-particles::before { border-radius: 0; clip-path: polygon(50% 0,100% 100%,68% 82%,48% 100%,0 55%); transform: rotate(-8deg); }
.theme-ruby .membership-particles::before { border-color: rgba(255,114,122,.32); border-radius: 52% 48% 60% 40%; animation-duration: 10s; }
.theme-platinum .membership-particles::before { border-style: double; border-width: 3px; opacity: .32; }
.theme-classic .membership-particles::after { box-shadow: 0 0 12px #fff0b8,0 0 34px #dca94f; }

.membership-plan-card h3,
.membership-plan-card h4,
.membership-plan-preview h4,
.member-digital-card .member-card-name > strong { text-shadow: 0 0 26px color-mix(in srgb,var(--plan-accent) 28%,transparent); }
.membership-plan-card.selected,
.member-digital-card.membership-plan-card { animation: membershipCardBreath 5.6s ease-in-out infinite; }
.member-digital-card.membership-plan-card { border-width: 1px; box-shadow: 0 32px 80px rgba(0,0,0,.38),0 0 58px var(--plan-glow); }
.member-digital-card .member-card-benefit { box-shadow: inset 0 0 24px color-mix(in srgb,var(--plan-glow) 35%,transparent),0 12px 34px rgba(0,0,0,.16); }

.membership-particles i:nth-child(13) { --particle-x: 6%; --particle-drift: 42px; --particle-size: 3px; --particle-duration: 8.6s; --particle-delay: -7.2s; }
.membership-particles i:nth-child(14) { --particle-x: 25%; --particle-drift: -31px; --particle-size: 5px; --particle-duration: 10.2s; --particle-delay: -2.1s; }
.membership-particles i:nth-child(15) { --particle-x: 48%; --particle-drift: 64px; --particle-size: 2px; --particle-duration: 7.4s; --particle-delay: -5.4s; }
.membership-particles i:nth-child(16) { --particle-x: 71%; --particle-drift: -46px; --particle-size: 4px; --particle-duration: 11.4s; --particle-delay: -8.8s; }
.membership-particles i:nth-child(17) { --particle-x: 83%; --particle-drift: 27px; --particle-size: 6px; --particle-duration: 9.6s; --particle-delay: -3.7s; }
.membership-particles i:nth-child(18) { --particle-x: 97%; --particle-drift: -62px; --particle-size: 3px; --particle-duration: 8.1s; --particle-delay: -6.5s; }

.membership-plan-section .membership-plan-card.theme-classic::after { content: "✦"; }
.membership-plan-section .membership-plan-card.theme-diamond::after { content: "◆"; }
.membership-plan-section .membership-plan-card.theme-obsidian::after { content: "◈"; }
.membership-plan-section .membership-plan-card.theme-ruby::after { content: "♦"; }
.membership-plan-section .membership-plan-card.theme-platinum::after { content: "◎"; }

.theme-classic .membership-theme-fx b,
.theme-classic .membership-theme-fx em,
.theme-obsidian .membership-theme-fx b,
.theme-obsidian .membership-theme-fx em,
.theme-ruby .membership-theme-fx em {
  width: 68%;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--plan-accent),transparent);
  filter: drop-shadow(0 0 6px var(--plan-accent));
  opacity: .65;
}
.theme-classic .membership-theme-fx b { top: 18%; left: -55%; transform: rotate(16deg); animation: clubGoldTrail 6s ease-in-out infinite; }
.theme-classic .membership-theme-fx em { top: 34%; left: -65%; transform: rotate(16deg); animation: clubGoldTrail 6s -3s ease-in-out infinite; }
.theme-obsidian .membership-theme-fx b { top: 12%; right: -60%; transform: rotate(-31deg); animation: clubObsidianTrail 5.8s linear infinite; }
.theme-obsidian .membership-theme-fx em { top: 29%; right: -70%; transform: rotate(-31deg); animation: clubObsidianTrail 5.8s -2.9s linear infinite; }
.theme-ruby .membership-theme-fx em { right: -58%; bottom: 18%; transform: rotate(-14deg); animation: clubRubyTrail 5.2s ease-in-out infinite; }
.theme-ruby .membership-theme-fx i { border-radius: 50% 50% 45% 45%; clip-path: polygon(50% 0,92% 35%,68% 100%,32% 100%,8% 35%); }
.theme-diamond .membership-theme-fx i { animation-duration: 4.8s; }
.theme-diamond .membership-theme-fx i:nth-child(1) { width: 54px; height: 54px; opacity: .52; }
.theme-platinum .membership-theme-fx em {
  top: 42%;
  right: 8%;
  width: 82px;
  height: 1px;
  background: linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow: 0 0 12px #fff;
  animation: clubPlatinumBlink 3.8s ease-in-out infinite;
}

.club-contract-progress {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin: -8px 0 7px;
}
.club-contract-progress span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  color: rgba(255,255,255,.34);
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
}
.club-contract-progress span::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--plan-accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}
.club-contract-progress span.done,
.club-contract-progress span.active {
  border-color: var(--plan-line);
  background: color-mix(in srgb,var(--plan-accent) 7%,transparent);
  color: rgba(255,255,255,.78);
}
.club-contract-progress span.done::after,
.club-contract-progress span.active::after { transform: scaleX(1); }
.club-contract-progress b {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: color-mix(in srgb,var(--plan-accent) 16%,transparent);
  color: var(--plan-accent);
  font-size: 6px;
}
.club-contract-form {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg,transparent 25%,color-mix(in srgb,var(--plan-accent) 5%,transparent) 50%,transparent 75%),
    rgba(255,255,255,.045);
  background-size: 220% 100%;
  animation: clubFormAura 10s ease-in-out infinite;
}
.club-contract-form > label,
.club-contract-form > fieldset { position: relative; z-index: 1; }
.club-email-result {
  margin-top: 15px !important;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font-size: 8px !important;
}
.club-email-result.sent { border-color: rgba(105,211,146,.35); color: #9de0b7 !important; }
.club-email-result.pending { color: rgba(255,255,255,.58) !important; }

.membership-record-dates { grid-template-columns: repeat(3,minmax(0,1fr)); }
.membership-email-state strong.sent { color: #39724a; }
.membership-email-state strong.failed,
.membership-email-state strong.not_configured { color: #a34d35; }
.membership-email-state strong.sending,
.membership-email-state strong.not_sent { color: #9a681e; }
.membership-email-state span {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes clubEmblemPulse { 0%,100% { transform: scale(.94); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes clubInnerFrame { 0%,100% { box-shadow: inset 0 0 22px transparent; } 50% { box-shadow: inset 0 0 32px var(--plan-glow); } }
@keyframes clubGoldTrail { 0%,35% { opacity: 0; transform: translateX(0) rotate(16deg); } 55% { opacity: .8; } 100% { opacity: 0; transform: translateX(240%) rotate(16deg); } }
@keyframes clubObsidianTrail { 0% { opacity: 0; transform: translateX(0) rotate(-31deg); } 24% { opacity: .9; } 100% { opacity: 0; transform: translateX(-260%) rotate(-31deg); } }
@keyframes clubRubyTrail { 0%,45% { opacity: 0; transform: translateX(0) rotate(-14deg); } 65% { opacity: .9; } 100% { opacity: 0; transform: translateX(-260%) rotate(-14deg); } }
@keyframes clubPlatinumBlink { 0%,100% { opacity: .12; transform: scaleX(.5); } 50% { opacity: .9; transform: scaleX(1.3); } }
@keyframes clubFormAura { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes membershipConstellationOrbit { to { transform: rotate(360deg); } }
@keyframes membershipDiamondOrbit { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
@keyframes membershipConstellationPulse { 0%,100% { opacity: .24; transform: scale(.65); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes membershipCardBreath { 0%,100% { box-shadow: 0 22px 55px rgba(15,12,8,.22),0 0 32px var(--plan-glow); } 50% { box-shadow: 0 28px 68px rgba(15,12,8,.3),0 0 56px var(--plan-glow); } }

@media (max-width: 720px) {
  .club-plan-card.membership-plan-card:hover { transform: translateY(-4px); }
  .club-plan-emblem { margin-top: 20px; }
  .club-contract-progress { grid-template-columns: 1fr; }
  .club-contract-progress span { min-height: 34px; }
  .membership-record-dates { grid-template-columns: 1fr 1fr; }
  .membership-email-state { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid rgba(9,9,8,.07); }
}

@media (prefers-reduced-motion: reduce) {
  .club-plan-emblem > span,
  .club-plan-card.selected::before,
  .club-contract-form,
  .theme-classic .membership-theme-fx b,
  .theme-classic .membership-theme-fx em,
  .theme-obsidian .membership-theme-fx b,
  .theme-obsidian .membership-theme-fx em,
  .theme-ruby .membership-theme-fx em,
  .theme-platinum .membership-theme-fx em,
  .membership-particles i,
  .membership-particles::before,
  .membership-particles::after,
  .membership-plan-card.selected,
  .member-digital-card.membership-plan-card { animation: none !important; }
  .membership-particles { display: none; }
}

html.leveling-lite-mode .membership-plan-card.selected,
html.leveling-lite-mode .member-digital-card.membership-plan-card { animation: none !important; }

@media (max-width: 720px) {
  .club-plan-emblem { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.leveling-motion-capable .membership-particles i { animation-duration: calc(var(--particle-duration) * 1.25); }
}