/* ============================================================
   Aureo Capital — "La Convergencia" landing
   Split-stage grammar. Page classes only; the engine files are
   untouched. Brand: azul #10285A/#081431, naranja #FF9719,
   Prompt / General Sans / Archivo Expanded.
   ============================================================ */

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt-Regular.ttf') format('truetype');
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/Archivo_Expanded-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

/* The rebrand: six colours, two faces (labels borrow the third). */
:root {
  --sc-canvas:     #081431;
  --sc-surface:    #0f2350;
  --sc-ink:        #f2f5fb;
  --sc-ink-soft:   #9aa8c6;
  --sc-accent:     #ff9719;
  --sc-accent-ink: #081431;
  --sc-font-display: 'Prompt', system-ui, sans-serif;
  --sc-font-text:    'General Sans', 'Helvetica Neue', system-ui, sans-serif;
  --sc-font-mono:    'Archivo Expanded', 'Prompt', system-ui, sans-serif;

  /* Deal state. 0 = maximum distance, 1 = closed. JS drives it. */
  --deal: 0;
  --halfgap: calc((1 - var(--deal)) * 6.5vw + 0.75rem);
}

/* ---------------------------------------------------- grounds --
   Two grounds, one per side, held (no drift). They dissolve into
   one canvas as the deal closes. */
.grounds { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.grounds::before, .grounds::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50%;
  opacity: calc(1 - var(--deal));
}
.grounds::before { left: 0;  background: linear-gradient(105deg, #0d1f47 0%, #0a1838 70%, transparent 100%); }
.grounds::after  { right: 0; background: linear-gradient(255deg, #060e26 0%, #081231 70%, transparent 100%); }

/* --------------------------------------------------- chrome -- */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1rem, 3vw, 2.2rem);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
.chrome__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-decoration: none; }
.chrome__brand img { height: 30px; width: auto; }
.chrome__by {
  font-family: var(--sc-font-mono); font-size: 0.38rem;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--sc-ink-soft); opacity: 0.55;
  padding-left: 2.4rem; line-height: 1;
}
.chrome__lang {
  font-family: var(--sc-font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--sc-ink); text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent);
  border-radius: 999px; padding: 0.42rem 0.9rem;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.chrome__lang:hover { border-color: var(--sc-accent); color: var(--sc-accent); }

/* ------------------------------------------- the signature move --
   "La distancia": two hairlines, one per side. The gap between
   them is the deal. Stages stamp into the gap as they are passed.
   At the close the lines meet and hand over to the hexagon. */
.dist { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
.dist__line {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--sc-ink) 30%, transparent) 12%,
    color-mix(in oklab, var(--sc-ink) 30%, transparent) 88%,
    transparent 100%);
  will-change: transform;
}
.dist__line--l { transform: translateX(calc(-1 * var(--halfgap))); }
.dist__line--r { transform: translateX(var(--halfgap)); }
.dist__tag {
  position: absolute; top: 5.2rem; left: 50%;
  font-family: var(--sc-font-mono); font-size: 0.55rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sc-ink-soft); white-space: nowrap;
  will-change: transform;
}
.dist__tag--v { transform: translateX(calc(-100% - var(--halfgap) - 0.9rem)); }
.dist__tag--c { transform: translateX(calc(var(--halfgap) + 0.9rem)); }

.dist__stamp {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(6px);
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  opacity: 0;
  transition: opacity 480ms var(--sc-ease-out), transform 480ms var(--sc-ease-out);
}
.dist__stamp.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.dist__stamp i {
  width: 9px; height: 10px; display: block;
  background: var(--sc-accent);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.dist__stamp span {
  font-family: var(--sc-font-mono); font-size: 0.5rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sc-ink-soft); white-space: nowrap;
}
.dist__stamp--1 { top: 26%; }
.dist__stamp--2 { top: 38%; }
.dist__stamp--3 { top: 50%; }
.dist__stamp--4 { top: 62%; }

/* Once the fuse begins, the record steps back so the close owns the center. */
html.fusing .dist__stamp { opacity: 0.12; }

/* Lines and tags step aside once the deal is done. */
html.deal-done .dist__line, html.deal-done .dist__tag { opacity: 0; transition: opacity 700ms var(--sc-ease-out); }
html.deal-done .dist__stamp { opacity: 0.28; }

/* The mobile trace: same state, drawn as a bottom rail. */
.trace { display: none; }

/* ------------------------------------------------------ duo --
   The split layout every act uses. Columns face the divider and
   slide toward it as the deal closes. */
.duo {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
}
.duo__v { grid-column: 1; text-align: right; padding-right: calc(var(--halfgap) + 3.2rem); will-change: transform; }
.duo__c { grid-column: 2; text-align: left;  padding-left:  calc(var(--halfgap) + 3.2rem); will-change: transform; }

