/* ===== 00-tokens.css ===== */
/* ============================================================
   Apollo — 00 tokens + reset
   Identidad: negro editorial con acento dorado, portada de prototypes/hero-v1.
   UN SOLO TEMA. El claro/oscuro se retiro por decision del 14 de agosto de 2026:
   ya no hay toggle, ni modal de bienvenida, ni prefers-color-scheme.
   Los componentes consumen SOLO role tokens; nunca literales de color.
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- Superficies --- */
  --bg: #07090D;               /* "space": fondo de pagina */
  --bg-tint: #0D1118;          /* "space-soft": bandas y secciones alternas */
  --surface: #12161F;          /* tarjetas y paneles */
  --surface-2: #1A1F2B;        /* panel elevado o anidado */
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);

  /* --- Texto --- */
  --ink: #F4F2EC;              /* "warm white": titulares */
  --text: #D3D7DF;             /* cuerpo */
  --muted: #A2A9B5;            /* secundario, etiquetas */

  /* --- Acento: dorado --- */
  --accent: #D8AC54;
  --accent-light: #F0D28F;     /* brillos, degradados de titular */
  --accent-press: #C2963F;
  --accent-soft: rgba(216, 172, 84, 0.16);
  --accent-ink: #0A0C11;       /* texto sobre dorado solido */
  --accent-glow: rgba(216, 172, 84, 0.38);

  /* Azul de senal: reservado al Data Tunnel y a estados de dato en vivo.
     No es un segundo acento de marca; no usar en botones ni enlaces. */
  --signal: #6CAAFF;

  --ok: #4ADE80;
  --err: #FF6B61;
  /* Aviso en naranja, no en ambar: el ambar anterior (#E8B14D) era casi el dorado
     de marca, asi que un demo "expirado" se leia igual que uno "borrador". */
  --warn: #F2994A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 50px 100px -36px rgba(0, 0, 0, 0.8);

  /* --- Vidrio (nav, modales, paneles de demo) --- */
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-strong: rgba(255, 255, 255, 0.09);
  --glass-line: rgba(255, 255, 255, 0.31);
  --glass-blur: 18px;
  --glass-sheen: linear-gradient(118deg, rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.052) 32%, rgba(255, 255, 255, 0) 62%);

  /* --- Tipografia ---
     El prototipo declara Inter primero y no carga fuentes propias: lo que se aprobo
     se vio con Inter. Aqui se carga como webfont para que se vea igual en cualquier
     maquina, en lugar de caer al system-ui de cada sistema operativo. */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Layout --- */
  --maxw: 1200px;
  --maxw-prose: 68ch;
  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(72px, 9vw, 140px);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-glass: 22px;             /* radio del nav y paneles de vidrio del prototipo */
  --r-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  /* --- Z scale (semantic) --- */
  --z-nav: 100;
  --z-float: 900;
  --z-backdrop: 1000;
  --z-modal: 1010;
  --z-toast: 1100;

  font-synthesis: none;
}

/* ---------- Capitulos sobre papel ----------
   El prototipo NO es uniformemente oscuro: alterna hero oscuro, transicion de circulo
   y capitulos de metodo y confianza sobre papel claro (R-008 United Carriers).
   Eso es composicion narrativa, no una preferencia del usuario: se aplica por seccion
   con .on-paper y remapea los mismos role tokens, para que los componentes de dentro
   no necesiten saber sobre que fondo viven.
   El dorado se oscurece aqui a proposito: #D8AC54 sobre papel no alcanza contraste
   suficiente para texto. */
.on-paper {
  --bg: #F4F2EC;
  --bg-tint: #EBE8DF;
  --surface: #FFFFFF;
  --surface-2: #F4F2EC;
  --ink: #111318;
  --text: #33383F;
  --muted: #5C636E;
  --line: rgba(17, 19, 24, 0.12);
  --line-strong: rgba(17, 19, 24, 0.20);
  --accent: #8A6520;
  --accent-light: #A67C28;
  --accent-press: #6F5119;
  --accent-soft: rgba(138, 101, 32, 0.12);
  --accent-ink: #FFFFFF;
  --accent-glow: rgba(138, 101, 32, 0.28);
  --glass-bg: rgba(17, 19, 24, 0.04);
  --glass-bg-strong: rgba(17, 19, 24, 0.07);
  --glass-line: rgba(17, 19, 24, 0.14);
  --shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.06);
  --shadow: 0 12px 30px -14px rgba(17, 19, 24, 0.22);
  --shadow-lg: 0 40px 80px -32px rgba(17, 19, 24, 0.28);
  background: var(--bg);
  color: var(--text);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100%; background: var(--bg); color: var(--text); }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }


/* ===== 10-base.css ===== */
/* ============================================================
   Apollo — 10 base (typography, layout primitives, motion base)
   ============================================================ */

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
  overflow-x: hidden;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem); line-height: 0.98; }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); line-height: 1.06; }
h4 { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.15; }

p { text-wrap: pretty; }
.word { display: inline-block; }
strong, b { font-weight: 600; color: var(--ink); }

.lead {
  font-size: clamp(1.1rem, 1.02rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--text);
  max-width: 40ch;
  text-wrap: pretty;
}

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
/* On phones 9vw collapses --section-y to its 72px floor, which reads cramped.
   Give sections a touch more breathing room (84px) without touching desktop. */
@media (max-width: 560px) { :root { --section-y: clamp(84px, 14vw, 104px); } }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.prose { max-width: var(--maxw-prose); }

/* A single, deliberate kicker system (used sparingly, NOT above every section). */
.kicker {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: none;
}
.kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}

.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }

/* ---------- Motion base ---------- */
[data-reveal] { opacity: 1; } /* visible by default; JS enhances, never gates */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-toast);
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: var(--r-sm);
  transform: translateY(-150%); transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }


/* ===== 20-components.css ===== */
/* ============================================================
   Apollo — 20 components (shared chrome: nav, footer, buttons, fields, modal)
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-weight: 600; font-size: 0.975rem; line-height: 1;
  padding: 0.85em 1.35em; min-height: 48px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform var(--dur-micro) var(--ease-out), background var(--dur-micro) ease,
    border-color var(--dur-micro) ease, box-shadow var(--dur) var(--ease-out), color var(--dur-micro) ease;
  white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 24px -10px var(--accent-glow); }
.btn--primary:hover { background: var(--accent-press); transform: translateY(-2px); box-shadow: 0 14px 34px -10px var(--accent-glow); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn--lg { padding: 1.05em 1.7em; min-height: 56px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--accent); font-weight: 600;
  /* Median 28px de alto. En telefono el objetivo tactil se queda corto, asi que
     se sube a 44px sin mover la maquetacion (el relleno es vertical y el enlace
     sigue siendo inline-flex). */
  min-height: 44px;
}
.link-arrow svg, .link-arrow .arr { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover .arr { transform: translateX(4px); }

/* ---------- Navbar ---------- */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  transition: background var(--dur) ease, border-color var(--dur) ease, backdrop-filter var(--dur) ease;
  border-bottom: 1px solid transparent;
}
#nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.nav-logo { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.nav-logo img { width: 30px; height: 30px; border-radius: 8px; }
.nav-logo b { font-size: 1.2rem; }
.nav-logo small { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; display: block; margin-top: -2px; }
.nav-links { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.nav-link { padding: 0.5rem 0.85rem; border-radius: var(--r-pill); color: var(--text); font-weight: 500; font-size: 0.95rem; transition: color var(--dur-micro) ease, background var(--dur-micro) ease; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); background: var(--surface-2); }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.nav-hamburger { display: none; width: 44px; height: 44px; border-radius: 14px; align-items: center; justify-content: center; color: var(--ink); border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 74%, transparent); box-shadow: var(--shadow-sm); }
.nav-hamburger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform var(--dur) var(--ease-out); }
.nav-hamburger span::before, .nav-hamburger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform var(--dur) var(--ease-out), opacity var(--dur-micro); }
.nav-hamburger span::before { top: -6px; }
.nav-hamburger span::after { top: 6px; }
.nav-hamburger:hover { border-color: var(--accent); color: var(--accent); }

/* Mobile drawer */
#mobile-nav { position: fixed; inset: 0; z-index: var(--z-modal); background: radial-gradient(circle at 90% 4%, var(--accent-soft), transparent 34%), var(--bg); display: flex; flex-direction: column; gap: 0; padding: max(18px, env(safe-area-inset-top, 0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out-expo), visibility var(--dur-slow); visibility: hidden; overflow: auto; }
#mobile-nav::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 28%); opacity: 0.65; }
#mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu-head, .mobile-menu-links, .mobile-menu-actions { position: relative; z-index: 1; }
.mobile-menu-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mobile-menu-brand { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; font-family: var(--font-display); font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.mobile-menu-brand img { width: 34px; height: 34px; border-radius: 9px; }
.mobile-menu-brand b { display: block; font-size: 1.1rem; line-height: 1; }
.mobile-menu-brand small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.11em; color: var(--muted); text-transform: uppercase; }
.mobile-close { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; color: var(--ink); font-size: 1.45rem; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.mobile-menu-links { margin-top: clamp(2rem, 9vh, 4.5rem); padding: 0.35rem 0; border-block: 1px solid var(--line); }
#mobile-nav .mobile-menu-links a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font-family: var(--font-display); font-size: clamp(1.35rem, 6vw, 1.7rem); line-height: 1.05; font-weight: 700; color: var(--ink); padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
#mobile-nav .mobile-menu-links a:last-child { border-bottom: 0; }
#mobile-nav .mobile-menu-links .nav-login { color: var(--accent); }
.mobile-menu-actions { margin-top: auto; padding-top: clamp(1.5rem, 8vh, 3.25rem); display: grid; gap: 0.85rem; }
#mobile-nav .mobile-menu-actions .btn { width: 100%; min-width: 0; min-height: 56px; padding: 0.9rem 1rem; font-size: clamp(0.98rem, 4.8vw, 1.08rem); line-height: 1.08; text-align: center; white-space: normal; border-radius: 18px; }

body.is-locked { overflow: hidden; }

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.input, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 0.85rem 1rem; transition: border-color var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
.input::placeholder, textarea::placeholder { color: var(--muted); }
.input:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
textarea { resize: vertical; min-height: 120px; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease-out), visibility var(--dur); }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(7, 9, 15, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: var(--z-backdrop); }
.modal__box { position: relative; z-index: var(--z-modal); width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 3vw, 2.4rem); transform: translateY(12px) scale(0.99); transition: transform var(--dur-slow) var(--ease-out-expo); }
.modal.is-open .modal__box { transform: translateY(0) scale(1); }
.modal__box--wide { width: min(720px, 100%); }
.modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; color: var(--muted); font-size: 1.25rem; display: grid; place-items: center; }
.modal__close:hover { background: var(--surface-2); color: var(--ink); }
.modal__head h2 { font-size: 1.5rem; }
.modal__head p { color: var(--muted); margin-top: 0.35rem; }
.calendly-inline-widget { border-radius: var(--r); overflow: hidden; min-width: 0; }
#booking-modal .modal__box--wide {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  padding: clamp(1.35rem, 2vw, 1.85rem);
}
#booking-modal .modal__head {
  padding-right: 2.7rem;
  margin-bottom: 1rem;
}
#booking-modal .modal__head h2 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
#booking-modal .calendly-inline-widget {
  height: min(62vh, 560px) !important;
  background: #fff;
  border-radius: 18px;
}
.modal__form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.modal__hint { font-size: 0.85rem; color: var(--muted); }
.modal__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.25rem; }
/* Multi-panel modals (service / guide): only the .is-active panel shows */
.modal [data-service-modal], .modal [data-guide-modal] { display: none; }
.modal [data-service-modal].is-active, .modal [data-guide-modal].is-active { display: block; }

/* ---------- Floating CTA + mobile bar ---------- */
.float-cta { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-float); display: flex; gap: 0.5rem; }
.float-wa { width: 52px; height: 52px; border-radius: 50%; background: #1FA152; color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); transition: transform var(--dur) var(--ease-out); }
.float-wa:hover { transform: translateY(-3px); }
.float-wa svg { width: 26px; height: 26px; }

/* Mobile sticky CTA bar — hidden on desktop, fixed bottom on small screens only */
.mobile-cta { display: none; }
@media (max-width: 860px) {
  .nav-inner { height: 68px; padding-right: max(34px, calc(env(safe-area-inset-right, 0px) + 24px)); }
  .nav-links { display: none; }
  .nav-actions .nav-login, .nav-actions .nav-cta { display: none; }
  .nav-actions .btn:not(.nav-cta) { display: none; }
  .nav-hamburger { display: inline-flex; width: 46px; height: 46px; margin-right: 4px; }
  .float-cta { display: none; }
  .mobile-cta {
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-float);
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
  }
  .mobile-cta .btn { flex: 1; min-width: 0; min-height: 52px; border-radius: 18px; font-size: 0.98rem; }
  .mobile-cta .float-wa { flex: 0 0 auto; width: 52px; height: 52px; box-shadow: none; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* Let JS slide the bar away (set .is-hidden) when the closing/footer CTA is in view,
     so it stops occluding content and duplicating the closing panel's own CTAs. */
  .mobile-cta { transition: transform var(--dur) var(--ease-out), opacity var(--dur) ease; will-change: transform; }
  .mobile-cta.is-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  /* Touch targets: lift sub-44px controls to the 44px minimum on touch viewports. */
  .modal__close { width: 44px; height: 44px; }
}

@media (max-width: 640px) {
  .modal {
    align-items: start;
    place-items: start center;
    padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
  }
  .modal__box {
    width: 100%;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
    border-radius: 20px;
    padding: 1.25rem;
  }
  #booking-modal .modal__box--wide {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem;
  }
  #booking-modal .modal__head {
    flex: 0 0 auto;
    padding-right: 2.25rem;
    margin-bottom: 0.75rem;
  }
  #booking-modal .modal__head h2 { font-size: clamp(1.25rem, 6.4vw, 1.6rem); }
  #booking-modal .modal__head p { font-size: 0.92rem; line-height: 1.38; }
  #booking-modal .calendly-inline-widget {
    position: relative;
    flex: 1 1 auto;
    height: calc(100dvh - 188px) !important;
    min-height: 500px !important;
    border-radius: 16px;
  }
  #booking-modal .calendly-inline-widget::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 130px;
    height: 105px;
    background: #fff;
    clip-path: polygon(40px 0, 100% 0, 100% 100%, 85px 100%);
    border-top-right-radius: 16px;
    pointer-events: none;
  }
}

/* ---------- Footer (always-dark anchor; art-directed, theme-independent) ---------- */
.site-footer { position: relative; overflow: hidden; background: #06080E; color: rgba(255,255,255,0.66); padding-block: clamp(56px, 7vw, 96px) 2rem; border-top: 1px solid rgba(91,124,255,0.35); }
.site-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.5; }
.site-footer::after { content: "Apollo"; position: absolute; left: var(--gutter); bottom: -0.32em; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(7rem, 22vw, 20rem); line-height: 1; letter-spacing: -0.04em; color: rgba(255,255,255,0.035); pointer-events: none; user-select: none; }
.site-footer .container { position: relative; z-index: 1; }
.site-footer a { color: rgba(255,255,255,0.66); transition: color var(--dur-micro) ease; }
.site-footer a:hover { color: var(--accent); }

/* ---------- Preference toggles (theme + language) ---------- */
.nav-prefs { display: inline-flex; align-items: center; gap: 0.35rem; }
.pref-btn { height: 38px; min-width: 38px; padding: 0 0.6rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink); font-size: 0.95rem; font-weight: 600; transition: border-color var(--dur-micro) ease, color var(--dur-micro) ease, background var(--dur-micro) ease; }
.pref-btn:hover { border-color: var(--accent); color: var(--accent); }
.pref-lang { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; }
#mobile-nav .nav-prefs { margin-top: 0; display: flex; gap: 0.6rem; }
#mobile-nav .pref-btn { height: 46px; flex: 1; }
@media (max-width: 860px) { .nav-actions .nav-prefs { display: none; } }

/* El modal de preferencias se retiro junto con el tema claro; sus estilos ya no
   tienen marcado que los use. */
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.10); }
.footer-brand { max-width: 34ch; }
.footer-logo { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.25rem; letter-spacing: -0.03em; }
.footer-logo img { width: 30px; height: 30px; border-radius: 8px; }
.footer-tagline { margin-top: 1rem; line-height: 1.55; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; }
.footer-col a { display: block; padding: 0.3rem 0; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: 0.85rem; }
.footer-status { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.72rem; }
.footer-status i { width: 8px; height: 8px; border-radius: 50%; background: #36D399; box-shadow: 0 0 0 4px rgba(54,211,153,0.2); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }


/* ===== 30-home.css ===== */
/* ============================================================
   Apollo — 30 home + shared section primitives + product mockups
   ============================================================ */

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: calc(var(--z-nav) + 1); background: var(--accent); transform: scaleX(0); transform-origin: left center; }

/* Ambient background dots (hero) */
.bg-dots { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-dot { position: absolute; border-radius: 50%; background: var(--accent); opacity: 0.14; will-change: transform; }

/* Shared section head */
.section-head { max-width: 56ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .kicker { margin-bottom: 1rem; }
.section-head h2, .section-head h1 { margin-bottom: 0.9rem; }
/* /servicios and /contacto open with an <h1> (one h1 per page); keep it at the
   section-head h2 size so it reads as a section title, not a hero headline. */
.section-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); }
.section-head .lead { color: var(--muted); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(112px, 16vh, 180px); padding-bottom: var(--section-y); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: min(56vw, 720px); height: 620px; background: radial-gradient(60% 60% at 70% 30%, var(--accent-glow), transparent 70%); opacity: 0.7; pointer-events: none; z-index: -1; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-copy { max-width: 40ch; min-width: 0; }
.hero-copy .kicker { margin-bottom: 1.4rem; }
.hero h1 { font-size: clamp(2.5rem, 1.7rem + 2.8vw, 4.2rem); line-height: 0.98; margin-bottom: 1.4rem; text-wrap: pretty; }
.hero-copy .lead { margin-bottom: 2rem; max-width: 42ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.1rem; }
.hero-reassure { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); letter-spacing: 0.02em; }
.hero-visual { position: relative; min-width: 0; }
.home-demo-preview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); min-width: 0; overflow: hidden; transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); }
.home-demo-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.home-demo-preview__head > div { min-width: 0; }
.home-demo-preview__head .kicker { display: block; margin-bottom: 0.25rem; }
.home-demo-preview__head b { display: block; color: var(--ink); font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-demo-preview__head small { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.home-demo-preview__head .btn { flex: 0 0 auto; padding: 0.7rem 1rem; }
.home-demo-preview__frame { padding: 1rem; }
.home-demo-light { pointer-events: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: var(--text); }
.home-demo-light__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.85rem 0.95rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.home-demo-light .label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted); margin-right: 0.1rem; }
.home-demo-light .chip { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0.35rem 0.7rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--muted); background: color-mix(in srgb, var(--surface) 72%, transparent); font-size: 0.78rem; font-weight: 600; }
.home-demo-light .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.home-demo-light__scope { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 0.95rem 0.2rem; }
.home-demo-light__scope > span { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.home-demo-light__scope b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.home-demo-light__scope em { font-style: normal; font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.home-demo-light__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; padding: 0.9rem 0.95rem; }
.home-demo-light__kpis div { min-width: 0; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.home-demo-light__kpis b { display: block; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-demo-light__kpis span { display: block; color: var(--muted); font-size: 0.68rem; margin-top: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-demo-light__kpis em { display: block; margin-top: 0.1rem; color: var(--ok); font-style: normal; font-family: var(--font-mono); font-size: 0.62rem; }
.home-demo-light__main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr); gap: 0.75rem; padding: 0 0.95rem 0.95rem; }
.home-demo-light__chart, .home-demo-light__rank { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 0.8rem; }
.home-demo-light__chart > div, .home-demo-light__rank > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; }
.home-demo-light__chart b, .home-demo-light__rank b { color: var(--ink); font-size: 0.86rem; }
.home-demo-light__chart small, .home-demo-light__rank small { color: var(--muted); font-family: var(--font-mono); font-size: 0.62rem; }
.home-demo-light__chart figure { display: flex; align-items: flex-end; gap: 0.42rem; height: clamp(140px, 16vw, 178px); margin: 0; }
.home-demo-light__chart figure span { position: relative; flex: 1 1 0; min-width: 0; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #19c3e0)); opacity: 0.9; }
.home-demo-light__chart figure i { position: absolute; left: 50%; bottom: -1.25rem; transform: translateX(-50%); color: var(--muted); font-style: normal; font-family: var(--font-mono); font-size: 0.58rem; }
.home-demo-light__rank { display: flex; flex-direction: column; gap: 0.55rem; }
.home-demo-light__rank p { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0; font-size: 0.78rem; }
.home-demo-light__rank p span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.home-demo-light__rank p b { font-family: var(--font-mono); font-size: 0.74rem; }

/* ---------- Clients strip ---------- */
.clients { padding-block: clamp(2.5rem, 5vw, 4rem); border-block: 1px solid var(--line); background: var(--bg-tint); }
.clients-inner { display: flex; flex-direction: column; gap: 1.5rem; }
.clients-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.clients-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; }
.client-mark { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.35rem); color: var(--muted); letter-spacing: -0.01em; padding: 0 clamp(1.1rem, 2.6vw, 2.2rem); border-left: 1px solid var(--line); transition: color var(--dur) ease; }
.client-mark:first-child { border-left: 0; padding-left: 0; }
.client-mark:hover { color: var(--ink); }

/* ---------- Product canvas (signature) ---------- */
.canvas-section { padding-block: var(--section-y); }
.canvas-demo-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.75rem; margin: clamp(-2rem, -2vw, -1rem) 0 1.25rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--accent-soft); color: var(--text); }
.canvas-demo-callout span { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.canvas-demo-callout b { font-size: 0.95rem; line-height: 1.35; }
.canvas { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.canvas-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.canvas-tab { position: relative; z-index: 1; padding: 0.7rem 1.2rem; border-radius: var(--r-pill); font-weight: 600; color: var(--muted); border: 1px solid transparent; transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.canvas-tab:hover { color: var(--ink); }
.canvas-tab.is-active { color: var(--accent-ink); background: var(--accent); box-shadow: 0 10px 26px -16px var(--accent-glow); }
.canvas-tab-indicator { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: var(--r-pill); background: var(--accent); pointer-events: none; }
.canvas-stage { position: relative; }
.canvas-screen { display: none; padding: clamp(1.5rem, 3vw, 2.75rem); }
.canvas-screen.is-active { display: grid; }
.canvas-detail { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.canvas-blurb { font-size: 1.1rem; color: var(--ink); line-height: 1.5; }
.canvas-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; }
.canvas-cap { display: flex; align-items: center; gap: 1rem; min-height: 100%; width: 100%; text-align: left; padding: 1rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); transition: border-color var(--dur-micro) ease, transform var(--dur-micro) ease, background var(--dur-micro) ease; }
.canvas-cap:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--accent-soft); }
.canvas-cap-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.canvas-cap-badge { align-self: flex-start; margin-bottom: 0.15rem; padding: 0.22rem 0.5rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.03em; }
.canvas-cap-text b { color: var(--ink); font-size: 1rem; }
.canvas-cap-text small { color: var(--muted); font-size: 0.85rem; }
.canvas-cap .arr { color: var(--accent); font-weight: 700; }

/* ---------- Why ---------- */
.why { padding-block: var(--section-y); }
.why-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.why-copy { position: sticky; top: 100px; min-width: 0; }
.why-copy h2 { margin-block: 1rem; max-width: 16ch; }
.why-copy .lead { margin-bottom: 2rem; color: var(--muted); }
.why-points { display: grid; gap: 0; }
.why-points li { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.why-points li:first-child { padding-top: 0; }
.why-points h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.why-points p { color: var(--muted); max-width: 50ch; }

/* ---------- Method ---------- */
.method { padding-block: var(--section-y); background: var(--bg-tint); border-block: 1px solid var(--line); }
.method-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.5vw, 3.25rem) clamp(1.5rem, 3vw, 2.75rem); }
.method-step { position: relative; padding-top: 1.4rem; border-top: 2px solid var(--line-strong); }
.method-step::before { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 2px; background: var(--accent); }
.method-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--accent); opacity: 0.2; letter-spacing: -0.03em; line-height: 1; }
.method-step h3 { font-size: 1.2rem; margin-block: 0.35rem 0.5rem; }
.method-step p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Resources ---------- */
.resources { padding-block: var(--section-y); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.guide-card { padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; gap: 0.75rem; transition: transform var(--dur) var(--ease-out), border-color var(--dur) ease, box-shadow var(--dur) var(--ease-out); }
.guide-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.guide-tag { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.04em; }
.guide-card h3 { font-size: 1.25rem; }
.guide-card p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.guide-card .link-arrow { margin-top: auto; align-self: flex-start; }
.guide-points { display: grid; gap: 0.5rem; margin-block: 0.5rem 1.25rem; }
.guide-points li { padding-left: 1.5rem; position: relative; color: var(--text); }
.guide-points li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.guide-example { background: var(--accent-soft); border-radius: var(--r); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.guide-example b { display: block; font-size: 0.8rem; color: var(--accent); margin-bottom: 0.35rem; }
.guide-example p { color: var(--ink); font-size: 0.95rem; }

/* Newsletter */
.newsletter { display: grid; grid-template-columns: 1fr auto; gap: 1.25rem 2.5rem; align-items: center; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.newsletter-copy h3 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.newsletter-copy p { color: var(--muted); }
.newsletter-form { display: flex; gap: 0.6rem; min-width: min(420px, 70vw); }
.newsletter-form .input { flex: 1; }
.newsletter-status { grid-column: 1 / -1; font-size: 0.9rem; color: var(--muted); min-height: 1.1em; margin: 0; }
.newsletter-status.is-success { color: var(--ok); }
.newsletter-status.is-error { color: var(--err); }

/* ---------- Closing ---------- */
.closing { padding-block: var(--section-y); }
/* El cierre era un bloque dorado solido con texto blanco. Ahora es un panel oscuro
   con halo frio detras, y el dorado queda reservado al CTA final: es el unico punto
   de la pagina donde el acento debe pesar mas (R-013). */
.closing-inner { max-width: 60ch; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem); background: var(--bg-tint); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; }
.closing-inner::before { content: ""; position: absolute; inset: -45% -10% auto auto; width: 65%; height: 360px; background: radial-gradient(60% 60% at 70% 30%, color-mix(in srgb, var(--signal) 22%, transparent), transparent 70%); pointer-events: none; }
.closing-inner::after { content: ""; position: absolute; inset: auto auto -40% -10%; width: 55%; height: 320px; background: radial-gradient(60% 60% at 30% 70%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events: none; }
.closing-inner > * { position: relative; z-index: 1; }
.closing-inner h2 { color: var(--ink); max-width: 18ch; }
.closing-inner .lead { color: var(--text); }
.closing-inner .hero-reassure { color: var(--muted); }
.closing-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* ============================================================
   Product mockups (servicePreview) — gold on light surface
   ============================================================ */
.visual-dashboard, .visual-erp, .visual-chat, .visual-schema, .visual-stats, .visual-hub, .visual-training, .visual-browser {
  width: 100%; max-width: 100%; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; font-family: var(--font-mono); color: var(--text); min-height: 240px;
}
.visual-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.visual-kpis > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.7rem; }
.visual-kpis .hot { border-color: var(--accent); background: var(--accent-soft); }
.visual-kpis b { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.visual-kpis span { font-size: 0.68rem; color: var(--muted); }
.visual-kpis em { font-style: normal; font-size: 0.7rem; color: var(--accent); }
.visual-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.visual-bars i { flex: 1; background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 3px 3px 0 0; transform-origin: bottom; }
.visual-bars i.gold { background: var(--accent); }
/* ERP */
.visual-erp { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; }
.visual-erp aside { display: flex; flex-direction: column; gap: 0.4rem; }
.visual-erp aside b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.visual-erp aside b.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.visual-erp > div small { color: var(--muted); font-size: 0.7rem; }
.visual-erp p { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.78rem; color: var(--ink); }
.visual-erp p em { font-style: normal; color: var(--accent); }
/* Chat */
.visual-chat header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.visual-chat header b { color: var(--accent); }
.visual-chat header span { color: var(--ink); font-size: 0.8rem; }
.visual-chat header i { margin-left: auto; font-style: normal; font-size: 0.65rem; color: #1B8A4B; }
.visual-chat p { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.55rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.78rem; max-width: 85%; }
.visual-chat p.user { background: var(--accent-soft); border-color: transparent; margin-left: auto; }
/* Schema */
.visual-schema { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.visual-schema article { flex: 1; min-width: 120px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.visual-schema header { display: flex; justify-content: space-between; padding: 0.5rem 0.7rem; background: var(--accent-soft); color: var(--ink); font-size: 0.78rem; }
.visual-schema p { padding: 0.35rem 0.7rem; border-top: 1px solid var(--line); font-size: 0.72rem; color: var(--muted); }
.visual-speed { width: 100%; margin-top: 0.5rem; padding: 0.6rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.visual-speed span { font-size: 0.7rem; color: var(--muted); }
.visual-speed b { display: block; color: var(--accent); font-family: var(--font-display); }
/* Stats scatter */
.visual-stats > div { position: relative; height: 160px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 25% 25%; }
.visual-stats i { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); }
.visual-stats i.green { background: var(--accent); }
.visual-stats i.red { background: #E08A3C; }
.visual-stats footer { display: grid; grid-template-columns: repeat(4, auto); gap: 0.4rem 1rem; margin-top: 0.7rem; align-items: baseline; justify-content: start; }
.visual-stats footer b { font-family: var(--font-display); color: var(--ink); }
.visual-stats footer span { font-size: 0.7rem; color: var(--muted); }
/* Hub */
.visual-hub { position: relative; min-height: 260px; }
.visual-hub > b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; border-radius: var(--r-pill); font-family: var(--font-display); z-index: 2; }
.visual-hub span { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.3rem 0.7rem; font-size: 0.72rem; color: var(--ink); }
/* Training */
.visual-training h4 { font-family: var(--font-display); color: var(--ink); margin-bottom: 0.5rem; }
.visual-training strong { font-family: var(--font-display); font-size: 2rem; color: var(--accent); }
.visual-training i { display: block; height: 8px; background: var(--line); border-radius: var(--r-pill); margin: 0.5rem 0 1rem; overflow: hidden; }
.visual-training i em { display: block; height: 100%; width: 74%; background: var(--accent); }
.visual-training p { font-size: 0.78rem; color: var(--muted); padding: 0.3rem 0; }
.visual-training p.done { color: var(--ink); }
.visual-training p.done::before { content: "✓ "; color: var(--accent); }
/* Browser */
.visual-browser header { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); margin-bottom: 0.8rem; }
.visual-browser header i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.visual-browser header span { margin-left: 0.6rem; font-size: 0.72rem; color: var(--muted); }
.visual-browser .vb-body h4 { font-family: var(--font-display); color: var(--ink); }
.visual-browser .vb-body p { height: 8px; background: var(--line); border-radius: 4px; margin: 0.4rem 0; }
.visual-browser button { margin-top: 0.6rem; background: var(--accent); color: var(--accent-ink); padding: 0.4rem 0.9rem; border-radius: var(--r-pill); font-size: 0.75rem; }
.visual-browser footer { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.visual-browser footer b { flex: 1; height: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero-inner { grid-template-columns: 1fr; }
  .home-demo-preview { transform: none; }
  .why-inner { grid-template-columns: 1fr; }
  .why-copy { position: static; }
  .method-steps { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 1fr; }
  .newsletter-form { min-width: 0; }
}

/* Trim the dead gap under the fixed nav on small screens (nav is 68px <=860px).
   dvh tracks the real mobile viewport; floor clears the nav with ~28px of air. */
@media (max-width: 640px) {
  .hero { padding-top: clamp(96px, 14dvh, 130px); }
}

/* Touch target: canvas tabs sit at ~41px; lift to 44px and keep the label centered. */
@media (max-width: 860px) {
  .canvas-tab { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Profundidad que si se lee sobre casi negro: las sombras ahi son invisibles. */
.home-demo-preview, .canvas, .guide-card, .newsletter,
.visual-dashboard, .visual-erp, .visual-chat, .visual-schema, .visual-stats, .visual-hub, .visual-training, .visual-browser {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.home-demo-preview, .visual-dashboard, .visual-erp, .visual-chat, .visual-schema, .visual-stats, .visual-hub, .visual-training, .visual-browser { border-color: var(--line-strong); }

/* Tighten product mockups on small screens so their content fits the column */
@media (max-width: 560px) {
  /* Hero CTAs: keep the primary "Agenda" (was hidden), stack full-width, and drop
     the ghost demo button — the demo card right below repeats the exact same action. */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .hero-cta .btn { width: 100%; }
  .hero-cta .btn--ghost { display: none; }
  /* Clients strip: the border-left dividers leave a dangling "|" on wrapped rows.
     On mobile (where it wraps most) use gap as the only separator. */
  .clients-row { gap: 0.5rem 1.25rem; }
  .client-mark { border-left: 0; padding: 0; }
  .home-demo-preview__head { align-items: flex-start; flex-direction: column; }
  .home-demo-preview__head .btn { width: 100%; }
  .home-demo-preview__frame { padding: 0.8rem; }
  .home-demo-light__filters { display: none; }
  .home-demo-light__scope em { display: none; }
  .home-demo-light__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-demo-light__main { grid-template-columns: 1fr; }
  .home-demo-light__rank { display: none; }
  .home-demo-light__chart figure { height: 118px; }
  .home-demo-light__chart figure span:nth-child(-n+2) { display: none; }
  .visual-dashboard, .visual-erp, .visual-chat, .visual-schema, .visual-stats, .visual-hub, .visual-training, .visual-browser { padding: 0.85rem; min-height: 0; }
  .visual-kpis { gap: 0.4rem; }
  .visual-kpis > div { padding: 0.5rem 0.45rem; }
  .visual-kpis b { font-size: 1rem; }
  .visual-kpis span { font-size: 0.6rem; }
  .visual-kpis em { font-size: 0.62rem; }
  .visual-bars { height: 90px; }
  .visual-erp p, .visual-chat p, .visual-schema p { font-size: 0.68rem; }
  .visual-hub span { font-size: 0.62rem; padding: 0.2rem 0.45rem; }
}


/* ===== 35-narrative.css ===== */
/* ============================================================
   Apollo — 35 narrativa de la home
   Portado de prototypes/hero-v1/styles.css. Todo el bloque vive bajo .narrative
   para no chocar con los componentes de produccion, que ya usan .hero y .eyebrow.
   Se descartaron las reglas del shell del prototipo (header, nav movil, skip link,
   reset y :root): produccion aporta su propio nav, footer y tokens.
   Generado, no escrito a mano. Para regenerar, ver el commit que lo introdujo.
   ============================================================ */

.narrative {
  /* Puente entre los nombres del prototipo y los role tokens de produccion. */
  --space: var(--bg);
  --space-soft: var(--bg-tint);
  --warm-white: #F4F2EC;
  --gold: var(--accent);
  --gold-light: var(--accent-light);
  --signal-blue: var(--signal);
  --page-gutter: var(--gutter);

  /* OJO: en el prototipo --ink es tinta OSCURA sobre papel y --muted un gris frio,
     al reves que en produccion. Se renombraron para que no se pisen entre si. */
  --proto-ink: #111318;
  --proto-muted: #A2A9B5;

  /* Progresos que escribe narrative.js desde el scroll. */
  --transition-progress: 0;
  --orb-progress: 0;

  color: #f7f7f4;
}

.narrative * {
  box-sizing: border-box;
}

.narrative button,
.narrative a {
  font: inherit;
}

.narrative a {
  color: inherit;
  text-decoration: none;
}

.narrative button {
  color: inherit;
}

@keyframes header-cta-iridescence {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.narrative .hero {
  position: relative;
  display: grid;
  min-height: max(36rem, 72svh);
  overflow: hidden;
  padding: clamp(7rem, 10vh, 8rem) var(--page-gutter) 2.25rem;
  isolation: isolate;
}

.narrative #signal-canvas,
.narrative .hero-grid,
.narrative .hero-ambient,
.narrative .hero-vignette {
  position: absolute;
  inset: 0;
}

.narrative #signal-canvas {
  z-index: -3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.narrative .hero-ambient {
  z-index: -4;
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(69, 101, 184, 0.16),
      transparent 25%
    ),
    radial-gradient(
      circle at 58% 74%,
      rgba(216, 172, 84, 0.08),
      transparent 26%
    ),
    radial-gradient(
      circle at 84% 20%,
      rgba(64, 113, 215, 0.11),
      transparent 22%
    );
  pointer-events: none;
}

.narrative .ambient-orb,
.narrative .ambient-ring {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.narrative .ambient-orb-one {
  top: 15%;
  left: 39%;
  width: clamp(8rem, 18vw, 18rem);
  aspect-ratio: 1;
  background: rgba(76, 121, 218, 0.12);
  filter: blur(55px);
}

.narrative .ambient-orb-two {
  right: 8%;
  bottom: 5%;
  width: clamp(10rem, 22vw, 24rem);
  aspect-ratio: 1;
  background: rgba(212, 165, 82, 0.08);
  filter: blur(70px);
}

.narrative .ambient-ring {
  top: 12%;
  right: 14%;
  width: clamp(16rem, 34vw, 36rem);
  aspect-ratio: 1;
  border: 1px solid rgba(119, 166, 255, 0.07);
  box-shadow:
    0 0 0 4rem rgba(87, 126, 211, 0.018),
    0 0 0 9rem rgba(87, 126, 211, 0.012);
}

.narrative .hero-grid {
  z-index: -2;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: clamp(3rem, 6vw, 6rem) clamp(3rem, 6vw, 6rem);
  mask-image: linear-gradient(to right, black, transparent 62%);
}

.narrative .hero-vignette {
  z-index: -1;
  background:
    radial-gradient(
      circle at 73% 45%,
      transparent 0,
      transparent 15%,
      rgba(7, 9, 13, 0.12) 33%,
      rgba(7, 9, 13, 0.92) 82%
    ),
    linear-gradient(
      90deg,
      rgba(7, 9, 13, 0.08),
      rgba(7, 9, 13, 0.25) 55%,
      rgba(7, 9, 13, 0.72)
    );
  pointer-events: none;
}

.narrative .hero-content {
  width: min(52rem, 67vw);
  align-self: center;
}

.narrative .eyebrow,
.narrative .section-label {
  margin: 0 0 1.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.68rem, 0.85vw, 0.79rem);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.narrative .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.62);
}

.narrative .eyebrow-signal {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(216, 172, 84, 0.38);
  animation: signal-pulse 2.6s infinite;
}

@keyframes signal-pulse {
  50% {
    box-shadow: 0 0 0 0.55rem rgba(216, 172, 84, 0);
  }
}

.narrative h1,
.narrative h2,
.narrative p {
  text-wrap: pretty;
}

.narrative h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3.4rem, 7.1vw, 7.6rem);
  font-weight: 570;
  letter-spacing: -0.066em;
  line-height: 0.96;
  text-wrap: balance;
}

.narrative h1 span {
  display: block;
  padding-bottom: 0.08em;
  background: linear-gradient(
    100deg,
    var(--gold-light) 10%,
    var(--gold) 47%,
    #8ab9ff 100%
  );
  background-clip: text;
  color: transparent;
}

.narrative .hero-copy {
  max-width: 43rem;
  margin: 2rem 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(1.05rem, 1.6vw, 1.38rem);
  line-height: 1.55;
}

.narrative .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.2rem;
}

.narrative .button {
  position: relative;
  display: inline-flex;
  min-height: 3.65rem;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.91rem;
  font-weight: 650;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.narrative .button span {
  font-size: 1.05rem;
}

.narrative .button:hover,
.narrative .button:focus-visible {
  transform: translateY(-3px);
}

.narrative .button-primary {
  border-color: rgba(255, 240, 197, 0.52);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0) 46%
    ),
    linear-gradient(135deg, rgba(239, 209, 139, 0.94), rgba(216, 172, 84, 0.82));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.72),
    inset 0 -1px rgba(112, 74, 10, 0.17),
    0 12px 35px rgba(216, 172, 84, 0.18);
  color: #17130b;
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
}

.narrative .button-primary:hover,
.narrative .button-primary:focus-visible {
  border-color: rgba(255, 246, 219, 0.72);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.82),
    inset 0 -1px rgba(112, 74, 10, 0.14),
    0 16px 45px rgba(216, 172, 84, 0.28);
}

.narrative .button-secondary {
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.018) 48%
    ),
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(93, 137, 255, 0.025));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.29),
    inset 0 -1px rgba(108, 145, 223, 0.07),
    0 12px 34px rgba(0, 0, 0, 0.14);
  color: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

