/* Marketing UI kit styles */
/* =========================================================================
   Veren Technologies — Foundations
   Colors, type, spacing, motion. Import this file once at the root of any
   Veren artifact. Do not redefine these tokens locally.
   ========================================================================= */

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* -----------------------------------------------------------------------
     COLOR — base palette
     The brand operates on dark ground. Cream is the voice. Gold is surgical.
     ----------------------------------------------------------------------- */

  /* Backgrounds — layered, never flat (compose with bokeh + grain) */
  --bg-obsidian:       #0A0E14;   /* deepest layer, near-black charcoal-navy */
  --bg-charcoal:       #11161E;   /* primary surface */
  --bg-graphite:       #1A2029;   /* raised surface, cards */
  --bg-slate:          #232A35;   /* secondary surface, dividers */
  --bg-fog:            #2D3441;   /* hover surface on dark */

  /* Cream — the voice. Dominant non-background color. */
  --cream:             #F4EDE0;   /* primary cream, body and headlines on dark */
  --cream-soft:        #E8DFCE;   /* secondary cream, supporting copy */
  --cream-mute:        #BBB1A0;   /* muted cream, captions, metadata */
  --cream-low:         #7A7468;   /* low-contrast cream, dividers, inactive */

  /* Gold — surgical accent. ≤5% of pixels per viewport. Never a fill. */
  --gold-deep:         #B8924A;   /* deep gold, used for outlines, ticks */
  --gold-warm:         #D4A574;   /* warm gold, used for emphasis */
  --gold-honey:        #E8B968;   /* honey, only inside warm bloom (10% / 200px blur) */

  /* Hover & state — never gold, never cream */
  --amber:             #C9924E;   /* hover state — distinct from gold-warm */
  --sage:              #8FA88B;   /* active / live indicator */
  --sage-deep:         #5F7A5C;   /* sage, deeper variant */
  --sienna:            #B86A4D;   /* loss, critical, destructive — graphics only */
  --sienna-text:       #C87E60;   /* sienna for TEXT: #B86A4D is 4.50:1 on --bg-1
                                     and 3.93:1 over the warm bloom, below AA for
                                     body sizes. This lightened variant clears it. */
  --sienna-deep:       #8B4A33;

  /* Foreground — semantic */
  --fg-1:              var(--cream);          /* primary text */
  --fg-2:              var(--cream-soft);     /* secondary text */
  --fg-3:              var(--cream-mute);     /* tertiary, captions */
  --fg-4:              var(--cream-low);      /* quaternary, disabled, dividers */
  --fg-accent:         var(--gold-warm);      /* accent text (rare) */

  /* Background — semantic */
  --bg-1:              var(--bg-charcoal);    /* page */
  --bg-2:              var(--bg-graphite);    /* card */
  --bg-3:              var(--bg-slate);       /* nested card / hover */
  --bg-4:              var(--bg-fog);         /* secondary hover */

  /* Border — semantic */
  --border-1:          rgba(244, 237, 224, 0.08);   /* hairline */
  --border-2:          rgba(244, 237, 224, 0.14);   /* default */
  --border-3:          rgba(244, 237, 224, 0.22);   /* emphasized */
  --border-gold:       rgba(184, 146, 74, 0.45);    /* accent border */

  /* -----------------------------------------------------------------------
     TYPE — families
     ----------------------------------------------------------------------- */

  /* SUBSTITUTION FLAG: Brief specifies Tiempos / GT Sectra (commercial).
     Falling back to Fraunces (Google Fonts) until license files are provided. */
  --font-display:      "Fraunces", "GT Sectra", "Tiempos Headline", "Cormorant Garamond", Georgia, serif;
  --font-serif-text:   "Fraunces", "Tiempos Text", "Source Serif Pro", Georgia, serif;
  --font-sans:         "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono:         "JetBrains Mono", "Berkeley Mono", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* -----------------------------------------------------------------------
     TYPE — scale (rem-based, 1rem = 16px)
     Display is ALWAYS serif. Mono is ALWAYS for proprietary terms + numbers.
     ----------------------------------------------------------------------- */

  --text-xs:           0.75rem;   /* 12 — labels, micro */
  --text-sm:           0.8125rem; /* 13 — captions */
  --text-base:         0.9375rem; /* 15 — body */
  --text-md:           1.0625rem; /* 17 — lead body */
  --text-lg:           1.25rem;   /* 20 — sub-headline */
  --text-xl:           1.5rem;    /* 24 — H4 */
  --text-2xl:          2rem;      /* 32 — H3 */
  --text-3xl:          2.75rem;   /* 44 — H2 */
  --text-4xl:          3.75rem;   /* 60 — H1 */
  --text-5xl:          5.5rem;    /* 88 — display */

  /* Weights — display tops out at 500 (per brief). */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semi:       600;

  --tracking-tight:    -0.02em;   /* display headlines */
  --tracking-snug:     -0.01em;   /* body headlines */
  --tracking-normal:   0;
  --tracking-wide:     0.04em;    /* eyebrow, label */
  --tracking-mono:     0.01em;    /* monospace terms */

  --leading-tight:     1.05;      /* display */
  --leading-snug:      1.2;       /* H2/H3 */
  --leading-normal:    1.5;       /* body */
  --leading-loose:     1.7;       /* long-form */

  /* -----------------------------------------------------------------------
     SPACING — 4px base, tight at small sizes, wide at large
     ----------------------------------------------------------------------- */

  --space-0:           0;
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;
  --space-6:           24px;
  --space-8:           32px;
  --space-10:          40px;
  --space-12:          48px;
  --space-16:          64px;
  --space-20:          80px;
  --space-24:          96px;
  --space-32:          128px;

  /* -----------------------------------------------------------------------
     RADIUS
     Small and restrained. No pill buttons unless data requires it.
     ----------------------------------------------------------------------- */

  --radius-none:       0;
  --radius-xs:         2px;
  --radius-sm:         4px;
  --radius-md:         6px;
  --radius-lg:         10px;
  --radius-xl:         16px;
  --radius-pill:       999px;

  /* -----------------------------------------------------------------------
     SHADOW — atmospheric, never sharp drop shadows
     ----------------------------------------------------------------------- */

  --shadow-1:          0 1px 0 rgba(244, 237, 224, 0.04) inset,
                        0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2:          0 1px 0 rgba(244, 237, 224, 0.05) inset,
                        0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-3:          0 1px 0 rgba(244, 237, 224, 0.06) inset,
                        0 24px 48px -16px rgba(0, 0, 0, 0.6);
  --shadow-bloom:      0 0 120px 40px rgba(232, 185, 104, 0.10);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */

  --ease-out:          cubic-bezier(0.2, 0.7, 0.2, 1);   /* @kind other */
  --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --ease-editorial:    cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --duration-instant:  0ms;                              /* @kind other */
  --duration-fast:     200ms;                            /* @kind other */
  --duration-base:     400ms;                            /* @kind other */
  --duration-slow:     600ms;                            /* @kind other */
  --duration-deliberate: 1200ms;                         /* @kind other */

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */

  --container-narrow:  720px;
  --container-text:    920px;
  --container-wide:    1200px;
  --container-full:    1440px;
}

