:root {
  --bg-dark: 17 35 54;
  --bg-light: 63 79 101;
  --cyan: 0 243 255;
  --lime: 126 211 33;
}

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

body {
  background: rgb(var(--bg-dark));
  color: rgb(255 255 255 / 0.82);
  font-family: 'Source Serif 4', Georgia, serif;
  line-height: 1.75;
}

/* ---------- Scroll progress bar ---------- */
.progress-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgb(255 255 255 / 0.08);
  z-index: 100;
}

.progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgb(var(--cyan)), rgb(var(--lime)));
}

/* Progressive enhancement: deja que el scroll maneje la barra sin JS en el hilo principal. */
@supports (animation-timeline: scroll()) {
  .progress-fill.is-native {
    animation: grow-progress linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- Badge ---------- */
.badge {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgb(var(--cyan));
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6);
  transition:
    background-color 250ms ease,
    color 250ms ease,
    border-color 250ms ease;
}

.badge-ring {
  width: 26px;
  height: 26px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}

.badge-ring circle {
  fill: none;
  stroke-width: 3;
}

.badge-ring__track {
  stroke: rgb(255 255 255 / 0.12);
}

.badge-ring__fill {
  stroke: rgb(var(--lime));
  stroke-dasharray: 94.25;
  stroke-dashoffset: 94.25;
}

.badge.is-complete {
  color: rgb(var(--bg-dark));
  background: linear-gradient(90deg, rgb(var(--cyan)), rgb(var(--lime)));
  border-color: transparent;
}

.badge.is-complete .badge-ring__fill {
  stroke: rgb(var(--bg-dark));
}

/* ---------- Article ---------- */
.content {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 24px 140px;
}

.kicker {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--lime));
  margin-bottom: 16px;
}

h1 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 700;
  color: white;
  line-height: 1.3;
  margin-bottom: 32px;
}

h2 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: white;
  margin: 44px 0 18px;
}

p {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: rgb(255 255 255 / 0.75);
}

.end {
  text-align: center;
  color: rgb(255 255 255 / 0.35);
  font-style: italic;
  margin-top: 56px;
}

@media (max-width: 480px) {
  .content {
    padding: 72px 20px 120px;
  }
}