/* VGLIA — bloque de marca.
   Se usa en la barra lateral, en la landing y en las pantallas de sesión, así
   que vive en su propio archivo en vez de dentro de sidebar.css. */

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.brand__mark {
  display: block;
  width: 30px;
  flex-shrink: 0;
  color: var(--vglia-cyan-400);
  filter: drop-shadow(0 0 10px rgb(var(--vglia-cyan-rgb) / 0.35));
}

.brand__mark svg { display: block; width: 100%; height: auto; }

.brand__text { display: grid; min-width: 0; }

.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--vglia-text-primary);
}

.brand__sub {
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vglia-text-muted);
  white-space: nowrap;
}

.brand--lg { flex-direction: column; gap: var(--space-4); text-align: center; }
.brand--lg .brand__mark { width: 46px; }