/* ============================================================
   KANPEKI UNIVERSE — LANDING v3
   Formato amigable y mantenible
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. VARIABLES CSS (DESIGN TOKENS)
   ────────────────────────────────────────────────────────── */
:root {
  /* Background colors */
  --bg: #0C0E1A;
  --nebula: #242A46;
  --card: #13162a;
  --card-2: #171b32;

  /* Brand colors */
  --peach: #FBC48F;
  --lilac: #7D6FB3;
  --plum: #4E2F53;

  /* Text colors */
  --silver: #C5C8D3;
  --silver-dim: #8d92a6;

  /* Borders & effects */
  --border: rgba(125, 111, 179, 0.22);
  --border-soft: rgba(197, 200, 211, 0.08);

  /* Layout */
  --maxw: 1120px;

  /* Animation */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ──────────────────────────────────────────────────────────
   2. RESET & BASE STYLES
   ────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--silver);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Typography */
a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  /*font-family: 'Space Grotesk', sans-serif;*/
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.1;
  color: #fff;
  font-weight: 600;
}

/* Layout utilities */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────
   3. ANIMATIONS
   ────────────────────────────────────────────────────────── */

/* Twinkling stars animations */
@keyframes twinkle-a {
  0%, 100% {
    opacity: 0.75;
  }
  45% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.2;
  }
}

@keyframes twinkle-b {
  0%, 100% {
    opacity: 0.6;
  }
  30% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.1;
  }
  80% {
    opacity: 0.8;
  }
}

@keyframes twinkle-c {
  0%, 100% {
    opacity: 0.5;
  }
  20% {
    opacity: 0.15;
  }
  55% {
    opacity: 0.95;
  }
  75% {
    opacity: 0.3;
  }
}

/* Pulsing orb effect */
@keyframes pulse-orb {
  0%, 100% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.35;
  }
}

/* Spinning orbit */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Typewriter word animations */
@keyframes wordIn {
  from {
    opacity: 0;
    transform: translateY(60%) scaleY(0.8);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wordOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-60%) scaleY(0.8);
  }
}

/* Badge floating animations */
@keyframes float-badge-1 {
  0%, 100% {
    transform: translateX(-50%) translateY(0) rotateZ(0deg);
  }
  50% {
    transform: translateX(-50%) translateY(-28px) rotateZ(2.5deg);
  }
}

@keyframes float-badge-2 {
  0%, 100% {
    transform: translateY(0) rotateZ(-4deg);
  }
  50% {
    transform: translateY(-34px) rotateZ(-1.5deg);
  }
}

@keyframes float-badge-3 {
  0%, 100% {
    transform: translateY(0) rotateZ(3deg);
  }
  50% {
    transform: translateY(-44px) rotateZ(1deg);
  }
}

/* Modal animation */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Equalizer bars animation */
@keyframes eq {
  0%, 100% {
    height: 30%;
  }
  50% {
    height: 100%;
  }
}

/* ──────────────────────────────────────────────────────────
   4. BACKGROUND STARS
   ────────────────────────────────────────────────────────── */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.8px 1.8px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.2px 1.2px at 55% 15%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 10% 70%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.8px 1.8px at 40% 80%, rgba(197, 200, 211, 0.65), transparent),
    radial-gradient(1.2px 1.2px at 75% 48%, rgba(197, 200, 211, 0.5), transparent),
    radial-gradient(2px 2px at 90% 85%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 33% 55%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 62% 92%, rgba(197, 200, 211, 0.4), transparent);
  background-size: 520px 520px;
  animation: twinkle-a 4.2s ease-in-out infinite;
}

.stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.8px 1.8px at 70% 60%, rgba(251, 196, 143, 0.65), transparent),
    radial-gradient(2.4px 2.4px at 85% 20%, rgba(125, 111, 179, 0.75), transparent),
    radial-gradient(1.8px 1.8px at 15% 45%, rgba(251, 196, 143, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 48% 38%, rgba(125, 111, 179, 0.6), transparent),
    radial-gradient(2px 2px at 28% 10%, rgba(251, 196, 143, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 92% 50%, rgba(125, 111, 179, 0.5), transparent),
    radial-gradient(1.8px 1.8px at 5% 88%, rgba(251, 196, 143, 0.4), transparent);
  background-size: 480px 480px;
  animation: twinkle-b 5.8s ease-in-out infinite;
}

.stars-c {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 38% 22%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(2px 2px at 80% 75%, rgba(197, 200, 211, 0.6), transparent),
    radial-gradient(1.2px 1.2px at 60% 42%, rgba(251, 196, 143, 0.45), transparent),
    radial-gradient(1.8px 1.8px at 18% 62%, rgba(125, 111, 179, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 50% 90%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.2px 1.2px at 95% 30%, rgba(197, 200, 211, 0.5), transparent);
  background-size: 560px 560px;
  animation: twinkle-c 3.6s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   5. BUTTONS
   ────────────────────────────────────────────────────────── */

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 9px 40px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.25s;
}

/* Primary button */
.btn-primary {
  background: var(--peach);
  color: #241405;
  box-shadow: 0 8px 30px rgba(251, 196, 143, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(251, 196, 143, 0.4);
}

/* Ghost button */
.btn-ghost {
  background: rgba(197, 200, 211, 0.06);
  color: #fff;
  border-color: var(--border);
}

.btn-ghost:hover {
  background: rgba(197, 200, 211, 0.12);
  transform: translateY(-2px);
}

/* Sign in button */
.btn-signin {
  background: transparent;
  color: var(--silver-dim);
  border: 1px solid var(--border);
  font-family: 'Space Grotesk';
  font-size: 14px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-signin:hover {
  color: #fff;
  border-color: var(--lilac);
  background: rgba(125, 111, 179, 0.1);
}

/* Widget buttons */
.btn-widget-view {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Space Grotesk';
  font-weight: 600;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--peach);
  color: #241405;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.btn-widget-view:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(251, 196, 143, 0.35);
}

.btn-widget-details {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Space Grotesk';
  font-weight: 500;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 100px;
  background: transparent;
  color: var(--silver);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-widget-details:hover {
  background: rgba(197, 200, 211, 0.1);
  border-color: var(--lilac);
  color: #fff;
}

/* Show more button */
.btn-show-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk';
    font-weight: 600;
    font-size: 16px;
    padding: 16px 36px;
    border-radius: 100px;
    background: #C5C8D31C;
    color: #fbc48f;
    border: 5px solid #fbc48f;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-show-more::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(251, 196, 143, 0.08),
    rgba(125, 111, 179, 0.08)
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-show-more:hover::before {
  opacity: 1;
}

.btn-show-more:hover {
  border-color: var(--peach);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(251, 196, 143, 0.15);
}

.btn-show-more:hover svg {
  transform: translateX(4px);
}

.btn-show-more svg {
  transition: transform 0.3s;
}


.button {
    min-width: 400px;
    min-height: 60px;
    display: inline-flex;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1.3px;
    font-weight: 700;
    color: #171b32;
    background: #171b32;
    background: linear-gradient(90deg, #fbc48f 0%, #fbc48f 100%);
    border: none;
    border-radius: 1000px;
    box-shadow: 0px 1px 16px #fbc48f;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 10px;
  }

.button::before {
    content: '';
    border-radius: 1000px;
    min-width: calc(400px + 12px);
    min-height: calc(60px + 12px);
    border: 6px solid #7d6fb3;
    box-shadow: 0 0 30px #7d6fb3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all .3s ease-in-out 0s;
}

.button:hover, 
.button:focus {
  color: #313133;
  transform: translateY(-6px);
}

.button:hover::before, 
.button:focus::before {
  opacity: 1;
}

.button::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid #fbc48f;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

.button:hover::after, 
.button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* ──────────────────────────────────────────────────────────
   6. NAVIGATION
   ────────────────────────────────────────────────────────── */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition:
    background 0.3s,
    border-color 0.3s,
    backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}

nav.scrolled {
  background: rgba(12, 14, 26, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Brand logo */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk';
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.2px;
}

.brand .orb {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Navigation links */
.nav-links {
  display: flex;
  gap: 34px;
  font-size: 14px;
  font-weight: 500;
  color: var(--silver-dim);
}

.nav-links a {
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #fff;
}

/* CTA section */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile menu button */
.menu-btn {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────────
   7. HERO SECTION
   ────────────────────────────────────────────────────────── */

.hero {
  padding: 160px 0 90px;
  text-align: center;
  position: relative;
}

/* Eyebrow text */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--peach);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 7px 16px;
  background: rgba(125, 111, 179, 0.08);
  margin-bottom: 28px;
}

/* Hero title */
.hero h1 {
  font-size: clamp(40px, 6.5vw, 72px);
  font-weight: 700;
  letter-spacing: -1.5px;
  margin-bottom: 22px;
  line-height: 1.1;
}

.hero h1 .static-word {
  color: #fff;
}

/* Typewriter effect container */
.slide-words-container {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: hidden;
  height: 1.40em;
  min-width: 260px;
  text-align: center;
  top: 10px;
}

.slide-word {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  opacity: 0;
  font-family: 'Allura', cursive;
  font-weight: 600;
  color: var(--peach);
  font-size: 1.22em;
  letter-spacing: 0;
  line-height: 1.15;
}

.slide-word.active {
  animation: wordIn 0.6s var(--ease) forwards;
}

.slide-word.exit {
  animation: wordOut 0.5s var(--ease) forwards;
}

/* Hero subtitle */
.hero p.sub {
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--silver-dim);
  max-width: 580px;
  margin: 0 auto 38px;
}

/* CTA buttons */
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────
   8. HERO VISUAL (Orbits & Effects)
   ────────────────────────────────────────────────────────── */

.hero-visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 72px;
}

/* Glow orbs */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.glow-orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(251, 196, 143, 0.18);
  top: -550px;
  left: -230px;
  animation: pulse-orb 8s ease-in-out infinite;
}

.glow-orb-2 {
  width: 300px;
  height: 300px;
  background: rgba(125, 111, 179, 0.18);
  bottom: 500px;
  right: -70px;
  animation: pulse-orb 10s ease-in-out infinite reverse;
}

.glow-orb-3 {
  width: 400px;
  height: 400px;
  background: rgba(251, 196, 143, 0.18);
  bottom: -106px;
  right: -160px;
  animation: pulse-orb 8s ease-in-out infinite;
}

.glow-orb-4 {
    width: 400px;
    height: 400px;
    background: rgba(125, 111, 179, 0.18);
    top: 100px;
    left: -210px;
    animation: pulse-orb 8s ease-in-out infinite;
}

/* Orbits */
.orbit {
  position: absolute;
  border: 1px solid var(--border);
  border-radius: 50%;
  pointer-events: none;
}

.orbit.o1 {
  width: 280px;
  height: 280px;
  animation: spin 26s linear infinite;
}

.orbit.o2 {
  width: 400px;
  height: 400px;
  border-color: rgb(125 111 179 / 37%);
  animation: spin 40s linear infinite reverse;
}

.orbit.o3 {
  width: 530px;
  height: 530px;
  border-color: rgb(125 111 179 / 40%);
  animation: spin 60s linear infinite;
}

/* Orbit dots */
.orbit .dot {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  transform: translateX(-50%);
}

.orbit.o1 .dot {
  background: var(--peach);
  box-shadow: 0 0 16px var(--peach);
}

.orbit.o2 .dot {
  background: var(--lilac);
  box-shadow: 0 0 16px var(--lilac);
}

.orbit.o3 .dot {
  background: var(--silver);
  box-shadow: 0 0 12px var(--silver);
}

/* ──────────────────────────────────────────────────────────
   9. FEATURED BADGES (Floating cards)
   ────────────────────────────────────────────────────────── */

.featured-badge {
  position: relative;
  width: 170px;
  height: 160px;
  background: linear-gradient(
    135deg,
    rgba(36, 42, 70, 0.85),
    rgba(78, 47, 83, 0.65)
  );
  border: 2px solid rgba(251, 196, 143, 0.3);
  border-radius: 24px;
  padding: 20px 24px;
  backdrop-filter: blur(2px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-content {
  text-align: center;
}

.badge-icon {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.badge-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.badge-text small {
    font-size: 0.8rem;
    color: var(--silver-dim);
    font-weight: 400;
}

/* Badge positions */
.featured-badge-1 {
  top: 124px;
  left: 23%;
  transform: translateX(-50%);
  border-color: rgba(251, 196, 143, 0.45);
  background: linear-gradient(
    135deg,
    rgba(251, 196, 143, 0.14),
    rgba(125, 111, 179, 0.1)
  );
  animation: float-badge-1 6s ease-in-out infinite;
}

.featured-badge-2 {
  bottom: 144px;
  left: -128px;
  border-color: rgba(125, 111, 179, 0.35);
  background: linear-gradient(
    135deg,
    rgba(78, 47, 83, 0.25),
    rgba(36, 42, 70, 0.2)
  );
  animation: float-badge-2 7s ease-in-out infinite;
}

.featured-badge-3 {
  top: -68px;
  right: -3px;
  border-color: rgba(125, 111, 179, 0.4);
  background: linear-gradient(
    135deg,
    rgba(125, 111, 179, 0.18),
    rgba(78, 47, 83, 0.22)
  );
  animation: float-badge-3 8s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   10. SECTIONS & LAYOUT
   ────────────────────────────────────────────────────────── */

section {
  position: relative;
}

.section {
  padding: 96px 0;
}

/* Section headers */
.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}

.section-head h2 {
  font-size: clamp(30px, 4.5vw, 46px);
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.section-head p {
  color: var(--silver-dim);
  font-size: 17px;
}

/* Tag/label */
.tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lilac);
  display: block;
  margin-bottom: 14px;
}

/* ──────────────────────────────────────────────────────────
   11. FEATURES GRID & CARDS
   ────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Feature card */
.feature {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 28px;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease),
    border-color 0.3s,
    background 0.3s,
    box-shadow 0.35s var(--ease);
}

.feature:hover {
  transform: scale(1.04) translateY(-4px);
  border-color: var(--peach);
  background: var(--card-2);
  box-shadow: 0 16px 48px rgba(251, 196, 143, 0.12);
}

/* Feature icon */
.feature .ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(125, 111, 179, 0.14);
  color: var(--peach);
  margin-bottom: 18px;
}

/* Feature heading */
.feature h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #fff;
}

/* Feature description */
.feature p {
  font-size: 14.5px;
  color: var(--silver-dim);
}

/* Feature hint */
.feature-hint {
  font-size: 11px;
  color: var(--lilac);
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────
   12. FEATURE MODAL
   ────────────────────────────────────────────────────────── */

.feat-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.feat-modal-overlay.open {
  display: flex;
}

.feat-modal {
  background: linear-gradient(160deg, var(--card-2), var(--card));
  border: 1px solid var(--border);
  border-radius: 24px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  animation: modalIn 0.3s var(--ease);
}

/* Close button */
.feat-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(197, 200, 211, 0.08);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--silver-dim);
  transition: all 0.2s;
  font-size: 18px;
}

