/* ══════════════════════════════════════════════════════════════════════════
   BALAM — design system.  Redesign 2026-09 · "cinematic scroll" direction.
   Palette: carbon black / ivory / BALAM amber.  Display: Bricolage
   Grotesque.  Motion: GSAP ScrollTrigger (home only), pinned + scrubbed acts,
   fully degraded under prefers-reduced-motion.

   Sections theme locally with .s-dark / .s-light (set --bg --fg --fg-dim
   --surface --hairline --accent --accent-ink). Pre-redesign token names
   (--color-accent, …) kept as aliases so unmigrated pages keep rendering.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/bricolage-var-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;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/bricolage-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/hanken-var-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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/hanken-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow kept for pages still on prod's /fonts (system fallback locally). */
@font-face { font-family:'Barlow'; font-weight:400; font-display:swap; src:url("/fonts/barlow-400-latin.woff2") format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Barlow'; font-weight:600; font-display:swap; src:url("/fonts/barlow-600-latin.woff2") format('woff2'); unicode-range:U+0000-00FF; }

:root {
  /* ── Palette ────────────────────────────────────────────────────────── */
  --carbon:   #0b0b0d;
  --carbon-2: #131317;
  --carbon-3: #1d1d23;
  --ivory:    #f2efe6;
  --ivory-2:  #e6e1d2;
  --ivory-3:  #d9d3c0;

  --white:    #f4f2ec;   /* text on carbon                                  */
  --fog:      #9a978d;   /* dim text on carbon                              */
  --ink:      #100f13;   /* text on ivory                                   */
  --ink-dim:  #5d5a51;   /* dim text on ivory                               */

  /* Accent — BALAM amber on carbon. --acc = graphic fills, --acc-hi = text/
     line on carbon, --acc-lo = text/line on ivory, --btn-fg = label on a
     filled accent button. */
  --acc:     #f2b31c;
  --acc-hi:  #f8c651;
  --acc-lo:  #6f5206;
  --btn-fg:  #14140c;

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-display);

  /* ── Space / radius / motion ────────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 4px; --radius-md: 12px; --radius-lg: 20px;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 1180px;
  --maxw-text: 44rem;

  /* ── Default (dark) theme ───────────────────────────────────────────── */
  --bg: var(--carbon); --fg: var(--white); --fg-dim: var(--fog);
  --surface: var(--carbon-2); --surface-hi: var(--carbon-3);
  --hairline: color-mix(in srgb, var(--white) 13%, transparent);
  --accent: var(--acc); --accent-ink: var(--acc-hi);

  /* ── Aliases for unmigrated pages / Functions / chat widget ──────────── */
  --color-bg: var(--carbon);
  --color-surface: var(--carbon-2);
  --color-text: var(--white);
  --color-divider: var(--hairline);
  --color-accent: var(--acc);
  --color-accent-2: var(--acc);
  --color-accent-100: color-mix(in srgb, var(--acc) 14%, transparent);
  --color-accent-200: color-mix(in srgb, var(--acc) 26%, var(--carbon));
  --color-accent-300: color-mix(in srgb, var(--acc) 46%, var(--carbon));
  --color-accent-400: var(--acc);
  --color-accent-500: var(--acc);
  --color-accent-600: var(--acc-hi);
  --color-accent-700: var(--acc-hi);
  --color-accent-800: var(--acc-hi);
  --color-accent-900: var(--acc-lo);
  --color-accent-2-100: color-mix(in srgb, var(--acc) 14%, transparent);
  --color-accent-2-300: color-mix(in srgb, var(--acc) 46%, var(--carbon));
  --color-accent-2-500: var(--acc);
  --color-accent-2-700: var(--acc-hi);
  --color-accent-2-900: var(--acc-lo);
  --color-neutral-100: var(--carbon-3);
  --color-neutral-200: var(--carbon-2);
  --color-neutral-300: var(--hairline);
  --color-neutral-800: var(--fog);
  --color-neutral-900: var(--carbon);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 12px 34px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 34px 80px -24px rgba(0,0,0,.62);
  --font-heading-weight: 700;
}

.s-dark {
  --bg: var(--carbon); --fg: var(--white); --fg-dim: var(--fog);
  --surface: var(--carbon-2); --surface-hi: var(--carbon-3);
  --hairline: color-mix(in srgb, var(--white) 13%, transparent);
  --accent: var(--acc); --accent-ink: var(--acc-hi);
  background: var(--bg); color: var(--fg);
}
.s-light {
  --bg: var(--ivory); --fg: var(--ink); --fg-dim: var(--ink-dim);
  --surface: var(--ivory-2); --surface-hi: var(--ivory-3);
  --hairline: color-mix(in srgb, var(--ink) 15%, transparent);
  --accent: var(--acc); --accent-ink: var(--acc-lo);
  background: var(--bg); color: var(--fg);
}

/* ══════════════════════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--carbon); }

body {
  margin: 0; background: var(--carbon); color: var(--white);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
  text-wrap: pretty; -webkit-font-smoothing: antialiased; font-synthesis: none;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display); font-weight: 700;
  line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 var(--space-4);
  color: var(--fg); text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 9vw, 8rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(2rem, 5.5vw, 4.2rem); letter-spacing: -0.035em; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -0.02em; }
h4 { font-size: 1.15rem; letter-spacing: -0.015em; }
h6 { font-size: 0.8rem; letter-spacing: 0; font-weight: 600; font-family: var(--font-body); }

p { margin: 0 0 var(--space-4); }
a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: color-mix(in srgb, var(--accent-ink) 70%, var(--fg)); }
strong, b { font-weight: 600; color: var(--fg); }
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
hr { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--hairline); }
figcaption { font-size: 0.8rem; color: var(--fg-dim); margin-top: var(--space-2); }
.text-muted { color: var(--fg-dim); }
::selection { background: color-mix(in srgb, var(--acc) 44%, transparent); color: var(--white); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; }
.btn:focus-visible { outline-offset: 5px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); }
.tnum { font-variant-numeric: tabular-nums; }

/* eyebrow — sentence case, not tracked caps */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.82rem; font-weight: 600; color: var(--accent-ink); margin-bottom: var(--space-6);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; line-height: 1;
  padding: 16px 30px; border: 1.5px solid transparent; border-radius: 2px;
  color: var(--fg); background: transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .1s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--acc); color: var(--btn-fg); border-color: var(--acc); }