/* =========================================================================
   Element semantics
   ========================================================================= */

html {
  font-size: 16px;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* iOS Safari inflates text in some layouts when this is left at `auto`. */
  -webkit-text-size-adjust: 100%;
  /* Suppress the default translucent tap flash on iOS (inherited). */
  -webkit-tap-highlight-color: transparent;
  /* Clears the sticky nav for fragment navigation that does not go through
     the JS scroller (keyboard, reload with a hash, no-JS). */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}

/* Display headings — ALWAYS serif, weight 500, tight leading */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
h3 { font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }

/* H4–H6 — sans, used for UI section labels */
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Eyebrow — tiny mono label that anchors a section */
.eyebrow,
[data-eyebrow] {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-warm);
}

/* Mono — used for proprietary terms and numbers */
code, kbd, samp, pre, .mono, [data-mono] {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-feature-settings: "tnum", "zero";
  letter-spacing: var(--tracking-mono);
}

.num, [data-num] {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-feature-settings: "tnum", "zero";
}

/* Lead — opening paragraph */
.lead {
  font-family: var(--font-serif-text);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--fg-2);
}

/* Hairline — used as a section divider */
hr, .hairline {
  border: 0;
  height: 1px;
  background: var(--border-2);
  margin: var(--space-12) 0;
}

a {
  color: var(--fg-1);
  text-decoration-line: underline;
  text-decoration-color: var(--border-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-base) var(--ease-out),
              text-decoration-color var(--duration-base) var(--ease-out);
}
a:hover {
  color: var(--amber);
  text-decoration-color: var(--amber);
}

::selection {
  background: rgba(212, 165, 116, 0.25);
  color: var(--cream);
}

/* Keyboard focus indicator. :focus-visible so pointer users never see it. */
:focus-visible {
  outline: 2px solid var(--gold-warm);
  outline-offset: 3px;
}

/* Skip link — first focusable element, off-screen until focused. */
.vk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 12px 20px;
  background: var(--cream);
  color: var(--bg-obsidian);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.vk-skip:focus {
  left: 0;
}

/* =========================================================================
   Atmospheric primitives — apply to any full-bleed surface
   ========================================================================= */

/* Layered bokeh background — apply to body or full-bleed sections */
.veren-ground {
  position: relative;
  background-color: var(--bg-1);
  background-image:
    radial-gradient(900px 700px at 18% 12%, rgba(184, 146, 74, 0.10) 0%, rgba(184, 146, 74, 0) 70%),
    radial-gradient(700px 600px at 82% 80%, rgba(20, 30, 50, 0.55) 0%, rgba(20, 30, 50, 0) 70%),
    radial-gradient(1200px 900px at 50% 100%, rgba(10, 14, 20, 0.6) 0%, rgba(10, 14, 20, 0) 60%),
    linear-gradient(180deg, var(--bg-obsidian) 0%, var(--bg-charcoal) 50%, var(--bg-obsidian) 100%);
  background-attachment: fixed;
}

/* Edge vignette — overlays on top of ground */
.veren-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 80% at 50% 50%,
              transparent 40%,
              rgba(0, 0, 0, 0.35) 100%);
  z-index: 0;
}

