/* Logo de marca unificado en todo el sitio (landing, portal, admin).
 * Mismo tratamiento que la vista de anclaje: "RMB" en TanTwinkle serif seguido
 * EN LÍNEA del texto secundario en Montserrat (tracking amplio, mayúsculas).
 *
 * Este componente solo define TIPOGRAFÍA y disposición. El color y el tamaño se
 * ajustan por contexto: el color se hereda (color: inherit) y el tamaño se
 * controla con las variables --rmb-size / --sub-size. Markup esperado:
 *   <a class="brand-logo">RMB<span>Palabra</span></a>
 */
@font-face {
  font-family: 'TanTwinkle';
  src: url('/fonts/TanTwinkle.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Mistrully';
  src: url('/fonts/Mistrully.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* Fuente manuscrita de marca, reutilizable en todo el sitio.
 * Uso: variable var(--font-mistrully) en una regla, o la clase .font-mistrully
 * directamente en el elemento. Fallback a Dancing Script (Google Fonts) donde
 * Mistrully aún no cargue. */
:root {
  --font-mistrully: 'Mistrully', 'Dancing Script', cursive;
}

.font-mistrully {
  font-family: var(--font-mistrully);
}

.brand-logo {
  display: inline-flex;
  /* baseline: el pie de "RMB" y el de la palabra secundaria quedan a la misma
     altura en todos los contextos, sea cual sea --rmb-size / --sub-size. */
  align-items: baseline;
  gap: 0.3rem;
  font-family: 'TanTwinkle', 'Cormorant Garamond', serif;
  font-size: var(--rmb-size, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}
.brand-logo > span {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--sub-size, 0.8rem);
  font-weight: 300;
  letter-spacing: var(--sub-tracking, 0.3em);
  text-transform: uppercase;
  margin-left: 0.4rem;
  color: inherit;
}