/* ==========================================================================
   NOXIFY — Design Tokens
   Fuente de verdad: brand/guia-de-marca.md (extraído del mockup de la clienta)
   ========================================================================== */

:root {
  /* ----- Color: marca (literales del mockup) ----- */
  --color-navy-900: #0B1320; /* azul oscuro — header, footer, hero, inversores */
  --color-navy-700: #1A2336; /* azul medio — superficies secundarias oscuras */
  --color-gold-500: #D4A017; /* dorado principal — CTA, iconos, acentos */
  --color-gold-300: #E6B84A; /* dorado claro — hover, degradados */
  --color-surface:  #F8F9FB; /* fondo de secciones claras */
  --color-white:    #FFFFFF;
  --color-gray-100: #F1F1F1; /* círculos de icono, chips, separadores */
  --color-gray-600: #666666; /* texto secundario sobre claro */

  /* ----- Color: funcionales ----- */
  --overlay-hero: rgba(11, 19, 32, 0.8); /* #0B1320CC */
  --color-text-dark: var(--color-navy-900);
  --color-text-light: var(--color-white);
  --color-text-muted-light: rgba(255, 255, 255, 0.72);
  --color-border: #E8EAEF;
  --color-error: #C0392B;

  /* ----- Tipografía ----- */
  --font-display: "Playfair Display", Georgia, serif; /* titulares H1–H3, cifras */
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif; /* todo lo demás */

  --fs-display: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);  /* H1 hero 36→56px */
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); /* sección 28→40px */
  --fs-h3:      clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem);/* tarjeta 20→22px */
  --fs-stat:    clamp(1.625rem, 1.4rem + 0.7vw, 2rem);   /* cifras 26→32px */
  --fs-body:    1rem;      /* 16px */
  --fs-small:   0.875rem;  /* 14px */
  --fs-eyebrow: 0.8125rem; /* 13px, uppercase */

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  --ls-eyebrow: 0.12em;
  --ls-wide: 0.06em; /* logotipo, botones en mayúsculas si aplica */

  /* ----- Espaciado (escala) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --section-pad-y: clamp(3.5rem, 2.5rem + 4vw, 6rem); /* 56→96px */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 0.7rem + 1.5vw, 1.5rem); /* 16→24px */

  /* ----- Forma y elevación ----- */
  --radius: 8px;      /* tarjetas y botones — regla del mockup */
  --radius-chip: 6px;
  --radius-full: 999px;

  --shadow-card: 0 2px 12px rgba(11, 19, 32, 0.06);
  --shadow-card-hover: 0 10px 28px rgba(11, 19, 32, 0.12);
  --shadow-focus-gold: 0 0 0 3px rgba(212, 160, 23, 0.25);

  /* ----- Motion ----- */
  --transition: 0.3s ease; /* hovers — regla del mockup */
  --transition-fast: 0.15s ease;

  /* ----- Detalles de marca ----- */
  --divider-gold-width: 48px; /* línea decorativa bajo títulos */
  --divider-gold-height: 2px;
  --icon-stroke: 1.5;
}

/* ==========================================================================
   Clases utilitarias de marca (mínimas, de referencia)
   ========================================================================== */

.nx-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.nx-section { padding-block: var(--section-pad-y); }
.nx-section--dark { background: var(--color-navy-900); color: var(--color-text-light); }
.nx-section--light { background: var(--color-surface); color: var(--color-text-dark); }

.nx-eyebrow {
  font: 600 var(--fs-eyebrow) var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-500);
}

.nx-heading {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
}

.nx-divider-gold {
  width: var(--divider-gold-width);
  height: var(--divider-gold-height);
  background: var(--color-gold-500);
  border: 0;
  margin-block: var(--space-4);
}

/* Botones */
.nx-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: 600 0.9375rem var(--font-body);
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.nx-btn--primary {
  background: var(--color-gold-500);
  color: var(--color-navy-900);
}
.nx-btn--primary:hover { background: var(--color-gold-300); }
.nx-btn--secondary {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.nx-btn--ghost-gold {
  background: transparent;
  border-color: var(--color-gold-500);
  color: var(--color-navy-900);
}
.nx-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-gold); }

/* Enlace terciario "Saber más →" */
.nx-link-more {
  font: 600 var(--fs-small) var(--font-body);
  color: var(--color-gold-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.nx-link-more .arrow { transition: transform var(--transition); }
.nx-link-more:hover .arrow { transform: translateX(4px); }

/* Tarjeta base */
.nx-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}
.nx-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Círculo de icono (servicios: navy + icono dorado) */
.nx-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--color-navy-900);
  color: var(--color-gold-500);
}
.nx-icon-circle--light {
  background: var(--color-gray-100);
  color: var(--color-navy-900);
}

/* Chip de categoría */
.nx-chip {
  display: inline-block;
  font: 500 0.8125rem var(--font-body);
  color: var(--color-navy-900);
  background: var(--color-gray-100);
  border-radius: var(--radius-chip);
  padding: 4px 10px;
}