/* Acabamento comum aos controles: vidro fumê sobre a paleta monocromática. */
.button.button-light,
.header-cta,
.intro-skip,
.whatsapp-float,
.menu-toggle,
.bio-link,
.social-channel {
  border-color: rgb(255 255 255 / 20%);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 2%) 48%, rgb(255 255 255 / 4%)),
    rgb(12 12 12 / 42%);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 15%),
    inset 0 -1px 0 rgb(255 255 255 / 4%),
    0 8px 24px rgb(0 0 0 / 24%);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.button.button-light:hover,
.header-cta:hover,
.intro-skip:hover,
.whatsapp-float:hover,
.menu-toggle:hover,
.bio-link:hover,
.social-channel:hover {
  border-color: rgb(255 255 255 / 37%);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 13%), rgb(255 255 255 / 3%) 48%, rgb(255 255 255 / 6%)),
    rgb(16 16 16 / 42%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    inset 0 -1px 0 rgb(255 255 255 / 6%),
    0 10px 26px rgb(0 0 0 / 28%);
}

.button.button-light:active,
.header-cta:active,
.intro-skip:active,
.whatsapp-float:active,
.menu-toggle:active,
.bio-link:active,
.social-channel:active {
  transform: translateY(1px) scale(.99);
  background: rgb(12 12 12 / 56%);
  box-shadow: inset 0 1px 6px rgb(0 0 0 / 22%), 0 3px 12px rgb(0 0 0 / 20%);
}

.control-symbol,
.channel-icon,
.button.button-light svg {
  border-color: rgb(255 255 255 / 17%);
  background: rgb(255 255 255 / 3%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.bio-link small,
.social-channel small { color: #b8b8b8; }

/* Marca mais presente, com contraste limitado para preservar os textos. */
.bio-ambient {
  top: 18%;
  width: min(240vw, 1200px);
  opacity: .18;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .button.button-light,
  .header-cta,
  .intro-skip,
  .whatsapp-float,
  .menu-toggle,
  .bio-link,
  .social-channel { background: rgb(20 20 20 / 90%); }
}

@media (prefers-reduced-motion: reduce) {
  .button.button-light:active,
  .header-cta:active,
  .intro-skip:active,
  .whatsapp-float:active,
  .menu-toggle:active,
  .bio-link:active,
  .social-channel:active { transform: none; }
}
.menu-toggle { border-width: 1px; border-style: solid; border-radius: 8px; }