/* ============================================================
   THE FLOW CANVAS — optimatiza.com
   Dark workflow-editor aesthetic (Flowise-inspired): node canvas,
   glowing edges, gradient AI accents. Token-only design system.
   Dark re-skin 2026-07 on top of the Operating Ledger structure.
   ============================================================ */

/* ============================================================
   0. FONTS — self-hosted (font-display: swap)
   ============================================================ */
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/instrument-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/instrument-serif-400italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1. DESIGN TOKENS (spec §1 — verbatim)
   ============================================================ */
:root {
  /* ---------- CANVAS & SURFACES (dark workflow editor) ---------- */
  --paper-0: #0A0F1A;            /* page — deep navy-black canvas */
  --paper-1: #101828;            /* raised cards / node panels */
  --paper-2: #060B14;            /* recessed wells, alt bands, footer */
  --band:    #0D1626;            /* band sections — slightly lifted panel tone */

  --ink:      #EDF3FA;           /* headlines, strong text — light on canvas */
  --ink-700:  #C4D1E0;           /* subheads */
  --ink-body: #9BABBF;           /* body copy (AA+ on paper-0) */
  --ink-dim:  #75859B;           /* captions only, AA-large only, never body */

  --line:        rgba(148,163,184,0.16);   /* 1px hairlines everywhere */
  --line-strong: rgba(196,209,224,0.55);   /* chapter rules, table headers */

  /* ---------- INTERACTIVE ---------- */
  --steel:      #5BA8E8;         /* links, CTAs, focus rings (bright steel on dark) */
  --steel-deep: #8CC3F2;         /* hover / pressed — LIGHTER on dark */

  /* ---------- LIVE TELEMETRY (only on things that move/run) ---------- */
  --live:        #2DD4BF;        /* text-safe teal on dark: clock, active counts */
  --live-bright: #14B8A6;        /* marks: status dot, packets, draw tips */

  /* ---------- SEMANTIC ---------- */
  --ok-text: #34D399;  --ok-mark: #10B981;      /* OUTCOME stamps, checkmarks */
  --danger:  #F87171;                            /* pain quotes' index marks */
  --amber-ink: #FBBF24; --btc: #F7931A;          /* Bitcoin annex ONLY */
  --wa: #25D366;                                 /* WhatsApp recognition green */

  /* ---------- DARK BAND SCOPED (band panels keep their own text) ---------- */
  --band-text:  #F2EFE7;
  --band-muted: rgba(242,239,231,0.62);
  --band-line:  rgba(242,239,231,0.14);
  --band-accent:#7FB4E0;

  /* ---------- FLOW ACCENTS (Flowise layer: edges, chips, CTAs) ---------- */
  --acc-blue:   #3B82F6;
  --acc-violet: #8B5CF6;
  --acc-pink:   #EC4899;
  --grad-ai: linear-gradient(120deg, #14B8A6 0%, #3B82F6 55%, #8B5CF6 100%);
  --glow-teal:   0 0 0 1px rgba(20,184,166,0.35), 0 0 28px rgba(20,184,166,0.18);
  --glow-violet: 0 0 0 1px rgba(139,92,246,0.35), 0 0 28px rgba(139,92,246,0.18);
  --node-bg: #0E1626;            /* workflow node fill */
  --node-line: rgba(148,163,184,0.22);

  /* ---------- TYPE ---------- */
  --ff-display: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  --ff-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* 9-step scale — nothing else exists */
  --t-0: 0.6875rem;                        /* 11px mono micro-labels */
  --t-1: 0.8125rem;                        /* 13px mono labels, chips, nav */
  --t-2: 0.9375rem;                        /* 15px secondary text */
  --t-3: 1.0625rem;                        /* 17px body (line-height 1.65, max 68ch) */
  --t-4: 1.375rem;                         /* 22px leads, card titles */
  --t-5: clamp(1.625rem, 2.6vw, 1.875rem); /* 26–30px serif sub-sections, pain quotes */
  --t-6: clamp(2rem, 3.6vw, 2.625rem);     /* 32–42px section titles */
  --t-7: clamp(2.5rem, 4.8vw, 3.625rem);   /* 40–58px chapter titles, case titles */
  --t-8: clamp(3.25rem, 7.5vw, 7rem);      /* 52–112px hero only, serif, lh 1.02 */
  --t-slab: clamp(2.25rem, 7vw, 5.5rem);   /* before/after mono slabs */

  /* ---------- SPACING (8px grid) ---------- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px;
  --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;
  /* section padding: var(--sp-8) 0 desktop / var(--sp-6) 0 mobile */

  /* ---------- GEOMETRY ---------- */
  --maxw: 1320px;
  --r-0: 14px;     /* default — cards are rounded node panels */
  --r-s: 8px;      /* chips, stamps, inputs */
  --r-pill: 999px; /* pills and the sticky CTA only */

  /* ---------- SHADOWS (dark canvas depth) ---------- */
  --shadow-card: 0 1px 0 rgba(0,0,0,0.35), 0 16px 40px rgba(2,8,20,0.5);
  --shadow-modal: 0 24px 80px rgba(2,8,20,0.75);

  /* ---------- MOTION ---------- */
  --ease-draw: cubic-bezier(.65,0,.35,1);   /* rules, paths */
  --ease-text: cubic-bezier(.16,1,.3,1);    /* line rises (expo.out equivalent) */
  --dur-micro: .18s; --dur-std: .9s; --dur-draw: 1.4s;
}

/* i18n clamp: ES display headlines run longer — cap hero + slab scale */
html[lang="es"] {
  --t-8: clamp(3.25rem, 7.5vw, 6rem);
  --t-slab: clamp(2.25rem, 7vw, 4.75rem);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff-body);
  font-size: var(--t-3);
  line-height: 1.65;
  color: var(--ink-body);
  background-color: var(--paper-0);
  /* workflow-editor canvas: dot grid + two soft ambient glows */
  background-image:
    radial-gradient(circle at 12% -6%, rgba(20,184,166,0.07), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(139,92,246,0.06), transparent 46%),
    radial-gradient(rgba(148,163,184,0.13) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 600; color: var(--ink); }
s { color: var(--ink-dim); }
[hidden] { display: none !important; }

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

:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

h1, h2 { font-family: var(--ff-display); font-weight: 400; color: var(--ink); }
h3, h4, h5, h6 { font-weight: 500; color: var(--ink); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* mono utility — ALL metadata */
.mono {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
}
.odo { display: inline-block; font-variant-numeric: tabular-nums; }
.clock { font-variant-numeric: tabular-nums; }

/* magnetic buttons: JS (GSAP quickTo) drives transform; CSS only hints */
.magnetic { will-change: transform; }

/* offset anchor target (#bots) */
.anchor-target { position: relative; display: block; height: 0; visibility: hidden; }

/* ============================================================
   3. BACKGROUND LAYERS (hero-only presence)
   ============================================================ */
#bg-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45vh, transparent 110vh);
          mask-image: linear-gradient(to bottom, #000 0, #000 45vh, transparent 110vh);
}
.bg-grid-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(148,163,184,0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(148,163,184,0.05) 0 1px, transparent 1px 56px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45vh, transparent 110vh);
          mask-image: linear-gradient(to bottom, #000 0, #000 45vh, transparent 110vh);
}
/* static canvas-grid fallback: shown only when background-3d.js bails */
.bg-fallback { display: none; }
body.bg-static #bg-canvas { display: none; }
body.bg-static .bg-fallback {
  display: block;
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(148,163,184,0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(148,163,184,0.05) 0 1px, transparent 1px 56px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45vh, transparent 110vh);
          mask-image: linear-gradient(to bottom, #000 0, #000 45vh, transparent 110vh);
}

/* ============================================================
   4. SECTION SYSTEM & CHAPTER HEADS
   ============================================================ */
.section { position: relative; padding: var(--sp-8) 0; }
.section-well {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* document-closing convention: double top rule */
.section-close { border-top: 1px solid var(--line-strong); position: relative; }
.section-close::before {
  content: ''; position: absolute; top: 4px; left: 0; right: 0;
  height: 1px; background: var(--line-strong);
}

.ch-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.ch-index {
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ch-rule { display: block; flex: 1; height: 1px; background: var(--line-strong); }

.section-header { margin-bottom: var(--sp-6); max-width: 68ch; }
.section-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-6); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: var(--sp-2);
}
.section-title em { font-style: italic; color: var(--steel); }
.section-subtitle {
  font-size: var(--t-3); color: var(--ink-body); max-width: 60ch;
}

/* ============================================================
   5. BUTTONS & LINKS — drafting micro-interactions
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-1);
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ink);
  border-radius: var(--r-0);
  color: var(--ink);
  transition: color var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
.btn-lg { padding: var(--sp-2) var(--sp-4); }

/* gradient AI fill; a light sheen slides up on hover + glow */
.btn-ink {
  position: relative; overflow: hidden; isolation: isolate;
  background: transparent; color: #071018; border-color: transparent;
  transition: box-shadow var(--dur-micro) ease, transform var(--dur-micro) ease;
}
.btn-ink::after {
  content: ''; position: absolute; inset: 0; z-index: -2; background: var(--grad-ai);
}
.btn-ink::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.22);
  transform: translateY(101%);
  transition: transform .25s var(--ease-draw);
}
.btn-ink:hover::before, .btn-ink:focus-visible::before { transform: translateY(0); }
.btn-ink:hover, .btn-ink:focus-visible {
  box-shadow: 0 0 32px rgba(59,130,246,0.35), 0 0 14px rgba(20,184,166,0.3);
  transform: translateY(-1px);
}

/* ruled-underline text link; full-ink line draws left->right on hover */
.btn-link {
  position: relative; display: inline-block;
  font-size: var(--t-2); font-weight: 500; color: var(--steel);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color var(--dur-micro) ease;
}
.btn-link::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-draw);
}
.btn-link:hover { color: var(--steel-deep); }
.btn-link:hover::after { transform: scaleX(1); }

/* generic prose/footer link underline-draw */
.about-text a, .about-table a, .footer-links a, .footer-copy a, .form-fallback a {
  position: relative; color: var(--steel);
}
.about-text a::after, .about-table a::after,
.footer-links a::after, .footer-copy a::after, .form-fallback a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-draw);
}
.about-text a:hover::after, .about-table a:hover::after,
.footer-links a:hover::after, .footer-copy a:hover::after, .form-fallback a:hover::after {
  transform: scaleX(1);
}

/* rotated OUTCOME stamp label */
.stamp-label {
  display: inline-block;
  transform: rotate(-2deg);
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ok-text);
  border: 1.5px solid currentColor;
  border-radius: var(--r-s);
  padding: 2px var(--sp-1);
  flex-shrink: 0;
}

/* engraved HH seal (nav + footer) */
.logo-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.logo-text {
  font-family: var(--ff-display); font-size: var(--t-2);
  letter-spacing: 0.08em; color: var(--ink);
}

/* ============================================================
   6. MOTION PRIMITIVES — reveal system (CSS side of the contract)
   All pre-reveal hiding is scoped under html.js-anim: without it,
   everything is fully visible. motion.js toggles .is-in per container.
   ============================================================ */
.line-mask { display: block; overflow: hidden; }
.line { display: block; will-change: transform; }
.rule-x { transform-origin: left; }

html.js-anim .rv .line {
  transform: translateY(110%);
  transition: transform var(--dur-std) var(--ease-text);
}
html.js-anim .rv.is-in .line,
html.js-anim .rv.animate-in .line { transform: none; }
html.js-anim .rv .line-mask:nth-child(2) .line { transition-delay: 90ms; }
html.js-anim .rv .line-mask:nth-child(3) .line { transition-delay: 180ms; }
html.js-anim .rv .line-mask:nth-child(4) .line { transition-delay: 270ms; }

html.js-anim .rv .rule-x,
html.js-anim .rv.rule-x {
  transform: scaleX(0);
  transition: transform var(--dur-draw) var(--ease-draw);
}
html.js-anim .rv.is-in .rule-x,
html.js-anim .rv.animate-in .rule-x,
html.js-anim .rv.rule-x.is-in { transform: scaleX(1); }

html.js-anim .rv .stamp {
  opacity: 0; transform: scale(1.04);
  transition: opacity var(--dur-std) var(--ease-text), transform var(--dur-std) var(--ease-text);
}
html.js-anim .rv.is-in .stamp,
html.js-anim .rv.animate-in .stamp { opacity: 1; transform: none; }
html.js-anim .rv .stamp:nth-child(2) { transition-delay: 60ms; }
html.js-anim .rv .stamp:nth-child(3) { transition-delay: 120ms; }
html.js-anim .rv .stamp:nth-child(4) { transition-delay: 180ms; }
html.js-anim .rv .stamp:nth-child(5) { transition-delay: 240ms; }
html.js-anim .rv .stamp:nth-child(6) { transition-delay: 300ms; }
html.js-anim .rv .stamp:nth-child(7) { transition-delay: 360ms; }
html.js-anim .rv .stamp:nth-child(8) { transition-delay: 420ms; }