.btn-primary:hover { background: color-mix(in srgb, var(--acc) 85%, var(--white)); border-color: color-mix(in srgb, var(--acc) 85%, var(--white)); }
.btn-secondary { border-color: color-mix(in srgb, var(--fg) 30%, transparent); color: var(--fg); }
.btn-secondary:hover { border-color: var(--fg); }
.btn-ghost { color: var(--accent-ink); }

.ilink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-ink); font-weight: 600; font-size: 1rem; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.ilink::after {
  content: ""; width: 18px; height: 1.5px; background: currentColor;
  transition: width .22s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .ilink:hover::after { width: 30px; } }

/* magnetic-button hook (home.js) — the transform is applied inline */
.magnetic { will-change: transform; }

/* ══════════════════════════════════════════════════════════════════════════
   Top nav  +  progress bar
   ══════════════════════════════════════════════════════════════════════ */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 28px;
  height: 66px; padding-inline: clamp(20px, 5vw, 40px);
  color: var(--white); mix-blend-mode: difference;
}
.topnav.is-solid {
  mix-blend-mode: normal; background: color-mix(in srgb, var(--carbon) 78%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; transition: opacity .15s ease; }
.brand:hover { color: inherit; opacity: 0.72; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.brand-mark i { width: 3px; background: currentColor; display: block; opacity: 0.65; }
.brand-mark i:nth-child(1){height:7px} .brand-mark i:nth-child(2){height:12px}
.brand-mark i:nth-child(3){height:16px} .brand-mark i:nth-child(4){height:20px;opacity:1;background:var(--acc)}
.brand-mark i:nth-child(5){height:16px} .brand-mark i:nth-child(6){height:12px} .brand-mark i:nth-child(7){height:7px}
.brand-word { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.16em; font-size: 1rem; }
.nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-links a.navitem { font-size: 0.85rem; font-weight: 500; color: inherit; opacity: 0.72; transition: opacity .15s ease; }
.nav-links a.navitem:hover { opacity: 1; }
.lang-btn {
  font: 600 0.72rem/1 var(--font-body); letter-spacing: 0.1em; color: inherit;
  background: none; border: 1px solid currentColor; height: 36px; padding: 0 13px;
  cursor: pointer; opacity: 0.7; transition: opacity .15s ease, transform .1s var(--ease-out);
}
.lang-btn:hover { opacity: 1; } .lang-btn:active { transform: scale(0.96); }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 61;
  background: var(--acc); transform: scaleX(0); transform-origin: 0 50%;
}

/* ══════════════════════════════════════════════════════════════════════════
   Loader
   ══════════════════════════════════════════════════════════════════════ */
#loader {
  position: fixed; inset: 0; z-index: 200; background: var(--carbon);
  display: grid; place-items: center; color: var(--white);
}
#loader.is-done { display: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.loader-bars { display: inline-flex; align-items: flex-end; gap: 4px; height: 46px; }
.loader-bars i { width: 5px; background: var(--fog); display: block; transform: scaleY(0.1); transform-origin: bottom; }
.loader-bars i.accent { background: var(--acc); }
.loader-count { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--fog); }

/* ══════════════════════════════════════════════════════════════════════════
   Acts / sections
   ══════════════════════════════════════════════════════════════════════ */
.act { position: relative; }
.act-pad { padding-block: clamp(90px, 16vw, 200px); }

.pin-stage { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.pin-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); }

/* section intro block */
.intro { max-width: var(--maxw-text); }
.intro.center { margin-inline: auto; text-align: center; }
.intro p { color: var(--fg-dim); font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.45; margin: var(--space-4) 0 0; }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero { background: var(--carbon); color: var(--white); }
.hero-grid {
  position: absolute; inset: -20% -10%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--white) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--white) 6%, transparent) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(120% 90% at 50% 42%, transparent 0%, #000 26%, #000 46%, transparent 80%);
}
.hero-scanline {
  position: absolute; top: 0; bottom: 0; width: 3px; left: 0;
  background: linear-gradient(to bottom, transparent, var(--acc-hi) 20%, #fff 50%, var(--acc-hi) 80%, transparent);
  box-shadow: 0 0 44px 6px color-mix(in srgb, var(--acc) 65%, transparent),
              0 0 14px 2px color-mix(in srgb, var(--acc-hi) 80%, transparent);
}
.hero-content { position: relative; text-align: center; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.82rem; font-weight: 600; color: var(--acc-hi);
  letter-spacing: 0.02em; margin: 0 0 clamp(20px, 3vw, 34px);
}
.hero-kicker .kline { display: block; width: 44px; height: 1.5px; background: var(--acc); transform-origin: left; }
html.js:not(.reduce) .hero-kicker { opacity: 0; }
html.js:not(.reduce) .hero-kicker .kline { transform: scaleX(0); }
html.js:not(.reduce) .hero.intro-run .hero-kicker { animation: heroFade 0.6s var(--ease-out) 0.05s forwards; }
html.js:not(.reduce) .hero.intro-run .hero-kicker .kline { animation: kdraw 0.7s var(--ease-out) 0.2s forwards; }
@keyframes kdraw { to { transform: scaleX(1); } }
.hero h1 {
  font-size: clamp(3rem, 12vw, 11rem); line-height: 0.98; letter-spacing: -0.05em;
  text-transform: uppercase; margin: 0;
}
.hero h1 .word { display: inline-block; }
.hero-sub {
  color: var(--fog); font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.4;
  max-width: 30ch; margin: clamp(24px, 4vw, 44px) auto 0;
}
.hero-cta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); }

