/* ── v10.4 Socios — fichas internas jerárquicas ──────────── */

/* ── Cursor hint en todas las cards ─────────────────────── */
.platinum-card, .premium-card, .standard-card, .individual-chip {
  cursor: pointer;
}
.platinum-card .pf-hint, .premium-card .pf-hint,
.standard-card .pf-hint, .individual-chip .pf-hint {
  font-family: var(--f-d); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  display: flex; align-items: center; gap: .35rem;
  transition: gap .2s;
}
.platinum-card:hover .pf-hint  { gap: .6rem; color: var(--cta); }
.premium-card:hover .pf-hint   { gap: .6rem; color: var(--cta); }
.standard-card:hover .pf-hint  { gap: .6rem; color: var(--cta); }
.individual-chip:hover .pf-hint { gap: .6rem; }

/* ── Shared drawer shell ─────────────────────────────────── */
.pf-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex;
}
.pf-backdrop {
  position: absolute; inset: 0;
  background: rgba(7,15,26,.72); backdrop-filter: blur(7px);
  animation: fadeIn .25s ease;
}
@keyframes pf-slide-r { from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes pf-slide-l { from{transform:translateX(-100%)} to{transform:translateX(0)} }
@keyframes pf-scale-in{ from{opacity:0;transform:translate(-50%,-50%) scale(.92)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }

/* ── Platinum band — sección destacada con fondo sutil de marca ── */
.platinum-band{
  margin: 0 calc(50% - 50vw) 3.5rem; padding: 3rem calc(50vw - 50%);
  background: linear-gradient(155deg, rgba(112,152,180,.10) 0%, rgba(63,109,146,.05) 45%, transparent 100%);
  border-top: 1px solid rgba(63,109,146,.15);
  border-bottom: 1px solid rgba(63,109,146,.15);
  position: relative;
}
.platinum-band::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, #7098b4, #3f6d92, #7098b4, transparent);
}
.platinum-band__inner{ max-width: var(--shell-w); margin: 0 auto; }
@media(max-width:820px){ .platinum-band{ padding: 2rem calc(50vw - 50%) 2.5rem; margin-bottom: 2.5rem; } }
.pf-platinum {
  position: relative; z-index: 1; margin-left: auto;
  width: min(860px,100%); height: 100%; overflow-y: auto;
  background: linear-gradient(160deg,#060e1a 0%,#0b2040 100%);
  animation: pf-slide-r .38s cubic-bezier(.16,1,.3,1);
  box-shadow: -20px 0 80px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
.pf-platinum__cover {
  position: relative; height: clamp(200px,30vw,340px); overflow: hidden; flex-shrink: 0;
}
.pf-platinum__cover img { width:100%; height:100%; object-fit:cover; }
.pf-platinum__cover::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 30%, rgba(6,14,26,.95) 100%);
}
.pf-platinum__cover-foot {
  position:absolute; bottom:0; left:0; right:0; z-index:1;
  padding: 1.5rem 2.5rem 2rem;
  display: flex; align-items: flex-end; gap: 1.5rem;
}
.pf-platinum__hex {
  width: 80px; height: 88px; flex-shrink: 0;
  background: linear-gradient(135deg,rgba(85,187,235,.2),rgba(1,117,201,.15));
  border: 1.5px solid rgba(85,187,235,.3);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid; place-items: center;
  font-family: var(--f-d); font-weight: 900; font-size: 1.1rem; color: var(--p1);
  margin-bottom: 4px;
}
.pf-platinum__name-block {}
.pf-platinum__tier {
  font-family: var(--f-d); font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(168,196,212,.6); margin-bottom: .4rem;
}
.pf-platinum__name {
  font-family: var(--f-d); font-weight: 700; font-size: clamp(1.9rem,4.6vw,3.3rem);
  color: #fff; line-height: .95; letter-spacing: -.03em;
}
.pf-platinum__area {
  font-family: var(--f-d); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-top: .35rem;
}
.pf-platinum__body { padding: 2rem 2.5rem 3rem; display: flex; flex-direction: column; gap: 2rem; flex: 1; }
.pf-stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: rgba(255,255,255,.06); border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}
.pf-stat-box { background: rgba(255,255,255,.03); padding: 1.1rem; }
.pf-stat-box .l { font-family: var(--f-d); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.32); display: block; margin-bottom: .3rem; }
.pf-stat-box .v { font-family: var(--f-d); font-weight: 700; font-size: 1.25rem; color: #fff; }
@media(max-width:640px){ .pf-stats-grid{ grid-template-columns:1fr 1fr; } }
.pf-section-label {
  font-family: var(--f-d); font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-bottom: .85rem; border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: .5rem;
}
.pf-platinum__body p { color: rgba(255,255,255,.65); line-height: 1.8; font-size: .95rem; }
.pf-tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.pf-tag {
  font-family: var(--f-d); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 6px;
}
.pf-tag--dark  { background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); }
.pf-tag--light { background: rgba(1,117,201,.12); color: var(--p1); border: 1px solid rgba(1,117,201,.2); }
.pf-tag--amber { background: rgba(243,146,0,.12); color: var(--c1); border: 1px solid rgba(243,146,0,.2); }
.pf-platinum__cta {
  display: flex; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07); margin-top: auto;
}

