/* Landing layout. Components come from the design system; this file only owns
   composition, rhythm and the responsive rules. */
.lp { background: var(--bg-void); overflow-x: clip }
.lp-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px }
.lp-section { padding: 112px 0; position: relative }
.lp-section--tight { padding: 76px 0 }
.lp-light { background: var(--bg-base); color: var(--text-primary) }
.lp-rule { height: 1px; background: var(--border-subtle) }

/* header */
/* header — liquid glass. Three stacked backdrop layers instead of one blur: the
   backdrop is first refracted through a noise displacement map (strongest at the
   lower lip, where real glass bends light most), then frosted, then edged. Both
   the refraction and the frost are masked to fade out at the bottom, so content
   scrolling up is bent and swallowed by the lip before it disappears under the bar.
   Browsers without SVG filters in backdrop-filter drop the refraction layer only. */
.lp-header { position: sticky; top: 0; z-index: 40 }
.lp-glass-defs { position: absolute; width: 0; height: 0; pointer-events: none }
.lp-glass { position: absolute; left: 0; right: 0; top: 0; bottom: -18px; pointer-events: none }
.lp-glass > * { position: absolute; inset: 0 }
.lp-glass-refract { backdrop-filter: url(#eg-lg-refract) saturate(150%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .22) 38%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .22) 38%, #000 82%, transparent 100%) }
.lp-glass-body { backdrop-filter: blur(17px) saturate(180%) brightness(1.04); -webkit-backdrop-filter: blur(17px) saturate(180%) brightness(1.04); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 52%, rgba(150, 190, 255, .05)); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .42) 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .42) 84%, transparent 100%) }
.lp-glass-lip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) }
.lp-glass-lip::after { content: ''; position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(150, 195, 255, .34) 22%, rgba(210, 230, 255, .5) 50%, rgba(150, 195, 255, .34) 78%, transparent) }
.lp-header-in { position: relative; display: flex; align-items: center; gap: 32px; height: 64px }
.lp-brand { display: flex; align-items: center; gap: 11px; flex: none }
.lp-brand img { width: 30px }
.lp-nav { display: flex; align-items: center; gap: 26px; flex: 1 1 0; min-width: 0; justify-content: center }
.lp-nav a { font: var(--type-body-sm); color: var(--text-tertiary); white-space: nowrap; transition: color var(--dur-fast) var(--ease-move) }
.lp-nav a:hover { color: var(--text-primary); text-decoration: none }
.lp-header-cta { display: flex; align-items: center; gap: 10px; flex: none }
.lp-burger { display: none }

/* hero */
.lp-hero { position: relative; padding: 92px 0 96px; background-image: var(--grad-depth); overflow: hidden }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 64px; align-items: center }
.lp-hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 52px; align-items: center }
.lp-h1 { font: var(--type-display-2); line-height: 1.03; letter-spacing: -0.032em; max-width: 15ch; margin-top: 22px }
/* The third line carries the one gradient the headline is allowed. */
.lp-h1 em { font-style: normal; background: linear-gradient(180deg, #FFFFFF 0%, #AEB9D4 58%, #6376A5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent }
.lp-lead { font: var(--type-body-lg); color: var(--text-secondary); max-width: 48ch; margin-top: 24px }
.lp-hero-cta { display: flex; align-items: center; gap: 28px; margin-top: 34px; flex-wrap: wrap }
.lp-hero-meta { display: flex; align-items: center; gap: 22px; margin-top: 44px; flex-wrap: wrap }

/* secondary CTA — validation, not action */
.lp-link-cta { display: inline-flex; align-items: center; gap: 4px; font: var(--type-caption); color: var(--text-secondary); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--border-strong); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out) }
.lp-link-cta .eg-icon { font-size: 18px; transition: transform var(--dur-fast) var(--ease-move) }
.lp-link-cta:hover { color: var(--text-primary); border-color: var(--accent) }
.lp-link-cta:hover .eg-icon { transform: translateX(3px) }

/* authority band */
.lp-metrics { display: flex; align-items: stretch; gap: 30px; margin-top: 46px; flex-wrap: wrap }
.lp-metric { display: flex; flex-direction: column; gap: 7px; padding-right: 30px; border-right: 1px solid var(--border-subtle) }
.lp-metric:last-child { border-right: 0; padding-right: 0 }
.lp-metric-n { position: relative; font-family: var(--font-core); font-weight: var(--font-weight-light); font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--text-primary); padding-right: 12px }
.lp-metric-dot { position: absolute; right: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(11, 76, 250, .8) }
.lp-metric-l { font: var(--type-body-sm); font-size: 12.5px; color: var(--text-muted) }

/* ambient light + orbital field */
.lp-atmos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.lp-atmos > * { position: absolute; display: block }
/* The hero field. Anchored bottom-centre so the ground glow lands under the visual column
   and the empty left third stays clear for the headline. */
.lp-atmos-plate { inset: 0; background: url(../../assets/hero-field.png) center bottom / cover no-repeat }
/* Protection, not decoration: reads the copy column back to full contrast over the plate,
   and lands the bright bottom edge softly into the next section. */
.lp-atmos-veil { inset: 0; background: linear-gradient(96deg, var(--bg-base) 0%, rgba(6, 7, 11, .82) 26%, rgba(6, 7, 11, .34) 46%, transparent 66%), linear-gradient(180deg, rgba(6, 7, 11, .55) 0%, transparent 22%, transparent 58%, rgba(6, 7, 11, .72) 88%, var(--bg-base) 97%) }
.lp-glow { border-radius: 50%; filter: blur(10px) }
.lp-glow--ion { left: -6%; top: -18%; width: 62%; height: 90%; background: radial-gradient(circle at 50% 50%, rgba(11, 76, 250, .14), transparent 62%) }
.lp-node { width: 3px; height: 3px; border-radius: 50%; background: rgba(150, 190, 255, .5); box-shadow: 0 0 6px rgba(34, 228, 254, .5); animation: lp-node 5.2s var(--ease-move) infinite }

@keyframes lp-node { 0%, 100% { opacity: .18 } 50% { opacity: .75 } }

/* the hero visual bleeds slightly out of the column for depth */
.lp-hero-copy, .lp-hero-visual { position: relative; z-index: 1 }
.lp-hero-visual { position: relative; margin-right: -46px; padding-bottom: 0 }

/* pointer tilt (composed with the float animation via custom properties) */
/* border-beam's outer bloom reads as a second border on a large panel — its own CSS
   hooks tame it to a tight edge glow (see the library's v1.3.0 release notes). */
/* Two speeds: the follow is immediate so it reads as tracking, the return to rest is eased. */
.lp-tilt.lp-wf-tilt { transition: transform 620ms var(--ease-move) }
.lp-tilt.lp-wf-tilt[data-tracking] { transition: transform 90ms linear }
.lp-wf-tilt { --beam-bloom-opacity: .32; --beam-bloom-blur: 14px; --beam-glow-brightness: 1; --pulse-glow-boost: .6 }
/* the panel keeps its own crisp edge; the beam only travels along the bottom */
.lp-wf { box-shadow: var(--shadow-xl), inset 0 1px 0 var(--highlight-top), 0 0 0 1px rgba(34, 228, 254, .07) }
.lp-tilt { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 7px), 0) translateY(calc(var(--raise, 0px) + var(--lift, 0) * -3px)); transform-style: preserve-3d; transition: transform var(--dur-base) var(--ease-move) }

