/* =====================================================================
   TEMPLATE — capital-acquisition / King Capital Capital, the shared chrome.
   ---------------------------------------------------------------------
   Five pages hang off this file: index (the capital homepage), financing
   (working capital), buyer-form, seller-form and portal. It owns the
   tokens, the type, the header, the footer and the buttons; each page
   adds only what is its own.

   ⚠️ THE SKIN IN THIS FILE IS A REFERENCE, NOT A DEFAULT. The values you
   see (deep navy base, signal-red accent, condensed uppercase display
   face, square corners, disc CTA) are ONE prospect's design language,
   harvested off their live site. Shipping them to a different client is
   the definition of AI slop. Every :root token below, the masthead
   treatment, the headline two-tone rule, the button language and the two
   decorating motifs (.dots grid, offset solid block) must be re-derived
   from the NEW prospect's live site during the blend pass — see
   README.md §"The blend". The GRID, the motion system and the form
   plumbing are the template; the skin is not.

   Cache: linked as capital.css?v=N. Bump N when this file changes.
   ===================================================================== */

:root {
  /* -- SKIN: King Capital (kingcapitalnyc.com), live site 2026-09-14 ------ */
  /* navy carries every dark surface (it is the footer band and the heading
     ink); the gold is the CTA colour on every Apply Now. */
  --base: #081c3a;
  --base-deep: #050f20;
  --base-lift: #12305c;
  --accent: #ceab5f;
  --accent-deep: #a5894c;
  --accent-on-dark: #ceab5f;   /* the gold holds 7.77:1 on the navy */
  --spot: #ceab5f;

  --base-rgb: 8, 28, 58;
  --base-deep-rgb: 5, 15, 32;
  --accent-rgb: 206, 171, 95;

  --masthead: #ffffff;

  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: Inter, Helvetica, Arial, sans-serif;

  --ink: #081c3a;
  --body: #5e6575;
  --muted: #7b8190;
  --faint: #a3a9b5;

  --canvas: #f7f8fa;
  --paper: #ffffff;
  --line: #e2e5ea;
  --line-soft: rgba(var(--base-rgb), .1);
  --line-dark: rgba(255, 255, 255, .16);
  --on-dark: rgba(255, 255, 255, .74);

  --shell: min(1240px, 100%);
  --ease: cubic-bezier(.2, .8, .25, 1);
  --settle: cubic-bezier(.16, .84, .28, 1);

  /* white on this gold is 2.18:1, so the label is near-black. their own
     site sets white here and loses the contrast. */
  --accent-ink: #111111;       /* 8.65:1 on --accent */
  --accent-text: #866f3e;      /* the gold darkened to 4.82:1 on white */
  --radius: 12px;
  --radius-sm: 9px;
  --pill: 999px;
  --ring-rgb: var(--accent-rgb);

  --lf-accent: #ceab5f;
  --lf-accent-dark: #a5894c;
  --lf-accent-text: #866f3e;
  --lf-accent-ink: #111111;
  --lf-form-dark: #081c3a;
  --lf-form-bg: #f7f8fa;
  --lf-form-border: #e2e5ea;
  --lf-font-heading: var(--font-display);
  --lf-font-body: var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--body);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

::selection { background: rgba(var(--accent-rgb), .16); color: var(--base); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-dark :focus-visible, .cap-footer :focus-visible, .cap-head :focus-visible { outline-color: #fff; }

.shell { width: var(--shell); margin: 0 auto; padding-inline: clamp(20px, 4vw, 44px); }

/* ---------------------------------------------------------------------
   Type. --font-display gets the headlines and the big figures and
   nothing else; anything a person reads at length or types into stays
   --font-body. The uppercase transform and .92 line-height below assume
   a condensed display face — a brand whose headings are set in a normal
   face drops the transform and opens the leading during the blend.
   --------------------------------------------------------------------- */
.display,
.cap-h1, .cap-h2, .cap-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--base);
  line-height: .92;
  letter-spacing: .4px;
}
.cap-h1 { font-size: clamp(46px, 6.2vw, 82px); }
.cap-h2 { font-size: clamp(34px, 4.2vw, 56px); }
.cap-h3 { font-size: clamp(24px, 2.4vw, 32px); }
/* the second half of the headline turns red — how every heading on
   kingcapitalnyc.com is set */