.narrative .button-secondary:hover,
.narrative .button-secondary:focus-visible {
  border-color: rgba(255, 255, 255, 0.46);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.025) 48%
    ),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(93, 137, 255, 0.05));
}

.narrative .reveal-item {
  opacity: 0;
  transform: translateY(1.2rem);
  animation: reveal-up 850ms cubic-bezier(0.2, 0.75, 0.22, 1) forwards;
}

.narrative .hero-content .reveal-item:nth-child(1) {
  animation-delay: 150ms;
}

.narrative .hero-content .reveal-item:nth-child(2) {
  animation-delay: 280ms;
}

.narrative .hero-content .reveal-item:nth-child(3) {
  animation-delay: 430ms;
}

.narrative .hero-content .reveal-item:nth-child(4) {
  animation-delay: 570ms;
}

.narrative .scroll-cue {
  position: absolute;
  right: var(--page-gutter);
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.28rem 0.3rem 0.28rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 50%),
    rgba(255, 255, 255, 0.025);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.22),
    0 10px 30px rgba(0, 0, 0, 0.14);
  color: rgba(255, 255, 255, 0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
}

.narrative .scroll-cue i {
  display: grid;
  width: 2.05rem;
  height: 2.05rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.23), transparent 42%),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.31),
    inset 0 -1px rgba(100, 138, 220, 0.09);
}

.narrative .scroll-cue i::after {
  width: 0.3rem;
  height: 0.3rem;
  transform: translateY(-0.08rem) rotate(45deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  content: "";
  animation: arrow-down 1.8s infinite;
}

@keyframes arrow-down {
  50% {
    transform: translateY(0.18rem) rotate(45deg);
  }
}

@keyframes reveal-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.narrative .transition-chapter {
  --ambient-x: 51%;
  --ambient-y: 18%;
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      ellipse 68% 11rem at 50% 19rem,
      rgba(77, 118, 255, 0.2),
      transparent 76%
    ),
    radial-gradient(
      circle at 86% 32%,
      rgba(111, 158, 255, 0.09),
      transparent 25%
    ),
    var(--warm-white);
  isolation: isolate;
}

.narrative .horizon-transition {
  position: relative;
  height: clamp(8.5rem, 15svh, 11rem);
  overflow: visible;
  background: transparent;
}

.narrative .blue-horizon {
  position: absolute;
  z-index: 1;
  bottom: -1.2rem;
  left: 50%;
  width: 220vw;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--space);
  box-shadow:
    0 0 1.8rem 1.15rem rgba(13, 21, 48, 0.96),
    0 0 4rem 2.7rem rgba(27, 69, 232, 0.94),
    0 1.8rem 5.5rem 4.25rem rgba(53, 94, 255, 0.82),
    0 4.8rem 7.5rem 6.2rem rgba(139, 176, 255, 0.46);
}

.narrative .horizon-transition::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 1rem;
  background: var(--space);
  content: "";
  pointer-events: none;
}

.narrative .clarity-section {
  position: relative;
  z-index: 3;
  min-height: 0;
  scroll-margin-top: 6.5rem;
  overflow: visible;
  margin-top: -1px;
  padding: clamp(3.4rem, 6.5vh, 5.25rem) var(--page-gutter)
    clamp(1.75rem, 2.8vh, 2.75rem);
  background: transparent;
  color: var(--proto-ink);
  isolation: isolate;
}

.narrative .clarity-ambient {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.narrative .clarity-orb {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  transition:
    left 800ms cubic-bezier(0.16, 1, 0.3, 1),
    top 800ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease;
  will-change: left, top;
}

.narrative .clarity-orb--primary {
  top: var(--ambient-y);
  left: var(--ambient-x);
  width: clamp(22rem, 39vw, 42rem);
  background: radial-gradient(
    circle at 44% 42%,
    rgba(54, 110, 255, 0.46) 0,
    rgba(70, 139, 255, 0.28) 31%,
    rgba(89, 91, 218, 0.13) 54%,
    transparent 74%
  );
  filter: blur(30px);
}

.narrative .clarity-orb--secondary {
  top: calc(var(--ambient-y) + 11%);
  left: calc(var(--ambient-x) + 14%);
  width: clamp(15rem, 27vw, 30rem);
  background: radial-gradient(
    circle,
    rgba(46, 196, 239, 0.32) 0,
    rgba(115, 75, 229, 0.2) 40%,
    transparent 72%
  );
  filter: blur(36px);
  opacity: 0.92;
  transition-duration: 1.05s;
}

.narrative .clarity-orb--accent {
  top: calc(var(--ambient-y) + 18%);
  left: calc(var(--ambient-x) - 17%);
  width: clamp(10rem, 17vw, 18rem);
  background: radial-gradient(
    circle,
    rgba(210, 150, 48, 0.24) 0,
    rgba(224, 173, 82, 0.12) 38%,
    transparent 70%
  );
  filter: blur(28px);
  opacity: 0.86;
  transition-duration: 1.25s;
}

.narrative .clarity-content {
  position: relative;
  z-index: 1;
  width: min(76rem, 100%);
  margin: 0 auto;
}

.narrative .scroll-headline,
.narrative .services-heading h2 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2.8rem, 6.5vw, 7rem);
  font-weight: 560;
  letter-spacing: -0.064em;
  line-height: 0.98;
}

.narrative .scroll-headline > span {
  display: block;
  overflow: hidden;
  padding: 0 0 0.09em;
  margin-bottom: -0.09em;
}

.narrative .scroll-headline > span > i {
  display: block;
  transform: translateY(calc((1 - var(--line-progress, 0)) * 108%));
  opacity: var(--line-progress, 0);
  font-style: normal;
  will-change: transform, opacity;
}

.narrative .scroll-headline > span > i {
  color: var(--proto-ink);
}

.narrative .scroll-headline > .impact-line > i {
  transform: translateX(calc((1 - var(--line-progress, 0)) * 2.2rem));
  opacity: var(--line-progress, 0);
}

.narrative .keyword {
  display: inline;
  padding: 0 0.035em;
  margin: 0 -0.035em;
  background-image:
    linear-gradient(
      102deg,
      #123cae 0%,
      #0b63e8 22%,
      #059ed0 39%,
      #594bd8 58%,
      #a33296 76%,
      #9a6300 89%,
      #164bd0 100%
    ),
    linear-gradient(var(--proto-ink), var(--proto-ink));
  background-position: left center;
  background-repeat: no-repeat;
  background-size:
    calc(var(--keyword-progress, 0) * 100%) 100%,
    100% 100%;
  background-clip: text;
  box-decoration-break: slice;
  color: transparent;
  font-style: normal;
  filter: drop-shadow(
    0 0 0.5rem rgba(32, 92, 224, calc(var(--keyword-progress, 0) * 0.13))
  );
  -webkit-background-clip: text;
  -webkit-box-decoration-break: slice;
  will-change: background-size, filter;
}

.narrative .clarity-copy {
  max-width: 42rem;
  margin: 2.6rem 0 0 auto;
  color: #596170;
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
  line-height: 1.55;
}

.narrative .scroll-reveal {
  transform: translateY(2.2rem);
  opacity: 0;
  transition:
    transform 850ms cubic-bezier(0.2, 0.75, 0.22, 1),
    opacity 650ms ease;
}

.narrative .scroll-reveal.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.narrative .services-section {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding: clamp(0.35rem, 1vw, 1rem) var(--page-gutter) 7rem;
  background: transparent;
  color: var(--proto-ink);
}

.narrative .service-story,
.narrative .services-footer {
  position: relative;
  z-index: 1;
  width: min(86rem, 100%);
  margin-right: auto;
  margin-left: auto;
}

.narrative .services-heading {
  padding-bottom: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid rgba(17, 19, 24, 0.16);
}

.narrative .section-label {
  margin: 0 0 2rem;
  color: #58677d;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.narrative .services-heading__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 8rem);
}

.narrative .services-heading h2 {
  max-width: 10ch;
}

.narrative .services-heading__grid > p {
  max-width: 34rem;
  margin: 0 0 0.55rem;
  color: #586170;
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.55;
}

.narrative .service-story {
  display: grid;
  grid-template-columns: minmax(21rem, 0.76fr) minmax(32rem, 1.24fr);
  gap: clamp(2.5rem, 6vw, 7rem);
}

.narrative .service-steps {
  position: relative;
}

.narrative .service-step {
  display: flex;
  min-height: 62svh;
  align-items: center;
  border-bottom: 1px solid rgba(17, 19, 24, 0.13);
}

.narrative .service-step:first-child {
  min-height: 82svh;
  align-items: flex-start;
  padding-top: 5svh;
}

.narrative .service-step:first-child .service-option {
  position: sticky;
  top: 8.5rem;
}

.narrative .service-step:last-child {
  min-height: 80svh;
  border-bottom: 0;
}

.narrative .service-option {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 2.4rem 2.1rem 2.4rem 1.5rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1.7rem;
  background: transparent;
  color: var(--proto-ink);
  text-align: left;
}

.narrative .service-option strong,
.narrative .service-option__copy {
  text-wrap: pretty;
}

.narrative .service-option::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.88), transparent 32%),
    linear-gradient(115deg, rgba(94, 155, 255, 0.11), rgba(178, 129, 255, 0.06) 48%, rgba(229, 188, 105, 0.12));
  content: "";
  opacity: 0;
  transition: opacity 320ms ease;
}

.narrative .service-option::before {
  position: absolute;
  top: 2.4rem;
  bottom: 2.4rem;
  left: 0;
  width: 2px;
  transform: scaleY(0.12);
  transform-origin: top;
  border-radius: 999px;
  background: linear-gradient(#1c63db, #76c8ff 62%, #d8ac54);
  content: "";
  opacity: 0.28;
  transition:
    transform 450ms cubic-bezier(0.2, 0.75, 0.22, 1),
    opacity 300ms ease;
}

.narrative .service-step.is-active .service-option::before {
  transform: scaleY(1);
  opacity: 1;
}

.narrative .service-step.is-active .service-option {
  border-color: rgba(70, 112, 184, 0.14);
  background: rgba(255, 255, 255, 0.44);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.9),
    0 1.2rem 3.5rem rgba(45, 70, 112, 0.08);
  backdrop-filter: blur(18px) saturate(140%);
}

.narrative .service-step.is-active .service-option::after {
  opacity: 1;
}

.narrative .service-option__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
  color: #2d5ca8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.narrative .service-option__count {
  flex: 0 0 auto;
  /* Vive sobre papel claro, no sobre el fondo oscuro: tinta, no blanco. */
  color: rgba(17, 19, 24, 0.72);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  transition: color 260ms ease;
}

.narrative .service-step.is-active .service-option__count {
  color: #205fce;
}

.narrative .service-option strong {
  display: block;
  max-width: 15ch;
  color: #6a7079;
  font-size: clamp(1.75rem, 3.1vw, 3.45rem);
  font-weight: 560;
  letter-spacing: -0.048em;
  line-height: 1.02;
  transition: color 300ms ease;
}

.narrative .service-option__copy {
  display: block;
  max-width: 34rem;
  margin-top: 1.5rem;
  color: #5f6774;
  font-size: 1rem;
  line-height: 1.55;
}

.narrative .service-option__action {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
  color: #606a78;
  font-size: 0.82rem;
  font-weight: 650;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 260ms ease,
    transform 320ms ease;
}

.narrative .service-option__action i {
  font-style: normal;
}

.narrative .service-step.is-active .service-option strong {
  color: var(--proto-ink);
}

.narrative .service-step.is-active .service-option__action {
  transform: translateY(0);
  opacity: 1;
}

.narrative .service-stage {
  position: relative;
}

.narrative .service-stage__sticky {
  position: sticky;
  top: 7rem;
  height: min(39rem, calc(100svh - 9rem));
  min-height: min(33rem, calc(100svh - 9rem));
  margin-top: 8svh;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.16);
  border-radius: 2rem;
  background: #0b1019;
  --service-scroll-progress: 0;
  box-shadow:
    0 2.4rem 7rem rgba(17, 28, 48, 0.16),
    inset 0 1px rgba(255, 255, 255, 0.12);
  transition:
    transform 500ms cubic-bezier(0.2, 0.75, 0.22, 1),
    box-shadow 500ms ease;
}

.narrative .service-stage__sticky::before {
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, #65d8ff, #7f70ff 28%, #d890ff 52%, #f2cc79 77%, #65d8ff);
  content: "";
  opacity: 0.24;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 350ms ease;
}

.narrative .service-stage__sticky::after {
  position: absolute;
  inset: 0 8% auto;
  z-index: 5;
  height: 28%;
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.13), transparent 68%);
  content: "";
  opacity: calc(0.48 + var(--service-scroll-progress) * 0.3);
  transform: translateY(calc((0.5 - var(--service-scroll-progress)) * 1.2rem));
  transition: opacity 180ms linear, transform 180ms linear;
  pointer-events: none;
}

.narrative .service-stage__motion-cue {
  position: absolute;
  top: 0.58rem;
  right: 4.1rem;
  bottom: auto;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(110, 145, 255, 0.08)),
    rgba(8, 13, 22, 0.54);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 0.8rem 2.2rem rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(18px) saturate(165%);
  opacity: 0.68;
  transform: translateY(-0.08rem);
  transition:
    opacity 280ms ease,
    transform 360ms cubic-bezier(0.2, 0.75, 0.22, 1),
    border-color 280ms ease;
  pointer-events: none;
}

.narrative .service-stage__motion-cue[hidden] {
  display: none;
}

.narrative .service-stage__motion-cue i {
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  background: linear-gradient(135deg, #80e2ff, #6c76ff 48%, #e7b96a);
  box-shadow: 0 0 0.8rem rgba(105, 167, 255, 0.72);
}

.narrative .service-stage__motion-cue.is-calling {
  border-color: rgba(126, 176, 255, 0.44);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.28),
    0 0.8rem 2.2rem rgba(0, 0, 0, 0.28),
    0 0 1.5rem rgba(81, 130, 255, 0.18);
  opacity: 1;
  transform: translateY(0);
}

.narrative .service-stage__motion-cue.is-calling i {
  animation: service-cue-pulse 1.4s ease-in-out 2;
}

@keyframes service-cue-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.45);
    box-shadow: 0 0 1.25rem rgba(105, 167, 255, 0.95);
  }
}

.narrative .service-stage__chrome {
  position: relative;
  z-index: 4;
  display: flex;
  height: 3.25rem;
  align-items: center;
  padding: 0 1.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.52);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

.narrative .service-stage__chrome span {
  margin-right: auto;
}

.narrative .service-stage__chrome i {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.narrative .service-visuals {
  position: relative;
  height: calc(100% - 3.25rem);
}

.narrative .service-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: clamp(1.35rem, 3vw, 2.6rem);
  transform: translateY(1.4rem) scale(0.985);
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 10%, rgba(84, 141, 255, 0.14), transparent 33%),
    #0b1019;
  clip-path: inset(0 0 100% 0 round 0 0 1.75rem 1.75rem);
  opacity: 0;
  transition:
    clip-path 760ms cubic-bezier(0.2, 0.75, 0.22, 1),
    transform 680ms cubic-bezier(0.2, 0.75, 0.22, 1),
    opacity 360ms ease;
}

.narrative .service-visual.is-active {
  z-index: 2;
  pointer-events: auto;
  transform: translateY(calc((0.5 - var(--service-scroll-progress)) * 0.7rem)) scale(1);
  clip-path: inset(0 0 0 0 round 0 0 1.75rem 1.75rem);
  opacity: 1;
}

.narrative .interface-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  color: #f6f8fb;
}

.narrative .interface-heading > div,
.narrative .dashboard-grid > *,
.narrative .analysis-layout > *,
.narrative .signal-list > button > span,
.narrative .data-source > span {
  min-width: 0;
}

.narrative .interface-heading > div > span,
.narrative .panel-label {
  display: block;
  margin-bottom: 0.45rem;
  color: rgba(255, 255, 255, 0.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.narrative .interface-heading strong {
  display: block;
  max-width: 18ch;
  font-size: clamp(1.3rem, 2.35vw, 2rem);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}

.narrative .interface-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(116, 228, 168, 0.21);
  border-radius: 999px;
  background: rgba(57, 159, 108, 0.08);
  color: #94d9b3;
  font-size: 0.67rem;
  white-space: nowrap;
}

.narrative .interface-status i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #67dfa1;
  box-shadow: 0 0 0.7rem rgba(103, 223, 161, 0.7);
}

.narrative .interface-status--blue {
  border-color: rgba(108, 170, 255, 0.25);
  background: rgba(67, 126, 232, 0.1);
  color: #a9ceff;
}

.narrative .interface-status--blue i {
  background: #6caaff;
  box-shadow: 0 0 0.7rem rgba(108, 170, 255, 0.75);
}

.narrative .interface-status--violet {
  border-color: rgba(174, 139, 255, 0.25);
  background: rgba(114, 79, 202, 0.1);
  color: #d3c0ff;
}

.narrative .interface-status--violet i {
  background: #ae8bff;
  box-shadow: 0 0 0.7rem rgba(174, 139, 255, 0.72);
}

.narrative .demo-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.15rem;
}

.narrative .demo-segmented {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.24rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.narrative .demo-segmented button {
  padding: 0.42rem 0.72rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.48);
  font: inherit;
  font-size: 0.63rem;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.narrative .demo-segmented button.is-selected {
  background: linear-gradient(120deg, rgba(91, 159, 255, 0.2), rgba(145, 112, 255, 0.18));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 0 1rem rgba(88, 139, 255, 0.1);
  color: #eef5ff;
}

.narrative .demo-sample-note {
  min-width: 16rem;
  max-width: 23rem;
  color: rgba(255, 255, 255, 0.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.narrative .service-stage__sticky .demo-control {
  pointer-events: auto;
  cursor: pointer;
}

.narrative .demo-modal__canvas .demo-control {
  pointer-events: auto;
}

.narrative .metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(1.6rem, 4vh, 2.7rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.025);
}

.narrative .metric-strip > * {
  padding: 1rem 1.1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.narrative .metric-strip > *:last-child {
  border-right: 0;
}

.narrative .metric-strip span,
.narrative .metric-strip strong {
  display: block;
}

.narrative .metric-strip span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
}

.narrative .metric-strip strong {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

.narrative [data-analysis-impact],
.narrative [data-analysis-confidence-label],
.narrative [data-data-quality],
.narrative [data-data-source] b {
  font-variant-numeric: tabular-nums;
}

.narrative .metric-card {
  position: relative;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 220ms ease;
}

.narrative .metric-card::after {
  position: absolute;
  top: 0.72rem;
  right: 0.72rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(151, 237, 204, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(120deg, rgba(104, 226, 178, 0.2), rgba(91, 156, 255, 0.18)),
    rgba(13, 25, 39, 0.82);
  box-shadow:
    0 0.45rem 1.2rem rgba(64, 197, 162, 0.16),
    0 0 1.1rem rgba(91, 156, 255, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.14);
  color: #b5f6d4;
  content: attr(data-increment);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.52rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.45rem) scale(0.9);
  white-space: nowrap;
}

.narrative .metric-card.is-counting::after {
  animation: incrementFloat 1350ms cubic-bezier(0.2, 0.75, 0.22, 1) both;
}

.narrative .metric-card:hover,
.narrative .metric-card:focus-visible,
.narrative .metric-card.is-selected {
  background: linear-gradient(140deg, rgba(91, 156, 255, 0.1), rgba(255, 255, 255, 0.015));
}

.narrative .metric-strip--numbers strong {
  display: inline-block;
  min-width: 5.35ch;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.narrative .metric-card small {
  display: block;
  margin-top: 0.32rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.57rem;
}

.narrative .metric-card small i {
  color: #83dfae;
  font-style: normal;
}

.narrative .dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(11rem, 0.65fr);
  gap: 1rem;
  margin-top: 1rem;
}

.narrative .trend-panel,
.narrative .signal-list,
.narrative .analysis-chart,
.narrative .scenario-panel {
  position: relative;
  min-height: 18rem;
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.025);
}

.narrative .trend-panel svg {
  display: block;
  width: 100%;
  height: 15.5rem;
  overflow: visible;
}

.narrative .chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: -1.4rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.54rem;
}

.narrative .chart-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.narrative .chart-area {
  fill: url(#dashboardFill);
}

.narrative .chart-line {
  fill: none;
  stroke: #6caaff;
  stroke-linecap: round;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(108, 170, 255, 0.45));
}

.narrative .chart-live-dot {
  fill: #b9e9ff;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  filter:
    drop-shadow(0 0 5px rgba(89, 166, 255, 0.95))
    drop-shadow(0 0 14px rgba(137, 112, 255, 0.75));
}

.narrative .signal-list > button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
}

.narrative .signal-list > button:last-child {
  border-bottom: 0;
}

.narrative .signal-list > button > span {
  display: grid;
  flex: 1;
  gap: 0.18rem;
}

.narrative .signal-list > button strong {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 560;
}

.narrative .signal-list > button small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.54rem;
}

.narrative .signal-list > button b {
  padding: 0.28rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.5rem;
  font-weight: 560;
}

.narrative .signal-list > button.is-selected {
  margin: 0 -0.55rem;
  width: calc(100% + 1.1rem);
  padding-right: 0.55rem;
  padding-left: 0.55rem;
  border-radius: 0.75rem;
  background: rgba(88, 146, 255, 0.08);
}

.narrative .signal-list__dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #6caaff;
  box-shadow: 0 0 0.7rem rgba(108, 170, 255, 0.55);
}

.narrative .signal-list__dot--gold {
  background: #e5bc69;
  box-shadow: 0 0 0.7rem rgba(229, 188, 105, 0.55);
}

.narrative .signal-list__dot--cyan {
  background: #70d7e4;
  box-shadow: 0 0 0.7rem rgba(112, 215, 228, 0.55);
}

.narrative .analysis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(12rem, 0.55fr);
  gap: 1rem;
  margin-top: 1rem;
}

.narrative .analysis-chart,
.narrative .scenario-panel {
  min-height: 27rem;
}

.narrative .analysis-chart svg {
  width: 100%;
  height: 23rem;
}

.narrative .analysis-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.narrative .analysis-band {
  fill: none;
  stroke: #6caaff;
  stroke-width: 28;
  stroke-linecap: round;
  opacity: 0.12;
}

.narrative .analysis-points circle {
  fill: #78b1ff;
  stroke: #c8e1ff;
  stroke-width: 2;
  filter: drop-shadow(0 0 7px rgba(108, 170, 255, 0.6));
}

.narrative .analysis-points .analysis-stream-point {
  fill: #a7d9ff;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 2.5;
  opacity: 0;
  filter:
    drop-shadow(0 0 6px rgba(83, 163, 255, 0.95))
    drop-shadow(0 0 14px rgba(153, 112, 255, 0.62));
}

.narrative .analysis-points .analysis-stream-point.is-visible {
  opacity: 1;
}

.narrative .scenario-panel {
  display: flex;
  flex-direction: column;
}

.narrative .scenario-panel > strong {
  min-height: 2.15em;
  margin-top: 1.2rem;
  color: white;
  font-size: 1.35rem;
  font-weight: 560;
  line-height: 1.05;
  text-wrap: balance;
}

