/*--------------------------------------------------------------
# NG Intelligence Group — tema de marca sobre la base Misiom
# El acento global queda en el rojo compartido por ambas banderas
# (ya aplicado en misiom.css). Estas clases contextuales permiten
# teñir una sección completa de azul (Costa Rica) o verde (México)
# reutilizando el mismo sistema de variables del template, sin
# tocar la plantilla original.
#---------------------------------------------------------------*/

:root {
  --ng-cr-blue: #0a3d8f;
  --ng-cr-blue-rgb: 10, 61, 143;
  --ng-mx-green: #0a7a43;
  --ng-mx-green-rgb: 10, 122, 67;
  --ng-bridge-red: #d41c34;
  --ng-bridge-red-rgb: 211, 28, 52;
}

/* Tiñe toda una sección (hero, bloque, tarjeta) con el azul de Costa Rica */
.theme-cr {
  --misiom-base: var(--ng-cr-blue);
  --misiom-base-rgb: var(--ng-cr-blue-rgb);
}

/* Tiñe toda una sección con el verde de México */
.theme-mx {
  --misiom-base: var(--ng-mx-green);
  --misiom-base-rgb: var(--ng-mx-green-rgb);
}

/* Etiquetas de país para fichas de empresa (Directorio, CRM) */
.ng-tag-cr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--ng-cr-blue-rgb), 0.1);
  color: var(--ng-cr-blue);
}

.ng-tag-mx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--ng-mx-green-rgb), 0.1);
  color: var(--ng-mx-green);
}