/* ============================================================
   SISTEMA VISUAL LBS — fichas de marca
   Un solo juego de nombres para las cuatro páginas.

   En las páginas actuales conviven tres vocabularios distintos
   (--stroke / --line, --card / --panel) y tres anchos máximos
   (980 / 760 / 1040). Aquí hay uno solo.
   ============================================================ */

:root {

  /* ---------- Color ---------- */
  /* Grafito de fondo, heredado de las páginas actuales: es el que
     sostiene la percepción sobria y no hay motivo para cambiarlo. */
  --lbs-fondo:        #0b0e13;
  --lbs-fondo-alt:    #0e1219;   /* secciones alternas, marca el ritmo */
  --lbs-panel:        #141a23;
  --lbs-panel-alto:   #191f2a;

  --lbs-linea:        rgba(255,255,255,.09);
  --lbs-linea-fuerte: rgba(255,255,255,.16);

  --lbs-texto:        rgba(255,255,255,.94);
  --lbs-texto-2:      rgba(255,255,255,.66);
  --lbs-texto-3:      rgba(255,255,255,.46);

  /* Oro. Regla de uso: SOLO el botón principal, la etiqueta superior
     de sección, un acento por titular y el trazo de los iconos.
     Nunca un titular entero, nunca un fondo grande. */
  --lbs-oro:          #f2c14e;
  --lbs-oro-hondo:    #d9a63a;
  --lbs-oro-tenue:    rgba(242,193,78,.11);
  --lbs-oro-linea:    rgba(242,193,78,.26);

  /* Un único acento frío, para estados de dato y verificación.
     No es color de marca: es señalética. */
  --lbs-dato:         #6ea8fe;
  --lbs-aviso:        #e8b4b8;

  /* ---------- Espaciado ---------- */
  /* Escala de 4. Todo el ritmo vertical sale de aquí. */
  --lbs-e1: 4px;   --lbs-e2: 8px;   --lbs-e3: 12px;  --lbs-e4: 16px;
  --lbs-e5: 24px;  --lbs-e6: 32px;  --lbs-e7: 48px;  --lbs-e8: 64px;
  --lbs-e9: 80px;  --lbs-e10: 104px;

  /* Separación entre secciones: crece con la pantalla. */
  /* Ritmo vertical. Se aprieta el extremo móvil: en F4A /metodo llegaba a
     8,6 pantallas y buena parte era aire entre secciones. */
  --lbs-seccion: clamp(52px, 7.5vw, 88px);
  --lbs-seccion-corta: clamp(30px, 5.5vw, 62px);

  /* ---------- Anchos ---------- */
  --lbs-ancho:        1080px;   /* general */
  --lbs-ancho-medio:  860px;    /* bloques de contenido */
  --lbs-ancho-texto:  620px;    /* párrafos largos: 60-70 caracteres */

  /* ---------- Radios ---------- */
  /* Radios contenidos: 22px empezaba a leerse como app de consumo.
     Un instrumento financiero se dibuja con esquinas más secas. */
  --lbs-r-s:  8px;
  --lbs-r-m:  12px;
  --lbs-r-l:  16px;

 /* ---------- Luz y profundidad ----------
     Un filo claro en el borde superior de tarjetas y botones. Es lo que
     separa una superficie "plana sobre fondo oscuro" de una que parece
     tener grosor. Cuesta un pseudo-elemento y cambia mucho la percepción. */
  --lbs-filo:      inset 0 1px 0 rgba(255,255,255,.07);
  --lbs-filo-oro:  inset 0 1px 0 rgba(255,255,255,.34);

  /* ---------- Sombras ---------- */
  --lbs-sombra:     0 14px 44px rgba(0,0,0,.45);
  --lbs-sombra-oro: 0 10px 30px rgba(242,193,78,.18);

  /* ---------- Tipografía ----------
     Dirección aprobada: sans serif moderna, limpia, premium,
     financiera y tecnológica.

     Se usan las sans del sistema, que en las tres plataformas de destino
     son caras modernas y neutras (SF Pro en iOS/macOS, Segoe UI en
     Windows, Roboto en Android). Ventaja: cero peticiones y cero salto
     de maquetación. Coste: la forma exacta cambia según el equipo.
     Cargar una tipografía propia sigue siendo decisión abierta (N-3). */
  --lbs-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
              "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica fluida. Los titulares llevan interletrado
     negativo: es lo que da el aire técnico y compacto. */
  --lbs-t-display: clamp(32px, 8.2vw, 58px);
  --lbs-t-h1:      clamp(27px, 6.2vw, 42px);
  --lbs-t-h2:      clamp(21px, 4.3vw, 30px);
  --lbs-t-h3:      clamp(17px, 2.6vw, 20px);
  --lbs-t-lead:    clamp(16px, 2.4vw, 19px);
  --lbs-t-cuerpo:  16px;          /* nunca por debajo: iOS hace zoom */
  --lbs-t-menor:   14px;
  --lbs-t-nota:    13px;
  --lbs-t-etiqueta:11px;

  /* ---------- Movimiento ---------- */
  --lbs-transicion: 160ms cubic-bezier(.4,0,.2,1);
}

/* Puntos de corte, en un solo sitio y con un solo criterio.
   Hoy las páginas usan 600 / 640 / 680 / 860 sin ninguna lógica común.

      560px   móvil grande
      768px   tablet vertical
      1024px  escritorio

   Nota: CSS no permite variables en @media, así que estos valores se
   escriben literales en las hojas. Esta es la referencia. */