/* workflow panel */
.lp-wf { position: relative; border-radius: var(--radius-panel); background: linear-gradient(180deg, rgba(18, 24, 38, .92), rgba(10, 14, 24, .94)); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xl), inset 0 1px 0 var(--highlight-top); overflow: hidden }
.lp-wf-head { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border-bottom: 1px solid var(--border-subtle) }
.lp-wf-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--signal-500); display: grid; place-items: center; flex: none }
.lp-wf-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--signal-400); box-shadow: 0 0 7px var(--signal-500) }
.lp-wf-title { font: var(--type-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary) }
.lp-wf-title strong { color: var(--text-primary); font-weight: 600 }
.lp-wf-title span { color: var(--text-muted); margin: 0 2px }
.lp-wf-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: var(--type-mono-sm); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted) }
.lp-wf-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 7px rgba(31, 209, 140, .8) }
.lp-wf-steps { display: flex; align-items: center; gap: 4px; padding: 16px 16px 4px }
.lp-wf-step { flex: 1; display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-1); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out) }
.lp-wf-step.is-active { border-color: var(--ion-500); background: linear-gradient(180deg, rgba(11, 76, 250, .14), rgba(11, 76, 250, .05)); box-shadow: 0 0 0 1px rgba(34, 228, 254, .35), 0 0 26px rgba(11, 76, 250, .45), inset 0 1px 0 rgba(255, 255, 255, .06) }
.lp-wf-stepicon { font-size: 19px; color: var(--text-muted) }
.lp-wf-step.is-active .lp-wf-stepicon { color: var(--signal-400) }
.lp-wf-stepn { display: block; font: var(--type-mono-sm); font-size: 10px; color: var(--text-muted) }
.lp-wf-steplabel { display: block; font: var(--type-body-sm); font-size: 13px; color: var(--text-secondary); margin-top: 2px }
.lp-wf-step.is-active .lp-wf-steplabel { color: var(--text-primary) }
.lp-wf-arrow { font-size: 17px; color: var(--gray-600); flex: none }
.lp-wf-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px 16px 18px }
.lp-wf-card { padding: 15px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-inset) }
.lp-wf-acts { list-style: none; margin: 13px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px }
.lp-wf-act { display: flex; align-items: center; gap: 10px }
.lp-wf-actdot { font-size: 17px; color: var(--signal-400); flex: none }
.lp-wf-act.is-done .lp-wf-actdot { color: var(--success) }
.lp-wf-act.is-queued .lp-wf-actdot { color: var(--gray-600) }
.lp-wf-actlabel { flex: 1; min-width: 0; font: var(--type-body-sm); font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lp-wf-act.is-queued .lp-wf-actlabel { color: var(--text-muted) }
.lp-wf-actmeta { font: var(--type-mono-sm); font-size: 10.5px; color: var(--text-muted); flex: none }
.lp-wf-impact-l { display: flex; flex-direction: column; align-items: flex-start; min-width: 0 }
.lp-wf-impact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); align-items: end; column-gap: 10px; margin-top: 12px }
.lp-wf-impact-l { display: flex; flex-direction: column; align-items: flex-start }
.lp-wf-big { font-family: var(--font-core); font-weight: var(--font-weight-light); font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--text-primary) }
.lp-wf-big em { font-style: normal; font-size: 14px; font-weight: var(--font-weight-regular); color: var(--text-tertiary); margin-left: 8px; letter-spacing: 0 }
.lp-wf-delta { display: inline-flex; align-items: center; gap: 2px; margin-top: 14px; font-family: var(--font-core); font-size: 22px; font-weight: var(--font-weight-regular); color: var(--success) }
.lp-wf-delta .eg-icon { font-size: 19px }
.lp-wf-note { margin-top: 8px; font: var(--type-body-sm); font-size: 12px; color: var(--text-muted); line-height: 1.45 }
.lp-wf-spark { width: 100%; height: 74px; display: block; align-self: end; margin-bottom: 2px }

/* floating status cards — they break the panel's bounds on purpose */
/* In normal flow with an explicit negative offset: the beam wrapper around the panel
   does not report its child's full height, so absolute positioning against it drifts. */
.lp-floats { position: relative; z-index: 2; margin: 0 0 0 8%; translate: 0 -20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px }
.lp-float { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-move); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 15px 16px; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(20, 26, 40, .96), rgba(12, 16, 26, .96)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--highlight-top); animation: lp-float 7.5s var(--ease-move) infinite }
.lp-float--accent { border-color: rgba(34, 228, 254, .38); box-shadow: 0 0 0 1px rgba(11, 76, 250, .4), 0 18px 50px -18px rgba(11, 76, 250, .75), inset 0 1px 0 rgba(255, 255, 255, .08); --raise: -16px }
.lp-float-row { display: flex; align-items: center; gap: 10px }
.lp-float-icon { font-size: 19px; color: var(--text-tertiary) }
.lp-float-num { display: block; font-family: var(--font-core); font-weight: var(--font-weight-regular); font-size: 21px; line-height: 1; color: var(--text-primary) }
.lp-float-cap { display: block; font: var(--type-body-sm); font-size: 11.5px; color: var(--text-muted); margin-top: 3px }
.lp-float-avatars { display: flex; align-items: center; padding: 7px 9px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border-subtle) }
.lp-float-avatars > * { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface-2) }
.lp-float-avatars > *:first-child { margin-left: 0 }
.lp-float-more { margin-left: 7px; font: var(--type-mono-sm); font-size: 10px; color: var(--text-tertiary) }
.lp-float-badge { transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 18px rgba(11, 76, 250, .7) }
.lp-float-badge .eg-icon { font-size: 18px }
.lp-float-badge--quiet { background: rgba(11, 76, 250, .16); color: var(--signal-400); box-shadow: inset 0 0 0 1px rgba(34, 228, 254, .3) }
.lp-float-title { font: var(--type-caption); font-size: 14.5px; color: var(--text-primary); line-height: 1.3 }
.lp-float-state { display: inline-flex; align-items: center; gap: 7px; font: var(--type-body-sm); font-size: 11.5px; color: var(--text-muted) }
.lp-float-statedot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px rgba(31, 209, 140, .8) }
@keyframes lp-float { 0%, 100% { translate: 0 0 } 50% { translate: 0 -7px } }
@media (prefers-reduced-motion: reduce) {
  .lp-float, .lp-node { animation: none }
  .lp-tilt { transition: none; transform: none }
}

/* generic grids */
.lp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.lp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
.lp-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start }
.lp-h2 { font: var(--type-h2); letter-spacing: var(--tracking-tighter); max-width: 24ch }
.lp-sub { font: var(--type-body); color: var(--text-tertiary); max-width: 46ch; margin-top: 18px }

/* method rail */
.lp-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative }
.lp-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: var(--seam); opacity: .55 }
.lp-step { padding: 0 20px 0 0; position: relative }
.lp-step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-base); box-shadow: 0 0 0 1px var(--border-strong); position: relative; margin: 16px 0 22px }
.lp-step--on .lp-step-dot { background: var(--ion-500); box-shadow: 0 0 0 1px var(--ion-400), 0 0 14px 1px rgba(11,76,250,.6) }

/* stack table */
.lp-stack-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; padding: 22px 0; border-top: 1px solid var(--border-subtle); align-items: baseline }
.lp-stack-items { display: flex; flex-wrap: wrap; gap: 8px 26px }
.lp-stack-items span { font: var(--type-body); color: var(--text-secondary) }

/* footer */
.lp-footer { padding: 64px 0 36px; border-top: 1px solid rgba(255, 255, 255, .035); background: linear-gradient(180deg, #05070C, var(--bg-base) 32%) }
.lp-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px }
.lp-footer-col { display: flex; flex-direction: column; gap: 12px }
.lp-footer-col a { font: var(--type-body-sm); color: var(--text-tertiary) }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-cinema) var(--ease-out), transform var(--dur-cinema) var(--ease-out) }
.reveal.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none } }

@media (max-width: 1240px) {
  .lp-hero-visual { margin-right: 0 }
  .lp-floats { margin-left: 0 }
}
/* Between the burger breakpoint and ~1024px the five nav items plus the CTA no longer
   fit the 1240px wrap, so the burger takes over earlier than the rest of the layout. */
@media (max-width: 1024px) {
  .lp-nav { display: none }
  .lp-burger { display: inline-flex; margin-left: auto }
}
@media (max-width: 1120px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px }

  .lp-split { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .lp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .lp-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px }
  .lp-rail::before { display: none }
}
@media (max-width: 820px) {
  .lp-wrap { padding: 0 24px }
  .lp-section { padding: 76px 0 }
  .lp-nav, .lp-header-cta .lp-hide-sm { display: none }
  .lp-burger { display: inline-flex; margin-left: auto }
  .lp-grid-2, .lp-grid-3 { grid-template-columns: minmax(0, 1fr) }
  .lp-h1 { font: var(--type-h1); letter-spacing: var(--tracking-tighter); max-width: 20ch }
  .lp-h2 { font: var(--type-h3) }
  .lp-hero { padding: 56px 0 64px }
  .lp-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px }
  .lp-stack-row { grid-template-columns: minmax(0, 1fr); gap: 12px }
}
@media (max-width: 560px) {
  .lp-rail { grid-template-columns: minmax(0, 1fr); row-gap: 20px }
  .lp-grid-4 { grid-template-columns: minmax(0, 1fr) }
  .lp-hero-meta { gap: 14px }
  .lp-metrics { gap: 18px }
  .lp-metric { padding-right: 18px }
  .lp-metric-n { font-size: 32px }
  .lp-wf-steps { flex-wrap: wrap }
  .lp-wf-step { flex: 1 1 42%; min-width: 0 }
  .lp-wf-arrow { display: none }
  .lp-wf-body { grid-template-columns: minmax(0, 1fr) }
  .lp-wf-big { font-size: 38px }
  .lp-wf-impact { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) }
  .lp-floats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; translate: none }
  .lp-float--accent { --raise: 0px }
  /* the plate's ground glow is the focal point on narrow screens */
  .lp-atmos-plate { background-position: 62% bottom }
}
@media (max-width: 560px) {
  .lp-floats { grid-template-columns: minmax(0, 1fr) }
  .lp-metric { flex: 1 1 100%; border-right: 0; padding-right: 0 }
  .lp-wf-step { flex: 1 1 100% }
}

