/* ═══════════════════════════════════════════════════════════
   FIRMARED · Sistema de marca · CSS global
   ═══════════════════════════════════════════════════════════ */

:root {
  --fr-red:    #c93a2a;
  --fr-ink:    #1d1d23;
  --fr-paper:  #fbfaf6;
  --fr-gray-100: #f0eee9;
  --fr-gray-300: #d4d2cc;
  --fr-gray-500: #888780;
  --fr-gray-700: #444441;
}

/* ──────────────────────────────────────────────────────────────
   BRAND · avatar + wordmark (componente reutilizable)
   Para usar en redes sociales, ads, splash, etc.
   NO se usa en el header del sitio web.
   ────────────────────────────────────────────────────────────── */

.fr-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: 'Inter Tight', system-ui, sans-serif;
}

.fr-avatar {
  width: 36px;
  height: 36px;
  background: var(--fr-red);
  border-radius: 18%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fr-paper);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.05em;
  line-height: 1;
  flex-shrink: 0;
}

.fr-avatar > span {
  margin-top: -1.4px;
}

.fr-wordmark {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.025em;
  color: var(--fr-ink);
  line-height: 1;
}

.fr-wordmark .r {
  color: var(--fr-red);
}

/* ──────────────────────────────────────────────────────────────
   OVERRIDE del .logo en el <nav> del sitio
   Solo cambia tipografía y color · sin avatar
   ────────────────────────────────────────────────────────────── */

nav .logo {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.025em !important;
}

nav .logo em {
  font-style: normal !important;
  color: var(--fr-red) !important;
  font-weight: 800 !important;
}

/* Para .logo que es div (dashboard.html) */
.logo {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-weight: 800 !important;
}

.logo em {
  font-style: normal !important;
  color: var(--fr-red) !important;
  font-weight: 800 !important;
}

/* ──────────────────────────────────────────────────────────────
   Soporte para variante .logo-wrap (org-dashboard.html)
   ────────────────────────────────────────────────────────────── */

.logo-wrap {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.logo-wrap em,
.logo-wrap .red,
.logo-wrap span[class*="red"] {
  font-style: normal !important;
  color: var(--fr-red) !important;
  font-weight: 800 !important;
}

/* ──────────────────────────────────────────────────────────────
   Soporte para protocolo.html · topbar-brand y auth-title
   ────────────────────────────────────────────────────────────── */

.topbar-brand,
.auth-title {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.topbar-brand em,
.auth-title em {
  font-style: normal !important;
  color: var(--fr-red) !important;
  font-weight: 800 !important;
}