:root {
  --bg: #060913;
  --card: rgba(255, 255, 255, 0.055);
  --card-brd: rgba(255, 255, 255, 0.12);
  --fg: #eef2ff;
  --fg-dim: #a5aec6;
  --accent-a: #7c5cff;
  --accent-b: #22d3ee;
  --accent-c: #ff5c8a;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
  --radius: 22px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6fc;
    --card: rgba(255, 255, 255, 0.75);
    --card-brd: rgba(15, 23, 42, 0.10);
    --fg: #0f172a;
    --fg-dim: #55617a;
    --shadow: 0 30px 70px -35px rgba(15, 23, 42, 0.45);
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(15px, 1.05vw + 12px, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Fondo animado --- */
.aurora {
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  filter: blur(70px) saturate(140%);
  pointer-events: none;
}

.blob {
  position: absolute;
  display: block;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: drift 26s ease-in-out infinite alternate;
}

@media (prefers-color-scheme: light) {
  .blob { opacity: 0.35; mix-blend-mode: multiply; }
}

.b1 { top: 4%;  left: 8%;  background: radial-gradient(circle at 30% 30%, var(--accent-a), transparent 70%); }
.b2 { top: 22%; right: 6%; background: radial-gradient(circle at 60% 40%, var(--accent-b), transparent 70%); animation-delay: -8s; }
.b3 { bottom: 2%; left: 28%; background: radial-gradient(circle at 50% 50%, var(--accent-c), transparent 70%); animation-delay: -16s; }

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4vmax, -3vmax, 0) scale(1.12); }
  100% { transform: translate3d(-3vmax, 3vmax, 0) scale(0.95); }
}

/* --- Tarjeta --- */
.card {
  width: min(760px, 100%);
  padding: clamp(28px, 5vw, 56px);
  background: var(--card);
  border: 1px solid var(--card-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  text-align: center;
  animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: 0.42em 0.95em;
  border: 1px solid var(--card-brd);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5a524;
  box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.6);
  animation: pulse 2.4s ease-out infinite;
}

.dot.ok {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  100% { box-shadow: 0 0 0 12px transparent; }
}

.title {
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 5.2rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  background: linear-gradient(100deg, var(--accent-a) 0%, var(--accent-b) 45%, var(--accent-c) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 9s ease-in-out infinite alternate;
}

@keyframes shine {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.subtitle {
  margin: clamp(12px, 2vw, 18px) 0 0;
  color: var(--fg-dim);
  font-size: 1.02rem;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: clamp(24px, 3.5vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.pills li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.5em 0.9em;
  border: 1px solid var(--card-brd);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  font-size: 0.86rem;
  white-space: nowrap;
}

.pills .k {
  color: var(--fg-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  margin-top: clamp(24px, 3.5vw, 34px);
  padding-top: 18px;
  border-top: 1px solid var(--card-brd);
  color: var(--fg-dim);
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}