/* 3% film grain overlay — uses /assets/grain.png */
.veren-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../assets/img/grain.png");
  background-size: 200px 200px;
  opacity: 0.03;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Warm bloom — drop behind logo / primary headline / primary CTA / key money figure */
.veren-bloom {
  position: relative;
  isolation: isolate;
}
.veren-bloom::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  background: radial-gradient(ellipse 60% 80% at 50% 50%,
              rgba(232, 185, 104, 0.10) 0%,
              rgba(232, 185, 104, 0) 70%);
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}

/* =========================================================================
   Scroll reveals
   Driven by js/reveal.js: [data-reveal] is the observed group, .vk-reveal the
   animated unit. transitionDelay is set inline for the 80ms stagger. Only
   opacity and transform animate, so these stay off the layout path.
   ========================================================================= */
/* The hidden state is scoped to .vk-js-reveal, which reveal.js puts on <html>
   the moment it evaluates. If that file never loads, nothing is ever hidden and
   the page renders complete instead of stranding 86% of the copy at opacity 0. */
.vk-js-reveal .vk-reveal {
  opacity: 0;
  transform: translateY(20px);
}
.vk-reveal {
  transition:
    opacity var(--duration-slow) var(--ease-editorial),
    transform var(--duration-slow) var(--ease-editorial);
}
.vk-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Sparkline draw-on. stroke-dashoffset is primed in JS from getTotalLength();
   the bar-chart variant has no stroke, so its lit bars fade in instead. */
.vk-spark__draw {
  transition: stroke-dashoffset 800ms var(--ease-editorial);
}
.vk-js-reveal .vk-spark__lit {
  opacity: 0;
}
.vk-spark__lit {
  transition: opacity 800ms var(--ease-editorial);
}
.vk-spark__lit.is-drawn {
  opacity: 1;
}

/* =========================================================================
   Motion preferences
   ========================================================================= */

/* Reveals must resolve to their final state, not merely transition instantly:
   the observer is skipped entirely under reduced motion, so without this the
   below-fold content would stay at opacity 0 forever. Placed before the
   blanket rule below and after .vk-reveal so it wins on source order. */
@media (prefers-reduced-motion: reduce) {
  .vk-js-reveal .vk-reveal,
  .vk-js-reveal .vk-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .vk-js-reveal .vk-spark__lit { opacity: 1; transition: none; }
  .vk-spark__draw { transition: none; }
}

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

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  min-height: 100dvh;
  /* Stop the rubber-band overscroll from exposing the canvas past both ends. */
  overscroll-behavior-y: none;
}

/* Los ::before de .veren-bloom (inset -60px en horizontal) y el de
   .vk-paincost__figure salen de la pantalla en movil: a 390px el documento
   medía 425. El overflow-x:hidden de body (≤768px) no basta en un movil real:
   el viewport se ensancha hasta el contenido y la pagina se arrastra de lado.
   `clip` y no `hidden`: recorta sin crear un contenedor de scroll y deja el eje
   Y visible (con `hidden` el eje Y pasaria a `auto`). CLAUDE.md §3. */
main { overflow-x: clip; }

/* Atmospheric ground.
   This was `background-attachment: fixed` on body, which mobile WebKit does
   not support — it falls back to `scroll`, positioning the gradients against
   the ~10,000px body box instead of the viewport, so the whole effect was
   absent on iPhone. Painting the identical layer stack on a position:fixed
   pseudo-element behind the content is supported everywhere and renders the
   same as `fixed` did on desktop. Same technique as body::after below.
   Body carries no background of its own now: a negative z-index pseudo-element
   paints beneath in-flow block backgrounds, so an opaque body background would
   hide it. The page base colour lives on html. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg-charcoal);
  background-image:
    radial-gradient(900px 700px at 18% 12%, rgba(184, 146, 74, 0.10) 0%, rgba(184, 146, 74, 0) 70%),
    radial-gradient(700px 600px at 82% 80%, rgba(20, 30, 50, 0.55) 0%, rgba(20, 30, 50, 0) 70%),
    radial-gradient(1200px 900px at 50% 100%, rgba(10, 14, 20, 0.6) 0%, rgba(10, 14, 20, 0) 60%),
    linear-gradient(180deg, var(--bg-obsidian) 0%, var(--bg-charcoal) 50%, var(--bg-obsidian) 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background-image: url("../assets/img/grain.png");
  background-size: 200px 200px;
  opacity: 0.03; mix-blend-mode: overlay; z-index: 100;
}

.vk-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-warm);
  margin-bottom: 24px;
}

em {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--cream);
}

/* ---- Buttons ---- */
.vk-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 6px; border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.vk-btn--primary {
  background: var(--cream);
  color: var(--bg-obsidian);
  position: relative; isolation: isolate;
}
.vk-btn--primary:hover { background: var(--cream-soft); color: var(--bg-obsidian); }
.vk-btn .mono { font-family: var(--font-mono); font-size: 13px; }

