/* Etapa 1: additions only. Original navigation, title and 3D rules are retained.
 * The zero-height role uses the existing gap below h1 without moving the layout.
 * The logo viewport displays the SG pixels from the approved, unmodified PNG.
 */
.identity-manager {
  position: relative;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: var(--name-reveal);
  pointer-events: none;
}

.identity-manager > span {
  position: absolute;
  top: 0.3rem;
  left: 50%;
  display: inline-block;
  transform: translateX(-50%);
  padding-left: 0.48em;
  color: #ead7ae;
  font: 600 clamp(0.6rem, 0.8vw, 0.72rem)/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.48em;
  white-space: nowrap;
  text-shadow: 0 0 3px rgba(235, 212, 163, 0.18);
  filter: drop-shadow(0 1px 1px rgba(3, 10, 16, 0.95));
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .identity-manager > span {
    background: linear-gradient(105deg, #e1c48c 0%, #eddbb4 30%, #f8efdc 49%, #e5dfdd 60%, #ded8e7 71%, #ead3a5 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

body .topbar .monogram.sg-approved-logo {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

.sg-approved-mark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 432 / 348;
  overflow: hidden;
}

/* Static decorative images: no filters, transforms, glow or animation. */
.portal-nav .portal-icon {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-inline-start: calc(-16px - 0.4rem);
  object-fit: contain;
  pointer-events: none;
}

/* Keep the original transform transition used by title-motion.js. */
.portal-nav .portal-label {
  transition: transform 240ms cubic-bezier(.2, .65, .3, 1), color 220ms ease, text-shadow 220ms ease;
}

.portal-nav .portal-link:is(:hover, :focus-visible, :active, .is-entering, [aria-expanded="true"]) > .portal-label,
.portal-nav .portal-menu[open] > .portal-link > .portal-label {
  color: rgb(var(--portal-accent));
  text-shadow: 0 0 4px rgba(var(--portal-accent), 0.12);
  filter: drop-shadow(0 1px 1px rgba(2, 9, 13, 0.7));
}

/* A single light pass clipped inside the glyphs. No pseudo-elements or copies. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .portal-nav .portal-link:is(:hover, :focus-visible, :active, .is-entering, [aria-expanded="true"]) > .portal-label,
  .portal-nav .portal-menu[open] > .portal-link > .portal-label {
    background-image: linear-gradient(105deg, rgb(var(--portal-accent)) 0%, rgb(var(--portal-accent)) 44%, #fff4df 50%, rgb(var(--portal-accent)) 56%, rgb(var(--portal-accent)) 100%);
    background-size: 280% 100%;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: sg-letter-light 220ms ease-out 1 both;
  }
}

@keyframes sg-letter-light {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}

/* Use the existing inter-label space on compact desktop/tablet navigation. */
@media (min-width: 601px) and (max-width: 1100px) {
  .portal-nav .portal-icon {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
    margin-inline-start: calc(-14px - 0.15rem);
    margin-inline-end: -0.25rem;
  }
}

@media (max-width: 600px) {
  .identity-manager > span { top: 0.125rem; font-size: 0.6rem; }
  .portal-nav .portal-icon { flex-basis: 14px; width: 14px; height: 14px; margin-inline-start: calc(-14px - 0.4rem); }
}

@media (min-width: 601px) and (max-height: 600px) and (orientation: landscape) {
  .portal-nav .portal-icon {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
    margin-inline-start: -12px;
    margin-inline-end: -4px;
  }
}

@media (max-height: 740px) and (max-width: 600px), (max-height: 600px) and (orientation: landscape) {
  .identity-manager > span { top: 0.12rem; font-size: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-nav .portal-link > .portal-label { animation: none !important; transition: none !important; }
}

body.world-reduced .portal-nav .portal-link > .portal-label,
body.reduced-experience .portal-nav .portal-link > .portal-label {
  animation: none !important;
  transition: none !important;
}

@media (forced-colors: active) {
  .identity-manager > span,
  .portal-nav .portal-link > .portal-label {
    background: none !important;
    color: CanvasText !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }
}