:root {
  --primary-purple: #a78bfa;
  --secondary-purple: #c084fc;
  --accent-pink: #db2777;
  --dark-bg: #0f0f23;
  --card-bg: #1a1a2e;
  --border-glow: rgba(167, 139, 250, 0.6);
  --gray-950: #030712;
  --gray-100: #f3f4f6;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --purple-800: #6b21a8;
  --purple-900: #581c87;
}

.body-landing {
  font-family: "Work Sans", system-ui;
  background: var(--dark-bg);
  color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ======= Main / Hero ======= */
.main-landing {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 19.2px;
  /* 24px → 19.2px */
  position: relative;
  overflow: hidden;
}

.hero-container {
  position: relative;
  background: radial-gradient(ellipse at center, #a78bfa1a 0%, transparent 70%);
}

/* Tarjeta central */
.hero-card {
  text-align: center;
  max-width: 51.2rem;
  /* 64rem → 51.2rem */
  position: relative;
  z-index: 10;
  background: #030712b3;
  padding: 2.4rem;
  /* 3rem → 2.4rem */
  border-radius: 0.8rem;
  /* 1rem → 0.8rem */
  border: 1.6px solid var(--purple-900);
  /* 2px → 1.6px */
  box-shadow: 0 20px 40px -9.6px rgba(88, 28, 135, .5);
  /* 0 25px 50px -12px */
  backdrop-filter: blur(3.2px);
  /* 4px → 3.2px */
}

.hero-title {
  color: #e5e7eb;
  font-family: "Work Sans", system-ui;
  border: 0.8px solid var(--purple-900);
  /* 1px → 0.8px */
  box-shadow: 0 0 40px -9.6px rgba(88, 28, 135, .5);
  /* 0 0 50px -12px */
  border-radius: 40px;
  /* 50px → 40px */
  padding: 16px;
  /* 20px → 16px */
  font-size: 28px;
  /* 35px → 28px */
  animation: text-glow 2s ease-in-out infinite alternate;
}

@keyframes text-glow {
  from {
    text-shadow: 0 0 16px rgba(167, 139, 250, .5);
  }

  /* 20px → 16px */
  to {
    text-shadow: 0 0 24px rgba(192, 132, 252, .8), 0 0 32px rgba(219, 39, 119, .3);
  }

  /* 30/40 → 24/32 */
}

.hero-subtitle {
  font-family: "Jetbrains Mono";
  font-size: 1.2rem;
  /* 1.5rem → 1.2rem */
  color: #d1d5db;
  margin: 24px auto 2.4rem;
  /* 30px, 3rem → 24px, 2.4rem */
  max-width: 38.4rem;
  /* 48rem → 38.4rem */
  line-height: 1.6;
}

/* Grid de features */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  /* 1.5rem → 1.2rem */
  margin-bottom: 2.4rem;
  /* 3rem → 2.4rem */
}

@media(min-width:768px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tarjetas de feature */
.feature-card {
  background: linear-gradient(135deg, rgba(26, 26, 46, .8), rgba(15, 15, 35, .9));
  border: 0.8px solid rgba(167, 139, 250, .3);
  /* 1px → 0.8px */
  backdrop-filter: blur(8px);
  /* 10px → 8px */
  transition: all .3s ease;
  padding: 1.2rem;
  /* 1.5rem → 1.2rem */
  border-radius: 0.6rem;
  /* .75rem → .6rem */
}

.feature-card:hover {
  border-color: rgba(192, 132, 252, .6);
  transform: translateY(-4px) scale(1.02);
  /* -5px → -4px */
  box-shadow: 0 8px 24px rgba(167, 139, 250, .2);
  /* 0 10px 30px → 0 8px 24px */
}

/* Iconos (currentColor) */
.feature-icon {
  color: var(--secondary-purple);
  text-align: center;
}

.feature-svg {
  width: 38.4px;
  /* 48px → 38.4px */
  height: 38.4px;
  display: inline-block;
}

/* Variantes */
.feature-icon.accent {
  color: var(--accent-pink);
}

.feature-svg.sm {
  width: 25.6px;
  height: 25.6px;
}

/* 32px → 25.6px */
.feature-svg.lg {
  width: 51.2px;
  height: 51.2px;
}

/* 64px → 51.2px */

.feature-title {
  font-family: "Work Sans", system-ui;
  font-size: 1rem;
  /* 1.25rem → 1rem */
  font-weight: 500;
  color: #e9d5ff;
  margin-bottom: 0.4rem;
  /* .5rem → .4rem */
}

.feature-text {
  font-family: "Jetbrains Mono";
  color: #9ca3af;
  font-size: 0.8rem;
  /* 1rem → .8rem */
}

/* ======= Footer ======= */
.site-footer {
  padding: 19.2px;
  /* 24px → 19.2px */
  text-align: center;
  color: var(--gray-500);
  font-size: 0.7rem;
  /* .875rem → .7rem */
  border-top: 1.6px solid var(--purple-800);
  /* 2px → 1.6px */
  box-shadow: inset 0 0.8px 2.4px rgba(88, 28, 135, .3);
  /* 0 1px 3px → 0 .8px 2.4px */
  position: relative;
  z-index: 10;
  background-color: rgba(3, 7, 18, 0.0);
}

.footer-subtitle {
  margin-top: 0.4rem;
  /* .5rem → .4rem */
  font-size: 0.8rem;
  /* 1rem → .8rem */
  color: var(--secondary-purple);
}