/* Forced narrow layout — mobile.html renders the page in a 430px column at any host
   width, so the same collapses are applied by class instead of by media query. */
.lp-narrow .lp-wrap { padding: 0 24px }
.lp-narrow .lp-section { padding: 68px 0 }
.lp-narrow .lp-nav, .lp-narrow .lp-header-cta .lp-hide-sm { display: none }
.lp-narrow .lp-burger { display: inline-flex; margin-left: auto }
.lp-narrow .lp-hero { padding: 44px 0 56px }
.lp-narrow .lp-hero-grid, .lp-narrow .lp-split, .lp-narrow .lp-grid-2, .lp-narrow .lp-grid-3, .lp-narrow .lp-grid-4 { grid-template-columns: minmax(0, 1fr); gap: 28px }
.lp-narrow .lp-h1 { font: var(--type-h2); letter-spacing: var(--tracking-tighter); max-width: 18ch }
.lp-narrow .lp-h2 { font: var(--type-h3) }
.lp-narrow .lp-lead { font: var(--type-body); margin-top: 20px }
.lp-narrow .lp-hero-meta { gap: 14px; margin-top: 30px }
.lp-narrow .lp-hero-visual { margin-right: 0 }
.lp-narrow .lp-h1 { max-width: 100%; margin-top: 18px }
.lp-narrow .lp-metrics { gap: 0; margin-top: 34px; flex-direction: column; align-items: stretch }
.lp-narrow .lp-metric { flex-direction: row; align-items: baseline; gap: 12px; padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--border-subtle) }
.lp-narrow .lp-metric:last-child { border-bottom: 0 }
.lp-narrow .lp-metric-n { font-size: 30px; min-width: 76px }
.lp-narrow .lp-wf-steps { flex-wrap: wrap; padding: 14px 14px 2px }
.lp-narrow .lp-wf-step { flex: 1 1 44%; padding: 11px 12px }
.lp-narrow .lp-wf-arrow { display: none }
.lp-narrow .lp-wf-body { grid-template-columns: minmax(0, 1fr); padding: 10px 14px 16px }
.lp-narrow .lp-wf-big { font-size: 36px }
.lp-narrow .lp-wf-impact { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr) }
.lp-narrow .lp-wf-spark { height: 62px }
.lp-narrow .lp-float--accent { --raise: 0px }
.lp-narrow .lp-floats { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 12px 0 0; translate: none }
.lp-narrow .lp-float--accent { transform: none }
.lp-narrow .lp-atmos-plate { background-position: 62% bottom }
.lp-narrow .lp-atmos-veil { background: linear-gradient(180deg, var(--bg-base) 0%, rgba(6, 7, 11, .62) 26%, rgba(6, 7, 11, .3) 52%, transparent 78%), linear-gradient(0deg, var(--bg-base) 0%, transparent 26%) }
.lp-narrow .lp-rail { grid-template-columns: minmax(0, 1fr); row-gap: 18px }
.lp-narrow .lp-rail::before { display: none }
.lp-narrow .lp-step { padding: 0 }
.lp-narrow .lp-step-dot { margin: 10px 0 14px }
.lp-narrow .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px }
.lp-narrow .lp-stack-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0 }
.lp-narrow .lp-footer { padding: 52px 0 32px }

/* ── 01 Diagnóstico — operational tree ────────────────────────────────────
   Top-down node map: current operation → three processes → recoverable margin.
   Structure in hairlines, one signalling hue (ion) at the junctions, and the
   convergence into the bottom node draws itself as the section is scrolled. */
.lp-diag-section { padding: 0; border-top: 1px solid var(--border-subtle) }
.lp-diag { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: stretch }
.lp-diag-left { padding: 96px 48px 96px 0 }
.lp-diag-right { position: relative; border-left: 1px solid var(--border-subtle); padding: 72px 0 76px 56px; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 30px 30px; background-position: 8px 8px }
.lp-diag-axis { position: absolute; left: -1px; right: 0; top: 47%; height: 1px; border-top: 1px dashed rgba(255, 255, 255, .07); pointer-events: none }
.lp-diag-axis::before, .lp-diag-axis::after { content: ''; position: absolute; top: -3px; width: 5px; height: 5px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16) }
.lp-diag-axis::before { left: -3px }
.lp-diag-axis::after { right: -3px }
.lp-diag-note { margin-top: 34px; display: flex; gap: 12px; align-items: baseline; font: var(--type-mono-sm); letter-spacing: var(--tracking-wide); color: var(--accent-text); line-height: 1.7 }

.lp-tree { position: relative }
.lp-tree-svg { display: block; width: 100%; height: 78px; overflow: visible }
.lp-tree-svg path { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1 }
.lp-flow { stroke: rgba(62, 119, 255, .55); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-cinema) var(--ease-out) }
.lp-tree[data-bus="on"] .lp-flow { stroke-dashoffset: 0 }
.lp-tree[data-bus="on"] .lp-tree-svg--down { filter: drop-shadow(0 0 4px rgba(62, 119, 255, .45)) }

.lp-node { position: relative; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(22, 27, 39, .82), rgba(11, 14, 21, .7)); padding: 18px 20px }
.lp-node--root { width: min(380px, 54%); min-height: 84px; margin: 0 auto; border-color: rgba(62, 119, 255, .3); display: flex; align-items: center; gap: 16px }
.lp-tree-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.4%; row-gap: 0; align-items: start }
.lp-node--proc { width: 100%; min-height: 132px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px 20px }
.lp-node-row { display: flex; align-items: center; gap: 14px; width: 100% }
.lp-node--out { width: min(470px, 68%); min-height: 116px; margin: 0 auto; display: flex; align-items: center; gap: 22px; padding: 22px 26px; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-cinema) var(--ease-out), transform var(--dur-cinema) var(--ease-out) }
.lp-tree[data-out="on"] .lp-node--out { opacity: 1; transform: none }

.lp-node-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(62, 119, 255, .28); background: rgba(62, 119, 255, .06); color: var(--ion-300) }
.lp-node-title { font: var(--type-mono-sm); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-primary) }
.lp-node-sub { font: var(--type-body-sm); color: var(--text-tertiary); margin-top: 5px }
.lp-node-metric { font-family: var(--font-core); font-size: 21px; font-weight: var(--font-weight-regular); letter-spacing: var(--tracking-tight); color: var(--text-primary); margin-top: 5px; font-variant-numeric: tabular-nums; white-space: nowrap }
.lp-chip { align-self: flex-start; margin-top: auto; padding: 5px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); font: var(--type-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-tertiary); opacity: 0; transform: translateY(3px); transition: opacity var(--dur-cinema) var(--ease-out), transform var(--dur-cinema) var(--ease-out) }
.lp-tree[data-leaks="on"] .lp-chip { opacity: 1; transform: none }
.lp-chip--hot { border-color: rgba(62, 119, 255, .45); color: var(--ion-300); box-shadow: 0 0 18px rgba(62, 119, 255, .18) }

.lp-jd { position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--ion-400); transform: translate(-50%, -50%); opacity: .4; box-shadow: none; transition: opacity var(--dur-cinema) var(--ease-out), box-shadow var(--dur-cinema) var(--ease-out) }
.lp-jd--top { top: 0 }
.lp-jd--bottom { top: 100% }
.lp-tree[data-leaks="on"] .lp-jd { opacity: 1; box-shadow: 0 0 0 3px rgba(62, 119, 255, .14), 0 0 16px 2px rgba(62, 119, 255, .7) }
.lp-tree[data-out="on"] .lp-node--out .lp-jd { opacity: 1; box-shadow: 0 0 0 3px rgba(62, 119, 255, .14), 0 0 16px 2px rgba(62, 119, 255, .7) }

.lp-ring { width: 76px; height: 76px; flex: none; border-radius: 50%; border: 1px dashed rgba(62, 119, 255, .38); display: grid; place-items: center; color: var(--ion-300); background: radial-gradient(circle, rgba(62, 119, 255, .16), rgba(62, 119, 255, 0) 70%) }
.lp-out-label { font: var(--type-mono-sm); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary) }
.lp-out-figure { font-family: var(--font-core); font-size: 44px; line-height: 1.05; letter-spacing: var(--tracking-tighter); color: var(--accent-text); text-shadow: 0 0 30px rgba(62, 119, 255, .4); margin: 4px 0 2px }
.lp-out-cap { font: var(--type-body-sm); color: var(--text-tertiary) }

