/* =====================================================================
   DASVO · OPERATING LAYER — Sistema visual
   ---------------------------------------------------------------------
   Un solo lenguaje: superficies arquitectonicas, luz coherente,
   profundidad real y color que solo aparece cuando algo ocurre.
   Prefijo unico: .os-
   ===================================================================== */

/* =====================================================================
   00 · TIPOGRAFIA AUTOALOJADA
   Solo el subset latin se precarga: cubre el espanol completo.
   ===================================================================== */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Fuente de reserva con metricas ajustadas a Inter: mientras la
   tipografia real carga, el texto ocupa el mismo espacio y la pagina no
   se desplaza (CLS 0). */
@font-face {
  font-family: "Inter fallback";
  /* Arial primero: las metricas de abajo estan calculadas sobre Arial. */
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  /* Medido en navegador: Inter es 1,0599x mas ancha que Arial. */
  size-adjust: 105.99%;
}

/* =====================================================================
   01 · TOKENS
   ===================================================================== */
:root {
  /* --- Superficies ------------------------------------------------- */
  --surface-canvas:   #F3F5F8;
  --surface-canvas-2: #EDF0F5;
  --surface-base:     #FFFFFF;
  --surface-raised:   #FFFFFF;
  --surface-inset:    #E9EDF3;
  --surface-inset-2:  #E2E7EF;
  --surface-ink:      #0B111C;
  --surface-ink-2:    #131B29;
  --surface-glass:    rgba(255,255,255,.66);
  --surface-glass-2:  rgba(255,255,255,.78);

  /* --- Tinta -------------------------------------------------------- */
  --ink-900: #0A111F;
  --ink-700: #27334A;
  --ink-600: #3D4A62;
  --ink-500: #5A6880;
  --ink-400: #5F6C82;
  --ink-300: #97A3B5;
  --ink-inv: #EAF0FA;
  --ink-inv-2: #9DAABE;

  /* --- Lineas ------------------------------------------------------- */
  --line:        rgba(10,17,31,.085);
  --line-2:      rgba(10,17,31,.14);
  --line-strong: rgba(10,17,31,.22);
  --line-inv:    rgba(255,255,255,.10);
  --line-inv-2:  rgba(255,255,255,.18);

  /* --- Senal: color solo cuando algo ocurre -------------------------- */
  --signal:       #1B54F5;
  --signal-600:   #1745D6;
  --signal-400:   #4E80FF;
  --signal-200:   #A9C4FF;
  --signal-050:   #EDF2FF;
  --mineral:      #0E9C99;
  --mineral-200:  #9DE0DE;
  --mineral-050:  #E7F7F6;
  --emerald:      #0B7443;
  --emerald-050:  #E6F5ED;
  --amber:        #8C6104;
  --amber-050:    #FBF2DF;
  --violet:       #5B4BD6;

  /* --- Luz global: una sola fuente, arriba-izquierda ----------------- */
  --light-x: 28%;
  --hl-top:  inset 0 1px 0 rgba(255,255,255,.92);

  /* --- Profundidad -------------------------------------------------- */
  --d-1: 0 1px 1.5px rgba(10,17,31,.045), 0 2px 6px -1px rgba(10,17,31,.05);
  --d-2: 0 1px 2px rgba(10,17,31,.05), 0 8px 18px -6px rgba(10,17,31,.10);
  --d-3: 0 2px 4px rgba(10,17,31,.05), 0 18px 38px -12px rgba(10,17,31,.16);
  --d-4: 0 4px 10px rgba(10,17,31,.06), 0 36px 72px -20px rgba(10,17,31,.24);
  --d-5: 0 8px 18px rgba(10,17,31,.07), 0 60px 120px -30px rgba(10,17,31,.30);
  --d-inset: inset 0 1px 2px rgba(10,17,31,.10), inset 0 -1px 0 rgba(255,255,255,.7);
  --d-signal: 0 0 0 1px rgba(27,84,245,.20), 0 10px 30px -8px rgba(27,84,245,.28);

  /* --- Desenfoque por nivel de vidrio -------------------------------- */
  --blur-1: 10px;
  --blur-2: 16px;
  --blur-3: 24px;
  --blur-4: 34px;

  /* --- Radios ------------------------------------------------------- */
  --r-2: 2px; --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-10: 10px;
  --r-14: 14px; --r-18: 18px; --r-24: 24px; --r-32: 32px; --r-full: 999px;

  /* --- Espacio (rejilla de 4) ---------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --s-11: 96px; --s-12: 128px;

  /* --- Profundidad Z -------------------------------------------------*/
  --z-base: 10; --z-raised: 20; --z-active: 30;
  --z-float: 40; --z-nav: 60; --z-overlay: 80;

  /* --- Movimiento ---------------------------------------------------- */
  --t-micro: 160ms;
  --t-ui:    280ms;
  --t-scene: 720ms;
  --t-long:  1150ms;
  --e-standard: cubic-bezier(.2,.7,.2,1);
  --e-enter:    cubic-bezier(.16,1,.3,1);
  --e-exit:     cubic-bezier(.5,0,.85,.4);
  --e-spring:   cubic-bezier(.34,1.4,.5,1);

  /* --- Contenedores --------------------------------------------------*/
  --w-page:   1240px;
  --w-wide:   1440px;
  --gutter:   clamp(20px, 4vw, 44px);
  --nav-h:    64px;

  /* --- Tipo: escala fluida ------------------------------------------- */
  --f-display: clamp(2.85rem, 1.35rem + 5.0vw, 5.4rem);
  --f-h1:      clamp(2.35rem, 1.30rem + 3.5vw, 4.05rem);
  --f-h2:      clamp(1.85rem, 1.15rem + 2.3vw, 3.05rem);
  --f-h3:      clamp(1.30rem, 1.05rem + 0.9vw, 1.72rem);
  --f-h4:      clamp(1.06rem, 0.98rem + 0.35vw, 1.20rem);
  --f-lead:    clamp(1.06rem, 0.98rem + 0.42vw, 1.28rem);
  --f-body:    1rem;
  --f-sm:      .9075rem;
  --f-xs:      .8125rem;
  --f-micro:   .6875rem;

  --font-sans: "Inter var", "Inter", "Inter fallback", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
               "Cascadia Mono", Menlo, Consolas, monospace;
}

/* =====================================================================
   02 · BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html.os {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  html.os { scroll-behavior: auto; }
}

html.os body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--f-body);
  line-height: 1.62;
  font-weight: 400;
  color: var(--ink-600);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv11" 1, "ss01" 1;
  overflow-x: clip;
}

html.os img, html.os svg, html.os video { display: block; max-width: 100%; }
html.os img { height: auto; }

:where(html.os h1, html.os h2, html.os h3, html.os h4) {
  margin: 0;
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
:where(html.os p) { margin: 0; }
:where(html.os a) { color: inherit; text-decoration: none; }
:where(html.os ul, html.os ol) { margin: 0; padding: 0; list-style: none; }
html.os button, html.os input, html.os select, html.os textarea { font: inherit; color: inherit; }

html.os :focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: var(--r-6);
}
html.os :focus:not(:focus-visible) { outline: none; }

.os-skip {
  position: absolute; left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--surface-base); color: var(--ink-900);
  border-radius: var(--r-8); box-shadow: var(--d-3);
  font-size: var(--f-sm); font-weight: 600;
  transition: top var(--t-micro) var(--e-standard);
}
.os-skip:focus { top: 12px; }

html.os ::selection { background: var(--signal-200); color: var(--ink-900); }
.os-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   03 · TIPOGRAFIA COMPUESTA
   ===================================================================== */
.os-display { font-size: var(--f-display); letter-spacing: -0.042em; line-height: .98; }
.os-h1 { font-size: var(--f-h1); letter-spacing: -0.038em; line-height: 1.02; }
.os-h2 { font-size: var(--f-h2); letter-spacing: -0.034em; line-height: 1.06; }
.os-h3 { font-size: var(--f-h3); letter-spacing: -0.022em; line-height: 1.18; }
.os-h4 { font-size: var(--f-h4); letter-spacing: -0.012em; line-height: 1.3; font-weight: 600; }

.os-lead {
  font-size: var(--f-lead);
  line-height: 1.55;
  color: var(--ink-500);
  letter-spacing: -0.011em;
  max-width: 56ch;
  text-wrap: pretty;
}
.os-body { color: var(--ink-500); max-width: 68ch; text-wrap: pretty; }
.os-sm  { font-size: var(--f-sm);  color: var(--ink-500); }
.os-xs  { font-size: var(--f-xs);  color: var(--ink-400); }

.os-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--f-micro);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-feature-settings: "tnum" 1;
}
.os-label::before {
  content: ""; width: 5px; height: 5px; border-radius: 1px;
  background: var(--signal); flex: none;
  box-shadow: 0 0 0 3px rgba(27,84,245,.12);
}
.os-label--plain::before { display: none; }
.os-label--signal { color: var(--signal-600); }

.os-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.os-key { color: var(--signal-600); }
.os-dim { color: var(--ink-400); }
.os-mono { font-family: var(--font-mono); font-size: var(--f-xs); letter-spacing: -0.01em; }

/* =====================================================================
   04 · LAYOUT
   ===================================================================== */
.os-wrap  { width: min(100% - (var(--gutter) * 2), var(--w-page)); margin-inline: auto; }
.os-wrap--wide { width: min(100% - (var(--gutter) * 2), var(--w-wide)); margin-inline: auto; }
.os-wrap--text { width: min(100% - (var(--gutter) * 2), 760px); margin-inline: auto; }

.os-section { position: relative; padding-block: clamp(72px, 9vw, 152px); }
.os-section--tight { padding-block: clamp(52px, 6vw, 96px); }
.os-section--alt { background: var(--surface-canvas-2); }
.os-section--base { background: var(--surface-base); }

.os-head { max-width: 800px; }
.os-head > * + * { margin-top: var(--s-5); }
.os-head--center { margin-inline: auto; text-align: center; }
.os-head--center .os-lead { margin-inline: auto; }
.os-head--center .os-label { justify-content: center; }

.os-grid { display: grid; gap: var(--s-6); }
.os-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.os-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.os-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.os-split {
  display: grid; gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
}
.os-split--copy-right { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }

.os-stack > * + * { margin-top: var(--s-4); }
.os-stack-6 > * + * { margin-top: var(--s-6); }
.os-stack-8 > * + * { margin-top: var(--s-8); }

.os-rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.os-rule--soft { background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent); }

/* =====================================================================
   05 · FONDOS Y CAMPO DE LUZ
   ===================================================================== */
.os-field { position: relative; isolation: isolate; }
.os-field > * { position: relative; z-index: 1; }

.os-field::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / 88px 88px;
  -webkit-mask-image: radial-gradient(120% 90% at var(--light-x) 6%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at var(--light-x) 6%, #000 0%, transparent 72%);
  opacity: .85;
}

.os-lume { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.os-lume::before, .os-lume::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(90px);
}
.os-lume::before {
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  left: -12%; top: -32%;
  background: radial-gradient(circle, rgba(27,84,245,.13), transparent 66%);
}
.os-lume::after {
  width: 48vw; height: 48vw; max-width: 700px; max-height: 700px;
  right: -10%; bottom: -30%;
  background: radial-gradient(circle, rgba(14,156,153,.10), transparent 66%);
}

.os-paper::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .42;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* =====================================================================
   06 · MATERIALES
   ===================================================================== */
.os-plate {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9)),
    var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  box-shadow: var(--hl-top), var(--d-2);
}
.os-plate--flat  { box-shadow: var(--hl-top), var(--d-1); }
.os-plate--raise { box-shadow: var(--hl-top), var(--d-3); }
.os-plate--float { box-shadow: var(--hl-top), var(--d-4); }

.os-plate::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 34%);
  opacity: .8;
}
.os-plate > * { position: relative; }

.os-glass-1, .os-glass-2, .os-glass-3, .os-glass-4 {
  position: relative;
  border-radius: var(--r-18);
  background: var(--surface-glass);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(10,17,31,.04),
    var(--d-2);
}
.os-glass-1 { -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.5); backdrop-filter: blur(var(--blur-1)) saturate(1.5); }
.os-glass-2 { -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.6); backdrop-filter: blur(var(--blur-2)) saturate(1.6); background: var(--surface-glass-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(10,17,31,.045), var(--d-3); }
.os-glass-3 { -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.7); backdrop-filter: blur(var(--blur-3)) saturate(1.7); background: rgba(255,255,255,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(10,17,31,.05), var(--d-4); }
.os-glass-4 { -webkit-backdrop-filter: blur(var(--blur-4)) saturate(1.8); backdrop-filter: blur(var(--blur-4)) saturate(1.8); background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,1), var(--d-5); }

