/* ============================================================
   NORVEX — Design Tokens v1.0
   Extraídos del sitio de referencia (dark theme) + marca Norvex
   Uso: importar este archivo al inicio del CSS del rediseño UXDivi
   ============================================================ */

:root {
  /* ---------- COLOR: Fondos (dark) ---------- */
  --nvx-bg-base:      #04080C;  /* Fondo principal de página */
  --nvx-bg-surface:   #0B1116;  /* Secciones / paneles */
  --nvx-bg-card:      #0E151B;  /* Tarjetas */
  --nvx-bg-elevated:  #131C23;  /* Elementos elevados / hover de cards */
  --nvx-bg-overlay:   rgba(4, 8, 12, 0.72); /* Overlay sobre fotos */

  /* ---------- COLOR: Marca (verde lima Norvex, muestreado del logo/web) ---------- */
  --nvx-green-300:    #A3D165;  /* Acentos claros, iconos destacados */
  --nvx-green-400:    #8FBE4A;  /* Hover de acentos */
  --nvx-green-500:    #6E9E2E;  /* ACENTO PRINCIPAL (botones, activos) */
  --nvx-green-600:    #5B8525;  /* Estado pressed */
  --nvx-green-700:    #476A1E;  /* Bordes/fondos sutiles de acento */
  --nvx-green-glow:   rgba(110, 158, 46, 0.35); /* Sombras/glow de acento */

  /* ---------- COLOR: Texto ---------- */
  --nvx-text-primary:   #F5F7F8; /* Títulos y texto principal */
  --nvx-text-secondary: #A9B4BC; /* Párrafos y texto de apoyo */
  --nvx-text-muted:     #6E7A82; /* Metadatos, captions, legal */
  --nvx-text-on-accent: #0A0F05; /* Texto sobre botones verdes */

  /* ---------- COLOR: Bordes y líneas ---------- */
  --nvx-border-subtle:  rgba(255, 255, 255, 0.08);
  --nvx-border-default: rgba(255, 255, 255, 0.14);
  --nvx-border-accent:  rgba(110, 158, 46, 0.45);

  /* ---------- TIPOGRAFÍA: Familias ---------- */
  --nvx-font-display: "Archivo", "Montserrat", "Helvetica Neue", Arial, sans-serif; /* Títulos */
  --nvx-font-body:    "Inter", "Segoe UI", Roboto, Arial, sans-serif;               /* Párrafos y UI */

  /* ---------- TIPOGRAFÍA: Escala (rem, base 16px) ---------- */
  --nvx-fs-eyebrow: 0.75rem;   /* 12px — etiquetas sobre títulos */
  --nvx-fs-caption: 0.8125rem; /* 13px */
  --nvx-fs-small:   0.875rem;  /* 14px */
  --nvx-fs-body:    1rem;      /* 16px */
  --nvx-fs-lead:    1.125rem;  /* 18px — párrafos destacados */
  --nvx-fs-h4:      1.25rem;   /* 20px */
  --nvx-fs-h3:      1.5rem;    /* 24px */
  --nvx-fs-h2:      2rem;      /* 32px */
  --nvx-fs-h1:      2.75rem;   /* 44px */
  --nvx-fs-display: 3.75rem;   /* 60px — hero */

  /* ---------- TIPOGRAFÍA: Pesos ---------- */
  --nvx-fw-regular:  400; /* Párrafos */
  --nvx-fw-medium:   500; /* Párrafos destacados / nav */
  --nvx-fw-semibold: 600; /* Botones, labels, eyebrows */
  --nvx-fw-bold:     700; /* H3–H4, números de stats */
  --nvx-fw-black:    800; /* H1–H2 display (titulares) */

  /* ---------- TIPOGRAFÍA: Line-height y tracking ---------- */
  --nvx-lh-display: 1.05;
  --nvx-lh-heading: 1.2;
  --nvx-lh-body:    1.65;
  --nvx-tracking-eyebrow: 0.18em; /* Mayúsculas espaciadas */
  --nvx-tracking-heading: 0.01em;
  --nvx-tracking-button:  0.06em;

  /* ---------- ESPACIADO (múltiplos de 4px) ---------- */
  --nvx-space-1: 0.25rem;  --nvx-space-2: 0.5rem;   --nvx-space-3: 0.75rem;
  --nvx-space-4: 1rem;     --nvx-space-5: 1.5rem;   --nvx-space-6: 2rem;
  --nvx-space-8: 3rem;     --nvx-space-10: 4rem;    --nvx-space-12: 6rem;  /* padding de sección */

  /* ---------- RADIOS Y SOMBRAS ---------- */
  --nvx-radius-sm: 4px;
  --nvx-radius-md: 8px;
  --nvx-radius-lg: 12px;
  --nvx-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
  --nvx-shadow-accent: 0 4px 20px var(--nvx-green-glow);

  /* ---------- LAYOUT ---------- */
  --nvx-container: 1200px;
  --nvx-header-h: 80px;
}

