/* ============================================================================
   other-ai.com · Inicio — 'Siete giros de luz'
   Design tokens (OtherAI design system) + page styles. Static site: no runtime
   framework. Motion: GSAP 3 + ScrollTrigger + Lenis (single smooth-scroll engine).
   ============================================================================ */
/* OtherAI color system.
   Core identity is black & white. Five vibrant accents — one per pillar:
   Signal Blue (high tech), Inclusion Magenta (inclusion), Equity Gold
   (education equity), Access Green (accessibility), Care Coral (charity). */
:root {
  /* ---- Core: ink & paper ---- */
  --ink: #0B0B0C;
  --paper: #FFFFFF;

  /* Neutral scale (warm-free, pure grays) */
  --gray-900: #0B0B0C;
  --gray-800: #232327;
  --gray-700: #3C3C42;
  --gray-600: #55555C;
  --gray-500: #75757E;
  --gray-400: #9B9BA3;
  --gray-300: #C6C6CC;
  --gray-200: #E4E4E8;
  --gray-100: #F2F2F4;
  --gray-050: #F8F8F9;

  /* ---- Pillar accents ---- */
  --blue: #2B5BF7;        /* Signal Blue — high tech */
  --blue-deep: #1B3FC4;
  --blue-tint: #E3EAFE;

  --magenta: #E0379B;     /* Inclusion Magenta — inclusion */
  --magenta-deep: #B02076;
  --magenta-tint: #FBE4F2;

  --gold: #FFB81C;        /* Equity Gold — education equity */
  --gold-deep: #B97900;
  --gold-tint: #FFF1D1;

  --green: #00A878;       /* Access Green — accessibility */
  --green-deep: #007D59;
  --green-tint: #DCF5EC;

  --coral: #FF5A3C;       /* Care Coral — charity & community care */
  --coral-deep: #D93A20;
  --coral-tint: #FFE5DF;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--paper);
  --surface-card: var(--paper);
  --surface-sunken: var(--gray-050);
  --surface-inverse: var(--ink);

  --text-body: var(--ink);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --text-inverse: var(--paper);
  --text-link: var(--blue-deep);

  --border-strong: var(--ink);
  --border-default: var(--gray-300);
  --border-subtle: var(--gray-200);

  --accent-primary: var(--ink);          /* primary actions are ink */
  --accent-interactive: var(--blue);     /* links, focus, selection */
  --focus-ring: var(--blue);

  --status-info: var(--blue);
  --status-success: var(--green-deep);
  --status-warning: var(--gold-deep);
  --status-danger: var(--coral-deep);
  --status-info-bg: var(--blue-tint);
  --status-success-bg: var(--green-tint);
  --status-warning-bg: var(--gold-tint);
  --status-danger-bg: var(--coral-tint);
}

/* OtherAI typography tokens. */
:root {
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Scale — 1.25 modular-ish, tuned by hand */
  --text-display-xl: 64px;   /* hero statements */
  --text-display: 48px;      /* page heroes */
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 22px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-caption: 13px;

  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.55;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-caps: 0.08em;     /* mono overlines / labels */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* OtherAI spacing & radius tokens — 4px base grid. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 6px;     /* tags, checkboxes */
  --radius-md: 10px;    /* inputs, buttons (rect) */
  --radius-lg: 16px;    /* cards, dialogs */
  --radius-xl: 24px;    /* feature panels */
  --radius-pill: 999px; /* pills, primary buttons, avatars */

  --container-max: 1200px;
  --container-pad: 24px;
}

/* OtherAI elevation, borders, motion. */
:root {
  /* Shadows — soft, neutral, never colored */
  --shadow-card: 0 1px 2px rgba(11, 11, 12, 0.06), 0 4px 12px rgba(11, 11, 12, 0.06);
  --shadow-raised: 0 2px 4px rgba(11, 11, 12, 0.08), 0 12px 32px rgba(11, 11, 12, 0.10);
  --shadow-overlay: 0 8px 16px rgba(11, 11, 12, 0.10), 0 24px 64px rgba(11, 11, 12, 0.18);

  /* Hairlines */
  --hairline: 1px solid var(--border-subtle);
  --hairline-strong: 1.5px solid var(--ink);

  /* Focus */
  --focus-outline: 2px solid var(--focus-ring);
  --focus-offset: 2px;

  /* Motion — quick, confident ease-outs. No bounces. */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
}

/* Minimal base element styles for OtherAI surfaces. */
body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-bold);
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

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

::selection {
  background: var(--blue);
  color: var(--paper);
}

/* OtherAI component classes — consumed by the React primitives. */

/* ---------- Buttons ---------- */

/* ============================================================================
   0. Page-level tokens & registered properties
   ============================================================================ */