.cap-h1 em, .cap-h2 em, .cap-h3 em, .display em { font-style: normal; color: var(--accent); }
.on-dark .cap-h1, .on-dark .cap-h2, .on-dark .cap-h3 { color: #fff; }
.on-dark .cap-h1 em, .on-dark .cap-h2 em, .on-dark .cap-h3 em { color: var(--accent-on-dark); }

.eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.on-dark .eyebrow { color: rgba(255, 255, 255, .62); }

.lede { max-width: 56ch; font-size: 16.5px; line-height: 1.78; color: var(--body); }
.on-dark .lede { color: var(--on-dark); }

/* the hairline they draw under every section heading */
.rule { height: 1px; margin: 26px 0 0; background: var(--line); border: 0; }
.on-dark .rule { background: var(--line-dark); }

/* ---------------------------------------------------------------------
   Buttons. The primary is their "Read More ●" — a label with a filled
   red disc carrying a chevron. Nothing else on the site is round, which
   is exactly what makes the disc read as King Capital's.
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 26px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-solid { background: var(--base); border-color: var(--base); color: #fff; }
.btn-solid:hover { background: var(--base-deep); border-color: var(--base-deep); }
.btn-red { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-red:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost:hover { border-color: var(--base); color: var(--base); }
.on-dark .btn { border-color: var(--line-dark); color: #fff; }
.on-dark .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); color: #fff; }

/* the disc */
.btn-disc::after,
.arrow-link::after {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  transition: transform .2s var(--ease);
}
.btn-disc:hover::after, .arrow-link:hover::after { transform: translateX(3px); }
/* inside a red button the disc inverts: white plate, red chevron */
.btn-red.btn-disc::after {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CEAB5F' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
/* and on a dark ghost button it takes the lifted red so it does not go muddy */
.on-dark .btn-ghost.btn-disc::after { background-color: var(--accent-on-dark); }

/* the inline "Read More ●" used inside cards and rows */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--base);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.on-dark .arrow-link { color: #fff; }

/* ---------------------------------------------------------------------
   Motifs. Two flat shapes do all the decorating on kingcapitalnyc.com: a
   dotted grid that peeks out from behind a picture, and a solid navy or
   red block offset under one corner of it.
   --------------------------------------------------------------------- */
.dots {
  position: absolute;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
  background-size: 12px 12px;
  color: rgba(var(--base-rgb), .26);
  pointer-events: none;
}
.on-dark .dots { color: rgba(255, 255, 255, .22); }

/* ============================ masthead ============================ */
.cap-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--masthead);
}
.cap-nav { min-height: 84px; display: flex; align-items: center; gap: 30px; }

/* The lockup. Two storeys: the wordmark, and the division under it —
   that is what tells a visitor they are on capital, not on kingcapitalnyc.com.
   The tracking on the second line is tuned to the width of the first. */
.lockup { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.lockup img { width: 34px; height: 34px; }
.lockup-name { display: grid; gap: 3px; line-height: 1; }
.lockup-name strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #fff;
}
.lockup-name strong i { font-style: normal; color: var(--accent); }
/* The divisional line is tracked out until its glyph run measures exactly
   as wide as the wordmark above it. MEASURE, don't guess: width of the
   wordmark at its final size, minus the natural width of "CAPITAL" (or
   whatever the division reads), divided by the inter-letter gaps. The
   negative margin cancels the trailing gap, which would otherwise push
   the run past the wordmark's right edge.
   ⚠️ These two numbers are tuned PER BRAND NAME — a 4-letter and a
   14-letter wordmark need completely different tracking. Retune them in
   every blend, and again if .lockup-name strong ever changes size. */