.feat-modal-close:hover {
  background: rgba(197, 200, 211, 0.16);
  color: #fff;
}

/* Modal content */
.feat-modal-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 10px;
}

.feat-modal h2 {
  font-size: 28px;
  margin-bottom: 14px;
}

.feat-modal p.feat-modal-desc {
  color: var(--silver-dim);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Media placeholder */
.feat-modal-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: var(--nebula);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  overflow: hidden;
  position: relative;
}

.feat-modal-media .media-placeholder-text {
  color: var(--silver-dim);
  font-size: 14px;
  text-align: center;
}

.feat-modal-media video,
.feat-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* Feature bullets */
.feat-modal-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feat-modal-bullets li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--silver);
}

.feat-modal-bullets li::before {
  content: '✦';
  color: var(--peach);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ──────────────────────────────────────────────────────────
   13. SHOWCASE SECTION
   ────────────────────────────────────────────────────────── */

.showcase {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 64px 0;
  border-top: 1px solid var(--border-soft);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--ease),
    transform 0.65s var(--ease);
}

.showcase.in {
  opacity: 1;
  transform: none;
}

.showcase:nth-child(even) {
  flex-direction: row-reverse;
}

/* Showcase text content */
.showcase-text {
  flex: 1;
}

.showcase-text .tag {
  color: var(--peach);
}

