/* ================================================================
   membresia.css — Estilos del sistema de membresías
================================================================ */

/* ── Página de planes ──────────────────────────────────────── */
.planes-wrap{
  max-width:1100px;margin:0 auto;
  padding:100px 24px 100px;
  display:flex;flex-direction:column;align-items:center;gap:52px;
}

/* Hero */
.planes-hero{text-align:center;max-width:600px}
.planes-eyebrow{
  display:inline-block;
  font-family:'Sometype Mono',monospace;font-size:9px;letter-spacing:4px;
  color:rgba(226,35,26,.7);margin-bottom:10px;
  border-bottom:1px solid rgba(226,35,26,.2);padding-bottom:6px;
}
.planes-title{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(42px,9vw,80px);
  color:#fff;letter-spacing:4px;line-height:.95;
  text-shadow:0 0 80px rgba(226,35,26,.18),0 4px 30px rgba(0,0,0,.6);
}
.planes-sub{
  font-size:14px;color:rgba(255,255,255,.3);margin-top:14px;
  max-width:420px;margin-inline:auto;line-height:1.7;
}

/* ── Camino de tiers en planes ───────────────────────────── */
.planes-path{
  display:flex;flex-direction:row;align-items:center;
  gap:0;width:100%;max-width:480px;
}
.planes-path-node{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;
}
.planes-path-dot{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.08);
  transition:all .3s;
}
.planes-path-node[data-active="1"] .planes-path-dot{
  background:rgba(226,35,26,.14);
  border-color:rgba(226,35,26,.4);
  box-shadow:0 0 14px rgba(226,35,26,.25);
  background:color-mix(in srgb,var(--node-color,#e2231a) 18%,transparent);
  border-color:color-mix(in srgb,var(--node-color,#e2231a) 45%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--node-color,#e2231a) 30%,transparent);
}
.planes-path-lbl{
  font-family:'Sometype Mono',monospace;font-size:7px;letter-spacing:1.5px;
  color:rgba(255,255,255,.2);text-transform:uppercase;
}
.planes-path-node[data-active="1"] .planes-path-lbl{
  color:var(--node-color,#e2231a);
}
.planes-path-arrow{
  flex:1;height:1.5px;
  background:rgba(255,255,255,.06);
  margin-bottom:18px;
}

/* Perks row */
.planes-perks{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;width:100%;
}
.planes-perk{
  text-align:center;
  padding:22px 18px;border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
}
.planes-perk-ico{font-size:24px;margin-bottom:10px}
.planes-perk-title{
  font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:1.5px;
  color:#f5f0ec;margin-bottom:5px;
}
.planes-perk-sub{font-size:11.5px;color:rgba(255,255,255,.28);line-height:1.6}

/* Separador de tiers */
.planes-tier-sep{
  display:flex;align-items:center;gap:14px;width:100%;
}
.planes-tier-sep-line{flex:1;height:1px;background:rgba(226,35,26,.12)}
.planes-tier-sep-txt{
  font-family:'Sometype Mono',monospace;font-size:8px;letter-spacing:3px;
  color:rgba(226,35,26,.4);text-transform:uppercase;white-space:nowrap;
}

/* Grid de planes de pago */
.planes-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  width:100%;
  align-items:stretch;
}

/* ── Tarjeta de plan — versión premium ────────────────────── */
.plan-card{
  position:relative;
  border-radius:22px;
  background:linear-gradient(160deg,rgba(18,8,8,.92),rgba(10,4,4,.97));
  border:1px solid rgba(255,255,255,.07);
  padding:28px 22px 22px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
  overflow:hidden;
}
/* Línea superior coloreada */
.plan-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--plan-color,#888),transparent);
  border-radius:22px 22px 0 0;
}
/* Brillo interior en hover */
.plan-card::after{
  content:'';position:absolute;inset:0;border-radius:22px;
  background:radial-gradient(ellipse at 50% 0%,rgba(var(--plan-rgb,100,100,100),.06) 0%,transparent 60%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.plan-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(var(--plan-rgb,100,100,100),.2),
    0 0 40px rgba(var(--plan-rgb,100,100,100),.08);
  border-color:rgba(var(--plan-rgb,100,100,100),.25);
}
.plan-card:hover::after{opacity:1}
.plan-card.destacado{
  border-color:rgba(232,200,74,.2);
  background:linear-gradient(160deg,rgba(28,20,4,.96),rgba(10,7,2,.98));
}
.plan-badge-top{
  position:absolute;top:16px;right:16px;
  font-family:'Sometype Mono',monospace;font-size:7.5px;letter-spacing:2px;
  padding:4px 10px;border-radius:20px;
  background:rgba(232,200,74,.1);color:#E8C84A;
  border:1px solid rgba(232,200,74,.25);
}

/* Contenido tarjeta */
.plan-icono{font-size:26px;line-height:1;display:flex;align-items:center}
.plan-icono svg{width:30px;height:30px}
.plan-nombre{
  font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:2.5px;
  color:var(--plan-color,#fff);line-height:1;
}
.plan-precio{
  display:flex;align-items:baseline;gap:5px;
}
.plan-precio-val{
  font-family:'Bebas Neue',sans-serif;font-size:38px;
  color:#fff;line-height:1;letter-spacing:1px;
}
.plan-precio-per{
  font-family:'Sometype Mono',monospace;font-size:9px;
  color:rgba(255,255,255,.25);letter-spacing:1.5px;
}

.plan-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  margin:0;border:none;
}

/* Beneficios */
.plan-beneficios{
  list-style:none;display:flex;flex-direction:column;gap:9px;flex:1;margin:0;padding:0;
}
.plan-beneficios li{
  font-size:12.5px;color:rgba(255,255,255,.5);
  display:flex;align-items:flex-start;gap:9px;line-height:1.45;
}
.plan-beneficios li::before{
  content:'✓';
  color:var(--plan-color,#888);
  flex-shrink:0;font-weight:800;font-size:10px;margin-top:1px;
}

/* Botón del plan */
.plan-btn{
  display:block;width:100%;padding:14px;border-radius:12px;
  background:var(--plan-color,#888);color:#000;
  font-family:'Sometype Mono',monospace;font-size:10px;letter-spacing:2.5px;
  text-align:center;border:none;cursor:pointer;
  transition:filter .2s,transform .15s,box-shadow .2s;
  font-weight:700;text-decoration:none;
  box-shadow:0 4px 16px rgba(var(--plan-rgb,100,100,100),.25);
}
.plan-btn:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(var(--plan-rgb,100,100,100),.35);
}
.plan-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.plan-btn-outline{
  background:transparent;
  border:1px solid rgba(var(--plan-rgb,100,100,100),.35);
  color:var(--plan-color,#888);
  box-shadow:none;
}
.plan-btn-outline:hover{
  background:rgba(var(--plan-rgb,100,100,100),.08);
  box-shadow:none;
}

@media(max-width:860px){
  .planes-grid{grid-template-columns:1fr}
  .planes-perks{grid-template-columns:1fr}
}

/* ── Badge de membresía en dashboard ──────────────────────────*/
.mem-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 14px;border-radius:20px;
  font-family:'Sometype Mono',monospace;font-size:10px;letter-spacing:2px;
  background:rgba(var(--mem-rgb,226,35,26),.12);
  border:1px solid rgba(var(--mem-rgb,226,35,26),.35);
  color:var(--mem-color,#e2231a);
}

/* ── Panel membresía en dashboard ─────────────────────────── */
.db-mem-panel{
  background:rgba(20,10,10,.78);
  border:1px solid rgba(226,35,26,.18);
  border-radius:18px;padding:22px 24px;
  backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.db-mem-info{display:flex;flex-direction:column;gap:4px}
.db-mem-eye{
  font-family:'Sometype Mono',monospace;font-size:9px;
  letter-spacing:3px;color:rgba(255,255,255,.25);text-transform:uppercase;
}
.db-mem-nombre{
  font-family:'Bebas Neue',sans-serif;font-size:20px;
  letter-spacing:2px;color:var(--mem-color,#e2231a);
}
.db-mem-vence{
  font-family:'Sometype Mono',monospace;font-size:9px;
  color:rgba(255,255,255,.25);letter-spacing:1px;
}
.db-mem-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.db-mem-upgrade{
  padding:9px 20px;border-radius:10px;border:none;cursor:pointer;
  font-family:'Sometype Mono',monospace;font-size:10px;letter-spacing:2px;
  background:#e2231a;color:#fff;transition:background .2s,transform .15s;
  text-decoration:none;display:inline-flex;align-items:center;
}
.db-mem-upgrade:hover{background:#c01d15;transform:translateY(-1px)}
.db-mem-cancel{
  font-family:'Sometype Mono',monospace;font-size:9px;letter-spacing:1px;
  color:rgba(255,255,255,.2);cursor:pointer;background:none;border:none;
  text-decoration:underline;transition:color .2s;
}
.db-mem-cancel:hover{color:rgba(226,35,26,.6)}

/* Raspadita bloqueada */
.db-fig-locked{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  width:180px;height:254px;
  border-radius:10px;
  background:rgba(0,0,0,.5);
  border:2px dashed rgba(226,35,26,.2);
}
.db-fig-lock-icon{font-size:36px;opacity:.4;filter:grayscale(1)}
.db-fig-lock-text{
  font-family:'Sometype Mono',monospace;font-size:8px;letter-spacing:2px;
  color:rgba(255,255,255,.2);text-align:center;text-transform:uppercase;line-height:1.6;
  padding:0 12px;
}
.db-fig-lock-btn{
  padding:8px 16px;border-radius:8px;
  background:rgba(226,35,26,.15);border:1px solid rgba(226,35,26,.3);
  color:rgba(226,35,26,.8);
  font-family:'Sometype Mono',monospace;font-size:9px;letter-spacing:2px;
  text-decoration:none;transition:background .2s;text-align:center;
}
.db-fig-lock-btn:hover{background:rgba(226,35,26,.25)}

/* ══════════════════════════════════════════════════════════
   TARJETA DE MEMBRESÍA (estilo tarjeta de crédito)
══════════════════════════════════════════════════════════ */
.mem-card{
  position:relative;
  width:100%;
  aspect-ratio:1.586;
  border-radius:18px;
  overflow:hidden;
  padding:18px 20px 16px;
  display:flex;flex-direction:column;
  justify-content:space-between;
  will-change:transform;
  transition:transform .1s ease,box-shadow .3s;
  cursor:default;user-select:none;
  margin-top:16px;
}

/* Fondos por nivel */
.mem-card--bronce{
  background:linear-gradient(135deg,#2a1200 0%,#5c2a08 40%,#a05820 60%,#3e1a00 100%);
  box-shadow:0 14px 40px rgba(160,88,32,.35),0 4px 16px rgba(0,0,0,.55);
}
.mem-card--plata{
  background:linear-gradient(135deg,#0d1b2e 0%,#1e3048 40%,#4a7090 60%,#1a2a3e 100%);
  box-shadow:0 14px 40px rgba(74,112,144,.4),0 4px 16px rgba(0,0,0,.55);
}
.mem-card--oro{
  background:linear-gradient(135deg,#1e0c00 0%,#4a2400 40%,#c08010 60%,#2e1600 100%);
  box-shadow:0 14px 40px rgba(192,128,16,.45),0 0 60px rgba(192,128,16,.15),0 4px 16px rgba(0,0,0,.55);
}
.mem-card--legendaria{
  background:linear-gradient(135deg,#110500 0%,#3c1200 40%,#c04400 60%,#200800 100%);
  box-shadow:0 14px 40px rgba(192,68,0,.5),0 0 80px rgba(192,68,0,.2),0 4px 16px rgba(0,0,0,.6);
}

/* Patrón de franjas diagonal */
.mc-pattern{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    -48deg,
    transparent,transparent 22px,
    rgba(255,255,255,.03) 22px,rgba(255,255,255,.03) 44px
  );
}

/* Reflejo de luz que sigue el cursor */
.mc-glare{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at var(--gx,30%) var(--gy,30%),rgba(255,255,255,.18) 0%,transparent 65%);
  opacity:0;transition:opacity .3s;
}
.mem-card:hover .mc-glare{opacity:1}

/* Shimmer en oro y legendaria */
.mem-card--oro::after,.mem-card--legendaria::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,200,80,.08) 38%,rgba(255,240,160,.12) 50%,transparent 62%);
  animation:mcShimmer 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes mcShimmer{
  0%  {transform:translateX(-120%) skewX(-12deg)}
  60% {transform:translateX(-120%) skewX(-12deg)}
  100%{transform:translateX(220%)  skewX(-12deg)}
}

/* Fila superior: logo + nivel */
.mc-row-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  position:relative;z-index:1;
}
.mc-brand{
  display:flex;align-items:center;gap:7px;
}
.mc-brand-logo{
  opacity:.85;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));
  flex-shrink:0;
}
.mc-brand-text{
  display:flex;flex-direction:column;line-height:1.05;
}
.mc-brand-text span{
  font-family:'Bebas Neue',sans-serif;font-size:9px;letter-spacing:2.5px;
  color:rgba(255,255,255,.55);
}
.mc-tier-tag{
  font-family:'Sometype Mono',monospace;font-size:8px;letter-spacing:2px;
  color:rgba(255,255,255,.4);text-transform:uppercase;
  padding:3px 8px;border-radius:20px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

/* Chip */
.mc-chip{position:relative;z-index:1}

/* Número */
.mc-number{
  font-family:'Sometype Mono',monospace;font-size:13px;letter-spacing:4px;
  color:rgba(255,255,255,.65);text-shadow:0 1px 6px rgba(0,0,0,.6);
  position:relative;z-index:1;
}
.mem-card--oro    .mc-number{color:rgba(255,220,120,.75)}
.mem-card--legendaria .mc-number{color:rgba(255,185,90,.75)}

/* Fila inferior */
.mc-row-bot{
  display:flex;align-items:flex-end;gap:0;
  position:relative;z-index:1;
}
.mc-field{display:flex;flex-direction:column;gap:2px}
.mc-field+.mc-field{margin-left:auto}
.mc-fl{
  font-family:'Sometype Mono',monospace;font-size:6.5px;letter-spacing:2px;
  color:rgba(255,255,255,.28);text-transform:uppercase;
}
.mc-fv{
  font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1.5px;
  color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.5);
  line-height:1.1;
}
.mem-card--oro .mc-fv        {color:rgba(255,220,120,.9)}
.mem-card--legendaria .mc-fv {color:rgba(255,185,90,.9)}

/* Raspaditas counter en la tarjeta */
.mc-raspa-counter{
  display:flex;align-items:center;gap:6px;
  margin-left:auto;
  padding:4px 10px;border-radius:20px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
}
.mc-raspa-counter span{
  font-family:'Sometype Mono',monospace;font-size:9px;
  color:rgba(255,255,255,.45);letter-spacing:1px;
}
.mc-raspa-counter b{
  font-family:'Bebas Neue',sans-serif;font-size:16px;
  color:rgba(255,255,255,.8);line-height:1;
}

/* ══════════════════════════════════════════════════════════
   MEJORAS DE PÁGINA DE PLANES
══════════════════════════════════════════════════════════ */

/* Barra de perks entre hero y grid */
.planes-perks{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;width:100%;
}
.planes-perk{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 16px;border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  text-align:center;transition:border-color .3s,background .3s;
}
.planes-perk:hover{
  border-color:rgba(226,35,26,.25);
  background:rgba(226,35,26,.04);
}
.planes-perk-ico{font-size:26px;line-height:1}
.planes-perk-title{
  font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:2px;
  color:rgba(255,255,255,.7);
}
.planes-perk-sub{
  font-family:'Sometype Mono',monospace;font-size:9px;letter-spacing:1px;
  color:rgba(255,255,255,.25);line-height:1.5;
}

/* Separador entre tiers gratuito y pago */
.planes-tier-sep{
  display:flex;align-items:center;gap:16px;
  width:100%;grid-column:1/-1;
}
.planes-tier-sep-line{flex:1;height:1px;background:rgba(226,35,26,.15)}
.planes-tier-sep-txt{
  font-family:'Sometype Mono',monospace;font-size:8px;letter-spacing:3px;
  color:rgba(226,35,26,.4);white-space:nowrap;text-transform:uppercase;
}

/* Plan card mejorado — efecto shimmer al hover */
.plan-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,
    transparent 25%,
    rgba(255,255,255,.04) 38%,
    rgba(255,255,255,.07) 50%,
    transparent 62%
  );
  transform:translateX(-120%) skewX(-12deg);
  transition:transform 0s;
  pointer-events:none;
}
.plan-card:hover::after{
  transform:translateX(200%) skewX(-12deg);
  transition:transform .7s ease;
}

/* Pulse en card destacada */
@keyframes planPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,200,74,.25),0 20px 60px rgba(0,0,0,.5)}
  50%    {box-shadow:0 0 0 8px rgba(232,200,74,0),0 20px 60px rgba(0,0,0,.5)}
}
.plan-card.destacado{animation:planPulse 3s ease-in-out infinite}

/* Camino de tiers */
.planes-path{
  display:flex;align-items:center;justify-content:center;
  gap:0;width:100%;overflow-x:auto;padding:4px 0;
  scrollbar-width:none;
}
.planes-path::-webkit-scrollbar{display:none}
.planes-path-node{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0 6px;flex-shrink:0;
}
.planes-path-dot{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;
  border:2px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.4);
  transition:border-color .3s,box-shadow .3s;
}
.planes-path-node[data-active="1"] .planes-path-dot{
  border-color:var(--node-color,#888);
  box-shadow:0 0 12px var(--node-color,#888);
  background:rgba(0,0,0,.6);
}
.planes-path-lbl{
  font-family:'Sometype Mono',monospace;font-size:7px;
  letter-spacing:2px;color:rgba(255,255,255,.22);
  text-transform:uppercase;
}
.planes-path-node[data-active="1"] .planes-path-lbl{
  color:var(--node-color,#888);
}
.planes-path-arrow{
  width:32px;height:1px;background:rgba(255,255,255,.1);
  flex-shrink:0;position:relative;top:-10px;
}

/* ── Responsive planes ─────────────────────────────────────── */
@media(max-width:860px){
  .planes-grid{grid-template-columns:1fr 1fr}
  .planes-perks{grid-template-columns:1fr}
  .planes-wrap{gap:36px}
  .planes-path{max-width:340px}
  .planes-path-dot{width:34px;height:34px;font-size:14px}
}

@media(max-width:600px){
  .planes-grid{grid-template-columns:1fr}
  .planes-wrap{padding:80px 14px 60px;gap:28px}
  .planes-path{max-width:280px}
  .planes-path-dot{width:30px;height:30px;font-size:12px}
  .plan-card{padding:22px 18px 18px}
  .plan-precio-val{font-size:32px}
  .plan-nombre{font-size:20px}
  .db-mem-panel{flex-direction:column;align-items:flex-start}
}

@media(max-width:380px){
  .planes-title{font-size:38px}
  .planes-path-lbl{font-size:6px}
  .plan-beneficios li{font-size:12px}
}