/* ---- Nav ---- */
.vk-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 48px;
  padding: 18px max(64px, env(safe-area-inset-right)) 18px max(64px, env(safe-area-inset-left));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(10, 10, 15, 0.92);
  border-bottom: 1px solid rgba(244, 237, 224, 0.06);
}
.vk-nav__brand { display: inline-flex; align-items: center; padding: 4px 10px; }
.vk-nav__brand img,
.vk-nav__logo { display: block; height: 56px; width: auto; }
.vk-nav__brand.veren-bloom::before {
  /* shrink default veren-bloom radius proportionally — keep balanced */
  inset: -10px -18px !important;
}
.vk-btn--compact { padding: 10px 18px; font-size: 13px; }
.vk-nav__cta { flex-shrink: 0; }
/* Etiqueta larga/corta del CTA en el MISMO <a>. display:none en ambos sentidos
   para que solo una llegue al arbol de accesibilidad. CLAUDE.md §3. */
.vk-nav__cta-short { display: none; }
/* UNICO elemento del nav con flex-grow: hace de separador. Ver ≤980px. */
.vk-nav__links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 28px; flex: 1;
}
.vk-nav__links a {
  font-family: var(--font-sans);
  font-size: 13px; color: var(--fg-2);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--duration-base) var(--ease-standard);
}
.vk-nav__links a:hover { color: var(--amber); }

/* ---- Hero ---- */
.vk-hero {
  position: relative;
  padding: 96px 64px 128px;
  max-width: 1440px;
  margin: 0 auto;
  overflow-x: hidden;
}
.vk-hero__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.vk-hero__inner .vk-hero__headline { margin-left: auto; margin-right: auto; }
.vk-hero__inner .vk-hero__lead { margin-left: auto; margin-right: auto; }
.vk-hero__inner .vk-hero__cta { justify-content: center; }
.vk-hero__inner .vk-hero__figures { margin-left: auto; margin-right: auto; }
.vk-hero__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 84px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin: 0 0 28px;
  text-wrap: balance;
  display: block;
}
/* Ambas frases son bloques hermanos dentro del h1. El margen inferior de
   --problem es la pausa narrativa ENTRE las dos, no debajo del titular:
   cuando --resolution estaba anidada dentro de --problem el margen caia al
   final de todo y las frases se leian como un bloque continuo. */
.vk-hero__line {
  display: block;
  font-size: 64px;
  font-style: normal;
}
/* font-size and letter-spacing were inline styles in Hero.standalone.jsx. As
   inline styles on descendants of the h1 they outranked every
   .vk-hero__headline media query, so the headline never scaled down and the
   word "infraestructura" was clipped on every viewport under 428px. Same
   desktop values, now in the cascade where the media queries can reach them. */
.vk-hero__line--problem { margin-bottom: 28px; }
/* display: block so the gold thread's `width: 100%` resolves against this
   line's own box instead of Chromium's containing block for multi-line
   inlines, which landed between the two line widths. fit-content shrinks that
   box to the text, so the thread measures the sentence (609px at desktop)
   rather than the h1's full 805px; margin-inline: auto keeps it centered.
   On mobile the sentence wraps, the box fills the width, and nothing changes.
   CLAUDE.md §3. */
.vk-hero__line--resolution {
  position: relative;
  letter-spacing: -2.1px;
  width: fit-content;
  margin-inline: auto;
}
/* The global `em` rule sets italic; the headline deliberately does not use it.
   This was an inline font-style on the <em> in JSX — same value, moved here
   with the rest so the markup carries no presentation. */
.vk-hero__line em { font-style: normal; }
.vk-hero__lead {
  font-family: var(--font-serif-text);
  font-size: 19px; line-height: 1.6;
  color: var(--cream-soft);
  margin: 0 0 36px;
  max-width: 580px;
}
.vk-hero__cta { display: flex; gap: 14px; align-items: center; }
.vk-hero__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 32px;
  align-items: center;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border-1);
  max-width: 720px;
}
.vk-hero__seal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.vk-hero__seal img {
  width: 56px;
  height: auto;
  opacity: 0.85;
  display: block;
}
.vk-fig__label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 6px;
}
.vk-fig__num {
  font-size: 17px; color: var(--cream);
  font-weight: 500;
}

/* ---- Domus section ---- */
.vk-domus { text-align: center; }
.vk-domus .vk-eyebrow { margin-bottom: 28px; }
.vk-domus__lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 720px;
  margin: 0 auto 24px;
  text-wrap: balance;
}
.vk-domus__note {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.6;
  color: var(--cream-soft);
  max-width: 640px;
  margin: 0 auto;
}
.vk-domus__cta { margin-top: 36px; }
.vk-domus__link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold-honey);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.vk-domus__link:hover { color: var(--amber); }

/* ---- Section ---- */
.vk-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px max(64px, env(safe-area-inset-right)) 96px max(64px, env(safe-area-inset-left));
  position: relative;
}
.vk-section__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 880px;
  margin: 0 0 56px;
  text-wrap: balance;
}