@property --wedge-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --split       { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

:root {
  --apex: 49.98% 50.61%;           /* the "A" aperture: pivot of the light */
  --mask-mark: url("brand-mark.png");   /* the logo silhouette (disc body) */
  --mask-disc: url("brand-disc.png");   /* the solid disc */
  --nav-h: 64px;
  --folio-h: 28px;
  --lit: var(--gray-500);          /* the one accent the light is on right now */
  --lit-deep: var(--gray-600);
  --gold-text: #8A5A00;            /* AA-safe gold for small text on paper (gold-deep is 3.6:1) */
  --coral-text: #A8290F;           /* AA-safe coral for small text on tints */
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
}
html { scroll-padding-top: calc(var(--nav-h) + var(--folio-h) + 8px); }
/* lenis.css (inlined) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { transition: background-color .5s var(--ease-out); }
html[data-theme="ink"] body { background: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--radius-md);
  font-weight: var(--weight-semibold); text-decoration: none;
}
.skip:focus-visible { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Type helpers ---- */
.overline {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px;
}
.overline--lit { color: var(--lit-deep); }
.h-chapter {
  font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.025em;
  font-weight: var(--weight-bold); text-wrap: balance; margin: 0;
}
.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--gray-700); text-wrap: pretty; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.rule { height: 1px; background: var(--border-subtle); }

/* ---- Buttons (OtherAI DS) ---- */
.oa-btn {
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 15px;
  height: 44px; padding: 0 22px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.oa-btn:active { transform: translateY(0.5px); }
.oa-btn:disabled, .oa-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.oa-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.oa-btn--lg { height: 52px; padding: 0 28px; font-size: 17px; }
.oa-btn--primary { background: var(--ink); color: var(--paper); }
.oa-btn--primary:hover:not(:disabled) { background: var(--gray-800); }
.oa-btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.oa-btn--secondary:hover:not(:disabled) { background: var(--gray-050); }
.oa-btn--paper { background: var(--paper); color: var(--ink); }
.oa-btn--paper:hover:not(:disabled) { background: var(--gray-100); }
.oa-btn--outline-paper { background: transparent; color: var(--paper); border-color: var(--paper); }
.oa-btn--outline-paper:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.oa-btn svg { width: 18px; height: 18px; flex: none; }
.oa-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lit); flex: none; }

/* ============================================================================
   1. Preloader — "la primera luz" (paper, the loader IS the page)
   ============================================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 120; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
html.no-js .preloader { display: none; }
.preloader .mark { width: min(400px, 60vw); cursor: default; --mark-fill: var(--paper); --wedge-cut: var(--paper); --hero-bg: var(--ink); --paint: var(--paper); }
.preloader__line { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gray-400); }
.preloader__bar { width: 240px; height: 1px; background: rgba(255,255,255,.18); overflow: hidden; }
.preloader__bar i { display: block; height: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.preloader__ghost { position: fixed; z-index: 121; pointer-events: none; will-change: transform; }

/* ============================================================================
   2. Nav + running folio
   ============================================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--nav-h);
  background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--border-subtle);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out);
}
html[data-theme="ink"] .site-nav { background: var(--ink); color: var(--paper); border-bottom-color: rgba(255,255,255,0.14); }
.site-nav__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); height: 100%; display: flex; align-items: center; gap: var(--space-6); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 21px; letter-spacing: var(--tracking-display); color: inherit; text-decoration: none; }
.brand b { font-weight: var(--weight-bold); }
.brand-mark { width: 30px; height: 31px; flex: none; background: currentColor; -webkit-mask: var(--mask-mark) center / contain no-repeat; mask: var(--mask-mark) center / contain no-repeat; }
.site-nav__links { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.site-nav__link { font-size: 15px; font-weight: var(--weight-semibold); color: inherit; opacity: .78; text-decoration: none; transition: opacity var(--duration-fast) var(--ease-out); }
.site-nav__link:hover { opacity: 1; }
.site-nav__link[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--lit); }
html[data-theme="ink"] .site-nav .oa-btn--primary { background: var(--paper); color: var(--ink); }
.site-nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; border-radius: var(--radius-md); cursor: pointer; align-items: center; justify-content: center; }
.site-nav__toggle svg { width: 26px; height: 26px; }
.site-nav__sheet { display: none; }

.folio {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 89; height: var(--folio-h);
  background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--border-subtle);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out);
}
html[data-theme="ink"] .folio { background: var(--ink); color: var(--paper); border-bottom-color: rgba(255,255,255,0.14); }
.folio__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); height: 100%; display: flex; align-items: center; gap: 24px; }
.folio__text { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folio__rule { margin-left: auto; width: min(260px, 30vw); height: 1px; background: currentColor; opacity: .18; position: relative; }
.folio__rule i { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left; opacity: 1; }
html.no-js .folio { display: none; }
main { padding-top: calc(var(--nav-h) + var(--folio-h)); }
html.no-js main { padding-top: var(--nav-h); }

/* ============================================================================
   3. Hero — Capítulo 01 · Portada (pinned; eight turns of the light)
   ============================================================================ */
.hero {
  --hero-bg: var(--ink); --hero-fg: var(--paper); --hero-muted: var(--gray-400);
  --mark-fill: var(--paper); --wedge-cut: var(--paper);
  --text-grad: linear-gradient(104deg, var(--paper), var(--gray-400));
  position: relative; background: var(--hero-bg); color: var(--hero-fg);
  min-height: calc(100vh - var(--nav-h) - var(--folio-h)); min-height: calc(100svh - var(--nav-h) - var(--folio-h));
  display: flex; align-items: center; overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; width: 100%; padding-top: 24px; padding-bottom: 72px; }