.lockup-name em {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 11.4px;
  margin-right: -11.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
/* on the light surfaces — the portal bar, the footer of the forms */
.lockup-dark .lockup-name strong { color: var(--base); }
.lockup-dark .lockup-name em { color: var(--muted); }

.cap-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.cap-links a {
  position: relative;
  padding: 6px 0;
  color: rgba(255, 255, 255, .82);
  font-size: 13.2px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: color .18s var(--ease);
}
.cap-links a:hover { color: #fff; }
/* the red underline on the current page — theirs, verbatim */
.cap-links a.active { color: var(--accent); }
.cap-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
}

.cap-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.cap-login {
  color: rgba(255, 255, 255, .82);
  font-size: 13.2px;
  font-weight: 500;
}
.cap-login:hover { color: #fff; }
.cap-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 20px;
  background: var(--accent);
  color: #fff;
  font-size: 11.6px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s var(--ease);
}
.cap-cta:hover { background: var(--accent-deep); }
.cap-cta::after { content: "→"; font-size: 14px; line-height: 1; }

.cap-burger { display: none; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; }
.cap-burger span { display: block; width: 22px; height: 2px; margin: 5px auto; background: #fff; }

/* ============================ footer ============================ */
.cap-footer { background: var(--base); color: var(--on-dark); }

/* their newsletter strip: a full-bleed red band with the sign-up in it */
.cap-strip { background: var(--accent); color: #fff; }
.cap-strip .shell {
  min-height: 132px;
  padding-block: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cap-strip .eyebrow { margin: 0 0 6px; color: rgba(255, 255, 255, .78); }
.cap-strip .cap-h3 { color: #fff; }
.cap-strip-contact { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cap-strip-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
}
.cap-strip-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

.cap-footer-main {
  padding: 68px 0 52px;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
}
.cap-footer-brand p { max-width: 300px; margin: 18px 0 22px; font-size: 13.4px; line-height: 1.8; color: var(--on-dark); }
.cap-socials { display: flex; gap: 10px; }
/* the glyphs are <img>, so their colour is declared inside the file — an
   <img>-loaded SVG is its own document and cannot inherit currentColor here */
.cap-socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.cap-socials a:hover { background: var(--accent); border-color: var(--accent); }
.cap-socials img { width: 16px; height: 16px; }

.cap-footer-col h3 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.cap-footer-col a { display: block; margin-bottom: 10px; font-size: 13.4px; color: var(--on-dark); }
.cap-footer-col a:hover { color: #fff; }

.cap-footer-bottom {
  padding: 22px 0 30px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  font-size: 11.6px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .52);
}
.cap-footer-bottom p { max-width: 640px; margin: 0; }

/* ============================ responsive ============================ */
@media (max-width: 1080px) {
  .cap-links { gap: 20px; }
  .cap-links a { font-size: 12.6px; }
}
@media (max-width: 940px) {
  .cap-burger { display: block; }
  .cap-links {
    position: fixed;
    inset: 84px 0 auto;
    margin: 0;
    padding: 22px clamp(20px, 4vw, 44px) 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--masthead);
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: none;
  }
  .cap-links.open { display: flex; }
  .cap-links a { width: 100%; padding: 12px 0; font-size: 15px; }
  .cap-links a.active::after { display: none; }
  .cap-login { display: none; }
  .cap-footer-main { grid-template-columns: 1fr 1fr; }
  .cap-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .cap-nav { min-height: 72px; }
  .cap-links { inset-block-start: 72px; }
  .cap-footer-main { grid-template-columns: 1fr; }
  .cap-footer-brand { grid-column: auto; }
  .cap-footer-bottom { flex-direction: column; }
  .cap-cta { padding: 9px 14px; }
}

/* =====================================================================
   Motion.
   ---------------------------------------------------------------------
   Un solo gesto en todo el sitio: 14px hacia arriba y un fundido. Se
   repite en cada sección, así que después de la primera el ojo ya sabe
   qué va a pasar — y esa previsibilidad ES la sensación de solidez.

   Nada entra desde fuera de la pantalla, nada escala desde cero, nada
   rebota. Las distancias son cortas a propósito: un elemento que viaja
   14px se lee como que estaba ahí y se acomodó; uno que viaja 80px se
   lee como que llegó corriendo.

   Duraciones: 680ms para entradas, 180ms para hover, 90ms para el
   press. Los 680 están muy por encima del rango habitual de web
   (150-200), y es deliberado: eso es feedback funcional, esto es
   contenido apareciendo. A 250ms el mismo movimiento se siente
   nervioso, y bajando de 500 con scroll lento ni se alcanza a ver.
   ===================================================================== */

/* El estado oculto vive bajo html.js, y esa clase la pone un script
   inline en el <head> antes del primer pintado. Sin JS no hay nada
   escondido: la página abre completa, sin movimiento. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .68s var(--settle) var(--d, 0ms),
              transform .68s var(--settle) var(--d, 0ms);
  will-change: auto;
}

/* La mitad de arriba no depende del JS: corre en un keyframe de CSS con
   fill-mode both. Si capital.js no existe, esto igual sucede. */
@keyframes cap-settle {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* `backwards`, NUNCA `both`.
   Con `both` el elemento se queda pegado al fotograma final de la
   animación, así que si la animación no llega a correr —una pestaña en
   segundo plano, un webview que congela el compositor— se queda en
   opacity 0 y la mitad de arriba de la página nunca aparece. Con
   `backwards` el estado en reposo es el del propio elemento, o sea
   visible, y la animación solo lo pisa mientras dura. */
.hero-inner > *,
.fin-hero-grid > *,
.doors,
/* El hero de los formularios: la columna de texto de un lado y la
   tarjeta del otro. Se le había escapado — usa .lf-hero-grid, no las
   clases de las páginas de marketing. */
.lf-hero-copy > *,
.lf-q,
.lf-apply-card {
  animation: cap-settle .62s var(--settle) backwards;
}
/* El titular es el ancla; lo demás lo sigue. Dos animaciones igual de
   fuertes se anulan — el ojo tiene que saber a dónde ir primero. */
.hero-inner > .cap-h1        { animation-delay: .04s; }
.hero-inner > .lede         { animation-delay: .16s; }
.hero-inner > .hero-points  { animation-delay: .26s; }
.fin-hero-grid > :last-child { animation-delay: .14s; }
.doors                       { animation-delay: .22s; }

/* En el formulario el ancla es el titular; la tarjeta llega después,
   que es el orden en que se lee la pantalla: primero qué es esto,
   después dónde empiezo. Una vez puesta, la tarjeta no se mueve más —
   ese sigue siendo el trato. */
.lf-hero-copy > h1            { animation-delay: .04s; }
.lf-hero-copy > p             { animation-delay: .14s; }
.lf-hero-copy > .lf-hero-points { animation-delay: .22s; }
.lf-q, .lf-apply-card         { animation-delay: .3s; }
/* Los tres puntos del hero entran uno detrás de otro. */
.lf-hero-points li { animation: cap-settle .5s var(--settle) backwards; }
.lf-hero-points li:nth-child(1) { animation-delay: .3s; }
.lf-hero-points li:nth-child(2) { animation-delay: .36s; }
.lf-hero-points li:nth-child(3) { animation-delay: .42s; }
/* La bifurcación Sell side / Buy side, con la tarjeta. */
.lf-fork { animation: cap-settle .5s var(--settle) backwards .36s; }

/* El bloque sólido detrás de la foto entra después de la foto, corrido
   unos pixeles: se lee como que se acomodó detrás, no como que apareció. */
.figure::after, .fin-hero-figure::after {
  animation: cap-block .68s var(--settle) backwards .3s;
}
@keyframes cap-block {
  from { opacity: 0; transform: translate(10px, 10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   Feedback. Corto, y siempre sobre una propiedad que el compositor
   puede mover solo — nunca sobre width, height, top o left.
   --------------------------------------------------------------------- */

/* La tarjeta reconoce el cursor con un filo rojo que se dibuja desde la
   izquierda. Es el mismo rojo del subrayado del nav: una sola idea. */
.door, .card, .product { position: relative; }
.door::before, .card::before, .product::before {
  content: "";
  position: absolute;
  inset: -1px auto auto -1px;
  width: calc(100% + 2px);
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s var(--ease);
}
.door:hover::before, .card:hover::before, .product:hover::before { transform: scaleX(1); }
.card.accent::before { background: #fff; }

/* Los enlaces del nav estrenan el mismo subrayado que marca la página
   actual, en vez de solo cambiar de color. */
.cap-links a:not(.active)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s var(--ease);
}
.cap-links a:not(.active):hover::after { transform: scaleX(1); }

/* Press. 90ms y un 1.5% — no se ve, se siente, y es lo que separa un
   botón que responde de uno que solo cambia de color. */
.btn, .cap-cta, .arrow-link { transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .09s var(--ease); }
.btn:active, .cap-cta:active { transform: scale(.985); }

/* El disco ya se corría al hover; que también acuse el click. */
.btn-disc:active::after, .arrow-link:active::after { transform: translateX(1px) scale(.94); }

/* Los numerales grandes de los pasos se tiñen al pasar por la fila
   entera, no solo por el número. */
.steps li b { transition: color .22s var(--ease); }

/* ---------------------------------------------------------------------
   Y si el sistema pidió menos movimiento, no hay ninguno. capital.js
   además se apaga solo y quita la clase js, así que nada queda oculto.
   --------------------------------------------------------------------- */
/* Y la red: capital.js pone esta clase a los 3 segundos pase lo que pase.
   Un compositor congelado deja de importar — la animación se retira y cada
   elemento vuelve a su estado propio, que es visible. */
.cap-settled .hero-inner > *,
.cap-settled .fin-hero-grid > *,
.cap-settled .doors,
.cap-settled .lf-hero-copy > *,
.cap-settled .lf-hero-points li,
.cap-settled .lf-fork,
.cap-settled .lf-q,
.cap-settled .lf-apply-card,
.cap-settled .figure::after,
.cap-settled .fin-hero-figure::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .hero-inner > *, .fin-hero-grid > *, .doors,
  .lf-hero-copy > *, .lf-hero-points li, .lf-fork, .lf-q, .lf-apply-card,
  .figure::after, .fin-hero-figure::after { animation: none; }
  .btn:active, .cap-cta:active { transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   Segunda capa: los sitios donde la página responde a la persona.
   ---------------------------------------------------------------------
   La primera capa era contenido apareciendo. Esta es la interfaz
   acusando recibo — y es la que hace que un formulario de cinco pasos
   no se sienta un trámite.

   La regla que sigue en pie: nada se mueve MIENTRAS alguien escribe.
   Lo que se mueve es el cambio de paso, el foco, el error y la cifra
   que se recalcula. Los campos, quietos.
   ===================================================================== */

/* ---- el titular llega en dos tiempos --------------------------------
   El titular a dos tonos es la firma de la marca, así que se anima como
   tal: primero asienta la parte navy, y el rojo entra después. El ojo
   lee la frase y recibe el remate. */
@keyframes cap-fade { from { opacity: 0; } to { opacity: 1; } }
.hero .cap-h1 em,
.fin-hero .cap-h1 em { animation: cap-fade .5s linear backwards .34s; }
.js .reveal .cap-h2 em,
.js .reveal .lf-section-head h2 em { opacity: 0; }
.js .reveal.in .cap-h2 em,
.js .reveal.in .lf-section-head h2 em { opacity: 1; transition: opacity .45s linear calc(var(--d, 0ms) + .26s); }

/* ---- la foto del hero respira ----------------------------------------
   24s, imperceptible por diseño. No se ve moverse; se nota que no está
   muerta. El estado inicial es un scale, no una opacidad, así que un
   compositor congelado no esconde nada. */
@keyframes cap-drift { from { transform: scale(1.05); } to { transform: scale(1); } }
.hero::before, .fin-hero::before { animation: cap-drift 24s ease-out both; }

/* =====================================================================
   Los formularios
   ===================================================================== */

/* ---- cambio de paso --------------------------------------------------
   El paso entrante viene del lado hacia el que vas: adelante entra por
   la derecha, Atrás por la izquierda. Es la señal más barata de "dónde
   estoy" en un flujo de cinco pantallas. 18px, no 60: es una pista de
   dirección, no un carrusel. */
@keyframes lf-step-fwd  { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes lf-step-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.lf-fin .lf-step.now { animation: lf-step-fwd .38s var(--settle) backwards; }
[data-dir="back"] .lf-fin .lf-step.now,
.lf-fin [data-dir="back"] .lf-step.now { animation-name: lf-step-back; }
.lf-apply-card[data-dir="back"] .lf-step.now { animation-name: lf-step-back; }

/* ---- el riel de progreso se llena ------------------------------------
   El borde de arriba deja de cambiar de color y pasa a LLENARSE de
   izquierda a derecha. Un tramo que se pinta se lee como avance; uno
   que cambia de color, como un estado. */
.lf-fin .lf-progress li { position: relative; }
.lf-fin .lf-progress li::after {
  content: "";
  position: absolute;
  top: -3px; left: 0; right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--settle);
}
.lf-fin .lf-progress li.now::after,
.lf-fin .lf-progress li.done::after { transform: scaleX(1); }
.lf-fin .lf-progress li.done::after { background: var(--teal); }

/* ---- foco -------------------------------------------------------------
   ⚠️ Trampa histórica: en un port anterior este anillo llegó con el rgba
   del acento de OTRA marca escrito a mano y sobrevivió dos revisiones.
   Por eso ahora deriva de --accent-rgb y nunca se escribe literal. */
.lf-fin .lf-input:focus, .lf-fin .lf-select:focus, .lf-fin textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13) !important;
}

/* ---- error ------------------------------------------------------------
   El mensaje baja en lugar de aparecer de golpe, y el campo da un
   desplazamiento corto. El movimiento acá está motivado: algo fue
   rechazado. 3px y dos ciclos — suficiente para notarlo, no tanto como
   para regañar. */
@keyframes lf-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lf-fin .lf-err:not(:empty) { animation: lf-drop .26s var(--ease) backwards; }
@keyframes lf-refuse {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.lf-fin .lf-input.is-err, .lf-fin .lf-select.is-err { animation: lf-refuse .22s var(--ease); }

/* ---- documentos -------------------------------------------------------
   Cada archivo adjunto entra por su cuenta, y la sección marca el check
   con un trazo, no con un cambio de color. */
@keyframes lf-file-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lf-fin .lf-uplist li { animation: lf-file-in .3s var(--settle) backwards; }
.lf-fin .lf-doc { transition: border-color .3s var(--ease), background .3s var(--ease); }

/* ---- la pantalla final -------------------------------------------------
   El único momento con permiso para celebrar, y aun así con mesura: el
   disco entra una vez y se queda. */
@keyframes lf-seal { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.lf-fin .lf-done-mark { animation: lf-seal .5s var(--settle) backwards .06s; }

/* ---- la cifra que se recalcula ----------------------------------------
   capital.js la hace rodar hasta el valor nuevo en vez de cambiarla de
   golpe. Es el momento en que el formulario demuestra que está
   trabajando para vos, así que se le da el tiempo de verse. */
.lf-fin #calcOut, .stat b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .lf-fin .lf-step.now, .lf-fin .lf-err:not(:empty), .lf-fin .lf-input.is-err,
  .lf-fin .lf-uplist li, .lf-fin .lf-done-mark,
  .hero::before, .fin-hero::before,
  .hero .cap-h1 em, .fin-hero .cap-h1 em { animation: none; }
  .js .reveal .cap-h2 em, .js .reveal .lf-section-head h2 em { opacity: 1; }
}

/* ---- white masthead -------------------------------------------------
   The template paints the bar for a DARK header. All three of these
   prospects run a white one, so every token in the rail flips to ink and
   the footer (.on-dark) takes the light values back. ------------------ */
.lockup-name strong { color: var(--ink); }
.lockup-name em { color: var(--muted); }
.cap-links a { color: var(--body); }
.cap-links a:hover { color: var(--ink); }
.cap-links a.active { color: var(--accent-text); }
.cap-login { color: var(--body); }
.cap-login:hover { color: var(--ink); }
.cap-burger span { background: var(--ink); }
.cap-footer .lockup-name strong, .on-dark .lockup-name strong { color: #f7f7f7; }
.cap-footer .lockup-name em, .on-dark .lockup-name em { color: rgba(255, 255, 255, .58); }
.cap-footer .lockup img, .on-dark .lockup img { background: #fff; padding: 3px; box-sizing: content-box; }
@media (max-width: 940px) { .cap-links { background: var(--paper); } }
/* the rail has to survive six doors: it never fit between the burger
   and ~1290px, which is the band QA at exactly 1280 hides. Con la puerta
   de home equity el borde volvió a moverse: entre la hamburguesa (940) y
   ~1010px el riel se salía 5px y la página ganaba scroll horizontal, así
   que hay un escalón más antes de que la hamburguesa tome el relevo. */
@media (max-width: 1360px) { .cap-links { gap: 18px; } .cap-links a { font-size: 12.2px; } }
@media (max-width: 1240px) { .cap-links { gap: 13px; } .cap-links a { font-size: 11.4px; letter-spacing: .03em; } .cap-links a[target="_blank"] { display: none; } }
@media (max-width: 1080px) { .cap-nav { gap: 16px; } .cap-links { gap: 10px; } .cap-links a { font-size: 11px; } .cap-actions { gap: 12px; } }

.cap-links a { white-space: nowrap; }

/* A 375px la cabecera no cabía: el lockup (151px) más el CTA y la hamburguesa
   (199px) suman 386 contra 335 de shell, y la página ganaba 11px de scroll
   horizontal. Se encoge lo elástico —marca y CTA— en vez de esconder el CTA,
   que en móvil es la única acción: el menú desplegable no lo lleva. */
@media (max-width: 460px) {
  .cap-nav { gap: 10px; }
  .lockup { gap: 8px; }
  .lockup img { width: 28px; height: 28px; }
  .lockup-name strong { font-size: 17px; }
  .lockup-name em { font-size: 8px; letter-spacing: 8.6px; margin-right: -8.6px; }
  .cap-actions { gap: 8px; }
  .cap-cta { gap: 6px; padding: 8px 12px; font-size: 10.5px; }
  .cap-burger { width: 34px; }
}