/* ---- Diagnosis ---- */
.vk-diag { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.vk-diag__item {
  padding: 32px 28px 36px;
  background: rgba(244, 237, 224, 0.02);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  position: relative;
}
.vk-diag__num {
  font-size: 13px; color: var(--gold-warm);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.vk-diag__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 14px;
}
.vk-diag__body {
  font-family: var(--font-sans);
  font-size: 14.5px; line-height: 1.65;
  color: var(--cream-soft);
  margin: 0;
}

/* ---- Pain cost (institutional aside in DIAGNOSTICO) ---- */
.vk-paincost {
  margin-top: 32px;
  padding: 36px 28px 32px;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-1);
  text-align: center;
  position: relative;
  isolation: isolate;
}
.vk-paincost__label {
  font-size: 11px;
  color: var(--cream-mute);
  margin: 0 auto 16px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.vk-paincost__figure {
  font-family: var(--font-mono);
  font-weight: 500;
  margin: 0 auto 40px;
  font-size: 56px;
  letter-spacing: -0.02em;
  color: var(--gold-honey);
  line-height: 1;
  font-feature-settings: 'tnum';
  margin-bottom: 18px;
  display: inline-block;
  position: relative;
  isolation: isolate;
}
.vk-paincost__figure::before {
  content: ""; position: absolute; inset: -30px -60px;
  background: radial-gradient(ellipse 60% 80% at 50% 50%,
              rgba(244, 237, 224, 0.10) 0%,
              rgba(244, 237, 224, 0) 70%);
  filter: blur(60px); z-index: -1;
}
.vk-paincost__per {
  font-size: 28px;
  color: var(--cream-mute);
  letter-spacing: 0;
  font-weight: 400;
}
.vk-paincost__caption {
  font-family: var(--font-sans);
  font-size: 15px;
  margin: 0 auto 56px !important;
  color: var(--cream-soft);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto 20px;
}
.vk-paincost__rule {
  width: 100%; max-width: 480px; height: 1px;
  background: rgba(244, 237, 224, 0.20);
  margin: 0 auto 24px;
}
.vk-paincost__foot {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto;
}

/* ---- Protocol ---- */
.vk-proto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border-1); }
.vk-proto__step {
  padding: 32px 28px 36px 0;
  position: relative;
  border-right: 1px solid var(--border-1);
}
.vk-proto__step:last-child { border-right: 0; }
.vk-proto__step:not(:first-child) { padding-left: 28px; }
.vk-proto__num {
  font-size: 13px; color: var(--gold-warm);
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.vk-proto__term {
  display: inline-block;
  font-size: 12px; color: var(--cream);
  background: rgba(244, 237, 224, 0.05);
  border: 1px solid var(--border-2);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.vk-proto__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px; letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 14px;
}
.vk-proto__body {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.6;
  color: var(--cream-soft);
  margin: 0;
}

/* ---- Fit / no-fit (PROTOCOLO·03) ---- */
.vk-fit__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.vk-fit__grid::before {
  content: "";
  grid-column: 2; grid-row: 1;
  background: var(--border-1);
}
.vk-fit__col { padding: 36px 32px; }
.vk-fit__col:first-child { padding-left: 0; }
.vk-fit__col:last-child { padding-right: 0; }
.vk-fit__head {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.vk-fit__head--yes { color: var(--sage); }
.vk-fit__head--no { color: var(--sienna-text); }
.vk-fit__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.vk-fit__item {
  display: grid; grid-template-columns: 14px 1fr; gap: 14px;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.55;
  color: var(--cream-soft);
}
.vk-fit__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-top: 7px;
}
.vk-fit__item--yes .vk-fit__dot { background: var(--sage); box-shadow: 0 0 8px rgba(143, 168, 139, 0.45); }
.vk-fit__item--no .vk-fit__dot { background: var(--sienna); }
@media (max-width: 720px) {
  .vk-fit__grid { grid-template-columns: 1fr; }
  .vk-fit__grid::before { display: none; }
  .vk-fit__col { padding: 32px 0; border-bottom: 1px solid var(--border-1); }
  .vk-fit__col:last-child { border-bottom: 0; }
}

/* .vk-nav no tiene justify-content: el reparto lo producia el flex-grow de
   .vk-nav__links. Al ocultarlos, margin-left:auto sobre el CTA repone el
   empuje; sin el, el nav colapsa a la izquierda. Inerte por encima de 980px
   (los enlaces ya consumen el sobrante). CLAUDE.md §3. */
@media (max-width: 980px) {
  .vk-nav__links { display: none; }
  .vk-nav { gap: 32px; }
  /* min-height: tap target de 44px en toda la banda tactil, no solo en movil.
     Por debajo de 980px el nav ya muestra hamburguesa —son tablets— y ahi el
     CTA medía 39,5px. Se declara con `max-width: 980px` y NO con un rango
     `min-width: 769px and max-width: 980px`, que reabriria la franja muerta
     fraccionaria: a 768,5px no coincidiria ningun extremo. Por debajo de
     768px .vk-btn ya impone los mismos 44px, asi que solapa sin conflicto.
     No altera la altura del nav: la fija el wordmark con sus 64px. */
  .vk-nav__cta { margin-left: auto; min-height: 44px; }
}

/* ===========================================================
   Mobile (≤ 768px) — layout corrections only
   =========================================================== */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* Nav — misma gotera que .vk-section; cada elemento de borde se retrae su
     propio padding para que la TINTA (no la caja) arranque en el mismo x que
     el texto del cuerpo, conservando las cajas tactiles de 44px. CLAUDE.md §3. */
  .vk-nav {
    padding: 12px max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left));
    gap: 16px;
    background: rgba(10, 10, 15, 0.92);
  }
  .vk-nav__brand img,
  .vk-nav__logo { height: 36px; }
  .vk-nav__brand { margin-left: -10px; }
  /* Su contraparte, .vk-nav__burger, NO puede ir aqui: la regla base declara
     `margin: 0` mas abajo y ganaria por orden de fuente. Esta alli. */
  .vk-btn { min-height: 44px; }
  .vk-btn--compact { padding: 11px 14px; font-size: 12.5px; }
  /* CTA visible en movil con la etiqueta corta. */
  .vk-nav__cta-full { display: none; }
  .vk-nav__cta-short { display: inline; }

  /* Hero */
  .vk-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px max(24px, env(safe-area-inset-right)) 64px max(24px, env(safe-area-inset-left));
  }
  .vk-hero__inner { max-width: 100%; }
  .vk-hero__headline {
    font-size: clamp(36px, 9vw, 64px);
    line-height: 1.05;
    margin-bottom: 20px;
  }
  /* Let both headline lines follow the h1's responsive size instead of
     pinning themselves at the 64px desktop value. Inherited here, so the
     ≤480px and ≤360px steps below reach them too. */
  .vk-hero__line { font-size: inherit; }
  .vk-hero__line--problem { margin-bottom: 20px; }
  .vk-hero__lead {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 24px;
  }
  .vk-hero__cta { flex-wrap: wrap; }
  .vk-hero__cta .vk-btn { width: 100%; justify-content: center; }
  .vk-hero__figures {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
    padding-top: 24px;
  }
  /* El sello cromado esta disenado para anclarse al extremo derecho de una
     fila horizontal de labels. Por debajo de 768px el spec block se apila en
     vertical y ese extremo no existe, asi que no compone. display: none —no
     visibility ni opacity— para que salga del layout y no deje hueco: con una
     segunda columna declarada el `gap` seguiria reservando 20px a la derecha.
     La presencia de marca en movil la sostienen el wordmark del nav sticky y
     la V del divisor de seccion inmediatamente debajo. */
  .vk-hero__seal { display: none; }
  /* Sections */
  .vk-section { padding: 56px max(24px, env(safe-area-inset-right)) 56px max(24px, env(safe-area-inset-left)); }
  .vk-section__h {
    font-size: clamp(26px, 6.4vw, 36px);
    line-height: 1.18;
    margin-bottom: 32px;
  }

  /* Diagnosis — stack 3-up */
  .vk-diag { grid-template-columns: 1fr; gap: 16px; }
  .vk-diag__item { padding: 24px 20px 26px; }

  /* Pain cost */
  .vk-paincost { padding: 28px 16px; margin-top: 36px; }
  .vk-paincost__figure { font-size: 40px; }
  .vk-paincost__per { font-size: 22px; }

  /* Protocol */
  .vk-proto-group { padding: 28px 18px; }
  .vk-proto-group__label { left: 16px; font-size: 9.5px; }
  .vk-proto, .vk-proto--3 { grid-template-columns: 1fr; gap: 16px; border-top: 0; }
  .vk-proto__step,
  .vk-proto--3 .vk-proto__step {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-1);
  }
  .vk-proto__step:last-child,
  .vk-proto--3 .vk-proto__step:last-child { border-bottom: 0; }
  .vk-proto--3 .vk-proto__step:first-child { padding-top: 0; }
  .vk-proto__title { font-size: 19px; }

  /* Fit / no-fit — stack columns */
  .vk-fit__grid { grid-template-columns: 1fr; }
  .vk-fit__grid::before { display: none; }
  .vk-fit__col { padding: 28px 0; border-bottom: 1px solid var(--border-1); }
  .vk-fit__col:last-child { border-bottom: 0; }

  /* Figures */
  .vk-fig-grid { grid-template-columns: 1fr; }
  .vk-fig {
    padding: 28px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--border-1);
  }
  .vk-fig:last-child { border-bottom: 0; }
  .vk-fig__big { font-size: 44px; }

  /* Memo */
  .vk-memo__h { font-size: 26px; }
  .vk-memo__body p { font-size: 16px; line-height: 1.7; }

  /* Domus */
  .vk-domus__lede { font-size: clamp(26px, 6.4vw, 36px); line-height: 1.18; }
  .vk-domus__note { font-size: 15px; }
  .vk-domus__cta { margin-top: 28px; }

  /* CTA */
  .vk-cta__inner { padding: 44px 24px; }
  .vk-cta__h { font-size: 28px; }
  .vk-cta__sub { font-size: 15px; }
  .vk-cta__row .vk-btn { width: 100%; justify-content: center; }

  /* Footer */
  .vk-footer { padding: 32px 24px; }
  .vk-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
  }
  .vk-footer__brand { height: 28px; }
}

