/* ==========================================================================
   XINGYUN INTERNATIONAL — hoja de estilo del sitio
   Shenzhen Xingyun Import & Export Co., Limited · xingyuninternational.com

   Paleta del cliente (Slate Gray Contrast):
     #004E98 azul profundo · #3A6EA5 azul acero · #FF6700 naranja
     #C0C0C0 plata · #EBEBEB gris claro
   Tipografía del cliente: Merriweather (serif) para voz editorial;
   Archivo acompaña en la interfaz y en las tablas de especificaciones,
   donde una serif con números proporcionales se lee peor.

   Motivo visual propio del sitio: el MANIFIESTO DE CARGA. Filetes finos,
   numeración tabular, etiquetas en versalitas y bloques que se leen como
   una lista de empaque. Nada de degradados decorativos.
   ========================================================================== */

@import url("fuentes.css");

/* --------------------------------------------------------------- tokens */
:root{
  --azul-900:#00305e;
  --azul:#004e98;
  --azul-2:#3a6ea5;
  --naranja:#ff6700;
  --naranja-osc:#c44f00;      /* naranja legible sobre blanco (contraste AA) */
  --plata:#c0c0c0;
  --gris:#ebebeb;
  --gris-2:#f6f7f9;
  --papel:#fff;
  --tinta:#0e1622;
  --tinta-2:#41506a;
  --linea:#dbe1ea;
  --linea-fuerte:#b9c4d4;

  --serif:"Merriweather",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;


  /* --- escala tipografica (7 pasos) ---------------------------------------
     Antes habia 36 tamanos con pasos de medio pixel: nada podia destacar
     porque todo vivia en el mismo rango. Escala modular, razon ~1.25.        */
  --t-xs:12px;      /* etiquetas, versalitas, conteos            */
  --t-sm:14px;      /* interfaz, chips, pie                      */
  --t-base:16px;    /* cuerpo                                    */
  --t-md:20px;      /* entradilla, cifras chicas                 */
  --t-lg:26px;      /* h3 y cifras destacadas                    */
  --t-xl:34px;      /* h2                                        */
  --t-2xl:clamp(2.05rem,4.6vw,3.3rem);   /* h1, unico display fluido */

  /* tres anchos: el sitio entero usaba UNO solo en las 11 secciones, y por eso
     ninguna composicion podia respirar distinto de la anterior. */
  /* areas seguras del sistema (isla dinamica, notch, barra de gestos). En cualquier
     pantalla sin recortes env() vale 0 y ningun bloque cambia de tamano. Requiere
     `viewport-fit=cover` en el meta viewport para devolver algo distinto de 0. */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);

  /* barra fija: 70px + riel de 3px, mas el area segura de arriba (0 sin notch).
     Lo leen los `position:sticky` que se cuelgan del header (subnav, ficha). */
  --header-h:calc(73px + var(--safe-t));
  --ancho-angosto:760px;   /* texto largo: se lee en 70-75 caracteres */
  --ancho:1180px;          /* normal: grillas y tablas               */
  --ancho-ancho:1420px;    /* respiro: galerias y bandas             */
  --radio:14px;
  --radio-s:9px;
  --radio-xs:4px;
  --radio-pill:999px;
  --sombra:0 18px 44px -22px rgba(0,42,86,.5);
  --sombra-s:0 8px 20px -14px rgba(0,42,86,.55);
  --sombra-alta:0 30px 70px -34px rgba(0,42,86,.55);   /* solo mega-menu y cajon */
  --ease:cubic-bezier(.22,1,.36,1);

  /* Alias canónicos del sistema (mismos colores, nombres que leen los
     validadores y el generador del brandboard). No cambian nada visual. */
  --brand-1:#00305e;   /* azul profundo   */
  --brand-2:#004e98;   /* azul de marca   */
  --brand-3:#3a6ea5;   /* azul acero      */
  --brand-4:#c0c0c0;   /* plata           */
  --brand-5:#ebebeb;   /* gris claro      */
  --accent:#ff6700;
  --accent-ink:#231000;
  --ink:#0e1622;
  --ink-soft:#41506a;
  --surface:#ffffff;
  --surface-2:#f6f7f9;
  --line:#dbe1ea;
  --font-display:"Merriweather",Georgia,serif;
  --font-body:"Archivo","Segoe UI",system-ui,sans-serif;
  --radius:14px;
  --shadow:0 18px 44px -22px rgba(0,42,86,.5);
}