/* legacy observer contract from script.js (quote elements): alias */
html.js-anim .animate-target {
  opacity: 0;
  transition: opacity var(--dur-std) var(--ease-text);
}
html.js-anim .animate-target.animate-in,
html.js-anim .animate-target.is-in { opacity: 1; }

/* .tilt/.tilting/.spot/.spotting are still added by script.js —
   deliberately unstyled: 3D tilt & cursor spotlight are dead effects. */

/* ============================================================
   7. MARQUEE (hero certs + footer ticker)
   ============================================================ */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex; width: max-content;
  animation: marqueeX 60s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeX { to { transform: translateX(-50%); } }
.marquee-seg {
  font-size: var(--t-1); font-weight: 400;
  letter-spacing: 0.08em; color: var(--ink-dim);
  white-space: nowrap; flex-shrink: 0;
}

/* ============================================================
   8. SCROLL PROGRESS (created by script.js)
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-ai);
  z-index: 1200; pointer-events: none;
}

/* ============================================================
   9. NAVIGATION MASTHEAD
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  /* no backdrop-filter: it would become the containing block for the
     fixed mobile nav panel (filter/backdrop-filter create one).
     Fully opaque: navy bands scrolling underneath must not ghost through. */
  background: var(--paper-0);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-micro) ease;
}
.navbar.scrolled { border-bottom-color: var(--line-strong); }

.nav-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  height: var(--sp-6);
}
.nav-logo { display: inline-flex; align-items: center; }

.nav-links {
  display: flex; align-items: center; gap: var(--sp-4);
  list-style: none;
}
.nav-links li { display: flex; align-items: baseline; }
.nav-num { display: none; } /* mobile chapter numbers */
.nav-links a {
  position: relative;
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
  padding: var(--sp-1) 0;
  transition: color var(--dur-micro) ease;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-draw);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: var(--sp-3); }
.nav-clock {
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.08em;
  color: var(--live);
}
.lang-toggle { display: flex; align-items: center; gap: 4px; }
.lang-btn {
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink-dim);
  padding: 4px 2px;
  transition: color var(--dur-micro) ease;
}
.lang-btn:hover { color: var(--ink-700); }
.lang-btn.active { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.lang-sep { font-family: var(--ff-mono); font-size: var(--t-1); color: var(--ink-dim); }

.nav-cta { padding: var(--sp-1) var(--sp-2); }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  font-size: var(--t-4); color: var(--ink);
}

/* ============================================================
   10. HERO — DOCUMENT HEADER
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: var(--sp-8);
}
.hero > .container { margin-top: auto; padding-top: var(--sp-6); }

.hero-dochead { margin-bottom: var(--sp-6); }
.dochead-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
  padding-bottom: var(--sp-1);
}
.dochead-left, .dochead-mid, .dochead-right { white-space: nowrap; }
.dochead-mid .clock { color: var(--live); }
.dochead-right { display: inline-flex; align-items: center; gap: var(--sp-1); }
.dochead-rule { display: block; height: 1px; background: var(--line-strong); }

.status-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--live-bright);
  animation: statusPulse 2.4s var(--ease-draw) infinite;
}
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(20,184,166,0.45); }
  60%  { box-shadow: 0 0 0 8px rgba(20,184,166,0); }
  100% { box-shadow: 0 0 0 0 rgba(20,184,166,0); }
}

.hero-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-8); line-height: 1.02; letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 20ch;
  margin-bottom: var(--sp-4);
  overflow-wrap: break-word;
}
.hero-title em { font-style: italic; color: var(--steel); }

.hero-subtitle {
  font-size: var(--t-4); line-height: 1.5; color: var(--ink-body);
  max-width: 58ch;
  margin-bottom: var(--sp-5);
}

.hero-actions {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}

/* short desktop viewports: keep both CTAs above the fold */
@media (min-width: 1024px) and (max-height: 980px) {
  .hero { padding-top: var(--sp-7); }
  .hero > .container { padding-top: var(--sp-4); }
  .hero-dochead { margin-bottom: var(--sp-4); }
  .hero-title { font-size: min(var(--t-8), 10.5vh); margin-bottom: var(--sp-3); }
  .hero-subtitle { margin-bottom: var(--sp-4); }
  .hero-actions { margin-bottom: var(--sp-5); }
}

/* proof table (absorbs old S2, keeps #proof anchor) */
.proof-table {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.proof-cell {
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.proof-cell + .proof-cell { border-left: 1px solid var(--line); }
.proof-num {
  font-size: var(--t-6); font-weight: 500; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.proof-cell dd { display: flex; flex-direction: column; gap: 2px; }
.proof-label { font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.proof-sub {
  font-size: var(--t-0); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
}

.hero-marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-1) 0;
  margin-top: var(--sp-6);
}

/* ============================================================
   11. 01 — DIAGNOSIS (#problemas)
   ============================================================ */
.diag-layout {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.diag-sticky {
  grid-column: span 4;
  position: sticky; top: var(--sp-8);
}
.diag-rows {
  grid-column: span 8;
  border-top: 1px solid var(--line);
}
.diag-row {
  position: relative;
  display: grid; grid-template-columns: var(--sp-6) 1fr;
  column-gap: var(--sp-2);
  padding: var(--sp-4) 0;
}
.diag-idx {
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.08em;
  color: var(--danger);
  padding-top: var(--sp-1);
}
.diag-quote {
  grid-column: 2;
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: var(--t-5); line-height: 1.3;
  color: var(--ink);
}
.diag-fix {
  grid-column: 2;
  font-size: var(--t-2); color: var(--ink-body);
  margin-top: var(--sp-2);
}
.diag-rule {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--line);
}
.diag-bridge {
  font-family: var(--ff-display); font-style: italic;
  font-size: var(--t-4); color: var(--ink);
  margin-top: var(--sp-5);
}

/* ============================================================
   12. 02 — EVIDENCE / CONTROL ROOM (#proyectos, navy band)
   Scoped custom properties: hairlines & rules auto-remap inside.
   ============================================================ */
.band {
  --line: var(--band-line);
  --line-strong: rgba(242,239,231,0.5);
  position: relative;
  background: var(--band);
  color: var(--band-text);
  padding: var(--sp-8) 0;
}
/* double top rule boundary */
.band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: rgba(242,239,231,0.5);
}
.band::after {
  content: ''; position: absolute; top: 4px; left: 0; right: 0;
  height: 1px; background: rgba(242,239,231,0.35);
}
.band .ch-index { color: var(--band-muted); }
.band .section-title { color: var(--band-text); }
.band .section-subtitle { color: var(--band-muted); }
.band .btn-link { color: var(--band-accent); border-bottom-color: var(--band-line); }
.band .btn-link:hover { color: var(--band-text); }
/* Inoculate <strong> inside navy bands: strong{color:var(--ink)} == --band navy
   would render navy-on-navy (invisible). Remap to band-text everywhere in a band.
   .band .dossier-label (below) keeps higher specificity to preserve its muted tone;
   .tar-body strong (agentes.css) keeps higher order to stay accent-blue. */
.band strong { color: var(--band-text); }

/* — flagship dossier — */
.dossier {
  border-top: 1px solid var(--band-line);
  padding: var(--sp-6) 0;
}
.dossier-rule {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}
.dossier-case { color: var(--band-accent); }
.dossier-industry { color: var(--band-muted); flex: 1; }
.chip-inprod {
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ok-mark);
  border: 1px solid rgba(16,185,129,0.5);
  border-radius: var(--r-s);
  padding: 2px var(--sp-1);
}
.dossier-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-7); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--band-accent);
  margin-bottom: var(--sp-2);
}
.dossier-tagline {
  font-family: var(--ff-display); font-style: italic;
  font-size: var(--t-4); color: var(--band-muted);
  margin-bottom: var(--sp-5);
}
.dossier-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.dossier-col p { font-size: var(--t-2); color: rgba(242,239,231,0.78); }
.band .dossier-label {
  display: block;
  font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--band-muted);
  border-bottom: 1px solid var(--band-line);
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.dossier-results { list-style: none; }
.dossier-results li {
  position: relative;
  font-size: var(--t-2); color: rgba(242,239,231,0.78);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-bottom: 1px solid var(--band-line);
}
.dossier-results li::before {
  content: '\2713'; position: absolute; left: 0; top: var(--sp-1);
  font-family: var(--ff-mono); font-size: var(--t-1);
  color: var(--ok-mark);
}

/* before/after slab (GSAP masked crossfade; static-safe layout) */
.slab {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  font-family: var(--ff-mono); font-weight: 500;
  font-size: var(--t-slab); line-height: 1.05; letter-spacing: -0.02em;
  margin: var(--sp-6) 0;
  overflow: hidden;
}
.slab-before, .slab-after { display: inline-block; white-space: nowrap; }
.slab-before { color: var(--band-muted); position: relative; transition: opacity .6s var(--ease-draw); }
/* fired state: the old word stays legible — struck through like a corrected draft */
.slab-before::after {
  content: ''; position: absolute; left: -1%; right: -1%; top: 54%; height: 0.06em;
  background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease-draw) .25s;
}
.slab.slab-fired .slab-before { opacity: .5; }
.slab.slab-fired .slab-before::after { transform: scaleX(1); }
.slab-after { color: var(--live-bright); }
.slab-arrow { font-size: var(--t-7); color: var(--band-muted); }

/* blueprint schematic inside dossier (light ink strokes on navy) */
.dossier-arch {
  border: 1px solid var(--band-line);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background-image:
    repeating-linear-gradient(0deg,  rgba(242,239,231,0.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(242,239,231,0.035) 0 1px, transparent 1px 56px);
}
.arch-title {
  font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--band-muted);
  margin-bottom: var(--sp-3);
}
.arch-flow {
  display: flex; align-items: stretch; justify-content: flex-start;
  flex-wrap: wrap; gap: var(--sp-2);
}
.arch-flow .arch-node {
  display: flex; align-items: center; gap: var(--sp-1);
  font-family: var(--ff-mono); font-size: var(--t-1);
  color: var(--band-text);
  border: 1px solid rgba(242,239,231,0.35);
  border-radius: var(--r-0);
  padding: var(--sp-1) var(--sp-2);
}
.arch-flow .arch-node i { font-size: var(--t-3); color: var(--band-accent); }
.arch-flow .arch-node.highlight {
  border-color: var(--band-accent);
  color: var(--band-accent);
}
.arch-arrow {
  display: flex; align-items: center;
  color: var(--band-muted); font-size: var(--t-2);
}
.dossier-stack {
  font-size: var(--t-0); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--band-muted);
  margin-top: var(--sp-3);
}
.case-cta { margin-top: var(--sp-2); }

/* — compact cases: native <details> ruled rows — */
.dossier-minis {
  margin-top: var(--sp-6);
  border-top: 1px solid rgba(242,239,231,0.35);
}
.dossier-mini { border-bottom: 1px solid var(--band-line); }
.dossier-mini summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  cursor: pointer;
  list-style: none;
}
.dossier-mini summary::-webkit-details-marker { display: none; }
.dossier-mini summary::marker { content: ''; }
.dossier-mini .dossier-case {
  font-size: var(--t-1); letter-spacing: 0.08em; text-transform: uppercase;
}
.dossier-mini-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-4); line-height: 1.2;
  color: var(--band-text);
  transition: color var(--dur-micro) ease;
}
.dossier-mini-ind {
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--band-muted);
}
.dossier-mini-ico {
  color: var(--band-muted); font-size: var(--t-3);
  align-self: center;
  transition: transform var(--dur-micro) ease, color var(--dur-micro) ease;
}
.dossier-mini[open] .dossier-mini-ico { transform: rotate(45deg); color: var(--band-accent); }
.dossier-mini summary:hover .dossier-mini-title { color: var(--band-accent); }
.dossier-mini-body { padding: 0 0 var(--sp-4); max-width: 78ch; }
.dossier-mini-body p {
  font-size: var(--t-2); color: rgba(242,239,231,0.78);
  margin-bottom: var(--sp-2);
}
.dossier-mini-body .dossier-tagline { font-size: var(--t-3); margin-bottom: var(--sp-3); }
.dossier-mini-body .dossier-label {
  display: inline; border-bottom: none; padding: 0; margin: 0 var(--sp-1) 0 0;
}

.projects-bridge {
  font-family: var(--ff-display); font-style: italic;
  font-size: var(--t-5); color: var(--band-text);
  margin-top: var(--sp-6);
}

/* ============================================================
   13. 03 — SERVICES & PRICING (#servicios, paper-2 well)
   ============================================================ */
