/*
 * Tokens de diseno, muestreados directamente sobre 1.png.
 *
 * La escala tipografica esta expresada en "unidades de escena": la maqueta
 * original mide 1536 px de ancho, asi que 1u = 1/1536 del ancho de referencia.
 * `--u` traduce eso a px reales y se recalcula por breakpoint, de modo que
 * toda la UI conserva las proporciones medidas en la imagen.
 */

:root {
  /* ---- color ---------------------------------------------------- */
  --bg:            #eef1fa;
  --bg-soft:       #e9edf7;
  --bg-band:       #ecf0f8;
  --ink:           #0b1020;
  --ink-strong:    #070a16;
  --ink-2:         #383c56;
  --ink-3:         #4a4f68;
  --ink-4:         #6a7089;
  --ink-5:         #8f95ab;
  --hair:          rgba(24, 38, 74, 0.14);
  --hair-soft:     rgba(24, 38, 74, 0.08);

  --blue:          #2676fc;
  --blue-ink:      #1152f9;
  --blue-deep:     #0b3fd4;
  --blue-wash:     rgba(38, 118, 252, 0.09);
  --green:         #07be8f;
  --amber:         #e08a1e;
  --red:           #e2483f;

  --panel:         rgba(255, 255, 255, 0.78);
  --panel-line:    rgba(255, 255, 255, 0.9);
  --panel-shadow:  0 1px 2px rgba(16, 30, 66, 0.06),
                   0 8px 24px -8px rgba(16, 30, 66, 0.22);

  /* ---- tipografia ------------------------------------------------ */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
          Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          system-ui, sans-serif;

  /* unidad de maqueta: 1536 px de referencia, con suelo y techo para que el
     texto no se vuelva ilegible ni gigante en los extremos */
  --u: clamp(0.72px, 0.0651vw, 1.34px);

  --fs-logo:     calc(23 * var(--u));
  --fs-headline: calc(30 * var(--u));
  --fs-eyebrow:  calc(11.5 * var(--u));
  --fs-lede:     calc(10.6 * var(--u));
  --fs-cta:      calc(11 * var(--u));
  --fs-nav:      calc(10.6 * var(--u));
  --fs-chip:     calc(8.6 * var(--u));
  --fs-rail:     calc(10 * var(--u));
  --fs-foot:     calc(8.4 * var(--u));
  --fs-hud:      calc(9.6 * var(--u));
  --fs-hud-sm:   calc(8.4 * var(--u));

  /* ---- espaciado del hero, en unidades de maqueta ---------------- */
  --pad-x:  calc(38 * var(--u));
  --pad-y:  calc(22 * var(--u));

  /* ---- movimiento ------------------------------------------------ */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.42s;

  /* ---- secciones ------------------------------------------------- */
  --sec-max: 1180px;
}

/* Por debajo de 900 px la maqueta ya no cabe: pasamos a una escala de lectura
   normal en vez de seguir encogiendo proporcionalmente. */
@media (max-width: 900px) {
  :root {
    --u: 1.02px;
    --pad-x: 20px;
    --pad-y: 16px;
  }
}

@media (max-width: 560px) {
  :root {
    --u: 0.95px;
    --pad-x: 16px;
  }
}