/* ======================================================
   Konko · Case Study (blog) — LP case-study styles bundled
   from konko-cs-* + konko-quote so blog cases match the LP.
   ====================================================== */

/* ===== from konko-cs-hero ===== */
/* Konko · Caso — Hero. Tokens from konko-design-system.css; .ksection/.kcontainer/
   .keyebrow/.kph/.kgold-underline from landing-konko.css. */

.kcs-hero__crumb { font-family: var(--font-mono) !important; font-size: 13px !important; letter-spacing: 0.04em !important; margin-bottom: clamp(14px, 2vw, 24px) !important; color: var(--neutral-500, #737373) !important; }
.kcs-hero__crumb-link { color: var(--neutral-500, #737373) !important; text-decoration: none !important; transition: color 0.25s ease !important; }
.kcs-hero__crumb-link:hover { color: var(--brand-gold-dark) !important; }
.kcs-hero__crumb-sep { margin: 0 8px !important; }
.kcs-hero__crumb-cur { color: var(--brand-gold-dark) !important; }

.kcs-hero__client { margin: 0 0 18px !important; }

.kcs-hero__title {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  font-family: var(--font-display) !important;
  font-size: clamp(34px, 5.2vw, 64px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--neutral-900) !important;
  margin: 0 !important;
  max-width: 980px !important;
  padding-bottom: 8px !important;
  white-space: pre-line !important;
}

.kcs-hero__lead {
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.5 !important;
  color: var(--neutral-600) !important;
  margin: 16px 0 0 !important;
  max-width: 760px !important;
}

.kcs-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 16px !important;
  padding: 9px 18px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--brand-border) !important;
  background: var(--brand-white) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--neutral-900) !important;
}
.kcs-hero__badge-dot { color: var(--brand-gold) !important; width: 15px !important; height: 16px !important; }

.kcs-hero__media {
  position: relative !important;
  margin-top: clamp(40px, 5vw, 64px) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.14) !important;
}
.kcs-hero__media img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 7 !important;
  object-fit: cover !important;
}
.kcs-hero__ph { display: flex !important; width: 100% !important; aspect-ratio: 16 / 7 !important; min-height: 0 !important; border-radius: 0 !important; }

@media (max-width: 600px) {
  .kcs-hero__media img, .kcs-hero__ph { aspect-ratio: 4 / 3 !important; }
}

/* ===== from konko-cs-glance ===== */
/* Konko · Caso — De un vistazo. Big impact numbers with vertical dividers. */
.kcsg__grid {
  display: grid !important;
  grid-template-columns: repeat(var(--n, 3), 1fr) !important;
  gap: clamp(24px, 4vw, 56px) !important;
}
.kcsg__item { position: relative !important; padding-left: clamp(20px, 3vw, 40px) !important; }
.kcsg__item:not(:first-child)::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 4px !important; bottom: 4px !important;
  width: 1px !important;
  background: var(--brand-border) !important;
}
.ksection--dark .kcsg__item:not(:first-child)::before { background: var(--brand-border-home) !important; }
.kcsg__item:first-child { padding-left: 0 !important; }

.kcsg__value {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: clamp(40px, 6vw, 68px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: var(--brand-gold-dark) !important;
  font-variant-numeric: tabular-nums !important;
}
.ksection--dark .kcsg__value { color: var(--brand-gold-vivid) !important; }

.kcsg__cap {
  display: block !important;
  margin-top: 12px !important;
  font-size: clamp(14px, 1.6vw, 17px) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--neutral-600) !important;
  max-width: 240px !important;
}
.ksection--dark .kcsg__cap { color: rgba(255, 255, 255, 0.72) !important; }

@media (max-width: 640px) {
  .kcsg__grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .kcsg__item { padding-left: 0 !important; }
  .kcsg__item:not(:first-child)::before { display: none !important; }
  .kcsg__item:not(:first-child) { padding-top: 28px !important; border-top: 1px solid var(--brand-border) !important; }
  .ksection--dark .kcsg__item:not(:first-child) { border-top-color: var(--brand-border-home) !important; }
}

/* ===== from konko-cs-body ===== */
/* Konko · Caso — Texto. Prose styling for case narrative. !important guards
   Elevate base theme (p/h3/ul/blockquote/a element rules). */