@media (max-width: 1080px) {
  .lp-diag { grid-template-columns: minmax(0, 1fr) }
  .lp-diag-left { padding: 76px 0 40px }
  .lp-diag-right { border-left: 0; border-top: 1px solid var(--border-subtle); padding: 48px 0 76px }
  .lp-diag-axis { display: none }
}
@media (max-width: 860px) {
  .lp-tree-svg { display: none }
  .lp-tree { display: flex; flex-direction: column; gap: 16px }
  .lp-tree::before { content: ''; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 1px; background: var(--border-default) }
  .lp-tree-row { grid-template-columns: minmax(0, 1fr); gap: 16px }
  .lp-node--root, .lp-node--out { width: 100% }
}
.lp-tree--stack .lp-tree-svg, .lp-narrow .lp-tree-svg { display: none }
.lp-tree--stack, .lp-narrow .lp-tree { display: flex; flex-direction: column; gap: 16px }
.lp-tree--stack::before, .lp-narrow .lp-tree::before { content: ''; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 1px; background: var(--border-default) }
.lp-tree--stack .lp-tree-row, .lp-narrow .lp-tree-row { grid-template-columns: minmax(0, 1fr); gap: 16px }
.lp-tree--stack .lp-node--root, .lp-tree--stack .lp-node--out, .lp-narrow .lp-node--root, .lp-narrow .lp-node--out { width: 100% }
.lp-narrow .lp-diag { grid-template-columns: minmax(0, 1fr) }
.lp-narrow .lp-diag-left { padding: 64px 0 36px }
.lp-narrow .lp-diag-right { border-left: 0; border-top: 1px solid var(--border-subtle); padding: 40px 0 64px }
.lp-narrow .lp-diag-axis { display: none }

/* ── 02 Capacidades — glass layer stack ───────────────────────────────────
   Five plates in one isometric pile. Scroll builds it from the data layer up;
   a small parallax spread makes the depth legible instead of decorative. */
.lp-cap-section { position: relative; background: var(--bg-base); border-top: 1px solid var(--border-subtle); overflow: clip }
.lp-cap-stick::before { content: ''; position: absolute; inset: 0; background: url(../../assets/capabilities-bg.png) center 92% / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%); pointer-events: none }
.lp-cap-stick > * { position: relative; z-index: 1 }
.lp-cap-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 64px; align-items: start }
.lp-cap-body { display: grid; grid-template-columns: 150px minmax(0, 1fr) 240px; gap: 28px; align-items: stretch; margin-top: 8px }
.lp-cap-aside { align-self: center }
.lp-cap-side { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 36px }
.lp-cap-note { font: var(--type-mono-sm); letter-spacing: var(--tracking-wide); line-height: 1.75; color: var(--text-tertiary) }
.lp-cap-note b { display: flex; align-items: center; gap: 8px; font-weight: 400; text-transform: uppercase; color: var(--accent-text); letter-spacing: var(--tracking-label); margin-bottom: 8px }
.lp-cap-note b::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ion-400); box-shadow: 0 0 10px rgba(62, 119, 255, .8) }
.lp-cap-chevrons { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-muted) }
.lp-cap-chevrons span { line-height: .7; animation: lp-chev 2.6s var(--ease-move) infinite }
.lp-cap-chevrons span:nth-child(2) { animation-delay: .18s }
.lp-cap-chevrons span:nth-child(3) { animation-delay: .36s }
@keyframes lp-chev { 0%, 100% { opacity: .2 } 40% { opacity: .75 } }

.lp-stack { position: relative; width: 100%; max-width: 690px; aspect-ratio: 690 / 620; container-type: inline-size; margin: 0 auto }
.lp-layer { position: absolute; left: 0; right: 0; top: calc(var(--i) * 16.23cqw); height: 24.93cqw; z-index: calc(9 - var(--i)); opacity: 0; transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-out) }
.lp-layer[data-on="1"] { opacity: 1 }
.lp-layer-plate { position: absolute; left: 31.01cqw; top: 0; width: 68.12cqw }
.lp-layer-plate img { display: block; width: 100%; height: auto; filter: saturate(1.05) }
.lp-layer-icon { position: absolute; left: 48%; top: 40%; transform: translate(-50%, -50%); font-size: 26px; color: var(--ion-300); text-shadow: 0 0 20px rgba(62, 119, 255, .75) }
.lp-layer-label { position: absolute; left: 0; top: 6.2cqw; width: 28.4cqw; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start }
.lp-layer-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--tracking-wide); color: var(--text-muted); font-variant-numeric: tabular-nums }
.lp-layer-name { font-family: var(--font-core); font-size: 15px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-primary); padding-bottom: 9px; border-bottom: 1px solid var(--border-subtle) }
.lp-layer-sub { margin-top: 9px; font: var(--type-body-sm); color: var(--text-tertiary) }
.lp-layer-line { position: absolute; left: 28.4cqw; top: 10cqw; width: 4.35cqw; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(62, 119, 255, .6)) }
.lp-layer-line::after { content: ''; position: absolute; right: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ion-400); box-shadow: 0 0 12px rgba(62, 119, 255, .85) }

@media (max-width: 1120px) {
  .lp-cap-body { grid-template-columns: minmax(0, 1fr); gap: 40px }
  .lp-cap-aside, .lp-cap-chevrons { display: none }
  .lp-cap-side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 28px 40px }
  .lp-cap-side > div:last-child { max-width: 320px }
  .lp-stack { height: auto; aspect-ratio: auto; max-width: 520px; margin: 0; container-type: normal; display: flex; flex-direction: column; gap: 10px }
  .lp-layer { position: relative; top: 0; height: auto; z-index: auto }
  .lp-layer-label { position: relative; left: 0; top: 0; width: auto }
  .lp-layer-plate { position: relative; left: 0; width: 100%; margin-top: -4px }
  .lp-layer-line { display: none }
}
@media (max-width: 900px) {
  .lp-cap-head { grid-template-columns: minmax(0, 1fr); gap: 24px }
}
.lp-narrow .lp-cap-head, .lp-narrow .lp-cap-body { grid-template-columns: minmax(0, 1fr); gap: 32px }
.lp-narrow .lp-cap-aside, .lp-narrow .lp-cap-chevrons { display: none }
.lp-narrow .lp-stack { height: auto; aspect-ratio: auto; container-type: normal; max-width: none; display: flex; flex-direction: column; gap: 10px }
.lp-narrow .lp-layer { position: relative; top: 0; height: auto; z-index: auto }
.lp-narrow .lp-layer-label { position: relative; left: 0; top: 0; width: auto }
.lp-narrow .lp-layer-plate { position: relative; left: 0; width: 100%; margin-top: -4px }
.lp-narrow .lp-layer-line { display: none }

/* ── 03 Metodología — the execution path ──────────────────────────────────
   Full-viewport light break after two dark sections. The rendered path is cut
   into six equal panels hinged on their left edge: scroll unfolds the brochure
   crease by crease, left to right, and lights the station on the flat panel.
   Sticky stage, so the scroll IS the progress. */