/* ── SENTINEL — pinned graphic, side text changes on scroll ────────────── */
.sentinel { background: var(--carbon); color: var(--white); }
.sentinel-stage { overflow: hidden; }
.sentinel-inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 40px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: center;
}
.sentinel-viz { position: relative; width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 1; }
.sentinel-viz svg { width: 100%; height: 100%; }
.sv-rings circle, .sv-cross { fill: none; stroke: var(--hairline); stroke-width: 1; }
.sv-sweep { fill: color-mix(in srgb, var(--acc) 22%, transparent); }
.sv-lead { stroke: var(--acc-hi); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 70%, transparent)); }
.sv-node { fill: #46464e; stroke: var(--acc); stroke-width: 1.5; opacity: 0.4; }
.sv-node.on { fill: var(--acc); opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--acc) 60%, transparent)); }
.sv-core { fill: var(--acc-hi); }

.sentinel-beats { position: relative; min-height: clamp(220px, 34vh, 320px); }
.beat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.beat-idx { font-family: var(--font-display); font-weight: 700; color: var(--acc-hi); font-size: 0.9rem; letter-spacing: 0.06em; }
.beat h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); margin: 12px 0 18px; }
.beat p { color: var(--fog); font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.45; max-width: 34ch; margin: 0; }
.beat .stat { display: block; margin-top: 20px; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.beat .stat small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.9rem; color: var(--fog); letter-spacing: 0; margin-top: 4px; }

.sentinel-rail { position: absolute; left: clamp(20px, 5vw, 40px); top: 50%; transform: translateY(-50%); width: 2px; height: 120px; background: var(--hairline); }
.sentinel-rail span { position: absolute; left: -1px; top: 0; width: 4px; height: 0; background: var(--acc); }
@media (max-width: 900px) { .sentinel-rail { display: none; } }

/* ── SERVICIOS — arquitectura en tres tiempos (theme-adaptive) ────────── */
.svc-group { margin-top: clamp(56px, 9vw, 120px); }
.svc-group:first-of-type { margin-top: clamp(44px, 7vw, 88px); }
.svc-group-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--hairline); margin-bottom: 28px; }
.svc-group-n { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--accent-ink); }
.svc-group-head h3 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0; letter-spacing: -0.03em; }
.svc-group-sub { color: var(--fg-dim); font-size: 0.92rem; }

.svc-list { display: grid; gap: 14px; }
.svc-list.one { grid-template-columns: minmax(0, 640px); }
.svc-list.two { grid-template-columns: repeat(2, 1fr); }
.svc-list.three { grid-template-columns: repeat(3, 1fr); }

.svc-item {
  display: grid; grid-template-rows: auto auto auto 1fr; gap: 4px;
  text-decoration: none; color: var(--fg);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 22px 22px 24px;
  transition: transform .18s var(--ease-out), border-color .18s ease, background-color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .svc-item:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--surface-hi); }
}
.svc-item .n { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--fg-dim); letter-spacing: 0.04em; }
.svc-item b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -0.02em; margin-top: 6px; color: var(--fg); }
.svc-item .r { font-weight: 600; color: var(--accent-ink); font-size: 0.86rem; margin: 4px 0 8px; }
.svc-item p { color: var(--fg-dim); font-size: 0.9rem; line-height: 1.45; margin: 0; }

.svc-item--flagship {
  grid-template-rows: auto auto auto auto 1fr;
  background: var(--acc); color: var(--btn-fg); border-color: var(--acc); margin-bottom: 14px;
}
.svc-item--flagship .n, .svc-item--flagship .r, .svc-item--flagship p { color: color-mix(in srgb, var(--btn-fg) 78%, transparent); }
.svc-item--flagship b { color: var(--btn-fg); }
.svc-item--flagship .flag { font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.svc-item--flagship b { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-top: 8px; }
@media (hover: hover) and (pointer: fine) {
  .svc-item--flagship:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--acc) 85%, var(--white)); border-color: var(--acc); }
}

/* ── CICLO ─────────────────────────────────────────────────────────────── */
.cycle { background: var(--carbon); color: var(--white); }
.cycle-pin { display: grid; place-items: center; }
.cycle-stage { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; width: 100%; }
.cycle-draw { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
.cycle-draw svg { width: 100%; height: auto; display: block; overflow: visible; }
.cycle-path-bg { fill: none; stroke: var(--hairline); stroke-width: 1; }
.cycle-path { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; }
.cycle-dot { fill: var(--carbon); stroke: var(--acc); stroke-width: 1.5; opacity: 0.4; }
.cycle-dot.on { fill: var(--acc); opacity: 1; }
html.reduce .cycle-dot, html.gsap-dead .cycle-dot { fill: var(--acc); opacity: 1; }
.cycle-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; line-height: 1; }
.cycle-num b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--acc-hi); font-variant-numeric: tabular-nums; }
.cycle-num i { display: block; font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 0.66rem; color: var(--fog); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; }
.cycle-steps { position: relative; }
.cycle-step { padding: 18px 0; border-top: 1px solid var(--hairline); opacity: 0.45; transition: opacity .3s ease; }
.cycle-step:last-child { border-bottom: 1px solid var(--hairline); }
.cycle-step.is-active { opacity: 1; }
html.reduce .cycle-step, html.gsap-dead .cycle-step { opacity: 1; }
.cycle-step b { font-family: var(--font-display); font-weight: 700; color: var(--acc-hi); font-size: 0.95rem; }
.cycle-step h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); margin: 4px 0 6px; }
.cycle-step p { color: var(--fog); font-size: 0.95rem; margin: 0; max-width: 40ch; }