.kcsbody__head { margin-bottom: clamp(24px, 3vw, 36px) !important; }
.kcsbody__title {
  font-size: clamp(26px, 3.4vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
}

.kcsbody__rich { color: var(--neutral-700, #404040) !important; }
.kcsbody__rich > :first-child { margin-top: 0 !important; }
.kcsbody__rich > :last-child { margin-bottom: 0 !important; }

/* Case body + moved subtitle: keep the reading column CENTERED but wider (más
   full-width) than the old 880 — the skinny centered strip read as inconsistent
   next to the wide hero/stats. Content fills the centered column. */
.kcsbody .kcontainer--narrow { max-width: 1100px !important; }
.kcsbody__head, .kcsbody__rich { max-width: none !important; margin-left: auto !important; margin-right: auto !important; }

/* Paragraphs */
.kcsbody__rich p {
  font-family: var(--font-sans) !important;
  font-size: clamp(17px, 1.9vw, 19px) !important;
  line-height: 1.65 !important;
  color: var(--neutral-700, #404040) !important;
  margin: 0 0 1.25em !important;
}
.ksection--dark .kcsbody__rich p { color: rgba(255,255,255,0.78) !important; }

/* Subheadings inside body */
.kcsbody__rich h2, .kcsbody__rich h3, .kcsbody__rich h4 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--neutral-900) !important;
  line-height: 1.2 !important;
  margin: 1.8em 0 0.6em !important;
}
.kcsbody__rich h3 { font-size: clamp(20px, 2.2vw, 26px) !important; }
.kcsbody__rich h4 { font-size: clamp(18px, 2vw, 21px) !important; }
.ksection--dark .kcsbody__rich h2, .ksection--dark .kcsbody__rich h3, .ksection--dark .kcsbody__rich h4 { color: var(--brand-white) !important; }

/* Lists */
.kcsbody__rich ul, .kcsbody__rich ol { margin: 0 0 1.25em !important; padding-left: 1.3em !important; }
.kcsbody__rich li { font-size: clamp(17px, 1.9vw, 19px) !important; line-height: 1.6 !important; color: var(--neutral-700, #404040) !important; margin: 0 0 0.5em !important; }
.kcsbody__rich ul li::marker { color: var(--brand-gold-dark) !important; }
.ksection--dark .kcsbody__rich li { color: rgba(255,255,255,0.78) !important; }

/* Inline blockquote (pull quote) */
.kcsbody__rich blockquote {
  margin: 1.6em 0 !important;
  padding: 4px 0 4px 22px !important;
  border-left: 3px solid var(--brand-gold) !important;
  background: none !important;
  font-family: var(--font-display) !important;
  font-size: clamp(19px, 2.2vw, 24px) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  color: var(--neutral-900) !important;
  quotes: none !important;
}
.kcsbody__rich blockquote::before, .kcsbody__rich blockquote::after { content: none !important; }
.ksection--dark .kcsbody__rich blockquote { color: var(--brand-white) !important; }
.kcsbody__rich blockquote cite {
  display: block !important;
  margin-top: 10px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: var(--neutral-600) !important;
}
.ksection--dark .kcsbody__rich blockquote cite { color: rgba(255,255,255,0.6) !important; }

/* Links */
.kcsbody__rich a:not(.kbtn) { color: var(--brand-gold-dark) !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
.ksection--dark .kcsbody__rich a:not(.kbtn) { color: var(--brand-gold-vivid) !important; }

/* Images in body */
.kcsbody__rich img { max-width: 100% !important; height: auto !important; border-radius: 16px !important; margin: 1.2em 0 !important; }

/* Strong */
.kcsbody__rich strong { font-weight: 600 !important; color: var(--neutral-900) !important; }
.ksection--dark .kcsbody__rich strong { color: var(--brand-white) !important; }

/* ===== from konko-cs-compare ===== */
/* Konko · Caso — Comparativa. 3-column table; column B (Konko) highlighted gold. */
.kccmp__table {
  border: 1px solid var(--brand-border) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: var(--brand-white) !important;
}
.kccmp__row {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  align-items: stretch !important;
}
.kccmp__row:not(:last-child) { border-bottom: 1px solid var(--brand-border) !important; }

.kccmp__cell {
  padding: clamp(16px, 2.2vw, 24px) clamp(16px, 2vw, 28px) !important;
  font-size: clamp(15px, 1.7vw, 18px) !important;
  line-height: 1.4 !important;
  color: var(--neutral-700, #404040) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.kccmp__cell--metric { font-weight: 600 !important; color: var(--neutral-900) !important; background: var(--brand-gray-white, #F8F9FB) !important; }
.kccmp__cell--a { color: var(--neutral-500, #737373) !important; }

/* Column B — the Konko column, highlighted */
.kccmp__cell--b {
  background: linear-gradient(180deg, rgba(201,168,76,0.10), rgba(201,168,76,0.04)) !important;
  color: var(--neutral-900) !important;
  font-weight: 600 !important;
  box-shadow: inset 1px 0 0 rgba(201,168,76,0.30) !important;
}

/* Header row */
.kccmp__row--head .kccmp__cell { font-family: var(--font-mono) !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 500 !important; }
.kccmp__row--head .kccmp__cell--a { color: var(--neutral-500, #737373) !important; }
.kccmp__row--head .kccmp__cell--b { color: var(--brand-gold-dark) !important; }
.kccmp__row--head .kccmp__cell--metric { background: var(--brand-gray-white, #F8F9FB) !important; }

/* Per-cell mini label (shown only on mobile stack) */
.kccmp__klabel { display: none !important; font-family: var(--font-mono) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--neutral-500, #737373) !important; margin-bottom: 4px !important; }

@media (max-width: 720px) {
  .kccmp__row--head { display: none !important; }
  .kccmp__row { grid-template-columns: 1fr !important; }
  .kccmp__cell { border-top: 1px solid var(--brand-border) !important; }
  .kccmp__cell--metric { border-top: 0 !important; font-size: 16px !important; }
  .kccmp__cell--b { box-shadow: none !important; }
  .kccmp__klabel { display: block !important; }
}

/* ===== from konko-quote ===== */
/* Konko · Quote
   NOTE: every visual declaration is forced with !important — HubSpot's
   Elevate base theme (main.hubl.css) styles blockquote/h*/p/a with
   element selectors that otherwise beat our single-class selectors. */

/* ── Premium pass: elevate into a card, gold-gradient mark, gold photo ring ── */
.kquote__figure {
  background: var(--brand-white) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: 28px !important;
  padding: clamp(32px, 5vw, 60px) !important;
  box-shadow: 0 18px 50px rgba(10, 10, 10, 0.07) !important;
  position: relative !important;
  overflow: hidden !important;
}
.ksection--cream .kquote__figure { background: var(--brand-white) !important; }
.ksection--dark .kquote__figure { background: var(--brand-black-soft) !important; border-color: var(--brand-border-home) !important; }
/* Soft warm glow in the corner */
.kquote__figure::after {
  content: "" !important;
  position: absolute !important;
  top: -40% !important; right: -10% !important;
  width: 45% !important; height: 120% !important;
  background: radial-gradient(closest-side, rgba(201,168,76,0.10), rgba(201,168,76,0) 70%) !important;
  pointer-events: none !important;
}
.kquote__mark { color: var(--brand-gold) !important; }
.kquote__photo { border: 2px solid var(--brand-gold) !important; }
.kquote__figure {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.kquote__mark {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: clamp(64px, 9vw, 120px) !important;
  font-weight: 600 !important;
  line-height: 0.6 !important;
  color: var(--brand-gold) !important;
  margin: 0 0 clamp(8px, 1.5vw, 16px) !important;
}

/* Rendered as <blockquote> — Elevate gives blockquote its own
   background / border-left / padding / font / quotes, so reset all. */
.kquote__text {
  background: none !important;
  border: 0 !important;
  border-left: 0 !important;
  padding: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 3.6vw, 44px) !important;
  font-weight: 500 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: inherit !important;
  white-space: pre-line !important;
  text-wrap: balance;
  font-style: normal !important;
  quotes: none !important;
}
.kquote__text::before,
.kquote__text::after { content: none !important; }

.kquote__author {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: clamp(32px, 4vw, 48px) 0 0 !important;
  padding: 0 !important;
}

.kquote__photo {
  flex-shrink: 0 !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 9999px !important;
  object-fit: cover !important;
  border: 2px solid var(--brand-white) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Empty-photo placeholder reuses .kph but forced into a small circle */
.kquote__photo--ph {
  min-height: 0 !important;
  font-size: 11px !important;
  border-radius: 9999px !important;
}

.kquote__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

/* Author name — matches text-[20px] font-semibold leading-[27px] text-brand-black */
.kquote__name {
  font-family: var(--font-sans) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 27px !important;
  color: var(--brand-black) !important;
  margin: 0 !important;
}
.ksection--dark .kquote__name { color: var(--brand-white) !important; }

/* Author role — matches text-[18px] font-normal leading-[27px] text-neutral-500 */
.kquote__role {
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 27px !important;
  color: var(--neutral-500) !important;
  margin: 0 !important;
}
.ksection--dark .kquote__role { color: rgba(255, 255, 255, 0.62) !important; }

.kquote__logo {
  margin-left: auto !important;
  max-height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Any stray link inside the quote (not a button) — beat a:not(.hs-elevate-button) */
.kquote a:not(.kbtn) {
  color: var(--brand-gold-dark) !important;
  text-decoration: none !important;
}
.ksection--dark .kquote a:not(.kbtn) { color: var(--brand-gold-vivid) !important; }

@media (max-width: 768px) {
  .kquote__text { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.3 !important; }
  .kquote__author { flex-wrap: wrap !important; gap: 14px !important; }
  .kquote__photo { width: 56px !important; height: 56px !important; }
  .kquote__name { font-size: 18px !important; line-height: 24px !important; }
  .kquote__role { font-size: 16px !important; line-height: 22px !important; }
  .kquote__logo { margin-left: 0 !important; flex-basis: 100% !important; max-height: 32px !important; }
}


/* ===== In-body snippets (for pasting inside post_body) ===== */
.kfacts { background: var(--brand-black); border-radius: 20px; padding: clamp(26px, 4vw, 40px); margin: 2em 0; }
.kfacts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: clamp(18px, 3vw, 32px); }
.kfacts__num { display: block; font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--brand-gold-vivid); font-variant-numeric: tabular-nums; }
.kfacts__cap { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   Case-study reading experience (chrome): progress bar, sticky TOC,
   numbered chapters, sticky CTA. Injected by case-study.js.
   ============================================================ */

/* Reading progress (gold, fixed top) */
.kcs-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; }
.kcs-progress__fill { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-vivid)); will-change: transform; }

/* Numbered chapters — only cs-body sections that carry an id (Reto/Solución/Resultado) */
body { counter-reset: kcschap; }
.kcsbody[id] .kcsbody__head .keyebrow { counter-increment: kcschap; }
.kcsbody[id] .kcsbody__head .keyebrow::before {
  content: counter(kcschap, decimal-leading-zero) "  ·  ";
  color: var(--brand-gold-dark) !important;
  opacity: 0.65;
}

/* Sticky TOC (desktop only) — rail in the left gutter, scrollspy */
.kcs-toc { display: none; }
@media (min-width: 1200px) {
  .kcs-toc { display: block; position: fixed; top: 50%; transform: translateY(-50%); left: max(24px, calc(50% - 560px)); z-index: 60; max-width: 150px; }
  .kcs-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .kcs-toc__link { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-500, #737373); text-decoration: none; padding: 2px 0 2px 16px; border-left: 2px solid var(--brand-border); transition: color 0.25s ease, border-color 0.25s ease; line-height: 1.3; }
  .kcs-toc__link:hover { color: var(--neutral-900); }
  .kcs-toc__link.is-active { color: var(--brand-gold-dark); border-left-color: var(--brand-gold); font-weight: 500; }
}

/* Sticky CTA bar (slides up after the hero, hides near the footer CTA) */
.kcs-sticky-cta {
  display: none !important; /* floating closing CTA hidden on desktop + mobile */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 14px 22px;
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(120%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.kcs-sticky-cta.is-visible { transform: translateY(0); }
.kcs-sticky-cta__txt { font-size: 15px; font-weight: 500; }
.kcs-sticky-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-gold); color: var(--brand-black);
  font-weight: 600; font-size: 14px; padding: 11px 22px;
  border-radius: 9999px; text-decoration: none; white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s ease;
}
.kcs-sticky-cta__btn:hover { background: var(--brand-gold-vivid); transform: scale(1.03); }
@media (max-width: 600px) { .kcs-sticky-cta { padding: 11px 14px; } .kcs-sticky-cta__txt { display: none; } }
@media (prefers-reduced-motion: reduce) { .kcs-sticky-cta { transition: none; } }

/* ── Iteration 2: hero entrance + TOC header polish ── */
@keyframes kcsUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.kcs-hero__crumb, .kcs-hero__client, .kcs-hero__title, .kcs-hero__lead, .kcs-hero__badge, .kcs-hero__media { animation: kcsUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.kcs-hero__crumb { animation-delay: 0.02s; }
.kcs-hero__client { animation-delay: 0.10s; }
.kcs-hero__title { animation-delay: 0.16s; }
.kcs-hero__lead { animation-delay: 0.26s; }
.kcs-hero__badge { animation-delay: 0.34s; }
.kcs-hero__media { animation-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) { .kcs-hero__crumb, .kcs-hero__client, .kcs-hero__title, .kcs-hero__lead, .kcs-hero__badge, .kcs-hero__media { animation: none; } }

@media (min-width: 1200px) {
  .kcs-toc__head { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-400, #A3A3A3); margin: 0 0 14px 16px; }
}

/* ============================================================
   Iteration 3 — debug TOC visibility, website-aligned type,
   scroll/anchor behavior, animations + micro-interactions.
   ============================================================ */

/* Anchor jumps land below the sticky nav (website uses scroll-padding-top) */
html { scroll-behavior: smooth; }
.kcsbody[id], .kcs-hero, .kcsg, .kccmp { scroll-margin-top: 156px; }

/* Body reading polish (website font-feature-settings + smoothing) */
.kcsbody__rich { font-feature-settings: "kern","liga","calt"; -webkit-font-smoothing: antialiased; }
.kcsbody__rich p, .kcsbody__rich li { line-height: 1.72 !important; }

/* Type sizes aligned to the website scale (tracking-tight on titles) */
.kcs-hero__title { font-size: clamp(36px, 5.4vw, 72px) !important; letter-spacing: -0.03em !important; }
.kcsbody__title { font-size: clamp(28px, 3.6vw, 44px) !important; letter-spacing: -0.025em !important; }

/* FIX: sticky TOC only appears during the body (was fixed/visible over hero+footer) */
@media (min-width: 1200px) {
  .kcs-toc { opacity: 0; pointer-events: none; transform: translate(-10px, -50%); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1); }
  .kcs-toc.is-shown { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
}

/* ── Micro-interactions (mirror website hover:scale / transitions) ── */
.kcsg__item { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.kcsg__item:hover { transform: translateY(-4px); }

.kccmp__row:not(.kccmp__row--head) .kccmp__cell { transition: background 0.25s ease; }
.kccmp__row:not(.kccmp__row--head):hover .kccmp__cell--b { background: linear-gradient(180deg, rgba(201,168,76,0.20), rgba(201,168,76,0.09)) !important; }
.kccmp__row:not(.kccmp__row--head):hover .kccmp__cell--metric { color: var(--brand-gold-dark) !important; }

.kcs-hero__media img { transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.kcs-hero__media:hover img { transform: scale(1.03); }
.kcsbody__rich img { transition: transform 0.5s ease; border-radius: 16px; }
.kcsbody__rich img:hover { transform: scale(1.02); }

.kquote__figure { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease; }
.kquote__figure:hover { transform: translateY(-3px); box-shadow: 0 24px 56px rgba(10,10,10,0.10) !important; }

/* ── Animations ── gold underline draws in on the hero, reveals stagger ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes kcsDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .kcs-hero__title .kgold-underline { transform-origin: left center; animation: kcsDraw 0.9s cubic-bezier(0.16,1,0.3,1) 0.55s both; }

  /* glance numbers rise + stagger when the bar reveals */
  .kcsg__grid.kreveal .kcsg__item { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); }
  .kcsg__grid.kreveal--in .kcsg__item { opacity: 1; transform: none; }
  .kcsg__grid.kreveal--in .kcsg__item:nth-child(2) { transition-delay: 0.08s; }
  .kcsg__grid.kreveal--in .kcsg__item:nth-child(3) { transition-delay: 0.16s; }
  .kcsg__grid.kreveal--in .kcsg__item:nth-child(4) { transition-delay: 0.24s; }
}

/* ============================================================
   Iteration 4 — fix side TOC ("pegado"): anchor to content column
   (constant gutter at any width), raise breakpoint, number items.
   ============================================================ */
@media (max-width: 1239px) { .kcs-toc { display: none !important; } }
@media (min-width: 1240px) {
  .kcs-toc { display: block; left: 50%; margin-left: -610px; right: auto; width: 152px; }
  .kcs-toc ul { counter-reset: ktoc; }
  .kcs-toc__link { position: relative; }
  .kcs-toc__link::before { counter-increment: ktoc; content: counter(ktoc, decimal-leading-zero) "  "; opacity: 0.55; }
  .kcs-toc__link.is-active::before { opacity: 1; color: var(--brand-gold) !important; }
}

/* Badge micro-interaction + CTA arrow nudge */
.kcs-hero__badge { transition: border-color 0.3s ease, transform 0.3s ease; }
.kcs-hero__badge:hover { border-color: var(--brand-gold) !important; transform: translateY(-1px); }

/* Glance value subtle gold shift on item hover */
.kcsg__item:hover .kcsg__value { filter: saturate(1.15); }

/* ── 2-column hero (text + image) — balances the layout (iteration 5) ── */
.kcs-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); align-items: center; }
@media (min-width: 940px) { .kcs-hero__grid { grid-template-columns: 1.04fr 0.96fr; gap: clamp(40px, 4.5vw, 72px); } }
.kcs-hero__intro { min-width: 0; }
.kcs-hero__grid .kcs-hero__media { margin-top: 0 !important; }
.kcs-hero__grid .kcs-hero__media img, .kcs-hero__grid .kcs-hero__media .kcs-hero__ph { aspect-ratio: 16 / 10 !important; }
.kcs-hero__title { font-size: clamp(30px, 4.4vw, 52px) !important; }
@media (min-width: 940px) { .kcs-hero__title { font-size: clamp(32px, 3.2vw, 50px) !important; } .kcs-hero__lead { font-size: clamp(17px, 1.5vw, 19px) !important; } }

/* Iteration 6 — TOC clearly works: land below the fixed nav + clearer active state */
.kcsbody[id], .kcs-hero, .kcsg, .kccmp { scroll-margin-top: 156px !important; }
@media (min-width: 1240px) {
  .kcs-toc__link { font-size: 11.5px; padding-top: 4px; padding-bottom: 4px; }
  .kcs-toc__link.is-active { font-weight: 600; border-left-width: 3px; }
}

/* ============================================================
   Iteration 7 — TOC redesigned as a HORIZONTAL sticky chapter
   bar. The old left rail sat in the gutter of full-width sections
   (glance / compare / quote) and overlapped them, and read as a
   faint hairline. A full-width bar pinned under the nav can never
   overlap and is far more legible. Also: stronger before/after.
   These rules override every earlier .kcs-toc rule (later + !important).
   ============================================================ */

/* leave room for nav (~132) + bar (52) on anchor jumps */
.kcsbody[id], .kcs-hero, .kcsg, .kccmp, .kcs-video { scroll-margin-top: 200px !important; }

.kcs-toc { display: none !important; }
@media (min-width: 768px) {
  /* Outer layer mirrors .knav (full-width, 40px side gutter, transparent). */
  .kcs-toc {
    display: block !important;
    position: fixed !important;
    top: var(--kcs-navh, 120px) !important;
    left: 0 !important; right: 0 !important; bottom: auto !important;
    width: auto !important; max-width: none !important; margin: 0 !important;
    padding: 0 40px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    z-index: 58 !important;
    opacity: 0 !important; pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .kcs-toc.is-shown {
    opacity: 1 !important; pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  .kcs-toc__head { display: none !important; }
  /* Inner continues the nav pill as ONE component: same width/gutter/glass,
     flush under it, square top + rounded bottom, no borders (clean glass pill). */
  .kcs-toc__inner {
    display: flex !important; align-items: stretch !important;
    width: 100% !important; max-width: 1240px !important; margin: 0 auto !important;
    padding: 0 20px !important;
    border-radius: 0 0 20px 20px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
    border: 0 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09) !important;
    box-sizing: border-box !important;
  }
  /* When the bar is shown, square the nav pill's bottom + drop its borders/shadow
     so the pill and the chapter strip fuse into a single rounded glass component. */
  .knav__inner.kcs-merge {
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important;
    box-shadow: none !important;
  }
  .kcs-toc__list {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    gap: clamp(20px, 3vw, 44px) !important;
    overflow-x: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important;
    counter-reset: ktoc !important;
  }
  .kcs-toc__list::-webkit-scrollbar { display: none !important; }
  .kcs-toc__link {
    position: relative !important;
    display: inline-flex !important; align-items: center !important;
    height: 44px !important; padding: 0 !important;
    border: 0 !important; border-left: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important; letter-spacing: 0.01em !important; text-transform: none !important;
    color: var(--neutral-500, #737373) !important;
    text-decoration: none !important; white-space: nowrap !important;
    transition: color 0.25s ease !important;
  }
  .kcs-toc__link::before {
    counter-increment: ktoc !important;
    content: counter(ktoc, decimal-leading-zero) !important;
    margin-right: 9px !important;
    font-size: 11px !important; font-weight: 500 !important;
    color: var(--brand-gold-dark) !important; opacity: 0.65 !important;
  }
  .kcs-toc__link::after {
    content: "" !important;
    position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important;
    height: 2px !important; background: var(--brand-gold) !important;
    transform: scaleX(0) !important; transform-origin: left center !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .kcs-toc__link:hover { color: var(--neutral-900) !important; }
  .kcs-toc__link.is-active {
    color: var(--neutral-900) !important; font-weight: 600 !important; border: 0 !important;
  }
  .kcs-toc__link.is-active::before { opacity: 1 !important; color: var(--brand-gold-dark) !important; }
  .kcs-toc__link.is-active::after { transform: scaleX(1) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .kcs-toc, .kcs-toc__link::after { transition: none !important; }
}

/* --- Before / After: de-emphasize "Antes", spotlight "Con Konko" --- */
.kccmp__table { box-shadow: 0 18px 50px rgba(10, 10, 10, 0.06) !important; }
.kccmp__cell--a { color: var(--neutral-400, #A3A3A3) !important; font-weight: 400 !important; }
.kccmp__cell--b {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.16), rgba(201, 168, 76, 0.06)) !important;
  font-size: clamp(17px, 2vw, 22px) !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  box-shadow: inset 3px 0 0 var(--brand-gold) !important;
  letter-spacing: -0.01em !important;
}
.kccmp__row--head .kccmp__cell--b {
  background: var(--brand-gold) !important;
  color: var(--brand-black) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.kccmp__row:not(.kccmp__row--head):hover .kccmp__cell--b {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.26), rgba(201, 168, 76, 0.12)) !important;
}
@media (max-width: 720px) {
  .kccmp__cell--b { box-shadow: inset 0 3px 0 var(--brand-gold) !important; }
}

/* ============================================================
   Iteration 8 — Quote redesigned. Was a heavy wall of bold text
   in a plain white box (cramped author, no air). Now an airy,
   centered editorial pull-quote: large decorative gold mark,
   lighter/roomier text, a short gold rule above a centered author.
   Overrides every earlier .kquote rule (later + !important).
   ============================================================ */
.kquote .kcontainer { max-width: 880px !important; }
.kquote__figure {
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(8px, 2vw, 24px) 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  overflow: visible !important;
  position: relative !important;
}
.ksection--cream .kquote__figure,
.ksection--light .kquote__figure,
.ksection--gray .kquote__figure,
.ksection--dark .kquote__figure { background: transparent !important; border: 0 !important; }
.kquote__figure::after { content: none !important; }
.kquote__figure:hover { transform: none !important; box-shadow: none !important; }

.kquote__mark {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: clamp(86px, 11vw, 150px) !important;
  font-weight: 700 !important;
  line-height: 0.5 !important;
  color: var(--brand-gold) !important;
  opacity: 0.5 !important;
  height: clamp(44px, 6vw, 72px) !important;
  margin: 0 auto 4px !important;
}

.kquote__text {
  background: none !important; border: 0 !important; border-left: 0 !important; padding: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(19px, 2.1vw, 27px) !important;
  font-weight: 500 !important;
  line-height: 1.42 !important;
  letter-spacing: -0.015em !important;
  color: var(--neutral-900) !important;
  margin: 0 auto !important;
  max-width: 760px !important;
  text-wrap: balance !important;
  font-style: normal !important;
  quotes: none !important;
}
.ksection--dark .kquote__text { color: var(--brand-white) !important; }

.kquote__author {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin: clamp(28px, 4vw, 40px) auto 0 !important;
  padding-top: clamp(22px, 3vw, 30px) !important;
  position: relative !important;
}
.kquote__author::before {
  content: "" !important;
  position: absolute !important; top: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 40px !important; height: 2px !important;
  background: var(--brand-gold) !important;
}
.kquote__photo {
  width: 60px !important; height: 60px !important;
  border-radius: 9999px !important; object-fit: cover !important;
  border: 2px solid var(--brand-gold) !important;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.12) !important;
  margin: 0 0 6px !important;
}
.kquote__meta { align-items: center !important; text-align: center !important; }
.kquote__name { font-size: 18px !important; line-height: 1.3 !important; font-weight: 600 !important; }
.kquote__role { font-size: 15px !important; line-height: 1.3 !important; color: var(--neutral-500) !important; }
.kquote__logo { margin: 8px auto 0 !important; max-height: 30px !important; }
@media (max-width: 768px) {
  .kquote__text { font-size: clamp(18px, 4.6vw, 23px) !important; line-height: 1.45 !important; }
  .kquote__author { flex-wrap: nowrap !important; }
  .kquote__logo { flex-basis: auto !important; }
}

/* ============================================================
   Iteration 9 — "El resultado" is the payoff: dark band + gold
   accents so the climax clearly outweighs the other prose sections.
   ============================================================ */
#resultado.kcsbody {
  position: relative !important;
  background: var(--brand-black, #0A0A0A) !important;
  overflow: hidden !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  padding-top: clamp(52px, 7vw, 92px) !important;
  padding-bottom: clamp(52px, 7vw, 92px) !important;
}
#resultado.kcsbody::before {
  content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important; background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-vivid)) !important;
}
#resultado.kcsbody::after {
  content: "" !important; position: absolute !important; top: -28% !important; right: -8% !important;
  width: 46% !important; height: 130% !important; pointer-events: none !important;
  background: radial-gradient(closest-side, rgba(201,168,76,0.18), rgba(201,168,76,0) 72%) !important;
}
#resultado .kcontainer { position: relative !important; z-index: 1 !important; border-color: rgba(255,255,255,0.10) !important; }
#resultado .keyebrow {
  display: inline-block !important;
  background: var(--brand-gold) !important; color: var(--brand-black) !important;
  padding: 6px 15px !important; border-radius: 9999px !important; font-weight: 600 !important;
}
#resultado .kcsbody__head .keyebrow::before { color: var(--brand-black) !important; opacity: 0.65 !important; }
#resultado .kcsbody__title,
#resultado .ksection__title,
#resultado .kcsbody__rich h2,
#resultado .kcsbody__rich h3,
#resultado .kcsbody__rich h4 { color: #fff !important; }
#resultado .kcsbody__rich,
#resultado .kcsbody__rich p,
#resultado .kcsbody__rich li { color: rgba(255, 255, 255, 0.82) !important; }
#resultado .kcsbody__rich strong { color: #fff !important; }
#resultado .kcsbody__rich ul li::marker { color: var(--brand-gold-vivid) !important; }
#resultado .kcsbody__rich a:not(.kbtn) { color: var(--brand-gold-vivid) !important; }
#resultado .kcsbody__rich blockquote {
  color: #fff !important;
  border-left: 3px solid var(--brand-gold) !important;
  padding-left: clamp(18px, 2vw, 26px) !important;
  margin: clamp(28px, 3vw, 40px) 0 0 !important;
}
#resultado .kcsbody__rich blockquote cite { color: rgba(255, 255, 255, 0.6) !important; }

/* gold line sweeps in when #resultado enters (unified .kcs-armed/.kcs-in). */
#resultado.kcs-armed::before { transform: scaleX(0) !important; transform-origin: left center !important; transition: transform 1s cubic-bezier(0.16,1,0.3,1) !important; }
#resultado.kcs-in::before { transform: scaleX(1) !important; }

/* Scroll-linked reading spotlight: --sr (0→1) is set per element by JS from its
   viewport position; blocks stay dim + lifted, then brighten + settle as you
   scroll down. ID specificity + !important takes over the one-shot reveal. */
#resultado .kcs-sr {
  opacity: calc(0.16 + 0.84 * var(--sr, 0)) !important;
  transform: translateY(calc((1 - var(--sr, 0)) * 26px)) !important;
  transition: none !important;
  will-change: opacity, transform;
}

/* ============================================================
   Iteration 11 — Orchestrated on-scroll motion for ALL main
   sections (one consistent language): prose rises in a stagger,
   glance items + compare rows cascade. JS arms .kcs-armed up front
   and adds .kcs-in when each section enters view.
   ============================================================ */

/* Prose sections — eyebrow → title → each block rise in sequence */
.kcsbody.kcs-armed .kreveal { opacity: 1 !important; transform: none !important; }
.kcsbody.kcs-armed .keyebrow,
.kcsbody.kcs-armed .kcsbody__title,
.kcsbody.kcs-armed .kcsbody__rich > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.kcsbody.kcs-in .keyebrow { transition-delay: 0.04s; }
.kcsbody.kcs-in .kcsbody__title { transition-delay: 0.12s; }
.kcsbody.kcs-in .kcsbody__rich > *:nth-child(1) { transition-delay: 0.20s; }
.kcsbody.kcs-in .kcsbody__rich > *:nth-child(2) { transition-delay: 0.27s; }
.kcsbody.kcs-in .kcsbody__rich > *:nth-child(3) { transition-delay: 0.34s; }
.kcsbody.kcs-in .kcsbody__rich > *:nth-child(n+4) { transition-delay: 0.41s; }
.kcsbody.kcs-in .keyebrow,
.kcsbody.kcs-in .kcsbody__title,
.kcsbody.kcs-in .kcsbody__rich > * { opacity: 1 !important; transform: none !important; }

/* Glance — stat items rise + fade in a quick cascade (numbers count up via JS) */
.kcsg.kcs-armed .kreveal { opacity: 1 !important; transform: none !important; }
.kcsg.kcs-armed .kcsg__item {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.kcsg.kcs-in .kcsg__item { opacity: 1 !important; transform: none !important; }
.kcsg.kcs-in .kcsg__item:nth-child(1) { transition-delay: 0.05s; }
.kcsg.kcs-in .kcsg__item:nth-child(2) { transition-delay: 0.13s; }
.kcsg.kcs-in .kcsg__item:nth-child(3) { transition-delay: 0.21s; }
.kcsg.kcs-in .kcsg__item:nth-child(4) { transition-delay: 0.29s; }

/* Compare — rows cascade in, reinforcing the before→after reveal */
.kccmp.kcs-armed .kreveal { opacity: 1 !important; transform: none !important; }
.kccmp.kcs-armed .kccmp__row {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.kccmp.kcs-in .kccmp__row { opacity: 1 !important; transform: none !important; }
.kccmp.kcs-in .kccmp__row:nth-child(1) { transition-delay: 0.04s; }
.kccmp.kcs-in .kccmp__row:nth-child(2) { transition-delay: 0.11s; }
.kccmp.kcs-in .kccmp__row:nth-child(3) { transition-delay: 0.18s; }
.kccmp.kcs-in .kccmp__row:nth-child(4) { transition-delay: 0.25s; }
.kccmp.kcs-in .kccmp__row:nth-child(5) { transition-delay: 0.32s; }
.kccmp.kcs-in .kccmp__row:nth-child(n+6) { transition-delay: 0.39s; }

@media (prefers-reduced-motion: reduce) {
  .kcsbody.kcs-armed .keyebrow, .kcsbody.kcs-armed .kcsbody__title, .kcsbody.kcs-armed .kcsbody__rich > *,
  .kcsg.kcs-armed .kcsg__item, .kccmp.kcs-armed .kccmp__row {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  #resultado.kcs-armed::before { transform: scaleX(1) !important; transition: none !important; }
}

/* ============================================================
   Iteration 12 — Hero top air. <main> already offsets the fixed
   nav (starts ~100px down), so the dnd-section's 96px + the hero's
   ~115px top padding were pure excess (211px below the nav). Trim
   both so the breadcrumb sits ~48px under the nav.
   ============================================================ */
.dnd-section.row-number-1 { padding-top: 0 !important; padding-bottom: 0 !important; }
.ksection.kcs-hero { padding-top: clamp(18px, 2.6vw, 38px) !important; padding-bottom: clamp(28px, 3.4vw, 48px) !important; }
/* Reading bands: trim the generous 115px band padding to a tighter vertical rhythm.
   Long-form narrative still scrolls (correct for long-form), but short intro/about
   bands no longer float in ~230px of whitespace. #resultado keeps its own (climax). */
.ksection.kcsbody { padding-top: clamp(44px, 5.5vw, 72px) !important; padding-bottom: clamp(44px, 5.5vw, 72px) !important; }
/* Hero media: 16:9 on desktop (shorter than 16:10) so the hero clears a 900px laptop screen. */
@media (min-width: 940px) { .kcs-hero__grid .kcs-hero__media img, .kcs-hero__grid .kcs-hero__media .kcs-hero__ph { aspect-ratio: 16 / 9 !important; } }

/* ============================================================
   Iteration 13 — Continuous frame lines (match blog listing /
   blog template): one set of side rails running to the very top
   under the nav + a top rule below the navbar. Replaces the
   per-section .kcontainer borders, which jogged between full
   (±640) and narrow (±440) containers. (JS injects .kcs-frame.)
   ============================================================ */
main { position: relative; background: var(--brand-white, #fff); --kcs-navh: 100px; }
@media (max-width: 1023px) { main { --kcs-navh: 88px; } }
@media (min-width: 768px) {
  /* Constrain the whole content column to the frame width so the colored bands
     never bleed past the rails (they previously stuck out ~8px). One framed
     column on white, exactly like the blog listing/detail templates. */
  main .dnd-section.row-number-1 { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
  main .ksection, main .krev, main .kcta-band { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }
  /* Drop the per-section side borders (they jogged between full/narrow). */
  main .kcontainer { border-left: 0 !important; border-right: 0 !important; }
  .krev__wrap { border-left: 0 !important; border-right: 0 !important; }
  /* Continuous rails: run to the VERY top behind the nav + a top rule under it. */
  .kcs-frame { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
  /* Overlay side-rails removed: a single line of one color vanished over the cream
     and gold bands (looked like the box cut out). Replaced by per-section side
     borders below, colored per theme so they read on white, cream, gold AND dark. */
  .kcs-frame__v { display: none !important; }
  .kcs-frame__top {
    position: absolute; top: 0;
    left: 0; right: 0;
    height: 1px; background: var(--brand-border);
  }
  /* Continuous box: every framed section carries the side rails. All sections are a
     uniform 1280px column (above), so the borders line up into one unbroken frame. */
  main .ksection, main .krev, main .kcta-talk, main .kcta-band {
    border-left: 1px solid var(--brand-border) !important;
    border-right: 1px solid var(--brand-border) !important;
  }
  /* Dark bands: a light rail instead, so the line stays visible on black/charcoal. */
  main .ksection--dark, main #resultado.kcsbody, main .kcta-band--dark {
    border-left-color: rgba(255, 255, 255, 0.16) !important;
    border-right-color: rgba(255, 255, 255, 0.16) !important;
  }
}
@media (max-width: 767px) {
  .kcs-frame { display: none !important; }
  /* Mobile: content was too squished — drop the dnd-section gutter + trim
     container padding so content uses the full width. */
  main .dnd-section.row-number-1 { padding-left: 0 !important; padding-right: 0 !important; }
  main .kcontainer, main .kcontainer--narrow { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ============================================================
   Iteration 10 — type scale was oversized; bring headings down
   toward the website scale (hero ≤56, section titles ≤38).
   ============================================================ */
.kcs-hero__title { font-size: clamp(28px, 3.4vw, 42px) !important; letter-spacing: -0.03em !important; }
.kcsbody__title { font-size: clamp(24px, 2.6vw, 34px) !important; letter-spacing: -0.02em !important; }
/* Unify ALL content-section H2s to one size (benefits/video/quote/compare used
   the large unstyled global size — 48–56px — vs. 34 elsewhere). */
main .ksection__title, .krev__title { font-size: clamp(25px, 2.6vw, 34px) !important; letter-spacing: -0.02em !important; }
@media (min-width: 940px) { .kcs-hero__title { font-size: clamp(32px, 3vw, 43px) !important; } }

/* ============================================================
   Iteration 14 — Client-logo marquee (from konko-clients), injected
   by JS right below the hero. Styles copied so the strip renders on
   the case pages (the module itself isn't used on these pages).
   ============================================================ */
.kclients__row { position: relative !important; margin-top: 24px !important; }
.kclients__toggle {
  position: absolute !important;
  right: clamp(16px, 5vw, 40px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  appearance: none !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: none !important; /* play/pause hidden on mobile + desktop (marquee autoplays) */
  place-items: center !important;
  color: #9b9b9b !important;
  transition: color 0.3s ease !important;
}
.kclients__toggle:hover { color: var(--brand-black) !important; }
.kclients__ico { width: 22px !important; height: 22px !important; grid-area: 1 / 1 !important; }
.kclients__ico--play { display: none !important; }
.kclients.is-paused .kclients__ico--pause { display: none !important; }
.kclients.is-paused .kclients__ico--play { display: block !important; }
.kclients__viewport {
  position: relative !important;
  overflow: hidden !important;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 86%, transparent) !important;
  mask: linear-gradient(90deg, transparent, #000 6%, #000 86%, transparent) !important;
}
.kclients__track {
  display: flex !important;
  align-items: center !important;
  gap: clamp(48px, 6vw, 90px) !important;
  width: max-content !important;
  animation: kclients-scroll 38s linear infinite !important;
  will-change: transform !important;
}
.kclients--slow .kclients__track { animation-duration: 56s !important; }
.kclients--fast .kclients__track { animation-duration: 24s !important; }
.kclients.is-paused .kclients__track { animation-play-state: paused !important; }
@keyframes kclients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.kclients__logo {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: #9b9b9b !important;
  transition: color 0.3s ease !important;
}
.kclients__logo:hover { color: var(--brand-black) !important; }
.kclients__mark { width: 26px !important; height: 26px !important; display: inline-flex !important; flex: none !important; }
.kclients__mark svg { width: 100% !important; height: 100% !important; display: block !important; }
.kclients__word {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
@media (prefers-reduced-motion: reduce) {
  .kclients__track { animation-play-state: paused !important; }
}

/* ============================================================
   Iteration 15 — Hero stat-bar. The at-a-glance numbers move into
   the hero (JS) so they're in the first view (Ramp-style); the
   separate glance band is hidden to avoid duplication.
   ============================================================ */
.kcsg--moved { display: none !important; }
.kcs-hero__stats {
  margin-top: clamp(18px, 2.4vw, 32px) !important;
  padding-top: clamp(18px, 2.2vw, 28px) !important;
  border-top: 1px solid var(--brand-border) !important;
}
.kcs-hero__stats .kcsg__value { font-size: clamp(27px, 3vw, 40px) !important; }
.kcs-hero__stats .kcsg__cap { font-size: clamp(13px, 1.4vw, 15px) !important; max-width: 220px !important; }

/* ============================================================
   Iteration 16 — Final CTA = home "¡Habla con Kora!" gold banner
   (mirrors TalkToKoraSection). Injected by JS; the default
   konko-cta band is hidden.
   ============================================================ */
.kcta-band--replaced { display: none !important; }
.kcta-talk {
  background-image: url('https://51112927.fs1.hubspotusercontent-na1.net/hubfs/51112927/Website/case-studies/banner/konko-gold-bg.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--brand-border) !important;
}
.kcta-talk__inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 380px !important;
  max-width: 620px !important;
  padding: clamp(48px, 7vw, 72px) 0 !important;
}
@media (min-width: 1024px) { .kcta-talk__inner { min-height: 400px !important; } }
.kcta-talk__title {
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--brand-black) !important;
  margin: 0 !important;
}
.kcta-talk__sub {
  margin: 16px 0 0 !important;
  max-width: 560px !important;
  font-size: clamp(17px, 1.6vw, 22px) !important;
  line-height: 1.5 !important;
  color: var(--neutral-700, #404040) !important;
}
/* Glow wrapper carries the size, margin + hover lift (border = the glow). */
.kcta-talk__glow {
  margin-top: 32px !important;
  align-self: flex-start !important;
  width: auto !important;
  min-width: 240px !important;
  max-width: 100% !important;
}
.kcta-talk__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  height: 60px !important;
  width: 100% !important;
  background: var(--brand-black) !important;
  color: var(--brand-white) !important;
  border-radius: 9999px !important;
  padding: 4px 4px 4px 28px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
@media (max-width: 600px) { .kcta-talk__glow { width: 100% !important; display: flex !important; } }
.kcta-talk__btn-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--brand-white) !important;
  white-space: nowrap !important;
}
.kcta-talk__wa { width: 22px !important; height: 22px !important; color: var(--brand-white) !important; flex: none !important; }
.kcta-talk__btn-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 9999px !important;
  background: var(--brand-white) !important;
  color: var(--brand-black) !important;
  flex: none !important;
  transition: transform 0.4s ease !important;
}
.kcta-talk__btn:hover .kcta-talk__btn-arrow { transform: translateX(3px) !important; }
.kcta-talk__btn-arrow svg { width: 22px !important; height: 22px !important; }
@media (max-width: 600px) { .kcta-talk__btn { width: 100% !important; } }

/* Banner glow reads gold-on-gold (camouflaged vs. the white nav). Boost the
   hover bloom + add a faint dark rim so it clearly pops on the gold banner. */
.kcta-talk__glow:hover {
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.16),
    0 0 38px rgba(255, 214, 92, 0.85),
    0 10px 26px rgba(150, 110, 40, 0.45) !important;
}

/* ============================================================
   Iteration 17 — Closing "Agenda tu demo" as a STATIC band before
   the footer (was a fixed bottom bar that squeezed reading space,
   on top of the nav + chapter bar). Dark band after the gold banner.
   ============================================================ */
.kcs-closer { background: var(--brand-black) !important; }
.kcs-closer__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(20px, 3vw, 40px) !important;
  padding: clamp(28px, 4vw, 44px) 0 !important;
}
.kcs-closer__txt {
  font-family: var(--font-display) !important;
  font-size: clamp(19px, 2.2vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: var(--brand-white) !important;
}
.kcs-closer__btn {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: var(--brand-gold) !important;
  color: var(--brand-black) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 13px 24px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.25s ease, transform 0.25s ease !important;
}
.kcs-closer__btn:hover { background: var(--brand-gold-vivid) !important; transform: scale(1.03) !important; }
.kcs-closer__btn svg { transition: transform 0.3s ease !important; }
.kcs-closer__btn:hover svg { transform: translateX(3px) !important; }
@media (max-width: 680px) {
  .kcs-closer__inner { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
}

/* Iteration 18 — "Más historias reales" re-enabled, fed with the real cards;
   each case excludes itself (handled per template). */

/* ============================================================
   Iteration 19 — Video section (YouTube, click-to-play). Poster +
   custom play button; on click loads the embed with minimal chrome.
   ============================================================ */
/* Fit the whole video section in one desktop screen: tighter padding/title and
   a viewport-height-capped 16:9 player (centered under the centered head). */
/* One screen, one story: H1 + video read as a single above-the-fold unit. Tight
   hero bottom + video top padding (video sits right under the H1) + a
   viewport-height-capped player. */
.ksection.kcs-hero { padding-top: clamp(20px, 3vw, 36px) !important; padding-bottom: clamp(8px, 1.4vw, 16px) !important; }
.ksection.kcs-video { padding-top: clamp(6px, 1vw, 12px) !important; padding-bottom: clamp(20px, 3vw, 32px) !important; }
/* Subtitle band moved directly below the video. */
.ksection.kcs-after-video { padding-top: clamp(20px, 3vw, 32px) !important; padding-bottom: clamp(24px, 4vw, 40px) !important; }
.kcs-after-video .kcs-hero__lead { margin-top: 0 !important; max-width: 920px !important; }
.kcs-video__title { margin-bottom: clamp(12px, 1.8vw, 20px) !important; }
.kcs-video .ksection__head { margin-bottom: clamp(12px, 1.6vw, 20px) !important; }

/* Full-screen video lightbox — click the poster → immersive playback over a dark
   backdrop with a prominent close button (Esc / backdrop click also close). */
.kcs-lightbox {
  position: fixed !important; inset: 0 !important; z-index: 9999 !important;
  display: grid !important; place-items: center !important;
  padding: clamp(16px, 4vw, 64px) !important;
  background: rgba(6, 6, 6, 0.94) !important;
  -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important;
  opacity: 0 !important; transition: opacity 0.28s ease !important;
}
.kcs-lightbox.is-open { opacity: 1 !important; }
.kcs-lightbox__inner {
  position: relative !important;
  width: min(94vw, calc(86vh * 16 / 9)) !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 16px !important; overflow: hidden !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6) !important;
  transform: scale(0.96) !important; transition: transform 0.28s cubic-bezier(0.16,1,0.3,1) !important;
}
.kcs-lightbox.is-open .kcs-lightbox__inner { transform: scale(1) !important; }
.kcs-lightbox__iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; }
.kcs-lightbox__close {
  position: absolute !important;
  top: clamp(14px, 3vw, 30px) !important; right: clamp(14px, 3vw, 30px) !important;
  width: 40px !important; height: 40px !important; border-radius: 9999px !important;
  border: 0 !important; cursor: pointer !important; z-index: 2 !important;
  background: var(--brand-white) !important; color: var(--brand-black) !important;
  display: grid !important; place-items: center !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}
.kcs-lightbox__close:hover { transform: scale(1.08) !important; background: var(--brand-gold-vivid) !important; }
.kcs-lightbox__close svg { width: 20px !important; height: 20px !important; }
@media (prefers-reduced-motion: reduce) {
  .kcs-lightbox, .kcs-lightbox__inner { transition: none !important; }
}
.kcs-video__frame {
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  /* Full width, but capped by height so the whole H1 + video fits one screen. */
  max-width: min(100%, calc(52vh * 16 / 9)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: #000 !important;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.16) !important;
}
.kcs-video__poster, .kcs-video__iframe {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  border: 0 !important; display: block !important;
}
.kcs-video__poster { object-fit: cover !important; transition: transform 0.5s ease !important; }
.kcs-video__frame:hover .kcs-video__poster { transform: scale(1.03) !important; }
.kcs-video__veil {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(180deg, rgba(10,10,10,0.10), rgba(10,10,10,0.30)) !important;
  transition: background 0.3s ease !important;
}
.kcs-video__frame:hover .kcs-video__veil { background: linear-gradient(180deg, rgba(10,10,10,0.18), rgba(10,10,10,0.38)) !important; }
.kcs-video__play {
  position: absolute !important; left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 84px !important; height: 84px !important; border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.96) !important; color: var(--brand-black) !important;
  display: grid !important; place-items: center !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease !important;
}
.kcs-video__frame:hover .kcs-video__play { transform: translate(-50%, -50%) scale(1.08) !important; background: #fff !important; }
.kcs-video__play svg { width: 34px !important; height: 34px !important; margin-left: 4px !important; }
@media (prefers-reduced-motion: reduce) { .kcs-video__poster, .kcs-video__play { transition: none !important; } }

/* Casos SIN video — foto del hero a todo el ancho, mismo lugar/medida que el video.
   El JS (buildHeroMedia) inyecta .kcs-heromedia y marca el hero con --nomedia. */
/* Imagen del hero: padding lateral simétrico (igual left/right), alineada al contenido. */
.ksection.kcs-heromedia { padding-left: 0 !important; padding-right: 0 !important; }
.kcs-heromedia > .kcontainer { padding-left: clamp(24px, 5vw, 32px) !important; padding-right: clamp(24px, 5vw, 32px) !important; margin-left: auto !important; margin-right: auto !important; max-width: 1280px !important; }
/* Padding vertical simétrico (la banda kcs-video base era top chico / bottom grande). */
.ksection.kcs-heromedia { padding-top: clamp(20px, 3vw, 32px) !important; padding-bottom: clamp(20px, 3vw, 32px) !important; }
.kcs-heromedia__frame {
  position: relative !important;
  aspect-ratio: 16 / 7 !important; /* más bajo que 16/9 — coincide con la foto 1280×560 */
  width: 100% !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.16) !important;
}
.kcs-heromedia__img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}
/* Hero colapsado a 1 columna + oculta la foto 2-col (ya va full-width abajo). */
.kcs-hero--nomedia .kcs-hero__grid { grid-template-columns: 1fr !important; }
.kcs-hero--nomedia .kcs-hero__media { display: none !important; }

/* Foto de Mike (CMSJ) en las cards de "Más historias reales": recentrar el recorte. */
.krev__img[src*="konko-cmsj"] { object-position: 49% center !important; }

/* Client marquee: real logo images (were missing — strip showed blank).
   Gray by default → solid black on hover, like the website LogosCarousel. */
.kclients__logo img {
  height: 80px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
  filter: grayscale(1) opacity(0.55) !important;
  transition: filter 0.3s ease, opacity 0.3s ease !important;
}
.kclients__logo:hover img { filter: brightness(0) !important; opacity: 1 !important; }
@media (max-width: 768px) {
  .kclients__logo img { height: 52px !important; max-width: 150px !important; }
  /* Smaller logos = narrower track, so -50% over 38s crawls. Shorten to keep px/sec. */
  .kclients__track { animation-duration: 24s !important; }
  .kclients--slow .kclients__track { animation-duration: 35s !important; }
  .kclients--fast .kclients__track { animation-duration: 15s !important; }
}
@media (prefers-reduced-motion: reduce) { .kclients__logo img { transition: none !important; } }

/* Client strip: a touch more compact + pause the marquee on hover (besides black). */
.kclients { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.kclients__viewport:hover .kclients__track { animation-play-state: paused !important; }

/* Client strip: centered eyebrow/title. */
.kclients .keyebrow { display: block !important; text-align: center !important; }

/* ── Notification bar — arranca full-width; on scroll se encoge y se fusiona
   al nav pill (patrón chapter bar, en negro) ── */
.kcs-notifbar {
  position: fixed;
  top: 100px;                 /* JS la ancla al borde inferior real de la pill */
  left: 0; right: 0;
  padding: 0;                 /* full-bleed en el top de la página */
  background: transparent;
  z-index: 59;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.kcs-notifbar.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* on scroll: entra el gutter del nav → la barra se alinea con la pill */
.kcs-notifbar.is-fused { padding: 0 40px; }
.kcs-notifbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 4000px;          /* full-width de arranque */
  margin: 0 auto;
  padding: 0 20px;
  border-radius: 0;           /* recta cuando es full-bleed */
  background: #0A0A0A;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.4s ease;
}
/* fusionada: mismo ancho de la pill + esquinas inferiores redondeadas */
.kcs-notifbar.is-fused .kcs-notifbar__inner {
  max-width: 1240px;
  border-radius: 0 0 20px 20px;
}
/* la pill cuadra su base cuando la notif bar está visible (clase propia,
   misma receta que .kcs-merge del chapter bar) */
.knav__inner.kcs-merge2 {
  border-radius: 20px 20px 0 0 !important;
  border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important;
  box-shadow: none !important;
}
.kcs-notifbar__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #fff;
  padding: 12px 40px 12px 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none !important;
  text-align: center;
}
.kcs-notifbar__link:hover { text-decoration: none !important; }
.kcs-notifbar__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFD255;
  color: #191613;
  flex-shrink: 0;
}
.kcs-notifbar__play svg { width: 12px; height: 12px; margin-left: 1px; }
.kcs-notifbar__text { color: #fff; }
.kcs-notifbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFD255;
  font-weight: 600;
  white-space: nowrap;
}
.kcs-notifbar__cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.kcs-notifbar__link:hover .kcs-notifbar__cta svg { transform: translateX(4px); }
.kcs-notifbar__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kcs-notifbar__close:hover { background: rgba(255,255,255,0.25); }

@media (max-width: 767px) {
  .kcs-notifbar.is-fused { padding: 0 16px; }
  .kcs-notifbar__play { display: none; }
  .kcs-notifbar.is-fused .kcs-notifbar__inner { border-radius: 0 0 14px 14px; }
  .kcs-notifbar__link { font-size: 13px; padding: 10px 36px 10px 4px; gap: 8px; }
}