.narrative .scenario-impact {
  display: block;
  width: 5.5ch;
  margin-top: 0.75rem;
  background: linear-gradient(105deg, #70baff, #8d78ff 45%, #f0c76f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.5rem, 5vw, 4.3rem);
  font-weight: 590;
  letter-spacing: -0.07em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.narrative .scenario-panel > p {
  min-height: 5.75em;
  margin: 0.7rem 0 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.narrative .scenario-confidence {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  margin: auto 0 0.8rem;
  color: rgba(255, 255, 255, 0.43);
  font-size: 0.58rem;
}

.narrative .scenario-confidence i {
  grid-column: 1 / -1;
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.narrative .scenario-confidence i b {
  display: block;
  width: 86%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a9ff, #8d77ff, #e8bd65);
  box-shadow: 0 0 1rem rgba(99, 161, 255, 0.45);
  transition: width 520ms cubic-bezier(0.2, 0.75, 0.22, 1);
}

.narrative .scenario-confidence > strong {
  width: 5ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.narrative .scenario-key {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
}

.narrative .scenario-key i {
  width: 1.4rem;
  height: 2px;
  background: #6caaff;
}

.narrative .scenario-key--gold i {
  background: #e5bc69;
}

.narrative .data-map {
  position: relative;
  height: calc(100% - 8.25rem);
  min-height: 27rem;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    rgba(255, 255, 255, 0.018);
  background-size: 2.5rem 2.5rem;
}

.narrative .data-source,
.narrative .data-hub,
.narrative .data-output {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.9rem;
  background: rgba(15, 22, 34, 0.92);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.75);
}

.narrative .data-source {
  left: 4%;
  width: 23%;
  min-width: 7.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 3.7ch;
  gap: 0.55rem;
  padding: 0.85rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  text-align: left;
  transition:
    opacity 220ms ease,
    transform 280ms ease,
    border-color 220ms ease,
    box-shadow 280ms ease,
    background 280ms ease;
}

.narrative .data-source > span {
  display: grid;
  flex: 1;
  gap: 0.16rem;
}

.narrative .data-source strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.63rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.narrative .data-source small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.narrative .data-source b {
  width: 3.7ch;
  color: #81dab0;
  font-size: 0.5rem;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.narrative .data-source:not(.is-selected) {
  opacity: 0.38;
}

.narrative .data-source.is-selected {
  border-color: rgba(108, 170, 255, 0.32);
}

.narrative .data-source.is-receiving {
  border-color: rgba(130, 205, 255, 0.7);
  background:
    linear-gradient(115deg, rgba(85, 158, 255, 0.15), rgba(139, 111, 255, 0.08)),
    rgba(15, 22, 34, 0.96);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 1.4rem rgba(90, 154, 255, 0.23),
    0 1rem 2rem rgba(0, 0, 0, 0.18);
}

.narrative .data-source i {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 0.18rem;
  background: #6caaff;
}

.narrative .data-source--one { top: 10%; }

.narrative .data-source--two { top: 44%; }

.narrative .data-source--three { top: 78%; }

.narrative .data-source--two i { background: #70d7e4; }

.narrative .data-source--three i { background: #ae8bff; }

.narrative .data-hub,
.narrative .data-output {
  z-index: 5;
  top: 50%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.narrative .data-hub {
  left: 52%;
  width: 24%;
  height: 8rem;
  transform: translate(-50%, -50%);
  border-color: rgba(108, 170, 255, 0.36);
  background: rgba(26, 48, 82, 0.82);
}

.narrative .data-output {
  right: 3%;
  width: 19%;
  height: 6.5rem;
  transform: translateY(-50%);
}

.narrative .data-hub i,
.narrative .data-output i {
  width: 0.65rem;
  height: 0.65rem;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: #6caaff;
  box-shadow: 0 0 1rem rgba(108, 170, 255, 0.75);
}

.narrative .data-output i {
  background: #e5bc69;
  box-shadow: 0 0 1rem rgba(229, 188, 105, 0.66);
}

.narrative .data-hub strong,
.narrative .data-output strong {
  color: white;
  font-size: 0.8rem;
  font-weight: 560;
  line-height: 1.1;
  text-wrap: balance;
}

.narrative .service-stage__sticky .service-visual {
  padding: clamp(1.15rem, 2.25vw, 2rem);
}

.narrative .service-stage__sticky .demo-filter-row {
  margin-top: 0.8rem;
}

.narrative .service-stage__sticky .metric-strip {
  margin-top: 0.8rem;
}

.narrative .service-stage__sticky .metric-strip > * {
  padding: 0.7rem 0.8rem;
}

.narrative .service-stage__sticky .trend-panel,
.narrative .service-stage__sticky .signal-list {
  min-height: 13.75rem;
  padding: 0.9rem;
}

.narrative .service-stage__sticky .trend-panel svg {
  height: 10.75rem;
}

.narrative .service-stage__sticky .signal-list > button {
  gap: 0.5rem;
  padding: 0.55rem 0;
}

.narrative .service-stage__sticky .signal-list > button strong {
  font-size: 0.67rem;
}

.narrative .service-stage__sticky .signal-list > button small {
  font-size: 0.52rem;
}

.narrative .service-stage__sticky .analysis-chart,
.narrative .service-stage__sticky .scenario-panel {
  min-height: clamp(17rem, 37svh, 20rem);
  padding: 0.9rem;
}

.narrative .service-stage__sticky .analysis-chart svg {
  height: clamp(14rem, 31svh, 17rem);
}

.narrative .service-stage__sticky .scenario-panel > strong {
  min-height: 2.1em;
  margin-top: 0.55rem;
  font-size: 1.08rem;
}

.narrative .service-stage__sticky .scenario-impact {
  margin-top: 0.45rem;
  font-size: clamp(2.15rem, 3.6vw, 3.15rem);
}

.narrative .service-stage__sticky .scenario-panel > p {
  min-height: 5.75em;
  margin: 0.45rem 0 0.65rem;
  font-size: 0.69rem;
  line-height: 1.38;
}

.narrative .service-stage__sticky .scenario-confidence {
  margin-bottom: 0.35rem;
}

.narrative .service-stage__sticky .scenario-key {
  gap: 0.5rem;
  padding-top: 0.45rem;
  font-size: 0.61rem;
}

.narrative .service-stage__sticky .data-map {
  height: calc(100% - 7.5rem);
  min-height: clamp(17rem, 37svh, 20rem);
}

.narrative .data-hub span,
.narrative .data-output span {
  min-height: 2.5em;
  max-width: 90%;
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.6rem;
  line-height: 1.25;
  text-wrap: balance;
}

.narrative .service-visual--dashboard,
.narrative .service-visual--analysis,
.narrative .service-visual--data {
  display: flex;
  flex-direction: column;
}

.narrative .service-visual--dashboard .dashboard-grid,
.narrative .service-visual--analysis .analysis-layout {
  min-height: 0;
  flex: 1;
}

.narrative .service-visual--dashboard .trend-panel,
.narrative .service-visual--dashboard .signal-list,
.narrative .service-visual--analysis .analysis-chart,
.narrative .service-visual--analysis .scenario-panel {
  height: 100%;
}

.narrative .data-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(108, 170, 255, 0.44);
  stroke-width: 2;
  stroke-dasharray: none;
  overflow: visible;
}

.narrative .data-path__out {
  stroke: rgba(229, 188, 105, 0.55);
}

.narrative .data-path__input {
  opacity: 0.84;
}

.narrative .data-path__out {
  opacity: 0.92;
}

.narrative .data-flow-pulse {
  fill: #98d4ff;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.5;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 4px rgba(95, 176, 255, 0.9))
    drop-shadow(0 0 10px rgba(135, 111, 255, 0.55));
  transition: opacity 260ms ease, filter 260ms ease;
}

.narrative .data-flow-pulse--out {
  fill: #f0c66f;
}

.narrative .data-flow-pulse.is-current { opacity: 0.92; }

.narrative .data-health {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  left: 1rem;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.55rem;
}

.narrative .data-health span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.narrative .data-health i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #69dda2;
  box-shadow: 0 0 0.7rem rgba(105, 221, 162, 0.6);
}

.narrative .data-health strong {
  color: rgba(255, 255, 255, 0.74);
  font-weight: 560;
}

.narrative .service-visual.is-active .metric-strip > *,
.narrative .demo-modal__canvas .metric-strip > * {
  animation: interfaceRise 620ms cubic-bezier(0.2, 0.75, 0.22, 1) both;
}

.narrative .service-visual.is-active .metric-strip > *:nth-child(2),
.narrative .demo-modal__canvas .metric-strip > *:nth-child(2) {
  animation-delay: 90ms;
}

.narrative .service-visual.is-active .metric-strip > *:nth-child(3),
.narrative .demo-modal__canvas .metric-strip > *:nth-child(3) {
  animation-delay: 180ms;
}

.narrative .service-visual.is-active .chart-line,
.narrative .demo-modal__canvas .chart-line {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: chartDraw 1450ms 180ms cubic-bezier(0.2, 0.75, 0.22, 1) forwards;
}

.narrative .service-visual.is-active .chart-area,
.narrative .demo-modal__canvas .chart-area {
  animation: chartAreaIn 900ms 460ms ease both;
}

.narrative .service-visual.is-active .signal-list > button,
.narrative .demo-modal__canvas .signal-list > button {
  animation: interfaceRise 560ms ease both;
}

.narrative .service-visual.is-active .signal-list > button:nth-child(3),
.narrative .demo-modal__canvas .signal-list > button:nth-child(3) {
  animation-delay: 120ms;
}

.narrative .service-visual.is-active .signal-list > button:nth-child(4),
.narrative .demo-modal__canvas .signal-list > button:nth-child(4) {
  animation-delay: 240ms;
}

.narrative .service-visual.is-active .signal-list__dot,
.narrative .demo-modal__canvas .signal-list__dot,
.narrative .service-visual.is-active .interface-status i,
.narrative .demo-modal__canvas .interface-status i {
  animation: statusPulse 1800ms ease-in-out infinite;
}

.narrative .service-visual--dashboard.is-active .chart-area {
  animation:
    chartAreaIn 900ms 460ms ease both,
    dashboardAreaBreathe 4.8s 1.4s ease-in-out infinite;
}

.narrative .service-visual.is-active .demo-sample-note {
  color: rgba(178, 220, 255, 0.66);
  transition: color 280ms ease, opacity 280ms ease;
}

.narrative .service-visual--dashboard.is-active .chart-live-dot {
  animation: liveDotBreathe 1.35s ease-in-out infinite;
}

.narrative .service-visual--dashboard.is-active.is-live-update .metric-card {
  animation: dashboardMetricArrival 680ms cubic-bezier(0.2, 0.75, 0.22, 1) both;
}

.narrative .service-visual--dashboard.is-active.is-live-update .metric-card:nth-child(2) {
  animation-delay: 75ms;
}

.narrative .service-visual--dashboard.is-active.is-live-update .metric-card:nth-child(3) {
  animation-delay: 150ms;
}

.narrative .signal-list > button.is-live {
  margin: 0 -0.35rem;
  width: calc(100% + 0.7rem);
  padding-right: 0.35rem;
  padding-left: 0.35rem;
  border-radius: 0.65rem;
  background: linear-gradient(100deg, rgba(83, 144, 255, 0.12), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
  transition: margin 280ms ease, width 280ms ease, padding 280ms ease, background 280ms ease;
}

.narrative .signal-list > button.is-live .signal-list__dot {
  animation: statusPulse 1100ms ease-in-out infinite;
}

.narrative .service-visual.is-active .analysis-band,
.narrative .demo-modal__canvas .analysis-band {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: chartDraw 1500ms 120ms cubic-bezier(0.2, 0.75, 0.22, 1) forwards;
}

.narrative .service-visual.is-active .analysis-points circle,
.narrative .demo-modal__canvas .analysis-points circle {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: pointPop 420ms cubic-bezier(0.2, 0.9, 0.35, 1.25) forwards;
}

.narrative .service-visual--analysis.is-active.is-live-update .scenario-impact,
.narrative .service-visual--analysis.is-active.is-live-update .scenario-confidence {
  animation: modelRecalculate 520ms ease both;
}

.narrative .service-visual.is-active .analysis-points circle:nth-child(1),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(1) { animation-delay: 280ms; }

.narrative .service-visual.is-active .analysis-points circle:nth-child(2),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(2) { animation-delay: 360ms; }

.narrative .service-visual.is-active .analysis-points circle:nth-child(3),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(3) { animation-delay: 440ms; }

.narrative .service-visual.is-active .analysis-points circle:nth-child(4),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(4) { animation-delay: 520ms; }

.narrative .service-visual.is-active .analysis-points circle:nth-child(5),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(5) { animation-delay: 600ms; }

.narrative .service-visual.is-active .analysis-points circle:nth-child(6),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(6) { animation-delay: 680ms; }

.narrative .service-visual.is-active .analysis-points circle:nth-child(7),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(7) { animation-delay: 760ms; }

.narrative .service-visual.is-active .analysis-points circle:nth-child(8),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(8) { animation-delay: 840ms; }

.narrative .service-visual.is-active .analysis-points circle:nth-child(9),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(9) { animation-delay: 920ms; }

.narrative .service-visual.is-active .analysis-points circle:nth-child(10),
.narrative .demo-modal__canvas .analysis-points circle:nth-child(10) { animation-delay: 1000ms; }

.narrative .service-visual.is-active .data-path path,
.narrative .demo-modal__canvas .data-path path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}

.narrative .service-visual.is-active .data-source,
.narrative .demo-modal__canvas .data-source {
  animation: sourceIn 620ms cubic-bezier(0.2, 0.75, 0.22, 1) both;
}

.narrative .service-visual.is-active .data-source--two,
.narrative .demo-modal__canvas .data-source--two { animation-delay: 120ms; }

.narrative .service-visual.is-active .data-source--three,
.narrative .demo-modal__canvas .data-source--three { animation-delay: 240ms; }

.narrative .service-visual--data.is-active.is-live-update .data-hub,
.narrative .service-visual--data.is-active.is-live-update .data-output,
.narrative .service-visual--data.is-active.is-live-update .data-health {
  animation: dataNodeArrival 680ms cubic-bezier(0.2, 0.75, 0.22, 1) both;
}

.narrative .service-visual.is-active .data-hub i,
.narrative .service-visual.is-active .data-output i,
.narrative .demo-modal__canvas .data-hub i,
.narrative .demo-modal__canvas .data-output i {
  animation: statusPulse 1600ms ease-in-out infinite;
}

@keyframes interfaceRise {
  from { transform: translateY(0.7rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes chartDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes chartAreaIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pointPop {
  to { transform: scale(1); }
}

@keyframes dataFlow {
  to { stroke-dashoffset: 0; }
}

@keyframes sourceIn {
  from { transform: translateX(-0.8rem); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes statusPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.72; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes liveDotBreathe {
  0%, 100% { opacity: 0.72; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.35); }
}

@keyframes livePointArrival {
  0% { opacity: 0.55; transform: scale(0.78); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes modelRecalculate {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.16) drop-shadow(0 0 0.5rem rgba(105, 164, 255, 0.22)); }
}

@keyframes packetStream {
  0% { opacity: 0; transform: translate(0, -50%) scale(0.72); }
  16% { opacity: 1; }
  76% { opacity: 1; transform: translate(2.3rem, -50%) scale(1); }
  100% { opacity: 0; transform: translate(3.25rem, -50%) scale(0.72); }
}

@keyframes dataNodeArrival {
  0% { filter: brightness(1); }
  48% { filter: brightness(1.34) drop-shadow(0 0 0.75rem rgba(103, 166, 255, 0.3)); }
  100% { filter: brightness(1); }
}

@keyframes incrementFloat {
  0% { opacity: 0; transform: translateY(0.5rem) scale(0.88); }
  18%, 62% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-0.4rem) scale(0.98); }
}

@keyframes dashboardMetricArrival {
  0% { background: rgba(81, 143, 255, 0.03); }
  45% { background: rgba(81, 143, 255, 0.16); }
  100% { background: rgba(81, 143, 255, 0.03); }
}

@keyframes dashboardTooltipDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.28rem); }
}

@keyframes dashboardTooltipArrival {
  0% { opacity: 0.4; transform: translateY(0.55rem) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dashboardAreaBreathe {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

.narrative .demo-modal[hidden] {
  display: none;
}

.narrative .demo-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.narrative .demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 18%, rgba(90, 130, 255, 0.2), transparent 36%),
    rgba(5, 8, 14, 0.76);
  backdrop-filter: blur(22px) saturate(130%);
  opacity: 0;
  transition: opacity 320ms ease;
}

.narrative .demo-modal.is-preparing .demo-modal__backdrop {
  opacity: 0.82;
}

.narrative .demo-transition-ghost {
  position: fixed !important;
  z-index: 102;
  margin: 0 !important;
  overflow: hidden;
  pointer-events: none;
  will-change: top, left, width, height, border-radius, box-shadow, opacity;
}

.narrative .demo-transition-ghost::after {
  opacity: 0.92;
}

.narrative .demo-transition-ghost.is-resolving {
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.narrative .demo-modal__dialog {
  --demo-dx: 0px;
  --demo-dy: 0px;
  --demo-scale-x: 0.62;
  --demo-scale-y: 0.82;
  position: relative;
  z-index: 1;
  width: min(calc(100vw - 3rem), 86rem);
  max-height: calc(100svh - 3rem);
  overflow: hidden auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2rem;
  background: rgba(12, 17, 27, 0.8);
  box-shadow:
    0 3rem 9rem rgba(0, 0, 0, 0.55),
    inset 0 1px rgba(255, 255, 255, 0.18);
  color: white;
  opacity: 0;
  transform-origin: center;
  backdrop-filter: blur(38px) saturate(175%);
}

.narrative .demo-modal__dialog::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, #68ddff, #7772ff 26%, #d989ff 50%, #f0c86e 76%, #68ddff);
  content: "";
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.narrative .demo-modal.is-open .demo-modal__backdrop {
  opacity: 1;
}

.narrative .demo-modal.is-open .demo-modal__dialog {
  animation: demoExpand 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.narrative .demo-modal.is-closing .demo-modal__backdrop {
  opacity: 0;
}

.narrative .demo-modal.is-closing .demo-modal__dialog {
  animation: demoClose 260ms ease forwards;
}

@keyframes demoExpand {
  from { transform: none; opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes demoClose {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.97); opacity: 0; }
}

.narrative .demo-modal__header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  height: 4.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4rem 0 1.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 15, 24, 0.66);
  backdrop-filter: blur(20px);
}

.narrative .demo-modal__header > span,
.narrative .demo-modal__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.narrative .demo-modal__header > span {
  color: rgba(255, 255, 255, 0.52);
}

.narrative .demo-modal__close {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
  color: white;
  cursor: pointer;
  font-size: 1.5rem;
  backdrop-filter: blur(14px);
}

.narrative .demo-modal__body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.55fr);
  min-height: min(43rem, calc(100svh - 7.25rem));
}

.narrative .demo-modal__canvas {
  position: relative;
  min-height: 36rem;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: #0b1019;
}

.narrative .demo-modal__canvas .service-visual {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 100%;
  transform: none;
  clip-path: none;
  opacity: 1;
}

.narrative .demo-modal__canvas .demo-control:focus-visible {
  outline: 2px solid #7fb8ff;
  outline-offset: 2px;
}

.narrative .demo-modal__details {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(circle at 100% 0%, rgba(128, 102, 255, 0.16), transparent 44%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
}

.narrative .demo-modal__label {
  margin: 0 0 1rem;
  color: #8ebaff;
}

.narrative .demo-modal__details h2 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 4.6rem);
  font-weight: 560;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.narrative .demo-modal__copy {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.98rem;
  line-height: 1.6;
}

.narrative .demo-modal__features {
  display: grid;
  gap: 0;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.narrative .demo-modal__features li {
  position: relative;
  padding: 0.95rem 0 0.95rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.84rem;
  line-height: 1.45;
}

.narrative .demo-modal__features li::before {
  position: absolute;
  top: 1.35rem;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #72cfff, #9a74ff 52%, #e8bd63);
  box-shadow: 0 0 0.7rem rgba(105, 174, 255, 0.6);
  content: "";
}

.narrative .demo-modal__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: linear-gradient(115deg, rgba(108, 207, 255, 0.14), rgba(139, 109, 255, 0.12), rgba(229, 188, 105, 0.14));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 0.82rem;
  font-weight: 650;
  backdrop-filter: blur(16px);
}

.narrative .demo-modal__scroll-cue {
  position: absolute;
  z-index: 8;
  bottom: 2rem;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.95rem;
  transform: translate(-50%, 0);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(118deg, rgba(104, 221, 255, 0.12), rgba(121, 114, 255, 0.1), rgba(240, 200, 110, 0.12)),
    rgba(8, 13, 22, 0.68);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 1rem 3rem rgba(0, 0, 0, 0.34);
  color: rgba(255, 255, 255, 0.8);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(18px) saturate(170%);
  opacity: 1;
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.2, 0.75, 0.22, 1);
  pointer-events: none;
}

.narrative .demo-modal__scroll-cue i {
  color: #8fdcff;
  font-style: normal;
  animation: modalScrollCue 1.4s ease-in-out infinite;
}

.narrative .demo-modal__scroll-cue.is-hidden {
  opacity: 0;
  transform: translate(-50%, 0.5rem);
}

@keyframes modalScrollCue {
  0%, 100% { transform: translateY(-0.1rem); }
  50% { transform: translateY(0.2rem); }
}

.narrative .services-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 4rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(17, 19, 24, 0.16);
}

.narrative .services-footer p {
  max-width: 35rem;
  margin: 0;
  color: #586170;
  font-size: 1rem;
}

.narrative .services-footer a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(17, 19, 24, 0.35);
  font-size: 0.88rem;
  font-weight: 650;
}

.narrative .prototype-anchors {
  display: none;
}

@media (max-width: 900px) {
  .narrative .hero {
      min-height: max(40rem, 78svh);
      padding-top: 8rem;
    }
  
  .narrative .hero-content {
      width: 100%;
      align-self: start;
    }
  
  .narrative h1 {
      max-width: 13ch;
      font-size: clamp(3.35rem, 10.5vw, 5.25rem);
      line-height: 0.98;
    }
  
  .narrative .hero-copy {
      max-width: 35rem;
    }
  
  .narrative .hero-grid {
      mask-image: linear-gradient(to bottom, black, transparent 72%);
    }
  
  .narrative .hero-vignette {
      background: linear-gradient(
        to bottom,
        rgba(7, 9, 13, 0.08),
        rgba(7, 9, 13, 0.44) 72%,
        var(--space)
      );
    }
  
  .narrative .scroll-cue {
      display: none;
    }
  
  .narrative .horizon-transition {
      height: clamp(9rem, 17svh, 11rem);
    }
  
  .narrative .blue-horizon {
      width: 205vw;
    }
  
  .narrative .clarity-orb--primary {
      width: clamp(22rem, 58vw, 34rem);
      filter: blur(44px);
    }
  
  .narrative .services-heading__grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  
  .narrative .services-heading h2 {
      max-width: 12ch;
    }
  
  .narrative .service-story {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }
  
  .narrative .service-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-bottom: 1px solid rgba(17, 19, 24, 0.13);
    }
  
  .narrative .service-step {
      min-height: 0;
      padding-top: 0;
      border-right: 1px solid rgba(17, 19, 24, 0.13);
      border-bottom: 0;
    }
  
  .narrative .service-step:first-child {
      min-height: 0;
    }
  
  .narrative .service-step:first-child .service-option {
      position: relative;
      top: auto;
    }
  
  .narrative .service-step:last-child {
      min-height: 0;
      border-right: 0;
    }
  
  .narrative .service-option {
      height: 100%;
      padding: 1.75rem 1.25rem 1.75rem 1.35rem;
    }
  
  .narrative .service-option::before {
      top: 1.75rem;
      bottom: 1.75rem;
    }
  
  .narrative .service-option strong {
      font-size: clamp(1.35rem, 3.2vw, 2rem);
    }
  
  .narrative .service-option__copy {
      font-size: 0.84rem;
    }
  
  .narrative .service-option__count {
      font-size: 0.6rem;
    }
  
  .narrative .service-stage__sticky {
      position: relative;
      top: auto;
      height: min(40rem, 72svh);
      min-height: 34rem;
      margin-top: 0;
    }
  
  .narrative .service-stage__motion-cue {
      opacity: 0.9;
    }
  
  .narrative .demo-modal {
      padding: 0.8rem;
    }
  
  .narrative .demo-modal__dialog {
      width: calc(100vw - 1.6rem);
      max-height: calc(100svh - 1.6rem);
      border-radius: 1.5rem;
    }
  
  .narrative .demo-modal__body {
      grid-template-columns: 1fr;
    }
  
  .narrative .demo-modal__canvas {
      min-height: 31rem;
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  
  .narrative .demo-modal__details {
      min-height: 25rem;
    }
  
  .narrative .demo-modal__details h2 {
      max-width: 16ch;
    }
  
  .narrative .demo-modal__scroll-cue {
      bottom: 1.35rem;
    }
}

@media (max-width: 620px) {
  .narrative .hero {
      min-height: 44rem;
      padding-right: 1.1rem;
      padding-left: 1.1rem;
    }
  
  .narrative .eyebrow {
      max-width: 27ch;
    }
  
  .narrative h1 {
      font-size: clamp(3.15rem, 15.3vw, 4.65rem);
      line-height: 0.98;
    }
  
  .narrative .hero-copy {
      margin-top: 1.5rem;
      font-size: 1rem;
    }
  
  .narrative .hero-actions {
      flex-direction: column;
      align-items: stretch;
      margin-top: 1.6rem;
    }
  
  .narrative .button {
      justify-content: space-between;
    }
  
  .narrative .clarity-content {
      width: 100%;
    }
  
  .narrative .scroll-headline,
  .narrative .services-heading h2 {
      font-size: clamp(2.35rem, 11vw, 3.6rem);
      line-height: 1;
    }
  
  .narrative .clarity-copy {
      margin-left: 0;
    }
  
  .narrative .clarity-section {
      min-height: 0;
      scroll-margin-top: 5.75rem;
      padding-right: 1.1rem;
      padding-bottom: 2rem;
      padding-left: 1.1rem;
    }
  
  .narrative .clarity-ambient {
      opacity: 0.74;
    }
  
  .narrative .clarity-orb--primary {
      width: 23rem;
    }
  
  .narrative .clarity-orb--secondary {
      width: 16rem;
    }
  
  .narrative .clarity-orb--accent {
      width: 11rem;
    }
  
  .narrative .services-section {
      padding: 0.5rem 1.1rem 4rem;
    }
  
  .narrative .services-heading {
      padding-bottom: 3.5rem;
    }
  
  .narrative .services-heading__grid > p {
      font-size: 1rem;
    }
  
  .narrative .service-steps {
      display: flex;
      gap: 0;
      margin: 0 -1.1rem;
      padding: 0 1.1rem 0.85rem;
      overflow-x: auto;
      border-bottom: 0;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
  
  .narrative .service-steps::-webkit-scrollbar {
      display: none;
    }
  
  .narrative .service-step {
      flex: 0 0 82vw;
      border-right: 0;
      border-bottom: 1px solid rgba(17, 19, 24, 0.13);
      scroll-snap-align: center;
    }
  
  .narrative .service-option {
      padding: 1.6rem 1.2rem 1.6rem 1.35rem;
    }
  
  .narrative .service-option strong {
      max-width: 17ch;
      font-size: 1.7rem;
    }
  
  .narrative .service-option__copy {
      max-width: 28rem;
    }
  
  .narrative .service-option__action {
      opacity: 1;
      transform: none;
    }
  
  .narrative .service-option__label {
      align-items: flex-start;
    }
  
  .narrative .service-stage__sticky {
      height: 33rem;
      min-height: 33rem;
      border-radius: 1.35rem;
    }
  
  .narrative .service-stage__motion-cue {
      top: auto;
      right: 0.75rem;
      bottom: 0.75rem;
      padding: 0.65rem 0.75rem;
      font-size: 0.56rem;
    }
  
  .narrative .demo-modal__header {
      height: 3.7rem;
      padding: 0 0.8rem 0 1rem;
    }
  
  .narrative .demo-modal__canvas {
      min-height: 28rem;
    }
  
  .narrative .demo-modal__canvas .service-visual {
      padding: 1rem;
    }
  
  .narrative .demo-modal__details {
      min-height: 23rem;
      padding: 1.5rem;
    }
  
  .narrative .demo-modal__details h2 {
      font-size: clamp(2rem, 11vw, 3.25rem);
    }
  
  .narrative .demo-modal__scroll-cue {
      bottom: 1rem;
      font-size: 0.56rem;
    }
  
  .narrative .service-visual {
      padding: 1.15rem;
    }
  
  .narrative .demo-sample-note {
      min-width: 0;
      white-space: normal;
    }
  
  .narrative .interface-status {
      display: none;
    }
  
  .narrative .metric-strip > * {
      padding: 0.8rem 0.7rem;
    }
  
  .narrative .metric-strip strong {
      font-size: 0.72rem;
    }
  
  .narrative .dashboard-grid,
  .narrative .analysis-layout {
      grid-template-columns: 1fr;
    }
  
  .narrative .signal-list,
  .narrative .scenario-panel {
      display: none;
    }
  
  .narrative .trend-panel,
  .narrative .analysis-chart {
      min-height: 20rem;
    }
  
  .narrative .trend-panel svg,
  .narrative .analysis-chart svg {
      height: 17rem;
    }
  
  .narrative .analysis-layout {
      margin-top: 1.5rem;
    }
  
  .narrative .data-map {
      min-height: 25rem;
    }
  
  .narrative .data-source {
      left: 3%;
      width: 24%;
      min-width: 6.2rem;
      padding: 0.7rem;
    }
  
  .narrative .data-hub {
      left: 52%;
      width: 24%;
    }
  
  .narrative .data-output {
      right: 2%;
      width: 20%;
    }
  
  .narrative .services-footer {
      align-items: flex-start;
      flex-direction: column;
      margin-top: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
  .narrative *,
  .narrative *::before,
  .narrative *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  
  .narrative .scroll-headline > span > i {
      transform: none;
      opacity: 1;
    }
  
  .narrative .service-stage__motion-cue i {
      animation: none !important;
    }
}

.narrative .method-slide__copy {
  max-width: 29rem;
  padding: clamp(1.35rem, 2.7vw, 2rem);
}

.narrative .method-slide__copy > span {
  color: #9ec7ff;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.narrative .method-slide__copy h3 {
  max-width: 9.5ch;
  margin: 0.75rem 0 0;
  font-size: clamp(2.5rem, 4.6vw, 4.85rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.narrative .method-slide__copy p {
  max-width: 22ch;
  margin: 1.15rem 0 0;
  color: rgba(238, 244, 255, 0.78);
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.35;
}

.narrative .method-proof {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: clamp(25rem, 40vw, 33rem);
  overflow: hidden;
}

.narrative .method-proof > header,
.narrative .method-proof > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  color: rgba(223, 234, 250, 0.6);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.narrative .method-proof > header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.narrative .method-proof > header i {
  color: #9ec7ff;
  font-style: normal;
}

.narrative .method-proof > footer {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  text-transform: none;
  letter-spacing: 0.04em;
}

.narrative .method-proof > footer b {
  color: #9ec7ff;
  font-weight: 700;
}

.narrative .method-proof__signal {
  display: grid;
  align-content: center;
  min-height: 12rem;
  padding: clamp(1.5rem, 3.4vw, 2.7rem);
}

.narrative .method-proof__signal small {
  color: rgba(220, 231, 248, 0.55);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.narrative .method-proof__signal strong {
  max-width: 15ch;
  margin-top: 0.55rem;
  font-size: clamp(2rem, 3.4vw, 3.45rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.narrative .method-proof__signal > i {
  justify-self: start;
  margin-top: 1rem;
  padding: 0.5rem 0.75rem;
  color: #b9d7ff;
  border: 1px solid rgba(113, 171, 255, 0.32);
  border-radius: 999px;
  background: rgba(69, 124, 211, 0.12);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
  font-size: 0.76rem;
  font-style: normal;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.narrative .method-proof__flow,
.narrative .method-proof__metrics,
.narrative .method-proof__handoff {
  margin: 0 clamp(1.1rem, 2.7vw, 2rem) clamp(1.1rem, 2.7vw, 2rem);
}

.narrative .method-proof__flow {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr auto 1fr;
  align-items: center;
  gap: 0.55rem;
}

.narrative .method-proof__flow span,
.narrative .method-proof__handoff span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.4rem;
  padding: 0.75rem;
  color: rgba(235, 243, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}

.narrative .method-proof__flow span > i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #67b6ff;
  box-shadow: 0 0 1rem rgba(103, 182, 255, 0.75);
}

.narrative .method-proof__flow span.is-focus {
  color: #fff;
  border-color: rgba(235, 197, 104, 0.44);
  background: linear-gradient(125deg, rgba(55, 113, 203, 0.2), rgba(220, 179, 91, 0.14));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 0 2rem rgba(70, 129, 225, 0.12);
}

.narrative .method-proof__flow span.is-focus > i {
  background: #efc568;
  box-shadow: 0 0 1rem rgba(239, 197, 104, 0.7);
}

.narrative .method-proof__flow b {
  color: rgba(157, 198, 255, 0.55);
}

.narrative .method-proof__metrics,
.narrative .method-proof__handoff {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.narrative .method-proof__metrics p {
  display: grid;
  gap: 0.3rem;
  min-height: 5.2rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.045);
}

.narrative .method-proof__metrics small {
  font-size: 0.72rem;
}

.narrative .method-proof__metrics b {
  align-self: end;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
}

.narrative .method-proof__handoff span {
  color: #eff9f6;
  border-color: rgba(94, 224, 175, 0.2);
  background: rgba(58, 173, 133, 0.08);
}

.narrative .method-proof__handoff span i {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: #6be2b3;
  border: 1px solid rgba(107, 226, 179, 0.5);
  border-radius: 50%;
  font-size: 0.7rem;
  font-style: normal;
}

.narrative .method-proof--prototype .method-proof__signal > i {
  color: #d8c5ff;
  border-color: rgba(180, 139, 255, 0.35);
  background: rgba(137, 97, 210, 0.12);
}

.narrative .method-proof--launch .method-proof__signal > i {
  color: #baf5da;
  border-color: rgba(99, 226, 177, 0.34);
  background: rgba(55, 164, 123, 0.12);
}

@media (max-width: 900px) {
  .narrative .method-slide__copy h3 {
      max-width: 12ch;
    }
  
  .narrative .method-proof {
      min-height: 22rem;
    }
}

@media (max-width: 620px) {
  .narrative .method-slide__copy h3 {
      font-size: clamp(2.35rem, 12vw, 3.6rem);
    }
  
  .narrative .method-proof__signal {
      min-height: 10rem;
    }
  
  .narrative .method-proof__flow {
      grid-template-columns: 1fr;
    }
  
  .narrative .method-proof__flow > b {
      display: none;
    }
  
  .narrative .method-proof__metrics,
  .narrative .method-proof__handoff {
      grid-template-columns: 1fr;
    }
  
  .narrative .method-proof__metrics p,
  .narrative .method-proof__handoff span {
      min-height: 3.4rem;
    }
}

.narrative .method-section {
  padding-top: clamp(2.25rem, 4vw, 4rem);
}

.narrative .method-carousel {
  isolation: isolate;
  border-color: rgba(139, 177, 239, 0.28);
  background: #07101d;
  box-shadow:
    0 2.75rem 7rem rgba(25, 39, 63, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.narrative .method-carousel::after {
  position: absolute;
  z-index: 0;
  inset: -25% -12%;
  background:
    radial-gradient(circle at 17% 22%, rgba(73, 131, 255, 0.22), transparent 25%),
    radial-gradient(circle at 78% 18%, rgba(191, 120, 255, 0.16), transparent 23%),
    radial-gradient(circle at 67% 84%, rgba(238, 192, 92, 0.12), transparent 24%);
  content: "";
  pointer-events: none;
}

.narrative .method-carousel__chapters {
  z-index: 5;
  margin: 0;
  padding: 0.7rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(9, 17, 31, 0.72), rgba(25, 34, 52, 0.54));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.narrative .method-carousel__chapters button {
  min-height: 4.35rem;
  color: rgba(220, 228, 241, 0.64);
}

.narrative .method-carousel__chapters button > span {
  color: #86b4ff;
}

.narrative .method-carousel__chapters button strong {
  color: #f6f8fc;
}

.narrative .method-carousel__chapters button small {
  color: rgba(220, 228, 241, 0.54);
}

.narrative .method-carousel__chapters button:hover,
.narrative .method-carousel__chapters button:focus-visible,
.narrative .method-carousel__chapters button.is-active {
  border-color: rgba(158, 190, 245, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(157, 185, 237, 0.07));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 0.8rem 2rem rgba(0, 0, 0, 0.16);
}

.narrative .method-carousel__viewport {
  background: #07101d;
}

.narrative .method-slide {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(18rem, 0.78fr) minmax(26rem, 1.22fr);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 3rem);
  min-height: clamp(38rem, 58vw, 49rem);
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4rem);
  color: #f8f9fc;
}

.narrative .method-slide__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
}

.narrative .method-slide__media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 9, 18, 0.92) 0%, rgba(4, 9, 18, 0.64) 43%, rgba(4, 9, 18, 0.18) 78%),
    linear-gradient(180deg, rgba(4, 9, 18, 0.1) 20%, rgba(4, 9, 18, 0.86) 100%);
  content: "";
}

.narrative .method-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transform: scale(1.08);
  filter: saturate(0.82) contrast(1.04) brightness(0.7);
  transition: transform 1600ms cubic-bezier(0.22, 1, 0.36, 1), filter 900ms ease;
}

.narrative .method-slide__media--prototype img {
  object-position: 58% 48%;
}

.narrative .method-slide__media--launch img {
  object-position: 70% 52%;
  filter: saturate(0.92) contrast(1.04) brightness(0.64) hue-rotate(8deg);
}

.narrative .method-slide.is-active .method-slide__media img {
  transform: scale(1.015);
  filter: saturate(0.95) contrast(1.05) brightness(0.72);
}

.narrative .method-slide.is-active .method-slide__media--launch img {
  filter: saturate(1) contrast(1.05) brightness(0.68) hue-rotate(8deg);
}

.narrative .method-slide__copy {
  align-self: end;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.55rem;
  background: linear-gradient(135deg, rgba(9, 17, 30, 0.72), rgba(30, 40, 61, 0.42));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.17),
    0 1.5rem 3.5rem rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.narrative .method-slide__copy > span {
  color: #9dc4ff;
}

.narrative .method-slide__copy h3 {
  max-width: 12ch;
  color: #fff;
  font-size: clamp(2.15rem, 3.8vw, 4rem);
}

.narrative .method-slide__copy p {
  margin-top: 1.25rem;
  color: rgba(237, 242, 250, 0.74);
}

.narrative .method-case {
  align-self: center;
  min-height: 27rem;
  max-height: 34rem;
  border-color: rgba(176, 202, 246, 0.24);
  border-radius: 1.65rem;
  background:
    radial-gradient(circle at 88% 6%, rgba(99, 161, 255, 0.13), transparent 20rem),
    linear-gradient(145deg, rgba(15, 24, 40, 0.82), rgba(7, 13, 24, 0.72));
  box-shadow:
    0 2rem 5rem rgba(0, 0, 0, 0.3),
    inset 0 1px rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  backdrop-filter: blur(26px) saturate(135%);
}

.narrative .method-carousel__controls {
  z-index: 5;
  border-top-color: rgba(255, 255, 255, 0.13);
  background: linear-gradient(135deg, rgba(9, 17, 31, 0.78), rgba(25, 34, 52, 0.62));
  color: white;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.narrative .method-carousel__controls p {
  color: rgba(224, 231, 243, 0.62);
}

.narrative .method-carousel__controls p span {
  color: #8ebcff;
}

.narrative .method-carousel__dots button {
  background: rgba(218, 228, 244, 0.2);
}

.narrative .method-carousel__controls > div:last-child button {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

@media (max-width: 900px) {
  .narrative .method-slide {
      grid-template-columns: 1fr;
      align-content: end;
      min-height: auto;
      padding: clamp(1rem, 4vw, 2rem);
    }
  
  .narrative .method-slide__copy {
      margin-top: clamp(15rem, 48vw, 24rem);
    }
  
  .narrative .method-case {
      width: 100%;
      max-height: none;
    }
}

@media (max-width: 620px) {
  .narrative .method-slide__media::after {
      background:
        linear-gradient(180deg, rgba(4, 9, 18, 0.14) 8%, rgba(4, 9, 18, 0.84) 44%, rgba(4, 9, 18, 0.96) 100%);
    }
  
  .narrative .method-slide__copy {
      margin-top: 13rem;
    }
  
  .narrative .method-slide__copy h3 {
      font-size: clamp(2rem, 11vw, 3.25rem);
    }
  
  .narrative .method-case {
      min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
  .narrative .method-slide__media img,
  .narrative .method-slide.is-active .method-slide__media img {
      transform: none;
      transition: none !important;
    }
}

.narrative .method-section,
.narrative .trust-section,
.narrative .closing-section {
  position: relative;
  isolation: isolate;
}

.narrative .method-section,
.narrative .trust-section {
  color: var(--proto-ink);
  background: var(--warm-white);
}

.narrative .method-section {
  padding: clamp(6rem, 11vw, 10rem) var(--page-gutter)
    clamp(6.5rem, 12vw, 11rem);
  overflow: clip;
  background:
    radial-gradient(circle at 86% 16%, rgba(105, 157, 255, 0.16), transparent 24rem),
    radial-gradient(circle at 18% 70%, rgba(227, 182, 97, 0.11), transparent 27rem),
    var(--warm-white);
}

.narrative .method-section__ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(24, 33, 48, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 33, 48, 0.035) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}

.narrative .section-kicker {
  margin: 0 0 1.25rem;
  color: #2858ae;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.narrative .method-heading,
.narrative .trust-heading {
  max-width: 74rem;
}

.narrative .method-heading h2,
.narrative .trust-heading h2,
.narrative .closing-section h2 {
  margin: 0;
  font-size: clamp(3rem, 6.2vw, 6.8rem);
  font-weight: 620;
  letter-spacing: -0.068em;
  line-height: 0.94;
  text-wrap: balance;
}

.narrative .method-heading h2 span,
.narrative .trust-heading h2 span {
  color: #687384;
}

.narrative .method-heading > p:last-child,
.narrative .trust-heading > p:last-child {
  width: min(100%, 45rem);
  margin: 2rem 0 0 auto;
  color: #5d687a;
  font-size: clamp(1.05rem, 1.65vw, 1.45rem);
  line-height: 1.55;
}

.narrative .method-story {
  display: grid;
  grid-template-columns: minmax(18rem, 0.76fr) minmax(32rem, 1.24fr);
  gap: clamp(3rem, 8vw, 9rem);
  max-width: 90rem;
  margin: clamp(5rem, 10vw, 10rem) auto 0;
}

.narrative .method-steps {
  display: grid;
  gap: 0;
}

.narrative .method-step {
  min-height: 43svh;
  border-top: 1px solid rgba(25, 35, 50, 0.16);
  opacity: 0.43;
  transition: opacity 380ms ease;
}

.narrative .method-step:last-child {
  border-bottom: 1px solid rgba(25, 35, 50, 0.16);
}

.narrative .method-step.is-active {
  opacity: 1;
}

.narrative .method-step__trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
  width: 100%;
  padding: 2.2rem 0;
  border: 0;
  background: transparent;
  color: var(--proto-ink);
  text-align: left;
  cursor: pointer;
}

.narrative .method-step__trigger:focus-visible {
  outline: 2px solid #2a67ed;
  outline-offset: 0.55rem;
  border-radius: 0.65rem;
}

.narrative .method-step__signal {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.37rem;
  border: 1px solid rgba(45, 99, 225, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 0 rgba(74, 122, 255, 0);
  transition: background 300ms ease, box-shadow 300ms ease;
}

.narrative .method-step.is-active .method-step__signal {
  background: #5ba8ff;
  box-shadow:
    0 0 0 0.4rem rgba(86, 138, 255, 0.12),
    0 0 1.25rem rgba(62, 117, 255, 0.48);
}

.narrative .method-step__copy {
  display: grid;
  gap: 0.7rem;
}

.narrative .method-step__copy small {
  color: #2860c1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.narrative .method-step__copy strong {
  max-width: 23rem;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.narrative .method-step__copy > span {
  max-width: 27rem;
  color: #5e6877;
  font-size: 1rem;
  line-height: 1.55;
}

.narrative .method-step__arrow {
  color: #697789;
  font-size: 1.25rem;
  transition: transform 300ms ease, color 300ms ease;
}

.narrative .method-step.is-active .method-step__arrow {
  transform: translate(0.25rem, 0.25rem);
  color: #2665db;
}

.narrative .method-visual-wrap {
  position: relative;
}

.narrative .method-visual {
  position: sticky;
  top: 7.5rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: min(45rem, calc(100svh - 9.5rem));
  overflow: hidden;
  border: 1px solid rgba(134, 165, 224, 0.45);
  border-radius: clamp(1.5rem, 3vw, 2.75rem);
  background:
    radial-gradient(circle at 74% 40%, rgba(63, 101, 178, 0.18), transparent 33%),
    linear-gradient(145deg, #121a28, #080c14 68%);
  color: #f7f9fc;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.12),
    0 2.5rem 5rem rgba(19, 34, 61, 0.2);
}

.narrative .method-visual::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.07), transparent 25% 72%, rgba(103, 126, 255, 0.08));
  content: "";
  pointer-events: none;
}

.narrative .method-visual__header,
.narrative .method-visual__footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 1rem 1.5rem;
  color: #9ca9ba;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.67rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.narrative .method-visual__header {
  border-bottom: 1px solid rgba(174, 194, 229, 0.14);
}

.narrative .method-visual__footer {
  align-items: flex-end;
  border-top: 1px solid rgba(174, 194, 229, 0.14);
}

.narrative .method-visual__footer p {
  max-width: 31rem;
  margin: 0;
  color: #c3ccda;
  font-family: inherit;
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-transform: none;
}

.narrative .method-visual__status,
.narrative .method-visual__footer > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.narrative .method-visual__status i,
.narrative .method-visual__footer > span i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #66dbff;
  box-shadow: 0 0 1rem rgba(85, 188, 255, 0.7);
}

.narrative .method-map {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 30rem;
  padding: 2rem;
}

.narrative .method-map svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.narrative .method-map__grid path {
  fill: none;
  stroke: rgba(128, 156, 202, 0.09);
  stroke-width: 1;
}

.narrative .method-route {
  fill: none;
  stroke: rgba(106, 151, 223, 0.28);
  stroke-width: 2;
  transition: stroke 450ms ease, stroke-width 450ms ease, filter 450ms ease;
}

.narrative .method-map__signals > circle {
  fill: #6cb5ff;
  filter: drop-shadow(0 0 0.65rem rgba(79, 143, 255, 0.72));
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 450ms ease, fill 450ms ease, opacity 450ms ease;
}

.narrative .method-map__core circle {
  fill: rgba(68, 105, 172, 0.08);
  stroke: rgba(123, 165, 241, 0.36);
  transition: fill 450ms ease, stroke 450ms ease, filter 450ms ease;
}

.narrative .method-map__core circle:last-child {
  fill: url(#method-node);
  stroke: none;
}

.narrative .method-map__output rect {
  fill: rgba(113, 138, 193, 0.08);
  stroke: rgba(139, 169, 229, 0.3);
}

.narrative .method-map__output circle {
  fill: #e6bb64;
  filter: drop-shadow(0 0 0.8rem rgba(237, 190, 89, 0.7));
}

.narrative .method-map__output path {
  fill: none;
  stroke: rgba(216, 225, 241, 0.52);
  stroke-width: 4;
  stroke-linecap: round;
}

.narrative .method-pulse {
  fill: #eefaff;
  filter: drop-shadow(0 0 0.6rem #63aaff);
  offset-rotate: 0deg;
  animation: method-travel 3.4s linear infinite;
}

.narrative .method-pulse--a {
  offset-path: path("M102 100C210 100 225 223 338 223");
}

.narrative .method-pulse--b {
  offset-path: path("M102 355C210 355 230 223 338 223");
  animation-delay: -1.4s;
  animation-duration: 3.8s;
}

.narrative .method-pulse--out {
  offset-path: path("M388 223C470 223 495 223 588 223");
  animation-delay: -0.6s;
  animation-duration: 2.7s;
}

@keyframes method-travel {
  from { offset-distance: 0%; opacity: 0; }
  10%, 88% { opacity: 1; }
  to { offset-distance: 100%; opacity: 0; }
}

.narrative .method-map__label {
  position: absolute;
  color: #8391a5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 350ms ease, opacity 350ms ease;
}

.narrative .method-map__label--signals { top: 18%; left: 7%; }

.narrative .method-map__label--core { top: 26%; left: 49%; }

.narrative .method-map__label--output { top: 31%; right: 4%; }

.narrative .method-visual[data-method-state="understand"] .method-route--one,
.narrative .method-visual[data-method-state="understand"] .method-route--two,
.narrative .method-visual[data-method-state="understand"] .method-route--three,
.narrative .method-visual[data-method-state="build"] .method-route,
.narrative .method-visual[data-method-state="transfer"] .method-route--out {
  stroke: url(#method-route);
  stroke-width: 3;
  filter: drop-shadow(0 0 0.45rem rgba(88, 143, 255, 0.45));
}

.narrative .method-visual[data-method-state="build"] .method-map__core circle {
  fill: rgba(67, 113, 199, 0.18);
  stroke: rgba(111, 164, 255, 0.7);
  filter: drop-shadow(0 0 0.65rem rgba(68, 123, 255, 0.35));
}

.narrative .method-visual[data-method-state="transfer"] .method-map__output rect {
  fill: rgba(94, 113, 178, 0.15);
  stroke: rgba(232, 190, 102, 0.7);
}

.narrative .trust-section {
  padding: clamp(4rem, 7vw, 7rem) var(--page-gutter)
    clamp(7rem, 13vw, 12rem);
  background:
    radial-gradient(circle at 12% 22%, rgba(223, 184, 111, 0.11), transparent 26rem),
    linear-gradient(#f4f2ec, #efeee9);
}

.narrative .trust-comparison {
  position: relative;
  min-height: clamp(30rem, 58vw, 48rem);
  margin-top: clamp(4rem, 8vw, 8rem);
  overflow: hidden;
  border: 1px solid rgba(89, 110, 151, 0.28);
  border-radius: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 2.5rem 6rem rgba(34, 48, 73, 0.16);
  isolation: isolate;
}

.narrative .trust-comparison__surface {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.narrative .trust-comparison__after {
  background:
    radial-gradient(circle at 72% 44%, rgba(69, 116, 220, 0.23), transparent 28rem),
    #0a101b;
  color: white;
}

.narrative .trust-comparison__before {
  clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
  background:
    linear-gradient(rgba(26, 36, 52, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 36, 52, 0.035) 1px, transparent 1px),
    #e3e5e8;
  background-size: 4rem 4rem;
  color: #252a33;
  transition: clip-path 50ms linear;
}

.narrative .trust-comparison__label {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.65;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.narrative .trust-flow {
  width: min(100%, 59rem);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid rgba(157, 181, 225, 0.24);
  border-radius: 2rem;
  background: rgba(11, 18, 31, 0.62);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.narrative .trust-flow--before {
  border-color: rgba(40, 50, 66, 0.18);
  background: rgba(250, 250, 250, 0.65);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.85);
}

.narrative .trust-flow header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(150, 170, 206, 0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
}

.narrative .trust-flow header i {
  color: #73e4b1;
  font-style: normal;
}

.narrative .trust-flow--before header i {
  color: #8a5353;
}

.narrative .trust-flow__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem;
}

.narrative .trust-flow__items p {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.65rem;
  margin: 0;
  padding: 1rem;
  border-right: 1px solid rgba(150, 170, 206, 0.16);
}

.narrative .trust-flow__items p:last-child {
  border: 0;
}

.narrative .trust-flow__items p > i {
  grid-row: span 2;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.22rem;
  border-radius: 50%;
  background: #69b6ff;
  box-shadow: 0 0 1rem rgba(88, 148, 255, 0.55);
}

.narrative .trust-flow__items span {
  font-size: 0.95rem;
  font-weight: 650;
}

.narrative .trust-flow__items b {
  color: #92a0b5;
  font-size: 0.76rem;
  font-weight: 450;
}

.narrative .trust-flow--before .trust-flow__items b {
  color: #777e89;
}

.narrative .trust-flow__route {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 7rem;
  margin-top: 1rem;
}

.narrative .trust-flow__route::before {
  position: absolute;
  right: 7%;
  left: 7%;
  height: 2px;
  background: linear-gradient(90deg, #5ccaff, #7b73ff, #e6b95e);
  content: "";
  box-shadow: 0 0 1rem rgba(80, 130, 255, 0.55);
}

.narrative .trust-flow__route i {
  position: relative;
  z-index: 1;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #eafaff;
  box-shadow: 0 0 1rem #62a9ff;
}

.narrative .trust-flow__route span {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  offset-path: path("M40 56H680");
  animation: comparison-flow 3.4s linear infinite;
  box-shadow: 0 0 1.2rem #69bdff;
}

@keyframes comparison-flow {
  from { offset-distance: 0%; opacity: 0; }
  12%, 88% { opacity: 1; }
  to { offset-distance: 100%; opacity: 0; }
}

.narrative .trust-flow__scatter {
  position: relative;
  height: 7rem;
  margin-top: 1rem;
}

.narrative .trust-flow__scatter i {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid rgba(75, 82, 94, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
}

.narrative .trust-flow__scatter i:nth-child(1) { top: 26%; left: 9%; }

.narrative .trust-flow__scatter i:nth-child(2) { top: 67%; left: 31%; }

.narrative .trust-flow__scatter i:nth-child(3) { top: 16%; left: 52%; }

.narrative .trust-flow__scatter i:nth-child(4) { top: 61%; left: 72%; }

.narrative .trust-flow__scatter i:nth-child(5) { top: 34%; left: 89%; }

.narrative .trust-comparison__divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 1.5rem rgba(91, 130, 255, 0.8);
  pointer-events: none;
}

.narrative .trust-comparison__divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background: rgba(12, 18, 30, 0.72);
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(16, 24, 42, 0.25);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.narrative .trust-comparison__range {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.narrative .trust-comparison:focus-within {
  outline: 2px solid #2767df;
  outline-offset: 0.35rem;
}

.narrative .trust-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(5rem, 9vw, 9rem);
}

.narrative .trust-principles article {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(25, 36, 51, 0.22);
}

.narrative .trust-principles span {
  color: #2d64c7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.narrative .trust-principles h3 {
  margin: 2rem 0 1rem;
  font-size: clamp(1.7rem, 2.8vw, 2.7rem);
  font-weight: 610;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.narrative .trust-principles p {
  max-width: 24rem;
  margin: 0;
  color: #626c7b;
  line-height: 1.55;
}

.narrative .closing-section {
  min-height: 82svh;
  padding: clamp(7rem, 14vw, 13rem) var(--page-gutter) 2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(54, 99, 190, 0.22), transparent 34rem),
    #080b11;
  color: #f7f7f4;
}

.narrative .closing-section__glow {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(68rem, 82vw);
  aspect-ratio: 1.4;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 40%, rgba(83, 202, 255, 0.34), transparent 28%),
    radial-gradient(circle at 61% 53%, rgba(113, 79, 255, 0.28), transparent 33%),
    radial-gradient(circle at 51% 70%, rgba(229, 180, 83, 0.2), transparent 30%);
  filter: blur(80px);
  opacity: 0.75;
}

.narrative .closing-section__content {
  display: grid;
  justify-items: center;
  max-width: 78rem;
  margin: 0 auto;
  text-align: center;
}

.narrative .closing-section .section-kicker {
  color: #9bb9ef;
}

.narrative .closing-section h2 span {
  display: inline-block;
  background: linear-gradient(100deg, #f4d687, #75d8ff 44%, #9a83ff 70%, #f0b86c);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.narrative .closing-section__content > p:last-of-type {
  max-width: 42rem;
  margin: 2rem auto 0;
  color: #b2bbc8;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  line-height: 1.55;
}

.narrative .closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.6rem;
}

.narrative .closing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 4.2rem;
  padding: 0.95rem 1.5rem 0.95rem 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  font-weight: 700;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

.narrative .closing-button:hover,
.narrative .closing-button:focus-visible {
  transform: translateY(-0.2rem);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.44),
    0 1rem 2.5rem rgba(53, 99, 208, 0.25);
}

.narrative .closing-button:focus-visible {
  outline: 2px solid #79b9ff;
  outline-offset: 0.25rem;
}

.narrative .closing-button--primary {
  border-color: rgba(255, 239, 191, 0.7);
  background:
    linear-gradient(110deg, rgba(255, 244, 196, 0.97), rgba(202, 232, 255, 0.93) 48%, rgba(234, 215, 255, 0.96));
  color: #11151c;
}

.narrative .closing-button--secondary {
  background: rgba(255, 255, 255, 0.07);
  color: white;
}

.narrative .closing-footer {
  position: absolute;
  right: var(--page-gutter);
  bottom: 2rem;
  left: var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #7f8997;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.narrative .closing-footer a {
  color: #c4cbd5;
  letter-spacing: 0;
}

.narrative .closing-footer span:last-child {
  text-align: right;
}

@media (max-width: 900px) {
  .narrative .method-section,
  .narrative .trust-section {
      padding-right: var(--page-gutter);
      padding-left: var(--page-gutter);
    }
  
  .narrative .method-heading h2,
  .narrative .trust-heading h2,
  .narrative .closing-section h2 {
      font-size: clamp(2.8rem, 10vw, 5rem);
    }
  
  .narrative .method-heading h2 br,
  .narrative .trust-heading h2 br,
  .narrative .closing-section h2 br {
      display: none;
    }
  
  .narrative .method-heading > p:last-child,
  .narrative .trust-heading > p:last-child {
      margin-left: 0;
    }
  
  .narrative .method-story {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  
  .narrative .method-step {
      min-height: 0;
    }
  
  .narrative .method-step__trigger {
      padding: 1.7rem 0;
    }
  
  .narrative .method-visual {
      position: relative;
      top: auto;
      min-height: 34rem;
    }
  
  .narrative .method-map {
      min-height: 24rem;
      padding: 1rem;
    }
  
  .narrative .trust-comparison {
      min-height: 34rem;
    }
  
  .narrative .trust-flow__items {
      grid-template-columns: 1fr;
    }
  
  .narrative .trust-flow__items p {
      border-right: 0;
      border-bottom: 1px solid rgba(150, 170, 206, 0.16);
    }
  
  .narrative .trust-flow__items p:last-child {
      border-bottom: 0;
    }
  
  .narrative .trust-flow__route,
  .narrative .trust-flow__scatter {
      display: none;
    }
  
  .narrative .trust-principles {
      grid-template-columns: 1fr;
    }
  
  .narrative .closing-section {
      min-height: 75svh;
      padding-bottom: 8rem;
    }
  
  .narrative .closing-footer {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }
  
  .narrative .closing-footer span:last-child {
      text-align: center;
    }
}

@media (max-width: 620px) {
  .narrative .method-section {
      padding-top: 5rem;
    }
  
  .narrative .method-heading h2,
  .narrative .trust-heading h2,
  .narrative .closing-section h2 {
      font-size: clamp(2.55rem, 13vw, 4.3rem);
      letter-spacing: -0.06em;
    }
  
  .narrative .method-step__copy strong {
      font-size: 1.65rem;
    }
  
  .narrative .method-step__copy > span {
      font-size: 0.92rem;
    }
  
  .narrative .method-visual {
      min-height: 29rem;
    }
  
  .narrative .method-visual__header,
  .narrative .method-visual__footer {
      padding: 0.9rem 1rem;
      font-size: 0.56rem;
    }
  
  .narrative .method-visual__footer {
      align-items: flex-start;
      flex-direction: column;
    }
  
  .narrative .method-map {
      min-height: 19rem;
    }
  
  .narrative .method-map__label {
      display: none;
    }
  
  .narrative .trust-comparison {
      min-height: 35rem;
      border-radius: 1.6rem;
    }
  
  .narrative .trust-comparison__surface {
      display: block;
      padding: 5.5rem 1rem 1rem;
    }
  
  .narrative .trust-flow {
      position: absolute;
      top: 5.25rem;
      bottom: 1rem;
      width: calc(50% - 1.5rem);
      padding: 1rem;
      border-radius: 1.25rem;
    }
  
  .narrative .trust-comparison__before .trust-flow {
      left: 1rem;
    }
  
  .narrative .trust-comparison__after .trust-flow {
      right: 1rem;
    }
  
  .narrative .trust-comparison__after .trust-comparison__label {
      right: 1rem;
      left: auto;
    }
  
  .narrative .trust-flow header {
      align-items: flex-start;
      flex-direction: column;
      gap: 0.35rem;
      min-height: 4.1rem;
      padding-bottom: 0.8rem;
      font-size: 0.54rem;
    }
  
  .narrative .trust-flow__items {
      margin-top: 0.8rem;
    }
  
  .narrative .trust-flow__items p {
      gap: 0.35rem;
      padding: 0.8rem 0;
    }
  
  .narrative .trust-flow__items span {
      font-size: 0.72rem;
      line-height: 1.2;
    }
  
  .narrative .trust-flow__items b {
      display: none;
    }
  
  .narrative .trust-comparison__divider span {
      width: 3rem;
      height: 3rem;
    }
  
  .narrative .closing-actions {
      align-items: stretch;
      flex-direction: column;
      width: 100%;
    }
  
  .narrative .closing-button {
      width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
  .narrative .method-pulse,
  .narrative .trust-flow__route span {
      animation: none !important;
      opacity: 1;
    }
}

.narrative .services-section {
  padding-bottom: clamp(2.5rem, 4.5vw, 4.25rem);
}

.narrative .services-footer {
  margin-top: clamp(1.5rem, 2.7vw, 2.5rem);
}

.narrative .method-section {
  padding-top: clamp(3.25rem, 5.5vw, 5.5rem);
  padding-bottom: clamp(5rem, 8vw, 7.5rem);
}

.narrative .method-heading > p:last-child {
  margin-top: 1.5rem;
}

.narrative .method-carousel {
  position: relative;
  width: min(90rem, 100%);
  margin: clamp(3.25rem, 5.5vw, 5.5rem) auto 0;
  overflow: hidden;
  border: 1px solid rgba(39, 63, 101, 0.16);
  border-radius: clamp(1.75rem, 3vw, 2.75rem);
  background:
    radial-gradient(circle at 87% 6%, rgba(102, 171, 255, 0.14), transparent 28rem),
    linear-gradient(132deg, rgba(255, 255, 255, 0.86), rgba(244, 247, 253, 0.72));
  box-shadow:
    0 2.5rem 7rem rgba(31, 45, 68, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
}

.narrative .method-carousel::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(83, 145, 255, 0.72), rgba(110, 221, 255, 0.58), rgba(157, 112, 255, 0.48), rgba(233, 188, 100, 0.68)) top / 100% 1px no-repeat;
  content: "";
  pointer-events: none;
}

.narrative .method-carousel:focus-visible {
  outline: 2px solid rgba(48, 112, 235, 0.92);
  outline-offset: 0.45rem;
}

.narrative .method-carousel__viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.narrative .method-carousel__track {
  display: flex;
  transition: transform 720ms cubic-bezier(0.2, 0.82, 0.22, 1);
  will-change: transform;
}

.narrative .method-slide {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: minmax(17rem, 0.74fr) minmax(30rem, 1.26fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 7rem);
  min-height: clamp(34rem, 52vw, 43rem);
  padding: clamp(2rem, 4.5vw, 4.75rem);
  opacity: 0.45;
  transition: opacity 520ms ease;
}

.narrative .method-slide.is-active {
  opacity: 1;
}

.narrative .method-slide__copy {
  position: relative;
  z-index: 2;
}

.narrative .method-slide__copy > span {
  display: block;
  margin-bottom: 1.2rem;
  color: #285fbd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.narrative .method-slide__copy h3 {
  max-width: 13ch;
  margin: 0;
  color: #11151c;
  font-size: clamp(2.2rem, 4.1vw, 4.3rem);
  font-weight: 625;
  letter-spacing: -0.062em;
  line-height: 0.98;
}

.narrative .method-slide__copy p {
  max-width: 31rem;
  margin: 1.65rem 0 0;
  color: #596578;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.6;
}

.narrative .method-case {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 30rem;
  overflow: hidden;
  border: 1px solid rgba(153, 183, 235, 0.2);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 88% 6%, rgba(99, 161, 255, 0.14), transparent 22rem),
    linear-gradient(145deg, #101827, #0a101b 68%);
  box-shadow:
    0 2rem 5rem rgba(12, 21, 35, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.1);
  color: #f6f8fc;
}

.narrative .method-case::after {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(125, 163, 226, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 163, 226, 0.035) 1px, transparent 1px);
  background-size: 3.4rem 3.4rem;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 84%, transparent);
}

.narrative .method-case > * {
  position: relative;
  z-index: 1;
}

.narrative .method-case > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(221, 231, 249, 0.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.61rem;
  letter-spacing: 0.14em;
}

.narrative .method-case > header i {
  color: #8ebcfb;
  font-style: normal;
}

.narrative .method-case__sources {
  display: grid;
  gap: 0.7rem;
  padding: 1.5rem;
}

.narrative .method-case__sources p,
.narrative .method-case__checklist p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.035);
}

.narrative .method-case__sources p > i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  box-shadow: 0 0 1rem currentColor;
}

.narrative .method-case__sources .is-blue { color: #6ba9ff; background: currentColor; }

.narrative .method-case__sources .is-cyan { color: #6adce7; background: currentColor; }

.narrative .method-case__sources .is-violet { color: #a27fff; background: currentColor; }

.narrative .method-case__sources span,
.narrative .method-case__checklist span {
  font-weight: 620;
}

.narrative .method-case__sources b,
.narrative .method-case__checklist b {
  color: rgba(219, 228, 243, 0.62);
  font-size: 0.72rem;
  font-weight: 520;
}

.narrative .method-case__finding,
.narrative .method-case__decision {
  display: grid;
  gap: 0.55rem;
  margin: 0 1.5rem 1.5rem;
  padding: 1.35rem;
  border: 1px solid rgba(106, 169, 255, 0.22);
  border-radius: 1.35rem;
  background: linear-gradient(125deg, rgba(71, 128, 219, 0.17), rgba(79, 66, 149, 0.09));
}

.narrative .method-case__finding small,
.narrative .method-case__decision small {
  color: #80b6ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.narrative .method-case__finding strong,
.narrative .method-case__decision > strong {
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  letter-spacing: -0.035em;
}

.narrative .method-case__finding span {
  color: rgba(225, 232, 244, 0.66);
  font-size: 0.86rem;
}

.narrative .method-case__action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding: 1.2rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.narrative .method-case__action span {
  color: rgba(212, 223, 241, 0.56);
  font-size: 0.72rem;
}

.narrative .method-case__action b {
  font-size: 0.88rem;
}

.narrative .method-case__action i {
  color: #8dc3ff;
  font-size: 0.7rem;
  font-style: normal;
}

.narrative .method-case__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1.5rem;
}

.narrative .method-case__metrics p {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.035);
}

.narrative .method-case__metrics small { color: rgba(220, 229, 244, 0.58); }

.narrative .method-case__metrics b { font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: -0.04em; }

.narrative .method-case__metrics span { color: #72d8ae; font-size: 0.68rem; }

.narrative .method-case__metrics .is-alert { color: #f2c66b; }

.narrative .method-case__decision p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(220, 229, 244, 0.62);
  font-size: 0.75rem;
}

.narrative .method-case__decision p b { color: #f7f8fb; }

.narrative .method-case__launch-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.5rem 1.5rem 0;
  padding: 1rem;
  border: 1px solid rgba(96, 220, 168, 0.24);
  border-radius: 1.1rem;
  background: rgba(65, 176, 128, 0.08);
}

.narrative .method-case__launch-status i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #66dfa9;
  box-shadow: 0 0 1rem rgba(102, 223, 169, 0.78);
}

.narrative .method-case__launch-status span { font-weight: 680; }

.narrative .method-case__launch-status b { margin-left: auto; color: rgba(224, 233, 245, 0.62); font-size: 0.72rem; }

.narrative .method-case__checklist {
  display: grid;
  gap: 0.65rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

.narrative .method-case__checklist p > i {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(116, 168, 255, 0.28);
  border-radius: 50%;
  color: #8cbcff;
  font-size: 0.65rem;
  font-style: normal;
}

.narrative .method-case__checklist p.is-done > i {
  border-color: rgba(102, 223, 169, 0.34);
  background: rgba(102, 223, 169, 0.1);
  color: #66dfa9;
}

.narrative .method-carousel__controls {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem clamp(1.35rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(35, 58, 92, 0.12);
  background: rgba(248, 250, 254, 0.72);
}

.narrative .method-carousel__controls p {
  margin: 0;
  color: #667389;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.narrative .method-carousel__controls p span { color: #205ed1; font-weight: 800; }

.narrative .method-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
}

.narrative .method-carousel__dots button {
  width: 2rem;
  /* La barra sigue midiendo 0.35rem, pero el area tactil sube a 24px con relleno
     transparente y margen negativo: a 6px de alto no llegaba ni al minimo de
     WCAG 2.5.8 y en telefono se falla el toque constantemente. */
  height: 0.35rem;
  box-sizing: content-box;
  padding: 9px 0;
  margin: -9px 0;
  background-clip: content-box;
  border: 0;
  border-radius: 999px;
  background: rgba(64, 83, 113, 0.18);
  cursor: pointer;
  transition: width 260ms ease, background 260ms ease, box-shadow 260ms ease;
}

.narrative .method-carousel__dots button.is-active {
  width: 3.25rem;
  background: linear-gradient(90deg, #2a6be5, #6dc9f0, #a279ee);
  box-shadow: 0 0 1rem rgba(54, 117, 234, 0.2);
}

.narrative .method-carousel__controls > div:last-child {
  display: flex;
  gap: 0.55rem;
}

.narrative .method-carousel__controls > div:last-child button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(38, 65, 105, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: #162236;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.narrative .method-carousel__controls > div:last-child button:hover,
.narrative .method-carousel__controls > div:last-child button:focus-visible {
  transform: translateY(-0.15rem);
  border-color: rgba(48, 112, 235, 0.48);
  box-shadow: 0 0.75rem 1.75rem rgba(42, 79, 139, 0.12);
}

.narrative .trust-comparison__note {
  position: absolute;
  z-index: 7;
  bottom: 1.2rem;
  left: 50%;
  margin: 0;
  padding: 0.6rem 0.8rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(18, 29, 47, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.74);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.narrative .closing-section::before,
.narrative .closing-section::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.narrative .closing-section::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(130, 162, 219, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 162, 219, 0.045) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  opacity: 0.34;
  mask-image: radial-gradient(circle at 50% 48%, #000, transparent 72%);
}

.narrative .closing-section::after {
  top: 50%;
  left: 50%;
  width: min(64rem, 78vw);
  aspect-ratio: 1;
  transform: translate(-50%, -48%);
  border: 1px solid rgba(119, 171, 255, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgba(86, 130, 216, 0.018),
    0 0 0 10rem rgba(117, 88, 210, 0.014);
}

.narrative .closing-section__content,
.narrative .closing-footer {
  position: relative;
  z-index: 1;
}

.narrative .closing-section h2 {
  overflow: visible;
  padding: 0.04em 0.08em 0.18em;
}

.narrative .closing-section h2 span {
  overflow: visible;
  padding: 0.03em 0.04em 0.16em;
  line-height: 1.08;
}

@media (max-width: 900px) {
  .narrative .services-section {
      padding-bottom: 2.75rem;
    }
  
  .narrative .method-section {
      padding-top: 3rem;
    }
  
  .narrative .method-slide {
      grid-template-columns: 1fr;
      gap: 2.25rem;
      min-height: auto;
      padding: clamp(1.35rem, 5vw, 2.5rem);
    }
  
  .narrative .method-slide__copy h3 {
      max-width: 16ch;
    }
  
  .narrative .method-case {
      min-height: 29rem;
    }
}

@media (max-width: 620px) {
  .narrative .method-carousel {
      margin-top: 2.5rem;
      border-radius: 1.6rem;
    }
  
  .narrative .method-slide__copy h3 {
      font-size: clamp(2rem, 11vw, 3.2rem);
    }
  
  .narrative .method-case {
      min-height: 0;
      border-radius: 1.35rem;
    }
  
  .narrative .method-case > header,
  .narrative .method-case__action,
  .narrative .method-case__launch-status {
      align-items: flex-start;
      grid-template-columns: 1fr;
      flex-direction: column;
    }
  
  .narrative .method-case__metrics {
      grid-template-columns: 1fr;
    }
  
  .narrative .method-case__sources p,
  .narrative .method-case__checklist p {
      grid-template-columns: auto minmax(0, 1fr);
    }
  
  .narrative .method-case__sources b,
  .narrative .method-case__checklist b {
      grid-column: 2;
    }
  
  .narrative .method-case__launch-status b {
      margin-left: 0;
    }
  
  .narrative .method-carousel__controls {
      grid-template-columns: auto 1fr;
    }
  
  .narrative .method-carousel__dots {
      justify-content: flex-end;
    }
  
  .narrative .method-carousel__controls > div:last-child {
      grid-column: 1 / -1;
      justify-content: flex-end;
    }
  
  .narrative .trust-comparison__note {
      bottom: 0.65rem;
      font-size: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
  .narrative .method-carousel__track,
  .narrative .method-slide,
  .narrative .method-carousel__dots button,
  .narrative .method-carousel__controls button {
      transition: none !important;
    }
}

.narrative .method-carousel__chapters {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.9rem 0.9rem 0;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 1.5rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(225, 233, 248, 0.5));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.96),
    0 1rem 3rem rgba(46, 68, 107, 0.1);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
}

.narrative .method-carousel__chapters button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.12rem 0.78rem;
  min-height: 4.7rem;
  padding: 0.82rem 1rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1.08rem;
  background: transparent;
  color: #606c80;
  text-align: left;
  cursor: pointer;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms ease,
    border-color 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease;
}

.narrative .method-carousel__chapters button::after {
  position: absolute;
  right: 1rem;
  bottom: 0.52rem;
  left: 1rem;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 999px;
  background: linear-gradient(90deg, #246cff, #69d5ef 48%, #9d75ff 75%, #efc25f);
  box-shadow: 0 0 1rem rgba(61, 127, 255, 0.36);
  content: "";
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.narrative .method-carousel__chapters button > span {
  grid-row: 1 / 3;
  align-self: start;
  color: #2165dd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.narrative .method-carousel__chapters button strong {
  color: #172033;
  font-size: 0.9rem;
  letter-spacing: -0.015em;
}

.narrative .method-carousel__chapters button small {
  overflow: hidden;
  color: #7a8596;
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.narrative .method-carousel__chapters button:hover,
.narrative .method-carousel__chapters button:focus-visible,
.narrative .method-carousel__chapters button.is-active {
  transform: translateY(-0.08rem);
  border-color: rgba(84, 117, 179, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(221, 233, 255, 0.66));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.98),
    0 0.75rem 1.5rem rgba(55, 82, 132, 0.1);
}

.narrative .method-carousel__chapters button.is-active::after {
  transform: scaleX(1);
}

.narrative .method-slide__copy,
.narrative .method-case {
  opacity: 0.18;
  transform: translateY(1.1rem) scale(0.986);
  filter: blur(7px);
  transition:
    opacity 500ms ease,
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms ease;
}

.narrative .method-slide.is-active .method-slide__copy,
.narrative .method-slide.is-active .method-case {
  opacity: 1;
  transform: none;
  filter: none;
}

.narrative .method-slide.is-active .method-case {
  transition-delay: 80ms;
}

.narrative .trust-comparison {
  min-height: clamp(35rem, 62vw, 48rem);
  background: #0b111c;
  box-shadow:
    0 2.5rem 6rem rgba(34, 48, 73, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.16);
}

.narrative .trust-comparison__surface {
  display: block;
  padding: 0;
  overflow: hidden;
}

.narrative .trust-comparison__surface img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.025);
  filter: saturate(0.93) contrast(1.03);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.narrative .trust-comparison:hover .trust-comparison__surface img {
  transform: scale(1);
}

.narrative .trust-comparison__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 9, 18, 0.08), rgba(4, 9, 18, 0.18) 46%, rgba(4, 9, 18, 0.82)),
    linear-gradient(90deg, rgba(4, 9, 18, 0.42), transparent 58%);
  pointer-events: none;
}

.narrative .trust-comparison__caption {
  position: absolute;
  z-index: 3;
  bottom: 3.9rem;
  left: clamp(1rem, 4vw, 3.25rem);
  display: grid;
  gap: 0.42rem;
  width: min(31rem, calc(100% - 2rem));
  padding: clamp(1rem, 2.4vw, 1.55rem);
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 1.4rem;
  background: linear-gradient(135deg, rgba(15, 24, 40, 0.7), rgba(36, 47, 70, 0.38));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 1.4rem 3rem rgba(0, 0, 0, 0.22);
  color: white;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.narrative .trust-comparison__caption span {
  color: #a9c8ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.narrative .trust-comparison__caption strong {
  font-size: clamp(1.35rem, 2.4vw, 2.2rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.narrative .trust-comparison__caption small {
  color: rgba(237, 242, 251, 0.72);
  font-size: 0.78rem;
}

.narrative .closing-section {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: max(42rem, 100svh);
  padding: clamp(5rem, 10vw, 8rem) var(--page-gutter) 0;
}

.narrative .closing-section__content {
  align-self: center;
  padding-bottom: clamp(3rem, 7vh, 6rem);
}

.narrative .closing-footer {
  position: relative;
  inset: auto;
  width: 100%;
  margin-top: auto;
  padding: 1.2rem 0 1.6rem;
}

@media (max-width: 900px) {
  .narrative .method-carousel__chapters {
      grid-template-columns: repeat(3, minmax(14rem, 1fr));
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
    }
  
  .narrative .method-carousel__chapters::-webkit-scrollbar {
      display: none;
    }
  
  .narrative .trust-comparison {
      min-height: clamp(31rem, 92vw, 42rem);
    }
}

@media (max-width: 620px) {
  .narrative .method-carousel__chapters {
      margin: 0.55rem 0.55rem 0;
      border-radius: 1.2rem;
    }
  
  .narrative .trust-comparison__caption {
      bottom: 3.5rem;
    }
  
  .narrative .closing-section {
      min-height: max(42rem, 100svh);
      padding-top: 4.5rem;
    }
  
  .narrative .closing-footer {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }
  
  .narrative .closing-footer span:last-child {
      text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
  .narrative .method-slide__copy,
  .narrative .method-case,
  .narrative .method-carousel__chapters button,
  .narrative .method-carousel__chapters button::after,
  .narrative .trust-comparison__surface img {
      transition: none !important;
    }
}

.narrative .method-carousel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f8fbff;
  border: 1px solid rgba(147, 185, 255, 0.28);
  border-radius: clamp(1.55rem, 3vw, 2.45rem);
  background: #07101d;
  box-shadow:
    0 2.2rem 5.5rem rgba(15, 31, 56, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.14);
}

.narrative .method-carousel::before {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, #4ea7ff, #8de9ff 34%, #b88aff 67%, #efc568);
  opacity: 0.9;
  pointer-events: none;
}

.narrative .method-carousel::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(38rem, 64vw);
  aspect-ratio: 1;
  right: -12%;
  bottom: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 159, 255, 0.24), rgba(151, 112, 255, 0.1) 42%, transparent 70%);
  filter: blur(34px);
  pointer-events: none;
}

.narrative .method-carousel__chapters {
  position: relative;
  z-index: 6;
  margin: 0;
  padding: 0.72rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.12), rgba(12, 23, 40, 0.48));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.11);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  backdrop-filter: blur(25px) saturate(150%);
}

.narrative .method-carousel__chapters button {
  min-height: 4.4rem;
  color: rgba(234, 242, 255, 0.5);
  border: 1px solid transparent;
  border-radius: 1.15rem;
  background: transparent;
}

.narrative .method-carousel__chapters button strong,
.narrative .method-carousel__chapters button small {
  color: inherit;
}

.narrative .method-carousel__chapters button.is-active {
  color: #fff;
  border-color: rgba(183, 212, 255, 0.26);
  background: linear-gradient(135deg, rgba(153, 198, 255, 0.18), rgba(210, 180, 255, 0.08));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.21),
    0 0.9rem 2rem rgba(3, 10, 24, 0.25);
}

.narrative .method-carousel__chapters button::after {
  background: linear-gradient(90deg, #4da3ff, #76dcff 34%, #aa84ff 68%, #eac56e);
}

.narrative .method-carousel__viewport {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #07101d;
}

.narrative .method-slide {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(17rem, 0.82fr) minmax(27rem, 1.18fr);
  align-items: end;
  gap: clamp(1rem, 3vw, 2.3rem);
  min-height: clamp(36rem, 61vw, 47rem);
  padding: clamp(2rem, 5vw, 4.3rem);
  overflow: hidden;
  color: #f8fbff;
  background: transparent;
}

.narrative .method-slide__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.narrative .method-slide__media::before,
.narrative .method-slide__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.narrative .method-slide__media::before {
  background:
    linear-gradient(90deg, rgba(4, 10, 20, 0.98) 0%, rgba(5, 12, 23, 0.83) 35%, rgba(5, 12, 23, 0.2) 70%, rgba(5, 12, 23, 0.36) 100%),
    linear-gradient(180deg, rgba(4, 10, 20, 0.18), rgba(4, 10, 20, 0.14) 48%, rgba(4, 10, 20, 0.92));
}

.narrative .method-slide__media::after {
  inset: auto -12% -42% 32%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 158, 255, 0.28), rgba(163, 122, 255, 0.1) 44%, transparent 72%);
  filter: blur(34px);
}

.narrative .method-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.84) contrast(1.06) brightness(0.78);
  transform: scale(1.045);
  transition: transform 1.25s cubic-bezier(0.2, 0.75, 0.2, 1), filter 0.8s ease;
}