.svc-sheets {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.svc-sheet {
  display: flex; flex-direction: column;
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  transition: border-color var(--dur-micro) ease;
}
.svc-sheet:hover { border-color: var(--line-strong); }
.svc-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.svc-num {
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.08em;
  color: var(--ink-700);
  transition: color var(--dur-micro) ease;
}
.svc-sheet:hover .svc-num { color: var(--live); }
.svc-badge {
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--steel);
  border: 1px solid var(--steel);
  border-radius: var(--r-s);
  padding: 2px var(--sp-1);
  white-space: nowrap;
}
.svc-badge-btc { color: var(--amber-ink); border-color: var(--amber-ink); }
.svc-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-4); line-height: 1.2; color: var(--ink);
  margin-bottom: var(--sp-2);
}
.svc-desc { font-size: var(--t-2); color: var(--ink-body); margin-bottom: var(--sp-3); }
.svc-includes { list-style: none; margin-bottom: var(--sp-3); }
.svc-includes li {
  display: flex; align-items: baseline; gap: var(--sp-1);
  font-size: var(--t-2); color: var(--ink-body);
  border-top: 1px solid var(--line);
  padding: var(--sp-1) 0;
}
.svc-includes li i { color: var(--ok-mark); font-size: var(--t-1); flex-shrink: 0; }
.svc-outcome {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--t-2); color: var(--ink-body);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-2);
  margin-top: auto;
}
.svc-floor {
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-2);
  margin-top: var(--sp-3);
}

/* — compact index: remaining services as <details> rows — */
.svc-index {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-6);
  border-top: 1px solid var(--line-strong);
  align-items: start;
}
.svc-row { border-bottom: 1px solid var(--line); }
.svc-row-bots { grid-column: 1 / -1; }
.svc-row summary {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) 0;
  cursor: pointer;
  list-style: none;
}
.svc-row summary::-webkit-details-marker { display: none; }
.svc-row summary::marker { content: ''; }
.svc-row-num {
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.08em;
  color: var(--ink-700);
  transition: color var(--dur-micro) ease;
}
.svc-row summary:hover .svc-row-num, .svc-row[open] .svc-row-num { color: var(--live); }
.svc-row-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-4); line-height: 1.2; color: var(--ink);
}
.svc-row-note {
  flex: 1 1 240px;
  font-size: var(--t-0); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
}
.svc-row-ico {
  margin-left: auto; align-self: center;
  color: var(--ink-700); font-size: var(--t-3);
  transition: transform var(--dur-micro) ease;
}
.svc-row[open] .svc-row-ico { transform: rotate(45deg); }
.svc-row-body { padding: 0 0 var(--sp-4); }
.svc-row-body > p {
  font-size: var(--t-2); color: var(--ink-body);
  max-width: 68ch; margin-bottom: var(--sp-3);
}
.svc-row-body .svc-includes { max-width: 68ch; }
.svc-row-body .svc-outcome { max-width: 68ch; margin-top: 0; }

/* Bitcoin advisory row: amber ink accents */
.svc-row-btc .svc-row-num,
.svc-row-btc summary:hover .svc-row-num,
.svc-row-btc[open] .svc-row-num { color: var(--amber-ink); }

/* — 9-bot catalog (lives inside the bots-rpa row) — */
.bots-catalog {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-4);
}
.bots-catalog-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-5); line-height: 1.2; color: var(--ink);
  margin-bottom: var(--sp-1);
}
.bots-catalog-sub {
  font-size: var(--t-2); color: var(--ink-body);
  max-width: 68ch; margin-bottom: var(--sp-4);
}
.bot-category { margin-bottom: var(--sp-4); }
.bot-cat-title {
  font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: var(--sp-1);
}
.bot-row { border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
.bot-name {
  font-size: var(--t-2); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: var(--sp-2);
}
.bot-cells {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.bot-cell p { font-size: var(--t-2); color: var(--ink-body); }
.bot-label {
  display: block;
  font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--sp-1);
}
.bot-label-pain { color: var(--danger); }
.bot-label-sol { color: var(--live); }
.bot-tech {
  font-size: var(--t-0); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: var(--sp-1);
}
.bot-outcome {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--t-2); color: var(--ink-body);
}
.bots-footer { margin-top: var(--sp-4); }

.services-bridge { margin-top: var(--sp-6); font-size: var(--t-3); }

/* ============================================================
   14. 04 — ANATOMY OF AN AUTOMATION (#anatomia, THE pin)
   ============================================================ */
.anatomy-sheet {
  position: relative;
  background-color: var(--paper-1);
  /* faint 56px blueprint grid */
  background-image:
    repeating-linear-gradient(0deg,  rgba(148,163,184,0.06) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(148,163,184,0.06) 0 1px, transparent 1px 56px);
  border: 1px solid var(--line);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}
.anatomy-readout {
  position: absolute; top: var(--sp-2); left: var(--sp-3);
  font-size: var(--t-0); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--live);
  pointer-events: none;
}
.anatomy-titleblock {
  position: absolute; right: var(--sp-3); bottom: var(--sp-2);
  font-size: var(--t-0); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-700);
  border: 1px solid var(--line-strong);
  background: var(--paper-1);
  padding: var(--sp-1) var(--sp-2);
}

/* ------------------------------------------------------------
   Reusable component: .flow + [data-flow] (JS hook, ported from
   the old stylesheet, restyled ink-on-paper)
   ------------------------------------------------------------ */
.flow { position: relative; max-width: 1080px; margin: 0 auto; }
.flow-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* dashed construction line beneath */
.flow-track {
  fill: none; stroke: rgba(148,163,184,0.28); stroke-width: 1.5;
  stroke-linecap: round; stroke-dasharray: 2 7;
  vector-effect: non-scaling-stroke;
}
/* solid steel->teal draw on top (the only place #flowGrad is used) */
.flow-progress {
  fill: none; stroke: url(#flowGrad); stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
html.js-anim .flow-progress { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js-anim [data-flow].flow-visible .flow-progress {
  animation: flowDraw var(--dur-draw) var(--ease-draw) forwards;
}
@keyframes flowDraw { to { stroke-dashoffset: 0; } }

.flow-pulse { fill: var(--live-bright); }
.flow-pulse-halo { fill: rgba(20,184,166,0.15); }

/* node overlay — absolute positions map 1:1 to the SVG viewBox */
.flow .flow-nodes {
  position: absolute; top: 0; left: 0; width: 100%;
  aspect-ratio: 1000 / 340;
  pointer-events: none;
}
.flow.flow-compact .flow-nodes { aspect-ratio: 1000 / 300; }
.flow .flow-node {
  position: absolute; transform: translate(-50%, -29px);
  width: clamp(104px, 12vw, 152px);
  pointer-events: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.flow-node-ico {
  position: relative;
  width: var(--sp-5); height: var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-4); color: var(--ink);
  background: var(--paper-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-0);
  margin-bottom: var(--sp-1);
  transition: border-color var(--dur-micro) ease, color var(--dur-micro) ease;
}
.flow-node:hover .flow-node-ico { border-color: var(--steel); color: var(--steel); }
.flow-node-badge {
  position: absolute; top: calc(-1 * var(--sp-1)); right: calc(-1 * var(--sp-1));
  min-width: var(--sp-2); height: var(--sp-2); padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-0); font-weight: 500;
  color: var(--paper-0); background: var(--ink);
  border-radius: var(--r-s);
}
.flow-node h3 {
  font-size: var(--t-2); font-weight: 500; line-height: 1.25;
  color: var(--ink); margin-bottom: 2px;
}
.flow-node p { font-size: var(--t-1); color: var(--ink-body); line-height: 1.45; }
.flow-node-content { width: 100%; }

/* one-shot reveal (script.js adds .flow-visible; hiding gated on js-anim) */
html.js-anim [data-flow] .flow-node {
  opacity: 0; translate: 0 10px;
  transition: opacity .55s ease, translate .55s var(--ease-text);
}
html.js-anim [data-flow].flow-visible .flow-node { opacity: 1; translate: 0 0; }
html.js-anim [data-flow].flow-visible .flow-node:nth-child(1) { transition-delay: .15s; }
html.js-anim [data-flow].flow-visible .flow-node:nth-child(2) { transition-delay: .40s; }
html.js-anim [data-flow].flow-visible .flow-node:nth-child(3) { transition-delay: .65s; }
html.js-anim [data-flow].flow-visible .flow-node:nth-child(4) { transition-delay: .90s; }
html.js-anim [data-flow].flow-visible .flow-node:nth-child(5) { transition-delay: 1.15s; }
html.js-anim [data-flow].flow-visible .flow-node:nth-child(6) { transition-delay: 1.40s; }

/* desktop pin scene: motion.js adds .anatomy-scrub and stamps nodes
   in with .node-on as the drawn tip reaches them (overrides one-shot) */
html.js-anim [data-flow].anatomy-scrub .flow-node:not(.node-on) {
  opacity: 0; translate: 0 10px; transition-delay: 0s;
}
html.js-anim [data-flow].anatomy-scrub .flow-node.node-on {
  opacity: 1; translate: 0 0; transition-delay: 0s;
  transition-duration: .35s;
}

.flow-caption {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-1);
  font-family: var(--ff-mono); font-size: var(--t-1);
  color: var(--ink-dim);
  margin-top: var(--sp-4);
  text-align: center;
}
.flow-caption i { color: var(--live); }

/* ============================================================
   15. 05 — METHOD (#proceso) — Gantt-style ruled timeline
   ============================================================ */
.proc-flow { position: relative; margin-bottom: var(--sp-7); }
.proc-svg {
  display: block; width: 100%; height: var(--sp-5);
  overflow: visible;
}
.gantt-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
.gantt-step {
  border-left: 1px solid var(--line-strong);
  padding-left: var(--sp-2);
}
.gantt-num {
  display: block;
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.08em;
  color: var(--ink-700);
  margin-bottom: var(--sp-1);
}
.gantt-step h3 {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-4); line-height: 1.15; color: var(--ink);
  margin-bottom: var(--sp-2);
}
/* duration bar: width encodes the range — w8 dramatically longer */
.gantt-bar {
  display: block; height: var(--sp-1);
  background: var(--ink);
  margin-bottom: var(--sp-1);
}
.bar-d2 { width: 16%; }
.bar-d3 { width: 26%; }
.bar-d5 { width: 42%; }
.bar-w8 { width: 100%; background: var(--steel); }
.gantt-dur {
  display: block;
  font-size: var(--t-0); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: var(--sp-2);
}
.gantt-step p { font-size: var(--t-2); color: var(--ink-body); }

/* — "I'm not X — I am Y" ruled table — */
.diff-block { max-width: 100ch; }
.diff-heading {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-5); color: var(--ink);
  margin-bottom: var(--sp-4);
}
.diff-table { border-top: 1px solid var(--line-strong); }
.diff-row {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: var(--sp-5);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.diff-not { font-size: var(--t-3); color: var(--ink-dim); }
.diff-not s { position: relative; text-decoration: none; color: var(--ink-dim); }
.diff-not s::after {
  content: ''; position: absolute; left: 0; right: 0; top: 55%;
  height: 1px; background: var(--ink-dim);
  transform: scaleX(1); transform-origin: left;
}
html.js-anim .diff-row s::after {
  transform: scaleX(0);
  transition: transform var(--dur-draw) var(--ease-draw) .2s;
}
html.js-anim .diff-row.is-in s::after,
html.js-anim .diff-row.animate-in s::after { transform: scaleX(1); }
.diff-am { font-size: var(--t-3); color: var(--ink); }

/* ============================================================
   16. 06 — THE PLATFORM DECISION (#stack / #ecosistema)
   ============================================================ */
.platform-quote {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: var(--t-5); line-height: 1.35;
  color: var(--ink);
  max-width: 44ch;
  margin-top: var(--sp-2);
}
.platform-quote em { font-style: italic; color: var(--steel); }

.arch-block { margin-bottom: var(--sp-7); }
.arch-block-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-5); color: var(--ink);
  margin-bottom: var(--sp-1);
}
.arch-block-sub {
  font-size: var(--t-2); color: var(--ink-body);
  max-width: 62ch; margin-bottom: var(--sp-5);
}