/* ============================================================
   CLASES UTILITARIAS BASE (opcionales, listas para el rediseño)
   ============================================================ */

.nvx-eyebrow {
  font-family: var(--nvx-font-body);
  font-size: var(--nvx-fs-eyebrow);
  font-weight: var(--nvx-fw-semibold);
  letter-spacing: var(--nvx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nvx-green-400);
}

.nvx-h1, .nvx-h2, .nvx-h3 {
  font-family: var(--nvx-font-display);
  font-weight: var(--nvx-fw-black);
  text-transform: uppercase;
  letter-spacing: var(--nvx-tracking-heading);
  line-height: var(--nvx-lh-heading);
  color: var(--nvx-text-primary);
  margin: 0;
}
.nvx-h1 { font-size: var(--nvx-fs-h1); }
.nvx-h2 { font-size: var(--nvx-fs-h2); }
.nvx-h3 { font-size: var(--nvx-fs-h3); font-weight: var(--nvx-fw-bold); }

/* Palabra o línea destacada en verde dentro de un titular */
.nvx-h1 .accent, .nvx-h2 .accent { color: var(--nvx-green-500); }

.nvx-lead {
  font-family: var(--nvx-font-body);
  font-size: var(--nvx-fs-lead);
  font-weight: var(--nvx-fw-regular);
  line-height: var(--nvx-lh-body);
  color: var(--nvx-text-secondary);
}

.nvx-body {
  font-family: var(--nvx-font-body);
  font-size: var(--nvx-fs-body);
  font-weight: var(--nvx-fw-regular);
  line-height: var(--nvx-lh-body);
  color: var(--nvx-text-secondary);
}

/* ---------- Botones ---------- */
.nvx-btn {
  display: inline-flex; align-items: center; gap: var(--nvx-space-2);
  font-family: var(--nvx-font-body);
  font-size: var(--nvx-fs-small);
  font-weight: var(--nvx-fw-semibold);
  letter-spacing: var(--nvx-tracking-button);
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  border-radius: var(--nvx-radius-sm);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.nvx-btn--primary {
  background: var(--nvx-green-500);
  color: var(--nvx-text-on-accent);
}
.nvx-btn--primary:hover {
  background: var(--nvx-green-400);
  box-shadow: var(--nvx-shadow-accent);
}
.nvx-btn--ghost {
  background: transparent;
  color: var(--nvx-text-primary);
  border-color: var(--nvx-border-default);
}
.nvx-btn--ghost:hover {
  border-color: var(--nvx-green-500);
  color: var(--nvx-green-400);
}

/* ---------- Tarjeta de servicio ---------- */
.nvx-card {
  background: var(--nvx-bg-card);
  border: 1px solid var(--nvx-border-subtle);
  border-radius: var(--nvx-radius-md);
  box-shadow: var(--nvx-shadow-card);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.nvx-card:hover {
  transform: translateY(-4px);
  border-color: var(--nvx-border-accent);
}