.mt { position: relative; background: linear-gradient(158deg, #F3F4F7 0%, #EFF1F6 58%, #E9ECF2 100%); color: var(--text-primary) }
.mt-scroll { position: relative; height: 460vh }
.mt-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden }
.mt-canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(100%, calc(100vh * 1672 / 941)); aspect-ratio: 1672 / 941 }
.mt-fold { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 44% 50%; transform-style: preserve-3d }
.mt-panel { position: absolute; top: 0; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; backface-visibility: hidden }
.mt-face { position: absolute; inset: 0; overflow: hidden }
.mt-face img { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.mt-shade, .mt-crease { position: absolute; pointer-events: none }
.mt-shade { inset: 0 }
.mt-panel[data-dir="a"] .mt-shade { background: linear-gradient(90deg, rgba(255, 255, 255, .14) 0%, rgba(8, 11, 16, .05) 34%, rgba(8, 11, 16, .46) 100%) }
.mt-panel[data-dir="b"] .mt-shade { background: linear-gradient(90deg, rgba(8, 11, 16, .46) 0%, rgba(8, 11, 16, .05) 66%, rgba(255, 255, 255, .14) 100%) }
.mt-crease { top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(90deg, rgba(8, 11, 16, .3), rgba(8, 11, 16, 0)) }
.mt-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: #98A2B4 }
.mt-leads path { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 1 4; transition: opacity 520ms var(--ease-out) }

.mt-label { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 186px; opacity: 0; transform: translateY(10px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out) }
.mt-label[data-on="1"] { opacity: .42; transform: none }
.mt-label[data-active="1"] { opacity: 1 }
.mt-num { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide); color: #2764FF; margin-bottom: 9px }
.mt-name { font-family: var(--font-core); font-size: 19px; font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-tight); color: #080B10 }
.mt-micro { margin-top: 6px; font: var(--type-body-sm); font-size: 12.5px; line-height: 1.5; color: #677085 }
.mt-desc { max-height: 0; overflow: hidden; opacity: 0; font: var(--type-body-sm); font-size: 12.5px; line-height: 1.55; color: #3D4656 }
.mt-label[data-active="1"] .mt-desc { max-height: 96px; opacity: 1; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(8, 11, 16, .1); transition: max-height 520ms var(--ease-out), opacity 520ms var(--ease-out) 120ms }

.mt-ui { position: absolute; inset: 0; pointer-events: none }
.mt-ui > * { pointer-events: auto }
.mt-head { position: absolute; left: 0; top: 0; padding: 74px 40px 0; max-width: 620px }
.mt-head .eg-eyebrow { color: #677085 }
.mt-head h2 { font: var(--type-h2); letter-spacing: var(--tracking-tighter); color: #080B10; margin-top: 18px; max-width: 20ch }
.mt-sub { position: absolute; right: 40px; top: 78px; width: min(360px, 34vw); font: var(--type-body); color: #4C5566; line-height: 1.65 }
.mt-weeks { position: absolute; right: 40px; bottom: 96px; display: flex; align-items: center; gap: 20px; padding: 20px 30px 22px; border: 1px solid rgba(39, 100, 255, .32); background: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); opacity: 0; transform: translateY(10px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out) }
.mt-weeks[data-on="1"] { opacity: 1; transform: none }
.mt-weeks::before, .mt-weeks::after { content: ''; position: absolute; width: 9px; height: 9px; border: 1px solid rgba(39, 100, 255, .5) }
.mt-weeks::before { left: -5px; top: -5px; border-right: 0; border-bottom: 0 }
.mt-weeks::after { right: -5px; bottom: -5px; border-left: 0; border-top: 0 }
.mt-clock { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #2764FF; background: rgba(39, 100, 255, .09) }
.mt-weeks-fig { font-family: var(--font-mono); font-size: 26px; letter-spacing: var(--tracking-wide); color: #2764FF }
.mt-weeks-cap { margin-top: 5px; font: var(--type-body-sm); color: #4C5566 }
.mt-foot { position: absolute; left: 40px; bottom: 46px; font: var(--type-mono-sm); letter-spacing: var(--tracking-wide); color: #8A93A3; text-transform: uppercase }
.mt-prog { position: absolute; left: 40px; bottom: 78px; display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); color: #677085 }
.mt-prog-bars { display: flex; gap: 5px }
.mt-prog-bars i { width: 22px; height: 2px; background: rgba(8, 11, 16, .13); transition: background 420ms var(--ease-out) }
.mt-prog-bars i[data-on="1"] { background: #2764FF }

.mt-flow { display: none }
@media (max-width: 1000px) {
  .mt-scroll { height: auto }
  .mt-sticky { position: static; height: auto; display: flex; flex-direction: column; gap: 22px; padding: 64px 0 72px }
  .mt-ui { display: contents }
  .mt-canvas { position: static; transform: none; width: auto; aspect-ratio: auto; order: 3 }
  .mt-fold,   .mt-leads,   .mt-prog { display: none }
  .mt-flow { display: block }
  .mt-flow img { display: block; width: 100%; height: auto; margin-bottom: 24px }
  .mt-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px }
  .mt-label { position: static; width: auto; opacity: 1; transform: none }
  .mt-desc,   .mt-label[data-active="1"] .mt-desc { max-height: none; opacity: 1; overflow: visible; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(8, 11, 16, .1) }
  .mt-head { position: static; padding: 0; max-width: none; order: 1 }
  .mt-sub { position: static; width: auto; order: 2 }
  .mt-weeks { position: static; opacity: 1; transform: none; align-self: flex-start; order: 4 }
  .mt-foot { position: static; order: 5 }
  .mt { padding: 0 24px }
}
.lp-narrow .mt-scroll { height: auto }
.lp-narrow .mt-sticky { position: static; height: auto; display: flex; flex-direction: column; gap: 22px; padding: 64px 0 72px }
.lp-narrow .mt-ui { display: contents }
.lp-narrow .mt-canvas { position: static; transform: none; width: auto; aspect-ratio: auto; order: 3 }
.lp-narrow .mt-fold, .lp-narrow .mt-leads, .lp-narrow .mt-prog { display: none }
.lp-narrow .mt-flow { display: block }
.lp-narrow .mt-flow img { display: block; width: 100%; height: auto; margin-bottom: 24px }
.lp-narrow .mt-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px }
.lp-narrow .mt-label { position: static; width: auto; opacity: 1; transform: none }
.lp-narrow .mt-desc, .lp-narrow .mt-label[data-active="1"] .mt-desc { max-height: none; opacity: 1; overflow: visible; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(8, 11, 16, .1) }
.lp-narrow .mt-head { position: static; padding: 0; max-width: none; order: 1 }
.lp-narrow .mt-sub { position: static; width: auto; order: 2 }
.lp-narrow .mt-weeks { position: static; opacity: 1; transform: none; align-self: flex-start; order: 4 }
.lp-narrow .mt-foot { position: static; order: 5 }
.lp-narrow .mt { padding: 0 24px }
.lp-narrow .mt-labels { grid-template-columns: minmax(0, 1fr) }
@media (max-width: 560px) { .mt-labels { grid-template-columns: minmax(0, 1fr) } }

/* ── 04 Resultados — problema → sistema → impacto ──────────────────────────
   One panel, three unequal acts (27/35/38) so the narrative grows to the right.
   Scroll runs the demonstration: the problem figure lands, the system wires draw,
   the agent lights, then the impact counts up. One gradient, on the figure only. */
.rs { position: relative; background: #05070B; border-top: 1px solid var(--border-subtle); padding: 104px 0 92px; overflow: hidden }
.rs::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 52% 46%, rgba(50, 95, 255, .10), transparent 34%), radial-gradient(circle at 86% 40%, rgba(34, 228, 254, .06), transparent 30%) }
.rs > * { position: relative }
.rs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; margin-bottom: 44px }
.rs-h2 { font: var(--type-h2); letter-spacing: var(--tracking-tighter); max-width: 22ch; margin-top: 18px }
.rs-sub { margin-top: 16px; font: var(--type-body); color: var(--text-tertiary); max-width: 58ch }
.rs-seg { display: flex; gap: 10px }
.rs-seg button { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-default); color: var(--text-tertiary); font: var(--type-body-sm); cursor: pointer; transition: var(--transition-control) }
.rs-seg button[data-on="1"] { border-color: rgba(139, 92, 255, .5); color: var(--text-primary); background: rgba(91, 24, 250, .10); box-shadow: 0 0 26px rgba(91, 24, 250, .16) }
.rs-seg i { width: 6px; height: 6px; border-radius: 50%; background: var(--flux-400); box-shadow: 0 0 10px rgba(139, 92, 255, .9) }

.rs-panel { display: grid; grid-template-columns: 27fr 35fr 38fr; border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); background: linear-gradient(180deg, rgba(14, 18, 28, .72), rgba(6, 8, 13, .48)); overflow: hidden }
.rs-col { position: relative; padding: 30px 30px 34px; min-height: 476px }
.rs-col + .rs-col { border-left: 1px solid var(--border-subtle) }
.rs-eyebrow { font: var(--type-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted) }
.rs-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid rgba(62, 119, 255, .35); color: var(--ion-300); font: var(--type-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase }
.rs-title { font: var(--type-h4); font-size: 22px; line-height: 1.28; letter-spacing: var(--tracking-tight); margin-top: 12px; max-width: 19ch }
.rs-body { margin-top: 16px; font: var(--type-body-sm); font-size: 13.5px; line-height: 1.62; color: var(--text-tertiary); max-width: 30ch }
.rs-rule { height: 1px; background: var(--border-subtle); margin: 26px 0 22px }
.rs-big { display: flex; align-items: baseline; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out) }
.rs-big[data-on="1"] { opacity: 1; transform: none }
.rs-grad { background: linear-gradient(100deg, var(--signal-400) 2%, var(--ion-400) 48%, var(--flux-400) 96%); -webkit-background-clip: text; background-clip: text; color: transparent }
.rs-big-n { font-size: 54px; line-height: 1; letter-spacing: var(--tracking-tighter) }
.rs-big-u { font-size: 22px; color: var(--text-secondary) }
.rs-cap { margin-top: 12px; font: var(--type-body-sm); font-size: 12.5px; color: var(--text-muted) }
.rs-dots { position: absolute; right: 0; bottom: 0; width: 178px; height: 124px; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(circle at 100% 100%, #000, transparent 74%); mask-image: radial-gradient(circle at 100% 100%, #000, transparent 74%) }

.rs-diagram { position: relative; width: 100%; margin-top: 24px; aspect-ratio: 400 / 360 }
.rs-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.rs-svg path { fill: none; stroke-width: 1 }
.rs-wire { stroke: rgba(62, 119, 255, .6); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-out) }
.rs-diagram[data-wires="1"] .rs-wire { stroke-dashoffset: 0 }
.rs-diagram[data-agent="1"] .rs-svg { filter: drop-shadow(0 0 4px rgba(62, 119, 255, .5)) }
.rs-dash { stroke: rgba(139, 92, 255, .45); stroke-dasharray: 1.5 4; opacity: 0; transition: opacity 600ms var(--ease-out) }
.rs-diagram[data-chips="1"] .rs-dash { opacity: 1 }
.rs-nd { position: absolute; transform: translate(-50%, -50%); width: 27%; min-width: 92px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border-default); background: rgba(18, 23, 34, .88); font: var(--type-body-sm); font-size: 11.5px; line-height: 1.3; color: var(--text-secondary); opacity: 0; transition: opacity 520ms var(--ease-out) }
.rs-diagram[data-nodes="1"] .rs-nd { opacity: 1 }
.rs-nd .eg-icon { font-size: 15px; color: var(--ion-300); flex: none }
.rs-agent { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; min-width: 108px; min-height: 98px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 14px 12px; text-align: center; border-radius: 12px; border: 1px solid rgba(62, 119, 255, .45); background: linear-gradient(180deg, rgba(11, 76, 250, .22), rgba(11, 76, 250, .05)); font: var(--type-mono-sm); font-size: 10.5px; line-height: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-primary); opacity: 0; transition: opacity 520ms var(--ease-out), box-shadow 760ms var(--ease-out) }
.rs-diagram[data-nodes="1"] .rs-agent { opacity: 1 }
.rs-diagram[data-agent="1"] .rs-agent { box-shadow: 0 0 0 1px rgba(62, 119, 255, .3), 0 0 44px rgba(11, 76, 250, .5), inset 0 1px 0 rgba(255, 255, 255, .1) }
.rs-agent .eg-icon { font-size: 22px; color: var(--signal-300) }
.rs-chip { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: rgba(16, 20, 30, .85); font: var(--type-mono-sm); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; opacity: 0; transition: opacity 520ms var(--ease-out) }
.rs-diagram[data-chips="1"] .rs-chip { opacity: 1 }
.rs-chip .eg-icon { font-size: 13px; color: var(--flux-300) }

.rs-fig { margin-top: 20px; font-size: 104px; line-height: .92; letter-spacing: -0.045em; font-variant-numeric: tabular-nums }
.rs-fig-l { margin-top: 8px; font: var(--type-mono-sm); font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--signal-300) }
.rs-ba { display: flex; align-items: flex-end; gap: 20px; margin-top: 32px }
.rs-ba-v { font-size: 27px; line-height: 1.1; letter-spacing: var(--tracking-tight); white-space: nowrap }
.rs-ba-before .rs-ba-v { color: var(--text-tertiary) }
.rs-ba-after .rs-ba-v { color: var(--signal-300) }
.rs-ba-k { margin-top: 8px; font: var(--type-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted) }
.rs-arrow { flex: 1 1 40px; height: 1px; margin-bottom: 15px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), var(--signal-500)); position: relative; transform: scaleX(0); transform-origin: left; transition: transform 760ms var(--ease-out) }
.rs-impact[data-on="1"] .rs-arrow { transform: none }
.rs-arrow::after { content: ''; position: absolute; right: -1px; top: -3.5px; border-left: 7px solid var(--signal-500); border-top: 4px solid transparent; border-bottom: 4px solid transparent }
.rs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px }
.rs-stat { min-height: 130px; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 12px; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, .02); opacity: 0; transform: translateY(8px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out) }
.rs-impact[data-on="1"] .rs-stat { opacity: 1; transform: none }
.rs-impact[data-on="1"] .rs-stat:last-child { transition-delay: 110ms }
.rs-stat-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(62, 119, 255, .3); color: var(--ion-300) }
.rs-stat-n { margin-top: auto; font-size: 30px; line-height: 1; letter-spacing: var(--tracking-tight); color: var(--text-primary); font-variant-numeric: tabular-nums }
.rs-stat-l { font: var(--type-body-sm); font-size: 12px; line-height: 1.45; color: var(--text-muted) }

