:root {
  /* Identidad: los tres primeros heredan la paleta configurada del proyecto. */
  --color-primary: var(--site-color-primary);
  --color-secondary: #5f6c78;
  --color-success: #23663c;
  --color-info: #176b87;
  --color-warning: #a66c00;
  --color-danger: #c52b1d;
  --color-light: #f3f5f7;
  --color-dark: var(--site-color-background);
  --color-muted: #748391;
  --color-indigo: #4338ca;
  --color-purple: #7b3694;
  --color-pink: #bd2868;
  --color-orange: #bf5a00;
  --color-teal: #087c73;
  --color-cyan: #1187a0;
  --color-violet: #6933c9;
  --color-magenta: #a51db5;
  --color-ruby: #b81550;
  --color-amber: #a95a00;
  --color-lime: #438b08;

  --message-success-color: var(--color-success);
  --message-success-background: #edf8f1;
  --message-danger-color: var(--color-danger);
  --message-danger-background: #fbeaec;
  --message-warning-color: var(--color-warning);
  --message-warning-background: #fff8df;
  --message-info-color: #805610;
  --message-info-background: #fff9e9;
}

/* Componente compartido de identidad configurable por proyecto. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-width: 0;
}

.brand-logo-frame {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--site-color-background-rgb), .1);
  border-radius: .45rem;
  background: #fff;
}

.brand-logo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  padding: .12rem;
  object-fit: contain;
}

.brand-lockup-separator {
  width: 1px;
  height: 1.65rem;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .25;
}

.brand-lockup-hero { width: 100%; gap: .75rem; }
.brand-lockup-hero .brand-logo-frame { width: min(42%, 7rem); height: auto; aspect-ratio: 1; border-radius: .85rem; }
.brand-lockup-hero .brand-lockup-separator { height: 5rem; }
.brand-lockup-sidebar { gap: .22rem; }
.brand-lockup-sidebar .brand-logo-frame { width: 1.95rem; height: 1.95rem; border-radius: .35rem; }
.brand-lockup-sidebar .brand-lockup-separator { height: 1.25rem; }
.brand-lockup-footer .brand-logo-frame { width: 2.6rem; height: 2.6rem; }
.brand-lockup-footer .brand-lockup-separator { height: 1.7rem; }

@media (max-width: 600px) {
  .brand-lockup-topbar .brand-logo-frame { width: 2.05rem; height: 2.05rem; }
  .brand-lockup-footer .brand-logo-frame { width: 2.25rem; height: 2.25rem; }
}