.os-glass-1::after, .os-glass-2::after, .os-glass-3::after, .os-glass-4::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(155deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(0deg, rgba(27,84,245,.045) 0%, rgba(255,255,255,0) 42%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .os-glass-1, .os-glass-2, .os-glass-3, .os-glass-4 { background: rgba(255,255,255,.97); }
}

.os-inset {
  background: var(--surface-inset);
  border: 1px solid rgba(10,17,31,.06);
  border-radius: var(--r-14);
  box-shadow: var(--d-inset);
}
.os-inset--deep { background: var(--surface-inset-2); }

.os-screen {
  position: relative;
  background-color: var(--surface-ink);
  background-image:
    radial-gradient(90% 70% at 30% 0%, rgba(27,84,245,.18), transparent 62%),
    linear-gradient(180deg, var(--surface-ink-2), var(--surface-ink));
  color: var(--ink-inv);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--d-5);
  overflow: hidden;
}
.os-screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--line-inv) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, var(--line-inv) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(110% 80% at 30% 0%, #000, transparent 78%);
          mask-image: radial-gradient(110% 80% at 30% 0%, #000, transparent 78%);
  opacity: .7;
}
.os-screen h1, .os-screen h2, .os-screen h3, .os-screen h4,
.os-screen b, .os-screen strong { color: #fff; }
.os-screen p, .os-screen .os-sm, .os-screen .os-xs { color: var(--ink-inv-2); }
.os-screen .os-label { color: var(--ink-inv-2); }

.os-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 8px;
  border-radius: var(--r-full);
  background: var(--surface-base);
  border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-1);
  font-size: var(--f-xs); font-weight: 500; color: var(--ink-600);
  white-space: nowrap;
}
.os-chip svg { width: 14px; height: 14px; flex: none; color: var(--ink-400); }
.os-chip--inset { background: var(--surface-inset); box-shadow: var(--d-inset); border-color: transparent; }

/* =====================================================================
   07 · CONTROLES
   Superficies que responden a la luz, la posicion y la presion.
   ===================================================================== */
.os-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px;
  padding: 12px 20px;
  border: 0; border-radius: var(--r-full);
  font-size: var(--f-sm); font-weight: 600; letter-spacing: -0.008em;
  cursor: pointer;
  isolation: isolate;
  transform: translateZ(0);
  transition:
    transform var(--t-micro) var(--e-standard),
    box-shadow var(--t-ui) var(--e-standard),
    background-color var(--t-ui) var(--e-standard),
    color var(--t-ui) var(--e-standard);
}
.os-btn svg { width: 17px; height: 17px; flex: none; transition: transform var(--t-ui) var(--e-spring); }

/* Primario: bloque de senal con canto iluminado. */
.os-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--signal-400) -30%, var(--signal) 42%, var(--signal-600) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 1px 2px rgba(10,17,31,.16),
    0 10px 24px -10px rgba(27,84,245,.55);
}
.os-btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 4px rgba(10,17,31,.16),
    0 18px 34px -12px rgba(27,84,245,.6);
  transform: translateY(-1px);
}
.os-btn--primary:active { transform: translateY(1px) scale(.988); box-shadow: inset 0 2px 4px rgba(0,0,0,.22), 0 1px 2px rgba(10,17,31,.2); }

/* Secundario: placa de vidrio. */
.os-btn--ghost {
  color: var(--ink-700);
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.5);
          backdrop-filter: blur(var(--blur-1)) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px var(--line-2), var(--d-1);
}
.os-btn--ghost:hover { background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px var(--line-strong), var(--d-2); transform: translateY(-1px); }
.os-btn--ghost:active { transform: translateY(1px) scale(.988); box-shadow: var(--d-inset); }

/* Terciario: solo texto, con desplazamiento del icono. */
.os-btn--text {
  min-height: 0; padding: 6px 2px; color: var(--signal-600);
  background: none; box-shadow: none;
}
.os-btn--text:hover { color: var(--signal); }
.os-btn--text:hover svg { transform: translateX(3px); }

.os-btn--sm { min-height: 38px; padding: 9px 16px; font-size: var(--f-xs); }
.os-btn--lg { min-height: 52px; padding: 15px 26px; font-size: var(--f-body); }
.os-btn--block { width: 100%; }
.os-btn[disabled], .os-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.os-btn--primary:hover svg { transform: translateX(2px); }

.os-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Interruptor fisico: skeuomorfismo util. Se siente accionable. */
.os-switch {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
  font-size: var(--f-xs); color: var(--ink-500);
}
.os-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.os-switch-track {
  width: 42px; height: 25px; border-radius: var(--r-full); flex: none;
  background: var(--surface-inset-2);
  box-shadow: inset 0 2px 4px rgba(10,17,31,.16), inset 0 -1px 0 rgba(255,255,255,.7);
  transition: background-color var(--t-ui) var(--e-standard);
}
.os-switch-track::after {
  content: ""; display: block; width: 19px; height: 19px; margin: 3px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #EDF0F5);
  box-shadow: 0 1px 2px rgba(10,17,31,.3), inset 0 1px 0 rgba(255,255,255,1);
  transition: transform var(--t-ui) var(--e-spring);
}
.os-switch input:checked + .os-switch-track { background: var(--signal); }
.os-switch input:checked + .os-switch-track::after { transform: translateX(17px); }
.os-switch input:focus-visible + .os-switch-track { outline: 2px solid var(--signal); outline-offset: 3px; }

/* Segmento: control incrustado con corredera. */
.os-seg {
  display: inline-flex; padding: 4px; gap: 2px;
  border-radius: var(--r-full);
  background: var(--surface-inset);
  box-shadow: var(--d-inset);
}
.os-seg button {
  position: relative; border: 0; background: none; cursor: pointer;
  padding: 8px 15px; border-radius: var(--r-full);
  font-size: var(--f-xs); font-weight: 600; color: var(--ink-500);
  min-height: 36px;
  transition: color var(--t-ui) var(--e-standard);
}
.os-seg button[aria-selected="true"] {
  color: var(--ink-900);
  background: var(--surface-base);
  box-shadow: var(--hl-top), var(--d-1);
}
.os-seg button:hover { color: var(--ink-900); }

/* =====================================================================
   08 · ESTADO
   El color es informacion. Nunca decoracion.
   ===================================================================== */
.os-state {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--f-xs); font-weight: 500; color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.os-state::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ink-300);
}
.os-state--live::before { background: var(--signal); animation: os-breathe 2.4s var(--e-standard) infinite; }
.os-state--ok::before   { background: var(--emerald); }
.os-state--wait::before { background: var(--amber); }
.os-state--flow::before { background: var(--mineral); animation: os-breathe 1.8s var(--e-standard) infinite; }
.os-state--off::before  { background: var(--ink-300); }

@keyframes os-breathe {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px rgba(27,84,245,.14); opacity: .82; }
}

.os-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-6);
  font-size: var(--f-micro); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.os-tag--signal  { background: var(--signal-050);  color: var(--signal-600); }
.os-tag--mineral { background: var(--mineral-050); color: var(--mineral); }
.os-tag--ok      { background: var(--emerald-050); color: var(--emerald); }
.os-tag--warn    { background: var(--amber-050);   color: var(--amber); }
.os-tag--muted   { background: var(--surface-inset); color: var(--ink-500); }

/* =====================================================================
   09 · NAVEGACION
   Lamina suspendida. Se comprime al bajar. Nunca tapa el contenido.
   ===================================================================== */
.os-nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  padding: 14px var(--gutter) 0;
  transition: padding var(--t-ui) var(--e-standard);
}
.os-nav-in {
  width: min(100%, var(--w-wide)); margin-inline: auto;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-6);
  padding: 0 8px 0 18px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.7);
          backdrop-filter: blur(var(--blur-1)) saturate(1.7);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(10,17,31,.035),
    0 1px 2px rgba(10,17,31,.04);
  transition:
    height var(--t-ui) var(--e-standard),
    background-color var(--t-ui) var(--e-standard),
    box-shadow var(--t-ui) var(--e-standard);
}
.os-nav[data-scrolled="true"] { padding-top: 8px; }
.os-nav[data-scrolled="true"] .os-nav-in {
  height: 54px;
  background: rgba(255,255,255,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(10,17,31,.05),
    0 8px 26px -12px rgba(10,17,31,.28);
}

/* Marca: la D respira. Sin efectos alrededor. */
.os-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.os-brand-mark {
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--signal-400), var(--signal) 55%, var(--signal-600));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px -1px rgba(27,84,245,.5);
  display: grid; place-items: center;
}
.os-brand-mark svg { width: 15px; height: 15px; color: #fff; }
.os-brand-name {
  font-size: .98rem; font-weight: 650; letter-spacing: -0.02em; color: var(--ink-900);
}
.os-brand-name i { font-style: normal; color: var(--ink-400); font-weight: 500; }

.os-nav-links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.os-nav-links > li { position: relative; }
.os-nav-links a, .os-nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: var(--r-10);
  font-size: var(--f-sm); font-weight: 500; color: var(--ink-600);
  border: 0; background: none; cursor: pointer;
  transition: color var(--t-micro) var(--e-standard), background-color var(--t-micro) var(--e-standard);
}
.os-nav-links a:hover, .os-nav-trigger:hover { color: var(--ink-900); background: rgba(10,17,31,.045); }
.os-nav-links a[aria-current="page"] { color: var(--ink-900); font-weight: 600; }
.os-nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--signal);
}
.os-nav-trigger svg { width: 13px; height: 13px; color: var(--ink-400); transition: transform var(--t-ui) var(--e-standard); }
.os-nav-item[data-open="true"] .os-nav-trigger svg { transform: rotate(180deg); }
.os-nav-item[data-open="true"] .os-nav-trigger { color: var(--ink-900); background: rgba(10,17,31,.045); }

/* Panel espacial del menu: emerge desde su disparador. */
.os-mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  width: min(92vw, 660px);
  transform: translateX(-50%) translateY(-6px) scale(.985);
  opacity: 0; visibility: hidden;
  padding: 10px;
  border-radius: var(--r-24);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.7);
          backdrop-filter: blur(var(--blur-3)) saturate(1.7);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), var(--d-4);
  transition:
    opacity var(--t-ui) var(--e-standard),
    transform var(--t-ui) var(--e-enter),
    visibility 0s linear var(--t-ui);
}
.os-nav-item[data-open="true"] .os-mega {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 0s;
}
.os-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; }
.os-mega a {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start;
  padding: 12px; border-radius: var(--r-14);
  transition: background-color var(--t-micro) var(--e-standard);
}
.os-mega a:hover { background: rgba(10,17,31,.04); }
.os-mega-ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface-inset); color: var(--signal-600);
  box-shadow: var(--d-inset);
}
.os-mega-ico svg { width: 16px; height: 16px; }
.os-mega b { display: block; font-size: var(--f-sm); font-weight: 600; color: var(--ink-900); letter-spacing: -0.012em; }
.os-mega span { display: block; font-size: var(--f-xs); color: var(--ink-400); line-height: 1.45; margin-top: 2px; }
.os-mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding: 12px 14px;
  border-radius: var(--r-14); background: var(--surface-inset);
  box-shadow: var(--d-inset);
}

.os-burger {
  display: none; width: 44px; height: 44px; flex: none;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--r-10); color: var(--ink-700);
  align-items: center; justify-content: center;
}
.os-burger:hover { background: rgba(10,17,31,.05); }
.os-burger svg { width: 20px; height: 20px; }
.os-burger .os-ico-x { display: none; }
.os-burger[aria-expanded="true"] .os-ico-m { display: none; }
.os-burger[aria-expanded="true"] .os-ico-x { display: block; }

.os-sheet {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  padding: calc(var(--nav-h) + 34px) var(--gutter) var(--gutter);
  background: rgba(243,245,248,.9);
  -webkit-backdrop-filter: blur(var(--blur-3));
          backdrop-filter: blur(var(--blur-3));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.os-sheet[hidden] { display: none; }
.os-sheet-list { display: grid; gap: 2px; }
.os-sheet-list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 54px; padding: 12px 16px;
  border-radius: var(--r-14);
  font-size: 1.06rem; font-weight: 550; color: var(--ink-900);
  letter-spacing: -0.018em;
  border-bottom: 1px solid var(--line);
}
.os-sheet-list a:active { background: rgba(10,17,31,.05); }
.os-sheet-list a span { font-size: var(--f-xs); font-weight: 400; color: var(--ink-400); }
.os-sheet-cta { margin-top: var(--s-7); display: grid; gap: 10px; }

@media (max-width: 1080px) {
  .os-nav-links { display: none; }
  .os-burger { display: inline-flex; }
  .os-nav-in { padding-right: 6px; }
  .os-nav-cta { display: none; }
}
@media (min-width: 1081px) { .os-sheet { display: none !important; } }

/* =====================================================================
   10 · ESCENAS
   Un escenario con profundidad real. Nunca un videojuego.
   ===================================================================== */
.os-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  container-type: inline-size;
}
.os-stage--wide { aspect-ratio: 16 / 10; }
.os-stage--tall { aspect-ratio: 1 / 1; }

/* La camara: responde al puntero con MUY poca amplitud. */
.os-cam {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--my, 0) * -2.2deg))
    rotateY(calc(var(--mx, 0) * 2.6deg))
    translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 5px), 0);
  transition: transform 600ms var(--e-standard);
  will-change: transform;
}