.rs-foot { display: flex; align-items: center; gap: 28px; margin-top: 34px; flex-wrap: wrap }
.rs-cta { display: inline-flex; align-items: center; gap: 14px; height: 58px; padding: 0 26px; border-radius: 10px; border: 1px solid rgba(62, 119, 255, .45); background: linear-gradient(180deg, rgba(11, 76, 250, .14), rgba(11, 76, 250, .03)); color: var(--text-primary); font: var(--type-body); font-size: 16px; transition: var(--transition-control) }
.rs-cta:hover { color: var(--text-primary); text-decoration: none; border-color: rgba(139, 92, 255, .6); box-shadow: 0 0 32px rgba(62, 119, 255, .26) }
.rs-nda { display: flex; align-items: center; gap: 10px; font: var(--type-mono-sm); letter-spacing: var(--tracking-wide); color: var(--text-muted) }
.rs-nda .eg-icon { font-size: 16px }

@media (max-width: 1180px) {
  .rs-head { grid-template-columns: minmax(0, 1fr) }
  .rs-panel { grid-template-columns: minmax(0, 1fr) }
  .rs-col { min-height: 0 }
  .rs-col + .rs-col { border-left: 0; border-top: 1px solid var(--border-subtle) }
  .rs-diagram { max-width: 440px }
  .rs-fig { font-size: 86px }
  .rs-body, .rs-title { max-width: 46ch }
}
@media (max-width: 560px) {
  .rs { padding: 72px 0 68px }
  .rs-col { padding: 26px 22px 30px }
  .rs-stats { grid-template-columns: minmax(0, 1fr) }
  .rs-fig { font-size: 68px }
  .rs-seg { flex-wrap: wrap }
}
.lp-narrow .rs { padding: 72px 0 68px }
.lp-narrow .rs-head, .lp-narrow .rs-panel { grid-template-columns: minmax(0, 1fr) }
.lp-narrow .rs-col { min-height: 0; padding: 26px 22px 30px }
.lp-narrow .rs-col + .rs-col { border-left: 0; border-top: 1px solid var(--border-subtle) }
.lp-narrow .rs-diagram { max-width: 380px }
.lp-narrow .rs-fig { font-size: 68px }
.lp-narrow .rs-stats { grid-template-columns: minmax(0, 1fr) }
.lp-narrow .rs-body, .lp-narrow .rs-title { max-width: none }

/* ── 05 Alcance — capability grid ──────────────────────────────────────────
   Nine deliverables read as modules of one system: a single glass surface, a
   contained glow behind its lower-right corner, and a nearly invisible node
   diagram showing through the gaps. Two modules break the even grid. */
.sc { position: relative; background: var(--bg-base); border-top: 1px solid var(--border-subtle) }
.sc-scroll { position: relative; height: 250vh }
.sc-stick { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 72px 0 }
.sc-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 76px; align-items: center }
.sc-h2 { font: var(--type-h2); font-size: 46px; line-height: 1.1; letter-spacing: var(--tracking-tighter); margin-top: 20px; max-width: 13ch }
.sc-body { margin-top: 22px; font: var(--type-body); line-height: 1.64; color: var(--text-tertiary); max-width: 42ch }
.sc-rule { position: relative; height: 1px; background: var(--border-subtle); margin: 32px 0 22px }
.sc-rule i { position: absolute; left: 0; top: 0; width: 0; height: 1px; background: linear-gradient(90deg, var(--ion-500), var(--signal-400)); box-shadow: 0 0 12px rgba(62, 119, 255, .5); transition: width 240ms var(--ease-out) }
.sc-rule i::after { content: ''; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal-300); box-shadow: 0 0 12px rgba(34, 228, 254, .9) }
.sc-note { display: flex; align-items: center; gap: 13px; font: var(--type-body-sm); color: var(--text-secondary) }
.sc-note i { width: 30px; height: 26px; font-variant-numeric: tabular-nums; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1px solid rgba(139, 92, 255, .38); color: var(--flux-300); font-family: var(--font-core); font-size: 11px; font-style: normal }