.hero__copy { display: grid; }
.hero-case { grid-area: 1 / 1; max-width: 860px; }
html.js .hero-case:not(.is-live) { visibility: hidden; }
html.no-js .hero__copy { display: block; }
html.no-js .hero-case { margin: 0 0 72px; }
/* the copy carries the beam's palette: a clipped gradient, one per pillar (the original text mask) */
.hero-case .overline, .hero-case .lede, .hero-case .hero-title .w > i { background-image: var(--text-grad); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
html.no-js .hero-case .hero-title { background-image: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-case .lede { opacity: .92; }
.hero-case .hero-title {
  font-size: clamp(40px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.03em;
  font-weight: var(--weight-bold); text-wrap: balance; margin: 0;
}
.hero-case[data-case="default"] .hero-title, .hero-case[data-case="spectrum"] .hero-title { font-size: clamp(34px, 4.3vw, 62px); }
.hero-case .hero-title em { font-style: italic; }
.hero-case .lede { margin-top: 22px; max-width: 44ch; }
.hero-case .ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-case .oa-btn--primary { background: var(--paper); color: var(--ink); }
.hero-case .oa-btn--primary:hover { background: var(--gray-100); }
.hero-case .oa-btn--secondary { background: transparent; color: var(--paper); border-color: var(--paper); }
.hero-case .oa-btn--secondary:hover { background: rgba(255,255,255,.1); }
.hero-case .turn { margin-top: 26px; width: 120px; height: 2px; background: color-mix(in srgb, currentColor 14%, transparent); position: relative; }
.hero-case .turn i { position: absolute; inset: 0; background: var(--lit); transform: scaleX(0); transform-origin: left; }
html.no-js .hero-case .turn { display: none; }

/* --- Split words (masked) --- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > i { display: inline-block; font-style: inherit; }
.w.w--em > i { font-style: italic; }

/* --- The mark & its light --- */
.hero__stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-right: clamp(0px, 9.5vw, 150px); }
.mark {
  all: unset; box-sizing: border-box; position: relative; display: block;
  width: min(380px, 100%); aspect-ratio: 1000 / 1040; cursor: crosshair;
  --paint: var(--paper); --paint-next: var(--paper);
  --wedge-angle: 0deg; --split: 0deg;
}
.mark:focus-visible { outline: var(--focus-outline); outline-offset: 8px; border-radius: 50%; }
.mark__layer { position: absolute; inset: 0; display: block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.m-mark { -webkit-mask-image: var(--mask-mark); mask-image: var(--mask-mark); }
.m-disc { -webkit-mask-image: var(--mask-disc); mask-image: var(--mask-disc); }
.mark__base { background: var(--mark-fill); z-index: 1; }
/* whole-image layer (hover-inverse and the spectrum climax) */
.mark__rest { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .5s var(--ease-cine); }
.mark__rest .r-fill { background: var(--paint); background-size: cover; background-position: center; }
.mark.is-inverse .mark__rest { opacity: 1; }
/* the light: a 60° wedge that rotates by transform; children counter-rotate */
.mark__wedge {
  position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none;
  -webkit-clip-path: polygon(50% 50.6%, 164% 240%, -64% 240%); clip-path: polygon(50% 50.6%, 164% 240%, -64% 240%);
  transform: rotate(var(--wedge-angle)); transform-origin: var(--apex); will-change: transform;
}
.mark__wedge > .mark__layer { transform: rotate(calc(-1 * var(--wedge-angle))); transform-origin: var(--apex); transition: opacity .35s var(--ease-cine); }
.w-cut  { background: var(--wedge-cut); }                                   /* cutouts inside the light */
/* Tinted liquid-glass material for the photo beats (original): the disc under the cog carries the
   photo, a blur + displacement, the pillar colour at half opacity and a rim shine; the cog paints the
   same photo untinted on the mark's body, so the negative space reads as tinted glass. */
.w-glass { display: none; }
.mark[data-paint="photo"] .w-cut { display: none; }
.mark[data-paint="photo"] .w-glass { display: block; }
.w-glass > i { position: absolute; inset: 0; display: block; }
.w-glass .lg-photo { z-index: 0; background: var(--paper) var(--paint) center / cover; }
.w-glass .lg-effect { z-index: 1; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); filter: url(#glass-distortion); }
.w-glass .lg-tint { z-index: 2; background: rgba(var(--tint, 43,91,247), 0.5); transition: background 400ms cubic-bezier(0.175, 0.885, 0.32, 1.1); }
.w-glass .lg-shine { z-index: 3; background: radial-gradient(ellipse 46% 42% at 36% 30%, rgba(255,255,255,0.42), transparent 56%), radial-gradient(ellipse 50% 48% at var(--apex), transparent 82%, rgba(255,255,255,0.5) 95%, transparent 100%); }
.w-cog  { background: var(--paint); background-size: cover; background-position: center; }  /* the body, lit */
.w-cog > i { display: none; position: absolute; inset: 0; transform: rotate(var(--wedge-angle)); transform-origin: var(--apex); }
.w-next { background: var(--paint-next); background-size: cover; background-position: center; opacity: 0;
          -webkit-mask-image: var(--mask-mark), conic-gradient(from calc(150deg + var(--wedge-angle)) at var(--apex), transparent 0deg calc(60deg - var(--split) - 0.35deg), #000 calc(60deg - var(--split) + 0.35deg) 63deg, transparent 63deg);
          mask-image: var(--mask-mark), conic-gradient(from calc(150deg + var(--wedge-angle)) at var(--apex), transparent 0deg calc(60deg - var(--split) - 0.35deg), #000 calc(60deg - var(--split) + 0.35deg) 63deg, transparent 63deg);
          -webkit-mask-composite: source-in; mask-composite: intersect; }
.w-next { display: none; }
.mark[data-arriving="1"] .w-next { display: block; opacity: 1; }
.w-ink  { background: var(--hero-bg); opacity: 0; }   /* plain mark inside the wedge (inverse) */
.w-mark { background: var(--mark-fill); opacity: 0; }
.mark.is-inverse .w-cut, .mark.is-inverse .w-cog, .mark.is-inverse .w-next { opacity: 0; }
.mark[data-paint="photo"].is-inverse .w-ink { opacity: 0; }   /* photo beats keep the tinted glass in the cutouts */
.mark.is-inverse .w-ink, .mark.is-inverse .w-mark { opacity: 1; }
.mark.is-inverse .w-mark { background: var(--lit, var(--mark-fill)); }   /* the slice over the photo is tinted with the case colour */
/* paints */
.mark[data-paint="bw"] .w-cog { background: none; }
.mark[data-paint="bw"] .w-cog > i { display: block; background: conic-gradient(from 150deg at var(--apex), var(--paper) 0deg, var(--gray-300) 26deg, var(--gray-600) 44deg, var(--ink) 60deg 63deg, transparent 63deg); }
.mark[data-paint="bw"] .mark__rest .r-fill { background: conic-gradient(from 150deg at var(--apex), var(--paper), var(--gray-300) 30%, var(--gray-600) 70%, var(--ink)); }
.mark[data-paint="spectrum"] .w-cog { background: none; }
.mark[data-paint="spectrum"] .w-cog > i { display: block; background: conic-gradient(from 150deg at var(--apex), var(--blue) 0 12deg, var(--magenta) 12deg 24deg, var(--gold) 24deg 36deg, var(--green) 36deg 48deg, var(--coral) 48deg 63deg, transparent 63deg); }
.mark[data-paint="spectrum"] .mark__rest .r-fill { background: conic-gradient(from 150deg at var(--apex), var(--blue) 0 72deg, var(--magenta) 72deg 144deg, var(--gold) 144deg 216deg, var(--green) 216deg 288deg, var(--coral) 288deg 360deg); }
.mark[data-paint="white"] .w-cog { background: var(--hero-bg); }   /* white light: the mark inverts inside the beam */
.mark[data-paint="white"] .mark__rest .r-fill { background: var(--paper); }
.hero__invert { display: none; }
@media (hover: none) { .hero__invert { display: inline-flex; } }
/* white light (first case): the beam follows the pointer instead of inverting, so the invert pill has nothing to do */
.hero[data-hover="track"] .hero__invert { visibility: hidden; }
html.no-js .mark { pointer-events: none; }
html.no-js .hero__invert { display: none; }

/* --- Index rail (eight turns) --- */
.hero__rail {
  position: absolute; right: max(16px, calc((100vw - var(--container-max)) / 2 - 56px)); top: 50%; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; z-index: 4;
}
.hero__rail li { display: flex; justify-content: flex-end; }
.hero__rail button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--hero-muted);
}
.hero__rail button:focus-visible { outline: var(--focus-outline); outline-offset: 4px; border-radius: 2px; }
.hero__rail .lbl { opacity: 0; transform: translateX(6px); background: var(--hero-bg); padding: 0 6px; border-radius: 3px; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.hero__rail button:hover .lbl, .hero__rail button:focus-visible .lbl, .hero__rail button[aria-current="true"] .lbl { opacity: 1; transform: none; }
.hero__rail .tick { width: 28px; height: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 22%, transparent); position: relative; overflow: hidden; flex: none; }
.hero__rail .tick i { position: absolute; inset: 0; background: var(--c); transform: scaleX(0); transform-origin: left; }
.hero__rail button[aria-current="true"] { color: var(--hero-fg); }
.hero__rail button[aria-current="true"] .tick { width: 44px; }
html.no-js .hero__rail { display: none; }
.hero__cue {
  position: absolute; left: var(--container-pad); bottom: 22px; z-index: 4; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--hero-muted);
  transition: opacity .4s var(--ease-out);
}
.hero__cue svg { width: 16px; height: 16px; animation: cue-bob 2.2s var(--ease-in-out) infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
html.no-js .hero__cue { display: none; }

/* --- The stripe born from the apex (the page's single spectrum stripe) --- */
.stripe { position: absolute; left: 0; right: 0; top: 0; height: 6px; display: flex; z-index: 3; transform-origin: var(--apex-x, 70%) 50%; }
.stripe i { flex: 1; }
.stripe i:nth-child(1) { background: var(--blue); } .stripe i:nth-child(2) { background: var(--magenta); }
.stripe i:nth-child(3) { background: var(--gold); } .stripe i:nth-child(4) { background: var(--green); } .stripe i:nth-child(5) { background: var(--coral); }

/* ============================================================================
   4. Chapters
   ============================================================================ */
.chapter { position: relative; padding: clamp(96px, 12vw, 160px) 0; }
.chapter--sunken { background: var(--gray-050); }
.chapter--sunken .overline, .chapter--sunken .mono { color: var(--gray-600); }
.chapter--ink { background: var(--ink); color: var(--paper); }
.chapter__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.chapter__head .lede { margin-top: 18px; }
.spread { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.spread__sticky { position: sticky; top: calc(var(--nav-h) + var(--folio-h) + 40px); }
.spread .h-chapter { font-size: clamp(30px, 3.5vw, 50px); }

/* --- 02 · Por qué existimos --- */
.retos { list-style: none; margin: 0; padding: 0; position: relative; }
.retos::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--ink); transform: scaleY(var(--draw, 0)); transform-origin: top; }
.reto { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 34px 0 34px 28px; }
.reto::before { content: ""; position: absolute; left: 28px; right: 0; top: 0; height: 1px; background: var(--border-default); transform: scaleX(0); transform-origin: left; }
.reto.is-in::before { transform: scaleX(1); transition: transform .6s var(--ease-cine); }
.reto__n { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(56px, 6vw, 96px); line-height: .9; letter-spacing: -0.04em; color: var(--gray-300); opacity: 0; transform: translateY(22px); transition: color .5s var(--ease-out), opacity .7s var(--ease-cine), transform .7s var(--ease-cine); }
.reto.is-in .reto__n { opacity: 1; transform: none; }
.reto.is-lit .reto__n { color: var(--c); }
.reto h3 { font-size: 24px; margin: 6px 0 8px; letter-spacing: -0.015em; }
.reto p { font-size: 17px; color: var(--gray-800); max-width: 52ch; }
.reto .reto__body { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-cine) .15s, transform .8s var(--ease-cine) .15s; }
.reto.is-in .reto__body { opacity: 1; transform: none; }
html.no-js .reto .reto__body, html.no-js .reto::before, html.no-js .reto__n { opacity: 1; transform: none; }
html.no-js .retos::before { transform: none; }

/* --- 03 · Nuestro trabajo: a refined deck. Each card is a soft tint of its pillar with a glow in the far
       corner; the photo sits framed inside it with a nested radius. On desktop each card lands tilted and
       settles on the deck while the ones below recede and peek out above it (see buildStack). --- */
.stack { position: relative; display: flex; flex-direction: column; }
.pcard-anchor { display: block; height: 0; }   /* in-flow twin of each sticky card: the stack's scroll triggers */
.pcard {
  --i: 0; --tint: var(--paper); --tint-2: var(--gray-050); --glow: rgba(11,11,12,.06); --edge: rgba(11,11,12,.08); --shade: rgba(11,11,12,.28);
  position: sticky; top: calc(var(--nav-h) + var(--folio-h) + 28px + var(--i) * 18px);
  display: grid; grid-template-columns: 54fr 46fr; gap: clamp(8px, 1vw, 14px);
  margin: 0 0 40px; padding: clamp(10px, .9vw, 14px);
  border-radius: 36px; border: 1px solid var(--edge);
  background: radial-gradient(80% 70% at 100% 0%, var(--glow), transparent 64%), linear-gradient(158deg, var(--tint) 0%, var(--tint-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(11,11,12,.04), 0 28px 60px -34px var(--shade), 0 60px 120px -60px rgba(11,11,12,.16);
  color: var(--ink); text-decoration: none;
  isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  transform-origin: 50% 0%;
}
.pcard:last-child { margin-bottom: 0; }
.pcard:nth-of-type(2) { --i: 1; } .pcard:nth-of-type(3) { --i: 2; }
.pcard.c-gold    { --tint: #FFF8E6; --tint-2: #FCEAC2; --glow: rgba(255,184,28,.30); --edge: rgba(185,121,0,.16); --shade: rgba(185,121,0,.32); }
.pcard.c-green   { --tint: #F0FAF5; --tint-2: #D3EFE2; --glow: rgba(0,168,120,.22); --edge: rgba(0,125,89,.15); --shade: rgba(0,125,89,.30); }
.pcard.c-magenta { --tint: #FEF2F8; --tint-2: #F8DAEA; --glow: rgba(224,55,155,.20); --edge: rgba(176,32,118,.14); --shade: rgba(176,32,118,.28); }
.pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gray-050); opacity: var(--dim, 0); pointer-events: none; z-index: 3; }
.pcard__media { position: relative; margin: 0; overflow: hidden; border-radius: 26px; background: rgba(255,255,255,.5); min-height: 420px; box-shadow: inset 0 0 0 1px rgba(11,11,12,.06); isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); }
.pcard__media img { position: absolute; left: -2%; top: -14%; width: 104%; height: 128%; max-width: none; object-fit: cover; }   /* room for the ±5% parallax: the photos' own edges and letterbox bars never show */
.pcard__media figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); padding: 7px 12px; border-radius: var(--radius-pill); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px -8px rgba(11,11,12,.3); }
.pcard__body { position: relative; padding: clamp(24px, 3.2vw, 44px) clamp(18px, 2.6vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pcard__index { position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 28px); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); color: var(--c); opacity: .85; }
.pcard__body .overline { display: inline-flex; align-items: center; gap: 10px; color: var(--c); margin: 0; }
.pcard__body .overline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--glow); flex: none; }
.pcard__body h3 { font-size: clamp(32px, 3.2vw, 46px); letter-spacing: -0.03em; line-height: 1.02; margin: 2px 0 0; }
.pcard__body p { font-size: 16px; line-height: 1.55; color: var(--gray-800); max-width: 44ch; }
.pcard__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.pcard__facts li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c); background: rgba(255,255,255,.66); border: 1px solid var(--edge); border-radius: var(--radius-pill); padding: 6px 11px; }
.pcard__go { margin-top: 16px; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 8px 0 20px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-weight: var(--weight-semibold); font-size: 15px; text-decoration: none; box-shadow: 0 12px 26px -14px rgba(11,11,12,.5); transition: background .35s var(--ease-out); }
.pcard__go svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(255,255,255,.14); transition: transform .35s var(--ease-out), background .35s var(--ease-out); }
.pcard:hover .pcard__go, .pcard:focus-visible .pcard__go { background: var(--c); }
.pcard:hover .pcard__go svg, .pcard:focus-visible .pcard__go svg { transform: translateX(3px); background: rgba(255,255,255,.22); }
.pcard:focus-visible { outline: var(--focus-outline); outline-offset: 4px; }
.strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.strip figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 0 0 1px var(--edge), 0 10px 22px -14px rgba(11,11,12,.35); }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip figcaption { position: absolute; left: 8px; bottom: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 4px 8px; border-radius: var(--radius-pill); }
.c-blue { --c: var(--blue-deep); } .c-magenta { --c: var(--magenta-deep); } .c-gold { --c: var(--gold-text); } .c-green { --c: var(--green-deep); } .c-coral { --c: var(--coral-text); }
.c-blue.raw { --c: var(--blue); } .c-magenta.raw { --c: var(--magenta); } .c-gold.raw { --c: var(--gold); } .c-green.raw { --c: var(--green); } .c-coral.raw { --c: var(--coral); }