.narrative .method-slide.is-active .method-slide__media img {
  filter: saturate(0.95) contrast(1.05) brightness(0.86);
  transform: scale(1.015);
}

.narrative .method-slide__copy,
.narrative .method-case {
  position: relative;
  z-index: 3;
  color: #f8fbff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(10, 20, 35, 0.78), rgba(19, 31, 51, 0.48));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 1.5rem 3.5rem rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.narrative .method-slide__copy {
  align-self: end;
  padding: clamp(1.35rem, 3vw, 2.15rem);
  border-radius: 1.55rem;
}

.narrative .method-slide__copy h3,
.narrative .method-case h4,
.narrative .method-case strong {
  color: #fff;
}

.narrative .method-slide__copy p,
.narrative .method-case p,
.narrative .method-case span,
.narrative .method-case small {
  color: rgba(232, 239, 249, 0.72);
}

.narrative .method-slide__copy .eyebrow,
.narrative .method-case__eyebrow {
  color: #9ec7ff;
}

.narrative .method-case {
  align-self: end;
  min-height: 25rem;
  border-radius: 1.8rem;
  background: linear-gradient(145deg, rgba(8, 18, 33, 0.88), rgba(17, 31, 53, 0.62));
}

.narrative .method-slide .method-slide__copy,
.narrative .method-slide .method-case {
  opacity: 0.78;
  transform: translateY(1rem);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.narrative .method-slide.is-active .method-slide__copy,
.narrative .method-slide.is-active .method-case {
  opacity: 1;
  transform: none;
}

.narrative .method-carousel__controls {
  position: relative;
  z-index: 6;
  color: rgba(232, 240, 252, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(110deg, rgba(12, 23, 39, 0.8), rgba(20, 31, 49, 0.54));
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.narrative .method-carousel__controls button {
  color: #f6f9ff;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14);
}

@media (max-width: 900px) {
  .narrative .method-carousel__chapters {
      margin: 0;
      border-radius: 0;
    }
  
  .narrative .method-slide {
      grid-template-columns: 1fr;
      align-content: end;
      min-height: 45rem;
    }
  
  .narrative .method-slide__copy {
      width: min(32rem, 100%);
    }
  
  .narrative .method-case {
      width: 100%;
      min-height: 20rem;
    }
}

@media (max-width: 620px) {
  .narrative .method-slide {
      min-height: 48rem;
      padding: 1.1rem;
    }
  
  .narrative .method-slide__media::before {
      background:
        linear-gradient(180deg, rgba(4, 10, 20, 0.2), rgba(4, 10, 20, 0.72) 38%, rgba(4, 10, 20, 0.98) 76%),
        linear-gradient(90deg, rgba(4, 10, 20, 0.68), rgba(4, 10, 20, 0.18));
    }
  
  .narrative .method-slide__copy,
  .narrative .method-case {
      border-radius: 1.25rem;
    }
  
  .narrative .method-case {
      min-height: 18rem;
    }
}

@media (prefers-reduced-motion: reduce) {
  .narrative .method-slide__media img,
  .narrative .method-slide__copy,
  .narrative .method-case {
      transition: none !important;
    }
}

.narrative .method-slide {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: clamp(35rem, 58vw, 44rem);
}

.narrative .method-slide__media::before {
  background:
    linear-gradient(90deg, rgba(3, 9, 18, 0.94) 0%, rgba(4, 11, 22, 0.68) 42%, rgba(4, 11, 22, 0.16) 72%, rgba(4, 11, 22, 0.32) 100%),
    linear-gradient(180deg, rgba(4, 10, 20, 0.06), rgba(4, 10, 20, 0.16) 52%, rgba(4, 10, 20, 0.9));
}

.narrative .method-slide__copy {
  width: min(44rem, 100%);
  max-width: none;
  padding: 0;
  color: #fff;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.narrative .method-slide__copy > span {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #a8cfff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.19em;
}

.narrative .method-slide__copy > span::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #64b8ff, #b58cff 58%, #f1cb73);
  box-shadow: 0 0 1rem rgba(105, 178, 255, 0.72);
}

.narrative .method-slide__copy h3 {
  max-width: 9ch;
  margin-top: 0.85rem;
  color: #fff;
  font-size: clamp(3.8rem, 7.3vw, 7rem);
  line-height: 0.86;
  letter-spacing: -0.078em;
  text-wrap: balance;
  text-shadow: 0 0.18rem 1.8rem rgba(0, 0, 0, 0.32);
}

.narrative .method-slide__copy p {
  max-width: 24ch;
  margin-top: 1rem;
  color: rgba(240, 245, 255, 0.8);
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
}

.narrative .method-case.method-proof {
  align-self: end;
  width: 100%;
  min-height: 0;
  border-color: rgba(210, 226, 255, 0.22);
  border-radius: 1.45rem;
  background: linear-gradient(145deg, rgba(9, 20, 37, 0.76), rgba(18, 33, 56, 0.5));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 1.4rem 3.5rem rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(98, 168, 255, 0.04);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
}

.narrative .method-proof {
  grid-template-rows: auto auto auto auto;
}

.narrative .method-proof > header,
.narrative .method-proof > footer {
  padding: 0.75rem 1rem;
  font-size: 0.61rem;
}

.narrative .method-proof > footer span {
  max-width: 25ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.narrative .method-proof__signal {
  min-height: 0;
  padding: 1.05rem 1rem 0.85rem;
}

.narrative .method-proof__signal strong {
  max-width: 17ch;
  margin-top: 0.35rem;
  font-size: clamp(1.55rem, 2.25vw, 2rem);
  line-height: 0.98;
}

.narrative .method-proof__signal > i {
  margin-top: 0.7rem;
  padding: 0.36rem 0.62rem;
  font-size: 0.66rem;
}

.narrative .method-proof__flow,
.narrative .method-proof__metrics,
.narrative .method-proof__handoff {
  margin: 0 0.85rem 0.85rem;
  gap: 0.42rem;
}

.narrative .method-proof__flow {
  grid-template-columns: 1fr auto 1.25fr auto 1fr;
}

.narrative .method-proof__flow span,
.narrative .method-proof__handoff span {
  min-height: 2.65rem;
  padding: 0.55rem;
  border-radius: 0.78rem;
  font-size: 0.68rem;
}

.narrative .method-proof__metrics p {
  min-height: 3.9rem;
  padding: 0.72rem;
  border-radius: 0.78rem;
}

.narrative .method-proof__metrics b {
  font-size: 0.96rem;
}

@media (max-width: 900px) {
  .narrative .method-slide {
      grid-template-columns: 1fr;
      align-content: end;
      min-height: 46rem;
    }
  
  .narrative .method-slide__copy {
      width: min(38rem, 100%);
    }
  
  .narrative .method-slide__copy h3 {
      font-size: clamp(3.5rem, 11vw, 6rem);
    }
  
  .narrative .method-case.method-proof {
      width: min(34rem, 100%);
    }
}

@media (max-width: 620px) {
  .narrative .method-slide {
      min-height: 43rem;
    }
  
  .narrative .method-slide__copy h3 {
      font-size: clamp(3.2rem, 15vw, 4.8rem);
    }
  
  .narrative .method-proof > footer span {
      display: none;
    }
}

.narrative .method-carousel {
  width: min(61rem, calc(100% - clamp(2rem, 8vw, 7rem)));
  margin-top: clamp(2rem, 3.5vw, 3.25rem);
  border-radius: clamp(1.3rem, 2vw, 1.9rem);
}

.narrative .method-carousel__chapters {
  gap: 0.35rem;
  padding: 0.48rem;
}

.narrative .method-carousel__chapters button {
  min-height: 3.35rem;
  padding: 0.55rem 0.72rem;
  border-radius: 0.9rem;
}

.narrative .method-carousel__chapters button strong {
  font-size: 0.78rem;
}

.narrative .method-carousel__chapters button small {
  font-size: 0.58rem;
}

.narrative .method-slide {
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
  gap: clamp(1.1rem, 2.5vw, 2rem);
  min-height: clamp(26rem, 42vw, 30rem);
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

.narrative .method-slide__copy {
  width: min(30rem, 100%);
}

.narrative .method-slide__copy > span {
  font-size: 0.61rem;
}

.narrative .method-slide__copy h3 {
  max-width: 8.5ch;
  margin-top: 0.55rem;
  font-size: clamp(2.7rem, 4.8vw, 4.1rem);
  line-height: 0.89;
}

.narrative .method-slide__copy p {
  margin-top: 0.72rem;
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
}

.narrative .method-case.method-proof {
  justify-self: end;
  width: min(18rem, 100%);
  border-radius: 1.15rem;
}

.narrative .method-proof > header,
.narrative .method-proof > footer {
  padding: 0.52rem 0.7rem;
  font-size: 0.54rem;
}

.narrative .method-proof__signal {
  padding: 0.74rem 0.7rem 0.58rem;
}

.narrative .method-proof__signal strong {
  margin-top: 0.28rem;
  font-size: clamp(1.08rem, 1.55vw, 1.34rem);
}

.narrative .method-proof__signal > i {
  margin-top: 0.48rem;
  padding: 0.28rem 0.48rem;
  font-size: 0.56rem;
}

.narrative .method-proof__flow,
.narrative .method-proof__metrics,
.narrative .method-proof__handoff {
  margin: 0 0.62rem 0.62rem;
  gap: 0.28rem;
}

.narrative .method-proof__flow span,
.narrative .method-proof__handoff span {
  min-height: 2rem;
  padding: 0.38rem;
  border-radius: 0.62rem;
  font-size: 0.57rem;
}

.narrative .method-proof__metrics p {
  min-height: 3.05rem;
  padding: 0.48rem;
  border-radius: 0.62rem;
}

.narrative .method-proof__metrics b {
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .narrative .method-carousel {
      width: calc(100% - 1.5rem);
    }
  
  .narrative .method-slide {
      grid-template-columns: 1fr;
      gap: 1rem;
      min-height: 39rem;
      padding: 1.35rem;
    }
  
  .narrative .method-slide__copy {
      width: min(30rem, 100%);
    }
  
  .narrative .method-slide__copy h3 {
      font-size: clamp(3rem, 10vw, 4.4rem);
    }
  
  .narrative .method-case.method-proof {
      justify-self: start;
      width: min(29rem, 100%);
    }
}

@media (max-width: 620px) {
  .narrative .method-carousel {
      width: calc(100% - 0.75rem);
    }
  
  .narrative .method-carousel__chapters button {
      min-height: 3rem;
      padding: 0.45rem;
    }
  
  .narrative .method-carousel__chapters button small {
      display: none;
    }
  
  .narrative .method-slide {
      min-height: 38rem;
      padding: 1rem;
    }
  
  .narrative .method-slide__copy h3 {
      font-size: clamp(2.7rem, 14vw, 4rem);
    }
}

.narrative .method-carousel {
  width: min(54rem, calc(100% - clamp(2rem, 9vw, 8rem)));
}

.narrative .method-slide {
  grid-template-columns: minmax(0, 1fr) minmax(13.5rem, 16rem);
  min-height: clamp(23.5rem, 36vw, 27rem);
  padding: clamp(1.15rem, 2.5vw, 1.8rem);
}

.narrative .method-slide__copy h3 {
  font-size: clamp(2.45rem, 4.35vw, 3.65rem);
}

.narrative .method-case.method-proof {
  width: min(16rem, 100%);
}

@media (max-width: 900px) {
  .narrative .method-carousel {
      width: min(50rem, calc(100% - 2rem));
    }
  
  .narrative .method-carousel__chapters button {
      min-height: 3.05rem;
    }
  
  .narrative .method-slide {
      grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 15rem);
      align-content: initial;
      gap: 0.9rem;
      min-height: 27rem;
      padding: 1.15rem;
    }
  
  .narrative .method-slide__copy {
      width: 100%;
    }
  
  .narrative .method-slide__copy h3 {
      font-size: clamp(2.3rem, 5.7vw, 3.15rem);
    }
  
  .narrative .method-case.method-proof {
      justify-self: end;
      width: min(15rem, 100%);
    }
}

@media (max-width: 700px) {
  .narrative .method-carousel {
      width: calc(100% - 1rem);
    }
  
  .narrative .method-slide {
      grid-template-columns: 1fr;
      align-content: end;
      min-height: 34rem;
    }
  
  .narrative .method-slide__copy {
      width: min(26rem, 100%);
    }
  
  .narrative .method-slide__copy h3 {
      font-size: clamp(2.65rem, 11vw, 3.8rem);
    }
  
  .narrative .method-case.method-proof {
      justify-self: start;
      width: min(24rem, 100%);
    }
}

@media (max-width: 620px) {
  .narrative .method-carousel {
      width: calc(100% - 0.75rem);
    }
  
  .narrative .method-slide {
      min-height: 32rem;
      padding: 0.85rem;
    }
  
  .narrative .method-slide__copy h3 {
      font-size: clamp(2.45rem, 13vw, 3.45rem);
    }
}

.narrative #metodo .method-carousel__viewport {
  height: clamp(24rem, 39vw, 28rem);
  overflow: hidden;
}

.narrative #metodo .method-carousel__track {
  height: 100%;
}

.narrative #metodo .method-carousel .method-slide {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(13.5rem, 16rem);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
}