.sc-panel { position: relative; padding: 20px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(13, 16, 24, .92), rgba(7, 9, 14, .94)) }
.sc-panel::before { content: ''; position: absolute; inset: -46px; z-index: -1; pointer-events: none; background: radial-gradient(58% 58% at 90% 94%, rgba(28, 86, 255, .34), transparent 70%), radial-gradient(46% 46% at 14% 26%, rgba(91, 24, 250, .16), transparent 72%); filter: blur(18px) }
.sc-net { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22px; pointer-events: none; opacity: .55 }
.sc-net path { fill: none; stroke: rgba(120, 160, 255, .3); stroke-width: 1 }
.sc-net circle { fill: rgba(120, 160, 255, .55) }
.sc-head { position: relative; display: flex; justify-content: flex-end; padding: 4px 6px 14px }
.sc-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); font-variant-numeric: tabular-nums; color: var(--text-muted) }
.sc-count b { font-weight: 400; color: var(--ion-300) }
.sc-bar { flex: 1 1 90px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08) }
.sc-bar i { position: relative; display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--ion-500), var(--signal-400)); box-shadow: 0 0 12px rgba(62, 119, 255, .55); transition: width 260ms var(--ease-out) }
.sc-bar i::after { content: ''; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-300); box-shadow: 0 0 10px rgba(34, 228, 254, .9) }
.sc-comb { display: inline-flex; align-items: center; gap: 7px; font: var(--type-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ion-300) }
.sc-comb .eg-icon { font-size: 14px }
.sc-cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.sc-card { display: flex; gap: 14px; min-height: 120px; padding: 18px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .014); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform 480ms var(--ease-out), background var(--dur-base) var(--ease-out), opacity 480ms var(--ease-out) }
.sc-card:hover { transform: translateY(-2px); border-color: rgba(62, 119, 255, .45); background: rgba(62, 119, 255, .04); box-shadow: 0 0 30px rgba(28, 86, 255, .16) }
.sc-card[data-state="cur"] { border-color: rgba(62, 119, 255, .55); background: linear-gradient(180deg, rgba(28, 86, 255, .11), rgba(28, 86, 255, .03)); box-shadow: 0 0 0 1px rgba(62, 119, 255, .12), 0 0 34px rgba(28, 86, 255, .22) }
.sc-card[data-state="on"] { border-color: rgba(255, 255, 255, .09) }
.sc-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(62, 119, 255, .18), rgba(91, 24, 250, .08)); color: var(--ion-300); transition: box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out) }
.sc-ic .eg-icon { font-size: 21px }
.sc-card:hover .sc-ic, .sc-card[data-state="cur"] .sc-ic { color: var(--signal-300); box-shadow: 0 0 22px rgba(62, 119, 255, .45) }
.sc-t { font: var(--type-h5); font-size: 15.5px; letter-spacing: var(--tracking-tight); color: var(--text-primary) }
.sc-d { margin-top: 7px; font: var(--type-body-sm); font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary) }

@media (max-width: 1180px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 44px }
  .sc-h2 { font-size: 40px; max-width: 18ch }
  .sc-body { max-width: 56ch }
}
@media (max-width: 820px) {
  .sc { padding: 76px 0 72px }
  .sc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sc-h2 { font-size: 34px }
}
@media (max-width: 560px) { .sc-cards { grid-template-columns: minmax(0, 1fr) } }
.lp-narrow .sc { padding: 72px 0 68px }
.lp-narrow .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 38px }
.lp-narrow .sc-h2 { font-size: 32px; max-width: none }
.lp-narrow .sc-body { max-width: none }
.lp-narrow .sc-cards { grid-template-columns: minmax(0, 1fr) }
.lp-narrow .sc-panel { padding: 14px }

/* 05: no pinning below the desktop breakpoint — the walk becomes a plain reveal */
@media (max-width: 1180px) {
  .sc-scroll { height: auto }
  .sc-stick { position: static; min-height: 0; padding: 80px 0 76px }
}
.lp-narrow .sc-scroll { height: auto }
.lp-narrow .sc-stick { position: static; min-height: 0; padding: 68px 0 64px }

/* ── 06 Stack — five layers on one data spine ──────────────────────────────
   Chips, not logos, and every one of them is a tool we work with — nothing stays
   greyed out. Scroll lights the architecture layer by layer. The accent here is
   fuchsia, scoped to this section only: --st-rgb primary, --st-lift punctuation. */
.st { position: relative; --st-rgb: 219 30 146; --st-lift: 255 122 205; --st-fg: 255 154 216; background: var(--bg-void); border-top: 1px solid var(--border-subtle); padding: 104px 0 100px; overflow: hidden }
.st::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 40% at 22% 8%, rgb(var(--st-rgb) / .14), transparent 70%), radial-gradient(40% 40% at 78% 96%, rgb(var(--st-rgb) / .11), transparent 70%) }
.st > * { position: relative }
.st-h2 { font: var(--type-h2); font-size: 46px; line-height: 1.1; letter-spacing: var(--tracking-tighter); margin-top: 18px }
.st-sub { margin-top: 16px; font: var(--type-body); color: var(--text-tertiary); max-width: 76ch }
.st-panel { position: relative; margin-top: 40px; padding: 8px 26px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(13, 17, 26, .8), rgba(7, 9, 14, .9)) }
.st-spine { position: absolute; left: 320px; top: 30px; bottom: 30px; width: 1px; background: rgba(255, 255, 255, .1) }
.st-fill { position: absolute; left: 320px; top: 30px; bottom: 30px; width: 1px; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, rgb(var(--st-rgb)), rgb(var(--st-lift))); box-shadow: 0 0 12px rgb(var(--st-rgb) / .6); transition: transform 420ms var(--ease-out) }
.st-flare { position: absolute; left: 320px; bottom: 18px; width: 3px; height: 3px; border-radius: 50%; background: rgb(var(--st-fg)); box-shadow: 0 0 12px 4px rgb(var(--st-lift) / .55), 0 0 40px 12px rgb(var(--st-rgb) / .35); opacity: 0; transition: opacity 520ms var(--ease-out) }
.st-row { position: relative; display: grid; grid-template-columns: 56px 208px 82px minmax(0, 1fr); align-items: center; gap: 0; min-height: 82px; padding: 12px 0; border-top: 1px solid var(--border-subtle) }
.st-row:first-of-type { border-top: 0 }
.st-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 11px; border: 1px solid rgb(var(--st-rgb) / .3); background: rgb(var(--st-rgb) / .07); color: rgb(var(--st-fg)); opacity: .4; transition: opacity 480ms var(--ease-out), box-shadow 480ms var(--ease-out) }
.st-row[data-on="1"] .st-ic { opacity: 1; box-shadow: 0 0 22px rgb(var(--st-rgb) / .32) }
.st-ic .eg-icon { font-size: 22px }
.st-label { font: var(--type-mono-sm); font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); transition: color 480ms var(--ease-out) }
.st-row[data-on="1"] .st-label { color: var(--text-secondary) }
.st-node { position: relative; height: 1px; margin-left: 30px; background: rgba(255, 255, 255, .1) }
.st-node i { position: absolute; left: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); transition: background 480ms var(--ease-out), box-shadow 480ms var(--ease-out) }
.st-row[data-on="1"] .st-node { background: linear-gradient(90deg, rgb(var(--st-rgb)), rgb(var(--st-rgb) / .25)) }
.st-row[data-on="1"] .st-node i { background: rgb(var(--st-fg)); box-shadow: 0 0 12px rgb(var(--st-lift) / .9) }
.st-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.st-chip { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid rgb(var(--st-rgb) / .32); background: linear-gradient(180deg, rgb(var(--st-rgb) / .11), rgb(var(--st-rgb) / .03)); font: var(--type-body-sm); font-size: 13.5px; color: var(--text-primary); opacity: 0; transform: translateY(6px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out) }
.st-row[data-on="1"] .st-chip { opacity: 1; transform: none }
.st-chip:nth-child(2) { transition-delay: 60ms }
.st-chip:nth-child(3) { transition-delay: 120ms }
.st-chip:nth-child(4) { transition-delay: 180ms }
.st-chip i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--st-lift)); box-shadow: 0 0 9px rgb(var(--st-lift) / .85); flex: none }
.st-chip:hover { transform: translateY(-2px); border-color: rgb(var(--st-rgb) / .55); box-shadow: 0 0 26px rgb(var(--st-rgb) / .24); color: var(--text-primary) }