/* --- 04 · Aprende gratis --- */
.aprende { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.aprende h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.025em; }
.aprende .lede { margin-top: 18px; max-width: 58ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps); height: 32px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); display: inline-flex; align-items: center; color: var(--ink); background: var(--paper); }
.modules { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--border-default); }
.modules li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--border-subtle); font-size: 17px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--gray-400); transition: color .45s var(--ease-out); }
.modules li.is-lit, html.no-js .modules li { color: var(--ink); }
.modules__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps); font-weight: 400; }

/* --- 05 · Reconocimientos (ledger) --- */
.ledger { display: grid; grid-template-columns: 150px 1fr; gap: 48px; align-items: start; border-top: 1px solid var(--border-default); padding-top: 28px; }
.ledger__side { position: sticky; top: calc(var(--nav-h) + var(--folio-h) + 48px); display: flex; flex-direction: column; gap: 22px; }
.ledger__lamp { width: 72px; aspect-ratio: 1000 / 1040; position: relative; --mark-fill: var(--ink); --wedge-cut: var(--gray-050); --hero-bg: var(--gray-050); --paint: var(--paper); }
.ledger__year { font-family: var(--font-mono); font-size: 44px; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.ledger__tally { color: var(--gray-600); }
.ledger__count { font-variant-numeric: tabular-nums; color: var(--ink); }
.ledger__rows { list-style: none; margin: 0; padding: 0; }
.ledger__row { display: grid; grid-template-columns: 170px 1fr auto; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--border-default); position: relative; color: var(--gray-500); transition: color .45s var(--ease-out); }
.ledger__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.ledger__row.is-in::after { transform: scaleX(1); transition: transform .6s var(--ease-cine), background .45s var(--ease-out), height .45s var(--ease-out); }
.ledger__row > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-cine) .12s, transform .8s var(--ease-cine) .12s; }
.ledger__row.is-in > * { opacity: 1; transform: none; }
html.no-js .ledger__row > * { opacity: 1; transform: none; }
.ledger__row.is-lit, html.no-js .ledger__row { color: var(--ink); }
.ledger__row.is-lit::after { background: var(--c); height: 1.5px; }
.ledger__kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.ledger__kind::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; transition: background .45s var(--ease-out), opacity .45s var(--ease-out); }
.ledger__row.is-lit .ledger__kind::before { background: var(--c); opacity: 1; }
.ledger__name { font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; transition: color .3s var(--ease-out); }
.ledger__row:hover .ledger__name { color: var(--c); }
.ledger__meta { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps); }

