/* 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;
}

.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;
}