/* Nodo del sistema: pieza fisica digital, no una card mas. */
.os-node {
  position: absolute;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px 9px 9px;
  border-radius: var(--r-14);
  background: linear-gradient(180deg, #fff, #FAFBFD);
  border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-2);
  font-size: var(--f-xs); font-weight: 550; color: var(--ink-700);
  white-space: nowrap;
  transform-style: preserve-3d;
  transition:
    transform var(--t-scene) var(--e-enter),
    box-shadow var(--t-ui) var(--e-standard),
    border-color var(--t-ui) var(--e-standard),
    opacity var(--t-scene) var(--e-standard);
}
.os-node-ico {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface-inset);
  box-shadow: inset 0 1px 2px rgba(10,17,31,.1), inset 0 -1px 0 rgba(255,255,255,.8);
  color: var(--ink-500);
}
.os-node-ico svg { width: 14px; height: 14px; }
.os-node[data-live="true"] {
  border-color: rgba(27,84,245,.34);
  box-shadow: var(--hl-top), var(--d-3), var(--d-signal);
}
.os-node[data-live="true"] .os-node-ico { background: var(--signal-050); color: var(--signal); }
.os-node[data-muted="true"] { opacity: .34; }

/* Conexiones: SVG con pulso que recorre el trazo. */
.os-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.os-links path {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.25;
  stroke-linecap: round;
  transition: stroke var(--t-ui) var(--e-standard), stroke-width var(--t-ui) var(--e-standard);
}
.os-links path.is-drawn {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: os-draw var(--t-long) var(--e-enter) forwards;
  animation-delay: var(--delay, 0ms);
}
.os-links path[data-live="true"] { stroke: rgba(27,84,245,.5); stroke-width: 1.6; }
@keyframes os-draw { to { stroke-dashoffset: 0; } }

.os-pulse {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 3 320;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(27,84,245,.6));
}
.is-live .os-pulse {
  opacity: 1;
  animation: os-travel 2.6s linear infinite;
  animation-delay: var(--delay, 0ms);
}
@keyframes os-travel { from { stroke-dashoffset: 323; } to { stroke-dashoffset: 0; } }

/* El nucleo: una placa arquitectonica, no una esfera. */
.os-core {
  position: absolute; left: 50%; top: 50%;
  width: clamp(112px, 26cqw, 178px); aspect-ratio: 1;
  transform: translate(-50%, -50%) translateZ(40px);
  border-radius: var(--r-24);
  display: grid; place-items: center;
  background:
    linear-gradient(155deg, rgba(255,255,255,.96), rgba(255,255,255,.72)),
    linear-gradient(180deg, var(--signal-050), #fff);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(27,84,245,.12),
    0 20px 50px -18px rgba(27,84,245,.4),
    var(--d-4);
  transform-style: preserve-3d;
}
.os-core::before {
  content: ""; position: absolute; inset: 10px; border-radius: var(--r-18);
  border: 1px solid rgba(27,84,245,.14);
}
.os-core-mark {
  width: 46%; color: var(--signal);
  filter: drop-shadow(0 4px 10px rgba(27,84,245,.35));
}
.os-core-ring {
  position: absolute; inset: -18px; border-radius: var(--r-32);
  border: 1px solid rgba(27,84,245,.16);
  opacity: 0;
}
.is-live .os-core-ring { animation: os-emit 3.4s var(--e-standard) infinite; }
@keyframes os-emit {
  0%   { opacity: .8; transform: scale(.86); }
  70%  { opacity: 0;  transform: scale(1.18); }
  100% { opacity: 0;  transform: scale(1.18); }
}

/* =====================================================================
   11 · COMPONENTES DE PRODUCTO
   Cada uno representa una capacidad concreta del sistema.
   ===================================================================== */

/* --- Superficie de producto: cabecera + cuerpo, reutilizable --------- */
.os-surface { position: relative; overflow: hidden; }
.os-surface-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,248,251,.7));
}
.os-surface-head .os-label { margin-right: auto; }
.os-surface-body { padding: 16px; }
.os-screen .os-surface-head { border-color: var(--line-inv); background: rgba(255,255,255,.04); }

/* --- Ficha de entidad ------------------------------------------------ */
.os-entity {
  display: grid; gap: 12px;
  padding: 16px;
  border-radius: var(--r-18);
  background: linear-gradient(180deg, #fff, #FBFCFE);
  border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-2);
  transition: box-shadow var(--t-ui) var(--e-standard), transform var(--t-ui) var(--e-standard);
}
.os-entity-top { display: flex; align-items: center; gap: 11px; }
.os-entity-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--f-xs); font-weight: 600;
  color: var(--signal-600);
  background: var(--signal-050);
  box-shadow: inset 0 0 0 1px rgba(27,84,245,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.os-entity-name { font-size: var(--f-h4); font-weight: 600; color: var(--ink-900); letter-spacing: -0.018em; line-height: 1.2; }
.os-entity-kind { font-size: var(--f-micro); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.os-entity-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border-radius: var(--r-10); overflow: hidden; }
.os-entity-facts > div { background: var(--surface-base); padding: 10px 12px; }
.os-entity-facts dt { font-size: var(--f-micro); color: var(--ink-400); text-transform: uppercase; letter-spacing: .07em; font-family: var(--font-mono); }
.os-entity-facts dd { margin: 2px 0 0; font-size: 1.06rem; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* --- Trabajador digital (agente) ------------------------------------ */
.os-agent {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start;
  padding: 13px 14px;
  border-radius: var(--r-14);
  background: var(--surface-base);
  border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-1);
  transition: border-color var(--t-ui) var(--e-standard), box-shadow var(--t-ui) var(--e-standard), transform var(--t-ui) var(--e-standard);
}
.os-agent-badge {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-inset); color: var(--ink-500);
  box-shadow: inset 0 1px 2px rgba(10,17,31,.1), inset 0 -1px 0 rgba(255,255,255,.85);
  position: relative;
}
.os-agent-badge svg { width: 17px; height: 17px; }
.os-agent b { display: block; font-size: var(--f-sm); font-weight: 600; color: var(--ink-900); letter-spacing: -0.012em; }
.os-agent .os-agent-role { display: block; font-size: var(--f-xs); color: var(--ink-400); margin-top: 1px; }
.os-agent-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.os-agent[data-active="true"] {
  border-color: rgba(27,84,245,.32);
  box-shadow: var(--hl-top), var(--d-3), var(--d-signal);
  transform: translateY(-2px);
}
.os-agent[data-active="true"] .os-agent-badge { background: var(--signal-050); color: var(--signal); box-shadow: inset 0 0 0 1px rgba(27,84,245,.2); }
.os-agent[data-active="true"] .os-agent-badge::after {
  content: ""; position: absolute; inset: -5px; border-radius: 14px;
  border: 1px solid rgba(27,84,245,.28);
  animation: os-emit 2.2s var(--e-standard) infinite;
}

/* --- Paso de proceso -------------------------------------------------- */
.os-step {
  position: relative;
  display: grid; gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r-14);
  background: var(--surface-base);
  border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-1);
  transition: all var(--t-scene) var(--e-enter);
}
.os-step b { font-size: var(--f-sm); font-weight: 600; color: var(--ink-900); letter-spacing: -0.012em; }
.os-step-time {
  font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: .04em;
  color: var(--ink-400); font-variant-numeric: tabular-nums;
}
.os-step[data-flag="bottleneck"] { border-color: rgba(154,107,5,.35); background: linear-gradient(180deg,#fff,var(--amber-050)); }
.os-step[data-flag="bottleneck"] .os-step-time { color: var(--amber); font-weight: 600; }
.os-step[data-flag="duplicate"]  { border-color: rgba(154,107,5,.28); }
.os-step[data-flag="auto"]       { border-color: rgba(27,84,245,.32); box-shadow: var(--hl-top), var(--d-2), var(--d-signal); }
.os-step[data-flag="removed"]    { opacity: .28; filter: saturate(.2); transform: scale(.94); }
.os-step-note {
  position: absolute; left: 100%; top: 50%; transform: translate(14px, -50%);
  white-space: nowrap;
}

/* --- Superficie de aprobacion ---------------------------------------- */
.os-approval { overflow: hidden; border-radius: var(--r-18); }
.os-approval-body { display: grid; gap: 14px; padding: 16px; }
.os-approval-meter {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
}
.os-meter { display: grid; gap: 6px; }
.os-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.os-meter-bar {
  height: 6px; border-radius: var(--r-full);
  background: var(--surface-inset);
  box-shadow: inset 0 1px 2px rgba(10,17,31,.12);
  overflow: hidden;
}
.os-meter-bar i {
  display: block; height: 100%; border-radius: inherit;
  width: var(--v, 0%);
  background: linear-gradient(90deg, var(--signal-400), var(--signal));
  box-shadow: 0 0 8px rgba(27,84,245,.5);
  transition: width var(--t-long) var(--e-enter);
}
.os-meter-bar--ok i { background: linear-gradient(90deg, #3EC98B, var(--emerald)); box-shadow: 0 0 8px rgba(16,137,79,.45); }
.os-meter-bar--warn i { background: linear-gradient(90deg, #E0B057, var(--amber)); box-shadow: none; }

/* --- Barra de comando (Explore) --------------------------------------- */
.os-command {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.7);
          backdrop-filter: blur(var(--blur-2)) saturate(1.7);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(10,17,31,.05), var(--d-3);
  transition: box-shadow var(--t-ui) var(--e-standard);
}
.os-command:focus-within { box-shadow: inset 0 1px 0 rgba(255,255,255,1), var(--d-3), var(--d-signal); }
.os-command-ico { width: 19px; height: 19px; flex: none; color: var(--ink-400); }
.os-command-field {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-size: var(--f-lead); letter-spacing: -0.014em; color: var(--ink-900);
  min-height: 28px;
}
.os-command-field::placeholder { color: var(--ink-400); }
.os-command-caret {
  display: inline-block; width: 2px; height: 1.25em; vertical-align: -0.22em;
  background: var(--signal); border-radius: 1px;
  animation: os-caret 1.05s steps(1) infinite;
}
@keyframes os-caret { 50% { opacity: 0; } }
.os-command-key {
  font-family: var(--font-mono); font-size: var(--f-micro); color: var(--ink-400);
  padding: 4px 8px; border-radius: var(--r-6);
  background: var(--surface-inset); box-shadow: var(--d-inset);
  flex: none;
}

/* --- Superficie de respuesta ------------------------------------------ */
.os-answer { display: grid; gap: 10px; }
.os-answer-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.os-metric {
  padding: 13px 14px; border-radius: var(--r-14);
  background: var(--surface-base); border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-1);
}
.os-metric dt { font-size: var(--f-micro); font-family: var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-400); }
.os-metric dd { margin: 4px 0 0; font-size: 1.45rem; font-weight: 650; letter-spacing: -0.03em; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1.1; }
.os-metric dd small { font-size: var(--f-xs); font-weight: 500; color: var(--ink-400); letter-spacing: 0; }

/* --- Traza: por donde paso el sistema para responder ------------------ */
.os-trace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.os-trace-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: .05em;
  color: var(--ink-500);
  background: var(--surface-inset); box-shadow: var(--d-inset);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-ui) var(--e-standard), transform var(--t-ui) var(--e-enter), color var(--t-ui) linear, background-color var(--t-ui) linear;
}
.os-trace-step.is-on { opacity: 1; transform: none; }
.os-trace-step.is-hit { color: var(--signal-600); background: var(--signal-050); box-shadow: inset 0 0 0 1px rgba(27,84,245,.16); }
.os-trace-arrow { color: var(--ink-300); flex: none; }

/* --- Operacion en vivo (Control Tower) -------------------------------- */
.os-ops { display: grid; gap: 1px; background: var(--line-inv); border-radius: var(--r-14); overflow: hidden; }
.os-op {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 11px; align-items: center;
  padding: 11px 13px;
  background: rgba(255,255,255,.028);
  transition: background-color var(--t-ui) var(--e-standard);
}
.os-op:hover { background: rgba(255,255,255,.06); }
.os-op-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: var(--ink-inv-2); }
.os-op-ico svg { width: 14px; height: 14px; }
.os-op b { font-size: var(--f-xs); font-weight: 600; color: #fff; display: block; letter-spacing: -0.005em; }
.os-op span { font-size: var(--f-micro); color: var(--ink-inv-2); font-family: var(--font-mono); letter-spacing: .04em; }
.os-op[data-new="true"] { animation: os-op-in 640ms var(--e-enter); }
@keyframes os-op-in {
  from { opacity: 0; transform: translateY(-6px); background: rgba(27,84,245,.16); }
  to   { opacity: 1; transform: none; }
}

.os-kpis { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1px; background: var(--line-inv); }
.os-kpi { padding: 16px 14px; background: rgba(255,255,255,.022); }
.os-kpi dt { font-size: var(--f-micro); font-family: var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-inv-2); }
.os-kpi dd { margin: 6px 0 0; font-size: 1.7rem; font-weight: 650; letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }

/* --- Pila de arquitectura (laminas suspendidas) ----------------------- */
.os-stack-3d { position: relative; perspective: 1500px; perspective-origin: 50% 46%; }
.os-plates { position: relative; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-42deg) scale(var(--zoom, 1)); transition: transform var(--t-long) var(--e-standard); }
.os-plate3d {
  position: absolute; left: 50%; top: 50%;
  width: min(74cqw, 460px); height: min(46cqw, 288px);
  margin: 0 0 0 0;
  border-radius: var(--r-18);
  transform: translate(-50%, -50%) translateZ(calc(var(--i) * var(--sep, 18px)));
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 18px 40px -26px rgba(10,17,31,.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform var(--t-long) var(--e-standard), background-color var(--t-ui) var(--e-standard), box-shadow var(--t-ui) var(--e-standard);
  display: grid; place-items: center;
}
.os-plate3d span {
  font-family: var(--font-mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-500);
  transform: translateZ(1px);
}
.os-plate3d[data-focus="true"] {
  background: rgba(255,255,255,.97);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 0 1px rgba(27,84,245,.25), 0 30px 60px -30px rgba(27,84,245,.6);
}
.os-plate3d[data-focus="true"] span { color: var(--signal-600); }

/* --- Bloque de capa (lista de arquitectura accesible) ----------------- */
.os-layer {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color var(--t-ui) var(--e-standard);
  text-align: left; width: 100%; border-left: 0; border-right: 0; border-top: 0;
  background: none;
}
.os-layer:hover { background: rgba(255,255,255,.6); }
.os-layer[aria-current="true"] { background: #fff; box-shadow: var(--d-2); border-radius: var(--r-14); border-bottom-color: transparent; }
.os-layer-idx { font-family: var(--font-mono); font-size: var(--f-micro); color: var(--ink-300); letter-spacing: .08em; }
.os-layer b { display: block; font-size: var(--f-h4); font-weight: 600; color: var(--ink-900); letter-spacing: -0.018em; }
.os-layer span { display: block; font-size: var(--f-xs); color: var(--ink-400); margin-top: 2px; }
.os-layer[aria-current="true"] .os-layer-idx { color: var(--signal); }

/* =====================================================================
   12 · REVELADO Y COREOGRAFIA
   ===================================================================== */
.os-in { opacity: 0; transform: translateY(14px); }
.os-in.is-in {
  opacity: 1; transform: none;
  transition:
    opacity 620ms var(--e-standard) calc(var(--i, 0) * 70ms),
    transform 720ms var(--e-enter) calc(var(--i, 0) * 70ms);
}
/* Entrada por escala: para objetos, no para texto. */
.os-in--rise { transform: translateY(22px) scale(.97); }
.os-in--fade { transform: none; }
.os-in--clip { clip-path: inset(0 0 100% 0); opacity: 1; transform: none; }
.os-in--clip.is-in { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--e-enter) calc(var(--i, 0) * 70ms); }

/* Escena anclada: el objeto persiste y se transforma. */
.os-scene { position: relative; }
.os-scene-rail { position: relative; }
.os-scene-pin {
  position: sticky; top: 0;
  height: 100svh; min-height: 620px;
  display: grid; align-items: center;
  overflow: hidden;
}
.os-act {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity 520ms var(--e-standard), transform 620ms var(--e-enter), visibility 0s linear 520ms;
  transform: translateY(18px) scale(.985);
  pointer-events: none;
}
.os-act[data-on="true"] {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition-delay: 0s;
}
.os-act[data-past="true"] { transform: translateY(-18px) scale(.985); }

/* Indicador de acto: la posicion dentro de la narrativa. */
.os-acts-nav {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  display: grid; gap: 10px; z-index: 5;
}
.os-acts-nav button {
  width: 26px; height: 3px; border: 0; padding: 0; border-radius: 2px;
  background: var(--line-2); cursor: pointer;
  transition: background-color var(--t-ui) var(--e-standard), width var(--t-ui) var(--e-standard);
}
.os-acts-nav button[aria-current="true"] { background: var(--signal); width: 34px; }

/* =====================================================================
   13 · PIE
   ===================================================================== */
.os-footer {
  position: relative;
  background: var(--surface-canvas-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 6vw, 84px) 28px;
}
.os-footer-grid {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
.os-footer h3 {
  font-size: var(--f-micro); font-family: var(--font-mono);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-400);
  font-weight: 500; margin-bottom: 14px;
}
.os-footer-links { display: grid; gap: 9px; }
.os-footer-links a {
  font-size: var(--f-sm); color: var(--ink-600);
  transition: color var(--t-micro) var(--e-standard);
  width: fit-content;
}
.os-footer-links a:hover { color: var(--signal-600); }
.os-footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  justify-content: space-between;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: var(--f-xs); color: var(--ink-400);
}
.os-footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   14 · RESPONSIVE
   Tres experiencias, no una version comprimida.
   ===================================================================== */
@media (max-width: 1080px) {
  :root { --nav-h: 58px; }
  .os-split, .os-split--copy-right { grid-template-columns: 1fr; gap: 40px; }
  .os-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .os-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .os-answer-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .os-mega { width: min(92vw, 560px); }
}
@media (max-width: 720px) {
  :root {
    --blur-1: 8px; --blur-2: 10px; --blur-3: 14px; --blur-4: 16px;
  }
  .os-grid--2, .os-grid--3, .os-grid--4 { grid-template-columns: 1fr; }
  .os-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .os-entity-facts { grid-template-columns: 1fr 1fr; }
  .os-footer-grid { grid-template-columns: 1fr 1fr; }
  .os-footer-grid > :first-child { grid-column: 1 / -1; }
  .os-actions .os-btn { flex: 1 1 auto; }
  .os-acts-nav { display: none; }
  .os-scene-pin { min-height: 560px; }
  /* En movil el campo de luz se reduce: menos GPU, misma lectura. */
  .os-lume::before, .os-lume::after { filter: blur(60px); opacity: .8; }
}
@media (max-width: 420px) {
  .os-answer-row { grid-template-columns: 1fr; }
  .os-entity-facts { grid-template-columns: 1fr; }
}

/* Sin puntero: nada depende del hover ni del cursor. */
@media (hover: none) {
  .os-cam { transform: none !important; }
}

/* =====================================================================
   15 · MOVIMIENTO REDUCIDO
   No se elimina informacion: se sustituye la coreografia por transicion.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.os *, html.os *::before, html.os *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
    scroll-behavior: auto !important;
  }
  .os-in { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .os-cam { transform: none !important; }
  .os-act { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .os-scene-pin { position: static; height: auto; min-height: 0; display: grid; gap: 64px; padding-block: 48px; }
  .os-act { grid-area: auto; }
  .os-acts-nav { display: none; }
  .os-links path.is-drawn { animation: none; stroke-dashoffset: 0; }
  .os-pulse { display: none; }
}

/* =====================================================================
   16 · HERO
   Una escena, no un titular con una esfera detras.
   ===================================================================== */
.os-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 104px));
  padding-bottom: clamp(56px, 7vw, 104px);
  overflow: hidden;
}
.os-hero-in {
  display: grid; gap: clamp(40px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
}
.os-hero-copy > * + * { margin-top: var(--s-6); }
.os-hero-copy h1 { max-width: 13ch; }
.os-hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--f-xs); color: var(--ink-400);
}
.os-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.os-hero-meta span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-300);
}

/* Etiqueta de marca del hero: la linea que define la categoria. */
.os-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(var(--blur-1)); backdrop-filter: blur(var(--blur-1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px var(--line-2), var(--d-1);
  font-size: var(--f-xs); font-weight: 550; color: var(--ink-600);
}
.os-kicker em {
  font-style: normal; font-family: var(--font-mono); font-size: var(--f-micro);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-full);
  background: var(--signal); color: #fff;
}

/* --- Escenario del hero ---------------------------------------------- */
.os-hero-stage { position: relative; }
.os-hero-stage .os-stage { aspect-ratio: 1 / .92; }

/* Los sistemas de la empresa: piezas fisicas a distinta profundidad. */
.os-hero .os-node {
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform:
    translate(-50%, -50%)
    translateZ(calc(var(--z, 0) * 1px))
    translate3d(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px), 0)
    scale(var(--s, 1));
}
/* Estado 1: fragmentacion — las piezas estan dispersas y a la deriva. */
.os-hero-stage[data-phase="scattered"] .os-node {
  --dx: calc(var(--ox) * 1);
  --dy: calc(var(--oy) * 1);
  --s: .96;
}
.os-hero-stage[data-phase="scattered"] .os-links path { opacity: .3; }
/* Estado 2: convergencia — cada pieza toma su lugar en la arquitectura. */
.os-hero-stage[data-phase="connected"] .os-node { --dx: 0; --dy: 0; --s: 1; }

/* Deriva ambiente: la escena sigue viva sin interaccion. */
.os-hero-stage[data-phase="connected"] .os-node {
  animation: os-drift 9s var(--e-standard) infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
}
@keyframes os-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}

/* =====================================================================
   17 · FRAGMENTACION
   El mismo dato repetido en seis sitios distintos.
   ===================================================================== */
.os-silos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.os-silo {
  padding: 14px; border-radius: var(--r-14);
  background: var(--surface-base); border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-1);
  display: grid; gap: 10px;
  position: relative; overflow: hidden;
}
.os-silo-name {
  font-size: var(--f-micro); font-family: var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400);
}
.os-record {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-8);
  background: var(--surface-inset); box-shadow: var(--d-inset);
  font-family: var(--font-mono); font-size: var(--f-micro); color: var(--ink-500);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-record[data-dup="true"] { color: var(--amber); background: var(--amber-050); box-shadow: inset 0 0 0 1px rgba(154,107,5,.16); }
.os-silo-cost {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--f-micro); font-family: var(--font-mono); color: var(--ink-300);
  padding-top: 8px; border-top: 1px dashed var(--line-2);
}

/* =====================================================================
   18 · CONNECT — tejido de conexion
   ===================================================================== */
.os-connect-list { display: grid; gap: 8px; }
.os-connect-item {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center;
  width: 100%; text-align: left;
  padding: 11px 13px; border-radius: var(--r-14);
  background: var(--surface-base); border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-1);
  cursor: pointer;
  transition: border-color var(--t-ui) var(--e-standard), box-shadow var(--t-ui) var(--e-standard), transform var(--t-ui) var(--e-standard);
}
.os-connect-item:hover,
.os-connect-item[aria-current="true"] {
  border-color: rgba(27,84,245,.3);
  box-shadow: var(--hl-top), var(--d-2), var(--d-signal);
  transform: translateX(2px);
}
.os-connect-ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface-inset); color: var(--ink-500);
  box-shadow: inset 0 1px 2px rgba(10,17,31,.1), inset 0 -1px 0 rgba(255,255,255,.85);
}
.os-connect-ico svg { width: 15px; height: 15px; }
.os-connect-item[aria-current="true"] .os-connect-ico { background: var(--signal-050); color: var(--signal); }
.os-connect-item b { font-size: var(--f-sm); font-weight: 600; color: var(--ink-900); display: block; letter-spacing: -0.012em; }
.os-connect-item span { font-size: var(--f-micro); color: var(--ink-400); font-family: var(--font-mono); letter-spacing: .04em; }

/* Puerto: la conexion se siente como un conector fisico. */
.os-port {
  width: 22px; height: 10px; border-radius: 3px; flex: none;
  background: var(--surface-inset-2);
  box-shadow: inset 0 1px 2px rgba(10,17,31,.2), inset 0 -1px 0 rgba(255,255,255,.6);
  position: relative;
}
.os-port::after {
  content: ""; position: absolute; inset: 2px; border-radius: 2px;
  background: var(--ink-300);
  transition: background-color var(--t-ui) var(--e-standard), box-shadow var(--t-ui) var(--e-standard);
}
.os-connect-item[aria-current="true"] .os-port::after,
.os-port[data-on="true"]::after {
  background: var(--signal);
  box-shadow: 0 0 8px rgba(27,84,245,.8);
}

/* =====================================================================
   19 · DATA FABRIC — de registros sueltos a una entidad
   ===================================================================== */