/* --- 06 · Filosofía (reading light) --- */
.quote { font-family: var(--font-display); font-size: clamp(28px, 4vw, 56px); line-height: 1.16; letter-spacing: -0.025em; font-weight: 500; max-width: 26ch; margin: 0; text-wrap: pretty; }
.quote .q { color: var(--gray-400); transition: color .25s var(--ease-out); }
.quote .q.is-lit { color: var(--ink); }
html.no-js .quote .q { color: var(--ink); }
.quote-attr { margin-top: 24px; opacity: 0; transition: opacity .6s var(--ease-out); }
.quote-attr.is-in, html.no-js .quote-attr { opacity: 1; }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(56px, 8vw, 96px); }
.vm__card { border: 1.5px solid var(--ink); border-radius: var(--radius-lg); padding: 32px; background: var(--paper); }
.vm__card .pbadge { margin-bottom: 14px; }
.vm__card h3 { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 10px; }
.vm__card p { font-size: 16px; color: var(--gray-700); }
.pbadge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); width: fit-content; }
.pbadge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pbadge--blue { color: var(--blue-deep); background: var(--blue-tint); }
.pbadge--coral { color: var(--coral-text); background: var(--coral-tint); }

/* --- 07 · Únete (banda CTA): the multicolour case closes the essay --- */
.cta { border-top: 1px solid rgba(255,255,255,.18); }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.cta__stage { display: flex; justify-content: center; }
.cta__mark { width: min(340px, 100%); aspect-ratio: 1000 / 1040; position: relative; cursor: crosshair; --mark-fill: var(--paper); --wedge-cut: var(--paper); --hero-bg: var(--ink); --paint: var(--paper); --lit: var(--paper); }
.cta__overline { color: var(--gray-400); }
.cta__title { font-size: clamp(34px, 4.3vw, 62px); line-height: .98; letter-spacing: -0.03em; max-width: 860px; }
.cta__title em { font-style: italic; }
.cta__title .w > i, html.no-js .cta__title { background-image: linear-gradient(104deg, var(--blue), var(--magenta), var(--gold), var(--green), var(--coral)); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cta .lede { color: var(--gray-300); margin-top: 20px; max-width: 44ch; }
.cta__note { color: var(--gray-400); margin-top: 16px; max-width: 46ch; font-size: 16px; }
.cta .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.cta .folio-end { margin-top: 40px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gray-400); }