/* ── Premium panel — right ────────────────────────────────── */
.pf-premium {
  position: relative; z-index: 1; margin-left: auto;
  width: min(560px,100%); height: 100%; overflow-y: auto;
  background: #fff;
  animation: pf-slide-r .36s cubic-bezier(.16,1,.3,1);
  box-shadow: -16px 0 60px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
}
.pf-premium__head {
  padding: 2rem 2rem 0;
  background: linear-gradient(160deg,#f0f7ff 0%,#fff 100%);
  border-bottom: 1px solid var(--ink-100);
  position: relative;
}
.pf-premium__close-area {
  display: flex; justify-content: flex-end; margin-bottom: 1.5rem;
}
.pf-premium__logo-row { display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1.5rem; }
.pf-premium__hex {
  width: 66px; height: 73px; flex-shrink: 0;
  background: linear-gradient(135deg,var(--p1),var(--cta));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid; place-items: center;
  font-family: var(--f-d); font-weight: 900; font-size: 1rem; color: #fff;
}
.pf-premium__tier {
  font-family: var(--f-d); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cta); margin-bottom: .25rem;
}
.pf-premium__name { font-family: var(--f-d); font-weight: 700; font-size: 2.1rem; color: var(--ink-900); letter-spacing: -.02em; line-height: 1; }
.pf-premium__area { font-family: var(--f-d); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-top: .3rem; }
.pf-premium__body { padding: 1.75rem 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; flex: 1; }
.pf-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--ink-100); border: 1px solid var(--ink-100); border-radius: 12px; overflow: hidden;
}
.pf-fact { background: #fff; padding: .9rem 1rem; }
.pf-fact .l { font-family: var(--f-d); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); display: block; margin-bottom: .25rem; }
.pf-fact .v { font-size: .88rem; color: var(--ink-900); font-weight: 500; }
.pf-premium__body p { color: var(--ink-500); line-height: 1.78; font-size: .9rem; }

/* ── Estándar panel — right compact ───────────────────────── */
.pf-estandar {
  position: relative; z-index: 1; margin-left: auto;
  width: min(420px,100%); height: 100%; overflow-y: auto;
  background: #fff;
  animation: pf-slide-r .34s cubic-bezier(.16,1,.3,1);
  box-shadow: -12px 0 40px rgba(0,0,0,.14);
  display: flex; flex-direction: column;
}
.pf-estandar__head {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; gap: 1rem;
}
.pf-estandar__ico {
  width: 50px; height: 55px; flex-shrink: 0;
  background: linear-gradient(135deg,var(--p1),var(--cta));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid; place-items: center;
  font-family: var(--f-d); font-weight: 900; font-size: .85rem; color: #fff;
}
.pf-estandar__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }
.pf-estandar__body p { color: var(--ink-500); line-height: 1.75; font-size: .88rem; }

/* ── Individual modal — right panel (consistente con el resto) ── */
.pf-modal {
  position: relative; z-index: 1; margin-left: auto;
  width: min(420px,100%); height: 100%; overflow-y: auto;
  background: #fff;
  animation: pf-slide-r .38s cubic-bezier(.16,1,.3,1);
  box-shadow: -20px 0 80px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
}
.pf-modal__top {
  background: linear-gradient(135deg,var(--navy-800),#0b2040);
  padding: 2rem 2rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  position: relative;
}
.pf-modal__av {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg,var(--p1),var(--cta));
  display: grid; place-items: center;
  font-family: var(--f-d); font-weight: 900; font-size: 1.2rem; color: #fff;
  border: 3px solid rgba(255,255,255,.15);
}
.pf-modal__name { font-family: var(--f-d); font-weight: 700; font-size: 1.3rem; color: #fff; text-align: center; }
.pf-modal__role { font-family: var(--f-d); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); text-align: center; }
.pf-modal__body { padding: 1.5rem 2rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.pf-modal__body p { color: var(--ink-500); line-height: 1.75; font-size: .9rem; text-align: center; }
.pf-modal__fact {
  display: flex; align-items: center; gap: .75rem; padding: .75rem; background: var(--ink-50); border-radius: 10px;
  border: 1px solid var(--ink-100);
}
.pf-modal__fact .l { font-family: var(--f-d); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-bottom: .15rem; }
.pf-modal__fact .v { font-size: .85rem; color: var(--ink-900); font-weight: 500; }

/* ── Shared close button ─────────────────────────────────── */
.pf-close {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; transition: background .2s, transform .2s;
  flex-shrink: 0;
}
.pf-close--dark  { background: rgba(255,255,255,.1); color: #fff; }
.pf-close--dark:hover  { background: rgba(255,255,255,.2); }
.pf-close--light { background: var(--ink-100); color: var(--ink-600); }
.pf-close--light:hover { background: var(--ink-200); transform: scale(1.08); }
.pf-close--modal { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,.1); color: #fff; }
.pf-close--modal:hover { background: rgba(255,255,255,.2); }