 :root {
      --wk-blue: #0062C7;
      --wk-blue-dark: #00489a;
      --wk-light: #f5f7fb;
      --wk-dark: #0a1220;
    }
    body {
      font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background-color: #ffffff;
      color: #1a1a1a;
    }
    .navbar-brand span {
      font-weight: 700;
      letter-spacing: 0.06em;
    }
    .wk-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}

    .wk-hero {
      background: radial-gradient(circle at top left, #1c7dff 0, #0062C7 40%, #00489a 100%);
      color: #ffffff;
      padding: 5rem 0 4rem;
      position: relative;
      overflow: hidden;
    }
    .wk-hero-badge {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      border-radius: 999px;
      padding: 0.25rem 0.9rem;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      display: inline-flex;
      align-items: center;
      gap: .35rem;
    }
    .wk-hero-title {
      font-size: clamp(2.3rem, 4vw, 3.2rem);
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 1rem;
    }
    .wk-hero-subtitle {
      font-size: 1.05rem;
      max-width: 460px;
      opacity: 0.9;
    }
    .btn-wk-primary {
      background-color: #ffffff;
      color: var(--wk-blue);
      border-radius: 999px;
      border: none;
      padding: 0.7rem 1.6rem;
      font-weight: 600;
      box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    }
    .btn-wk-primary:hover {
      background-color: #f0f3ff;
      color: var(--wk-blue-dark);
    }
    .btn-wk-ghost {
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.55);
      color: #ffffff;
      padding: 0.7rem 1.4rem;
      font-weight: 500;
      background: transparent;
    }
    .btn-wk-ghost:hover {
      background: rgba(255,255,255,0.12);
      color: #ffffff;
    }
    .wk-hero-tagline {
      font-size: 0.9rem;
      opacity: 0.85;
      margin-top: 0.75rem;
    }
    .wk-hero-mockup {
      background: rgba(255,255,255,0.08);
      border-radius: 1.5rem;
      padding: 1.25rem;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    }
    .wk-section-label {
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: .78rem;
      font-weight: 600;
      color: var(--wk-blue);
    }
    .wk-section-title {
      font-weight: 700;
      font-size: 1.9rem;
    }
    .wk-feature-icon {
      width: 46px;
      height: 46px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--wk-light);
      color: var(--wk-blue);
      margin-bottom: .75rem;
      font-size: 1.2rem;
    }
    .wk-pricing {
      background-color: var(--wk-light);
      padding: 4rem 0;
    }
    .wk-card {
      border: none;
      border-radius: 1.25rem;
      box-shadow: 0 16px 40px rgba(8,24,80,0.12);
    }
    .wk-card-highlight {
      border: 2px solid var(--wk-blue);
      position: relative;
    }
    .wk-card-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: var(--wk-blue);
      color: #fff;
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      padding: .2rem .75rem;
      border-radius: 999px;
    }
    .wk-price {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--wk-blue-dark);
    }
    .wk-process-step {
      border-radius: 1rem;
      border: 1px solid #e2e6f4;
      padding: 1.25rem 1.4rem;
      height: 100%;
    }
    .wk-step-number {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: var(--wk-blue);
      color: #fff;
      font-size: .8rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: .5rem;
      font-weight: 600;
    }
    .wk-cta {
      background: linear-gradient(135deg, #0062C7, #00489a);
      color: #fff;
      padding: 3.5rem 0;
      border-radius: 1.5rem;
    }
    .wk-footer {
      font-size: .85rem;
      color: #8b90a4;
      padding-top: 2rem;
      padding-bottom: 1.5rem;
    }

  .badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  font-size: 1.4rem;
  color: #0066ff; /* azul WebKing */
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 22px;
  background: #25d366;
  color: white;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  z-index: 999;
  transition: transform .2s;
}

.whatsapp-float:hover {
  transform: scale(1.05);
}

/* ==== HERO INTERNO (otras páginas) ==== */
.wk-hero-inner {
  background: radial-gradient(circle at top left, #1c7dff 0, #0062C7 40%, #00489a 100%);
  color: #ffffff;
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

/* Chips / etiquetas pequeñas */
.wk-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Tarjetas de info para esta página */
.wk-info-card {
  border-radius: 1.25rem;
  border: 1px solid #e5e7f0;
  padding: 1.5rem 1.6rem;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  height: 100%;
}

/* Listas compactas con iconos */
.wk-list-compact {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.wk-list-compact li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  margin-bottom: .5rem;
}

/* Iconos “check” y “x” diferenciados */
.wk-icon-good,
.wk-icon-bad {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}

.wk-icon-good {
  background: #e0f7ec;
  color: #15803d;
}

.wk-icon-bad {
  background: #fee2e2;
  color: #b91c1c;
}

/* Bloques de resumen */
.wk-summary-box {
  border-radius: 1.25rem;
  background: #f5f7fb;
  padding: 1.5rem 1.75rem;
}

/* Subtítulos dentro del contenido */
.wk-subtitle {
  font-weight: 600;
  font-size: 1rem;
}