@media (max-width: 480px) {
  .vk-hero__headline { font-size: 52px; }
  .vk-paincost__figure { font-size: 48px; }
  .vk-paincost__per { font-size: 22px; }
}
/* 361–400px: at 52px the headline's longest word ("infraestructura") ran up to
   18px into the 24px gutter. 46px clears it with room to spare. Disjoint from
   the ≤360px step below, so order between them does not matter. */
@media (min-width: 361px) and (max-width: 400px) {
  .vk-hero__headline { font-size: 46px; }
}
@media (max-width: 360px) {
  .vk-hero__headline { font-size: 44px; }
  .vk-paincost__figure { font-size: 40px; }
  .vk-paincost__per { font-size: 18px; }
}

/* ---- Hamburger + mobile menu overlay ---- */
/* Oculta por defecto; visible SOLO bajo la misma consulta que oculta los
   enlaces. Partirlo en max-width:980 / min-width:981 deja una franja muerta:
   con un viewport fraccionario (980,5px) no coincide ninguna y se pintaban los
   dos a la vez, desbordando el nav 24px. CLAUDE.md §3. */
.vk-nav__burger {
  display: none;
  background: transparent; border: 0;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  padding: 13px 10px; margin: 0;
  cursor: pointer;
}
@media (max-width: 980px) { .vk-nav__burger { display: flex; } }
/* Contraparte derecha de la alineacion del wordmark. Va DESPUES del `margin:0`
   de arriba a proposito: misma especificidad, manda el orden de fuente. */