/* ----------------------------------------------------- hero -- */
.hero__stage { display: grid; align-content: center; }
.hero__grid { align-items: center; row-gap: 2rem; }
.hero__side .sc-body { margin-top: 1.1rem; }
.hero__v .sc-body { margin-left: auto; max-width: 30ch; }
.hero__c .sc-body { max-width: 30ch; }
.hero__meet {
  position: absolute; left: 50%; bottom: clamp(2.6rem, 9vh, 6rem);
  transform: translateX(-50%);
  text-align: center; z-index: 6; width: max-content; max-width: 90vw;
}
.hero__meet .sc-lede { max-width: none; }

/* ----------------------------------------------- la distancia -- */
.gapfacts { padding-block: calc(var(--sc-section) * 0.35) var(--sc-section); position: relative; z-index: 5; }
.gapfacts .duo { row-gap: 1rem; align-items: start; }
.gapfacts__label {
  font-family: var(--sc-font-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sc-accent); display: block;
  margin-bottom: 1.4rem;
}
.fearpanel { overflow: clip; padding-block: 0.2rem; }
.fearpanel p {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); line-height: 1.18; letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink); margin: 0 0 1.15rem;
  text-wrap: balance;
}
.fearpanel p:last-child { margin-bottom: 0; }
.gapfacts__bridge {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  display: grid; justify-items: center;
}
.gapfacts__bridge .sc-body { text-align: center; max-width: 44ch; }

/* ------------------------------------------------- valuación --
   The football field draws itself from --sc-p and is the first
   object to cross the divider. */
.val__stage { display: grid; align-content: center; row-gap: clamp(1.6rem, 4vh, 3rem); }
.val__head { position: relative; z-index: 6; }
.val__head .sc-body { margin-top: 1rem; }
.val__close-line { position: relative; z-index: 6; }

.ff {
  position: relative; z-index: 6;
  width: min(72rem, 92vw); margin-inline: auto;
  height: clamp(13rem, 34vh, 19rem);
}
.ff__row { position: absolute; left: 0; right: 0; height: 2px; }
.ff__row--1 { top: 8%; }
.ff__row--2 { top: 34%; }
.ff__row--3 { top: 60%; }
.ff__row--4 { top: 86%; }
.ff__bar {
  position: absolute; top: 0; height: 2px;
  left: calc(var(--x0) * 100%);
  width: calc((var(--x1) - var(--x0)) * 100%);
  background: color-mix(in oklab, var(--sc-ink) 72%, transparent);
  transform-origin: left center;
  transform: scaleX(var(--pi, 0));
}
.ff__bar::before, .ff__bar::after {
  content: ""; position: absolute; top: -5px; width: 1px; height: 12px;
  background: color-mix(in oklab, var(--sc-ink) 72%, transparent);
}
.ff__bar::before { left: 0; }
.ff__bar::after { right: 0; }
.ff__row--1 .ff__bar { --pi: clamp(0, calc(var(--sc-p, 0) * 3.2 - 0.35), 1); }
.ff__row--2 .ff__bar { --pi: clamp(0, calc(var(--sc-p, 0) * 3.2 - 0.75), 1); }
.ff__row--3 .ff__bar { --pi: clamp(0, calc(var(--sc-p, 0) * 3.2 - 1.15), 1); }
.ff__row--4 .ff__bar { --pi: clamp(0, calc(var(--sc-p, 0) * 3.2 - 1.55), 1); }
.ff__lab {
  position: absolute; top: -1.7rem; left: calc(var(--x0) * 100%);
  font-family: var(--sc-font-mono); font-size: 0.55rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft);
  opacity: var(--pi, 0);
}
.ff__row--1 .ff__lab { --pi: clamp(0, calc(var(--sc-p, 0) * 3.2 - 0.35), 1); }
.ff__row--2 .ff__lab { --pi: clamp(0, calc(var(--sc-p, 0) * 3.2 - 0.75), 1); }
.ff__row--3 .ff__lab { --pi: clamp(0, calc(var(--sc-p, 0) * 3.2 - 1.15), 1); }
.ff__row--4 .ff__lab { --pi: clamp(0, calc(var(--sc-p, 0) * 3.2 - 1.55), 1); }
.ff__band {
  position: absolute; top: -2%; bottom: -2%;
  left: 44%; width: 14%;
  background: color-mix(in oklab, var(--sc-accent) 14%, transparent);
  border-inline: 1px solid color-mix(in oklab, var(--sc-accent) 55%, transparent);
  opacity: clamp(0, calc(var(--sc-p, 0) * 2.4 - 1.5), 1);
}
.ff__band span {
  position: absolute; left: 50%; bottom: -2rem; transform: translateX(-50%);
  font-family: var(--sc-font-mono); font-size: 0.55rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sc-accent); white-space: nowrap;
}

/* ------------------------------------------------- silencio -- */
.hush { min-height: 92vh; display: grid; align-content: center; position: relative; z-index: 5; }
.hush p {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  color: var(--sc-ink-soft); margin: 0;
}

/* ---------------------------------------------------- peak -- */
.peak__stage { display: grid; align-content: center; }
.peak__stages { position: relative; min-height: 34vh; }
.stage { position: absolute; inset: 0; display: grid; align-content: center; }
.stage .duo { row-gap: 0.6rem; }
.stage p {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl);
  line-height: 1.2; letter-spacing: var(--sc-track-snug); margin: 0;
  text-wrap: balance;
}
.stage small {
  display: block; margin-top: 0.7rem;
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft); letter-spacing: var(--sc-track-normal);
}

.fuse { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; z-index: 8; text-align: center; }
.fuse__mark {
  width: clamp(84px, 9vw, 120px); height: auto;
  transform: scale(calc(0.9 + var(--sc-p, 0) * 0.1));
}
.fuse h2 { margin-top: 2rem; font-size: var(--sc-t-3xl); }
.fuse .sc-body { margin-top: 1.1rem; max-width: 46ch; text-wrap: balance; }
.fuse__cta {
  display: inline-block; margin-top: 2.2rem;
  background: linear-gradient(135deg, #f7810a 0%, #ffb244 100%);
  color: var(--sc-accent-ink); text-decoration: none;
  font-family: var(--sc-font-text); font-size: var(--sc-t-base);
  padding: 0.95rem 2.2rem; border-radius: 999px;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), filter var(--sc-d-fast) var(--sc-ease-out);
}
.fuse__cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.fuse__cta:active { transform: translateY(1px); }

.colo {
  position: absolute; inset: auto 0 0 0; z-index: 9;
  padding: 1.1rem var(--sc-gutter) calc(2.6rem + env(safe-area-inset-bottom));
  display: grid; gap: 0.45rem; justify-items: center; text-align: center;
}
.colo nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center; }
.colo a {
  color: var(--sc-ink-soft); text-decoration: none;
  font-size: 0.78rem; letter-spacing: 0.02em;
}
.colo a:hover { color: var(--sc-ink); }
.colo p { margin: 0; font-size: 0.68rem; color: color-mix(in oklab, var(--sc-ink-soft) 75%, transparent); max-width: 72ch; }

/* ------------------------------------------------ mobile ---- */
@media (max-width: 860px) {
  :root { --halfgap: calc((1 - var(--deal)) * 4vw + 0.4rem); }
  .duo { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .duo__v, .duo__c { grid-column: 1; text-align: left; padding: 0; }
  .hero__v .sc-body { margin-left: 0; }
  .hero__meet { position: static; transform: none; margin-top: 2.4rem; text-align: left; width: auto; padding-inline: var(--sc-gutter); }
  .hero__stage { align-content: center; padding-block: 4.5rem; }

  /* The distance redraws as a bottom trace: V and C slide to meet. */
  .dist { display: none; }
  .trace {
    display: block; position: fixed; z-index: 26; pointer-events: none;
    left: 1.1rem; right: 1.1rem;
    bottom: calc(0.9rem + env(safe-area-inset-bottom));
    height: 2px;
    background: color-mix(in oklab, var(--sc-ink) 18%, transparent);
  }
  .trace i {
    position: absolute; top: -4.5px; width: 10px; height: 11px;
    background: var(--sc-accent);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    will-change: transform;
  }
  .trace i:first-of-type { left: 0; transform: translateX(calc(var(--deal) * var(--trace-half, 40vw))); }
  .trace i:last-of-type { right: 0; transform: translateX(calc(-1 * var(--deal) * var(--trace-half, 40vw))); }
  .trace span {
    position: absolute; top: -1.6rem;
    font-family: var(--sc-font-mono); font-size: 0.5rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--sc-ink-soft);
  }
  .trace span:first-of-type { left: 0; }
  .trace span:last-of-type { right: 0; }
  html.deal-done .trace { opacity: 0.25; transition: opacity 700ms var(--sc-ease-out); }

  .peak__stages { min-height: 46vh; }
  .stage p { font-size: var(--sc-t-lg); }
  .chrome__by { display: none; }
  .colo nav { gap: 0.3rem 1rem; }
  .ff { height: 15rem; }
}

/* --------------------------------------- reduced motion ------ */
@media (prefers-reduced-motion: reduce) {
  .ff__bar, .ff__lab, .ff__band { --pi: 1 !important; opacity: 1 !important; transform: none !important; }
  .dist__line--l, .dist__line--r, .dist__tag--v, .dist__tag--c { transition: none; }
  .fuse__mark { transform: none; }
}

/* Without JS, everything the engine gates stays readable. */