/* ── OBTIENES (theme-adaptive) ────────────────────────────────────────── */
.gain {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px);
  align-items: center; padding-block: clamp(48px, 9vw, 104px);
  border-top: 1px solid var(--hairline);
}
.gain:first-child { border-top: 0; }
.gain-k { font-weight: 600; color: var(--accent-ink); font-size: 0.85rem; }
.gain h3 { font-size: clamp(1.8rem, 4vw, 3.4rem); margin: 10px 0 14px; color: var(--fg); }
.gain p { color: var(--fg-dim); margin: 0; font-size: 1.05rem; max-width: 40ch; }
.gain-fig { position: relative; aspect-ratio: 5 / 3; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); color: var(--fg-dim); }
.gain-fig svg { width: 100%; height: 100%; display: block; }

/* ── MISIÓN / QUIÉNES ──────────────────────────────────────────────────── */
.creed { background: var(--carbon); color: var(--white); }
.creed-line {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 6vw, 5rem); line-height: 1.08; color: var(--white);
  max-width: 17ch;
}
.creed-line .cw { display: inline-block; opacity: 0.14; }   /* JS lifts each word on scroll */
html.reduce .creed-line .cw, html.gsap-dead .creed-line .cw { opacity: 1 !important; }
.creed-line .dim { color: var(--fog); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); margin-top: clamp(48px, 9vw, 110px); }
.duo h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.duo p { color: var(--fg-dim); margin: 12px 0 0; }
.duo-div { grid-column: 1 / -1; height: 1px; background: var(--hairline); transform: scaleX(0); transform-origin: 0 50%; margin-bottom: 6px; }
html.reduce .duo-div, html.gsap-dead .duo-div { transform: scaleX(1); }

/* ── CIERRE ────────────────────────────────────────────────────────────── */
.close { background: var(--carbon); color: var(--white); text-align: center; }
.close-inner { max-width: 900px; margin: 0 auto; }
.close h2 { font-size: clamp(2.4rem, 8vw, 6.5rem); text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.94; max-width: 13ch; margin: 0 auto; }
.close p { color: var(--fog); max-width: 44ch; margin: var(--space-6) auto var(--space-8); }
.close-rule { width: min(280px, 60vw); height: 2px; background: var(--acc); margin: clamp(24px, 4vw, 40px) auto clamp(4px, 2vw, 16px); transform: scaleX(0); transform-origin: 50% 50%; }
html.reduce .close-rule, html.gsap-dead .close-rule { transform: scaleX(1); }

/* ══════════════════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════════════ */
.foot { background: var(--carbon-2); color: var(--fog); border-top: 1px solid var(--hairline); }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 56px clamp(20px, 5vw, 40px); display: flex; gap: 44px; flex-wrap: wrap; align-items: flex-start; }
.foot-col { display: flex; flex-direction: column; gap: 9px; font-size: 0.86rem; }
.foot-col h6 { font-size: 0.82rem; font-weight: 600; color: var(--white); margin: 0 0 3px; }
.foot-col a { color: var(--fog); transition: color .15s ease; }
.foot-col a:hover { color: var(--acc-hi); }
.foot-brand { flex: 1; min-width: 220px; }
.foot-brand p { font-size: 0.86rem; margin: 12px 0 0; max-width: 34ch; }
.foot-legal { width: 100%; border-top: 1px solid var(--hairline); padding-top: 18px; font-size: 0.74rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   Reveal fallback (used by shared site.js on OTHER pages)
   ══════════════════════════════════════════════════════════════════════ */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Scroll-scrubbed reveals — element opacity/offset tied to scroll position.
   home.js#initScrubReveal drives these; hidden only when JS + motion are on. */
html.js:not(.reduce) [data-sx-group] > *,
html.js:not(.reduce) [data-sx] { opacity: 0.12; will-change: opacity; }
html.gsap-dead [data-sx-group] > *, html.gsap-dead [data-sx] { opacity: 1 !important; transform: none !important; filter: none !important; }
/* grouped children — home.js staggers them in; also works via IO on other pages */
html.js:not(.reduce) [data-stagger] > * { opacity: 0; transform: translateY(20px); }
html.js:not(.reduce) [data-stagger].is-in > * {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* Hero intro — pure CSS (rAF-independent, survives a stalled GSAP ticker).
   Words rise a touch and fade — no clipping mask, so the caps never look shaved. */
html.js:not(.reduce) .hero h1 .word { transform: translateY(0.32em); opacity: 0; }
html.js:not(.reduce) .hero-sub,
html.js:not(.reduce) .hero-cta { opacity: 0; }
html.js:not(.reduce) .hero.intro-run h1 .word {
  animation: heroWord 0.9s var(--ease-expo) forwards;
  animation-delay: calc(0.15s + var(--wi, 0) * 0.07s);
}
html.js:not(.reduce) .hero.intro-run .hero-sub { animation: heroFade 0.7s var(--ease-out) 0.7s forwards; }
html.js:not(.reduce) .hero.intro-run .hero-cta { animation: heroFade 0.7s var(--ease-out) 0.85s forwards; }
@keyframes heroWord { to { transform: translateY(0); opacity: 1; } }
@keyframes heroFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

body[data-lang="en"] .L-es { display: none !important; }
body:not([data-lang="en"]) .L-en { display: none !important; }

@keyframes eq { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.5)} }
@keyframes eqSoft { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.72)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes tick { 0%{transform:translateX(0)} 100%{transform:translateX(-88px)} }

/* ══════════════════════════════════════════════════════════════════════════
   Reduced motion / transparency / contrast
   ══════════════════════════════════════════════════════════════════════ */