.showcase-text h3 {
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -0.6px;
  margin-bottom: 14px;
}

.showcase-text p {
  color: var(--silver-dim);
  font-size: 16px;
  max-width: 420px;
  margin-bottom: 22px;
}

/* Showcase media */
.showcase-media {
  flex: 1;
  min-width: 0;
}

.showcase-media-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--card-2), var(--card));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  min-height: 200px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.showcase-media-wrap:hover {
  transform: scale(1.025);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

.showcase-media-wrap .mock-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.showcase-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: 3;
}

.showcase-media-wrap:hover .showcase-img {
  opacity: 1;
}

.showcase-media-wrap:hover .mock-inner {
  opacity: 0;
  transition: opacity 0.3s;
}

.mock-inner {
  padding: 20px;
  transition: opacity 0.3s;
}

/* Showcase action buttons */
.showcase-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ──────────────────────────────────────────────────────────
   14. MOCK UI COMPONENTS
   ────────────────────────────────────────────────────────── */

/* Mock shelf chart */
.mock-shelf {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 198px;
  padding: 18px;
}

.mock-shelf b {
  flex: 1;
  border-radius: 3px;
  background: var(--lilac);
}

.mock-shelf b:nth-child(2) {
  background: var(--peach);
  height: 78%;
}

.mock-shelf b:nth-child(3) {
  background: var(--plum);
  height: 92%;
}