/* ecosystem diagram: ink hairlines on the grid sheet */
.arch { position: relative; max-width: 1080px; margin: 0 auto; }
.arch-svg { display: block; width: 100%; height: auto; overflow: visible; }
.arch-link {
  fill: none; stroke: rgba(148,163,184,0.28); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.arch-packet { fill: var(--live-bright); }
.arch-nodes {
  position: absolute; top: 0; left: 0; width: 100%;
  aspect-ratio: 1000 / 440;
  pointer-events: none;
}
.arch-nodes .arch-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  pointer-events: auto; text-align: center;
}
.arch-ico {
  width: var(--sp-6); height: var(--sp-6);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-4); color: var(--ink);
  background: var(--paper-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-0);
  transition: border-color var(--dur-micro) ease;
}
.arch-nodes .arch-node:hover .arch-ico { border-color: var(--steel); }
/* hub node: solid ink with paper text */
.arch-node.hub .arch-ico {
  background: var(--ink); color: var(--paper-0); border-color: var(--ink);
}
.arch-name {
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  color: var(--ink-700);
  background: rgba(246,244,238,0.85);
  padding: 0 4px;
  white-space: nowrap;
}
.arch-caption {
  text-align: center;
  font-family: var(--ff-mono); font-size: var(--t-1);
  letter-spacing: 0.08em; color: var(--ink-dim);
  margin-top: var(--sp-4);
}

/* — certification wall: pressed-ink seals — */
.cert-wall {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.cert-count {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.cert-count-num {
  font-size: var(--t-slab); font-weight: 500; line-height: 1;
  color: var(--ink);
}
.cert-count-copy h3 {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-4); color: var(--ink);
  margin-bottom: var(--sp-1);
}
.cert-count-copy p { font-size: var(--t-2); color: var(--ink-body); max-width: 52ch; }

.cert-groups {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.cert-group { min-width: 0; }
.cert-group-title {
  font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.cert-seals { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.seal {
  width: calc(var(--sp-7) + var(--sp-2)); height: calc(var(--sp-7) + var(--sp-2));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  padding: var(--sp-1);
  text-align: center;
}
.seal-initial {
  font-family: var(--ff-display); font-size: var(--t-4);
  line-height: 1; color: var(--ink);
}
.seal-name {
  font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 1.3; color: var(--ink-700);
}
/* academic seals: double-struck border */
.seal-edu { border-style: double; border-width: 4px; border-color: var(--ink-700); }

/* — stack: compact ruled mono index — */
.stack-index {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
}
.stack-col { min-width: 0; }
.stack-cat {
  font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: var(--sp-1);
}
.stack-list { list-style: none; }
.stack-list li {
  font-size: var(--t-1); color: var(--ink-body);
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}

/* ============================================================
   17. 07 — THE ARCHITECT (#sobre-mi)
   ============================================================ */
.about-layout {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.about-portrait {
  grid-column: span 4;
  max-width: calc(var(--sp-8) * 2 + var(--sp-6)); /* 320px on the 8px grid */
  border: 1px solid var(--line);
  background: var(--paper-1);
  box-shadow: var(--shadow-card);
  padding: var(--sp-1);
}
.about-photo {
  display: block; width: 100%;
}
.about-portrait figcaption {
  font-size: var(--t-0); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
  padding: var(--sp-1) 2px 0;
}
.about-portrait .clock { color: var(--live); }

.about-content { grid-column: span 8; max-width: 68ch; }
.about-role {
  font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--steel);
  margin: var(--sp-1) 0 var(--sp-4);
}
.about-text p { margin-bottom: var(--sp-3); }

.about-table { margin-top: var(--sp-5); border-top: 1px solid var(--line-strong); }
.about-row {
  display: grid; grid-template-columns: calc(var(--sp-8) + var(--sp-4)) 1fr;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.about-row dt {
  font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-dim);
  padding-top: 4px;
}
.about-row dd { font-size: var(--t-2); color: var(--ink-body); }

/* ============================================================
   18. ANNEX — BITCOIN ADVISORY (#bitcoin)
   Amber ink is contained here (plus the two svc/quote btc accents).
   ============================================================ */
.annex {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.annex .ch-index { color: var(--amber-ink); }
.annex-steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
}
.annex-step {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-2);
}
.annex-num {
  display: block;
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.08em;
  color: var(--amber-ink);
  margin-bottom: var(--sp-1);
}
.annex-step h3 {
  font-size: var(--t-2); font-weight: 500; color: var(--ink);
  margin-bottom: 2px;
}
.annex-step p { font-size: var(--t-1); color: var(--ink-body); }
.annex-caption {
  font-size: var(--t-1); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber-ink);
  margin-top: var(--sp-5);
}
.annex-cta { margin-top: var(--sp-3); }
/* amber stamp CTA */
.btn-annex {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--amber-ink);
  border: 1.5px solid var(--amber-ink);
  border-radius: var(--r-s);
  padding: var(--sp-2) var(--sp-3);
  transform: rotate(-1deg);
  transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease;
}
.btn-annex:hover { background-color: var(--amber-ink); color: var(--paper-1); }

/* ============================================================
   19. 08 — ESTIMATE DESK (#cotizador) — paper worksheet + receipt
   All ids/classes consumed by script.js are preserved verbatim.
   ============================================================ */

/* mode toggle: two document tabs sitting on a rule */
.quote-mode-toggle {
  display: flex; align-items: flex-end; gap: var(--sp-1);
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: var(--sp-5);
}
.quote-mode-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--r-0);
  padding: var(--sp-2) var(--sp-3);
  transition: color var(--dur-micro) ease, background-color var(--dur-micro) ease;
}
.quote-mode-btn:hover { color: var(--ink); }
.quote-mode-btn.active {
  color: var(--ink);
  background: var(--paper-1);
  border-color: var(--line-strong);
}
/* the active tab covers the baseline rule */
.quote-mode-btn.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--paper-1);
}
.quote-mode-btn i { font-size: var(--t-2); color: var(--steel); }

.quote-layout {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.quote-panel {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
.quote-panel:not(.active) { display: none; }
.quote-builder, .quote-ai { min-width: 0; }

.quote-step { margin-bottom: var(--sp-5); }
.quote-step:last-child { margin-bottom: 0; }
.quote-step-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-3); font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.quote-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-3); height: var(--sp-3);
  font-size: var(--t-1); font-weight: 500;
  color: var(--paper-0); background: var(--ink);
  border-radius: var(--r-s);
  flex-shrink: 0;
}

/* project types & complexity: ruled radio rows with stamp-in state */
.quote-options { display: block; }
.quote-option-card { position: relative; display: block; cursor: pointer; }
.quote-option-card input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.quote-type-grid .quote-option-card { border-bottom: 1px solid var(--line); }
.quote-type-grid .quote-option-card:first-child { border-top: 1px solid var(--line); }
.quote-option-inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; column-gap: var(--sp-2);
  padding: var(--sp-2);
  border-left: 2px solid transparent;
  transition: background-color var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
.quote-option-card:hover .quote-option-inner { background: rgba(148,163,184,0.07); }
.quote-option-inner i {
  grid-row: span 2;
  font-size: var(--t-4); color: var(--steel);
}
.quote-option-inner strong {
  font-size: var(--t-2); font-weight: 500; color: var(--ink);
}
.quote-option-desc {
  grid-column: 2;
  font-size: var(--t-1); color: var(--ink-body);
}
.quote-option-price {
  grid-row: span 2; justify-self: end;
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  color: var(--ink-700);
  white-space: nowrap;
}
.quote-option-card input:checked + .quote-option-inner {
  background: rgba(45,106,159,0.07);
  border-left-color: var(--steel);
}
.quote-option-card input:checked + .quote-option-inner strong { color: var(--steel-deep); }
.quote-option-card input:focus-visible + .quote-option-inner {
  outline: 2px solid var(--steel); outline-offset: -2px;
}
/* bitcoin option: amber accents (annex ink family) */
.quote-option-btc .quote-option-inner i { color: var(--amber-ink); }
.quote-price-btc { color: var(--amber-ink); }
.quote-option-btc input:checked + .quote-option-inner {
  background: rgba(146,64,14,0.06);
  border-left-color: var(--amber-ink);
}
.quote-option-btc input:checked + .quote-option-inner strong { color: var(--amber-ink); }

/* complexity: three ruled options */
.quote-complexity-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.quote-complexity-grid .quote-option-card { border: 1px solid var(--line); }
.quote-option-card.small .quote-option-inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--sp-2);
}

