/*
  Tokens de diseño — Lúmina Comex
  Fuente: Manual_identidad_visual_Lumina_Comex.docx (v1.0 — reemplaza a
  Identidad_grafica_y_corporativa_Lumina_v2.docx, que queda como histórica)
  Decisión de marca: nombre = "Lúmina Comex"; descriptor = "Comercio exterior inteligente"

  Breakpoints de referencia para todo el sitio (mobile-first):
    375px  → móvil
    768px  → tablet
    1280px → escritorio
*/

:root {
  /* ---- Paleta base (valores exactos del manual de identidad visual) ---- */
  --color-azul-profundo: #0B2D4A;
  --color-teal: #0EA5A4;
  --color-cian: #38BDF8;
  --color-destello: #D4AF37;
  --color-blanco: #FFFFFF;
  --color-azul-niebla: #EEF3FF;
  --color-blanco-frio: #F8FAFF;
  --color-tinta: #102B46;

  /* Colores de estado (el manual los declara independientes de la paleta principal) */
  --color-estado-correcto: #247A4B;
  --color-estado-atencion: #A66200;
  --color-estado-error: #B42318;

  /* ---- Roles semánticos (así se consumen en el resto del CSS) ---- */
  --color-marca: var(--color-azul-profundo);
  /* El teal oficial (#0EA5A4) da 3.03:1 con texto blanco — por debajo del
     mínimo AA (4.5:1). Para botones/enlaces de acción (texto sobre teal o
     texto teal sobre blanco/azul niebla) se usa esta variante más oscura,
     verificada en 5.10:1 sobre azul niebla y 5.67:1 sobre blanco; el swatch
     oficial se conserva intacto en --color-teal. */
  --color-accion: #097372;
  --color-accion-hover: #086e6d;
  --color-acento: var(--color-destello);
  --color-fondo: var(--color-blanco-frio);
  --color-fondo-alterno: var(--color-azul-niebla);
  --color-superficie: var(--color-blanco);
  --color-texto: var(--color-tinta);
  --color-texto-secundario: #35404b;
  --color-texto-inverso: var(--color-blanco);
  --color-borde: #dce6ec;

  /* ---- Tipografía (Montserrat, según manual §06; Arial como alternativa ofimática) ---- */
  --fuente-marca: 'Montserrat', Arial, sans-serif;
  --fuente-titulos: 'Montserrat', Arial, sans-serif;
  --fuente-texto: 'Montserrat', Arial, sans-serif;

  /* Escala tipográfica del portal (ver Identidad Gráfica §"Escala para el portal") */
  --texto-titulo-principal: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);   /* 48–56px */
  --texto-titulo-pagina: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);  /* 36–44px */
  --texto-seccion: clamp(1.375rem, 1.2rem + 0.7vw, 2rem);          /* 26–32px */
  --texto-subtitulo: clamp(1.125rem, 1.05rem + 0.3vw, 1.5rem);     /* 20–24px */
  --texto-cuerpo: 1rem;                                             /* 16px */
  --texto-cuerpo-grande: 1.125rem;                                  /* 18px */
  --texto-auxiliar: 0.875rem;                                       /* 14px */

  --peso-marca: 700;
  --peso-titulo: 700;
  --peso-seccion: 600;
  --peso-subtitulo: 600;
  --peso-cuerpo: 400;
  --peso-auxiliar-min: 400;

  --interlineado-titulo: 1.15;
  --interlineado-cuerpo: 1.6;

  /* ---- Espaciado (escala base 4px) ---- */
  --espacio-1: 0.25rem;  /* 4px */
  --espacio-2: 0.5rem;   /* 8px */
  --espacio-3: 0.75rem;  /* 12px */
  --espacio-4: 1rem;     /* 16px */
  --espacio-5: 1.5rem;   /* 24px */
  --espacio-6: 2rem;     /* 32px */
  --espacio-7: 3rem;     /* 48px */
  --espacio-8: 4rem;     /* 64px */

  /* ---- Layout ---- */
  --ancho-maximo: 1200px;
  --gutter-lateral: var(--espacio-4);

  /* ---- Bordes, sombras, transiciones ---- */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --sombra-tarjeta: 0 4px 16px rgba(11, 45, 74, 0.08);
  --sombra-flotante: 0 8px 28px rgba(11, 45, 74, 0.16);
  --sombra-grande: 0 24px 70px rgba(11, 45, 74, 0.13);
  --transicion-rapida: 150ms ease;

  /* ---- Capas (z-index) ---- */
  --z-header: 100;
  --z-menu-movil: 110;
  --z-overlay: 120;
}