.st-agn { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 30px; align-items: center; margin: 26px 0 0 auto; max-width: 860px; padding: 28px 30px; border-radius: 18px; border: 1px solid rgb(var(--st-rgb) / .26); background: linear-gradient(120deg, rgb(var(--st-rgb) / .12), rgba(7, 9, 14, .6) 62%); overflow: hidden }
.st-agn-ic { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 16px; border: 1px solid rgb(var(--st-rgb) / .34); background: linear-gradient(180deg, rgb(var(--st-rgb) / .18), rgb(var(--st-rgb) / .04)); color: rgb(var(--st-fg)); box-shadow: 0 0 34px rgb(var(--st-rgb) / .24) }
.st-agn-ic .eg-icon { font-size: 44px }
.st-agn-eyebrow { font: var(--type-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgb(var(--st-fg)) }
.st-agn-t { font: var(--type-h4); font-size: 23px; line-height: 1.3; letter-spacing: var(--tracking-tight); margin-top: 12px; max-width: 34ch }
.st-agn-d { margin-top: 8px; font: var(--type-body); color: var(--text-tertiary) }
.st-agn-dots { position: absolute; right: 0; top: 0; bottom: 0; width: 240px; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 100% 60%, #000, transparent 70%); mask-image: radial-gradient(circle at 100% 60%, #000, transparent 70%) }

@media (max-width: 1080px) {
  .st-h2 { font-size: 38px }
  .st-row { grid-template-columns: 48px minmax(0, 1fr); row-gap: 14px; padding: 18px 0 20px }
  .st-ic { width: 40px; height: 40px }
  .st-label { align-self: center }
  .st-node, .st-spine, .st-fill, .st-flare { display: none }
  .st-chips { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
  .st-agn { grid-template-columns: 72px minmax(0, 1fr); gap: 22px; max-width: none }
  .st-agn-ic { width: 72px; height: 72px }
  .st-agn-ic .eg-icon { font-size: 32px }
}
@media (max-width: 560px) {
  .st { padding: 72px 0 68px }
  .st-h2 { font-size: 31px }
  .st-panel { padding: 6px 18px }
  .st-chips { grid-template-columns: minmax(0, 1fr) }
}
.lp-narrow .st { padding: 68px 0 64px }
.lp-narrow .st-h2 { font-size: 30px }
.lp-narrow .st-panel { padding: 6px 16px }
.lp-narrow .st-row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 12px; padding: 16px 0 18px }
.lp-narrow .st-ic { width: 38px; height: 38px }
.lp-narrow .st-node, .lp-narrow .st-spine, .lp-narrow .st-fill, .lp-narrow .st-flare { display: none }
.lp-narrow .st-chips { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 10px }
.lp-narrow .st-agn { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; max-width: none; padding: 22px }
.lp-narrow .st-agn-ic { width: 64px; height: 64px }
.lp-narrow .st-agn-ic .eg-icon { font-size: 28px }

/* 02: pinned stage — the stack builds on a still screen, and the light section
   below stays out of frame until the last plate has landed. */
.lp-cap-section { padding: 0 }
.lp-cap-scroll { position: relative; height: 300vh }
.lp-cap-stick { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 28px 0; overflow: hidden }
.lp-cap-stick .lp-stack { max-width: min(690px, calc((100vh - 300px) * 1.113)) }
.lp-cap-stick .lp-cap-head { margin-bottom: 0 }
@media (max-width: 1120px) {
  .lp-cap-scroll { height: auto }
  .lp-cap-stick { position: static; min-height: 0; padding: 96px 0 100px }
  .lp-cap-stick .lp-stack { max-width: 520px }
}
.lp-narrow .lp-cap-scroll { height: auto }
.lp-narrow .lp-cap-stick { position: static; min-height: 0; padding: 72px 0 76px }
.lp-narrow .lp-cap-stick .lp-stack { max-width: none }

/* ── Cierre — the last scene ───────────────────────────────────────────────
   The rendered field (assets/cta-field.png) carries the horizon and its glow; the
   floating motes and a light seam are all the CSS adds. No divider before the
   footer: the two read as one ending. */
.fc { position: relative; padding: 128px 0 108px; text-align: center; background: #03050A; overflow: hidden }
.fc-plate { position: absolute; inset: 0; pointer-events: none; background: url(../../assets/cta-field.png) center / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%) }
.fc-dot { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--signal-300); box-shadow: 0 0 8px rgba(120, 200, 255, .8); opacity: .5; animation: fc-float 9s var(--ease-move) infinite; pointer-events: none }
@keyframes fc-float { 0%, 100% { transform: translateY(0); opacity: .22 } 50% { transform: translateY(-14px); opacity: .7 } }
.fc-inner { position: relative; z-index: 1 }
.fc-eyebrow { position: relative; display: inline-block; font: var(--type-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #9AACC6 }
.fc-eyebrow::after { content: ''; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: 200px; height: 1px; background: linear-gradient(90deg, transparent, rgba(140, 195, 255, .85), transparent) }
.fc-h { margin: 46px auto 0; font-family: var(--font-core); font-weight: var(--font-weight-regular); font-size: clamp(30px, 5vw, 68px); line-height: 1.17; letter-spacing: -0.032em; color: #FFF; max-width: 24ch; text-wrap: balance }
.fc-h em { font-style: italic; font-weight: var(--font-weight-light); background: linear-gradient(180deg, #FFF 16%, #B6D2FF); -webkit-background-clip: text; background-clip: text; color: transparent }
.fc-sub { margin: 28px auto 0; font: var(--type-body-lg); font-size: 17px; line-height: 1.62; color: #8A96AB; max-width: 62ch }
.fc-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 40px }
.fc-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 278px; height: 66px; padding: 0 28px; border-radius: 12px; border: 1px solid rgba(140, 185, 255, .6); background: linear-gradient(180deg, #2E6DFF, #1445E0); color: #FFF; font: var(--type-body); font-size: 16.5px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 46px -12px rgba(28, 86, 255, .9), 0 0 64px rgba(28, 86, 255, .3); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) }
.fc-btn:hover { color: #FFF; text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 18px 54px -12px rgba(28, 86, 255, 1), 0 0 78px rgba(28, 86, 255, .42) }
.fc-btn .fc-spark { font-size: 19px; color: #EAF2FF }
.fc-btn .fc-arrow { font-size: 18px; transition: transform var(--dur-base) var(--ease-out) }
.fc-btn:hover .fc-arrow { transform: translate(5px, -5px) }
.fc-btn::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60%; left: -70%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); opacity: 0 }
.fc-btn:hover::after { animation: fc-sheen 900ms var(--ease-out) }
@keyframes fc-sheen { 0% { left: -70%; opacity: .9 } 100% { left: 110%; opacity: 0 } }
.fc-btn2 { display: inline-flex; align-items: center; gap: 12px; height: 66px; padding: 0 26px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .02); color: var(--text-secondary); font: var(--type-body); font-size: 16px; transition: var(--transition-control) }
.fc-btn2:hover { color: var(--text-primary); text-decoration: none; border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .04) }
.fc-btn2 .eg-icon { font-size: 19px }
.fc-status { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 36px; font: var(--type-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: #7B8699 }
.fc-status span { display: inline-flex; align-items: center; gap: 10px }
.fc-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor }
.fc-seam { position: absolute; left: 50%; bottom: -1px; width: min(1400px, 96vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(90, 150, 255, .35) 26%, rgba(170, 220, 255, .9) 50%, rgba(90, 150, 255, .35) 74%, transparent) }
.fc-seam::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 260px; height: 86px; transform: translateX(-50%); background: radial-gradient(50% 100% at 50% 100%, rgba(120, 190, 255, .3), transparent 72%) }
@media (max-width: 820px) {
  .fc { padding: 86px 0 76px }
  .fc-h { font-size: clamp(27px, 7vw, 40px); max-width: none }
  .fc-sub { font-size: 15.5px }
  .fc-btn, .fc-btn2 { height: 58px; min-width: 0; width: 100%; max-width: 340px }
  .fc-status { gap: 14px 22px; margin-top: 30px }
}
.lp-narrow .fc { padding: 76px 0 68px }
.lp-narrow .fc-h { font-size: 28px; max-width: none }
.lp-narrow .fc-sub { font-size: 15px }
.lp-narrow .fc-btn, .lp-narrow .fc-btn2 { height: 56px; min-width: 0; width: 100% }
.lp-narrow .fc-status { gap: 12px 20px }