/* --- Contacto --- */
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact h2 { font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -0.03em; }
.contact .lede { margin-top: 16px; max-width: 40ch; }
.contact__lines { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--gray-700); }
.contact__lines a { color: var(--ink); font-weight: var(--weight-semibold); text-decoration: none; }
.contact__lines a:hover { text-decoration: underline; }
.contact__lines svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; color: var(--gray-500); }
.intents { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.intent { position: relative; }
.intent input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.intent span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); font-size: 14px; font-weight: var(--weight-medium); color: var(--gray-800); background: var(--paper); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.intent input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.intent input:focus-visible + span { outline: var(--focus-outline); outline-offset: 2px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gray-600); }
.field input, .field textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-default); font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--paper); outline: none; transition: border-color var(--duration-fast) var(--ease-out); }
.field input:hover, .field textarea:hover { border-color: var(--gray-400); }
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 140px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.form__status { font-size: 14px; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.form__status[data-state="ok"] { color: var(--green-deep); font-weight: var(--weight-semibold); }
.form__status[data-state="error"] { color: var(--coral-deep); }
.form__status a { color: inherit; font-weight: var(--weight-bold); }
.form__status .mini-mark { width: 40px; aspect-ratio: 1000/1040; position: relative; --mark-fill: var(--green-deep); --wedge-cut: var(--paper); --paint: var(--green); --hero-bg: var(--paper); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- Footer (curtain reveal) --- */
.footer-wrap { position: relative; }

/* --- Señas: LSM widget --- */
.lsm-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 95; height: 52px; padding: 0 20px 0 16px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--paper); border: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 15px; cursor: pointer; box-shadow: var(--shadow-raised);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.lsm-fab:hover { background: var(--gray-800); }
html[data-theme="ink"] .lsm-fab { background: var(--paper); color: var(--ink); }
html[data-theme="ink"] .lsm-fab:hover { background: var(--gray-100); }
.lsm-fab svg { width: 22px; height: 22px; flex: none; }
.lsm-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 95; width: min(320px, calc(100vw - 40px)); background: var(--paper); color: var(--ink);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); padding: 22px;
  opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s .18s;
}
.lsm-panel[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.lsm-panel__head { display: flex; align-items: center; justify-content: space-between; }
.lsm-panel__head strong { font-family: var(--font-display); font-size: 16px; }
.lsm-panel__close { all: unset; cursor: pointer; color: var(--gray-500); line-height: 0; border-radius: 6px; }
.lsm-panel__close:focus-visible { outline: var(--focus-outline); }
.lsm-panel__close svg { width: 20px; height: 20px; }
.lsm-panel .tabs { display: flex; gap: 8px; margin: 14px 0; }
.lsm-panel .tab-chip { flex: 1; height: 34px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--paper); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps); cursor: pointer; color: var(--ink); }
.lsm-panel .tab-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lsm-panel .stage { height: 150px; border-radius: var(--radius-md); background: var(--gray-050); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--gray-600); }
.lsm-panel .stage svg { width: 34px; height: 34px; color: var(--gray-400); }
.lsm-panel .stage .mono-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.lsm-panel .body-note { font-size: 13px; color: var(--text-muted); margin: 14px 0 0; }