/* features: ruled checklist with stamp-in checks */
.quote-features-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-4);
}
.quote-feature-item {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-1) 2px;
  cursor: pointer;
  transition: background-color var(--dur-micro) ease;
}
.quote-feature-item:hover { background: rgba(148,163,184,0.07); }
.quote-feature-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.quote-feature-check {
  width: var(--sp-2); height: var(--sp-2);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  flex-shrink: 0;
  transition: background-color var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
.quote-feature-check i { font-size: var(--t-0); color: var(--paper-1); opacity: 0; }
.quote-feature-item.selected .quote-feature-check {
  background: var(--ink); border-color: var(--ink);
  animation: stampIn var(--dur-micro) var(--ease-draw);
}
.quote-feature-item.selected .quote-feature-check i { opacity: 1; }
@keyframes stampIn {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.quote-feature-label { flex: 1; font-size: var(--t-2); color: var(--ink-body); }
.quote-feature-item.selected .quote-feature-label { color: var(--ink); }
.quote-feature-price {
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.quote-feature-item.selected .quote-feature-price { color: var(--live); }

/* AI mode: telegram form */
.quote-ai-content { display: flex; flex-direction: column; align-items: flex-start; }
.quote-ai-icon {
  width: var(--sp-5); height: var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-4); color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-0);
  background: var(--paper-2);
  margin-bottom: var(--sp-2);
}
.quote-ai-content h3 {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-4); color: var(--ink);
  margin-bottom: var(--sp-1);
}
.quote-ai-content > p {
  font-size: var(--t-2); color: var(--ink-body);
  max-width: 60ch; margin-bottom: var(--sp-3);
}
.quote-ai-content textarea {
  width: 100%; min-height: var(--sp-8); resize: vertical;
  font-family: var(--ff-mono); font-size: var(--t-2); line-height: 1.6;
  color: var(--ink);
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: var(--sp-2);
  margin-bottom: var(--sp-2);
  transition: border-color var(--dur-micro) ease;
}
.quote-ai-content textarea:focus { outline: none; border-color: var(--steel); }
.quote-ai-content textarea::placeholder { color: var(--ink-dim); }
.quote-ai-privacy {
  display: flex; align-items: baseline; gap: var(--sp-1);
  font-size: var(--t-0); letter-spacing: 0.02em;
  color: var(--ink-dim);
  margin-bottom: var(--sp-3);
}
.quote-ai-privacy i { color: var(--steel); flex-shrink: 0; }
.quote-ai-result {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper-0);
  padding: var(--sp-3);
  margin-top: var(--sp-4);
}
.quote-ai-result h4 {
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.quote-ai-detected { display: flex; flex-direction: column; }
.quote-ai-detected-item {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--t-2); color: var(--ink-body);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-1) 0;
}
.quote-ai-detected-item:last-child { border-bottom: none; }
.quote-ai-detected-item i { color: var(--live); flex-shrink: 0; }
.ai-feature-name { flex: 1; }
.ai-feature-cost {
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* — receipt tape (summary) — */
.quote-summary {
  background: var(--paper-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
.receipt {
  position: sticky; top: var(--sp-7);
  /* perforated top edge via CSS mask */
  -webkit-mask-image:
    radial-gradient(circle 5px at 8px 5px, transparent 4px, #000 4.5px),
    linear-gradient(#000, #000);
  -webkit-mask-size: 16px 10px, 100% calc(100% - 10px);
  -webkit-mask-position: 0 0, 0 10px;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-image:
    radial-gradient(circle 5px at 8px 5px, transparent 4px, #000 4.5px),
    linear-gradient(#000, #000);
  mask-size: 16px 10px, 100% calc(100% - 10px);
  mask-position: 0 0, 0 10px;
  mask-repeat: repeat-x, no-repeat;
  padding-top: var(--sp-5);
}
.quote-summary-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.quote-summary-header h3 {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-4); color: var(--ink);
}
/* rotated "not a quote" stamp */
.stamp-note, .quote-summary-badge {
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--danger);
  border: 1.5px solid rgba(180,35,44,0.7);
  border-radius: var(--r-s);
  padding: 2px var(--sp-1);
  transform: rotate(-2deg);
  white-space: nowrap;
}
.quote-summary-body { min-height: var(--sp-7); }
.quote-summary-empty {
  text-align: center;
  padding: var(--sp-5) 0;
  color: var(--ink-dim);
  font-size: var(--t-2);
}
.quote-summary-empty i {
  display: block;
  font-size: var(--t-6); color: var(--ink-dim);
  margin-bottom: var(--sp-2);
}
/* script.js toggles display:block inline — space with margins, not flex gap */
.quote-summary-details > * + * { margin-top: var(--sp-2); }
.quote-line {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--t-1);
  color: var(--ink-700);
}
.quote-line span:last-child {
  color: var(--ink); font-weight: 500; text-align: right;
  font-variant-numeric: tabular-nums;
}
.quote-divider { border-top: 1px dashed var(--line-strong); margin: var(--sp-1) 0; }
.quote-total { display: flex; flex-direction: column; gap: var(--sp-1); }
.quote-total > span {
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.quote-total-amount {
  display: flex; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap;
  font-size: var(--t-6); font-weight: 500; line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.quote-total-sep { color: var(--ink-dim); }
.quote-timeline {
  display: flex; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap;
  font-size: var(--t-2); color: var(--ink-body);
}
.quote-timeline i { color: var(--live); }
.quote-timeline strong { color: var(--ink); font-weight: 600; }
.quote-summary-actions {
  border-top: 1px dashed var(--line-strong);
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
}
.quote-hire-btn { width: 100%; }
.quote-hire-note {
  font-size: var(--t-1); color: var(--ink-dim);
  text-align: center;
  margin-top: var(--sp-2);
}

/* — tier ladder anchor strip — */
.tier-ladder {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.tier {
  font-size: var(--t-1); color: var(--ink-700);
  background: var(--paper-1);
  border: 1px solid var(--line);
  padding: var(--sp-1) var(--sp-2);
}
.tier-arrow { color: var(--ink-dim); font-size: var(--t-2); }

/* — hire modal — */
.quote-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(2,8,20,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3);
}
.quote-modal {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  background: var(--paper-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-5);
}
.quote-modal-close {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: var(--sp-4); height: var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-3); color: var(--ink-700);
  border: 1px solid var(--line);
  background: var(--paper-0);
  transition: color var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
.quote-modal-close:hover { color: var(--ink); border-color: var(--line-strong); }
.quote-modal h3 {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-5); color: var(--ink);
  margin-bottom: var(--sp-1);
}
.quote-modal > p { font-size: var(--t-2); color: var(--ink-body); margin-bottom: var(--sp-3); }
.quote-modal-summary {
  font-family: var(--ff-mono); font-size: var(--t-1);
  color: var(--ink-700);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.quote-modal-summary p { margin-bottom: var(--sp-1); overflow-wrap: break-word; }
.quote-modal-summary p:last-child { margin-bottom: 0; }
.quote-hire-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.quote-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.quote-hire-form input, .quote-hire-form textarea {
  width: 100%;
  font-size: var(--t-2); color: var(--ink);
  background: var(--paper-0);
  border: 1px solid rgba(148,163,184,0.45);
  border-radius: var(--r-s);
  padding: var(--sp-1) var(--sp-2);
  transition: border-color var(--dur-micro) ease;
}
.quote-hire-form input:focus, .quote-hire-form textarea:focus {
  outline: none; border-color: var(--steel);
}
.quote-hire-form input::placeholder, .quote-hire-form textarea::placeholder { color: var(--ink-dim); }
.quote-modal-success {
  font-size: var(--t-2); font-weight: 500;
  color: var(--ok-text); text-align: center;
  margin-top: var(--sp-2);
}

/* ============================================================
   20. 09 — LET'S TALK (#contacto)
   ============================================================ */
.contact-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.contact-left, .contact-right { min-width: 0; }
.contact-lead {
  font-family: var(--ff-display); font-size: var(--t-4);
  color: var(--ink-700);
  margin: var(--sp-3) 0;
  max-width: 48ch;
}
.contact-lead em { font-style: italic; color: var(--steel); }
.contact-diagnostic {
  font-size: var(--t-3); color: var(--ink-body);
  max-width: 55ch;
  margin-bottom: var(--sp-5);
}
.contact-rows { border-top: 1px solid var(--line-strong); }
.contact-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.contact-row-ico { font-size: var(--t-5); color: var(--ink); }
.contact-row-ico.wa { color: var(--wa); }
.contact-row-label {
  font-family: var(--ff-display); font-size: var(--t-4);
  color: var(--ink);
  transition: color var(--dur-micro) ease;
}
.contact-row:hover .contact-row-label { color: var(--steel); }
.contact-row-arrow {
  color: var(--ink-dim); font-size: var(--t-3);
  transition: transform var(--dur-micro) var(--ease-draw), color var(--dur-micro) ease;
}
.contact-row:hover .contact-row-arrow { transform: translateX(6px); color: var(--steel); }
.contact-mail {
  position: relative;
  display: inline-block;
  font-size: var(--t-2); font-weight: 500;
  color: var(--ink-700);
  margin-top: var(--sp-3);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}
.contact-mail::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--steel);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-draw);
}
.contact-mail:hover { color: var(--steel); }
.contact-mail:hover::after { transform: scaleX(1); }

.trust-strip {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  margin-top: var(--sp-5);
}
.trust-strip-title {
  font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-bottom: var(--sp-1);
}
.trust-line {
  font-size: var(--t-1); line-height: 2;
  color: var(--ink-700);
}
.trust-chip { text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.cta-note {
  font-size: var(--t-1); color: var(--ink-dim);
  margin-top: var(--sp-3);
  max-width: 50ch;
}

/* — proposal form: mono labels + ruled inputs — */
.proposal-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-field { display: flex; flex-direction: column; }
.form-label {
  font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
  margin-bottom: var(--sp-1);
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  font-size: var(--t-2); color: var(--ink);
  background: var(--node-bg);
  border: 1px solid rgba(148,163,184,0.45);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-dim); }
.form-field select { cursor: pointer; }
.form-field select option { background: var(--paper-0); color: var(--ink); }
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: rgba(20,184,166,0.6);
  box-shadow: var(--glow-teal);
}
.form-hp { display: none !important; }
.form-success { font-size: var(--t-2); font-weight: 500; color: var(--ok-text); }
.form-fallback {
  font-size: var(--t-2); color: var(--ink-body);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: var(--sp-2);
}
.form-privacy { font-size: var(--t-1); color: var(--ink-dim); max-width: 55ch; }

/* ============================================================
   21. FOOTER COLOPHON
   ============================================================ */
.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line-strong);
}
.footer-ticker {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-1) 0;
}
.footer-content {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-6) 0 var(--sp-5);
}
.footer-brand { display: flex; align-items: flex-start; gap: var(--sp-2); }
.footer-brand p { font-size: var(--t-2); font-weight: 500; color: var(--ink); line-height: 1.5; }
.footer-brand p span { font-weight: 400; font-size: var(--t-1); color: var(--ink-700); }
.footer-links { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.footer-links a {
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
}
.footer-links a:hover { color: var(--ink); }
.footer-social {
  display: flex; align-items: center; gap: var(--sp-3);
  justify-content: flex-end; flex-wrap: wrap;
}
.footer-social a {
  font-size: var(--t-4); color: var(--ink-700);
  transition: color var(--dur-micro) ease;
}
.footer-social a:hover { color: var(--steel); }
.footer-clock {
  font-size: var(--t-1); font-weight: 500;
  letter-spacing: 0.08em; color: var(--live);
}
.footer-colophon {
  border-top: 1px solid var(--line);
  padding: var(--sp-3) 0 var(--sp-5);
}
.colophon-line, .colophon-shipped {
  font-size: var(--t-0); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: var(--sp-1);
}
.colophon-shipped { color: var(--ink-700); }
.footer-copy { font-size: var(--t-1); color: var(--ink-dim); }
.footer-copy a { color: var(--ink-700); }

/* ============================================================
   22. STICKY PILL (script.js/motion.js owns visibility)
   ============================================================ */
.sticky-pill {
  position: fixed; right: var(--sp-3); bottom: var(--sp-3); z-index: 1500;
  display: flex; align-items: center; gap: 2px;
  background: var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-modal);
  padding: 4px;
  opacity: 0; transform: translateY(var(--sp-1));
  pointer-events: none;
  transition: opacity var(--dur-micro) ease, transform var(--dur-micro) var(--ease-text);
}
.sticky-pill.visible { opacity: 1; transform: none; pointer-events: auto; }
.pill-wa {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-5); height: var(--sp-5);
  font-size: var(--t-4); color: var(--paper-1);
  background: var(--wa);
  border-radius: var(--r-pill);
}
.pill-estimate {
  font-family: var(--ff-mono); font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--paper-0);
  padding: var(--sp-1) var(--sp-2);
}
.pill-estimate:hover { text-decoration: underline; text-underline-offset: 4px; }
.pill-dismiss {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-4); height: var(--sp-4);
  font-size: var(--t-2); color: rgba(242,239,231,0.62);
  border-radius: var(--r-pill);
  transition: color var(--dur-micro) ease;
}
.pill-dismiss:hover { color: var(--paper-0); }

/* ============================================================
   23. RESPONSIVE — 1280 / 1024 / 900 / 820 / 640 / 420
   ============================================================ */
@media (max-width: 1280px) {
  .svc-sheets { grid-template-columns: repeat(2, 1fr); }
  .stack-index { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .nav-clock { display: none; }

  /* diagnosis: sticky -> stacked */
  .diag-layout { display: block; }
  .diag-sticky { position: static; max-width: 60ch; margin-bottom: var(--sp-5); }

  .quote-layout { grid-template-columns: 1fr; }
  .receipt { position: static; }

  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-6); }

  .about-layout { display: block; }
  .about-portrait { margin-bottom: var(--sp-5); }

  .cert-groups { grid-template-columns: 1fr; }
  .anatomy-readout { display: none; } /* pin is desktop-only */
}

/* mobile nav: full-screen paper panel, giant serif type index */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; }
  .nav-links.active {
    display: flex;
    position: fixed; left: 0; right: 0; top: var(--sp-6); bottom: 0;
    z-index: 990;
    background: var(--paper-0);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-5) var(--sp-4);
    overflow-y: auto;
  }
  .nav-links.active li {
    display: flex; align-items: baseline; gap: var(--sp-2);
    border-top: 1px solid var(--line);
    padding: var(--sp-2) 0;
  }
  .nav-links.active li:last-child { border-bottom: 1px solid var(--line); }
  .nav-links.active .nav-num {
    display: inline-block;
    font-size: var(--t-1); font-weight: 500; letter-spacing: 0.08em;
    color: var(--live);
  }
  .nav-links.active a {
    font-family: var(--ff-display); font-size: var(--t-6);
    font-weight: 400; line-height: 1.1;
    text-transform: none; letter-spacing: -0.01em;
    color: var(--ink);
    padding: 0;
  }
  .nav-links.active a::after { display: none; }
}