.os-fabric { position: relative; display: grid; gap: 20px; }
.os-fabric-raw { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.os-raw {
  padding: 7px 12px; border-radius: var(--r-8);
  background: var(--surface-base); border: 1px dashed var(--line-2);
  font-family: var(--font-mono); font-size: var(--f-micro); color: var(--ink-500);
  transition: all 780ms var(--e-enter);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.os-fabric[data-resolved="true"] .os-raw {
  border-style: solid; border-color: rgba(27,84,245,.28);
  color: var(--signal-600); background: var(--signal-050);
  transform: translateY(6px) scale(.96);
  opacity: .55;
}
.os-fabric-out {
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity 640ms var(--e-standard) 380ms, transform 760ms var(--e-enter) 380ms;
}
.os-fabric[data-resolved="true"] .os-fabric-out { opacity: 1; transform: none; }

/* =====================================================================
   20 · COMPANY BRAIN — grafo espacial de la empresa
   ===================================================================== */
.os-brain { position: relative; }
.os-brain .os-stage { aspect-ratio: 1 / .82; }
.os-brain-node {
  position: absolute; left: 50%; top: 50%;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--a) * 1deg))
    translateX(var(--r, 0px))
    rotate(calc(var(--a) * -1deg))
    translateZ(calc(var(--z, 0) * 1px));
  transition: transform var(--t-long) var(--e-enter), opacity var(--t-scene) var(--e-standard);
}
.os-brain-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px 8px 9px; border-radius: var(--r-full);
  background: linear-gradient(180deg, #fff, #FAFBFD);
  border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-2);
  font-size: var(--f-xs); font-weight: 550; color: var(--ink-700);
  cursor: pointer; white-space: nowrap;
  transition: all var(--t-ui) var(--e-standard);
}
.os-brain-btn:hover { transform: translateY(-2px); box-shadow: var(--hl-top), var(--d-3); }
.os-brain-count {
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: var(--r-full);
  display: inline-grid; place-items: center;
  background: var(--surface-inset); box-shadow: var(--d-inset);
  font-family: var(--font-mono); font-size: var(--f-micro); color: var(--ink-500);
}
.os-brain-node[aria-current="true"] .os-brain-btn {
  border-color: rgba(27,84,245,.34);
  box-shadow: var(--hl-top), var(--d-3), var(--d-signal);
  color: var(--ink-900);
}
.os-brain-node[aria-current="true"] .os-brain-count { background: var(--signal); color: #fff; box-shadow: none; }
.os-brain[data-focused="true"] .os-brain-node:not([aria-current="true"]) { opacity: .3; }

/* Inspector de relaciones: la camara entra en la entidad. */
.os-inspector {
  position: absolute; right: 0; bottom: 0; width: min(100%, 300px);
  padding: 16px; border-radius: var(--r-18);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.7);
          backdrop-filter: blur(var(--blur-3)) saturate(1.7);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), var(--d-4);
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity var(--t-ui) var(--e-standard), transform var(--t-ui) var(--e-enter);
  pointer-events: none;
}
.os-brain[data-focused="true"] .os-inspector { opacity: 1; transform: none; pointer-events: auto; }
.os-inspector dl { display: grid; gap: 1px; margin: 12px 0 0; background: var(--line); border-radius: var(--r-10); overflow: hidden; }
.os-inspector dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; background: rgba(255,255,255,.9); }
.os-inspector dt { font-size: var(--f-micro); font-family: var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); }
.os-inspector dd { margin: 0; font-size: var(--f-xs); font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; text-align: right; }

/* =====================================================================
   21 · PROCESS INTELLIGENCE
   ===================================================================== */
.os-flow { display: grid; gap: 10px; position: relative; }
.os-flow-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.os-flow-link {
  width: 1px; height: 16px; margin-left: 22px;
  background: var(--line-2);
  position: relative;
}
.os-flow-link[data-cut="true"] { background: repeating-linear-gradient(180deg, var(--amber) 0 3px, transparent 3px 6px); }

/* =====================================================================
   22 · EVALS
   ===================================================================== */
.os-eval { display: grid; gap: 12px; }
.os-eval-rows { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-12, 12px); overflow: hidden; border-radius: var(--r-14); }
.os-eval-row {
  display: grid; grid-template-columns: 1fr 92px auto; gap: 12px; align-items: center;
  padding: 10px 13px; background: var(--surface-base);
}
.os-eval-row > span:first-child { font-size: var(--f-xs); color: var(--ink-600); }

/* =====================================================================
   23 · DESPLIEGUE Y SOLUCIONES
   ===================================================================== */
.os-phases { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1px; background: var(--line); border-radius: var(--r-18); overflow: hidden; box-shadow: var(--d-2); }
.os-phase {
  background: var(--surface-base); padding: 20px 18px 22px;
  display: grid; gap: 8px; align-content: start;
  position: relative;
  transition: background-color var(--t-ui) var(--e-standard);
}
.os-phase:hover { background: #fff; }
.os-phase-idx {
  font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: .1em;
  color: var(--ink-300);
}
.os-phase b { font-size: var(--f-sm); font-weight: 600; color: var(--ink-900); letter-spacing: -0.012em; }
.os-phase p { font-size: var(--f-xs); color: var(--ink-500); line-height: 1.5; }
.os-phase::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-scene) var(--e-standard);
}
.os-phase.is-in::after { transform: scaleX(1); transition-delay: calc(var(--i, 0) * 120ms); }

/* Selector de industria: cambia el contexto, no la arquitectura. */
.os-industry-scene { display: grid; gap: 10px; }
.os-industry-step {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-14);
  background: var(--surface-base); border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-1);
  font-size: var(--f-sm); font-weight: 550; color: var(--ink-700);
  animation: os-swap 460ms var(--e-enter) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes os-swap {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.os-industry-step em {
  font-style: normal; margin-left: auto;
  font-family: var(--font-mono); font-size: var(--f-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400);
}

/* =====================================================================
   24 · CASOS
   ===================================================================== */
.os-case {
  display: grid; gap: 0;
  border-radius: var(--r-24); overflow: hidden;
  background: var(--surface-base);
  border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-2);
  transition: box-shadow var(--t-ui) var(--e-standard), transform var(--t-ui) var(--e-standard);
}
.os-case:hover { box-shadow: var(--hl-top), var(--d-4); transform: translateY(-3px); }
.os-case-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.os-case-body { padding: 18px 22px; display: grid; gap: 14px; }
.os-case-line { display: grid; gap: 4px; }
.os-case-line dt { font-size: var(--f-micro); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.os-case-line dd { margin: 0; font-size: var(--f-sm); color: var(--ink-600); }
.os-case-out { padding: 16px 22px; background: var(--surface-inset); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); display: grid; gap: 10px; }
.os-case-out-item { display: flex; gap: 10px; align-items: baseline; font-size: var(--f-sm); color: var(--ink-700); }
.os-case-out-item b { font-size: 1.12rem; font-weight: 650; color: var(--ink-900); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; flex: none; }
.os-case-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* =====================================================================
   25 · CIERRE
   ===================================================================== */
.os-close { position: relative; text-align: center; overflow: hidden; }
.os-close-stage { position: relative; height: clamp(220px, 30vw, 320px); margin-bottom: -60px; }
.os-close .os-core { transform: translate(-50%, -50%) scale(.86); }

/* Apertura en forma de D: se usa exactamente dos veces en toda la web. */
.os-aperture {
  position: absolute; inset: 0;
  -webkit-mask-image: var(--d-mask); mask-image: var(--d-mask);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* =====================================================================
   26 · PAGINAS INTERIORES
   Las paginas heredadas (industrias, proyectos, insights, legales,
   diagnostico) conservan su contenido y su HTML; aqui se traducen sus
   clases al nuevo lenguaje. Solo aplica bajo html.os, de modo que nada
   se pinta dos veces.
   ===================================================================== */
html.os .container,
html.os .wrap { width: min(100% - (var(--gutter) * 2), var(--w-page)); margin-inline: auto; }
html.os .narrow { width: min(100%, 760px); margin-inline: auto; }
html.os .center { text-align: center; }

html.os .pagina-interna { display: block; }

/* --- Cabecera de pagina interior ------------------------------------ */
html.os .hero-interno {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(52px, 7vw, 88px));
  padding-bottom: clamp(40px, 5vw, 72px);
  overflow: hidden;
}
html.os .hero-interno-copy { max-width: 820px; position: relative; z-index: 1; }
html.os .hero-interno-copy h1 { font-size: var(--f-h1); letter-spacing: -0.038em; line-height: 1.03; }
html.os .hero-interno-copy > * + * { margin-top: var(--s-5); }
/* Los adornos del hero antiguo desaparecen: la luz ya la da .os-lume. */
html.os .hero-v2-bg,
html.os .hero-v2-grid,
html.os .hero-v2-noise,
html.os .hero-v2-orb { display: none !important; }
html.os .hero-v2-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Miga de pan */
html.os .miga {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: var(--f-xs); color: var(--ink-400); margin-bottom: var(--s-5);
}
html.os .miga a { color: var(--ink-500); }
html.os .miga a:hover { color: var(--signal-600); }
html.os .volver { display: inline-flex; align-items: center; gap: 7px; font-size: var(--f-sm); color: var(--signal-600); font-weight: 550; }
html.os .volver:hover { color: var(--signal); }

/* --- Secciones ------------------------------------------------------- */
html.os .section-light,
html.os section:not([class]) { position: relative; padding-block: clamp(56px, 7vw, 108px); }
html.os .section-light-alt { background: var(--surface-canvas-2); }

html.os .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--f-micro); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-400);
  margin-bottom: var(--s-4);
}
html.os .eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--signal);
  box-shadow: 0 0 0 3px rgba(27,84,245,.12);
}
html.os .accent-text { color: var(--signal-600); }
html.os .lead, html.os .compact-lead, html.os .intro {
  font-size: var(--f-lead); line-height: 1.55; color: var(--ink-500);
  letter-spacing: -0.011em; max-width: 62ch; text-wrap: pretty;
}
html.os .compact-lead { font-size: var(--f-body); }

html.os .section-light h2 { font-size: var(--f-h2); letter-spacing: -0.034em; }
html.os .section-light h3 { font-size: var(--f-h3); letter-spacing: -0.022em; }
html.os .section-light p { color: var(--ink-500); }
html.os .section-light p + p,
html.os .section-light h2 + p,
html.os .section-light h3 + p { margin-top: var(--s-4); }
html.os .section-light h2 + *,
html.os .section-light h3 + * { margin-top: var(--s-4); }
html.os .section-light ul li { position: relative; padding-left: 20px; color: var(--ink-500); }
html.os .section-light ul li + li { margin-top: 8px; }
html.os .section-light ul li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--signal-200);
}

html.os .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-6);
  font-family: var(--font-mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--signal-050); color: var(--signal-600);
}
html.os .fecha, html.os .datos {
  font-family: var(--font-mono); font-size: var(--f-xs); color: var(--ink-400);
  letter-spacing: .04em;
}

/* --- Botones heredados ----------------------------------------------- */
html.os .btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 12px 20px;
  border: 0; border-radius: var(--r-full);
  font-size: var(--f-sm); font-weight: 600; letter-spacing: -0.008em;
  cursor: pointer;
  transition: transform var(--t-micro) var(--e-standard), box-shadow var(--t-ui) var(--e-standard), background-color var(--t-ui) var(--e-standard);
}
html.os .btn svg { width: 17px; height: 17px; flex: none; }
html.os .btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--signal-400) -30%, var(--signal) 42%, var(--signal-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 2px rgba(10,17,31,.16), 0 10px 24px -10px rgba(27,84,245,.55);
}
html.os .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(10,17,31,.16), 0 18px 34px -12px rgba(27,84,245,.6); }
html.os .btn-primary:active { transform: translateY(1px) scale(.988); }
html.os .btn-ghost {
  color: var(--ink-700); background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px var(--line-2), var(--d-1);
}
html.os .btn-ghost:hover { background: #fff; transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--d-2); }
html.os .btn-sm { min-height: 38px; padding: 9px 16px; font-size: var(--f-xs); }

/* --- Rejillas heredadas ---------------------------------------------- */
html.os .cap-grid,
html.os .authority-grid,
html.os .tray-pilares {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--s-8);
}
html.os .cap-item,
html.os .authority-item,
html.os .tray-pilar {
  position: relative;
  padding: 20px;
  border-radius: var(--r-18);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9)), var(--surface-base);
  border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-1);
  transition: box-shadow var(--t-ui) var(--e-standard), transform var(--t-ui) var(--e-standard);
}
html.os .cap-item:hover,
html.os .authority-item:hover,
html.os .tray-pilar:hover { box-shadow: var(--hl-top), var(--d-3); transform: translateY(-2px); }
html.os .cap-item h3,
html.os .authority-item h3,
html.os .tray-pilar h3 { font-size: var(--f-h4); margin-bottom: 8px; }
html.os .cap-item p,
html.os .authority-item p,
html.os .tray-pilar p { font-size: var(--f-sm); color: var(--ink-500); }
html.os .cap-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
  font-family: var(--font-mono); font-size: var(--f-micro);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400);
}
html.os .authority-figure {
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); font-weight: 650;
  letter-spacing: -0.035em; color: var(--ink-900); line-height: 1;
  font-variant-numeric: tabular-nums; display: block; margin-bottom: 8px;
}
html.os .authority-nota, html.os .impl-nota, html.os .aviso-anonimo {
  font-size: var(--f-xs); color: var(--ink-400); margin-top: var(--s-5);
  padding-left: 14px; border-left: 2px solid var(--line-2);
}