@media (max-width: 768px) { .vk-nav__burger { margin-right: -10px; } }
.vk-nav__burger span {
  display: block;
  width: 24px; height: 1px;
  background: var(--cream);
}
.vk-menu {
  position: fixed; inset: 0;
  z-index: 200;
  background: #0A0A0F;
  background-image:
    radial-gradient(900px 700px at 18% 12%, rgba(184, 146, 74, 0.05) 0%, rgba(184, 146, 74, 0) 70%),
    radial-gradient(700px 500px at 85% 78%, rgba(244, 237, 224, 0.025) 0%, rgba(244, 237, 224, 0) 70%);
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 400ms var(--ease-editorial), transform 400ms var(--ease-editorial);
}
.vk-menu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../assets/img/grain.png");
  background-size: 200px 200px;
  opacity: 0.015; mix-blend-mode: overlay;
}
.vk-menu.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 600ms var(--ease-editorial), transform 600ms var(--ease-editorial);
}
.vk-menu__close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 44px; height: 44px;
  background: transparent; border: 0;
  color: var(--cream); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vk-menu__links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 32px;
}
.vk-menu__links a {
  font-family: var(--font-display);
  font-weight: 500; font-size: 36px;
  color: var(--cream); text-decoration: none;
  letter-spacing: -0.015em;
}
.vk-menu__cta {
  margin-top: 64px;
  width: 100%; max-width: 420px;
  justify-content: center;
}

/* ---- Figures ---- */
.vk-fig-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.vk-fig {
  padding: 40px 24px;
  position: relative;
  border-right: 1px solid var(--border-1);
  isolation: isolate;
}
.vk-fig:last-child { border-right: 0; }
.vk-fig__big {
  font-size: 56px; font-weight: 500;
  color: var(--cream);
  line-height: 1; letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  margin-bottom: 18px;
}
.vk-fig__cap {
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.5;
  color: var(--fg-3);
  max-width: 220px;
}

/* ---- Memo ---- */
.vk-memo { max-width: 880px; }
.vk-memo__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--cream);
  margin: 0 0 32px;
}
.vk-memo__body {
  font-family: var(--font-serif-text);
  font-size: 18px; line-height: 1.75;
  color: var(--cream-soft);
}
.vk-memo__body p { font-family: var(--font-serif-text); font-size: 18px; line-height: 1.75; color: var(--cream-soft); margin: 0 0 22px; }
.vk-memo__sig { margin-top: 42px; }
.vk-memo__rule { width: 64px; height: 1px; background: var(--gold-deep); margin-bottom: 16px; }
.vk-memo__sig-text { font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }

/* ---- CTA ---- */
.vk-cta { padding-top: 32px; padding-bottom: 96px; }
.vk-cta__inner {
  position: relative; isolation: isolate;
  padding: 80px 64px;
  background: rgba(244, 237, 224, 0.02);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  text-align: left;
}
.vk-cta__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--cream);
  margin: 0 0 18px;
  max-width: 700px;
}
.vk-cta__sub {
  font-family: var(--font-serif-text);
  font-size: 17px; line-height: 1.65;
  color: var(--cream-soft);
  margin: 0 0 32px;
  max-width: 700px;
}
.vk-cta__row { display: flex; gap: 14px; }

/* ---- Footer ---- */
.vk-footer {
  padding: 48px 64px;
  border-top: 1px solid var(--border-1);
}
.vk-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 32px;
  justify-content: space-between;
}
/* display: block is load-bearing. This img used to be a direct flex item of
   .vk-footer__inner, which blockified it. Wrapped in <picture> for the WebP
   source it is no longer a flex item, so it would fall back to inline and pick
   up 6.5px of baseline descender space, growing the footer. */
.vk-footer__brand { opacity: 0.55; height: 33px; width: auto; display: block; }

/* The <picture> wrappers exist only to offer a WebP source. They must occupy
   exactly the box their <img> used to. */
picture { display: block; }
.vk-footer__meta, .vk-footer__legal {
  font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.04em;
}
/* inline-block + vertical padding to reach the 44px minimum tap target
   (11px of text + 2x15px padding = 41px... plus line-height gets it to 44). */