/* ---- Reduced motion: the eight cases stack as readable panels; the mark rests and follows ---- */
html.reduce .hero { display: block; padding: 24px 0 48px; min-height: 0; }
html.reduce .hero__grid { align-items: start; padding-bottom: 24px; }
html.reduce .hero__copy { display: block; }
html.reduce .hero-case { visibility: visible; margin: 0 0 88px; }
html.reduce .hero__stage { position: sticky; top: calc(var(--nav-h) + var(--folio-h) + 40px); align-self: start; }
html.reduce .hero__rail, html.reduce .hero__cue, html.reduce .hero-case .turn { display: none; }
html.reduce .mark { cursor: default; }

/* ============================================================================
   5. Reveal helpers (play once)
   ============================================================================ */
.rv { opacity: 0; transform: translateY(32px); }
.rv.is-in, html.no-js .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .hero__cue svg { animation: none; } }

/* ============================================================================
   6. Responsive
   ============================================================================ */
@media (min-width: 961px) {
  .pcard { min-height: min(72vh, 660px); will-change: transform; }
  /* a short hold once the whole deck has landed (sticky cards ignore the parent's padding, so a real box) */
  .stack::after { content: ""; display: block; flex: none; height: clamp(80px, 18vh, 180px); }
  .pcard__media img { will-change: transform; }
}
@media (max-width: 1320px) and (min-width: 961px) {
  .hero__stage { padding-right: clamp(170px, 17vw, 210px); }
  .hero__rail { right: 16px; }
  .mark { width: min(360px, 100%); }
}
@media (max-width: 960px) {
  :root { --folio-h: 0px; }
  .hero__stage { padding-right: 0; }
  .folio { display: none; }
  .site-nav__links { display: none; }
  .site-nav__toggle { display: inline-flex; }
  .site-nav__sheet { display: block; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 88; background: var(--paper); color: var(--ink); padding: 32px var(--container-pad); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
  .site-nav__sheet[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav__sheet { visibility: hidden; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s .22s; }
  .site-nav__sheet[data-open="true"] { visibility: visible; transition-delay: 0s; }
  .site-nav__sheet a:not(.oa-btn) { display: block; font-family: var(--font-display); font-size: 32px; font-weight: var(--weight-bold); letter-spacing: -0.02em; color: inherit; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
  .site-nav__sheet .oa-btn { margin-top: 24px; }
  /* no-JS: the sheet becomes a plain list under a static bar */
  html.no-js .site-nav { position: static; height: auto; }
  html.no-js .site-nav__inner { height: var(--nav-h); }
  html.no-js .site-nav__toggle { display: none; }
  html.no-js .site-nav__sheet { position: static; inset: auto; opacity: 1; transform: none; pointer-events: auto; visibility: visible; padding: 0 var(--container-pad) 16px; border-top: 1px solid var(--border-subtle); }
  html.no-js .site-nav__sheet a:not(.oa-btn) { font-size: 18px; padding: 10px 0; }
  html.no-js .site-nav__sheet .oa-btn { margin-top: 16px; }
  html.no-js main { padding-top: 0; }
  /* the floating Señas chip becomes icon-only so the rail stays clear */
  .lsm-fab { width: 52px; padding: 0; justify-content: center; gap: 0; }
  .lsm-fab__text { display: none; }
  .hero__rail .tick { width: 18px; }
  .hero__rail button[aria-current="true"] .tick { width: 28px; }
  .hero__grid { grid-template-columns: 1fr; gap: 22px; padding-top: 8px; padding-bottom: 76px; }
  .hero__stage { order: -1; padding-bottom: 14px; }
  .mark { width: min(210px, 54vw); }
  .hero__invert { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); }
  .hero-case .hero-title { font-size: clamp(30px, 8.4vw, 44px); }
  .hero-case .lede { font-size: 15.5px; margin-top: 14px; }
  .hero-case .ctas { margin-top: 22px; gap: 8px; }
  .hero-case .ctas .oa-btn { height: 46px; padding: 0 20px; font-size: 15px; }
  .hero-case .turn { margin-top: 18px; }
  .hero__rail { top: calc(100svh - var(--nav-h) - 40px); right: auto; transform: none; left: var(--container-pad); bottom: auto; flex-direction: row; gap: 8px; }
  .hero__rail .lbl { display: none; }
  .hero__cue { display: none; }
  .spread { grid-template-columns: 1fr; }
  .spread__sticky { position: static; }
  .reto { grid-template-columns: 64px 1fr; gap: 16px; padding-left: 20px; }
  .reto::before { left: 20px; }
  .pcard { grid-template-columns: 1fr; position: relative; top: auto; min-height: 0; border-radius: 28px; margin-bottom: 24px; }
  .pcard__media { min-height: 0; aspect-ratio: 16 / 10; border-radius: 20px; }
  .pcard__body { padding: 20px 12px 14px; gap: 12px; }
  .pcard__index { position: static; order: -1; margin-bottom: -4px; }
  .pcard__media figcaption { left: 10px; bottom: 10px; max-width: calc(100% - 20px); font-size: 9px; letter-spacing: .06em; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .aprende { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; gap: 0; }
  .ledger__side { display: none; }
  .ledger__row { grid-template-columns: 1fr; gap: 6px; }
  .ledger__meta { white-space: normal; }
  .vm { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; }
  .cta__stage { order: -1; }
  .cta__mark { width: min(200px, 52vw); }
  .contact { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}
@media (max-width: 960px) and (max-height: 760px) {
  .mark { width: min(160px, 44vw); }
  .hero__grid { padding-top: 0; padding-bottom: 60px; gap: 12px; }
  .hero__stage { padding-bottom: 10px; }
  .hero-case .hero-title { font-size: clamp(28px, 7.6vw, 38px); }
  .hero-case .lede { margin-top: 10px; }
  .hero-case .ctas { margin-top: 14px; }
}
@media (max-height: 700px) and (min-width: 961px) {
  .mark { width: min(340px, 100%); }
  .hero-case .hero-title { font-size: clamp(36px, 5vw, 64px); }
}