@media (max-width: 900px) {
  .narrative #metodo .method-carousel__viewport {
      height: 27rem;
    }
  
  .narrative #metodo .method-carousel .method-slide {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 15rem);
    }
}

@media (max-width: 700px) {
  .narrative #metodo .method-carousel__viewport {
      height: 36rem;
    }
  
  .narrative #metodo .method-carousel .method-slide {
      grid-template-columns: 1fr;
      align-content: end;
    }
}

@media (max-width: 620px) {
  .narrative #metodo .method-carousel__viewport {
      height: 34rem;
    }
}

/* ===== 31-services.css ===== */
/* ============================================================
   Apollo — 31 services (modal de servicio)
   El indice de capacidades se rehizo en F4 con el material de la biblioteca del
   prototipo y vive en 36-library.css. Lo que queda aqui es el modal de demo, que
   se sigue usando desde /servicios y desde la home.
   Se borraron .services-page, .svc-group, .svc-list, .svc-row, .svc-tags,
   .svc-demo-badge y .svc-demos-callout: ya no hay marcado que los use.
   ============================================================ */

.services-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; margin-top: clamp(2rem, 4vw, 3.5rem); }

/* Service modal body */
.svc-modal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); margin-top: 1.5rem; }
.svc-modal-visual { min-width: 0; }
.svc-modal-copy { display: flex; flex-direction: column; gap: 1rem; }
.svc-modal-copy > p { color: var(--text); }
.svc-modal-case { background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.25rem; }
.svc-modal-case b { display: block; font-size: 0.8rem; color: var(--accent); margin-bottom: 0.35rem; }
.svc-modal-case p { color: var(--ink); font-size: 0.95rem; }
.svc-modal-copy .btn { align-self: flex-start; }

@media (max-width: 720px) {
  .svc-modal-body { grid-template-columns: 1fr; }
}


/* ===== 36-library.css ===== */
/* ============================================================
   Apollo — 36 biblioteca de servicios
   Portado de prototypes/hero-v1/demos.css. La biblioteca del prototipo es una
   pagina CLARA sobre papel: al absorberse en /servicios (decision 1 del plan),
   esa pagina deja de ser oscura. Contrasta a proposito con la home.
   Ambito .svc-library para no chocar con 60-demos.css ni con el visor privado.
   Generado por tools/prefijar-css.js, no escrito a mano:
     node tools/prefijar-css.js prototypes/hero-v1/demos.css assets/css/36-library.css .svc-library
   ============================================================ */

.svc-library {
  --demo-paper: #F1F0EB;
  --gold: var(--accent);
  --gold-light: var(--accent-light);
  --page-gutter: var(--gutter);
  --proto-ink: #111318;
}

.svc-library {
  --demo-paper: #f1f0eb;
  min-height: 100vh;
  background: var(--demo-paper);
  color: var(--proto-ink);
}

.svc-library .site-header {
  color: #f7f7f4;
}

.svc-library .demos-brand {
  display: inline-flex;
  align-items: center;
  min-width: 5.25rem;
  min-height: 3rem;
}

.svc-library .demos-brand img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.svc-library .demos-header .desktop-nav a[aria-current="page"]::after {
  width: 100%;
  opacity: 1;
}

.svc-library .demo-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(15rem, 0.55fr);
  min-height: 48rem;
  padding: clamp(9rem, 14vw, 13rem) var(--page-gutter) clamp(5rem, 9vw, 8rem);
  overflow: hidden;
  background: #070a10;
  color: #f7f7f4;
}

.svc-library .demo-hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -38% 22%;
  width: 68rem;
  height: 42rem;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 42%, rgba(104, 167, 255, 0.62), rgba(87, 67, 255, 0.2) 32%, rgba(7, 10, 16, 0) 70%);
  filter: blur(28px);
  opacity: 0.72;
}

.svc-library .demo-hero__ambient {
  position: absolute;
  top: 20%;
  right: 8%;
  width: min(35vw, 31rem);
  aspect-ratio: 1;
  border: 1px solid rgba(117, 173, 255, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 8rem rgba(65, 112, 255, 0.13);
}

.svc-library .demo-hero__ambient::before,
.svc-library .demo-hero__ambient::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 1px solid rgba(239, 197, 112, 0.12);
}

.svc-library .demo-hero__ambient::before { inset: 17%; }

.svc-library .demo-hero__ambient::after { inset: 36%; }

.svc-library .demo-hero__copy,
.svc-library .demo-hero__manifest {
  position: relative;
  z-index: 1;
}

.svc-library .demo-kicker,
.svc-library .demo-card__number {
  margin: 0 0 1.4rem;
  color: #3866a7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.svc-library .demo-hero .demo-kicker { color: var(--gold-light); }

.svc-library .demo-hero h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(3.2rem, 6.9vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.075em;
}

.svc-library .demo-hero h1 span {
  display: block;
  margin-top: 0.16em;
  background: linear-gradient(95deg, #69a9ff, #77dddc 34%, #e7c56e 68%, #d99cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.svc-library .demo-hero__copy > p:last-child {
  max-width: 47rem;
  margin: 2.5rem 0 0;
  color: #b9c0cb;
  font-size: clamp(1rem, 1.65vw, 1.35rem);
  line-height: 1.6;
}

.svc-library .demo-hero__manifest {
  align-self: end;
  display: grid;
  gap: 0.65rem;
  padding: 1.15rem;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 1.4rem;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.16);
  backdrop-filter: blur(22px);
}

.svc-library .demo-hero__manifest span {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #d2d7df;
  font-size: 0.9rem;
}

.svc-library .demo-hero__manifest span::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #65a8ff;
  box-shadow: 0 0 0.8rem #65a8ff;
}