html.gsap-dead .pin-stage { min-height: 0; padding-block: clamp(60px, 12vw, 120px); }
html.gsap-dead .hero-scanline, html.gsap-dead .sentinel-rail { display: none; }
html.gsap-dead .sentinel-beats { min-height: 0; }
html.gsap-dead .beat { position: static; opacity: 1 !important; transform: none !important; margin-bottom: 40px; }
html.gsap-dead .sv-node { opacity: 1; }
html.gsap-dead .creed-line .cw,
html.gsap-dead .close p, html.gsap-dead .close .hero-cta,
html.gsap-dead [data-stagger] > * { opacity: 1 !important; transform: none !important; }

/* GSAP transforms on SVG shapes need a local box */
.gain-fig svg rect, .gain-fig svg circle { transform-box: fill-box; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > *, [data-sx-group] > *, [data-sx] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hero h1 .word, .hero-sub, .hero-cta, .hero-kicker, .hero-kicker .kline { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pin-stage { min-height: 0; padding-block: clamp(60px, 12vw, 120px); }
  .sentinel-beats { min-height: 0; }
  .beat { position: static; opacity: 1 !important; transform: none !important; margin-bottom: 40px; }
  .sv-node { opacity: 1; }
  .creed-line .cw, .close p, .close .hero-cta { opacity: 1 !important; transform: none !important; }
  .cycle-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  #loader { display: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
/* Lenis smooth-scroll (studio-freight) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
@media (prefers-reduced-transparency: reduce) {
  .topnav.is-solid { background: var(--carbon); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topnav { mix-blend-mode: normal; }
}
@media (prefers-contrast: more) {
  .s-dark { --fg-dim: #c7c4b9; --hairline: color-mix(in srgb, var(--white) 32%, transparent); }
  .s-light { --fg-dim: #45423a; --hairline: color-mix(in srgb, var(--ink) 32%, transparent); }
  .topnav { mix-blend-mode: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════ */
.nav-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nav-toggle-btn { display: none; }

@media (max-width: 900px) {
  .cycle-stage, .duo, .gain, .sentinel-inner { grid-template-columns: 1fr; }
  .gain-fig { order: -1; }
  .svc-list.three { grid-template-columns: repeat(2, 1fr); }

  /* Mobile: no pinning — sections flow normally, JS reveals per element */
  .hero-scanline { display: none; }
  .sentinel .pin-stage, .cycle-pin { min-height: 0; padding-block: clamp(64px, 15vw, 120px); }
  .sentinel-viz { order: -1; max-width: 260px; }
  .sentinel-beats { min-height: 0; }
  .beat { position: static; inset: auto; margin-bottom: clamp(40px, 10vw, 68px); }
  .beat:last-child { margin-bottom: 0; }
  .cycle-draw { max-width: 240px; margin-bottom: 40px; }

  /* mobile reveals — CSS transitions (compositor-driven, survive a stalled ticker) */
  html.js:not(.reduce) .sentinel .beat { opacity: 0; transition: opacity .6s var(--ease-out); }
  html.js:not(.reduce) .sentinel .beat.is-in { opacity: 1; }
  html.js:not(.reduce) .sv-node { transition: fill .45s ease, opacity .45s ease; }
  html.gsap-dead .sentinel .beat { opacity: 1; }
}
@media (max-width: 620px) {
  .svc-list.two, .svc-list.three { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle-btn { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; cursor: pointer; margin-left: auto; }
  .nav-toggle-btn span { display: block; width: 100%; height: 2px; background: currentColor; }
  .topnav { mix-blend-mode: normal; }
  .nav-open .nav-links {
    display: flex; position: fixed; inset: 0; z-index: 59; flex-direction: column;
    align-items: flex-start; justify-content: center; gap: 22px;
    background: var(--carbon); padding: 40px; margin: 0;
  }
  .nav-open .nav-links a.navitem { font-size: 1.4rem; opacity: 1; color: var(--white); }
  .svc-list.one { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Inner pages  (servicios · osaas · planes · contacto · academia)
   Same palette + type + reveal system as the homepage, without the pinned
   scroll choreography.  site.js drives .is-solid nav + [data-reveal]/[data-stagger].
   ══════════════════════════════════════════════════════════════════════ */
.topnav--page { mix-blend-mode: normal; background: color-mix(in srgb, var(--carbon) 82%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--white) 9%, transparent); }

.page { padding-top: 66px; }
.page main, main.page { display: block; }

.phero { padding: clamp(48px, 9vw, 120px) 0 clamp(28px, 5vw, 60px); }
.pback { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc-hi); margin-bottom: 22px; }
.phero h1 { font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: 0.96; letter-spacing: -0.04em;
  text-transform: uppercase; margin: 0; }
.phero h1 .hl { color: var(--acc-hi); }
.phero-lead { color: var(--fog); font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.5;
  max-width: 62ch; margin: clamp(18px, 3vw, 30px) 0 0; }

.psection { padding: clamp(52px, 9vw, 120px) 0; border-top: 1px solid var(--hairline); }
.psection--plain { border-top: 0; padding-top: clamp(8px, 2vw, 24px); }
.psection--dark { background: var(--carbon-2); }
.psection--cta { text-align: center; border-top: 1px solid var(--hairline); }
.psection-head { margin-bottom: clamp(30px, 5vw, 56px); }
.sec-n { font-family: var(--font-display); font-weight: 700; color: var(--acc-hi); font-size: 0.95rem; display: block; }
.psection-head h2 { font-size: clamp(1.8rem, 4.4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.03em;
  text-transform: uppercase; margin: 14px 0 0; max-width: 24ch; }
.psection-head p { color: var(--fog); font-size: 1.02rem; line-height: 1.55; max-width: 62ch; margin: 14px 0 0; }
.prule { height: 1px; background: var(--hairline); border: 0; margin: 12px 0 0; }

.pgrid { display: grid; gap: 16px; }
.pgrid.c2 { grid-template-columns: repeat(2, 1fr); }
.pgrid.c3 { grid-template-columns: repeat(3, 1fr); }
.pgrid.c4 { grid-template-columns: repeat(4, 1fr); }

.pcard { display: flex; flex-direction: column; gap: 5px; padding: 22px 22px 24px;
  background: var(--carbon-2); border: 1px solid var(--hairline); border-radius: 12px;
  color: var(--white); text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s var(--ease-out); }
a.pcard:hover { border-color: color-mix(in srgb, var(--acc) 55%, var(--hairline)); background: var(--carbon-3); }
.pcard .k { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-hi); }
.pcard b { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; line-height: 1.15; letter-spacing: -0.02em; }
.pcard p { color: var(--fog); font-size: 0.92rem; line-height: 1.5; margin: 4px 0 0; flex: 1; }
.pcard .go { font-size: 0.8rem; font-weight: 600; color: var(--acc-hi); margin-top: 12px; }
.pcard--accent { background: var(--acc); border-color: var(--acc); color: var(--btn-fg); }
.pcard--accent .k, .pcard--accent .go { color: color-mix(in srgb, var(--btn-fg) 72%, transparent); }
.pcard--accent p { color: color-mix(in srgb, var(--btn-fg) 82%, transparent); }
a.pcard--accent:hover { background: color-mix(in srgb, var(--acc) 88%, var(--white)); border-color: transparent; }

.psteps { display: grid; }
.pstep { display: grid; grid-template-columns: 56px 1fr; gap: 4px 18px; padding: 22px 0;
  border-top: 1px solid var(--hairline); align-items: baseline; }
.pstep:last-child { border-bottom: 1px solid var(--hairline); }
.pstep .n { font-family: var(--font-display); font-weight: 700; color: var(--acc-hi); font-size: 1.05rem; }
.pstep h3 { font-size: clamp(1.1rem, 2vw, 1.45rem); margin: 0; text-transform: uppercase; letter-spacing: -0.02em; }
.pstep p { grid-column: 2; color: var(--fog); font-size: 0.94rem; line-height: 1.55; margin: 6px 0 0; max-width: 64ch; }

.ptiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.ptier { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--hairline);
  border-radius: 14px; background: var(--carbon-2); }
.ptier--featured { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 9%, var(--carbon-2)); }
.ptier-top { display: flex; align-items: center; gap: 10px; }
.ptier .lvl { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc-hi); }
.ptier .badge { margin-left: auto; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--acc); color: var(--btn-fg); padding: 3px 8px; border-radius: 3px; }
.ptier h3 { font-size: clamp(1.7rem, 3vw, 2.1rem); margin: 12px 0 0; text-transform: uppercase; letter-spacing: -0.02em; }
.ptier .aud { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--acc-hi); margin: 8px 0 0; }
.ptier ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ptier li { display: flex; gap: 10px; font-size: 0.9rem; line-height: 1.45; color: var(--fog); }
.ptier li::before { content: ""; width: 6px; height: 6px; margin-top: 6px; background: var(--acc); flex: none; }
.ptier li a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.ptier .btn { margin-top: 22px; width: 100%; }