@media (max-width: 820px) {
  .section, .band { padding: var(--sp-6) 0; }
  .hero { padding-top: var(--sp-7); }
  .hero-actions { margin-bottom: var(--sp-6); }
  .ch-head { margin-bottom: var(--sp-5); }
  .section-header { margin-bottom: var(--sp-5); }

  /* dossier columns collapse */
  .dossier-cols { grid-template-columns: 1fr; gap: var(--sp-4); }
  .dossier-mini summary { grid-template-columns: auto 1fr auto; }
  .dossier-mini-ind { grid-column: 2; }
  .dossier-mini-ico { grid-row: 1; grid-column: 3; }

  .bot-cells { grid-template-columns: 1fr; gap: var(--sp-2); }
  .svc-index { grid-template-columns: 1fr; }
  .svc-sheets { margin-bottom: var(--sp-6); }
  .quote-features-grid { grid-template-columns: 1fr; }

  /* gantt: vertical rail */
  .proc-svg { display: none; }
  .gantt-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    border-left: 1px solid var(--line-strong);
    padding-left: var(--sp-3);
    margin-top: 0;
  }
  .gantt-step { border-left: none; padding-left: 0; }
  .gantt-bar { max-width: 320px; }
  .diff-row { grid-template-columns: 1fr; gap: var(--sp-1); }

  /* anatomy/method flow: collapse to a vertical drawn rail */
  .flow-svg { display: none; }
  .flow { padding-left: var(--sp-4); }
  .flow::before {
    content: ''; position: absolute;
    left: var(--sp-1); top: var(--sp-1); bottom: var(--sp-2);
    width: 1px;
    background: var(--line-strong);
    transform: scaleY(0); transform-origin: top;
    transition: transform var(--dur-draw) var(--ease-draw);
  }
  .flow-visible.flow::before { transform: scaleY(1); }
  html:not(.js-anim) .flow::before { transform: scaleY(1); }
  .flow .flow-nodes { position: static; aspect-ratio: auto; width: auto; }
  .flow .flow-node,
  .flow.flow-compact .flow-node {
    position: static; transform: none;
    width: auto; text-align: left;
    display: grid; grid-template-columns: auto 1fr;
    gap: var(--sp-2); align-items: start;
    padding: 0 0 var(--sp-4);
  }
  .flow-node-content { padding-top: 2px; }
  .flow-node-badge { right: auto; left: var(--sp-4); }
  .anatomy-sheet { padding: var(--sp-4) var(--sp-3); }
  .anatomy-titleblock {
    position: static; display: inline-block; margin-top: var(--sp-3);
  }

  /* ecosystem diagram: static grid */
  .arch-svg { display: none; }
  .arch-nodes {
    position: static; aspect-ratio: auto; width: auto;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
  .arch-nodes .arch-node {
    position: static; transform: none;
    flex-direction: row; text-align: left;
  }
  .arch-name { white-space: normal; background: none; }

  .annex-steps { grid-template-columns: repeat(3, 1fr); }
  .stack-index { grid-template-columns: repeat(2, 1fr); }
  .footer-content { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer-social { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .container { padding-inline: var(--sp-3); }

  .dochead-mid { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .nav-cta { display: none; }

  /* proof table: 2 x 2 */
  .proof-table { grid-template-columns: 1fr 1fr; }
  .proof-cell + .proof-cell { border-left: none; }
  .proof-cell:nth-child(even) { border-left: 1px solid var(--line); }
  .proof-cell:nth-child(n+3) { border-top: 1px solid var(--line); }

  .diag-row { grid-template-columns: var(--sp-4) 1fr; }
  .svc-sheets { grid-template-columns: 1fr; }
  .annex-steps { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .quote-form-row { grid-template-columns: 1fr; }
  .quote-complexity-grid { grid-template-columns: 1fr; }
  .quote-modal { padding: var(--sp-4); }
  .tier-ladder { flex-direction: column; align-items: stretch; }
  .tier-arrow { transform: rotate(90deg); align-self: center; }
  .cert-count { gap: var(--sp-3); }
  .seal { width: var(--sp-7); height: var(--sp-7); }
  .seal-initial { font-size: var(--t-3); }
  .dossier-mini-ind { display: none; }
  .stack-index { gap: var(--sp-3); }
}

@media (max-width: 420px) {
  /* token re-clamp so ES headlines survive 360px without overflow */
  :root {
    --t-8: clamp(2.5rem, 11.5vw, 3.25rem);
    --t-7: clamp(2rem, 9vw, 2.5rem);
    --t-slab: clamp(1.625rem, 8.5vw, 2.25rem);
  }
  html[lang="es"] {
    --t-8: clamp(2.25rem, 11vw, 3rem);
    --t-slab: clamp(1.5rem, 8vw, 2rem);
  }
  .container { padding-inline: var(--sp-2); }
  .hero-title { hyphens: manual; }
  .quote-option-inner { grid-template-columns: auto 1fr; }
  .quote-option-price { grid-row: auto; grid-column: 2; justify-self: start; }
  .btn-lg { width: 100%; }
  .sticky-pill { right: var(--sp-2); bottom: var(--sp-2); }
}

/* ============================================================
   24. REDUCED MOTION — single kill switch
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* static marquee */
  .marquee-track { animation: none !important; transform: none !important; }
  /* status dot stops pulsing */
  .status-dot { animation: none !important; box-shadow: none !important; }
  /* all reveal states final */
  html.js-anim .rv .line { transform: none !important; }
  html.js-anim .rv .rule-x,
  html.js-anim .rv.rule-x { transform: scaleX(1) !important; }
  html.js-anim .rv .stamp { opacity: 1 !important; transform: none !important; }
  html.js-anim .animate-target { opacity: 1 !important; }
  html.js-anim .diff-row s::after { transform: scaleX(1) !important; }
  /* flow diagrams: fully drawn, pulses hidden */
  html.js-anim .flow-progress {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .flow-pulse, .flow-pulse-halo { display: none !important; }
  html.js-anim [data-flow] .flow-node,
  html.js-anim [data-flow].anatomy-scrub .flow-node:not(.node-on) {
    opacity: 1 !important; translate: none !important;
  }
  .flow::before { transform: scaleY(1) !important; }
  .scroll-progress { display: none !important; }
  .sticky-pill { transition: none !important; }
}

/* ============================================================
   25. PRINT — black on white, chrome hidden
   ============================================================ */
@media print {
  .navbar, .sticky-pill, .scroll-progress,
  #bg-canvas, .bg-fallback, .bg-grid-overlay,
  .footer-ticker, .hero-marquee, .quote-modal-overlay { display: none !important; }
  * { box-shadow: none !important; }
  body { background: #fff; color: #000; }
  .band {
    background: #fff; color: #000;
    --band-text: #000; --band-muted: #333;
    --band-accent: #000; --band-line: #ccc;
  }
  .band * { color: #000 !important; }
  .section-well, .annex, .footer { background: #fff; }
  .hero { min-height: auto; }
}

/* ============================================================
   26. IMAGERY LAYER — hero plate, Exhibit A, crew figures,
   portraits, stamps & colophon mark. Tokens only; no new colors,
   no gradients, sharp corners default.
   ============================================================ */

/* — P1: hero two-column — headline left, drawing plate right.
   Mobile-first: single column, plate stacks after the subtitle
   (it is DOM-after .hero-main). */
.hero-grid { margin-bottom: var(--sp-6); }
.hero-main { min-width: 0; } /* never shrink/overflow the h1 column; .hero-title clamp untouched */
.hero-fig {
  min-width: 0;
  max-width: 560px;
  margin: var(--sp-4) auto 0;
}
.hero-fig-svg { display: block; width: 100%; height: auto; }

/* .ill-draw stroke draw (dasharray/dashoffset) is measured and driven
   by motion.js at runtime under html.js-anim. Never pre-hide strokes
   here: without JS the full drawing must be visible. Rule kept inert. */
.hero-fig-svg .ill-draw { vector-effect: non-scaling-stroke; }

/* live telemetry dots on the plate: subtle 2.4s pulse, same cadence as
   .status-dot. Opacity-only (box-shadow does not render on SVG shapes,
   and a transform pulse would fight a future motion-path transform on
   the traveling dot). */
.ill-live { animation: livePulse 2.4s var(--ease-draw) infinite; }
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  60%      { opacity: 0.35; }
}

@media (min-width: 1024px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-6);
    align-items: center;
  }
  .hero-fig { max-width: none; margin: 0; }
  /* inside the grid, .hero-grid's own margin owns the rhythm down to the
     proof table — kill the trailing margin so the plate centers optically */
  .hero-grid .hero-actions { margin-bottom: 0; }
}

/* — P1: drafting title block under the plate — */
.titleblock {
  display: block;
  margin-top: var(--sp-3);
  border: 1px solid var(--line-strong);
  background: var(--paper-1);
}
.tb-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
}
.tb-row + .tb-row { border-top: 1px solid var(--line); }
.tb-photo {
  width: 72px; height: 88px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--line-strong);
}
.tb-signature {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: var(--t-4); line-height: 1;
  color: var(--ink);
  text-transform: none; letter-spacing: 0;
}

/* — P2: verification stamp beside the IN PRODUCTION chip (navy band).
   Negative vertical margins cancel the height the 72px seal would add,
   so the .dossier-rule flex row keeps its text baseline and the stamp
   overprints above/below like a real seal. Teal stroke reads on navy. */
.stamp-inprod {
  width: 72px; height: 72px;
  flex-shrink: 0; align-self: center;
  margin: calc(-1 * var(--sp-3)) 0;
  transform: rotate(-8deg);
  opacity: 0.9;
}

/* — P3: EXHIBIT A — shipped product, inside the navy band
   (band-scoped custom properties). */
.exhibit {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--band-line);
  padding-top: var(--sp-7);
}
.exhibit-rule {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--band-muted);
  margin-bottom: var(--sp-4);
}
.exhibit-rule::after { content: ''; flex: 1; height: 1px; background: var(--band-line); }
.exhibit-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-7); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--band-accent);
  margin-bottom: var(--sp-2);
}
.exhibit-tagline {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: var(--t-4);
  color: var(--band-muted);
}
.exhibit-mount { position: relative; margin: var(--sp-5) 0; }
.exhibit-shot {
  border: 1px solid var(--band-line);
  background: var(--paper-0);
  padding: 6px; /* paper mat */
}
.exhibit-shot img, .exhibit-phone img { display: block; width: 100%; height: auto; }
.exhibit-phone {
  position: absolute; right: 4%; bottom: -8%;
  width: clamp(120px, 18%, 190px);
  border: 1px solid var(--band-line);
  background: var(--paper-0);
  padding: 4px; /* paper mat */
  box-shadow: var(--shadow-modal);
}
.exhibit-provenance {
  font-size: var(--t-1); letter-spacing: 0.08em;
  color: var(--band-muted);
  margin-top: var(--sp-4); /* generous: the phone overhangs the mount by 8% */
}
.exhibit-provenance a {
  color: var(--band-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.exhibit-actions {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.exhibit-badge { display: inline-flex; }
.exhibit-badge img { display: block; height: 56px; width: auto; }
.exhibit-verify {
  font-size: var(--t-0); letter-spacing: 0.08em;
  color: var(--band-muted);
}

/* — P4: service-sheet vignettes — */
.svc-fig {
  margin: var(--sp-2) 0 var(--sp-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-2);
}
.svc-fig img, .svc-fig svg {
  display: block; width: 100%; height: auto;
  max-height: 150px; object-fit: contain;
  opacity: 0.95;
}

/* — P5/P6: crew figures (bots reference build + method handover) — */
.bots-fig { margin-bottom: var(--sp-5); }
.bots-fig img, .bots-fig svg {
  display: block; width: 100%; height: auto;
  max-width: 860px; margin: 0 auto;
}
.method-fig { margin-top: var(--sp-6); }
.method-fig img, .method-fig svg {
  display: block; width: 100%; height: auto;
  max-width: 760px; margin: 0 auto;
}
.bots-fig figcaption, .method-fig figcaption {
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-align: center;
  margin-top: var(--sp-2);
}

/* — P7: estimate receipt empty-state vignette — */
.empty-fig {
  display: block;
  width: 100%; max-width: 220px;
  margin: 0 auto var(--sp-2);
  opacity: 0.9;
}

/* — P8: about portrait — ink frame, register ticks, tenure stamp — */
.about-portrait.ink-frame {
  position: relative;
  border: 1.5px solid var(--ink);
  padding: 10px;
  background: var(--paper-1);
}
/* two corner register ticks (L-shapes), top-left & bottom-right */
.about-portrait.ink-frame::before,
.about-portrait.ink-frame::after {
  content: ''; position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
}
.about-portrait.ink-frame::before {
  top: -8px; left: -8px;
  border-top: 1.5px solid var(--ink-700);
  border-left: 1.5px solid var(--ink-700);
}
.about-portrait.ink-frame::after {
  bottom: -8px; right: -8px;
  border-bottom: 1.5px solid var(--ink-700);
  border-right: 1.5px solid var(--ink-700);
}
.stamp-tenure {
  position: absolute; right: -18px; bottom: -18px;
  width: 88px; height: auto;
  transform: rotate(-8deg);
  z-index: 2;
}
.about-plate {
  display: block;
  font-size: var(--t-0); letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-bottom: 2px;
}

/* — P9: contact portrait (caption spans are .mono; color set here) — */
.contact-portrait { margin-bottom: var(--sp-4); }
.contact-portrait img {
  display: block;
  width: 180px; height: 220px; object-fit: cover;
  border: 1px solid var(--line-strong);
  padding: 6px;
  background: var(--paper-1);
}
.contact-portrait figcaption {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: var(--sp-2);
  font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
}
.contact-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-0); letter-spacing: 0.08em;
  color: var(--live);
}
.live-dot {
  display: inline-block; flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--live-bright);
  animation: statusPulse 2.4s var(--ease-draw) infinite;
}

/* — P10: anatomy title block becomes a small cartouche table
   (overrides the §14 base: padding collapses to per-row) — */
.anatomy-titleblock {
  display: inline-block;
  padding: 0;
  text-align: left;
  border: 1px solid var(--line-strong);
  background: var(--paper-1);
}
.cartouche-row {
  display: block;
  padding: 6px 12px;
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
}
.cartouche-row + .cartouche-row { border-top: 1px solid var(--line); }
.cartouche-stamp {
  display: inline-block;
  color: var(--danger);
  border: 1.5px solid var(--danger);
  border-radius: var(--r-s);
  padding: 2px 8px;
  margin: 4px 12px 8px;
  font-weight: 500;
  transform: rotate(-6deg);
}