.svc-library .demo-library {
  padding: clamp(4.5rem, 8vw, 8rem) var(--page-gutter) 7rem;
}

.svc-library .library-header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.25rem;
}

.svc-library .library-header h2 {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.svc-library .demo-filters,
.svc-library .demo-scenario-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.35rem;
  border: 1px solid rgba(17,19,24,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  box-shadow: inset 0 1px rgba(255,255,255,.9);
}

.svc-library .demo-filters button,
.svc-library .demo-scenario-controls button {
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #616978;
  cursor: pointer;
}

.svc-library .demo-filters button.is-active,
.svc-library .demo-scenario-controls button.is-active {
  background: #111723;
  color: #fff;
  box-shadow: 0 0.5rem 1.4rem rgba(17, 23, 35, 0.14);
}

.svc-library .demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.svc-library .demo-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(25rem, 1fr);
  gap: 1.4rem;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(40, 63, 105, 0.13);
  border-radius: 2rem;
  background:
    linear-gradient(128deg, rgba(255,255,255,.85), rgba(244,246,252,.58) 58%, rgba(255,244,228,.54)),
    rgba(255,255,255,.55);
  box-shadow: 0 1.2rem 4rem rgba(35, 45, 70, 0.075), inset 0 1px rgba(255,255,255,.95);
  overflow: hidden;
  transition: opacity 280ms ease, transform 280ms ease;
}

.svc-library .demo-card--featured {
  grid-column: 1 / -1;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.55fr);
  grid-template-rows: minmax(35rem, auto);
}

.svc-library .demo-card[hidden] { display: none; }

.svc-library .demo-card__content {
  align-self: center;
  padding: clamp(0.7rem, 2vw, 1.5rem);
}

.svc-library .demo-card h3 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2rem, 3.25vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.svc-library .demo-card:not(.demo-card--featured) h3 { font-size: clamp(1.9rem, 2.5vw, 2.85rem); }

.svc-library .demo-card__content > p,
.svc-library .demo-card__details p {
  max-width: 41rem;
  color: #606a7b;
  line-height: 1.6;
}

.svc-library .demo-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0;
  list-style: none;
}

.svc-library .demo-card__tags li {
  padding: 0.45rem 0.72rem;
  border: 1px solid rgba(31, 53, 91, 0.12);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: #586477;
  font-size: 0.76rem;
}

.svc-library .demo-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 12rem;
  padding: 0.8rem 0;
  border: 0;
  border-bottom: 1px solid rgba(17,19,24,.25);
  background: transparent;
  color: var(--proto-ink);
  font-weight: 700;
  cursor: pointer;
}

.svc-library .demo-card__toggle span { transition: transform 260ms ease; }

.svc-library .demo-card__toggle[aria-expanded="true"] span { transform: rotate(45deg); }

.svc-library .demo-card__details {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(17,19,24,.1);
}

.svc-library .demo-preview {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(125, 159, 231, 0.25);
  border-radius: 1.55rem;
  background: #0b111c;
  color: #f3f6fb;
  box-shadow: 0 1.6rem 4.5rem rgba(15, 22, 38, 0.19), inset 0 1px rgba(255,255,255,.08);
}

.svc-library .preview-chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3.25rem;
  padding: 0 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(90deg, rgba(255,255,255,.035), transparent);
}

.svc-library .preview-chrome span {
  margin-right: auto;
  color: #8d97a9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
}

.svc-library .preview-chrome i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #48515f;
}

.svc-library .preview-heading,
.svc-library .analysis-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.55rem;
}

.svc-library .preview-heading span,
.svc-library .analysis-summary span,
.svc-library .preview-chart > span,
.svc-library .preview-signals > span {
  color: #8e98aa;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.svc-library .preview-heading b {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(99, 231, 183, 0.25);
  border-radius: 999px;
  color: #78e3bd;
  font-size: 0.68rem;
}

.svc-library .preview-heading b::before {
  content: "";
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.65rem currentColor;
  animation: libraryPulse 1.7s ease-in-out infinite;
}

.svc-library .preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 1.55rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.1rem;
  overflow: hidden;
}

.svc-library .preview-metrics div {
  min-width: 0;
  padding: 1rem;
  background: rgba(255,255,255,.018);
}

.svc-library .preview-metrics div + div { border-left: 1px solid rgba(255,255,255,.08); }

.svc-library .preview-metrics span,
.svc-library .preview-metrics small { display: block; color: #7f899a; font-size: .68rem; }

.svc-library .preview-metrics strong { display: block; margin: .25rem 0; font-size: clamp(1.2rem, 2.1vw, 2rem); font-variant-numeric: tabular-nums; }

.svc-library .preview-metrics small { color: #72d6b1; }

.svc-library .preview-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: 1rem;
  padding: 1rem 1.55rem 1.55rem;
}

.svc-library .preview-chart,
.svc-library .preview-signals {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 1.1rem;
  background: rgba(255,255,255,.014);
}

.svc-library .preview-chart svg { display: block; width: 100%; margin-top: .7rem; }

.svc-library .preview-gridline { fill: none; stroke: rgba(255,255,255,.06); }

.svc-library .preview-chart-area { fill: url(#libraryDashboardFill); }

.svc-library .preview-chart-line { fill: none; stroke: #63a7ff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(89,157,255,.35)); }

.svc-library .preview-chart-dot { fill: #c9e2ff; filter: drop-shadow(0 0 8px #4f99ff); }

.svc-library .preview-signals { display: grid; align-content: start; gap: .7rem; }

.svc-library .preview-signals b { display: flex; align-items: center; gap: .55rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .75rem; }

.svc-library .preview-signals i { width: .45rem; height: .45rem; border-radius: 50%; background: #67a9ff; box-shadow: 0 0 .7rem currentColor; }

.svc-library .preview-signals b:nth-child(3) i { background: #e4bc64; }

.svc-library .preview-signals b:nth-child(4) i { background: #6de0df; }

.svc-library .demo-card:not(.demo-card--featured) .demo-preview { min-height: 27rem; }

.svc-library .demo-preview--analysis > svg { display: block; width: calc(100% - 2rem); margin: 0 1rem; }

.svc-library .analysis-summary strong { font-size: 2rem; background: linear-gradient(90deg,#6aa9ff,#9e79ff,#e5bd6c); background-clip: text; color: transparent; }

.svc-library .library-analysis-band { fill: none; stroke: rgba(95,162,255,.22); stroke-width: 20; stroke-linecap: round; }

.svc-library .library-analysis-points circle { fill: #ddecff; stroke: #5fa3ff; stroke-width: 3; filter: drop-shadow(0 0 6px #5fa3ff); transition: cx 650ms ease, cy 650ms ease; }

.svc-library .demo-preview--analysis > p { margin: 0; padding: 0 1.5rem 1.4rem; color: #98a3b5; }

.svc-library .library-data-map { position: relative; min-height: 29rem; overflow: hidden; }

.svc-library .library-data-map > svg { position: absolute; inset: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); }

.svc-library .library-data-map path { fill: none; stroke: rgba(102,165,255,.62); stroke-width: 2; stroke-dasharray: 6 7; }

.svc-library .library-data-map path.is-out { stroke: rgba(230,187,93,.7); }

.svc-library .library-data-map circle { fill: #dcecff; filter: drop-shadow(0 0 7px #61a5ff); }

.svc-library .library-source,
.svc-library .library-hub,
.svc-library .library-output { position: absolute; z-index: 2; display: flex; align-items: center; gap: .55rem; border: 1px solid rgba(104,169,255,.35); border-radius: 1rem; background: rgba(16,27,44,.86); }

.svc-library .library-source { left: 5%; width: 27%; padding: .75rem; }

.svc-library .library-source--one { top: 13%; }

.svc-library .library-source--two { top: 43%; }

.svc-library .library-source--three { top: 73%; }

.svc-library .library-source i,
.svc-library .library-hub i,
.svc-library .library-output i { width: .6rem; height: .6rem; border-radius: 50%; background: #67a9ff; box-shadow: 0 0 .8rem currentColor; }

.svc-library .library-source span { font-size: .76rem; font-weight: 700; }

.svc-library .library-source small { display: block; margin-top: .15rem; color: #8490a3; font-weight: 400; }

.svc-library .library-hub { top: 39%; left: 43%; flex-direction: column; justify-content: center; width: 24%; aspect-ratio: 1.15; padding: .7rem; background: rgba(35,69,119,.82); text-align: center; }

.svc-library .library-hub span,
.svc-library .library-output span { color: #8e9bb0; font-size: .67rem; }

.svc-library .library-output { top: 42%; right: 4%; flex-direction: column; justify-content: center; width: 21%; padding: 1rem .5rem; text-align: center; }

.svc-library .library-output i { background: #e5bd65; }

.svc-library .demo-closing {
  padding: clamp(5rem, 10vw, 10rem) var(--page-gutter);
  background: #070a10;
  color: #f7f7f4;
}

.svc-library .demo-closing .demo-kicker { color: var(--gold-light); }

.svc-library .demo-closing h2 { max-width: 15ch; margin: 0; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .94; letter-spacing: -.07em; }

.svc-library .demo-closing > div { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }

@keyframes libraryPulse { 50% { opacity: .35; transform: scale(.78); } }

@media (max-width: 900px) {
  .svc-library .demo-hero { grid-template-columns: 1fr; gap: 3rem; min-height: auto; }
  
  .svc-library .demo-hero__manifest { max-width: 26rem; }
  
  .svc-library .library-header { align-items: start; flex-direction: column; }
  
  .svc-library .demo-grid { grid-template-columns: 1fr; }
  
  .svc-library .demo-card--featured { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: auto; }
  
  .svc-library .preview-dashboard-grid { grid-template-columns: 1fr; }
  
  .svc-library .preview-signals { grid-template-columns: repeat(3, 1fr); }
  
  .svc-library .preview-signals > span { grid-column: 1 / -1; }
  
  .svc-library .preview-signals b { display: block; }
}

@media (max-width: 620px) {
  .svc-library .demo-hero { padding-top: 7.7rem; }
  
  .svc-library .demo-hero h1 { font-size: clamp(3.05rem, 15vw, 4.7rem); }
  
  .svc-library .demo-library { padding-inline: 1rem; }
  
  .svc-library .demo-card { border-radius: 1.35rem; }
  
  .svc-library .demo-filters { width: 100%; border-radius: 1rem; }
  
  .svc-library .demo-filters button { flex: 1; padding-inline: .45rem; }
  
  .svc-library .preview-metrics { grid-template-columns: 1fr; }
  
  .svc-library .preview-metrics div + div { border-top: 1px solid rgba(255,255,255,.08); border-left: 0; }
  
  .svc-library .preview-signals { grid-template-columns: 1fr; }
  
  .svc-library .library-source { width: 31%; }
  
  .svc-library .library-hub { left: 42%; width: 27%; }
  
  .svc-library .library-output { right: 2%; width: 23%; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-library .demo-preview *,
  .svc-library .demo-hero * { animation: none !important; transition: none !important; }
}
/* ============================================================
   Ajustes de produccion sobre el material portado
   ============================================================ */

/* Las tarjetas del prototipo reservan una fila para su preview animada. Aqui la
   demo interactiva vive en el modal que ya existe (data-service-open), asi que
   la tarjeta es solo contenido y no debe reservar 25rem vacios. */
.svc-library .demo-card--plain { grid-template-rows: auto; }

/* Grupos por resultado de negocio: la agrupacion que ya tenia /servicios y que
   sustituye a los filtros del prototipo, que necesitaban JS propio. */
.svc-library .library-group { margin-top: clamp(3rem, 6vw, 5rem); }
.svc-library .library-group__head { margin-bottom: 1.6rem; max-width: 62ch; }
.svc-library .library-group__head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.02em; color: var(--proto-ink); }
.svc-library .library-group__head p { margin-top: 0.5rem; color: rgba(17, 19, 24, 0.66); }

/* El boton de la tarjeta abre la demo real en vez de desplegar texto. */
.svc-library .demo-card__toggle { cursor: pointer; }

/* El CTA de cierre hereda el boton de produccion, que esta pensado para fondo
   oscuro: sobre papel necesita su propio contraste. */
.svc-library .services-cta { margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }
.svc-library .services-cta .hero-reassure { margin-top: 0.9rem; color: rgba(17, 19, 24, 0.6); font-family: var(--font-mono); font-size: 0.78rem; }

@media (max-width: 900px) {
  .svc-library .demo-grid { grid-template-columns: minmax(0, 1fr); }
}

/* El hero de la biblioteca es oscuro dentro de una pagina de papel. En el
   prototipo el texto heredaba su color; aqui no puede, porque 10-base.css da
   color a h1 y a p directamente y una regla propia del elemento gana siempre a
   la herencia del contenedor. */
.svc-library .demo-hero h1,
.svc-library .demo-hero p { color: #F7F7F4; }
.svc-library .demo-hero h1 span { color: var(--accent-light); }


/* ===== 32-contact.css ===== */
/* ============================================================
   Apollo — 32 contact (single conversion view: Calendly + form + channels)
   ============================================================ */

.contact { padding-top: clamp(120px, 18vh, 200px); }
.contact .section-head { margin-inline: auto; text-align: center; }
.contact .section-head .lead { margin-inline: auto; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

.contact-cal { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.contact-form { min-width: 0; }
.contact-when { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2rem); }
.contact-when h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.contact-when ul { display: grid; gap: 0.7rem; }
.contact-when li { padding-left: 1.6rem; position: relative; color: var(--text); }
.contact-when li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.contact-calendly { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.75rem; overflow: hidden; min-width: 0; }

.contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-sm); }
.contact-form h3 { font-size: 1.35rem; margin-bottom: 0.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-label { font-size: 0.85rem; font-weight: 600; color: var(--ink); display: block; margin-bottom: 0.5rem; }
.form-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.form-chips button { font-size: 0.82rem; padding: 0.45rem 0.85rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface); transition: all var(--dur-micro) ease; }
.form-chips button:hover { border-color: var(--accent); color: var(--ink); }
.form-chips button.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.form-status { font-size: 0.9rem; color: var(--muted); min-height: 1.1em; margin: 0; }
.form-status.is-success { color: var(--ok); }
.form-status.is-error { color: var(--err); }

.contact-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.contact-channels > * { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color var(--dur-micro) ease; }
.contact-channels a:hover { border-color: var(--accent); }
.contact-channels b { color: var(--ink); font-size: 0.9rem; }
.contact-channels span { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  /* Touch target: service chips sit at ~30px; lift to the 44px minimum. */
  .form-chips button { min-height: 44px; padding-block: 0.7rem; }
}

/* Trim the oversized top gap under the fixed nav on phones (18vh ~= 146px). */
@media (max-width: 640px) {
  .contact { padding-top: clamp(92px, 13dvh, 120px); }
}


/* ===== 45-platform.css ===== */
/* ============================================================
   Apollo — 45 plataforma (acceso, portal y panel de administracion)
   Sustituye a 40-private.css, que vestia el portal por slug y el admin viejos.
   Ocupa su MISMO lugar en el bundle: el orden es la cascada y 50-glass debe
   seguir pisando a esta hoja.

   Referencias (DESIGN_SYSTEM.md, Anexo C):
   - Loro Labs R-004: vidrio selectivo, solo en navegacion y cabecera. El area
     de trabajo va sobre superficie lisa: una pantalla donde se trabaja a diario
     no se lee bien sobre blur.
   - Framer R-010: tarjeta de KPI con cifra grande y etiqueta pequena, punto de
     estado en vivo junto al dato que se actualiza.
   - R-013 (OTP Input, Glassy Tunnel Forms): campos sobre panel de vidrio con
     foco dorado visible.
   - Hilo de chat: SIN REFERENCIA APLICABLE, declarado en el Anexo C. Se compone
     desde los tokens.

   Solo role tokens. Ningun literal de color.
   ============================================================ */

/* ---------- Estructura comun ---------- */

.p-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.p-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(48px, 8vw, 96px);
}

.p-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px var(--gutter);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--line);
}

.p-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
}

.p-brand img { width: 28px; height: 28px; }

.p-topbar-spacer { flex: 1; }

.p-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-eyebrow {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.p-title {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.p-lead {
  color: var(--muted);
  max-width: 60ch;
  margin-top: 8px;
  text-wrap: pretty;
}

.p-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
}

.p-card + .p-card { margin-top: 20px; }

/* ---------- Acceso y alta (R-013 + R-004) ---------- */

.p-auth {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px) var(--gutter);
}

/* Dos halos dorados muy tenues. Sin nada detras, el desenfoque del vidrio no
   difumina nada y la caja se lee como un gris plano; ademas conectan la pantalla
   de acceso con el ambiente del sitio publico. Degradados radiales, no filtros:
   cuestan casi nada y no obligan a componer una capa aparte. */
.p-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58ch 44ch at 18% 12%, var(--accent-soft), transparent 70%),
    radial-gradient(52ch 40ch at 88% 88%, color-mix(in srgb, var(--signal) 9%, transparent), transparent 72%);
}

.p-auth > * { position: relative; }

.p-auth-box {
  width: min(440px, 100%);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-line);
  border-radius: var(--r-glass);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow);
}

.p-auth-box .p-title { font-size: clamp(22px, 3vw, 28px); }

.p-auth-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  justify-content: space-between;
}

.p-auth-foot a { color: var(--accent); }
.p-auth-foot a:hover { text-decoration: underline; }

/* ---------- Formularios ---------- */

.p-field { margin-top: 16px; }

.p-field label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.p-field input,
.p-field textarea,
.p-field select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  color: var(--ink);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}

.p-field textarea { resize: vertical; min-height: 96px; }

.p-field input::placeholder,
.p-field textarea::placeholder { color: var(--muted); }

.p-field input:focus,
.p-field textarea:focus,
.p-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.p-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Los dos campos opcionales comparten fila en cuanto hay ancho: el alta tenia seis
   campos apilados y obligaba a desplazarse antes de ver el boton. */
.p-field-pair {
  display: grid;
  gap: 0 14px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 520px) {
  .p-field-pair { grid-template-columns: 1fr; }
}

.p-error {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--err);
  background: color-mix(in srgb, var(--err) 12%, transparent);
  color: var(--ink);
  font-size: 14px;
}

.p-ok {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ink);
  font-size: 14px;
}

/* ---------- Botones ---------- */

.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;             /* objetivo tactil */
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}

.p-btn:active { transform: translateY(1px); }

.p-btn--primary { background: var(--accent); color: var(--accent-ink); }
.p-btn--primary:hover { background: var(--accent-light); }

.p-btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.p-btn--ghost:hover { background: var(--glass-bg); }

.p-btn--block { width: 100%; margin-top: 20px; }

.p-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Pildoras de estado ----------
   Las cinco variantes del portal anterior. `expired` va en --warn naranja y no
   en ambar a proposito: el ambar chocaba con el dorado de marca y una demo
   expirada se leia igual que un borrador. */

.p-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}

.p-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.p-pill.ready   { color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.p-pill.draft   { color: var(--muted);  }
.p-pill.expired { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.p-pill.error   { color: var(--err);    border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.p-pill.muted   { color: var(--muted);  opacity: .8; }

/* Punto de estado en vivo (Framer R-010): late solo cuando hay dato fresco. */
.p-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.p-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 60%, transparent);
  animation: p-pulse 2.4s var(--ease-out) infinite;
}

@keyframes p-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Hilo de conversacion ----------
   SIN REFERENCIA APLICABLE (Anexo C). Se compone desde los tokens: Apollo a la
   izquierda sobre --surface con filo dorado, el cliente a la derecha sobre
   --surface-2, y el sistema centrado y mas pequeno. */

.p-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px 20px;
  max-height: min(60vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.p-msg {
  max-width: min(75%, 60ch);
  padding: 12px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  animation: p-msg-in var(--dur) var(--ease-out-expo) both;
}

@keyframes p-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.p-msg--admin {
  align-self: flex-start;
  border-left: 2px solid var(--accent);
  border-top-left-radius: var(--r-sm);
}

.p-msg--user {
  align-self: flex-end;
  background: var(--surface-2);
  border-top-right-radius: var(--r-sm);
}

.p-msg--system {
  align-self: center;
  max-width: 46ch;
  text-align: center;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  padding: 4px 0;
}

.p-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.p-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }

.p-msg-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}

.p-chat-empty {
  color: var(--muted);
  text-align: center;
  padding: 32px 12px;
}

.p-composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.p-composer textarea {
  flex: 1;
  min-height: 52px;
  max-height: 180px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  color: var(--ink);
  resize: none;
}

.p-composer textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Estado de espera con texto, no solo movimiento (principio 7 de motion;
   Thinking States R-013). */
.p-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.p-thinking i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: p-think 1.2s var(--ease-out) infinite;
}

.p-thinking i:nth-child(2) { animation-delay: .15s; }
.p-thinking i:nth-child(3) { animation-delay: .3s; }

@keyframes p-think {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ---------- Rejilla de demos ---------- */

.p-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 20px;
}

.p-demo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.p-demo-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.p-demo-card h3 { color: var(--ink); font-size: 17px; }
.p-demo-card p { color: var(--muted); font-size: 14px; }
.p-demo-card .p-btn { margin-top: auto; }

/* ---------- Visor de demo ---------- */

.p-viewer { display: flex; flex-direction: column; min-height: 100vh; }

.p-viewer-frame {
  flex: 1;
  width: 100%;
  min-height: 70vh;
  border: 0;
  background: var(--surface);
}

.p-viewer-note {
  padding: 10px var(--gutter);
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ---------- Panel de administracion ---------- */

.adm-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.adm-side {
  border-right: 1px solid var(--line);
  background: var(--bg-tint);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adm-side a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 15px;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.adm-side a:hover { background: var(--glass-bg); color: var(--ink); }

.adm-side a.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.adm-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.adm-main { padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px); min-width: 0; }

.adm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.adm-head .p-title { flex: 1; }

/* Tarjeta de KPI (Framer R-010): cifra grande, etiqueta pequena, sin adorno. */
.adm-kpis {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 24px;
}

.adm-kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
}

.adm-kpi b {
  display: block;
  font-size: clamp(26px, 3vw, 34px);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}

.adm-kpi span { font-size: 13px; color: var(--muted); }

/* Serie diaria en barras CSS: sin libreria de graficas. */
.adm-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  padding-top: 12px;
}

.adm-chart i {
  flex: 1;
  min-width: 3px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  opacity: .85;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.adm-chart i:hover { opacity: 1; }
.adm-chart i.is-empty { background: var(--line); opacity: .5; }

.adm-table { width: 100%; overflow-x: auto; }

.adm-table table { width: 100%; border-collapse: collapse; font-size: 14px; }

.adm-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.adm-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
}

.adm-table tr:hover td { background: var(--surface-2); }

.adm-empty { color: var(--muted); padding: 28px 12px; text-align: center; }

/* Lista de conversaciones */
.adm-threads { display: flex; flex-direction: column; gap: 8px; }

.adm-thread {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--dur-micro) var(--ease-out);
}

.adm-thread:hover { border-color: var(--line-strong); }
.adm-thread.is-unread { border-color: var(--accent); background: var(--accent-soft); }
.adm-thread-main { flex: 1; min-width: 0; }
.adm-thread-name { color: var(--ink); font-weight: 600; }
.adm-thread-preview {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-thread-time { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Subida de demos (Uploading Button R-012 + Border Beam R-013).
   Sin barra de porcentaje: el ZIP no reporta progreso y R-012 prohibe
   simularlo. Se comunica ESTADO, con texto. */
.adm-upload { position: relative; }

.adm-upload.is-working::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r);
  padding: 1px;
  background: conic-gradient(from var(--beam, 0deg), transparent 0 70%, var(--accent) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: p-beam 1.6s linear infinite;
  pointer-events: none;
}

@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@keyframes p-beam { to { --beam: 360deg; } }

.adm-upload-status { margin-top: 12px; font-size: 14px; color: var(--muted); }
.adm-upload-status.is-error { color: var(--err); }
.adm-upload-status.is-done { color: var(--ok); }

/* ---------- Movil ---------- */

@media (max-width: 860px) {
  .adm-layout { grid-template-columns: 1fr; }
  .adm-side {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
  }
  /* En horizontal la marca compartia fila con los enlaces: al encogerse, el enlace
     activo se le montaba encima. */
  .adm-side .p-brand {
    margin-bottom: 0;
    flex: 0 0 auto;
    padding-right: 8px;
    border-right: 1px solid var(--line);
  }
  .adm-side a { white-space: nowrap; flex: 0 0 auto; }
  .adm-side form { margin-top: 0 !important; padding-top: 0 !important; flex: 0 0 auto; }
  .p-msg { max-width: 88%; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .p-msg { animation: none; }
  .p-live::before,
  .p-thinking i,
  .adm-upload.is-working::after { animation: none; }
  .p-demo-card:hover { transform: none; }
}

/* ---------- Captura de correo en las guias ----------
   Vive en esta hoja y no en 30-home porque nace con la plataforma. El PDF dejo de
   ser un enlace directo: se pide el correo y el servidor devuelve un enlace firmado. */

.guide-gate {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.guide-gate b { color: var(--ink); display: block; }
.guide-gate p { color: var(--muted); font-size: 14px; margin-top: 4px; }

.guide-gate-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.guide-gate-row input[type="email"] {
  flex: 1;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  color: var(--ink);
}

.guide-gate-row input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.guide-gate-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.guide-gate-check input { width: auto; accent-color: var(--accent); }

/* ---------- Aviso de privacidad ----------
   Prosa larga sobre el fondo oscuro del sitio: ancho de lectura acotado y jerarquia
   sencilla. No lleva ningun adorno a proposito. */

.legal-inner { max-width: 72ch; margin-inline: auto; }
.legal-block { margin-top: 36px; }

.legal-block h2 {
  color: var(--ink);
  font-size: clamp(19px, 2.2vw, 23px);
  margin-bottom: 12px;
  text-wrap: balance;
}

.legal-block p {
  color: var(--text);
  margin-top: 10px;
  line-height: 1.65;
  text-wrap: pretty;
}

.legal-block strong { color: var(--ink); font-weight: 600; }

.legal-date {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

/* Nota de consentimiento bajo los formularios que recaban datos personales. */
.consent-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.consent-note a { color: var(--accent); text-decoration: underline; }


/* ===== 50-glass.css ===== */
/* ============================================================
   Apollo — 50 liquid glass (hero device, modales, botones, nav)
   El vidrio es un tratamiento de firma, no un default: las secciones
   editoriales siguen solidas. Material portado de prototypes/hero-v1
   (referencias R-013 Liquid Glass Button y R-008 United Carriers para los halos).
   Un solo tema oscuro: no hay variantes por prefers-color-scheme.
   ============================================================ */

/* ---------- Halos detras del dispositivo de vidrio del hero ----------
   Dorado como acento de marca y azul de senal como contrapunto frio, igual que
   la escena del prototipo. Se construyen sobre tokens, nunca sobre literales. */
.liquid-bg { position: absolute; inset: -12% -6%; z-index: -2; overflow: hidden; pointer-events: none; filter: blur(52px) saturate(1.3); }
.liquid-blob { position: absolute; width: 40vmax; height: 40vmax; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; opacity: 0.5; will-change: transform, border-radius; }
.liquid-blob.b1 { top: -14%; left: 52%; background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 68%); }
.liquid-blob.b2 { top: 26%; left: -14%; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--signal) 40%, transparent), transparent 68%); }
.liquid-blob.b3 { top: 46%; left: 56%; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--accent-light) 26%, transparent), transparent 68%); }

@keyframes blobMorph {
  0%,   100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(0deg) scale(1); }
  33%        { border-radius: 58% 42% 37% 63% / 44% 41% 59% 56%; transform: translate(4%, -3%) rotate(12deg) scale(1.06); }
  66%        { border-radius: 38% 62% 56% 44% / 62% 38% 62% 38%; transform: translate(-3%, 4%) rotate(-10deg) scale(0.96); }
}
.liquid-blob { animation: blobMorph 20s ease-in-out infinite; }
.liquid-blob.b2 { animation-duration: 26s; animation-delay: -7s; }
.liquid-blob.b3 { animation-duration: 32s; animation-delay: -14s; }
@media (prefers-reduced-motion: reduce) { .liquid-blob { animation: none; } }

/* ---------- Modales ---------- */
.modal__box {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-lg);
}

/* ---------- Botones primarios: barrido de brillo en hover ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg); transition: left 0.6s var(--ease-out);
}
.btn--primary:hover::after { left: 150%; }
@media (prefers-reduced-motion: reduce) { .btn--primary::after { display: none; } }

/* ---------- Nav al hacer scroll: vidrio con reflejo superior ----------
   El reflejo (--glass-sheen) es lo que separa el material del prototipo de un
   simple fondo translucido: da el borde iluminado y la sensacion de profundidad. */
#nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  background-image: var(--glass-sheen);
  backdrop-filter: saturate(1.6) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(1.6) blur(var(--glass-blur));
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- CTA flotante y barra movil ---------- */
.mobile-cta { background: color-mix(in srgb, var(--bg) 70%, transparent) !important; backdrop-filter: saturate(1.5) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(1.5) blur(var(--glass-blur)); }

/* ---------- Rendimiento en movil: congelar el desenfoque del hero ----------
   Un blur de 52px sobre blobs que se deforman es de lo mas caro de repintar cada
   frame. En telefono se deja estatico y con radio menor; el escritorio conserva la
   firma completa. Va despues de las reglas de arriba para ganar por orden. */
@media (max-width: 860px) {
  .liquid-blob { animation: none; will-change: auto; }
  .liquid-bg { filter: blur(32px) saturate(1.15); }
  .mobile-cta { backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
}


/* ===== 60-demos.css ===== */
/* ============================================================
   Apollo — interactive service demos (shared chrome + per-demo styles)
   Per-demo CSS is appended below, each rule scoped to .svc-demo[data-demo="<id>"].
   ============================================================ */

/* Bigger modal box for the interactive demo */
.modal__box--demo { width: min(1140px, 96vw); max-width: 96vw; max-height: 92vh; padding: clamp(1.25rem, 3vw, 2.1rem); }
.svc-modal-head { margin-bottom: 1rem; padding-right: 2.4rem; }
.svc-modal-head .kicker { display: inline-flex; flex-wrap: wrap; max-width: 100%; margin-bottom: 0.55rem; line-height: 1.35; }
.svc-modal-head h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.svc-modal-head p { color: var(--muted); max-width: 72ch; margin-top: 0.5rem; }
.svc-demo-wrap { margin: 1.1rem 0; }
.svc-modal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.svc-modal-foot .svc-modal-case { flex: 1 1 280px; min-width: 0; }
.svc-modal-foot .svc-modal-case b { color: var(--accent); font-size: 0.78rem; display: block; margin-bottom: 0.15rem; }
.svc-modal-foot .svc-modal-case p { color: var(--muted); font-size: 0.9rem; }
.svc-modal-foot .btn { flex: 0 0 auto; }

/* Servicios call-out + per-row badge */
.svc-demos-callout { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); padding: 0.8rem 1.2rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-weight: 600; max-width: 100%; }
.svc-demos-callout .play { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 0.7rem; }
.svc-demos-callout b { color: var(--accent); }
.svc-demo-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-soft); padding: 0.28rem 0.6rem; border-radius: var(--r-pill); margin-bottom: 0.6rem; }
.svc-demo-badge::before { content: "▶"; font-size: 0.6rem; }

/* ---- Shared demo shell + primitives demos can reuse for consistency ---- */
.svc-demo { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--text); font-family: var(--font-body); }
.svc-demo *, .svc-demo *::before, .svc-demo *::after { box-sizing: border-box; }
.svc-demo-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.85rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.svc-demo-bar .label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); margin-right: 0.25rem; }
.svc-demo-chip { font: 600 0.82rem/1 var(--font-body); padding: 0.5rem 0.85rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface); cursor: pointer; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.svc-demo-chip:hover { color: var(--ink); border-color: var(--accent); }
.svc-demo-chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.svc-demo-body { padding: clamp(1rem, 2.5vw, 1.5rem); }
.svc-demo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.7rem; }
.svc-demo-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.85rem 0.95rem; }
.svc-demo-kpi b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.svc-demo-kpi span { font-size: 0.72rem; color: var(--muted); }
.svc-demo-kpi em { font-style: normal; font-size: 0.72rem; color: var(--accent); }

/* Interaction hint: on phones the demos read like static screenshots, so cue that
   the controls are live. Hidden on desktop (hover/cursor already signals it). */
.svc-demo-hint { display: none; margin: 0; }

