/* FARO Markets — design & motion tokens (lookboard 01 + master brief, 2026-09-02)
   Regla: teal con avaricia — si todo destaca, nada destaca. */

:root {
  /* color (lookboard) */
  --navy: #0E192A;
  --deep-navy: #091321;
  --teal: #12A192;
  --deep-teal: #03827A;
  --gray: #D8D9DA;
  --bone: #F7F7F7;
  --surface: #14253C;
  --positive: #34D399;
  --negative: #F87171;
  --notice: #7DD3FC;

  /* tinta sobre papel */
  --tinta: #0E192A;
  --tinta-suave: rgba(14, 25, 42, .62);
  --tinta-tenue: rgba(14, 25, 42, .38);
  --linea-papel: rgba(14, 25, 42, .16);

  /* tinta sobre navy */
  --hueso-suave: rgba(247, 247, 247, .68);
  --hueso-tenue: rgba(247, 247, 247, .58);
  --linea-navy: rgba(247, 247, 247, .14);

  /* ── EL SUELO DEL ACTO. Estos tres nombres valen en TODA la pagina y cambian
     solos segun el acto pise papel o noche (landing.css). Existen porque la
     misma clase de error se repitio tres veces: una pieza nacida para la noche
     -el boton fantasma, la nota de la beta- escribia su color en hueso a mano y
     quedaba BLANCA SOBRE BLANCA en la primera pantalla. Escribiendo el color de
     la noche a mano hay que acordarse de la variante de papel cada vez; usando
     estos, la pieza nueva acierta sola.
     --linea ademas FALTABA: cuatro reglas del acto 8 la usaban sin que nadie la
     definiera, y una var() sin definir invalida la declaracion entera: las dos
     cajas del costo y las cuatro preguntas frecuentes se quedaban SIN BORDE. */
  --texto-suave: var(--tinta-suave);
  --foco: var(--deep-teal);
  --acento: var(--deep-teal);
  --texto-tenue: rgba(14, 25, 42, .58);
  --linea: var(--linea-papel);

  /* tipografia: Poppins 300/400/500/600/700 en TODA la landing (decision de
     Gabriel, 2026-09-15: «toda la tipografia como la frase del cierre, en
     distintos grosores»). --mono queda como ALIAS de seguridad: cualquier
     var(--mono) olvidado resuelve a Poppins en vez de a la mono del sistema. */
  --sans: 'Poppins', system-ui, sans-serif;
  --mono: var(--sans);

  /* el verde del panel de seguridad: la familia del boton (#12A192), un tono
     mas profundo porque el blanco sobre el teal del boton da 3,2:1 y no se
     lee; sobre #056A62 da 6,5:1 (y 4,8:1 al 80 % de opacidad). */
  --teal-panel-alto: #06726A;
  --teal-panel: #056A62;
  --teal-panel-bajo: #045A54;

  /* motion (brief: timings centralizados) */
  --t-fast: 180ms;
  --t-ui: 300ms;
  --t-reveal: 750ms;
  --t-editorial: 1050ms;
  --ease-editorial: cubic-bezier(.22, .61, .21, 1);
  --ease-data: cubic-bezier(.4, 0, .2, 1);
}

/* ── familias de transicion (no fade-up universal) ── */

/* 1 · Editorial reveal: titulares — mascara por linea, sube desde la linea base */
.fx-editorial { opacity: 0; transform: translateY(14px); }
.fx-editorial.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-editorial) var(--ease-editorial),
              transform var(--t-editorial) var(--ease-editorial);
}

/* 2 · Data reveal: cifras y anotaciones — aparicion seca, sin desplazamiento */
.fx-data { opacity: 0; }
.fx-data.is-in { opacity: 1; transition: opacity var(--t-reveal) var(--ease-data); }

/* 1b · Flujo con scroll: en los actos que fluyen el motor (landing.js) quita
      fx-editorial/fx-data y escribe opacidad y transform EN LINEA ligadas al
      scroll. Sin transicion: una de 1050 ms retrasaria el scrub. Con
      movimiento reducido el motor no arranca y sigue mandando el IO de arriba. */
.fx-scroll { transition: none; }

/* 3 · Intelligence transformation: elementos que cambian de estado
      (dispersion → alineacion) — la maneja GSAP con scrub; esta clase solo
      marca los nodos para el timeline. */
.fx-transform {}

@media (prefers-reduced-motion: reduce) {
  .fx-editorial, .fx-data { opacity: 1; transform: none; transition: none; }
}