/* — P11: footer colophon maker's mark — */
.colophon-maker {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.colophon-mark {
  display: block; flex-shrink: 0;
  width: 40px; height: 40px;
  opacity: 0.7;
}
.colophon-motto {
  font-size: var(--t-0); letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* — imagery responsive — */
@media (max-width: 820px) {
  .exhibit-phone {
    position: static;
    width: 40%;
    margin: var(--sp-3) 0 0 auto;
    box-shadow: var(--shadow-card);
  }
}
@media (max-width: 640px) {
  .stamp-tenure { right: -8px; bottom: -8px; width: 72px; }
  .contact-portrait img { width: 140px; height: 172px; }
  .svc-fig img, .svc-fig svg { max-height: 120px; }
  .stamp-inprod { width: 56px; height: 56px; margin: calc(-1 * var(--sp-2)) 0; }
}

/* — imagery reduced-motion: the §24 global kill already zeroes these;
   explicit statics kept for parity with the .status-dot rule — */
@media (prefers-reduced-motion: reduce) {
  .ill-live { animation: none !important; opacity: 1 !important; }
  .live-dot { animation: none !important; box-shadow: none !important; }
}

/* inlined animated SVGs (scoped styles live inside each svg) */
.isvg { display: block; width: 100%; height: auto; }

/* ============================================================
   27. AGENT FLEET TEASER (home strip -> /agentes/)
   ============================================================ */
.fleet-teaser { padding: var(--sp-7) 0; }
.fleet-teaser-inner {
  display: grid; grid-template-columns: 1.4fr 0.6fr;
  gap: var(--sp-5); align-items: center;
}
.fleet-teaser-kicker {
  font-size: var(--t-0); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--live-bright); margin-bottom: var(--sp-2);
}
.fleet-teaser-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-6); color: var(--band-text);
  margin-bottom: var(--sp-2);
}
.fleet-teaser-sub {
  color: var(--band-muted); font-size: var(--t-2); max-width: 60ch;
  margin-bottom: var(--sp-4);
}
.fleet-teaser-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* on navy: paper button. base .btn-ink resting fill is ::after (z-2), hover is ::before (z-1). */
.fleet-teaser .btn-ink { color: var(--ink); border-color: var(--band-text); }
.fleet-teaser .btn-ink::after { background: var(--band-text); }
.fleet-teaser .btn-ink::before { background: var(--live-bright); }
.fleet-teaser .btn-ink:hover, .fleet-teaser .btn-ink:focus-visible { color: var(--ink); }
.fleet-teaser-note { font-size: var(--t-0); letter-spacing: 0.08em; color: var(--band-muted); }
.fleet-teaser-units {
  display: flex; flex-direction: column; gap: var(--sp-1);
  border-left: 1px solid var(--band-line); padding-left: var(--sp-4);
}
.ft-unit {
  font-size: var(--t-1); letter-spacing: 0.08em; color: var(--band-muted);
  border-bottom: 1px solid var(--band-line); padding: var(--sp-1) 0;
}
.ft-unit.ft-more { color: var(--live-bright); border-bottom: 0; }
@media (max-width: 820px) {
  .fleet-teaser-inner { grid-template-columns: 1fr; }
  .fleet-teaser-units { border-left: 0; padding-left: 0; border-top: 1px solid var(--band-line); padding-top: var(--sp-3); flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
  .ft-unit { border-bottom: 0; }
}

/* ============================================================
   28. OPTIMATIZA BRAND LAYER (additions only)
   Company rebrand of the Operating Ledger site. Tokens, motion
   primitives and existing rules above are UNCHANGED — this block
   only adds the wordmark, the "Puerto de Unidad" seal, the
   nameplate commerce row, the founder chip, the method kicker and
   the footer registry. All values via existing tokens.
   ============================================================ */

/* --- 1.1 wordmark: OPTIMATIZA (IBM Plex Mono 500, tracking .14em) --- */
/* color inherits from context (var(--ink) on paper, var(--band-text) on navy) */
.logo-word {
  font-family: var(--ff-mono); font-weight: 500;
  font-size: 15px; letter-spacing: 0.14em;
  color: inherit; text-transform: uppercase;
}
.site-footer .logo-word { font-size: 13px; }

/* --- 1.2 "Puerto de Unidad" seal (SVG inside existing .logo-seal box) --- */
/* currentColor is driven by the nav/footer context (ink on paper, band-text on navy) */
.seal-svg {
  display: block; width: 100%; height: 100%;
  color: inherit;
}
.seal-dot { animation: sealPulse 2.4s ease-in-out infinite; }
@keyframes sealPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
/* Injerto G9 (progressive enhancement): on nav-logo hover the status dot
   runs the outer ring once. Silent fallback where offset-path is unsupported. */
.nav-logo:hover .seal-dot {
  offset-path: circle(26px at 32px 32px);
  animation: sealOrbit 1.6s ease-in-out 1;
}
@keyframes sealOrbit {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* --- 4.4 nameplate commerce row (agent card + spec sheet) --- */
.ag-card-commerce {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-2); row-gap: var(--sp-1);
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono); font-size: var(--t-0);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ag-price { color: var(--band-text); font-weight: 500; }
.ag-cta-quote, .ag-cta-ficha {
  position: relative; color: var(--band-accent);
  transition: color var(--dur-micro) ease;
}
.ag-cta-ficha { margin-left: auto; }
.ag-cta-quote::after, .ag-cta-ficha::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-draw);
}
.ag-cta-quote:hover, .ag-cta-ficha:hover { color: var(--band-text); }
.ag-cta-quote:hover::after, .ag-cta-ficha:hover::after { transform: scaleX(1); }

/* --- 4.7 G3 founder chip (clone of .chip-inprod, sits beside it) --- */
.chip-founder {
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ok-mark);
  border: 1px solid rgba(16,185,129,0.5);
  border-radius: var(--r-s);
  padding: 2px var(--sp-1);
}

/* --- 4.6 G4 method kicker (mono steel, tracking .18em) --- */
.method-kicker {
  font-family: var(--ff-mono); font-size: var(--t-0); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--steel);
}

/* --- 4.14 footer registry + descriptor (mono small) --- */
.footer-registry {
  font-family: var(--ff-mono); font-size: var(--t-0);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.footer-descriptor {
  font-family: var(--ff-mono); font-size: var(--t-0);
  letter-spacing: 0.04em;
  color: var(--steel);
}

/* --- reduced motion: kill seal pulse + hover orbit --- */
@media (prefers-reduced-motion: reduce) {
  .seal-dot { animation: none !important; opacity: 1 !important; }
  .nav-logo:hover .seal-dot { animation: none !important; offset-path: none !important; }
}

/* ---- mascot badge logo (replaces the abstract seal) ---- */
.logo-seal { display: inline-flex; width: 40px; height: 40px; flex: 0 0 auto; }
.logo-badge {
  width: 100%; height: 100%; display: block; border-radius: 50%;
  transition: transform .3s var(--ease-out, ease), box-shadow .3s ease;
}
.nav-logo:hover .logo-badge, .footer-brand a:hover .logo-badge {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.25), 0 4px 14px rgba(20,184,166,0.3);
}
@media (prefers-reduced-motion: reduce) { .logo-badge { transition: none; } }

/* ============================================================
   30. FLOW CANVAS LAYER — Flowise-style hero window, animated
       edges, chat panel, end-to-end process scroll. 2026-07.
   ============================================================ */

/* ---- hero re-layout: centered text over the workflow window ---- */
.hero-grid { display: block; }
.hero-main { max-width: 900px; margin: 0 auto; text-align: center; }
.hero-subtitle { margin-inline: auto; }
.hero-actions { justify-content: center; }
.hero-chips { text-align: center; }
.hero-title em {
  font-style: italic;
  background: var(--grad-ai);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---- the workflow editor window ---- */
.fw {
  position: relative;
  margin-top: var(--sp-6);
  background: rgba(11,18,32,0.88);
  border: 1px solid var(--node-line);
  border-radius: 18px;
  box-shadow: var(--shadow-modal), 0 0 80px rgba(20,184,166,0.06);
  overflow: hidden;
}
.fw::before { /* gradient hairline on top edge */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-ai); opacity: 0.85; z-index: 1;
}
.fw-titlebar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 12px var(--sp-3);
  font-size: var(--t-0); font-weight: 500; letter-spacing: 0.14em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--node-line);
  background: rgba(6,11,20,0.6);
}
.fw-dots { display: inline-flex; gap: 6px; }
.fw-dots i {
  width: 10px; height: 10px; border-radius: 50%; display: block;
}
.fw-dots i:nth-child(1) { background: #F87171; }
.fw-dots i:nth-child(2) { background: #FBBF24; }
.fw-dots i:nth-child(3) { background: #34D399; }
.fw-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-livechip {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--live); white-space: nowrap;
}

.fw-body {
  display: grid; grid-template-columns: 1.55fr 1fr;
  min-height: 470px;
}

/* ---- node canvas ---- */
.fw-canvas {
  position: relative; overflow: hidden;
  background-image: radial-gradient(rgba(148,163,184,0.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  min-height: 470px;
}
.fw-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fw-e-base { fill: none; stroke: rgba(148,163,184,0.20); stroke-width: 1.5; }
.fw-e-flow {
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 6 10; opacity: 0;
  transition: opacity .3s ease;
  filter: drop-shadow(0 0 4px rgba(20,184,166,0.35));
}
.fw-e-flow.on { opacity: 1; animation: fwDash 0.9s linear infinite; }
.fw-e-flow.on-static { opacity: 1; }
@keyframes fwDash { to { stroke-dashoffset: -16; } }
.fw-packet { filter: drop-shadow(0 0 6px currentColor); }

.fw-node {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  max-width: 36%;
  padding: 10px 14px 10px 10px;
  background: var(--node-bg);
  border: 1px solid var(--node-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(2,8,20,0.5);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.fw-n-start  { left: 4%;  top: 42%; }
.fw-n-router { left: 22%; top: 36%; }
.fw-node[data-node="ventas"]  { left: 58%; top: 7%; }
.fw-node[data-node="cobros"]  { left: 58%; top: 38%; }
.fw-node[data-node="soporte"] { left: 58%; top: 70%; }

.fw-nico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px; font-size: 17px;
}
.fw-ico-start  { background: rgba(52,211,153,0.14);  color: #34D399; }
.fw-ico-router { background: rgba(236,72,153,0.14);  color: #F472B6; }
.fw-ico-teal   { background: rgba(20,184,166,0.14);  color: #2DD4BF; }
.fw-ico-blue   { background: rgba(59,130,246,0.14);  color: #60A5FA; }
.fw-ico-violet { background: rgba(139,92,246,0.16);  color: #A78BFA; }

.fw-ntext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fw-ntext strong {
  font-size: 0.875rem; font-weight: 600; color: var(--ink); line-height: 1.2;
  white-space: nowrap;
}
.fw-nsub { font-size: 0.625rem; letter-spacing: 0.06em; color: var(--ink-dim); white-space: nowrap; }
.fw-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--ink-700);
  border: 1px solid var(--node-line); border-radius: 6px;
  padding: 2px 7px; width: max-content; max-width: 100%;
  background: rgba(148,163,184,0.06);
  white-space: nowrap;
}
.fw-chip i { font-size: 11px; color: var(--live); }

.fw-badge {
  position: absolute; top: -8px; right: -8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: #10B981; color: #04110C; font-size: 12px;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fw-node.is-done .fw-badge { transform: scale(1); }
.fw-node.is-done { border-color: rgba(16,185,129,0.45); }
.fw-node.is-running {
  border-color: rgba(20,184,166,0.6);
  box-shadow: var(--glow-teal), 0 8px 24px rgba(2,8,20,0.5);
  animation: fwNodePulse 1.1s ease-in-out infinite;
}
@keyframes fwNodePulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* ---- chat panel ---- */
.fw-chat {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--node-line);
  background: rgba(8,13,23,0.85);
  min-width: 0;
}
.fw-chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 10px var(--sp-3);
  font-size: var(--t-0); font-weight: 500; letter-spacing: 0.12em;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--node-line);
}
.fw-plate { color: var(--live); white-space: nowrap; }
.fw-chat-log {
  flex: 1; overflow-y: auto; padding: var(--sp-3);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 190px; max-height: 300px;
  scrollbar-width: thin; scrollbar-color: rgba(148,163,184,0.25) transparent;
}
.fwc-msg { display: flex; gap: 8px; align-items: flex-end; }
.fwc-msg p {
  margin: 0; font-size: 0.8125rem; line-height: 1.5;
  padding: 9px 12px; border-radius: 12px;
  max-width: 92%;
}
.fwc-msg[data-side="user"] { justify-content: flex-end; }
.fwc-msg[data-side="user"] p {
  background: rgba(91,168,232,0.13);
  border: 1px solid rgba(91,168,232,0.22);
  color: var(--ink-700);
  border-bottom-right-radius: 4px;
}
.fwc-msg[data-side="bot"] p {
  background: rgba(20,184,166,0.09);
  border: 1px solid rgba(20,184,166,0.2);
  color: var(--ink-700);
  border-bottom-left-radius: 4px;
}
.fwc-t { font-size: 0.625rem; color: var(--ink-dim); flex-shrink: 0; padding-bottom: 4px; }
.fwc-ava { border-radius: 50%; flex-shrink: 0; }
.fwc-seal {
  align-self: center; text-align: center;
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em;
  color: var(--ok-text);
  border: 1px solid rgba(16,185,129,0.4); border-radius: 6px;
  padding: 4px 10px;
  background: rgba(16,185,129,0.07);
}
.fwc-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.fwc-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-dim);
  animation: fwcBlink 1s ease-in-out infinite;
}
.fwc-dots i:nth-child(2) { animation-delay: 0.16s; }
.fwc-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes fwcBlink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.fw-trace {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px var(--sp-3);
  border-top: 1px solid var(--node-line);
  font-size: 0.6563rem; letter-spacing: 0.04em; color: var(--ink-dim);
  min-height: 74px;
}
.fw-trace-row { display: inline-flex; align-items: center; gap: 6px; }
.fw-trace-row i { color: var(--ok-mark); font-size: 11px; }
.fw-input {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 10px var(--sp-3);
  border-top: 1px solid var(--node-line);
  font-size: var(--t-0); color: var(--ink-dim); letter-spacing: 0.08em;
}
.fw-input i { color: var(--live); font-size: 15px; }

.fw-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  flex-wrap: wrap;
  padding: 12px var(--sp-3);
  border-top: 1px solid var(--node-line);
  background: rgba(6,11,20,0.6);
  font-size: var(--t-0); letter-spacing: 0.1em; color: var(--ink-dim);
}
.fw-cta {
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.08em;
  color: var(--live);
  border-bottom: 1px solid rgba(45,212,191,0.5);
  padding-bottom: 1px;
  transition: color var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
.fw-cta:hover { color: var(--steel-deep); border-color: currentColor; }

/* ---- fw responsive ---- */
@media (max-width: 899px) {
  .fw-body { grid-template-columns: 1fr; }
  .fw-canvas { min-height: 360px; }
  .fw-chat { border-left: none; border-top: 1px solid var(--node-line); }
  .fw-node { max-width: 44%; padding: 8px 10px 8px 8px; gap: 7px; }
  .fw-ntext strong { font-size: 0.75rem; }
  .fw-nico { width: 28px; height: 28px; font-size: 14px; }
  .fw-n-start  { left: 2%;  top: 40%; }
  .fw-n-router { left: 17%; top: 27%; }
  .fw-node[data-node="ventas"]  { left: 58%; top: 5%; }
  .fw-node[data-node="cobros"]  { left: 58%; top: 44%; }
  .fw-node[data-node="soporte"] { left: 58%; top: 76%; }
}
@media (max-width: 540px) {
  .fw-nsub, .fw-chip { display: none; }
  .fw-canvas { min-height: 280px; }
  .fw-node { max-width: 46%; }
  .fw-n-start { top: 44%; }
  .fw-n-router { left: 26%; top: 38%; }
}

/* ---- 00 end-to-end process scroll (#proceso) ---- */
.proc-wrap { position: relative; }
.proc-rail {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start;
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
}
.proc-line {
  position: absolute; left: 26px; right: 26px; top: 26px;
  height: 2px; background: rgba(148,163,184,0.15);
  z-index: 0; display: block;
}
.proc-fill {
  display: block; height: 100%; width: 0;
  background: var(--grad-ai);
  box-shadow: 0 0 12px rgba(20,184,166,0.5);
  transition: width .6s ease;
}
.proc-node {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 110px; text-align: center;
  cursor: pointer;
}
.proc-node:hover .proc-dot { border-color: rgba(20,184,166,0.55); color: var(--live-bright); }
.proc-node:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 8px; }
.proc-static .proc-node { cursor: default; }
.proc-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--node-bg);
  border: 1px solid var(--node-line);
  color: var(--ink-dim); font-size: 22px;
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.proc-node.is-on .proc-dot {
  border-color: rgba(20,184,166,0.55); color: var(--live-bright);
  box-shadow: var(--glow-teal);
}
.proc-name { font-size: var(--t-0); letter-spacing: 0.12em; color: var(--ink-dim); }
.proc-name b { color: var(--ink-700); font-weight: 500; }
.proc-node.is-on .proc-name { color: var(--ink-700); }

.proc-stage { position: relative; min-height: 240px; }
.proc-card {
  position: absolute; inset: 0;
  max-width: 760px; margin: 0 auto;
  background: var(--paper-1);
  border: 1px solid var(--node-line);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-5);
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  height: max-content;
}
.proc-card.is-on { opacity: 1; transform: none; pointer-events: auto; }
.proc-meta {
  display: inline-block; margin-bottom: var(--sp-2);
  font-size: var(--t-0); font-weight: 500; letter-spacing: 0.14em;
  color: var(--live);
}
.proc-h {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-5); color: var(--ink); margin-bottom: var(--sp-1);
}
.proc-cta { margin-top: var(--sp-5); text-align: center; font-size: var(--t-3); }