@media (max-width: 720px) {
  .modal__box--demo { width: 100%; max-height: 94vh; padding: 1rem; }
  .svc-modal-head { padding-right: 2.25rem; }
  .svc-modal-head .kicker { max-width: calc(100% - 3rem); font-size: 0.68rem; }

  /* Interaction hint pill above each demo, auto-dismissed on first tap (demos.js). */
  .svc-demo-hint {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 0 0.7rem; padding: 0.55rem 0.8rem;
    border-radius: var(--r-sm);
    background: var(--accent-soft); color: var(--accent);
    font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.3; letter-spacing: 0.01em;
  }
  .svc-demo-hint::before {
    content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent); animation: demoHintPulse 1.5s var(--ease-out) infinite;
  }
  .svc-demo-hint.is-dismissed { display: none; }

  /* Bigger, clearly tappable shared controls on touch. */
  .svc-demo-bar { padding: 0.8rem; gap: 0.45rem; }
  .svc-demo-chip { min-height: 40px; padding: 0.55rem 0.95rem; font-size: 0.85rem; }
  .svc-demo-chip:active { transform: scale(0.96); }

  /* Footer: stack the case study above a full-width CTA, in normal flow. */
  .svc-modal-foot { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .svc-modal-foot .btn { width: 100%; }
}

@keyframes demoHintPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

/* ============================================================
   Per-demo styles appended below by the build.
   ============================================================ */


/* ===================== demo: bi ===================== */
.svc-demo[data-demo="bi"] { --bi-c2: color-mix(in srgb, var(--accent) 62%, #19c3e0); --bi-c3: color-mix(in srgb, var(--accent) 48%, #ff7ac2); opacity: 0; }
.svc-demo[data-demo="bi"].is-ready { opacity: 1; }

.svc-demo[data-demo="bi"] .bi-sep { width: 1px; align-self: stretch; margin: 0.15rem 0.3rem; background: var(--line-strong); }

.svc-demo[data-demo="bi"] .bi-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.95rem; }
.svc-demo[data-demo="bi"] .bi-title { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.svc-demo[data-demo="bi"] .bi-title b { font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-demo[data-demo="bi"] .bi-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: var(--r-pill); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.svc-demo[data-demo="bi"] .bi-live { display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.svc-demo[data-demo="bi"] .bi-live i { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--ok); animation: bi-pulse 1.8s var(--ease-out) infinite; }
@keyframes bi-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.78); } }

.svc-demo[data-demo="bi"] .svc-demo-kpis { margin-bottom: 0.95rem; }
.svc-demo[data-demo="bi"] .svc-demo-kpi { position: relative; overflow: hidden; transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.svc-demo[data-demo="bi"] .svc-demo-kpi::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--bi-c2)); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.svc-demo[data-demo="bi"] .svc-demo-kpi.is-bump::after { transform: scaleX(1); }
.svc-demo[data-demo="bi"] .svc-demo-kpi b { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
.svc-demo[data-demo="bi"] .bi-kpi-flavor b { font-size: clamp(0.98rem, 1.7vw, 1.2rem); }
.svc-demo[data-demo="bi"] .bi-kpi-flavor em { position: absolute; top: 0.7rem; right: 0.8rem; font-size: 1.25rem; line-height: 1; }

.svc-demo[data-demo="bi"] .bi-panels { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0.85rem; }
.svc-demo[data-demo="bi"] .bi-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1rem 1rem; min-width: 0; }
.svc-demo[data-demo="bi"] .bi-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.85rem; }
.svc-demo[data-demo="bi"] .bi-card-head b { font-family: var(--font-display); font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.svc-demo[data-demo="bi"] .bi-card-sub { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); letter-spacing: 0.02em; }

/* ---- bar chart ---- */
.svc-demo[data-demo="bi"] .bi-chart { position: relative; display: flex; align-items: flex-end; gap: clamp(3px, 1vw, 9px); height: 188px; padding-top: 6px; }
.svc-demo[data-demo="bi"] .bi-bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.35rem; cursor: pointer; }
.svc-demo[data-demo="bi"] .bi-bar .bi-fill { width: 100%; max-width: 28px; height: 0; border-radius: var(--r-sm) var(--r-sm) 3px 3px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--bi-c2))); transition: height 0.62s var(--ease-out), filter var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); transform-origin: bottom; }
.svc-demo[data-demo="bi"] .bi-bar:hover .bi-fill, .svc-demo[data-demo="bi"] .bi-bar:focus-visible .bi-fill { filter: brightness(1.12) saturate(1.1); background: linear-gradient(180deg, var(--bi-c2), var(--accent)); }
.svc-demo[data-demo="bi"] .bi-bar .bi-mlabel { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); letter-spacing: 0.01em; white-space: nowrap; }
.svc-demo[data-demo="bi"] .bi-bar.is-peak .bi-fill { background: linear-gradient(180deg, var(--bi-c2), var(--accent)); box-shadow: 0 0 0 1px var(--accent-soft), 0 8px 18px -10px var(--accent-glow); }

.svc-demo[data-demo="bi"] .bi-tooltip { position: absolute; pointer-events: none; z-index: 3; transform: translate(-50%, -8px); background: var(--ink); color: var(--bg); border-radius: var(--r-sm); padding: 0.3rem 0.55rem; font: 600 0.72rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); box-shadow: var(--shadow); }
.svc-demo[data-demo="bi"] .bi-tooltip.is-on { opacity: 1; }
.svc-demo[data-demo="bi"] .bi-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.svc-demo[data-demo="bi"] .bi-tooltip i { font-style: normal; display: block; font-size: 0.6rem; opacity: 0.7; font-weight: 500; }

/* ---- flavor ranking ---- */
.svc-demo[data-demo="bi"] .bi-rank { display: flex; flex-direction: column; gap: 0.85rem; }
.svc-demo[data-demo="bi"] .bi-rank li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; }
.svc-demo[data-demo="bi"] .bi-rank .bi-emoji { font-size: 1.05rem; line-height: 1; }
.svc-demo[data-demo="bi"] .bi-rank .bi-rrow { min-width: 0; }
.svc-demo[data-demo="bi"] .bi-rank .bi-rname { display: block; font-size: 0.78rem; color: var(--ink); font-weight: 600; margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-demo[data-demo="bi"] .bi-rank .bi-track { height: 7px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.svc-demo[data-demo="bi"] .bi-rank .bi-prog { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--bi-c2)); transition: width 0.7s var(--ease-out); }
.svc-demo[data-demo="bi"] .bi-rank li:nth-child(2) .bi-prog { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, var(--bi-c2)), var(--bi-c2)); }
.svc-demo[data-demo="bi"] .bi-rank li:nth-child(3) .bi-prog { background: linear-gradient(90deg, var(--bi-c2), var(--bi-c3)); }
.svc-demo[data-demo="bi"] .bi-rank li:nth-child(4) .bi-prog { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, var(--muted)), var(--bi-c3)); }
.svc-demo[data-demo="bi"] .bi-rank .bi-pct { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text); font-variant-numeric: tabular-nums; min-width: 2.4ch; text-align: right; }

.svc-demo[data-demo="bi"] [data-bi="kpi-ventas"], .svc-demo[data-demo="bi"] [data-bi="kpi-ticket"], .svc-demo[data-demo="bi"] [data-bi="kpi-unidades"] { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .svc-demo[data-demo="bi"] .bi-panels { grid-template-columns: 1fr; }
  .svc-demo[data-demo="bi"] .bi-chart { height: 150px; }
  .svc-demo[data-demo="bi"] .bi-live { display: none; }
  .svc-demo[data-demo="bi"] .bi-bar:nth-child(even) .bi-mlabel { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-demo[data-demo="bi"] { opacity: 1; }
  .svc-demo[data-demo="bi"] .bi-live i { animation: none; }
  .svc-demo[data-demo="bi"] .bi-bar .bi-fill, .svc-demo[data-demo="bi"] .bi-rank .bi-prog, .svc-demo[data-demo="bi"] .svc-demo-kpi::after { transition: none; }
}

/* ===================== demo: stats ===================== */
.svc-demo[data-demo="stats"] { --s-hist: var(--accent); --s-fc: color-mix(in srgb, var(--accent) 62%, #14b8a6); --s-band: color-mix(in srgb, var(--accent) 24%, transparent); opacity: 0; transform: translateY(10px); }
.svc-demo[data-demo="stats"].is-in { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }

.svc-demo[data-demo="stats"] .stats-slider { display: flex; align-items: center; gap: 0.55rem; margin-left: auto; }
.svc-demo[data-demo="stats"] .stats-slider .label { margin: 0; }
.svc-demo[data-demo="stats"] .stats-range { -webkit-appearance: none; appearance: none; width: clamp(110px, 16vw, 190px); height: 5px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent) var(--pct, 50%), var(--line-strong) var(--pct, 50%)); cursor: pointer; }
.svc-demo[data-demo="stats"] .stats-range::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-shadow: var(--shadow-sm); transition: transform 0.15s var(--ease-out); }
.svc-demo[data-demo="stats"] .stats-range::-webkit-slider-thumb:hover { transform: scale(1.18); }
.svc-demo[data-demo="stats"] .stats-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-shadow: var(--shadow-sm); }
.svc-demo[data-demo="stats"] .stats-hval { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-demo[data-demo="stats"] .stats-hval b { color: var(--ink); }

.svc-demo[data-demo="stats"] .stats-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(0.9rem, 2.2vw, 1.4rem); align-items: stretch; }
@media (max-width: 720px) { .svc-demo[data-demo="stats"] .stats-grid { grid-template-columns: 1fr; } }

.svc-demo[data-demo="stats"] .stats-chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 0.95rem 0.7rem; margin: 0; display: flex; flex-direction: column; }
.svc-demo[data-demo="stats"] .stats-chart__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.5rem; }
.svc-demo[data-demo="stats"] .stats-dot { width: 18px; height: 3px; border-radius: var(--r-pill); display: inline-block; }
.svc-demo[data-demo="stats"] .stats-dot--hist { background: var(--s-hist); }
.svc-demo[data-demo="stats"] .stats-dot--fc { background: var(--s-fc); }
.svc-demo[data-demo="stats"] .stats-dot--band { height: 10px; width: 14px; border-radius: var(--r-sm); background: var(--s-band); }

.svc-demo[data-demo="stats"] .stats-svg { width: 100%; height: clamp(190px, 30vw, 240px); overflow: visible; }
.svc-demo[data-demo="stats"] .stats-grid-lines line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svc-demo[data-demo="stats"] .stats-fill-a { stop-color: var(--accent); stop-opacity: 0.20; }
.svc-demo[data-demo="stats"] .stats-fill-b { stop-color: var(--accent); stop-opacity: 0; }
.svc-demo[data-demo="stats"] .stats-band { fill: var(--s-band); stroke: none; transition: d 0.6s var(--ease-out); }
.svc-demo[data-demo="stats"] .stats-area { stroke: none; transition: d 0.6s var(--ease-out); }
.svc-demo[data-demo="stats"] .stats-line { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: d 0.6s var(--ease-out); }
.svc-demo[data-demo="stats"] .stats-line--hist { stroke: var(--s-hist); }
.svc-demo[data-demo="stats"] .stats-line--fc { stroke: var(--s-fc); stroke-dasharray: 5 5; }
.svc-demo[data-demo="stats"] .stats-pt { fill: var(--surface); stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: cx 0.6s var(--ease-out), cy 0.6s var(--ease-out); }
.svc-demo[data-demo="stats"] .stats-pt--hist { stroke: var(--s-hist); }
.svc-demo[data-demo="stats"] .stats-pt--fc { stroke: var(--s-fc); }
.svc-demo[data-demo="stats"] .stats-pt--goal { fill: var(--s-fc); stroke: var(--surface); }
.svc-demo[data-demo="stats"] .stats-xlabels text { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }

.svc-demo[data-demo="stats"] .stats-side { display: flex; flex-direction: column; gap: 0.7rem; }
.svc-demo[data-demo="stats"] .stats-kpis { grid-template-columns: 1fr 1fr; }
.svc-demo[data-demo="stats"] .stats-kpis .svc-demo-kpi b { font-size: 1.35rem; transition: color 0.2s var(--ease-out); }

.svc-demo[data-demo="stats"] .stats-gauge { position: relative; align-self: center; width: clamp(118px, 30vw, 140px); aspect-ratio: 1; }
.svc-demo[data-demo="stats"] .stats-gauge__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.svc-demo[data-demo="stats"] .stats-gauge__track { fill: none; stroke: var(--line-strong); stroke-width: 9; }
.svc-demo[data-demo="stats"] .stats-gauge__bar { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 314.159; stroke-dashoffset: 314.159; transition: stroke-dashoffset 0.7s var(--ease-out), stroke 0.3s var(--ease-out); }
.svc-demo[data-demo="stats"] .stats-gauge__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 0.1rem; }
.svc-demo[data-demo="stats"] .stats-gauge__center b { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.svc-demo[data-demo="stats"] .stats-gauge__center span { font-size: 0.66rem; color: var(--muted); }
.svc-demo[data-demo="stats"] .stats-note { font-size: 0.72rem; color: var(--muted); text-align: center; }
.svc-demo[data-demo="stats"] .stats-note b { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .svc-demo[data-demo="stats"] { opacity: 1; transform: none; transition: none; }
  .svc-demo[data-demo="stats"] .stats-band,
  .svc-demo[data-demo="stats"] .stats-area,
  .svc-demo[data-demo="stats"] .stats-line,
  .svc-demo[data-demo="stats"] .stats-pt,
  .svc-demo[data-demo="stats"] .stats-gauge__bar { transition: none; }
  .svc-demo[data-demo="stats"] .stats-range::-webkit-slider-thumb { transition: none; }
}

/* ===================== demo: db ===================== */
.svc-demo[data-demo="db"] { display: flex; flex-direction: column; }

.svc-demo[data-demo="db"] .db-bar { row-gap: 0.55rem; }
.svc-demo[data-demo="db"] .db-chipset { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.svc-demo[data-demo="db"] .db-sep { margin-left: 0.6rem; }
.svc-demo[data-demo="db"] .svc-demo-chip { font-size: 0.78rem; padding: 0.42rem 0.78rem; }
.svc-demo[data-demo="db"] .svc-demo-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* search + order row */
.svc-demo[data-demo="db"] .db-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem;
  padding: 0.7rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.svc-demo[data-demo="db"] .db-search {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: 1 1 220px; min-width: 160px;
  padding: 0.5rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.svc-demo[data-demo="db"] .db-search:focus-within {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.svc-demo[data-demo="db"] .db-search svg { flex: 0 0 auto; }
.svc-demo[data-demo="db"] .db-search-input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--ink); font: 500 0.85rem/1 var(--font-body);
}
.svc-demo[data-demo="db"] .db-search-input::placeholder { color: var(--muted); }
.svc-demo[data-demo="db"] .db-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.svc-demo[data-demo="db"] .db-order { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* SQL line */
.svc-demo[data-demo="db"] .db-sqlbar {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.svc-demo[data-demo="db"] .db-sql-dot {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft);
}
.svc-demo[data-demo="db"] .db-sql-dot.is-run { animation: db-pulse 0.6s var(--ease-out); }
@keyframes db-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}
.svc-demo[data-demo="db"] .db-sql {
  flex: 1 1 auto; min-width: 0; font: 500 0.74rem/1.4 var(--font-mono); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-demo[data-demo="db"] .db-sql .kw { color: var(--accent); font-weight: 600; }
.svc-demo[data-demo="db"] .db-sql .val { color: var(--ink); }
.svc-demo[data-demo="db"] .db-count {
  flex: 0 0 auto; font: 500 0.74rem/1 var(--font-mono); color: var(--muted); white-space: nowrap;
}
.svc-demo[data-demo="db"] .db-count b { color: var(--ink); font-weight: 700; }

/* table area */
.svc-demo[data-demo="db"] .db-body { padding: 0; max-height: 358px; display: flex; flex-direction: column; }
.svc-demo[data-demo="db"] .db-tablehead {
  display: grid; grid-template-columns: 2.3fr 1.1fr 1.1fr 0.95fr 0.95fr; gap: 0.5rem;
  padding: 0.6rem 1.1rem; font: 600 0.66rem/1 var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 2;
}
.svc-demo[data-demo="db"] .db-col-num { text-align: right; }
.svc-demo[data-demo="db"] .db-rows { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }
.svc-demo[data-demo="db"] .db-rows::-webkit-scrollbar { width: 8px; }
.svc-demo[data-demo="db"] .db-rows::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }

.svc-demo[data-demo="db"] .db-row {
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background 0.18s var(--ease-out);
}
.svc-demo[data-demo="db"] .db-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.svc-demo[data-demo="db"] .db-row.is-open { background: var(--accent-soft); }
.svc-demo[data-demo="db"] .db-row-main {
  display: grid; grid-template-columns: 2.3fr 1.1fr 1.1fr 0.95fr 0.95fr; gap: 0.5rem;
  align-items: center; width: 100%; text-align: left; padding: 0.62rem 1.1rem;
}
.svc-demo[data-demo="db"] .db-row-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.svc-demo[data-demo="db"] .db-name { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }
.svc-demo[data-demo="db"] .db-emoji {
  width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line);
  font-size: 0.95rem; transition: transform 0.18s var(--ease-out);
}
.svc-demo[data-demo="db"] .db-row:hover .db-emoji { transform: rotate(-8deg) scale(1.12); }
.svc-demo[data-demo="db"] .db-name b {
  font: 600 0.88rem/1.15 var(--font-display); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-demo[data-demo="db"] .db-period { font: 500 0.78rem/1 var(--font-body); color: var(--text); }
.svc-demo[data-demo="db"] .db-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font: 600 0.68rem/1 var(--font-mono); padding: 0.26rem 0.5rem;
  border-radius: var(--r-pill); border: 1px solid var(--line);
}
.svc-demo[data-demo="db"] .db-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.svc-demo[data-demo="db"] .db-tag.diet-Herbívoro { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.svc-demo[data-demo="db"] .db-tag.diet-Carnívoro { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.svc-demo[data-demo="db"] .db-tag.diet-Omnívoro { color: var(--accent); background: var(--accent-soft); }
.svc-demo[data-demo="db"] .db-num {
  text-align: right; font: 600 0.82rem/1 var(--font-mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.svc-demo[data-demo="db"] .db-num small { color: var(--muted); font-weight: 500; font-size: 0.72rem; }

/* expanded detail */
.svc-demo[data-demo="db"] .db-detail {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease-out);
}
.svc-demo[data-demo="db"] .db-row.is-open .db-detail { grid-template-rows: 1fr; }
.svc-demo[data-demo="db"] .db-detail-inner { overflow: hidden; min-height: 0; }
.svc-demo[data-demo="db"] .db-detail-pad {
  padding: 0.2rem 1.1rem 1rem calc(1.1rem + 24px + 0.55rem);
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: flex-start;
}
.svc-demo[data-demo="db"] .db-fact {
  flex: 1 1 240px; font: 400 0.82rem/1.5 var(--font-body); color: var(--text);
}
.svc-demo[data-demo="db"] .db-fact b { color: var(--accent); font: 600 0.68rem/1 var(--font-mono); display: block; margin-bottom: 0.3rem; letter-spacing: 0.04em; }
.svc-demo[data-demo="db"] .db-meta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.svc-demo[data-demo="db"] .db-pill {
  font: 600 0.66rem/1 var(--font-mono); color: var(--muted);
  padding: 0.34rem 0.6rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.svc-demo[data-demo="db"] .db-pill strong { color: var(--ink); }

/* bar visual inside numeric for length */
.svc-demo[data-demo="db"] .db-bar-track {
  margin-top: 0.32rem; height: 3px; border-radius: var(--r-pill);
  background: var(--line); overflow: hidden;
}
.svc-demo[data-demo="db"] .db-bar-fill {
  display: block; height: 100%; width: 0%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, var(--surface-2)));
  transition: width 0.5s var(--ease-out);
}

.svc-demo[data-demo="db"] .db-empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; justify-content: center;
  padding: 2.4rem 1rem; color: var(--muted); text-align: center; flex: 1 1 auto;
}
.svc-demo[data-demo="db"] .db-empty p { font: 500 0.85rem/1.4 var(--font-body); }

/* enter animation */
.svc-demo[data-demo="db"] .db-row { will-change: transform, opacity; }
.svc-demo[data-demo="db"].is-ready .db-bar,
.svc-demo[data-demo="db"].is-ready .db-tools,
.svc-demo[data-demo="db"].is-ready .db-sqlbar { animation: db-slidein 0.45s var(--ease-out) both; }
.svc-demo[data-demo="db"].is-ready .db-tools { animation-delay: 0.06s; }
.svc-demo[data-demo="db"].is-ready .db-sqlbar { animation-delay: 0.12s; }
@keyframes db-slidein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .svc-demo[data-demo="db"] .db-tablehead,
  .svc-demo[data-demo="db"] .db-row-main { grid-template-columns: 1.6fr 0.9fr 0.95fr; }
  .svc-demo[data-demo="db"] .db-col-num:last-child,
  .svc-demo[data-demo="db"] .db-num.db-weight { display: none; }
  .svc-demo[data-demo="db"] .db-detail-pad { padding-left: 1.1rem; }
  .svc-demo[data-demo="db"] .db-body { max-height: 280px; }
  .svc-demo[data-demo="db"] .db-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-demo[data-demo="db"] .db-bar,
  .svc-demo[data-demo="db"] .db-tools,
  .svc-demo[data-demo="db"] .db-sqlbar,
  .svc-demo[data-demo="db"] .db-row { animation: none !important; }
  .svc-demo[data-demo="db"] .db-sql-dot.is-run { animation: none; }
  .svc-demo[data-demo="db"] .db-detail { transition: none; }
  .svc-demo[data-demo="db"] .db-bar-fill { transition: none; }
  .svc-demo[data-demo="db"] .db-row:hover .db-emoji { transform: none; }
}

/* ===================== demo: software ===================== */
.svc-demo[data-demo="software"] { --sw-todo: var(--accent); --sw-doing: color-mix(in srgb, var(--accent) 55%, #d98a00); --sw-done: var(--ok); }

.svc-demo[data-demo="software"] .sw-spacer { flex: 1 1 auto; }
.svc-demo[data-demo="software"] .sw-clock { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.3rem 0.7rem; white-space: nowrap; }

.svc-demo[data-demo="software"] .sw-body { display: flex; flex-direction: column; gap: clamp(0.85rem, 2vw, 1.2rem); }

/* KPIs */
.svc-demo[data-demo="software"] .sw-kpis { grid-template-columns: repeat(3, 1fr); }
.svc-demo[data-demo="software"] .svc-demo-kpi b { font-variant-numeric: tabular-nums; transition: color .2s var(--ease-out); }
/* Stack number / label / delta so the secondary stat doesn't run into the label. */
.svc-demo[data-demo="software"] .svc-demo-kpi span { display: block; margin-top: 0.2rem; }
.svc-demo[data-demo="software"] .svc-demo-kpi em[data-kpi="done-delta"],
.svc-demo[data-demo="software"] .svc-demo-kpi em[data-kpi="low-tag"] { display: block; margin-top: 0.25rem; }
.svc-demo[data-demo="software"] .svc-demo-kpi em[data-kpi="bar"] { display: block; margin-top: 0.5rem; height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.svc-demo[data-demo="software"] .svc-demo-kpi em[data-kpi="bar"] i { display: block; height: 100%; width: 0%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--sw-todo), var(--sw-done)); transition: width .5s var(--ease-out); }
.svc-demo[data-demo="software"] .svc-demo-kpi em[data-kpi="low-tag"].is-alert { color: var(--err); font-weight: 600; }

/* Panes */
.svc-demo[data-demo="software"] .sw-pane { display: none; }
.svc-demo[data-demo="software"] .sw-pane.is-active { display: block; animation: sw-pane-in .34s var(--ease-out) both; }
@keyframes sw-pane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Add form */
.svc-demo[data-demo="software"] .sw-add { display: flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0.3rem 0.4rem 0.3rem 0.85rem; margin-bottom: clamp(0.8rem, 2vw, 1.1rem); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.svc-demo[data-demo="software"] .sw-add:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.svc-demo[data-demo="software"] .sw-add-ico { color: var(--muted); display: grid; place-items: center; flex: 0 0 auto; }
.svc-demo[data-demo="software"] .sw-add-input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--ink); font: 500 0.9rem/1.2 var(--font-body); padding: 0.45rem 0; }
.svc-demo[data-demo="software"] .sw-add-input::placeholder { color: var(--muted); }
.svc-demo[data-demo="software"] .sw-add-btn { flex: 0 0 auto; font: 600 0.82rem/1 var(--font-body); color: var(--accent-ink); background: var(--accent); border-radius: var(--r-pill); padding: 0.55rem 1.05rem; transition: background .18s var(--ease-out), transform .12s var(--ease-out); }
.svc-demo[data-demo="software"] .sw-add-btn:hover { background: var(--accent-press); }
.svc-demo[data-demo="software"] .sw-add-btn:active { transform: scale(0.96); }

/* Board */
.svc-demo[data-demo="software"] .sw-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; align-items: start; }
.svc-demo[data-demo="software"] .sw-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 0.7rem; min-height: 132px; }
.svc-demo[data-demo="software"] .sw-col-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.65rem; }
.svc-demo[data-demo="software"] .sw-col-head h4 { font: 600 0.82rem/1 var(--font-display); color: var(--ink); flex: 1 1 auto; }
.svc-demo[data-demo="software"] .sw-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.svc-demo[data-demo="software"] .sw-dot--todo { background: var(--sw-todo); }
.svc-demo[data-demo="software"] .sw-dot--doing { background: var(--sw-doing); }
.svc-demo[data-demo="software"] .sw-dot--done { background: var(--sw-done); }
.svc-demo[data-demo="software"] .sw-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.72rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); min-width: 22px; text-align: center; padding: 0.12rem 0.35rem; transition: transform .25s var(--ease-out), color .25s var(--ease-out); }
.svc-demo[data-demo="software"] .sw-count.is-bump { transform: scale(1.28); color: var(--accent); }
.svc-demo[data-demo="software"] .sw-stack { display: flex; flex-direction: column; gap: 0.5rem; min-height: 28px; }

/* Cards */
.svc-demo[data-demo="software"] .sw-card { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.6rem 0.65rem; color: var(--text); box-shadow: var(--shadow-sm); transition: transform .14s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.svc-demo[data-demo="software"] .sw-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.svc-demo[data-demo="software"] .sw-card:active { transform: translateY(0) scale(0.98); }
.svc-demo[data-demo="software"] .sw-card-emoji { font-size: 1.05rem; flex: 0 0 auto; line-height: 1; filter: saturate(1.05); }
.svc-demo[data-demo="software"] .sw-card-txt { flex: 1 1 auto; min-width: 0; font: 600 0.82rem/1.25 var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.svc-demo[data-demo="software"] .sw-card-arrow { flex: 0 0 auto; color: var(--muted); opacity: 0; transform: translateX(-3px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.svc-demo[data-demo="software"] .sw-card:hover .sw-card-arrow { opacity: 1; transform: none; }
.svc-demo[data-demo="software"] .sw-card[data-state="2"] .sw-card-txt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.svc-demo[data-demo="software"] .sw-card[data-state="2"] { background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.svc-demo[data-demo="software"] .sw-card.is-enter { animation: sw-card-pop .32s var(--ease-out) both; }
@keyframes sw-card-pop { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Inventory */
.svc-demo[data-demo="software"] .sw-inv { display: flex; flex-direction: column; gap: 0.5rem; }
.svc-demo[data-demo="software"] .sw-inv-row { display: flex; align-items: center; gap: 0.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.6rem 0.75rem; transition: border-color .2s var(--ease-out); }
.svc-demo[data-demo="software"] .sw-inv-row.is-low { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
.svc-demo[data-demo="software"] .sw-inv-emoji { font-size: 1.2rem; flex: 0 0 auto; line-height: 1; }
.svc-demo[data-demo="software"] .sw-inv-main { flex: 1 1 auto; min-width: 0; }
.svc-demo[data-demo="software"] .sw-inv-name { font: 600 0.86rem/1.2 var(--font-body); color: var(--ink); display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.svc-demo[data-demo="software"] .sw-badge { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); border-radius: var(--r-pill); padding: 0.12rem 0.45rem; opacity: 0; transform: scale(0.8); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); pointer-events: none; }
.svc-demo[data-demo="software"] .sw-inv-row.is-low .sw-badge { opacity: 1; transform: none; pointer-events: auto; }
.svc-demo[data-demo="software"] .sw-inv-sku { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.svc-demo[data-demo="software"] .sw-stepper { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.svc-demo[data-demo="software"] .sw-step { width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font: 700 1rem/1 var(--font-mono); display: grid; place-items: center; transition: background .15s var(--ease-out), border-color .15s var(--ease-out), transform .1s var(--ease-out); }
.svc-demo[data-demo="software"] .sw-step:hover { border-color: var(--accent); color: var(--accent); }
.svc-demo[data-demo="software"] .sw-step:active { transform: scale(0.9); }
.svc-demo[data-demo="software"] .sw-step:disabled { opacity: 0.4; cursor: not-allowed; }
.svc-demo[data-demo="software"] .sw-stock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 700; color: var(--ink); min-width: 34px; text-align: center; transition: color .2s var(--ease-out), transform .2s var(--ease-out); }
.svc-demo[data-demo="software"] .sw-stock.is-flash { color: var(--accent); transform: scale(1.18); }
.svc-demo[data-demo="software"] .sw-inv-row.is-low .sw-stock { color: var(--err); }

.svc-demo[data-demo="software"] .sw-hint { margin-top: 0.7rem; font-size: 0.72rem; color: var(--muted); }
.svc-demo[data-demo="software"] .sw-hint b { color: var(--err); }

@media (max-width: 640px) {
  .svc-demo[data-demo="software"] .sw-kpis { grid-template-columns: 1fr; }
  .svc-demo[data-demo="software"] .sw-board { grid-template-columns: 1fr; }
  .svc-demo[data-demo="software"] .sw-clock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-demo[data-demo="software"] .sw-pane.is-active,
  .svc-demo[data-demo="software"] .sw-card.is-enter { animation: none; }
  .svc-demo[data-demo="software"] .svc-demo-kpi b,
  .svc-demo[data-demo="software"] .svc-demo-kpi em[data-kpi="bar"] i,
  .svc-demo[data-demo="software"] .sw-card,
  .svc-demo[data-demo="software"] .sw-count,
  .svc-demo[data-demo="software"] .sw-stock,
  .svc-demo[data-demo="software"] .sw-step,
  .svc-demo[data-demo="software"] .sw-badge { transition: none; }
}

/* ===================== demo: ai ===================== */
.svc-demo[data-demo="ai"] { --ai-c1: var(--accent); --ai-c2: color-mix(in srgb, var(--accent) 62%, #14C9A6); --ai-c3: color-mix(in srgb, var(--accent) 55%, #B36BFF); }
.svc-demo[data-demo="ai"] .svc-demo-bar { gap: 0.6rem; }
.svc-demo[data-demo="ai"] .ai-status { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--muted); }
.svc-demo[data-demo="ai"] .ai-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: ai-pulse 2.4s var(--ease-out) infinite; }
.svc-demo[data-demo="ai"] .ai-reset { margin-left: auto; font: 600 0.72rem/1 var(--font-body); color: var(--muted); padding: 0.4rem 0.7rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.svc-demo[data-demo="ai"] .ai-reset:hover { color: var(--ink); border-color: var(--accent); }
.svc-demo[data-demo="ai"] .ai-reset:active { transform: scale(0.96); }

.svc-demo[data-demo="ai"] .svc-demo-body { padding: clamp(0.85rem, 2vw, 1.15rem); }
.svc-demo[data-demo="ai"] .ai-shell { display: flex; flex-direction: column; gap: 0.75rem; opacity: 0; transform: translateY(10px); }
.svc-demo[data-demo="ai"] .ai-shell.is-in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }

.svc-demo[data-demo="ai"] .ai-thread { height: clamp(300px, 42vh, 360px); overflow-y: auto; padding: 0.4rem 0.55rem 0.2rem; display: flex; flex-direction: column; gap: 0.85rem; scroll-behavior: smooth; }
.svc-demo[data-demo="ai"] .ai-thread::-webkit-scrollbar { width: 8px; }
.svc-demo[data-demo="ai"] .ai-thread::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }

.svc-demo[data-demo="ai"] .ai-row { display: flex; gap: 0.55rem; max-width: 92%; }
.svc-demo[data-demo="ai"] .ai-row--bot { align-self: flex-start; }
.svc-demo[data-demo="ai"] .ai-row--user { align-self: flex-end; flex-direction: row-reverse; }
.svc-demo[data-demo="ai"] .ai-ava { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); background: linear-gradient(135deg, var(--ai-c1), var(--ai-c3)); box-shadow: 0 4px 12px -4px var(--accent-glow); }

.svc-demo[data-demo="ai"] .ai-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r) var(--r) var(--r) var(--r-sm); padding: 0.7rem 0.85rem; box-shadow: var(--shadow-sm); }
.svc-demo[data-demo="ai"] .ai-row--user .ai-bubble { background: var(--accent); color: var(--accent-ink); border-color: transparent; border-radius: var(--r) var(--r) var(--r-sm) var(--r); }
.svc-demo[data-demo="ai"] .ai-bubble p { font-size: 0.9rem; line-height: 1.5; }
.svc-demo[data-demo="ai"] .ai-bubble p + p { margin-top: 0.5rem; }
.svc-demo[data-demo="ai"] .ai-bubble b { color: var(--ink); font-weight: 700; }
.svc-demo[data-demo="ai"] .ai-row--user .ai-bubble b { color: var(--accent-ink); }
.svc-demo[data-demo="ai"] .ai-bubble .ai-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.svc-demo[data-demo="ai"] .ai-row--user .ai-bubble .ai-num { color: var(--accent-ink); }

/* enter animation per message */
.svc-demo[data-demo="ai"] .ai-row.ai-enter { opacity: 0; transform: translateY(8px) scale(0.99); }
.svc-demo[data-demo="ai"] .ai-row.ai-enter.ai-shown { opacity: 1; transform: none; transition: opacity 0.34s var(--ease-out), transform 0.34s var(--ease-out); }

/* typing dots */
.svc-demo[data-demo="ai"] .ai-typing { display: inline-flex; gap: 5px; padding: 0.55rem 0.2rem; }
.svc-demo[data-demo="ai"] .ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: 0.45; animation: ai-bounce 1.1s var(--ease-out) infinite; }
.svc-demo[data-demo="ai"] .ai-typing i:nth-child(2) { animation-delay: 0.16s; }
.svc-demo[data-demo="ai"] .ai-typing i:nth-child(3) { animation-delay: 0.32s; }

/* inline mini table */
.svc-demo[data-demo="ai"] .ai-table { margin-top: 0.6rem; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.svc-demo[data-demo="ai"] .ai-trow { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0.6rem; font-size: 0.82rem; }
.svc-demo[data-demo="ai"] .ai-trow + .ai-trow { border-top: 1px solid var(--line); }
.svc-demo[data-demo="ai"] .ai-trow span:first-child { color: var(--text); }
.svc-demo[data-demo="ai"] .ai-trow .ai-tv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* inline bar chart */
.svc-demo[data-demo="ai"] .ai-bars { margin-top: 0.65rem; display: flex; flex-direction: column; gap: 0.4rem; }
.svc-demo[data-demo="ai"] .ai-barrow { display: grid; grid-template-columns: 36px 1fr auto; gap: 0.55rem; align-items: center; font-size: 0.78rem; }
.svc-demo[data-demo="ai"] .ai-barrow .ai-bl { color: var(--muted); font-family: var(--font-mono); }
.svc-demo[data-demo="ai"] .ai-track { height: 9px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.svc-demo[data-demo="ai"] .ai-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--ai-c1), var(--ai-c2)); transition: width 0.7s var(--ease-out); }
.svc-demo[data-demo="ai"] .ai-barrow.is-top .ai-fill { background: linear-gradient(90deg, var(--ai-c1), var(--ai-c3)); }
.svc-demo[data-demo="ai"] .ai-barrow .ai-bv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; min-width: 3.4em; text-align: right; }