.mock-shelf b:nth-child(4) {
  background: var(--silver);
  height: 64%;
}

.mock-shelf b:nth-child(5) {
  background: var(--lilac);
  height: 84%;
}

.mock-shelf b:nth-child(6) {
  background: var(--peach);
  height: 70%;
}

.mock-shelf b:nth-child(7) {
  background: var(--plum);
  height: 96%;
}

/* Mock mood tracker */
.mock-mood {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  padding: 18px;
}

.mock-mood i {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--nebula);
}

.mock-mood i.a {
  background: var(--peach);
}

.mock-mood i.b {
  background: var(--lilac);
}

.mock-mood i.c {
  background: var(--plum);
}

/* ──────────────────────────────────────────────────────────
   ANIMACIÓN PARA MOCK-MOOD (alternancia de colores)
   ────────────────────────────────────────────────────────── */
.mock-mood i {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1);
}

/* Cada clase recorre los tres colores en distinto orden */
.mock-mood i.a {
  animation-name: shiftA;
}
.mock-mood i.b {
  animation-name: shiftB;
}
.mock-mood i.c {
  animation-name: shiftC;
}

@keyframes shiftA {
  0%, 100% { background-color: var(--peach); }
  33%      { background-color: var(--lilac); }
  66%      { background-color: var(--plum); }
}
@keyframes shiftB {
  0%, 100% { background-color: var(--lilac); }
  33%      { background-color: var(--plum); }
  66%      { background-color: var(--peach); }
}
@keyframes shiftC {
  0%, 100% { background-color: var(--plum); }
  33%      { background-color: var(--peach); }
  66%      { background-color: var(--lilac); }
}

.mock-mood i:nth-child(3n) { animation-delay: 0.5s; }
.mock-mood i:nth-child(4n) { animation-delay: 1s; }

/* Mock pomodoro */
.mock-pomo {
  text-align: center;
  padding: 28px;
}