.vk-footer__legal a {
  color: var(--fg-3); text-decoration: none;
  display: inline-block;
  padding: 15px 0;
  transition: color var(--duration-base) var(--ease-standard);
}
.vk-footer__legal a:hover { color: var(--amber); }

/* ---- Editorial divider ---- */
.vk-divider {
  display: flex; align-items: center; gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}
.vk-divider__line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg,
    rgba(244, 237, 224, 0) 0%,
    rgba(244, 237, 224, 0.18) 30%,
    rgba(244, 237, 224, 0.18) 70%,
    rgba(244, 237, 224, 0) 100%);
}
.vk-divider__mark {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gold-warm);
  opacity: 0.7;
}
@media (max-width: 600px) {
  .vk-divider { padding: 0 24px; gap: 16px; }
}

/* ---- Hero gold thread ----
   Sits under the resolution line of the headline and draws itself to that
   line's rendered width. .vk-hero__line--resolution is the positioned
   ancestor, so `width: 100%` resolves to that line's box. */
.vk-hero__thread {
  position: absolute;
  left: 0; bottom: -14px;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--cream), var(--gold-honey));
  animation: vk-thread 2200ms var(--ease-editorial) 200ms forwards;
  box-shadow: 0 0 12px rgba(232, 185, 104, 0.4);
}
@keyframes vk-thread {
  to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vk-hero__thread { width: 100%; animation: none; }
}

/* ---- Protocol groups (base + extended) ---- */
.vk-proto-group {
  position: relative;
  padding: 36px 32px 36px;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  margin-bottom: 32px;
}
.vk-proto-group--extended {
  margin-top: 56px;
  border-color: var(--border-2);
  background: rgba(232, 185, 104, 0.025);
}
.vk-proto-group__label {
  position: absolute;
  top: -10px; left: 24px;
  padding: 0 12px;
  background: var(--bg-charcoal);
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-mute);
}
.vk-proto-group--extended .vk-proto-group__label { color: var(--gold-warm); }

.vk-proto--3 { grid-template-columns: repeat(3, 1fr); border-top: 0; gap: 0; }
.vk-proto--3 .vk-proto__step:first-child { padding-left: 0; }
.vk-proto--3 .vk-proto__step:last-child { padding-right: 0; border-right: 0; }

.vk-proto__step--full {
  display: block;
  padding: 8px 0 0;
  border: 0;
}
.vk-proto__sub {
  font-size: 11.5px; color: var(--cream-mute);
  letter-spacing: 0.06em;
  margin: -6px 0 14px;
}

/* ---- Figures (sparklines + footnote) ---- */
.vk-fig__big { color: var(--cream); }
.vk-fig__spark {
  margin-top: 14px;
  height: 32px;
  display: flex; align-items: flex-end;
}
.vk-spark { width: 120px; height: 32px; display: block; }
.vk-figures__foot {
  margin-top: 32px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.55;
  max-width: 760px;
}

/* ---- CTA reassurance ---- */
.vk-cta__reassure {
  margin-top: 18px;
  font-size: 11px;
  color: var(--cream-mute);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* CIFRAS·04 — banda de tablet en vertical.
   Cada `1fr` es `minmax(auto, 1fr)`: ninguna pista baja de su min-content.
   Medido 717,4px (suelos: .vk-spark 120px fijos y la cifra `<5min`, 162px en
   mono a 56px). Con la gotera de .vk-section, la fila de 4 pide 846px, asi que
   entre 769 y 846px se comeria la gotera y desbordaria — iPad 10.2" y Air en
   vertical. 2x2 por debajo de 900px (~54px de margen). Va ANTES del bloque de
   ≤768px para que aquel gane el empate por orden de fuente. CLAUDE.md §3. */
@media (max-width: 900px) {
  .vk-fig-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 24px;
  }
  .vk-fig { border-bottom: 1px solid var(--border-1); }
  .vk-fig:nth-child(2n) { border-right: 0; }
  .vk-fig:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ===========================================================
   Mobile overrides — must come AFTER desktop .vk-proto--3
   and .vk-fig-grid declarations to win source-order tie.
   =========================================================== */
@media (max-width: 768px) {
  /* PROTOCOLO·02 BASE — stack 3 cards vertically */
  .vk-proto--3 {
    grid-template-columns: 1fr;
    gap: 16px;
    border-top: 0;
  }
  .vk-proto--3 .vk-proto__step {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-1);
  }
  .vk-proto--3 .vk-proto__step:first-child { padding-top: 0; padding-left: 0; }
  .vk-proto--3 .vk-proto__step:last-child {
    padding-right: 0;
    padding-bottom: 0;
    border-right: 0;
    border-bottom: 0;
  }

  /* CIFRAS·04 — el 2x2 ya viene del bloque de ≤900px; aqui, los tamanos. */
  .vk-fig-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 24px;
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
  }
  .vk-fig {
    padding: 24px 16px;
    border-right: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
  }
  .vk-fig:nth-child(2n) { border-right: 0; }
  .vk-fig:nth-last-child(-n+2) { border-bottom: 0; }
  .vk-fig__big { font-size: 36px; }
  .vk-fig__cap { font-size: 12.5px; line-height: 1.45; }
  .vk-spark { width: 100%; max-width: 120px; }
}