.pchips { display: flex; flex-wrap: wrap; gap: 10px; }
.pchip { font-size: 0.8rem; padding: 6px 12px; border-radius: 3px; border: 1px solid var(--hairline); color: var(--fog); }
.pchip--accent { background: color-mix(in srgb, var(--acc) 16%, transparent); border-color: transparent; color: var(--acc-hi); }

.pform { display: flex; flex-direction: column; gap: 18px; padding: 30px 28px;
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--carbon-2); }
.pform-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 46px); align-items: start; }
.pform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pform label { display: block; }
.pform .field-l { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 6px; color: var(--white); }
.pform-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pform-status { font-size: 0.85rem; font-weight: 600; color: var(--acc-hi); }
.pcontact-lines { display: flex; flex-direction: column; gap: 9px; font-size: 0.95rem; color: var(--fog); }
.pcontact-lines a { color: var(--white); }
.plive { display: inline-flex; align-items: center; gap: 9px; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--fog); }
.plive i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
html.js:not(.reduce) .plive i { animation: blink 1.8s ease-in-out infinite; }

.pdetail { max-width: 760px; }
.pdetail-block { padding: 24px 0; border-top: 1px solid var(--hairline); }
.pdetail-block:first-child { border-top: 0; }
.pdetail-block h2 { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--acc-hi); margin: 0 0 8px; }
.pdetail-block p { font-size: 1rem; line-height: 1.65; color: var(--white); margin: 0; }
.pquote { margin-top: 14px; padding: 14px 18px; border-left: 2px solid var(--acc);
  background: color-mix(in srgb, var(--acc) 8%, transparent); font-style: italic; color: var(--fog); }
.pnote { margin-top: 40px; padding: 24px 26px; border: 1px solid var(--hairline);
  border-radius: 12px; background: var(--carbon-3); }
.pnote p { font-size: 0.92rem; color: var(--fog); margin: 0 0 16px; }
.pnote-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.post-body { max-width: 720px; }
.post-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; letter-spacing: -0.02em; margin: 40px 0 12px; }
.post-body h3 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: -0.01em; margin: 30px 0 10px; }
.post-body h4 { font-size: 1.1rem; margin: 24px 0 8px; }
.post-body p { font-size: 1.02rem; line-height: 1.75; margin: 0 0 18px; color: var(--white); }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; font-size: 1.02rem; line-height: 1.75; color: var(--white); }
.post-body li { margin-bottom: 6px; }
.post-body a { color: var(--acc-hi); text-decoration: underline; text-underline-offset: 3px; }