.mock-pomo .ring {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: conic-gradient(var(--peach) 68%, var(--nebula) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-pomo .ring span {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk';
  font-size: 26px;
  color: #fff;
}

.mock-pomo small {
  color: var(--silver-dim);
  letter-spacing: 2px;
  font-size: 11px;
  text-transform: uppercase;
}

.mock-ditoo{
    display:flex;
    justify-content:center;
    padding:14px
}
.mock-ditoo .crt{
    width:170px;
    background:#1c1320;
    border-radius:14px;
    padding:14px;
    border:1px solid var(--plum)
}
.mock-ditoo .screen{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:2px;
    background:#0a0510;
    padding:8px;
    border-radius:6px
}
.mock-ditoo .screen i{
    aspect-ratio:1;
    border-radius:1px
}

.mock-growth{
    display:flex;
    align-items:center;
    justify-content:center;
    height:160px;
    position:relative
}
.mock-growth .r{
    position:absolute;
    border:2px solid var(--lilac);
    border-radius:50%;
    opacity:.5
}
.mock-growth .r1{
    width:60px;
    height:60px;
    border-color:var(--peach);
    opacity:1
}
.mock-growth .r2{
    width:110px;
    height:110px
}
.mock-growth .r3{
    width:160px;
    height:160px;
    opacity:.3
}
.demo-head{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px
}
.demo-head i{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--lilac);
    opacity:.6
}
.demo-title{
    font-family:'Space Grotesk';
    font-size:13px;
    color:var(--silver-dim);
    margin-left:6px
}
.demo-bars{
    display:flex;
    align-items:flex-end;
    gap:7px;
    height:80px;
    margin:6px 0
}
.demo-bars span{
    flex:1;
    border-radius:4px 4px 2px 2px;
    background:linear-gradient(var(--lilac),var(--plum));
    animation:eq 1.6s ease-in-out infinite
}
.demo-bars span:nth-child(odd){
    background:linear-gradient(var(--peach),#a8743b)
}
.demo-bars span:nth-child(1){
    animation-delay:0s
}
.demo-bars span:nth-child(2){}
.demo-bars span:nth-child(3){animation-delay:.4s}
.demo-bars span:nth-child(4){animation-delay:.1s}
.demo-bars span:nth-child(5){animation-delay:.5s}
.demo-bars span:nth-child(6){animation-delay:.3s}
.demo-bars span:nth-child(7){animation-delay:.6s}

@keyframes eq{0%,100% {
    height:30%
}
50%{
    height:100%
}
}

/* ──────────────────────────────────────────────────────────
   15. TESTIMONIALS
   ────────────────────────────────────────────────────────── */

.testi-grid {
  columns: 3;
  column-gap: 18px;
}

.testi {
  break-inside: avoid;
  margin-bottom: 18px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 22px;
}

/* Testimonial header */
.testi-top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.testi-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--lilac), var(--peach));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk';
  font-weight: 600;
  color: #241405;
}

.testi-top h4 {
  font-family: 'Space Grotesk';
  font-size: 14.5px;
  color: #fff;
  font-weight: 600;
}

.testi-top span {
  font-size: 12px;
  color: var(--silver-dim);
}

.testi p {
  font-size: 14px;
  color: var(--silver);
}

/* ──────────────────────────────────────────────────────────
   16. PRICING SECTION
   ────────────────────────────────────────────────────────── */

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1060px;
  margin: 0 auto;
  align-items: start;
}

/* Tres planes caben peor que dos: se reduce el padding y el tamaño de
   la cifra para que ninguna tarjeta quede más alta que las otras. */
.price-grid .price { padding: 30px 26px; }
.price-grid .price .amt { font-size: 38px; }

/* El plan del correo no es un escalón de precio, es el mismo $0 con
   algo desbloqueado: la etiqueta lo dice en vez de la cifra. */
.price .amt-sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--peach);
  margin-top: 4px;
}

/* Lo que el plan NO incluye. Decirlo evita que alguien pague esperando
   algo que ya tenía, o que se frustre buscando lo que no está. */
.price li.off { color: var(--silver-dim); opacity: .72; }
.price li.off svg { color: var(--silver-dim); }

/* Un beneficio destacado por tarjeta — el que define ese plan. En
   blanco para que se lea primero. Destacar solo uno de los tres planes
   desequilibraba la comparación. */
.price li strong { color: #fff; font-weight: 600; }

/* Las salvedades ("select widgets") van en gris y al lado, no en
   negrita dentro de la promesa: así matizan sin debilitar. */
.price li .li-note {
  color: var(--silver-dim);
  font-size: 12.5px;
  white-space: nowrap;
}

/* Puente hacia los templates. Esta sección solo habla de widgets, y
   quien busca sistemas completos no tenía desde aquí cómo llegar. */
.price-foot {
  text-align: center;
  margin-top: 28px;
  font-size: 14px;
  color: var(--silver-dim);
}

.price-foot a {
  color: var(--peach);
  font-weight: 600;
  margin-left: 6px;
}

.price-foot a:hover { text-decoration: underline; }

.price {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 34px;
}

/* Featured pricing card */
.price.featured {
  border-color: var(--peach);
  background: linear-gradient(170deg, var(--card-2), var(--card));
  position: relative;
  box-shadow: 0 24px 70px rgba(251, 196, 143, 0.12);
}

.price-badge {
  position: absolute;
  top: -12px;
  left: 34px;
  background: var(--peach);
  color: #241405;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  font-family: 'Space Grotesk';
}

/* Price heading */
.price h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

/* Price amount */
.price .amt {
  font-family: 'Space Grotesk';
  font-size: 44px;
  color: #fff;
  font-weight: 700;
  margin: 10px 0 2px;
}

.price .amt small {
  font-size: 16px;
  color: var(--silver-dim);
  font-weight: 500;
}

.price .note {
  font-size: 13px;
  color: var(--silver-dim);
  margin-bottom: 22px;
}

/* Price features list */
.price ul {
  list-style: none;
  margin-bottom: 26px;
}

.price li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  padding: 7px 0;
  color: var(--silver);
}