html.os .tray-split { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
html.os .tray-linea { display: grid; gap: 14px; }
html.os .flujo-horizontal { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
html.os .flujo-final { display: grid; gap: 10px; margin-top: var(--s-6); }
html.os .final-cta { text-align: center; padding-block: clamp(56px, 7vw, 104px); }
html.os .final-cta h2 { font-size: var(--f-h2); }
html.os .final-cta p { margin: var(--s-5) auto 0; max-width: 56ch; }
html.os .final-cta .btn { margin-top: var(--s-7); }

/* --- Formulario de diagnostico --------------------------------------- */
html.os .form-split {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: start;
}
html.os .form-emp {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-24);
  background: var(--surface-base);
  border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-3);
}
html.os .form-intro { font-size: var(--f-xs); color: var(--ink-400); margin-bottom: var(--s-6); }
html.os .form-emp fieldset { border: 0; padding: 0; margin: 0 0 var(--s-8); }
html.os .form-emp legend {
  font-family: var(--font-mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-400);
  padding: 0 0 var(--s-4); width: 100%; border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-5);
}
html.os .form-fila { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0,1fr)); }
html.os .form-fila + .form-fila { margin-top: var(--s-4); }
html.os .campo { display: grid; gap: 7px; min-width: 0; }
html.os .campo label { font-size: var(--f-xs); font-weight: 600; color: var(--ink-700); }
html.os .campo label span { color: var(--signal); }
html.os .campo input,
html.os .campo select,
html.os .campo textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border-radius: var(--r-10);
  border: 1px solid var(--line-2);
  background: var(--surface-base);
  color: var(--ink-900);
  box-shadow: inset 0 1px 2px rgba(10,17,31,.05);
  transition: border-color var(--t-micro) var(--e-standard), box-shadow var(--t-micro) var(--e-standard);
}
html.os .campo textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
html.os .campo input:hover, html.os .campo select:hover, html.os .campo textarea:hover { border-color: var(--line-strong); }
html.os .campo input:focus, html.os .campo select:focus, html.os .campo textarea:focus {
  outline: none; border-color: var(--signal);
  box-shadow: inset 0 1px 2px rgba(10,17,31,.04), 0 0 0 3px rgba(27,84,245,.14);
}
html.os .campo input[aria-invalid="true"],
html.os .campo textarea[aria-invalid="true"] { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
html.os .campo-error { font-size: var(--f-xs); color: #B03227; font-weight: 500; }
html.os .campo-check { display: flex; gap: 11px; align-items: flex-start; }
html.os .campo-check input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--signal); }
html.os .campo-check label { font-weight: 400; font-size: var(--f-xs); color: var(--ink-500); line-height: 1.55; }
html.os .form-enviar { width: 100%; margin-top: var(--s-4); }
html.os .form-aviso { font-size: var(--f-xs); color: var(--ink-400); margin-top: var(--s-4); }
html.os .form-lateral {
  position: sticky; top: calc(var(--nav-h) + 34px);
  padding: 22px; border-radius: var(--r-18);
  background: var(--surface-inset); box-shadow: var(--d-inset);
  display: grid; gap: var(--s-5);
}
html.os .form-lateral h2, html.os .form-lateral h3 { font-size: var(--f-h4); }
html.os .form-lateral p, html.os .form-lateral li { font-size: var(--f-sm); color: var(--ink-500); }
html.os #form-estado { font-size: var(--f-sm); margin-top: var(--s-4); color: var(--ink-500); }
html.os #form-estado.ok { color: var(--emerald); font-weight: 550; }

/* Revelado heredado: se conecta al mismo observador. */
html.os .reveal { opacity: 0; transform: translateY(14px); }
html.os .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--e-standard), transform 720ms var(--e-enter);
}
@media (prefers-reduced-motion: reduce) {
  html.os .reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 900px) {
  html.os .form-split { grid-template-columns: 1fr; }
  html.os .form-lateral { position: static; }
  html.os .tray-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  html.os .form-fila { grid-template-columns: 1fr; }
}

/* Elementos del sitio anterior que el rediseno retira. */
html.os .sticky-cta,
html.os .nav-wrap > .nav,
html.os .footer:not(.os-footer) { display: none; }

/* =====================================================================
   27 · ESTADOS DIRIGIDOS POR EL MOTOR
   Plantillas de datos que nunca se pintan, y las reglas que traducen
   cada estado de la escena en un cambio visual.
   ===================================================================== */
[data-tower-source],
[data-detail-for],
[data-rel-detail],
[data-industry-data] { display: none; }

/* --- Process Intelligence --------------------------------------------- */
[data-process] .os-step-note { opacity: 0; transform: translate(6px, -50%); transition: opacity var(--t-ui) var(--e-standard), transform var(--t-ui) var(--e-enter); }
[data-process][data-stage="flagged"] .os-step-note,
[data-process][data-stage="reflowed"] .os-step-note { opacity: 1; transform: translate(14px, -50%); }

[data-process] .os-step { --flag: none; }
[data-process][data-stage="idle"] .os-step,
[data-process][data-stage="analyzing"] .os-step { border-color: var(--line) !important; background: var(--surface-base) !important; opacity: 1; transform: none; filter: none; }
[data-process][data-stage="idle"] .os-step-time,
[data-process][data-stage="analyzing"] .os-step-time { color: var(--ink-400); }

/* Barrido de analisis: una linea recorre el proceso y lo lee. */
[data-process] .os-flow::after {
  content: ""; position: absolute; left: -4%; right: -4%; height: 2px;
  top: 0; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  box-shadow: 0 0 14px rgba(27,84,245,.7);
  pointer-events: none;
}
[data-process][data-stage="analyzing"] .os-flow::after {
  opacity: 1;
  animation: os-scan 900ms var(--e-standard) forwards;
}
@keyframes os-scan {
  from { top: 0; opacity: 1; }
  to   { top: 100%; opacity: 0; }
}

/* Reordenado: los pasos suprimidos NO se colapsan.
   Colapsarlos encogia la seccion 183px y empujaba media pagina hacia
   arriba (CLS 0,21 en movil). Se quedan en su sitio, apagados y
   marcados como retirados: ademas se entiende mejor, porque se ve
   QUE paso sobraba y no solo que ahora hay menos. */
[data-process] .os-flow-row { transition: opacity var(--t-scene) var(--e-standard); }
[data-process][data-stage="reflowed"] .os-flow-row[data-drop="true"] .os-step {
  opacity: .34;
  filter: saturate(.15);
  transform: scale(.975);
  border-style: dashed;
  pointer-events: none;
}
[data-process][data-stage="reflowed"] .os-flow-row[data-drop="true"] .os-step b {
  text-decoration: line-through;
  text-decoration-color: var(--ink-300);
  text-decoration-thickness: 1px;
}
[data-process] .os-flow-row[data-drop="true"] .os-step {
  transition: opacity var(--t-scene) var(--e-standard),
              filter var(--t-scene) var(--e-standard),
              transform var(--t-scene) var(--e-enter),
              border-style 0s linear var(--t-scene);
}

[data-process] [data-metric-before],
[data-process] [data-metric-after] { transition: opacity var(--t-ui) var(--e-standard); }
[data-process][data-stage="reflowed"] [data-metric-before] { opacity: .3; }
[data-process]:not([data-stage="reflowed"]) [data-metric-after] { opacity: .3; }

/* --- AI Workforce ------------------------------------------------------ */
[data-wf-step] {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center;
  padding: 11px 13px; border-radius: var(--r-14);
  background: var(--surface-base); border: 1px solid var(--line);
  box-shadow: var(--hl-top), var(--d-1);
  opacity: .42; filter: saturate(.35);
  transition: opacity var(--t-ui) var(--e-standard), filter var(--t-ui) var(--e-standard),
              border-color var(--t-ui) var(--e-standard), box-shadow var(--t-ui) var(--e-standard),
              transform var(--t-ui) var(--e-enter);
}
[data-wf-step][data-on="true"] {
  opacity: 1; filter: none; transform: translateX(3px);
  border-color: rgba(27,84,245,.28);
  box-shadow: var(--hl-top), var(--d-2), var(--d-signal);
}
[data-wf-step] .os-wf-idx {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface-inset); box-shadow: var(--d-inset);
  font-family: var(--font-mono); font-size: var(--f-micro); color: var(--ink-400);
}
[data-wf-step][data-on="true"] .os-wf-idx { background: var(--signal); color: #fff; box-shadow: none; }
[data-wf-step] b { font-size: var(--f-sm); font-weight: 600; color: var(--ink-900); display: block; letter-spacing: -0.012em; }
[data-wf-step] span { font-size: var(--f-xs); color: var(--ink-400); }

/* --- Aprobacion humana -------------------------------------------------- */
[data-approval] .os-approval-after {
  display: grid; gap: 10px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--t-scene) var(--e-standard), opacity var(--t-ui) var(--e-standard), margin var(--t-scene) var(--e-standard);
}
[data-approval][data-state="approved"] .os-approval-after { max-height: 260px; opacity: 1; margin-top: 14px; }
[data-approval][data-state="approved"] .os-approval-actions { display: none; }
[data-approval] .os-approval-evidence { display: none; }
[data-approval][data-state="review"] .os-approval-evidence { display: grid; gap: 8px; }
[data-approval] .os-approval-done { display: none; }
[data-approval][data-state="approved"] .os-approval-done { display: inline-flex; }

/* --- Explore ------------------------------------------------------------ */
[data-explore-answer] {
  opacity: 0; transform: translateY(12px);
  transition: opacity 520ms var(--e-standard), transform 620ms var(--e-enter);
  pointer-events: none;
}
[data-explore-answer][data-on="true"] { opacity: 1; transform: none; pointer-events: auto; }

/* --- Cierre: reensamblado ----------------------------------------------- */
[data-close-scene] .os-node {
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px), 0)
    scale(var(--s, 1));
  transition: transform var(--t-long) var(--e-enter), opacity var(--t-scene) var(--e-standard);
  transition-delay: calc(var(--i, 0) * 60ms);
}
[data-close-scene][data-phase="scattered"] .os-node {
  --dx: calc(var(--ox, 0) * 3.2); --dy: calc(var(--oy, 0) * 3.2); --s: .9;
  opacity: 0;
}
[data-close-scene][data-phase="connected"] .os-node { --dx: 0; --dy: 0; --s: 1; opacity: 1; }

/* =====================================================================
   28 · DETALLES DE ACABADO
   ===================================================================== */
/* Enlace de texto con subrayado que crece desde el origen. */
.os-link {
  position: relative; color: var(--signal-600); font-weight: 550;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-ui) var(--e-standard);
}
.os-link:hover { background-size: 100% 1px; }

/* Cita: sin comillas gigantes ni tarjeta. */
.os-quote {
  font-size: var(--f-h4); line-height: 1.45; color: var(--ink-700);
  letter-spacing: -0.015em; font-weight: 450;
  padding-left: 18px; border-left: 2px solid var(--signal-200);
  max-width: 52ch;
}
.os-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: var(--f-xs); color: var(--ink-400); }

