/* ================================================================
   KENZLY — shared stylesheet. Link this file, then a page-*.css.
   ================================================================
   Naming mirrors the "Kenzly Design System" project on claude.ai/design
   (tokens/colors.css, tokens/typography.css, tokens/spacing.css,
   tokens/effects.css) but every value below is extracted from the real
   production CSS of kenzlylandingPage — not inferred. See README.md for
   the extraction/migration log and the rules for editing this file.

   Sectioned (not split into files) on purpose: no build step exists, so
   one <link> avoids an @import waterfall. Section fences below name the
   DS file each block corresponds to — split at the fences if a build
   step is ever introduced.
   ================================================================ */

/* ─────────────────────────────────────────────────────────────
   tokens/colors.css
   ───────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — all one value by design. This is a neumorphic system:
     depth comes entirely from --shadow-dark/--shadow-light dual-lobe
     shadows, never from a fill difference between "card" and "page".
     Do not diverge these to "fix" the duplication. */
  --surface-page:   #d8dce6;
  --surface-card:   #d8dce6;
  --surface-raised: #d8dce6;
  --surface-inset:  #d8dce6;
  --surface-hover:  #d8dce6;

  /* The two shadow lobes every raised/inset surface is built from. */
  --shadow-dark:  #b0b5c4;
  --shadow-light: #f8faff;

  --text-primary:   #181c2a;
  --text-secondary: #2e3348;
  --text-muted:     #6a7090;
  --text-faint:     rgba(106, 112, 144, 0.32);

  --border-hairline: rgba(9, 9, 15, 0.06);
  --border-strong:   rgba(9, 9, 15, 0.08);

  /* Functional telemetry status — the only saturated color besides the
     per-page accent. */
  --k-ok:        #22a060;
  --k-warn:      #c97a0a;
  --k-live:      #20c060;
  --k-live-glow: rgba(32, 192, 96, 0.65);
  --k-saas:      #8b5cf6;
  --k-saas-glow: rgba(139, 92, 246, 0.6);
  --k-dev:       #f59e0b;
  --k-dev-glow:  rgba(245, 158, 11, 0.6);
}

/* ── Accent theme (page-level axis) ──────────────────────────────
   Default is the royal-blue brand accent. agro.html opts into the
   green accent by setting data-accent="agro" on <body> (replaces the
   old `.agro` class-scoped override). Interactive chrome (buttons,
   nav CTA, badges, Calendly) reads these — never the sector tokens
   below, which are element-level, not page-level. */
:root,
[data-accent="default"] {
  --accent:       #1644e8;
  --accent-glow:  rgba(22, 68, 232, 0.22);
  --accent-hex:   1644e8; /* bare hex, no '#' — for the Calendly querystring script */

  --shadow-accent:        6px 6px 18px rgba(8, 24, 130, 0.5), -4px -4px 12px rgba(50, 100, 255, 0.28);
  --shadow-accent-inset:  inset 5px 5px 13px rgba(8, 24, 130, 0.55), inset -4px -4px 10px rgba(50, 100, 255, 0.22);
  --shadow-accent-hover:  8px 8px 26px rgba(8, 24, 130, 0.66), -4px -4px 14px rgba(50, 100, 255, 0.38);
}
[data-accent="agro"] {
  --accent:       #3d6e32;
  --accent-glow:  rgba(61, 110, 50, 0.22);
  --accent-hex:   3d6e32;

  --shadow-accent:        6px 6px 18px rgba(18, 70, 8, 0.44), -4px -4px 12px rgba(72, 128, 40, 0.24);
  --shadow-accent-inset:  inset 5px 5px 13px rgba(18, 70, 8, 0.5), inset -4px -4px 10px rgba(72, 128, 40, 0.2);
  /* Derived, not extracted: agro's buttons never had a distinct hover
     shadow in production (see README §Known gaps) — this follows the
     same x1.32 spread / +0.06 alpha ratio the default accent's hover
     uses over its base shadow-accent. */
  --shadow-accent-hover:  8px 8px 26px rgba(18, 70, 8, 0.6), -4px -4px 14px rgba(72, 128, 40, 0.34);
}

/* ── Sector theme (element-level axis, independent of accent) ─────
   Tints project-card tags/badges by industry. Was `.pcard[data-sector]`
   in proyectos.html; scope widened to a bare attribute selector so any
   element (not just .pcard) can carry a sector. Values unchanged. */