/* static fallback: mobile & reduced motion — all cards stacked */
.proc-static .proc-stage { min-height: 0; display: grid; gap: var(--sp-3); }
.proc-static .proc-card { position: static; opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 899px) {
  .proc-rail { flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
  .proc-line { display: none; }
  .proc-node { width: 96px; }
}

/* ---- dark polish: cards glow on hover (vitrina + estimator) ---- */
#flota .ag-card:hover,
#flota .ag-card:focus-within {
  border-color: rgba(20,184,166,0.45);
  box-shadow: var(--glow-teal), var(--shadow-card);
}
.quote-option-card input:checked + .quote-option-inner {
  box-shadow: var(--glow-teal);
}
.navbar.scrolled { box-shadow: 0 12px 32px rgba(2,8,20,0.55); }

/* reduced motion: kill flow loops */
@media (prefers-reduced-motion: reduce) {
  .fw-e-flow.on { animation: none; }
  .fwc-dots i { animation: none; }
  .fw-node.is-running { animation: none; }
}

/* mobile: dochead strip must never force horizontal scroll */
@media (max-width: 640px) {
  .dochead-strip { flex-wrap: wrap; row-gap: 4px; }
  .dochead-left, .dochead-mid, .dochead-right {
    white-space: normal; overflow-wrap: anywhere;
  }
}

/* proc: autoplay indicator (the section no longer pins the scroll) */
.proc-hint {
  margin-top: var(--sp-5);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--t-0); font-weight: 500; letter-spacing: 0.14em;
  color: var(--live);
  transition: opacity .4s ease;
}
.proc-hint i { font-size: 13px; animation: procPulse 2s ease-in-out infinite; }
@keyframes procPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.proc-static .proc-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .proc-hint i { animation: none; } }

/* ---- A1 Bitcoin advisory annex: the one orange room in the house ---- */
.btc-annex { position: relative; }
.btc-annex::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(247,147,26,0.06), transparent 55%);
}
.btc-chips {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  font-size: var(--t-0); font-weight: 500; letter-spacing: 0.12em;
  color: var(--btc);
  border: 1px solid rgba(247,147,26,0.35); border-radius: var(--r-pill);
  padding: 8px 16px;
  background: rgba(247,147,26,0.06);
}
.btc-chips i { font-size: 15px; }

.btc-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-4);
  align-items: start; max-width: 1020px;
}
.btc-card {
  position: relative;
  background: var(--node-bg);
  border: 1px solid var(--node-line);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.btc-card:hover { transform: translateY(-3px); }
.btc-featured { border-color: rgba(247,147,26,0.45); }
.btc-featured::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #B45309, #F7931A);
}
.btc-featured:hover, .btc-card:hover {
  border-color: rgba(247,147,26,0.55);
  box-shadow: 0 0 0 1px rgba(247,147,26,0.3), 0 0 32px rgba(247,147,26,0.14), var(--shadow-card);
}
.btc-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  font-size: var(--t-0); font-weight: 500; letter-spacing: 0.12em;
}
.btc-plan { color: var(--ink); }
.btc-badge {
  color: var(--btc);
  border: 1px solid rgba(247,147,26,0.4); border-radius: 6px;
  padding: 3px 9px;
  background: rgba(247,147,26,0.07);
  white-space: nowrap;
}
.btc-price {
  font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 500; line-height: 1;
  color: var(--btc);
  margin-bottom: var(--sp-3);
}
.btc-per { font-size: var(--t-2); color: var(--ink-dim); font-weight: 400; }
.btc-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 10px; }
.btc-list li {
  position: relative; padding-left: 26px;
  font-size: var(--t-2); color: var(--ink-body); line-height: 1.5;
}
.btc-list li::before {
  content: '\20BF'; /* ₿ */
  position: absolute; left: 0; top: 0;
  font-family: var(--ff-mono); font-weight: 500;
  color: var(--btc); opacity: 0.9;
}
.btn-btc {
  width: 100%;
  position: relative; overflow: hidden; isolation: isolate;
  color: #1A0E02; border-color: transparent; border-radius: 10px;
  transition: box-shadow var(--dur-micro) ease, transform var(--dur-micro) ease;
}
.btn-btc::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(120deg, #D97706, #F7931A);
}
.btn-btc::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.22);
  transform: translateY(101%); transition: transform .25s var(--ease-draw);
}
.btn-btc:hover::before, .btn-btc:focus-visible::before { transform: translateY(0); }
.btn-btc:hover, .btn-btc:focus-visible {
  box-shadow: 0 0 28px rgba(247,147,26,0.35); transform: translateY(-1px);
}
.btn-btc-ghost { color: var(--btc); }
.btn-btc-ghost::after { background: rgba(247,147,26,0.1); }
.btn-btc-ghost::before { background: rgba(247,147,26,0.14); }
.btc-annex .btn-btc-ghost { border: 1px solid rgba(247,147,26,0.45); }
.btc-note {
  margin-top: var(--sp-5); max-width: 72ch;
  font-size: var(--t-0); letter-spacing: 0.08em; line-height: 1.7;
  color: var(--ink-dim);
}
@media (max-width: 899px) {
  .btc-grid { grid-template-columns: 1fr; }
}

/* btc annex v2: 3-tier ladder */
.btc-grid { grid-template-columns: repeat(3, 1fr); max-width: none; }
.btc-kicker {
  font-size: var(--t-0); font-weight: 500; letter-spacing: 0.14em;
  color: var(--ink-dim); margin-bottom: var(--sp-2);
}
.btc-ribbon {
  position: absolute; top: 14px; right: -34px;
  transform: rotate(38deg);
  font-size: 0.5938rem; font-weight: 500; letter-spacing: 0.14em;
  background: linear-gradient(120deg, #D97706, #F7931A); color: #1A0E02;
  padding: 4px 38px;
}
.btc-annual {
  margin: -6px 0 var(--sp-3);
  font-size: var(--t-0); font-weight: 500; letter-spacing: 0.1em;
  color: var(--ok-text);
}
.btc-slash { color: var(--ink-dim); font-size: 0.6em; margin: 0 2px; }
.btc-fund {
  background: linear-gradient(180deg, rgba(247,147,26,0.05), rgba(14,22,38,0) 40%), var(--node-bg);
  border-color: rgba(247,147,26,0.35);
}
.btc-example {
  margin: 0 0 var(--sp-3);
  font-size: 0.6563rem; letter-spacing: 0.04em; line-height: 1.7;
  color: var(--ink-dim);
  border-left: 2px solid rgba(247,147,26,0.5);
  padding-left: 10px;
}
@media (max-width: 1099px) {
  .btc-grid { grid-template-columns: 1fr; max-width: 560px; }
}

/* btc v3: equal-height cards, CTAs on one baseline */
.btc-grid { align-items: stretch; }
.btc-card { display: flex; flex-direction: column; }
.btc-card .btn-btc { margin-top: auto; }
.btc-example { margin-top: var(--sp-3); }

/* Bitcoin Academy credential callout */
.btc-academy {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(247,147,26,0.05);
  border: 1px solid rgba(247,147,26,0.25);
  border-left: 3px solid var(--btc);
  border-radius: var(--r-0);
}
.btc-academy-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; font-size: 22px;
  background: rgba(247,147,26,0.12); color: var(--btc);
}
.btc-academy-text { margin: 0; font-size: var(--t-2); color: var(--ink-body); line-height: 1.6; }
.btc-academy-text strong { color: var(--ink); }
.btc-academy-link {
  flex-shrink: 0;
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.06em;
  color: var(--btc);
  border-bottom: 1px solid rgba(247,147,26,0.5);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--dur-micro) ease;
}
.btc-academy-link:hover { color: #FFB347; }
@media (max-width: 899px) {
  .btc-academy { flex-direction: column; align-items: flex-start; }
}

/* btc fund: entry-window line + house rule */
.btc-window {
  display: flex; align-items: center; gap: 7px;
  margin: -4px 0 var(--sp-3);
  font-size: var(--t-0); font-weight: 500; letter-spacing: 0.08em;
  color: var(--btc);
}
.btc-window-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--btc);
  box-shadow: 0 0 8px rgba(247,147,26,0.7);
}
.btc-rule { border-left-color: var(--ok-mark); color: var(--ink-body); }

/* a11y: marquee pausable desde teclado */
.marquee:focus-within .marquee-track { animation-play-state: paused; }