/* ============================================================
   X Dance — Custom CSS (loaded alongside Tailwind CDN)
   ============================================================ */

/* Google Font — Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
  --brand:        #a855f7;   /* purple-500 */
  --brand-dark:   #7c3aed;   /* violet-600 */
  --brand-glow:   rgba(168,85,247,.35);
  --bg:           #0a0a0f;
  --bg-card:      #12121a;
  --bg-card2:     #1a1a28;
  --text:         #e2e8f0;
  --text-muted:   #94a3b8;
  --border:       rgba(255,255,255,.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--brand-dark); border-radius: 3px; }

/* ---- Gradient text ---- */
.gradient-text {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Glow button ---- */
.btn-glow {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  box-shadow: 0 0 20px var(--brand-glow);
  transition: box-shadow .3s, transform .2s;
}
.btn-glow:hover {
  box-shadow: 0 0 35px var(--brand-glow);
  transform: translateY(-2px);
}
.btn-glow:active { transform: translateY(0); }

/* ---- Cards ---- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.card:hover {
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px var(--brand-glow);
}

/* ---- Animations ---- */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0);     }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes pulse-glow {
  0%,100%  { box-shadow: 0 0 10px var(--brand-glow); }
  50%      { box-shadow: 0 0 30px var(--brand-glow); }
}

.anim-fade-up   { animation: fadeInUp .7s ease both; }
.anim-fade      { animation: fadeIn   .5s ease both; }
.anim-delay-1   { animation-delay: .15s; }
.anim-delay-2   { animation-delay: .3s;  }
.anim-delay-3   { animation-delay: .45s; }
.anim-delay-4   { animation-delay: .6s;  }

/* Intersection-observer trigger */
.reveal { opacity:0; transform:translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ---- SVG Wave separator ---- */
.wave-top, .wave-bottom { display:block; width:100%; line-height:0; overflow:hidden; }
.wave-top svg, .wave-bottom svg { display:block; width:100%; }
/* prevent 1 px gap between wave and adjacent section */
.section { margin-top: -1px; }

/* ---- Navbar ---- */
.navbar {
  backdrop-filter: blur(12px);
  background: rgba(10,10,15,.7);
  border-bottom: 1px solid var(--border);
}

/* ---- Hero gradient bg ---- */
.hero-bg {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168,85,247,.35) 0%, transparent 70%);
}

/* ---- Membership badge ---- */
.badge-activa   { background:#16a34a22; color:#4ade80; border:1px solid #16a34a55; }
.badge-inactiva { background:#dc262622; color:#f87171; border:1px solid #dc262655; }
.badge-pendiente{ background:#d9770622; color:#fb923c; border:1px solid #d9770655; }

/* ---- Video player overlay ---- */
.video-locked {
  position:relative;
  cursor:not-allowed;
}
.video-locked::after {
  content:'🔒';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
  background:rgba(0,0,0,.6);
  border-radius:inherit;
}

/* ---- Toast ---- */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.toast {
  padding: .75rem 1.25rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 500;
  animation: fadeInUp .4s ease both;
  min-width: 220px;
  max-width: 360px;
}
.toast-success { background:#16a34a; color:#fff; }
.toast-error   { background:#dc2626; color:#fff; }
.toast-info    { background:#2563eb; color:#fff; }

/* ---- Spinner ---- */
.spinner {
  width:1.25rem; height:1.25rem;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .6s linear infinite;
  display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- Modal ---- */
.modal-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(4px);
  z-index:800;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 1rem;
  overflow-y: auto;
}
.modal-box {
  background:var(--bg-card2);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:2rem;
  width:min(480px,92vw);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  margin: auto;
  animation:fadeInUp .35s ease both;
}
@media (max-width: 480px) {
  .modal-box { padding: 1.25rem; }
}

/* ---- Form inputs ---- */
.xd-input {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: .5rem;
  color: var(--text);
  padding: .625rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.xd-input:focus { border-color: var(--brand); }
.xd-input::placeholder { color: var(--text-muted); }

/* ---- Table ---- */
.xd-table { border-collapse: collapse; width: 100%; }
.xd-table th {
  font-size:.75rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-muted);
  padding:.75rem 1rem; border-bottom:1px solid var(--border);
  text-align:left;
}
.xd-table td {
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  font-size:.875rem;
}
.xd-table tr:last-child td { border-bottom:none; }

/* ---- Responsive video grid ---- */
.video-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap:1.5rem;
}

/* ---- Section ---- */
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }