/* ---------------------------------------------------------
   CIFRAS · escena fija en dos tiempos: el lote (canvas) y el faltante en obra
   --------------------------------------------------------- */
.fg { position: relative; background: var(--paper); color: var(--ink); --fg-hold: #b34f00; }
.fg .sec-lead { color: var(--ink-2); }
.fg ::selection { background: rgba(255, 125, 0, .28); color: var(--ink); }
.fg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.fg-scene { position: relative; height: 220vh; height: 220svh; }
.fg-line { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.fg-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform-origin: 62% 70%; will-change: transform; }

/* ---------- Tiempo 1: título, una frase, la línea y un dato ---------- */
.fg-b1 {
  position: relative; z-index: 1; height: 100%; box-sizing: border-box; pointer-events: none;
  padding: calc(var(--header-h) + clamp(18px, 4.5vh, 48px)) 0 clamp(18px, 3.5vh, 36px);
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "copy" "box";
  row-gap: clamp(10px, 2vh, 20px); will-change: opacity, transform;
}
.fg-copy { grid-area: copy; pointer-events: auto; }
.fg-copy .sec-title { margin: 0 0 .32em; max-width: 19ch; font-size: clamp(2rem, .9rem + 2.5vw, 3.4rem); }
.fg-copy .sec-lead { max-width: 64ch; }
.fg-box { grid-area: box; min-height: 0; }
.fg-foot { position: absolute; left: 0; bottom: clamp(18px, 3.5vh, 36px); max-width: 30rem; pointer-events: auto; }
.fg-data { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fg-data b { font-family: var(--font-display); font-weight: 650; font-stretch: 104%; font-size: 1.15rem; color: var(--ink); }
.fg-data .fg-held { color: var(--fg-hold); }
.fg-note { margin: 4px 0 0; font-size: .875rem; line-height: 1.4; color: var(--ink-2); }
.fg-odo-v { display: inline-flex; align-items: flex-start; }
.fg-reel { position: relative; display: inline-block; height: 1.04em; overflow: hidden; overflow: clip; line-height: 1.04; }
.fg-strip { display: block; white-space: pre; line-height: 1.04; transform: translate3d(0, 0, 0); transition: transform .5s var(--ease-out); }
.fg-ch { display: inline-block; line-height: 1.04; }

/* ---------- Tiempo 2: se apaga la línea y habla la cifra ---------- */
.fg-dark { position: absolute; inset: 0; z-index: 2; background: var(--night); opacity: 0; pointer-events: none; will-change: opacity; }
.fg-b2 {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: 0; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.4vh, 40px);
  padding: calc(var(--header-h) + clamp(16px, 4vh, 44px)) 0 clamp(20px, 5vh, 56px);
  color: var(--zinc-50); pointer-events: none;
}
.fg-b2.is-live { pointer-events: auto; }
.fg-b2-lead { margin: 0; max-width: 34ch; opacity: 0; font-family: var(--font-display); font-weight: 600; font-stretch: 100%; font-size: clamp(1.2rem, .9rem + .8vw, 1.6rem); line-height: 1.3; color: var(--zinc-50); }
.fg-big { display: grid; gap: 4px; }
.fg-ref { margin: 0 0 6px; font-size: 1rem; color: var(--zinc-300); opacity: 0; }
.fg-ref b { font-family: var(--font-display); font-weight: 650; font-stretch: 100%; color: var(--zinc-50); margin-right: .3em; font-variant-numeric: tabular-nums; }
.fg-num { position: relative; display: grid; margin: 0; overflow: hidden; overflow: clip; }
.fg-num > span {
  grid-area: 1 / 1; display: block; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-stretch: 125%; font-variant-numeric: tabular-nums;
  font-size: clamp(5.4rem, min(16vw, 30svh), 17rem); line-height: .86; letter-spacing: -.035em;
}
.fg-num-a { color: var(--zinc-50); opacity: 0; will-change: transform; }
.fg-num-b { color: var(--hivis); font-stretch: 62%; transform: translate3d(0, 125%, 0); will-change: transform; }
.fg-num-l { display: grid; margin: 6px 0 0; opacity: 1; font-size: 1.05rem; color: var(--zinc-200); }
.fg-num-l > span { grid-area: 1 / 1; }
.fg-l-a { opacity: 0; }
.fg-l-b { opacity: 0; }

/* los cuatro frentes: una palabra y su corte; el control aparece al pasar, enfocar o tocar */
.fg-fronts { display: grid; gap: 12px; opacity: 0; will-change: opacity, transform; }
.fg-words { display: flex; flex-wrap: wrap; gap: 6px clamp(22px, 3.2vw, 56px); margin: 0; padding: 0; list-style: none; }
.fg-words button {
  position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--zinc-50);
  font-family: var(--font-display); font-weight: 620; font-stretch: 100%; font-size: clamp(1.15rem, .9rem + .7vw, 1.55rem);
  transition: color .2s ease-out;
}
/* el conducto (línea) cortado por el control (marca naranja) */
.fg-words i { position: relative; display: block; width: 46px; height: 1px; background: linear-gradient(90deg, rgba(241, 244, 246, .5) 0 50%, transparent 50% 62%, rgba(241, 244, 246, .18) 62%); }
.fg-words i::after { content: ""; position: absolute; left: 50%; top: -7px; width: 2px; height: 15px; margin-left: 2px; background: var(--hivis); transform: skewX(-18deg); transition: transform .3s var(--ease-out); }
.fg-words button[aria-expanded="true"] { color: #fff; }
.fg-words button[aria-expanded="true"] i::after { transform: skewX(-18deg) scaleY(1.35); }
.fg-words button:focus-visible { outline: 2px solid var(--hivis); outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .fg-words button:hover { color: #fff; } }
.fg-ctl { min-height: 1.5em; max-width: 60ch; margin: 0; font-size: 1rem; line-height: 1.5; color: var(--zinc-200); }
.fg-hint { color: var(--zinc-300); }

/* Responsive */
@media (max-width: 699.98px) {
  .fg-scene { height: 230vh; height: 230svh; }
  .fg-b1 { padding-top: calc(var(--header-h) + 16px); row-gap: 10px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "copy" "box" "foot"; }
  .fg-copy .sec-title { font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.3rem); }
  .fg-copy .sec-lead { font-size: 1rem; }
  .fg-foot { position: static; grid-area: foot; }
  .fg-num > span { font-size: 20vw; }
  .fg-b2 { justify-content: flex-start; padding-top: calc(var(--header-h) + 28px); }
  .fg-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
  .fg-words i { width: 30px; }
  .fg-ctl { min-height: 4.5em; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .fg-num > span { font-size: min(12.5vw, 26vh); }
  .fg-b2 { gap: 10px; }
}

/* Movimiento reducido: los dos tiempos, quietos y uno tras otro */
.fg.is-static .fg-scene { height: auto; }
.fg.is-static .fg-line { position: relative; height: auto; overflow: visible; }
.fg.is-static .fg-b1 { height: 100svh; min-height: 640px; }
.fg.is-static .fg-cv { height: 100svh; min-height: 640px; transform: none; }
.fg.is-static .fg-dark { display: none; }
.fg.is-static .fg-b2 { position: relative; pointer-events: auto; background: var(--night); box-shadow: 0 0 0 100vmax var(--night); clip-path: inset(0 -100vmax); padding: clamp(56px, 9vh, 96px) 0; }
.fg.is-static .fg-ref, .fg.is-static .fg-fronts, .fg.is-static .fg-l-b, .fg.is-static .fg-b2-lead { opacity: 1; }
.fg.is-static .fg-num-a, .fg.is-static .fg-l-a { display: none; }
.fg.is-static .fg-num-b { transform: none; font-stretch: 100%; }
@media (prefers-reduced-motion: reduce) {
  .fg-strip, .fg-words button, .fg-words i::after { transition: none; }
}