/* Lista de hechos sin contenedor: filetes en vez de tarjetas. */
.os-facts { display: grid; }
.os-facts > div {
  display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 8px 28px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.os-facts > div:last-child { border-bottom: 1px solid var(--line); }
.os-facts dt { font-size: var(--f-sm); font-weight: 600; color: var(--ink-900); }
.os-facts dd { margin: 0; font-size: var(--f-sm); color: var(--ink-500); }

/* Numeral grande de seccion: recurso editorial, no decorativo. */
.os-numeral {
  font-family: var(--font-mono); font-size: var(--f-micro);
  letter-spacing: .18em; color: var(--ink-300);
}

@media (max-width: 720px) {
  .os-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .os-phases { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .os-silos { grid-template-columns: 1fr; }
  .os-eval-row { grid-template-columns: 1fr 70px auto; }
}
@media (max-width: 1080px) and (min-width: 721px) {
  .os-phases { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* =====================================================================
   29 · CORRECCIONES DE ESCENARIO
   Los trazos se normalizan con pathLength="100": el dibujado y el
   pulso son identicos aunque la geometria de cada curva cambie.
   ===================================================================== */
.os-links path { stroke-width: .34; }
.os-links path[data-live="true"] { stroke-width: .5; }
.os-links path.is-drawn { --len: 100; stroke-dasharray: 100; stroke-dashoffset: 100; }
.os-pulse {
  stroke-width: .7;
  stroke-dasharray: 1.6 98.4;
  stroke-dashoffset: 100;
}
@keyframes os-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Cualquier nodo dentro de un escenario se coloca por porcentaje.
   Asi la misma pieza sirve al hero, a Connect y al cierre. */
.os-stage .os-node {
  /* --spread comprime la composicion hacia el centro en pantallas
     estrechas sin tener que reescribir cada posicion. */
  left: calc(50% + (var(--x, 50) - 50) * var(--spread, 1) * 1%);
  top:  calc(50% + (var(--y, 50) - 50) * var(--spread, 1) * 1%);
  transform:
    translate(-50%, -50%)
    translateZ(calc(var(--z, 0) * 1px))
    translate3d(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px), 0)
    scale(var(--s, 1));
}

/* =====================================================================
   30 · ESCENA ANCLADA: ENCAJE VERTICAL
   El acto tiene que caber en una pantalla. Si no cabe, no es una
   escena: es una seccion que se corta.
   ===================================================================== */
.os-scene-pin { height: 100svh; min-height: 600px; overflow: hidden; }
.os-scene .os-stage { aspect-ratio: auto; height: clamp(280px, 50svh, 470px); }
.os-scene .os-act > .os-wrap { width: min(100% - (var(--gutter) * 2), var(--w-page)); }

@media (min-width: 861px) and (max-height: 860px) {
  .os-scene .os-h2 { font-size: clamp(1.65rem, 1.1rem + 1.5vw, 2.35rem); }
  .os-scene .os-body { font-size: .945rem; }
  .os-scene .os-stack-6 > * + * { margin-top: 14px; }
  .os-scene .os-split { gap: clamp(24px, 3.5vw, 48px); }
  .os-scene .os-silo { padding: 11px; gap: 7px; }
  .os-scene .os-connect-item { padding: 9px 12px; }
}

/* Movil y tableta: la narrativa se vuelve vertical de verdad.
   Sin anclaje, sin actos superpuestos y sin recorrido forzado. */
@media (max-width: 860px) {
  .os-scene-rail { min-height: 0 !important; }
  .os-scene-pin {
    position: static; height: auto; min-height: 0;
    display: grid; gap: clamp(64px, 12vw, 96px);
    padding-block: clamp(56px, 9vw, 88px);
    overflow: visible;
  }
  .os-act {
    grid-area: auto; position: static;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .os-acts-nav { display: none; }
  .os-scene .os-stage { height: clamp(260px, 62vw, 380px); }
  .os-silos { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .os-silos { grid-template-columns: 1fr; }
}

/* =====================================================================
   31 · AJUSTES FINOS
   ===================================================================== */
/* El nucleo del cierre no debe competir con el titular. */
.os-close-stage .os-core { opacity: .96; }
.os-close-stage .os-node { font-size: var(--f-micro); }

/* Los segmentos de industria pueden desbordar en pantallas medias:
   se desplazan en horizontal dentro de su propio riel. */
.os-seg {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.os-seg::-webkit-scrollbar { display: none; }
.os-seg button { white-space: nowrap; flex: none; }

/* Las rejillas de datos nunca fuerzan scroll horizontal en la pagina. */
.os-eval-rows, .os-kpis, .os-phases, .os-entity-facts { max-width: 100%; }

/* Tarjetas de caso: la altura la fija el contenido, no una cuadricula. */
.os-case { align-content: start; }

/* Estado de foco dentro de superficies oscuras. */
.os-screen :focus-visible { outline-color: var(--signal-400); }

/* La barra de comando en movil deja de ser una pildora estrecha. */
@media (max-width: 560px) {
  .os-command { border-radius: var(--r-18); padding: 12px 14px; }
  .os-command-key { display: none; }
  .os-command-field { font-size: 1rem; }
}

/* Impresion: el sitio debe poder leerse en papel sin escenografia. */
@media print {
  .os-nav, .os-sheet, .os-lume, .os-links, .os-acts-nav, .os-core { display: none !important; }
  .os-act { position: static !important; opacity: 1 !important; visibility: visible !important; }
  .os-scene-pin { position: static !important; height: auto !important; display: block !important; }
  html.os body { background: #fff; }
}

/* =====================================================================
   32 · CONTENCION HORIZONTAL
   Ninguna escena puede provocar scroll lateral en la pagina.
   overflow-x: clip no crea contenedor de scroll, asi que el anclaje
   de las escenas sigue funcionando.
   ===================================================================== */
html.os { overflow-x: clip; }

/* La marca de proceso vive dentro de su paso, no fuera de la placa. */
.os-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
}
.os-step b, .os-step .os-step-time { grid-column: 1; }
.os-step-note {
  position: static;
  grid-column: 2; grid-row: 1 / span 2;
  justify-self: end; align-self: center;
  transform: none !important;
}
[data-process] .os-step-note { transition: opacity var(--t-ui) var(--e-standard); }

/* Escenarios estrechos: menos piezas simultaneas y piezas mas pequenas.
   El concepto se conserva; baja la densidad y el coste de GPU. */
@media (max-width: 1080px) {
  .os-stage .os-node { font-size: 10.5px; padding: 7px 10px 7px 7px; gap: 7px; }
  .os-stage .os-node-ico { width: 21px; height: 21px; border-radius: 6px; }
  .os-stage .os-node-ico svg { width: 12px; height: 12px; }
}
@media (max-width: 720px) {
  /* En movil el hero muestra seis sistemas, no diez. */
  .os-hero-stage .os-node:nth-child(n+9) { display: none; }
  .os-hero-stage .os-links path:nth-of-type(n+9) { display: none; }
  .os-stage .os-node { font-size: 10px; max-width: 46%; }
  .os-stage .os-node span:last-child { overflow: hidden; text-overflow: ellipsis; }
}

/* =====================================================================
   33 · HERO RESPONSIVE Y RITMO EDITORIAL
   ===================================================================== */
/* Debajo de 1024px el hero deja de ser dos columnas: primero se lee
   la promesa, despues se ve el sistema. */
@media (max-width: 1024px) {
  .os-hero-in { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
  .os-hero-copy h1 { max-width: 18ch; }
  .os-hero-stage { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 720px) {
  :root { --f-display: clamp(2.3rem, 1.5rem + 3.6vw, 3.2rem); }
  .os-hero { padding-top: calc(var(--nav-h) + 40px); }
  .os-kicker {
    border-radius: var(--r-14);
    padding: 8px 12px;
    align-items: flex-start;
    font-size: var(--f-micro);
    line-height: 1.45;
    max-width: 100%;
  }
  .os-kicker em { flex: none; }
  .os-hero-meta { gap: 6px 16px; font-size: var(--f-micro); }
}

/* El escenario nunca toca el borde util del contenedor. */
.os-hero-stage .os-stage { padding-inline: clamp(8px, 3%, 34px); }

/* Aire entre el titular y el parrafo de apoyo: la jerarquia se ve
   antes de leerse. */
.os-head > h2 + p,
.os-head > h3 + p,
.os-head > h2 + .os-lead { margin-top: var(--s-6); }
.os-head > .os-label + h2,
.os-head > .os-label + h3 { margin-top: var(--s-4); }

/* Composicion mas compacta cuando hay menos ancho. */
@media (max-width: 1024px) { .os-stage { --spread: .92; } }
@media (max-width: 720px)  { .os-stage { --spread: .74; } }
@media (max-width: 420px)  { .os-stage { --spread: .66; } }

/* =====================================================================
   34 · ACCESIBILIDAD Y ROBUSTEZ
   ===================================================================== */
/* Areas tactiles: nada por debajo del minimo utilizable. */
.os-brand { min-height: 44px; }
.os-btn--sm { min-height: 40px; }
@media (hover: none), (max-width: 720px) {
  .os-btn--sm { min-height: 44px; padding: 11px 18px; }
  .os-seg button { min-height: 44px; }
  .os-connect-item { min-height: 52px; }
  .os-brain-btn { min-height: 44px; }
}

/* Los indices de seccion son informacion, no adorno: se leen. */
.os-phase-idx, .os-layer-idx, .os-numeral { color: var(--ink-400); }

/* Sin JavaScript el contenido sigue siendo legible y completo.
   Ninguna animacion puede ser la unica via a la informacion. */
html:not(.js) .os-in { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
html:not(.js) .os-scene-pin {
  position: static; height: auto; min-height: 0;
  display: grid; gap: 72px; padding-block: 56px; overflow: visible;
}
html:not(.js) .os-act {
  grid-area: auto; position: static;
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
html:not(.js) .os-acts-nav { display: none; }
html:not(.js) [data-explore-answer] { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .os-trace-step { opacity: 1; transform: none; }
html:not(.js) [data-fabric] .os-fabric-out { opacity: 1; transform: none; }
html:not(.js) .os-meter-bar i { width: 60%; }
html:not(.js) [data-wf-step] { opacity: 1; filter: none; }
html:not(.js) .os-industry-scene::after {
  content: "Activa JavaScript para recorrer las operaciones por industria.";
  display: block; font-size: var(--f-sm); color: var(--ink-500);
}
html:not(.js) .os-nav-item:hover .os-mega,
html:not(.js) .os-nav-item:focus-within .os-mega {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
html:not(.js) .os-hero-stage[data-hero-stage] .os-node { --dx: 0; --dy: 0; --s: 1; }
html:not(.js) [data-close-scene] .os-node { --dx: 0; --dy: 0; --s: 1; opacity: 1; }

/* =====================================================================
   35 · ULTIMOS AJUSTES DE CONTRASTE Y AREA TACTIL
   ===================================================================== */
.os-silo-cost { color: var(--ink-400); }

/* Los puntos de la narrativa son navegacion: necesitan area real. */
.os-acts-nav button {
  width: 34px; height: 32px; background: none;
  display: grid; place-items: center;
}
.os-acts-nav button::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: var(--line-2);
  transition: background-color var(--t-ui) var(--e-standard), width var(--t-ui) var(--e-standard);
}
.os-acts-nav button[aria-current="true"] { background: none; width: 34px; }
.os-acts-nav button[aria-current="true"]::before { background: var(--signal); width: 30px; }

/* Controles y enlaces compactos: minimo utilizable. */
a.os-chip { min-height: 40px; }
.os-btn--text { min-height: 40px; }
.os-command-field { min-height: 40px; }
html.os .btn-sm { min-height: 40px; }
html.os .campo-check { min-height: 44px; align-items: center; }
html.os .campo-check input { width: 22px; height: 22px; }
html.os .campo-check label { padding-block: 10px; cursor: pointer; }
@media (hover: none), (max-width: 720px) {
  html.os .btn-sm { min-height: 44px; }
  a.os-chip { min-height: 44px; }
}

/* =====================================================================
   36 · PRESUPUESTO DE RENDIMIENTO
   Lo que esta fuera de pantalla no se pinta. Se reserva la altura para
   que saltar el renderizado no provoque desplazamiento de contenido.
   ===================================================================== */
/* content-visibility: auto quedaba descartado. Al revelar cada seccion,
   la altura estimada no coincidia con la real y desplazaba todo lo de
   abajo: CLS 0,095 en escritorio y 0,21 en movil, medido en produccion.
   Ademas no aportaba fotogramas (31 vs 32 fps con y sin el). La clase se
   mantiene como marca de "seccion densa" por si vuelve a hacer falta. */

/* Bajo movimiento reducido no hay nada que componer: se apagan los
   efectos mas caros y la pagina queda igual de legible. */
@media (prefers-reduced-motion: reduce) {
  .os-lume { display: none; }
  .os-paper::after { display: none; }
}

/* =====================================================================
   37 · ENTRADA DEL HERO SIN DEPENDER DE JAVASCRIPT
   El titular es el elemento mas grande de la primera pantalla: no puede
   esperar a que el observador de intersecciones lo revele. Se pinta de
   inmediato y solo se desplaza; el resto entra con CSS puro.
   ===================================================================== */
.os-hero-title { animation: os-title-in 820ms var(--e-enter) both; }
@keyframes os-title-in { from { transform: translateY(14px); } to { transform: none; } }

.os-lift {
  opacity: 0;
  animation: os-lift-in 660ms var(--e-enter) both;
  animation-delay: calc(120ms + var(--i, 0) * 90ms);
}
@keyframes os-lift-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .os-hero-title, .os-lift { animation: none; opacity: 1; transform: none; }
}

/* =====================================================================
   38 · HERENCIA TIPOGRAFICA
   El bloque de meta usa monoespaciada; el titulo que va dentro del mismo
   contenedor no debe heredarla.
   ===================================================================== */
.os-connect-item b,
.os-op b,
[data-wf-step] b,
.os-agent b { font-family: var(--font-sans); letter-spacing: -0.012em; }
.os-connect-item b + span,
.os-op b + span,
[data-wf-step] b + span { font-family: var(--font-mono); }
.os-connect-item > span:not(.os-connect-ico):not(.os-port),
.os-op > span:not(.os-op-ico) { font-family: var(--font-sans); }

/* =====================================================================
   39 · ENCAJE DE LA ESCENA BAJO LA NAVEGACION
   La barra flota sobre el contenido: el acto centrado debe empezar por
   debajo de ella, no detras.
   ===================================================================== */
.os-scene-pin { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 24px; }
@media (max-width: 860px) { .os-scene-pin { padding-top: clamp(56px, 9vw, 88px); } }

/* =====================================================================
   40 · PILA DE ARQUITECTURA: LEGIBILIDAD
   El nombre de cada capa lo lleva la lista de al lado. Sobre la lamina
   quedaba tapado por la de encima, asi que solo se conserva para
   lectores de pantalla y se anade un escalonado que deja ver el canto.
   ===================================================================== */
.os-plate3d span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.os-plate3d {
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--i) * 5px), calc(var(--i) * -3px), calc(var(--i) * var(--sep, 18px)));
}
.os-plate3d[data-focus="true"] {
  background: rgba(255,255,255,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1.5px rgba(27,84,245,.45),
    0 30px 60px -26px rgba(27,84,245,.65);
}
/* La capa enfocada se separa un poco mas: el vinculo con la lista se ve. */
.os-plate3d[data-focus="true"] {
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--i) * 5px), calc(var(--i) * -3px), calc(var(--i) * var(--sep, 18px) + 22px));
}

/* =====================================================================
   41 · RESPIRO DEL CIERRE
   ===================================================================== */
.os-close-stage { margin-bottom: -18px; }
.os-close .os-label { margin-top: var(--s-6); }

/* La pila no es una resma de papel: las capas bajas se leen mas densas
   y la base lleva el canto de senal, porque es la que toca los sistemas. */
.os-plate3d:nth-child(1) { background: rgba(255,255,255,.94); }
.os-plate3d:nth-child(2) { background: rgba(253,254,255,.9); }
.os-plate3d:nth-child(3) { background: rgba(250,252,255,.87); }
.os-plate3d:nth-child(4) { background: rgba(247,250,255,.85); }
.os-plate3d:nth-child(5) { background: rgba(244,248,255,.84); }
.os-plate3d:nth-child(6) { background: rgba(241,246,255,.84); }
.os-plate3d:nth-child(7) { background: rgba(238,244,255,.85); }
.os-plate3d:nth-child(8) {
  background: rgba(234,241,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(27,84,245,.18),
    0 24px 44px -26px rgba(10,17,31,.55);
}

/* Los indicadores de estado no se parten en dos lineas. */
.os-state { white-space: nowrap; }
@media (max-width: 560px) {
  .os-brain-btn { padding: 7px 11px 7px 8px; font-size: 11px; }
  .os-brain-count { min-width: 19px; height: 19px; }
}

/* =====================================================================
   42 · COMPANY BRAIN EN PANTALLA ESTRECHA
   El grafo radial no cabe sin solaparse. En movil la misma informacion
   se lee como lo que es: una entidad y sus relaciones, en vertical.
   ===================================================================== */
@media (max-width: 640px) {
  .os-brain .os-stage { height: auto; aspect-ratio: auto; padding: 0; perspective: none; }
  .os-brain .os-cam {
    position: static; transform: none !important;
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; align-items: flex-start;
  }
  .os-brain .os-core {
    position: static; transform: none; flex: 1 0 100%;
    width: auto; aspect-ratio: auto; padding: 18px 20px;
    margin-bottom: 6px; border-radius: var(--r-18);
  }
  .os-brain-node { position: static; transform: none !important; }
  .os-brain-btn { width: 100%; justify-content: space-between; }
  .os-brain .os-inspector {
    position: static; width: 100%; opacity: 1; transform: none;
    pointer-events: auto; margin-top: 12px;
  }
  .os-brain:not([data-focused="true"]) .os-inspector { display: none; }
  .os-brain[data-focused="true"] .os-brain-node:not([aria-current="true"]) { opacity: .45; }
}

/* =====================================================================
   43 · SCROLLYTELLING SCRUBBEADO
   Los actos dejan de encenderse y apagarse: se recorren. El motor
   escribe --d (distancia del acto al punto de lectura) y --o (presencia)
   en cada fotograma, y aqui se traducen a profundidad y desplazamiento.
   El texto y el escenario viajan a distinta velocidad: eso es lo que
   hace que la escena tenga fondo.
   ===================================================================== */
html.js .os-scene[data-scrub-on] .os-act {
  opacity: var(--o, 0);
  visibility: visible;
  pointer-events: none;
  transition: none;
  transform: translate3d(0, calc(var(--d, 0) * -34px), 0)
             scale(calc(1 - var(--dabs, 0) * 0.035));
  will-change: transform, opacity;
}
html.js .os-scene[data-scrub-on] .os-act[data-lead="true"] { pointer-events: auto; }

/* Parallax interno: la copia se queda, el escenario se adelanta. */
html.js .os-scene[data-scrub-on] .os-act-copy {
  transform: translate3d(0, calc(var(--d, 0) * -16px), 0);
}
html.js .os-scene[data-scrub-on] .os-act-stage {
  transform: translate3d(0, calc(var(--d, 0) * -62px), 0)
             scale(calc(1 + var(--d, 0) * 0.02));
}

/* Presencia ambiental persistente: el mismo espacio detras de los cuatro
   actos. Crece y se desplaza con el recorrido, asi la narrativa no se
   siente como cuatro secciones distintas. */
.os-scene-amb {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.os-scene-amb::before {
  content: ""; position: absolute;
  width: 78vw; height: 78vw; max-width: 1000px; max-height: 1000px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,84,245,.13), rgba(14,156,153,.06) 45%, transparent 68%);
  filter: blur(80px);
  /* Solo la intensidad acompana al recorrido: el desenfoque no se
     vuelve a calcular en ningun fotograma. */
  opacity: calc(0.45 + var(--p, 0) * 0.55);
  will-change: opacity;
}
/* La retícula se densifica a medida que el sistema se ordena. */
.os-scene-amb::after {
  content: ""; position: absolute; inset: -10%;
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / 72px 72px;
  opacity: calc(0.25 + var(--p, 0) * 0.75);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent 72%);
          mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent 72%);
  transform: translate3d(0, calc(var(--p, 0) * -40px), 0);
  will-change: transform, opacity;
}

/* El indicador de actos se convierte en riel de progreso continuo. */
.os-acts-nav { gap: 0; }
.os-acts-nav::before {
  content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px;
  width: 1px; background: var(--line-2);
}
.os-acts-nav::after {
  content: ""; position: absolute; left: 15px; top: 6px;
  width: 1px; background: var(--signal);
  height: calc((100% - 12px) * var(--p, 0));
  transition: none;
}
.os-acts-nav button { height: 40px; }
.os-acts-nav button::before { width: 22px; }
.os-acts-nav button[aria-current="true"]::before { width: 30px; }

/* =====================================================================
   44 · SCRUB GENERICO
   Cualquier bloque puede leer su propio avance por la pantalla:
   --sin  0→1 mientras entra,  --sp 0→1 en toda la travesia.
   ===================================================================== */
html.js [data-scrub] { --sin: 0; --sp: 0; }

/* Entrada con profundidad: se usa donde una placa "llega" al lector. */
html.js [data-rise] {
  transform: translate3d(0, calc((1 - var(--sin, 0)) * 56px), 0)
             scale(calc(0.965 + var(--sin, 0) * 0.035));
  opacity: calc(0.25 + var(--sin, 0) * 0.75);
}

/* Deriva de fondo: capas lentas que dan profundidad sin llamar la atencion. */
html.js [data-drift] {
  transform: translate3d(0, calc((var(--sp, .5) - .5) * -70px), 0);
}
html.js [data-drift="soft"] {
  transform: translate3d(0, calc((var(--sp, .5) - .5) * -34px), 0);
}

/* Recorrido horizontal: un solo momento en toda la pagina. */
html.js [data-slide-x] {
  transform: translate3d(calc((0.5 - var(--sp, .5)) * 56px), 0, 0);
}

/* =====================================================================
   45 · REVELADO DE TITULARES LINEA A LINEA
   El titular no se desvanece: sube desde debajo de su propia linea.
   Es el gesto tipografico de la marca.
   ===================================================================== */
.os-line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.os-line > i {
  display: block; font-style: inherit; font-weight: inherit;
  transform: translate3d(0, 108%, 0);
  will-change: transform;
}
.is-in .os-line > i,
.os-lines-in .os-line > i {
  transform: none;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--l, 0) * 95ms);
}
html:not(.js) .os-line > i { transform: none; }

/* =====================================================================
   46 · LUZ QUE SIGUE AL PUNTERO
   El vidrio y las placas reaccionan a la posicion de la mano. Es lo que
   separa una tarjeta de un material.
   ===================================================================== */
[data-lume] { position: relative; }
[data-lume]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  opacity: 0;
  transition: opacity 320ms var(--e-standard);
  background: radial-gradient(
    260px circle at calc(var(--px, 50) * 1%) calc(var(--py, 50) * 1%),
    rgba(27,84,245,.10), rgba(27,84,245,.04) 38%, transparent 62%);
}
[data-lume][data-near="true"]::after { opacity: 1; }
/* Sobre superficie oscura la luz es blanca, no azul. */
.os-screen[data-lume]::after {
  background: radial-gradient(
    300px circle at calc(var(--px, 50) * 1%) calc(var(--py, 50) * 1%),
    rgba(255,255,255,.09), rgba(255,255,255,.03) 40%, transparent 64%);
}
/* El contenido se mantiene por encima del brillo. */
[data-lume] > * { position: relative; z-index: 2; }

