:root {
  --purple: #9b5de5;
  --purple-dark: #7c3aed;
  --bg-main: #0b0618;
  --bg-card: rgba(255,255,255,0.05);
  --text-main: #e5e5e5;
  --radius: 18px;
  --blur: blur(12px);
  --transition: all .35s ease;
}

/* RESET */
* {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  background: radial-gradient(circle at top, #2b0f46, #09051a 70%);
  color: var(--text-main);
  overflow-x: hidden;
}

/* PARTICLES */
#particles-js {
  position: fixed; inset: 0;
  width:100%; height:100%;
  z-index:-1;
}

/* CONTAINER */
.container {
  width:100%;
  max-width:1200px;
  margin:auto;
  padding:0 20px;
}

/* NAVBAR */
.navbar {
  position:fixed; top:0; width:100%;
  backdrop-filter:blur(14px);
  background:rgba(10,5,25,.75);
  z-index:1000;
}

.nav-content {
  display:flex; justify-content:space-between; align-items:center;
  max-width:1200px; margin:auto;
  padding:18px 20px;
}

.logo { height:46px; }

nav a {
  margin-left:25px; color:var(--text-main);
  text-decoration:none; font-weight:600;
  position:relative; transition:.3s;
}

nav a::after {
  content:''; position:absolute;
  width:0; height:2px;
  background:var(--purple);
  left:0; bottom:-6px;
  transition:var(--transition);
}
nav a:hover::after { width:100%; }

/* HERO */
.hero {
  min-height:88vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:90px 0 40px;
}

.hero-content { max-width:750px; margin:auto; }

.hero h1 {
  font-size:clamp(2.8rem,5vw,4rem);
  font-weight:900;
}
.hero span { color:var(--purple); }

.hero p {
  margin:22px 0 35px;
  font-size:1.15rem; opacity:.9;
}

/* BUTTONS */
.hero-buttons{
  display:flex; justify-content:center;
  gap:20px; flex-wrap:wrap;
}

.btn-main {
  padding:14px 40px; border-radius:50px;
  background:linear-gradient(135deg,var(--purple),var(--purple-dark));
  color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 0 30px rgba(155,93,229,.5);
  transition:var(--transition);
}
.btn-main:hover{ transform:translateY(-4px) scale(1.05); }

.btn-outline {
  padding:14px 40px; border-radius:50px;
  border:2px solid var(--purple); color:var(--purple);
  text-decoration:none; font-weight:600;
  transition:var(--transition);
}
.btn-outline:hover{ background:var(--purple); color:#fff; }

/* SECCIONES */
.features{
  padding:60px 0;
  text-align:center;
}

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
  justify-items:center;
}

/* CARDS */
.feature-card{
  background:var(--bg-card); backdrop-filter:var(--blur);
  border-radius:var(--radius);
  padding:35px 28px; text-align:center;
  border:1px solid rgba(155,93,229,.15);
  transition:var(--transition);
  max-width:350px;
}
.feature-card i{
  font-size:38px; color:var(--purple);
  margin-bottom:18px;
}
.feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 35px rgba(155,93,229,.35);
}

/* CTA FINAL */
.cta-final {
  padding:80px 0;
  text-align:center;
}
.cta-final .hero-content{ max-width:750px; margin:auto; }
.big{ padding:16px 50px; font-size:1.1rem; }

/* FOOTER */
footer{
  text-align:center;
  padding:30px;
  font-size:.9rem; opacity:.65;
}

/* PLANS */
.plans-section{ padding:60px 0 90px; text-align:center; }

.plans-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
}

.plan-card{
  background:var(--bg-card);
  backdrop-filter:var(--blur);
  padding:40px 30px;
  border-radius:var(--radius);
  border:1px solid rgba(155,93,229,.2);
  transition:var(--transition);
  position:relative;
}
.plan-card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 40px rgba(155,93,229,.35);
}

.plan-card .price{
  font-size:2rem; font-weight:900;
  margin:18px 0;
}
.plan-card .price span{ font-size:1rem; opacity:.8; }

.plan-card ul{ margin:20px 0; list-style:none; }
.plan-card ul li{
  margin:8px 0; opacity:.9;
}

/* DESTACADO */
.plan-card.featured{
  border:2px solid var(--purple);
  transform:scale(1.05);
}
.plan-card .tag{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--purple); padding:6px 16px; border-radius:50px;
  font-size:.85rem; font-weight:700; color:#fff;
}