.price li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--peach);
}

.price .btn {
  width: 100%;
  justify-content: center;
}

/* ──────────────────────────────────────────────────────────
   17. FAQ SECTION
   ────────────────────────────────────────────────────────── */

.faq {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border-soft);
}

/* FAQ question */
.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-family: 'Space Grotesk';
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  padding: 22px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

/* Plus/minus icon */
.faq-q .pm {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  transition: transform 0.3s;
}

.faq-q .pm::before,
.faq-q .pm::after {
  content: '';
  position: absolute;
  background: var(--peach);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-q .pm::before {
  width: 14px;
  height: 2px;
}

.faq-q .pm::after {
  width: 2px;
  height: 14px;
  transition: transform 0.3s;
}

.faq-item.open .pm::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* FAQ answer */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}

.faq-a p {
  padding: 0 0 22px;
  color: var(--silver-dim);
  font-size: 15px;
  max-width: 90%;
}

/* ──────────────────────────────────────────────────────────
   18. FOOTER
   ────────────────────────────────────────────────────────── */

/* Footer CTA section */
.footer-cta {
  text-align: center;
  padding: 110px 0 80px;
  border-top: 1px solid var(--border-soft);
  position: relative;
}

.footer-cta .orb-big {
  width: 54px;
  height: 54px;
  margin: 0 auto 24px;
}

.footer-cta h2 {
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: -1px;
  margin-bottom: 14px;
}

.footer-cta h2 .script {
  font-family: 'Allura', cursive;
  color: var(--peach);
  font-size: 1.2em;
}

.footer-cta p {
  color: var(--silver-dim);
  max-width: 460px;
  margin: 0 auto 32px;
}

/* Main footer */
footer.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: 60px 0 30px;
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 40px;
  border-bottom: 1px solid var(--border-soft);
}

/* Footer brand section */
.footer-brand h4 {
  font-family: 'Space Grotesk';
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.footer-brand p {
  font-size: 13.5px;
  color: var(--silver-dim);
  line-height: 1.6;
  max-width: 260px;
}

/* Footer columns */
.footer-col h5 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: 14px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 14px;
  color: var(--silver-dim);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-col ul li a:hover {
  color: var(--peach);
}

/* Social buttons */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--border-soft);
  color: var(--silver-dim);
  transition: all 0.2s;
}

.social-btn:hover {
  border-color: var(--peach);
  color: var(--peach);
  background: rgba(251, 196, 143, 0.06);
}

/* Footer bottom */
.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--silver-dim);
}

.footer-bottom a {
  color: var(--lilac);
  transition: color 0.2s;
}

.footer-bottom a:hover {
  color: var(--peach);
}

/* ──────────────────────────────────────────────────────────
   19. UTILITY CLASSES
   ────────────────────────────────────────────────────────── */

/* Reveal animation for scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* Show more button wrapper */
.show-more-wrap {
  text-align: center;
  padding: 56px 0 16px;
}

/* ──────────────────────────────────────────────────────────
   20. RESPONSIVE DESIGN
   ────────────────────────────────────────────────────────── */