/* Inclinacion minima de la placa hacia el puntero. Dos grados, no diez. */
html.js [data-tilt] {
  transform:
    perspective(900px)
    rotateX(calc(var(--ty, 0) * -1.6deg))
    rotateY(calc(var(--tx, 0) * 1.9deg))
    translate3d(0, 0, 0);
  transition: transform 480ms var(--e-standard);
}
html.js [data-tilt][data-near="true"] { transition: transform 120ms linear; }

/* =====================================================================
   47 · BOTONES MAGNETICOS
   El boton se inclina hacia la mano antes de que llegue.
   ===================================================================== */
html.js .os-btn[data-magnet] {
  transform: translate3d(calc(var(--mgx, 0) * 1px), calc(var(--mgy, 0) * 1px), 0);
}
html.js .os-btn[data-magnet]:active {
  transform: translate3d(calc(var(--mgx, 0) * 1px), calc(var(--mgy, 0) * 1px + 1px), 0) scale(.985);
}

/* =====================================================================
   48 · INDICADOR LIQUIDO DE NAVEGACION
   El resaltado no aparece: se desplaza de un punto a otro.
   ===================================================================== */
.os-nav nav { position: relative; }
.os-nav-ind {
  position: absolute; top: 50%; left: 0;
  height: 34px; width: 0;
  margin-top: -17px;
  border-radius: var(--r-10);
  background: rgba(10,17,31,.055);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--nx, 0), 0, 0);
  transition:
    transform 420ms cubic-bezier(.22, 1, .28, 1),
    width 420ms cubic-bezier(.22, 1, .28, 1),
    opacity 200ms var(--e-standard);
}
.os-nav-links[data-ind="true"] ~ .os-nav-ind { opacity: 1; }
/* Con el indicador activo, el fondo propio de cada enlace sobra. */
.os-nav-links[data-ind="true"] a:hover,
.os-nav-links[data-ind="true"] .os-nav-trigger:hover { background: transparent; }
.os-nav-links > li { position: relative; z-index: 1; }

/* =====================================================================
   49 · MICROINTERACCIONES DE SUPERFICIE
   ===================================================================== */
/* Las piezas del escenario se elevan al señalarlas. */
html.js .os-stage .os-node { cursor: default; }
html.js .os-node[data-live="true"] { z-index: 3; }

/* La ficha de conexion desliza su puerto al activarse. */
.os-connect-item .os-port { transition: transform var(--t-ui) var(--e-spring), box-shadow var(--t-ui) var(--e-standard); }
.os-connect-item[aria-current="true"] .os-port { transform: translateX(3px); }

/* Los pasos del proceso se reordenan con muelle, no con corte. */
[data-process] .os-flow-row { transition: all 620ms cubic-bezier(.34, 1.2, .5, 1); }

/* Las cifras respiran al terminar de contar. */
.os-num[data-counted="true"] { animation: os-tick 520ms var(--e-spring); }
@keyframes os-tick {
  0%   { transform: translateY(2px); }
  60%  { transform: translateY(-1px); }
  100% { transform: none; }
}

/* Las tarjetas de caso levantan el filete superior al acercarse. */
.os-case { position: relative; overflow: hidden; }
.os-case::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--signal), var(--mineral));
  transform: scaleX(0); transform-origin: left;
  transition: transform 620ms var(--e-enter);
  z-index: 3;
}
.os-case[data-near="true"]::before,
.os-case:hover::before { transform: scaleX(1); }

/* =====================================================================
   50 · MOVIMIENTO REDUCIDO: TODO LO ANTERIOR SE APAGA
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js .os-scene[data-scrub-on] .os-act,
  html.js .os-scene[data-scrub-on] .os-act-copy,
  html.js .os-scene[data-scrub-on] .os-act-stage,
  html.js [data-rise], html.js [data-drift], html.js [data-slide-x],
  html.js [data-tilt], html.js .os-btn[data-magnet] {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
  .os-line > i { transform: none !important; }
  [data-lume]::after { display: none; }
  .os-scene-amb::before, .os-scene-amb::after { display: none; }
  .os-nav-ind { display: none; }
  .os-acts-nav::after { display: none; }
  .os-case::before { transform: scaleX(1); }
}

/* En tactil no hay puntero: ni luz, ni inclinacion, ni magnetismo. */
@media (hover: none) {
  [data-lume]::after { display: none; }
  html.js [data-tilt] { transform: none; }
  html.js .os-btn[data-magnet] { transform: none; }
  .os-nav-ind { display: none; }
}

/* Movil: el parallax se reduce, la narrativa ya es vertical. */
@media (max-width: 860px) {
  html.js .os-scene[data-scrub-on] .os-act,
  html.js .os-scene[data-scrub-on] .os-act-copy,
  html.js .os-scene[data-scrub-on] .os-act-stage {
    transform: none !important; opacity: 1 !important; pointer-events: auto;
  }
  html.js [data-drift], html.js [data-drift="soft"], html.js [data-slide-x] { transform: none; }
  html.js [data-rise] {
    transform: translate3d(0, calc((1 - var(--sin, 0)) * 28px), 0);
    opacity: calc(0.4 + var(--sin, 0) * 0.6);
  }
  .os-scene-amb::after { opacity: .4; transform: none; }
}