[data-sector="agro"] { --sector-bg: rgba(61, 110, 50, 0.1);  --sector-fg: #2d5a24; --sector-tint: rgba(61, 110, 50, 0.04); }
[data-sector="amb"]  { --sector-bg: rgba(12, 107, 145, 0.1); --sector-fg: #0a6080; --sector-tint: rgba(12, 107, 145, 0.04); }
[data-sector="mfg"]  { --sector-bg: rgba(184, 92, 10, 0.1);  --sector-fg: #9c4d08; --sector-tint: rgba(184, 92, 10, 0.04); }
[data-sector="saas"] { --sector-bg: rgba(94, 34, 176, 0.1);  --sector-fg: #5a27a0; --sector-tint: rgba(94, 34, 176, 0.04); }
[data-sector="dep"]  { --sector-bg: rgba(190, 24, 93, 0.1);  --sector-fg: #a3154f; --sector-tint: rgba(190, 24, 93, 0.04); }

/* ─────────────────────────────────────────────────────────────
   tokens/typography.css
   ───────────────────────────────────────────────────────────── */
:root {
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Only 300–600 are requested from Google Fonts (see the <link> each
     page carries). Do not use 700 — it renders as browser-synthesized
     fake bold, not a real weight (this was a real bug on agro.html
     .mp-val, fixed alongside this refactor). */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Body/UI tier — safe, reusable sizes. Display headlines are bespoke
     per-role clamp()s (see each page-*.css) and are NOT tokenized here:
     they don't share a slope, and forcing one would reflow headlines. */
  --fs-body-lg: 1.05rem;
  --fs-body:    .95rem;
  --fs-body-sm: .88rem;
  --fs-body-xs: .8rem;
  --fs-label:   .82rem;

  --lh-flush:   1;
  --lh-crush:   .9;
  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.75;
  --lh-prose:   1.7;

  --ls-display-xl: -.05em;
  --ls-display:    -.04em;
  --ls-display-sm: -.03em;
  --ls-tight:      -.02em;
  --ls-normal:     0;
  --ls-wide:       .07em;
  --ls-eyebrow:    .2em;
  --ls-brand:      .24em;
  --ls-wordmark-sub: .44em;
}

/* ─────────────────────────────────────────────────────────────
   tokens/spacing.css
   ───────────────────────────────────────────────────────────── */
:root {
  --section-y: 7rem;  /* 112px — confirmed exact match across .svc-sec/.iot-sec/.proceso-sec/.precios-sec */
  --gutter:    2rem;  /* 32px — every .wrap side padding on the site */

  /* Most common gap/stack values, for reuse. One-off paddings/gaps stay
     literal in page-*.css — a token used once is worse than a literal. */
  --stack-lg:  1.5rem;
  --stack:     1.4rem;
  --stack-md:  1.2rem;
  --stack-sm:  1rem;
  --stack-xs:  .6rem;
  --stack-2xs: .55rem;
  --foot-y:    2.8rem;

  /* Container widths — intentionally THREE, not one. Normalizing these
     reflows agro's and proyectos' existing grids; that's a design
     decision, not a refactor, and stays explicitly out of scope. */
  --container-max:   1200px; /* index.html default */
  --container-nav:   860px;  /* .nav-pill, all pages */
  --container-prose: 820px;  /* privacidad.html */
}
body[data-page="agro"]      { --container-max: 1100px; }
body[data-page="proyectos"] { --container-max: 1140px; }
body[data-page="privacidad"] { --container-max: var(--container-prose); }

/* ─────────────────────────────────────────────────────────────
   tokens/effects.css
   ───────────────────────────────────────────────────────────── */
:root {
  /* Corner radii — real values used on site, renamed so the same name
     never means two different sizes again (--rlg used to mean 32px on
     index and 22px on agro/proyectos). */
  --radius-xs:   6px;
  --radius-sm:   14px;
  --radius-md:   18px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-pill: 999px;
  --radius-hair: 2px;

  /* Neumorphic shadows — dual-lobe (dark + light) with an inset edge
     highlight. This is the site's real elevation system; it cannot be
     represented by a single-lobe drop-shadow scale. */
  --shadow-raised:
    9px 9px 22px var(--shadow-dark),
    -9px -9px 22px var(--shadow-light),
    inset 1px 1px 0 rgba(255, 255, 255, .72),
    inset -1px -1px 0 rgba(0, 0, 0, .04);
  --shadow-raised-sm:
    4px 4px 11px var(--shadow-dark),
    -4px -4px 11px var(--shadow-light),
    inset 1px 1px 0 rgba(255, 255, 255, .65),
    inset -1px -1px 0 rgba(0, 0, 0, .03);
  --shadow-raised-lg:
    16px 16px 40px var(--shadow-dark),
    -16px -16px 40px var(--shadow-light),
    inset 1px 1px 0 rgba(255, 255, 255, .75),
    inset -1px -1px 0 rgba(0, 0, 0, .04);
  --shadow-nav-scrolled:
    12px 12px 30px var(--shadow-dark),
    -12px -12px 30px var(--shadow-light),
    inset 1px 1px 0 rgba(255, 255, 255, .8),
    inset -1px -1px 0 rgba(0, 0, 0, .05);
  --shadow-inset:    inset 6px 6px 14px var(--shadow-dark), inset -6px -6px 14px var(--shadow-light);
  --shadow-inset-sm: inset 3px 3px 8px  var(--shadow-dark), inset -3px -3px 8px  var(--shadow-light);

  /* Motion — index.html's reveal easing is the site's real signature
     curve; agro/proyectos' plain `ease` on .rev is page drift, not a
     second intentional curve (left as page-local until Phase 3). */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 150ms;
  --dur:      200ms;
  --dur-slow: 300ms;

  --z-nav:   100;
  --z-menu:  200;
  --z-grain: 9999;
  --z-skip:  10000;
}

/* ─────────────────────────────────────────────────────────────
   base.css — reset, page chrome, brand helpers
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }

/* Grain texture over the whole page. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 240px;
}

.wrap, .k-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }

.mono, .k-eyebrow {
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.k-wordmark { font-size: .88rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-brand); display: block; }
.k-wordmark__sub {
  display: block; font-size: .3rem; letter-spacing: var(--ls-wordmark-sub);
  color: var(--text-muted); font-weight: var(--fw-regular); margin-top: 3px;
}

/* ── Flow animations — the wordmark / headline sheen ─────────────── */
@keyframes silver-flow {
  0%   { background-position: 0%    center; }
  100% { background-position: -220% center; }
}
.flow-silver, .k-chrome-text {
  background: linear-gradient(
    100deg,
    #262b3d 0%, #313650 9%, #444c6e 18%, #636e98 27%, #8d98c2 35%,
    #bcc6e8 41%, #e9eefb 45%, #ffffff 48%, #e9eefb 51%, #bcc6e8 55%,
    #8d98c2 61%, #636e98 69%, #444c6e 78%, #313650 87%, #262b3d 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: silver-flow 9s linear infinite;
}
.flow-blue {
  background: linear-gradient(
    100deg,
    #061670 0%, #0a22a0 9%, #1233c4 18%, #1644e8 27%, #2f5dff 35%,
    #6890ff 41%, #a8c0ff 45%, #dce6ff 48%, #a8c0ff 51%, #6890ff 55%,
    #2f5dff 61%, #1644e8 69%, #1233c4 78%, #0a22a0 87%, #061670 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: silver-flow 9s linear infinite;
  animation-delay: -3.2s;
}

@keyframes surface-sweep {
  0%, 100% { left: -90%; opacity: 0; }
  8%       { opacity: 1; }
  48%      { left: 140%; opacity: 0; }
  49%, 99% { left: 140%; opacity: 0; }
}
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: '';
  position: absolute; top: 0; left: -90%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .14) 50%, transparent 85%);
  transform: skewX(-8deg);
  animation: surface-sweep 9s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes glow-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes pulse-blue {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--accent); }
  50%      { opacity: .35; box-shadow: none; }
}
.pulse { animation: pulse-blue 2s ease-in-out infinite; }

.ok   { color: var(--k-ok); }
.warn { color: var(--k-warn); animation: glow-breathe 2.5s ease-in-out infinite; }

/* ── Reveal-on-scroll — index.html's timing (.5s / 14px) is canonical.
   agro (.75s/26px) and proyectos (.65s/22px) still override locally in
   their page-*.css until Phase 3 unifies the stagger system. ───────── */
.rev   { opacity: 0; transform: translateY(14px); will-change: transform, opacity; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rev-l { opacity: 0; transform: translateX(-18px); will-change: transform, opacity; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rev-r { opacity: 0; transform: translateX(18px);  will-change: transform, opacity; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rev.on, .rev-l.on, .rev-r.on { opacity: 1; transform: none; will-change: auto; }

/* ── Accessibility ────────────────────────────────────────────────── */
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: var(--z-skip);
  padding: .55rem 1.1rem; border-radius: var(--radius-md);
  background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: var(--fw-semibold); text-decoration: none;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.skip-link:focus-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ─────────────────────────────────────────────────────────────
   components/footer.css — byte-identical across all 4 pages in
   production; verified before extraction (see README.md).
   ───────────────────────────────────────────────────────────── */
footer { padding: var(--foot-y) 0; border-top: 1px solid var(--border-hairline); }
.foot-row {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 1.4rem;
}
.foot-logo b { font-size: .88rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-brand); }
.foot-logo small {
  display: block; font-size: .3rem; letter-spacing: var(--ls-wordmark-sub);
  color: var(--text-muted); font-weight: var(--fw-regular); margin-top: 3px;
}
.foot-links { display: flex; gap: 1.4rem; list-style: none; }
.foot-links a {
  text-decoration: none; font-family: var(--font-mono);
  font-size: .52rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-muted); transition: color var(--dur);
}
.foot-links a:hover { color: var(--text-primary); }
.foot-copy {
  font-family: var(--font-mono); font-size: .46rem;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-faint);
}

/* ─────────────────────────────────────────────────────────────
   prefers-reduced-motion — canonical block. index.html had the only
   correct version in production; proyectos.html's was broken (killed
   .flow-silver's animation without resetting -webkit-text-fill-color,
   freezing the wordmark mid-gradient) and agro.html had none at all.
   Every page linking this file gets the fixed behavior.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .flow-silver, .flow-blue, .k-chrome-text {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-primary);
  }
  .shimmer::after { display: none; }
  .rev, .rev-l, .rev-r { opacity: 1; transform: none; transition: none; will-change: auto; }
  .marquee-track, .trusted-track { animation-play-state: paused; }
  .iot-fill { animation: none; }
  .pulse { animation: none; }
  .warn, .iot-pill.warn { animation: none; }
}