.acad-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.acad-tab { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 8px 15px; border: 1px solid var(--hairline); border-radius: 3px; color: var(--fog); }
.acad-tab[aria-current="true"] { background: var(--acc); border-color: var(--acc); color: var(--btn-fg); }
.acad-cover { aspect-ratio: 16 / 9; background: var(--carbon-3); overflow: hidden; border-radius: 10px 10px 0 0; }
.acad-cover img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .pgrid.c3, .pgrid.c4 { grid-template-columns: repeat(2, 1fr); }
  .ptiers, .pform-layout { grid-template-columns: 1fr; }
  .pform-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pgrid.c2, .pgrid.c3, .pgrid.c4 { grid-template-columns: 1fr; }
  .pstep { grid-template-columns: 1fr; }
  .pstep p { grid-column: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Legacy components (unmigrated pages) — retokenized
   ══════════════════════════════════════════════════════════════════════ */
.blueprint { position: relative; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.blueprint > .corner { display: none; }
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--hairline); }
.card-kicker { font-size: 0.72rem; color: var(--accent-ink); }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.12; }
.card-body { margin: 0; font-size: 0.92rem; color: var(--fg-dim); flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--fg-dim); }
.tag { display: inline-flex; align-items: center; font-size: 0.72rem; padding: 3px 10px; border-radius: 2px; }
.tag-accent { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--accent-ink); }
.tag-neutral { background: var(--surface-hi); color: var(--fg-dim); }
.tag-outline { border: 1px solid var(--accent); color: var(--accent-ink); }
.field > label, .field > span:first-child { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 6px; color: var(--fg-dim); }
.input { width: 100%; min-height: 46px; padding: 12px 14px; font: inherit; font-size: 0.95rem; color: var(--fg); caret-color: var(--accent); background: color-mix(in srgb, var(--bg) 55%, var(--surface)); border: 1px solid var(--hairline); border-radius: var(--radius-sm); transition: border-color .16s ease; }
.input::placeholder { color: var(--fg-dim); }
.input:focus-visible { border-color: var(--accent); outline: none; }
textarea.input { min-height: 120px; resize: vertical; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { text-align: left; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-dim); padding: var(--space-2); border-bottom: 1px solid var(--hairline); }
.table td { padding: var(--space-2); border-bottom: 1px solid var(--hairline); }
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgba(4,4,5,0.72); }
.dialog { width: min(440px,100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.dialog-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.dialog-body { font-size: 0.92rem; color: var(--fg-dim); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.nav a { color: inherit; text-decoration: none; font-size: 0.9rem; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--accent-ink); }
.nav-link { transition: color .15s ease; } .nav-link:hover { color: var(--accent-ink) !important; }
.footer-link { transition: color .15s ease; } .footer-link:hover { color: var(--accent-ink) !important; }
.contact-link { color: inherit; text-decoration: none; } .contact-link:hover { color: var(--accent-ink); }
.btn-secondary.legacy { border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   Chat widget — retokenized
   ══════════════════════════════════════════════════════════════════════ */
.balam-chat { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-family: var(--font-body); }
.balam-chat-toggle { height: 50px; padding: 0 18px 0 14px; border: 1px solid var(--acc); background: var(--carbon-2); color: var(--white); cursor: pointer; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); transition: border-color .16s ease, background-color .16s ease; }
.balam-chat-toggle:hover { background: var(--carbon-3); border-color: var(--acc-hi); }
.balam-chat-toggle-icon { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; }
.balam-chat-toggle-icon i { width: 3px; height: 6px; background: var(--fog); display: block; }
.balam-chat-toggle-icon i:nth-child(2){height:10px} .balam-chat-toggle-icon i:nth-child(3){height:14px}
.balam-chat-toggle-icon i.accent { height: 18px; background: var(--acc); }
.balam-chat-toggle-icon i:nth-child(5){height:14px} .balam-chat-toggle-icon i:nth-child(6){height:10px} .balam-chat-toggle-icon i:nth-child(7){height:6px}
.balam-chat-toggle-label { font-size: 0.8rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.balam-chat-toggle-close { display: none; font-size: 24px; line-height: 1; }
.balam-chat.is-open .balam-chat-toggle-icon, .balam-chat.is-open .balam-chat-toggle-label { display: none; }
.balam-chat.is-open .balam-chat-toggle-close { display: block; }
.balam-chat.is-open .balam-chat-toggle { padding: 0 16px; }
@keyframes balam-chat-pulse { 0%,100%{box-shadow:var(--shadow-lg),0 0 0 0 color-mix(in srgb,var(--acc) 55%,transparent)} 50%{box-shadow:var(--shadow-lg),0 0 0 8px color-mix(in srgb,var(--acc) 0%,transparent)} }
.balam-chat.callout-visible .balam-chat-toggle { animation: balam-chat-pulse 1.8s ease-out 3; }
.balam-chat-callout[hidden] { display: none; }
.balam-chat-callout { position: absolute; right: 0; bottom: 72px; width: 240px; max-width: calc(100vw - 48px); background: var(--acc); color: #f4f2ec; box-shadow: var(--shadow-lg); padding: 12px 30px 12px 14px; font-size: 0.82rem; line-height: 1.4; font-weight: 600; cursor: pointer; animation: balam-chat-callout-in .25s var(--ease-out); }
.balam-chat-callout::after { content: ""; position: absolute; right: 22px; bottom: -7px; width: 12px; height: 12px; background: var(--acc); transform: rotate(45deg); }
.balam-chat-callout-close { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: #f4f2ec; font-size: 15px; line-height: 1; cursor: pointer; padding: 4px; opacity: .7; }
.balam-chat-callout-close:hover { opacity: 1; }
@keyframes balam-chat-callout-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.balam-chat-panel[hidden] { display: none; }
.balam-chat-panel { position: absolute; right: 0; bottom: 64px; width: 360px; max-width: calc(100vw - 32px); height: min(520px, 70dvh); background: var(--carbon-2); color: var(--white); border: 1px solid var(--acc); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.balam-chat-header { padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent); flex: none; }
.balam-chat-title-row { display: flex; align-items: center; gap: 8px; }
.balam-chat-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.balam-chat-badge { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: .06em; color: #f4f2ec; background: var(--acc); padding: 2px 6px; line-height: 1.4; }
.balam-chat-subtitle { display: block; font-size: 0.75rem; color: var(--fog); margin-top: 2px; }
.balam-chat-quick { padding: 8px 16px; border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent); flex: none; }
.balam-chat-quick-btn { width: 100%; background: none; border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); color: var(--fog); font-size: 0.75rem; padding: 7px 10px; cursor: pointer; font-family: var(--font-body); transition: border-color .16s ease, color .16s ease; }
.balam-chat-quick-btn:hover { border-color: var(--acc); color: var(--acc-hi); }
.balam-chat-messages { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.balam-chat-msg { max-width: 85%; padding: 9px 12px; font-size: 0.9rem; line-height: 1.5; border-radius: 10px; word-wrap: break-word; }
.balam-chat-msg a { color: var(--acc-hi); }
.balam-chat-msg-user { align-self: flex-end; background: var(--acc); color: #f4f2ec; }
.balam-chat-msg-assistant { align-self: flex-start; background: var(--carbon-3); color: var(--white); }
.balam-chat-msg-assistant.is-typing { color: var(--fog); }
.balam-chat-msg-assistant.is-typing::after { content: "…"; animation: balam-chat-blink 1.1s infinite; }
@keyframes balam-chat-blink { 0%,100%{opacity:.3} 50%{opacity:1} }
.balam-chat-form { flex: none; display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent); background: var(--carbon-2); }
.balam-chat-input { flex: 1; min-width: 0; background: transparent; color: var(--white); border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); padding: 9px 10px; font-size: 0.9rem; font-family: var(--font-body); }
.balam-chat-input::placeholder { color: var(--fog); }
.balam-chat-input:focus { outline: none; border-color: var(--acc); }
.balam-chat-send { flex: none; border: 0; background: var(--acc); color: #f4f2ec; font-weight: 600; font-size: 0.82rem; padding: 0 14px; cursor: pointer; }
.balam-chat-send:disabled { opacity: .55; cursor: default; }
.balam-chat-lead { align-self: stretch; display: flex; flex-direction: column; gap: 8px; background: var(--carbon-3); border: 1px solid color-mix(in srgb, var(--white) 16%, transparent); padding: 12px; border-radius: 10px; font-size: 0.82rem; }
.balam-chat-lead-title { font-weight: 600; color: var(--white); }
.balam-chat-lead-field { display: flex; flex-direction: column; gap: 4px; }
.balam-chat-lead-label { font-size: 0.68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fog); }
.balam-chat-lead-input { background: transparent; color: var(--white); border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); padding: 7px 9px; font-size: 0.8rem; font-family: var(--font-body); resize: vertical; }
.balam-chat-lead-input:focus { outline: none; border-color: var(--acc); }
textarea.balam-chat-lead-input { min-height: 56px; }
.balam-chat-lead-status { margin: 0; font-size: 0.75rem; color: var(--fog); min-height: 16px; }
.balam-chat-lead-status.is-error { color: #ff8a7a; }
.balam-chat-lead-status.is-success { color: var(--acc-hi); }
.balam-chat-lead-actions { display: flex; gap: 8px; justify-content: flex-end; }
.balam-chat-lead-cancel { border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); background: transparent; color: var(--fog); font-size: 0.75rem; padding: 7px 12px; cursor: pointer; }
.balam-chat-lead-send { border: 0; background: var(--acc); color: #f4f2ec; font-weight: 600; font-size: 0.75rem; padding: 7px 12px; cursor: pointer; }
.balam-chat-lead-cancel:disabled, .balam-chat-lead-send:disabled { opacity: .55; cursor: default; }
@media (max-width: 480px) {
  .balam-chat { right: 14px; bottom: 14px; }
  .balam-chat-panel { position: fixed; left: 14px; right: 14px; bottom: 80px; width: auto; max-width: none; height: 420px; }
  .balam-chat-callout { position: fixed; left: 14px; right: 14px; bottom: 80px; width: auto; max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Admin panel — a light-surface app on white cards. The public site flipped
   the shared --color-* aliases and `body` to the dark palette; the admin
   pages (functions/admin/*) opt back out here so their text stays readable.
   Scoped by the shell markup every admin page carries, so it can't touch
   the public site.
   ══════════════════════════════════════════════════════════════════════ */
body:has(.admin-topbar),
body:has(.admin-shell) {
  background: #eceef0;
  color: #1b1c1e;
  --bg: #eceef0;
  --fg: #1b1c1e;
  --fg-dim: #5b5e66;
  --surface: #ffffff;
  --surface-hi: #f4f6f8;
  --hairline: #d3d7dd;
  --acc: #b57f10;
  --acc-hi: #8a6109;
  --acc-lo: #f6eccf;
  --accent: #b57f10;
  --accent-ink: #8a6109;
  --btn-fg: #ffffff;
  --color-bg: #eceef0;
  --color-surface: #ffffff;
  --color-text: #1b1c1e;
  --color-divider: #dbdee3;
  --color-neutral-100: #eceef0;
  --color-neutral-200: #e2e5ea;
  --color-neutral-300: #dbdee3;
  --color-neutral-600: #5b5e66;
  --color-neutral-800: #3a3c42;
  --color-neutral-900: #14151a;
  --color-accent: #b57f10;
  --color-accent-700: #8a6109;
}
/* the top bar is its own dark component — keep its accent bright */
body:has(.admin-topbar) .admin-topbar,
body:has(.admin-topbar) .globe-callout,
body:has(.admin-topbar) .globe-ticker {
  --color-accent: #f2b31c;
}