.svc-demo[data-demo="ai"] .ai-suggest { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.svc-demo[data-demo="ai"] .ai-suggest .svc-demo-chip { font-size: 0.78rem; padding: 0.42rem 0.75rem; }
.svc-demo[data-demo="ai"] .ai-suggest .svc-demo-chip:active { transform: scale(0.97); }

.svc-demo[data-demo="ai"] .ai-input { display: flex; gap: 0.5rem; align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0.3rem 0.3rem 0.3rem 0.95rem; transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.svc-demo[data-demo="ai"] .ai-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.svc-demo[data-demo="ai"] .ai-input input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; font-size: 0.9rem; color: var(--ink); outline: none; padding: 0.45rem 0; }
.svc-demo[data-demo="ai"] .ai-input input::placeholder { color: var(--muted); }
.svc-demo[data-demo="ai"] .ai-send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.svc-demo[data-demo="ai"] .ai-send:hover { background: var(--accent-press); }
.svc-demo[data-demo="ai"] .ai-send:active { transform: scale(0.92); }

@keyframes ai-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ai-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 0.95; } }

@media (max-width: 720px) {
  .svc-demo[data-demo="ai"] .ai-row { max-width: 96%; }
  .svc-demo[data-demo="ai"] .ai-thread { height: clamp(240px, 50vh, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-demo[data-demo="ai"] .ai-shell, .svc-demo[data-demo="ai"] .ai-shell.is-in { opacity: 1; transform: none; transition: none; }
  .svc-demo[data-demo="ai"] .ai-row.ai-enter, .svc-demo[data-demo="ai"] .ai-row.ai-enter.ai-shown { opacity: 1; transform: none; transition: none; }
  .svc-demo[data-demo="ai"] .ai-status i { animation: none; }
  .svc-demo[data-demo="ai"] .ai-typing i { animation: none; opacity: 0.6; }
  .svc-demo[data-demo="ai"] .ai-fill { transition: none; }
  .svc-demo[data-demo="ai"] .ai-thread { scroll-behavior: auto; }
}

/* ===================== demo: api ===================== */
.svc-demo[data-demo="api"] .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; display: inline-block; margin-right: 0.5rem; opacity: 0.55; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); vertical-align: middle; }
.svc-demo[data-demo="api"] .svc-demo-chip.is-active .dot { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ink) 22%, transparent); }

.svc-demo[data-demo="api"] .api-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(0.8rem, 2vw, 1.25rem); align-items: stretch; }

.svc-demo[data-demo="api"] .api-stage { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.6rem 0.6rem 0.2rem; overflow: hidden; }
.svc-demo[data-demo="api"] .api-stage::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%);
  pointer-events: none; }
.svc-demo[data-demo="api"] .api-stage-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.5rem 0; }
.svc-demo[data-demo="api"] .api-live { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.svc-demo[data-demo="api"] .api-live-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: api-pulse 2.2s var(--ease-out) infinite; }
.svc-demo[data-demo="api"] .api-stage-sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.svc-demo[data-demo="api"] .api-graph { width: 100%; height: auto; display: block; }

.svc-demo[data-demo="api"] .api-link { stroke: var(--line-strong); stroke-width: 1.4; fill: none; transition: stroke 0.35s var(--ease-out), stroke-opacity 0.35s var(--ease-out), stroke-width 0.35s var(--ease-out); stroke-linecap: round; }
.svc-demo[data-demo="api"] .api-link.is-on { stroke: color-mix(in srgb, var(--accent) 62%, var(--line-strong)); stroke-opacity: 0.9; stroke-width: 1.8; }
.svc-demo[data-demo="api"] .api-link.is-off { stroke-opacity: 0.28; stroke-dasharray: 3 5; }

.svc-demo[data-demo="api"] .api-packet { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }

.svc-demo[data-demo="api"] .api-node-hit { fill: transparent; cursor: pointer; }
.svc-demo[data-demo="api"] .api-node-disc { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.4; transition: stroke 0.3s var(--ease-out), fill 0.3s var(--ease-out), transform 0.3s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.svc-demo[data-demo="api"] .api-node.is-on .api-node-disc { stroke: var(--accent); fill: var(--accent-soft); }
.svc-demo[data-demo="api"] .api-node.is-off { opacity: 0.45; }
.svc-demo[data-demo="api"] .api-node:hover .api-node-disc { stroke: var(--accent); }
.svc-demo[data-demo="api"] .api-node-glyph { fill: var(--muted); transition: fill 0.3s var(--ease-out); }
.svc-demo[data-demo="api"] .api-node.is-on .api-node-glyph { fill: var(--accent); }
.svc-demo[data-demo="api"] .api-node-name { fill: var(--text); font-family: var(--font-body); font-size: 11px; font-weight: 600; text-anchor: middle; }
.svc-demo[data-demo="api"] .api-node.is-off .api-node-name { fill: var(--muted); }
.svc-demo[data-demo="api"] .api-node-ping { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

.svc-demo[data-demo="api"] .api-hub-aura { animation: api-aura 3.6s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
.svc-demo[data-demo="api"] .api-hub-core { fill: var(--accent); }
.svc-demo[data-demo="api"] .api-hub-ring { fill: none; stroke: var(--accent-ink); stroke-opacity: 0.35; stroke-width: 1.4; }
.svc-demo[data-demo="api"] .api-hub-label { fill: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-anchor: middle; }
.svc-demo[data-demo="api"] .api-hub-tag { fill: var(--accent-ink); fill-opacity: 0.7; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.18em; text-anchor: middle; }

.svc-demo[data-demo="api"] .api-side { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.svc-demo[data-demo="api"] .api-kpis { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.svc-demo[data-demo="api"] .api-kpis .svc-demo-kpi b { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.svc-demo[data-demo="api"] .api-kpis em { display: inline-block; margin-top: 0.2rem; }

.svc-demo[data-demo="api"] .api-log { flex: 1 1 auto; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; }
.svc-demo[data-demo="api"] .api-log-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.74rem; font-weight: 600; color: var(--ink); margin-bottom: 0.55rem; }
.svc-demo[data-demo="api"] .api-log-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--muted); padding: 0.18rem 0.45rem; border: 1px solid var(--line); border-radius: var(--r-pill); }
.svc-demo[data-demo="api"] .api-log-list { display: flex; flex-direction: column; gap: 0.38rem; overflow: hidden; max-height: 178px; }
.svc-demo[data-demo="api"] .api-log-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.74rem; color: var(--text); padding: 0.4rem 0.5rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.svc-demo[data-demo="api"] .api-log-item .pip { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--accent); flex: 0 0 auto; }
.svc-demo[data-demo="api"] .api-log-item .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-demo[data-demo="api"] .api-log-item .txt b { color: var(--ink); font-weight: 600; }
.svc-demo[data-demo="api"] .api-log-item .ts { font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-demo[data-demo="api"] .api-log-item.is-new { animation: api-logIn 0.42s var(--ease-out) both; }

.svc-demo[data-demo="api"] .api-intro { opacity: 0; transform: translateY(10px); }
.svc-demo[data-demo="api"] .api-intro.is-ready { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }

@keyframes api-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes api-aura { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 0.95; transform: scale(1.08); } }
@keyframes api-logIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .svc-demo[data-demo="api"] .api-grid { grid-template-columns: 1fr; }
  .svc-demo[data-demo="api"] .api-log-list { max-height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-demo[data-demo="api"] .api-live-dot,
  .svc-demo[data-demo="api"] .api-hub-aura { animation: none; }
  .svc-demo[data-demo="api"] .api-log-item.is-new { animation: none; }
  .svc-demo[data-demo="api"] .api-intro.is-ready { transition: none; }
}

/* ===================== demo: web ===================== */
.svc-demo[data-demo="web"] { --web-c1: var(--accent); --web-c2: color-mix(in srgb, var(--accent) 62%, #16C2A3); --web-c3: color-mix(in srgb, var(--accent) 55%, #FF8A3D); }

.svc-demo[data-demo="web"] .web-live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--muted); }
.svc-demo[data-demo="web"] .web-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--web-c2); box-shadow: 0 0 0 0 color-mix(in srgb, var(--web-c2) 60%, transparent); animation: web-pulse 1.8s var(--ease-out) infinite; }
@keyframes web-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--web-c2) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.svc-demo[data-demo="web"] .web-promo { gap: 0.5rem; }
.svc-demo[data-demo="web"] .web-promo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--web-c3); transition: transform 0.2s var(--ease-out); }
.svc-demo[data-demo="web"] .web-promo.is-active .web-promo-dot { background: var(--accent-ink); transform: scale(1.25); }

.svc-demo[data-demo="web"] .web-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 1rem; align-items: start; }
.svc-demo[data-demo="web"] .web-shop { min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }

.svc-demo[data-demo="web"] .web-kpis { grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.svc-demo[data-demo="web"] .web-kpis .svc-demo-kpi { padding: 0.7rem 0.8rem; transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.svc-demo[data-demo="web"] .web-kpis .svc-demo-kpi b { font-size: 1.3rem; transition: color 0.25s var(--ease-out); }
.svc-demo[data-demo="web"] .web-kpis .svc-demo-kpi.is-bump { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft); }
.svc-demo[data-demo="web"] .web-kpis em { transition: opacity 0.3s ease, transform 0.3s var(--ease-out); }
.svc-demo[data-demo="web"] .web-kpis em.is-flash { opacity: 1; }

.svc-demo[data-demo="web"] .web-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.svc-demo[data-demo="web"] .web-card { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: transform 0.22s var(--ease-out), border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out); }
.svc-demo[data-demo="web"] .web-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--shadow); }
.svc-demo[data-demo="web"] .web-card-art { font-size: 1.9rem; line-height: 1; display: grid; place-items: center; height: 46px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent-soft) 70%, transparent); transition: transform 0.25s var(--ease-out); }
.svc-demo[data-demo="web"] .web-card:hover .web-card-art { transform: scale(1.08) rotate(-4deg); }
.svc-demo[data-demo="web"] .web-card-name { font-weight: 600; font-size: 0.82rem; color: var(--ink); line-height: 1.2; }
.svc-demo[data-demo="web"] .web-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-top: auto; }
.svc-demo[data-demo="web"] .web-price { font-variant-numeric: tabular-nums; }
.svc-demo[data-demo="web"] .web-price b { font-family: var(--font-display); font-size: 0.96rem; color: var(--ink); }
.svc-demo[data-demo="web"] .web-price s { display: block; font-size: 0.66rem; color: var(--muted); }
.svc-demo[data-demo="web"] .web-add { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--r-pill); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-size: 1.05rem; font-weight: 700; cursor: pointer; line-height: 1; transition: transform 0.16s var(--ease-out), background 0.16s ease; }
.svc-demo[data-demo="web"] .web-add:hover { background: var(--accent-press); transform: scale(1.1); }
.svc-demo[data-demo="web"] .web-add:active { transform: scale(0.92); }
.svc-demo[data-demo="web"] .web-add.is-pop { animation: web-pop 0.36s var(--ease-out); }
@keyframes web-pop { 0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }

.svc-demo[data-demo="web"] .web-fly { position: fixed; z-index: 60; pointer-events: none; font-size: 1.4rem; line-height: 1; will-change: transform, opacity; }

.svc-demo[data-demo="web"] .web-cart { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.svc-demo[data-demo="web"] .web-cart-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--line); }
.svc-demo[data-demo="web"] .web-cart-ico { color: var(--accent); display: inline-flex; }
.svc-demo[data-demo="web"] .web-cart-title { font-weight: 600; font-size: 0.86rem; color: var(--ink); }
.svc-demo[data-demo="web"] .web-cart-count { margin-left: auto; min-width: 24px; height: 24px; padding: 0 0.45rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: transform 0.22s var(--ease-out); }
.svc-demo[data-demo="web"] .web-cart-count.is-bump { transform: scale(1.28); }

.svc-demo[data-demo="web"] .web-cart-items { flex: 1; min-height: 132px; max-height: 232px; overflow-y: auto; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.svc-demo[data-demo="web"] .web-cart-empty { margin: auto; text-align: center; font-size: 0.8rem; color: var(--text); }
.svc-demo[data-demo="web"] .web-cart-empty span { font-size: 0.72rem; color: var(--muted); }

.svc-demo[data-demo="web"] .web-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; padding: 0.45rem 0.5rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.svc-demo[data-demo="web"] .web-line.is-enter { animation: web-line-in 0.34s var(--ease-out); }
@keyframes web-line-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.svc-demo[data-demo="web"] .web-line-art { font-size: 1.1rem; line-height: 1; }
.svc-demo[data-demo="web"] .web-line-mid { min-width: 0; }
.svc-demo[data-demo="web"] .web-line-name { font-size: 0.76rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-demo[data-demo="web"] .web-line-sub { font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-demo[data-demo="web"] .web-qty { display: inline-flex; align-items: center; gap: 0.18rem; }
.svc-demo[data-demo="web"] .web-qty button { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 0.9rem; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s var(--ease-out); }
.svc-demo[data-demo="web"] .web-qty button:hover { border-color: var(--accent); color: var(--accent); }
.svc-demo[data-demo="web"] .web-qty button:active { transform: scale(0.88); }
.svc-demo[data-demo="web"] .web-qty b { min-width: 18px; text-align: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.svc-demo[data-demo="web"] .web-cart-foot { border-top: 1px solid var(--line); padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.35rem; }
.svc-demo[data-demo="web"] .web-cart-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.78rem; color: var(--muted); }
.svc-demo[data-demo="web"] .web-cart-row b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.svc-demo[data-demo="web"] .web-cart-row--save b { color: var(--web-c3); }
.svc-demo[data-demo="web"] .web-cart-row--total { margin-top: 0.15rem; padding-top: 0.4rem; border-top: 1px dashed var(--line); }
.svc-demo[data-demo="web"] .web-cart-row--total span { color: var(--ink); font-size: 0.82rem; font-weight: 600; }
.svc-demo[data-demo="web"] .web-cart-row--total b { color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; }

.svc-demo[data-demo="web"] .web-checkout { position: relative; margin-top: 0.45rem; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: 600 0.88rem/1 var(--font-body); cursor: pointer; overflow: hidden; transition: background 0.18s ease, transform 0.16s var(--ease-out), opacity 0.18s ease, border-color 0.18s ease; }
.svc-demo[data-demo="web"] .web-checkout:hover:not(:disabled) { background: var(--accent-press); }
.svc-demo[data-demo="web"] .web-checkout:active:not(:disabled) { transform: scale(0.98); }
.svc-demo[data-demo="web"] .web-checkout:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.svc-demo[data-demo="web"] .web-checkout-label, .svc-demo[data-demo="web"] .web-checkout-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease, transform 0.3s var(--ease-out); }
.svc-demo[data-demo="web"] .web-checkout-check { opacity: 0; transform: scale(0.6); }
.svc-demo[data-demo="web"] .web-checkout.is-done .web-checkout-label { opacity: 0; transform: scale(0.8); }
.svc-demo[data-demo="web"] .web-checkout.is-done .web-checkout-check { opacity: 1; transform: scale(1); }
.svc-demo[data-demo="web"] .web-check-path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.svc-demo[data-demo="web"] .web-checkout.is-done .web-check-path { animation: web-draw 0.4s var(--ease-out) 0.05s forwards; }
@keyframes web-draw { to { stroke-dashoffset: 0; } }

.svc-demo[data-demo="web"] .web-success { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 1rem; text-align: center; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(3px); }
.svc-demo[data-demo="web"] .web-success[hidden] { display: none; }
.svc-demo[data-demo="web"] .web-success.is-in { animation: web-fade 0.3s var(--ease-out); }
@keyframes web-fade { from { opacity: 0; } to { opacity: 1; } }
.svc-demo[data-demo="web"] .web-success-check { position: relative; color: var(--web-c2); display: inline-flex; }
.svc-demo[data-demo="web"] .web-succ-ring { stroke-dasharray: 64; stroke-dashoffset: 64; }
.svc-demo[data-demo="web"] .web-succ-path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.svc-demo[data-demo="web"] .web-success.is-in .web-succ-ring { animation: web-draw 0.5s var(--ease-out) forwards; }
.svc-demo[data-demo="web"] .web-success.is-in .web-succ-path { animation: web-draw 0.4s var(--ease-out) 0.4s forwards; }
.svc-demo[data-demo="web"] .web-success-burst { position: absolute; top: 38%; left: 50%; width: 4px; height: 4px; }
.svc-demo[data-demo="web"] .web-success-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); margin-top: 0.2rem; }
.svc-demo[data-demo="web"] .web-success-sub { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-demo[data-demo="web"] .web-success-again { margin-top: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 600 0.8rem/1 var(--font-body); cursor: pointer; transition: background 0.16s ease, color 0.16s ease; }
.svc-demo[data-demo="web"] .web-success-again:hover { background: var(--accent); color: var(--accent-ink); }

.svc-demo[data-demo="web"] .web-confetti { position: absolute; top: 0; left: 0; width: 7px; height: 9px; border-radius: 2px; pointer-events: none; z-index: 5; will-change: transform, opacity; }

.svc-demo[data-demo="web"] .web-intro { opacity: 0; transform: translateY(8px); }
.svc-demo[data-demo="web"] .web-intro.is-in { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }

@media (max-width: 720px) {
  .svc-demo[data-demo="web"] .web-grid { grid-template-columns: 1fr; }
  .svc-demo[data-demo="web"] .web-products { grid-template-columns: repeat(2, 1fr); }
  .svc-demo[data-demo="web"] .web-cart-items { max-height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-demo[data-demo="web"] .web-live i { animation: none; }
  .svc-demo[data-demo="web"] .web-add.is-pop { animation: none; }
  .svc-demo[data-demo="web"] .web-line.is-enter { animation: none; }
  .svc-demo[data-demo="web"] .web-card:hover { transform: none; }
  .svc-demo[data-demo="web"] .web-card:hover .web-card-art { transform: none; }
  .svc-demo[data-demo="web"] .web-check-path, .svc-demo[data-demo="web"] .web-succ-ring, .svc-demo[data-demo="web"] .web-succ-path { animation: none !important; stroke-dashoffset: 0; }
  .svc-demo[data-demo="web"] .web-success.is-in { animation: none; }
  .svc-demo[data-demo="web"] .web-intro, .svc-demo[data-demo="web"] .web-intro.is-in { transition: none; transform: none; opacity: 1; }
}

/* ===================== demo: training ===================== */
.svc-demo[data-demo="training"] { display: flex; flex-direction: column; }

.svc-demo[data-demo="training"] .tr-bar { align-items: center; }
.svc-demo[data-demo="training"] .tr-title { font: 600 0.86rem/1.2 var(--font-display); color: var(--ink); }
.svc-demo[data-demo="training"] .tr-spacer { flex: 1 1 auto; }
.svc-demo[data-demo="training"] .tr-counter { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Barra de progreso ---- */
.svc-demo[data-demo="training"] .tr-progress { position: relative; height: 5px; background: var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; }
.svc-demo[data-demo="training"] .tr-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 0 var(--r-pill) var(--r-pill) 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, #7ea2ff), var(--accent)); box-shadow: 0 0 14px var(--accent-glow); transition: width 0.6s var(--ease-out); }

/* ---- Cuerpo / escenarios ---- */
.svc-demo[data-demo="training"] .tr-body { position: relative; min-height: 408px; display: flex; }
.svc-demo[data-demo="training"] .tr-stage { width: 100%; }
.svc-demo[data-demo="training"] .tr-stage[hidden] { display: none; }

/* ---- Aparicion inicial ---- */
.svc-demo[data-demo="training"] .tr-enter { opacity: 0; transform: translateY(10px); }
.svc-demo[data-demo="training"] .tr-in { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }

/* ---- Pregunta ---- */
.svc-demo[data-demo="training"] .tr-q-kicker { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.45rem; }
.svc-demo[data-demo="training"] .tr-question { font: 600 clamp(1.05rem, 2.1vw, 1.4rem)/1.3 var(--font-display); color: var(--ink); margin-bottom: 1rem; max-width: 60ch; }

/* ---- Opciones ---- */
.svc-demo[data-demo="training"] .tr-options { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .svc-demo[data-demo="training"] .tr-options { grid-template-columns: 1fr; } }
.svc-demo[data-demo="training"] .tr-opt {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  padding: 0.85rem 0.95rem; border-radius: var(--r); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font: 500 0.92rem/1.3 var(--font-body);
  cursor: pointer; transition: transform 0.16s var(--ease-out), border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.svc-demo[data-demo="training"] .tr-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.svc-demo[data-demo="training"] .tr-opt:disabled { cursor: default; }
.svc-demo[data-demo="training"] .tr-opt-key {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font: 700 0.78rem/1 var(--font-mono); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.svc-demo[data-demo="training"] .tr-opt-label { flex: 1 1 auto; }
.svc-demo[data-demo="training"] .tr-opt-mark { flex: 0 0 auto; width: 18px; height: 18px; opacity: 0; transform: scale(0.5); transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out); }
.svc-demo[data-demo="training"] .tr-opt-mark svg { width: 18px; height: 18px; }

/* Estados de respuesta */
.svc-demo[data-demo="training"] .tr-opt.is-correct {
  border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ink);
}
.svc-demo[data-demo="training"] .tr-opt.is-correct .tr-opt-key { background: var(--ok); color: #fff; border-color: var(--ok); }
.svc-demo[data-demo="training"] .tr-opt.is-correct .tr-opt-mark { opacity: 1; transform: scale(1); color: var(--ok); }
.svc-demo[data-demo="training"] .tr-opt.is-wrong {
  border-color: var(--err); background: color-mix(in srgb, var(--err) 12%, var(--surface)); color: var(--ink);
  animation: tr-shake 0.4s var(--ease-out);
}
.svc-demo[data-demo="training"] .tr-opt.is-wrong .tr-opt-key { background: var(--err); color: #fff; border-color: var(--err); }
.svc-demo[data-demo="training"] .tr-opt.is-wrong .tr-opt-mark { opacity: 1; transform: scale(1); color: var(--err); }
.svc-demo[data-demo="training"] .tr-opt.is-dim { opacity: 0.5; }

@keyframes tr-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---- Feedback / explicacion ---- */
.svc-demo[data-demo="training"] .tr-feedback {
  display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1rem;
  padding: 0.85rem 1rem; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface); overflow: hidden;
}
.svc-demo[data-demo="training"] .tr-feedback[hidden] { display: none; }
.svc-demo[data-demo="training"] .tr-feedback.is-ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.svc-demo[data-demo="training"] .tr-feedback.is-bad { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); background: color-mix(in srgb, var(--err) 9%, var(--surface)); }
.svc-demo[data-demo="training"] .tr-fb-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.svc-demo[data-demo="training"] .tr-feedback.is-ok .tr-fb-icon { background: var(--ok); }
.svc-demo[data-demo="training"] .tr-feedback.is-bad .tr-fb-icon { background: var(--err); }
.svc-demo[data-demo="training"] .tr-fb-icon svg { width: 17px; height: 17px; }
.svc-demo[data-demo="training"] .tr-fb-text b { display: block; font: 700 0.9rem/1.2 var(--font-display); color: var(--ink); margin-bottom: 0.15rem; }
.svc-demo[data-demo="training"] .tr-fb-text p { font-size: 0.85rem; line-height: 1.45; color: var(--muted); margin: 0; }

/* ---- Acciones quiz ---- */
.svc-demo[data-demo="training"] .tr-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1.1rem; }
.svc-demo[data-demo="training"] .tr-score-live { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-demo[data-demo="training"] .tr-next {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border-radius: var(--r-pill);
  font: 600 0.86rem/1 var(--font-body); color: var(--accent-ink); background: var(--accent);
  border: 1px solid var(--accent); transition: background 0.18s ease, transform 0.16s var(--ease-out), opacity 0.18s ease, filter 0.18s ease;
}
.svc-demo[data-demo="training"] .tr-next:hover:not(:disabled) { background: var(--accent-press); transform: translateY(-2px); }
.svc-demo[data-demo="training"] .tr-next:active:not(:disabled) { transform: translateY(0); }
.svc-demo[data-demo="training"] .tr-next:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.3); }
.svc-demo[data-demo="training"] .tr-next svg { transition: transform 0.18s var(--ease-out); }
.svc-demo[data-demo="training"] .tr-next:hover:not(:disabled) svg { transform: translateX(3px); }

/* ---- Resultado ---- */
.svc-demo[data-demo="training"] .tr-result { display: flex; gap: clamp(1.2rem, 4vw, 2.4rem); align-items: center; flex-wrap: wrap; justify-content: center; }
.svc-demo[data-demo="training"] .tr-ring-wrap { position: relative; flex: 0 0 auto; width: 132px; height: 132px; display: grid; place-items: center; }
.svc-demo[data-demo="training"] .tr-ring { transform: rotate(0deg); }
.svc-demo[data-demo="training"] .tr-ring-track { stroke: var(--line-strong); }
.svc-demo[data-demo="training"] .tr-ring-bar { stroke: var(--accent); stroke-dasharray: 326.7; stroke-dashoffset: 326.7; filter: drop-shadow(0 0 6px var(--accent-glow)); transition: stroke-dashoffset 1.1s var(--ease-out); }
.svc-demo[data-demo="training"] .tr-ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.svc-demo[data-demo="training"] .tr-ring-center b { font: 700 1.7rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.svc-demo[data-demo="training"] .tr-ring-center span { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.svc-demo[data-demo="training"] .tr-result-copy { flex: 1 1 320px; min-width: 0; }
.svc-demo[data-demo="training"] .tr-result-kicker { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem; }
.svc-demo[data-demo="training"] .tr-result-title { font: 700 clamp(1.3rem, 2.6vw, 1.7rem)/1.15 var(--font-display); color: var(--ink); }
.svc-demo[data-demo="training"] .tr-result-sub { font-size: 0.92rem; line-height: 1.5; color: var(--muted); margin: 0.4rem 0 1rem; max-width: 48ch; }
.svc-demo[data-demo="training"] .tr-result-kpis { margin-bottom: 1.1rem; }
.svc-demo[data-demo="training"] .tr-result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.svc-demo[data-demo="training"] .tr-cta-primary { padding: 0.7rem 1.25rem; }
.svc-demo[data-demo="training"] .tr-restart {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1.1rem; border-radius: var(--r-pill);
  font: 600 0.86rem/1 var(--font-body); color: var(--text); background: var(--surface); border: 1px solid var(--line-strong);
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.16s var(--ease-out);
}
.svc-demo[data-demo="training"] .tr-restart:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); }
.svc-demo[data-demo="training"] .tr-restart svg { transition: transform 0.4s var(--ease-out); }
.svc-demo[data-demo="training"] .tr-restart:hover svg { transform: rotate(-180deg); }

/* ---- KPI delta colorways ---- */
.svc-demo[data-demo="training"] .tr-result-kpis .svc-demo-kpi em.is-ok { color: var(--ok); }

@media (max-width: 720px) {
  .svc-demo[data-demo="training"] .tr-title { display: none; }
  .svc-demo[data-demo="training"] .tr-body { min-height: 0; }
  .svc-demo[data-demo="training"] .tr-result { flex-direction: column; text-align: center; }
  .svc-demo[data-demo="training"] .tr-result-actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-demo[data-demo="training"] .tr-progress-fill,
  .svc-demo[data-demo="training"] .tr-opt,
  .svc-demo[data-demo="training"] .tr-opt-mark,
  .svc-demo[data-demo="training"] .tr-next,
  .svc-demo[data-demo="training"] .tr-next svg,
  .svc-demo[data-demo="training"] .tr-restart svg,
  .svc-demo[data-demo="training"] .tr-ring-bar,
  .svc-demo[data-demo="training"] .tr-in { transition: none; }
  .svc-demo[data-demo="training"] .tr-opt.is-wrong { animation: none; }
  .svc-demo[data-demo="training"] .tr-enter { opacity: 1; transform: none; }
}

/* Aviso permanente de dato simulado. PRODUCT.md prohibe metricas inventadas y las
   demos usan lenguaje de "en vivo": sin esta linea, un visitante puede leer las
   cifras como resultados reales de un cliente. */
.svc-demo-simulated {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ===== 70-ambient.css ===== */
/* ============================================================
   Apollo — 70 ambient contextual backgrounds (subtle, parallax)
   A faint per-section layer so backgrounds aren't a flat color. Very low
   opacity, contextual motifs, parallax on scroll. Hero keeps its own system.
   ============================================================ */

.has-fx { position: relative; }
.has-fx > *:not(.sec-fx) { position: relative; z-index: 1; }
.sec-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* Soft gold wash blobs (radial gradients = soft + cheap, no blur filter) */
.afx-blob { position: absolute; border-radius: 50%; will-change: transform; }
.afx-blob.b1 { width: 46vmax; height: 46vmax; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 68%); }
.afx-blob.b2 { width: 34vmax; height: 34vmax; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%); }

/* Tiny floating dots (like the hero) */
.afx-dots { position: absolute; inset: 0; }
.afx-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.18; animation: afxFloat 7s ease-in-out infinite; }
@keyframes afxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Contextual: moon + rocket (the "tecnología que llegó a la Luna" section) */
.afx-moon { position: absolute; right: 9%; top: 11%; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%); }
.afx-rocket { position: absolute; left: 11%; bottom: 2%; width: 64px; height: 64px; color: var(--accent); opacity: 0.18; will-change: transform; }

/* Contextual: data grid (canvas / services) */
.afx-grid { position: absolute; inset: -12%; background-image: radial-gradient(color-mix(in srgb, var(--accent) 42%, transparent) 1px, transparent 1.6px); background-size: 32px 32px; opacity: 0.08; will-change: transform; }

/* Contextual: orbit ring (method) */
.afx-ring { position: absolute; right: -8%; top: 14%; width: 42vmax; height: 42vmax; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); opacity: 0.5; will-change: transform; }
.afx-ring::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); }

@media (prefers-reduced-motion: reduce) { .afx-dot { animation: none; } }