/* Tablet (860px and below) */
@media (max-width: 980px) {
  /* A dos columnas el plan destacado ocupa el ancho completo arriba,
     para que no quede una tarjeta suelta y descolgada en la fila. */
  .price-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
  .price-grid .price.featured { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }

  .grid {
    grid-template-columns: 1fr 1fr;
  }

  .testi-grid {
    columns: 2;
  }

  .showcase,
  .showcase:nth-child(even) {
    flex-direction: column;
    gap: 34px;
    text-align: center;
  }

  .showcase-text p {
    margin: 0 auto;
  }

  .hero-visual {
    height: 380px;
  }

  .orbit.o3 {
    width: 420px;
    height: 420px;
  }

  .orbit.o2 {
    width: 300px;
    height: 300px;
  }

  .orbit.o1 {
    width: 200px;
    height: 200px;
  }

  .featured-badge-1 {
    top: 6px;
  }

  .featured-badge-2 {
    bottom: 20px;
    left: 10px;
  }

  .featured-badge-3 {
    top: 120px;
    right: 6px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

/* Mobile (560px and below) */
@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .testi-grid {
    columns: 1;
  }

  .price-grid {
    grid-template-columns: 1fr;
  }

  .price-grid .price.featured { grid-column: auto; }

  .menu-btn {
    display: block;
  }

  .hero {
    padding: 130px 0 60px;
  }

  .section {
    padding: 72px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .showcase-actions {
    justify-content: center;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .showcase {
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}
/* ──────────────────────────────────────────────────────────
   LISTA DE ESPERA DE PREMIUM
   El botón que antes decía "In development" deshabilitado. Un
   botón muerto en la tarjeta de pago desperdicia el único sitio
   donde alguien ya está pensando en pagar.
   ────────────────────────────────────────────────────────── */
.btn-waitlist {
  width: 100%;
  justify-content: center;
  background: transparent;
  color: var(--peach);
  border: 1px solid rgba(251, 196, 143, .45);
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}

.btn-waitlist:hover:not(:disabled) {
  background: rgba(251, 196, 143, .1);
  border-color: var(--peach);
  transform: translateY(-1px);
}

/* Apuntado: deja de ser una acción y pasa a ser un estado. Verde
   sobrio en lugar del durazno, para que se distinga de "pendiente". */
.btn-waitlist.is-done {
  color: #7fd1a8;
  border-color: rgba(127, 209, 168, .4);
  background: rgba(127, 209, 168, .08);
  cursor: default;
  opacity: 1;
}

.btn-waitlist:disabled:not(.is-done) { opacity: .6; cursor: default; }

.waitlist-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--silver-dim);
  text-align: center;
}

/* ──────────────────────────────────────────────────────────
   23. ROADMAP / PROXIMOS LANZAMIENTOS
   ──────────────────────────────────────────────────────────
   Tarjetas de lanzamiento. Reutilizan .btn y .btn-waitlist, que ya
   existen, asi que aqui solo esta la caja y el estado. */

.launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  /* Con un solo lanzamiento la tarjeta no se estira a todo el ancho:
     una caja de 1120px con tres renglones de texto se ve vacia. */
  max-width: 720px;
  margin: 0 auto;
}

.launch {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.launch h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.launch p {
  font-size: 14.5px;
  color: var(--silver-dim);
  margin-bottom: 18px;
  /* Empuja el boton al fondo para que las tarjetas de una misma fila
     alineen sus CTA aunque el texto tenga distinto largo. */
  flex: 1;
}

/* El desbloqueo: es la razon por la que la plantilla cuesta, asi que
   no va como un parrafo mas. Caja aparte, acento durazno, y sin flex:1
   para que no se la coma el empuje del parrafo de arriba. */
.launch-unlock {
  flex: none;
  font-size: 13.5px;
  color: var(--silver);
  background: rgba(251, 196, 143, 0.08);
  border: 1px solid rgba(251, 196, 143, 0.20);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 22px;
}

.launch-unlock strong {
  color: var(--peach);
  font-weight: 600;
}

/* Etiqueta de estado */
.launch-status {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.launch-status.is-building {
  color: var(--peach);
  background: rgba(251, 196, 143, 0.10);
  border: 1px solid rgba(251, 196, 143, 0.22);
}

.launch-status.is-next {
  color: var(--lilac);
  background: rgba(125, 111, 179, 0.12);
  border: 1px solid var(--border);
}

/* Estado sin formulario configurado: el CTA deja de ser accionable y
   se ve como lo que es, un aviso, no un boton. */
.launch-cta.is-pending {
  color: var(--silver-dim);
  border-color: var(--border-soft);
  cursor: default;
  pointer-events: none;
}

@media (max-width: 560px) {
  .launch {
    padding: 24px;
    border-radius: 18px;
  }
}