/* ══════════════════════════════════════════════════════════
   Morphed Menu — port do Awards Morphed Menu (Framer)
   Painel que expande com spring, links com flip 3D, roller
   no botão, seta animada e underline nos links sociais.
   ══════════════════════════════════════════════════════════ */

/* ─── Ocultar nav e toolbar legados ─── */
body.has-morphed-menu .site-nav,
body.has-morphed-menu .site-header__toolbar {
  display: none !important;
}

/* Chips do header (logo + MENU): mesma escala e verde glass */
body.has-morphed-menu {
  --morphed-chip-h: 46px;
  --morphed-chip-inset: 16px;
  --morphed-chip-pad-x: 0.72rem;
  --morphed-chip-radius: 25px;
  --morphed-chip-font: 13px;
  --morphed-chip-tracking: 0.1em;
  --morphed-chip-glass-bg: rgba(43, 73, 57, 0.62);
  --morphed-chip-glass-bg: color-mix(in srgb, var(--color-secondary, #2b4939) 65%, transparent);
  --morphed-chip-glass-blur: blur(14px) saturate(1.2);
  --morphed-chip-glass-border: rgba(250, 247, 242, 0.18);
  --morphed-panel-open-w: 340px;
  --morphed-panel-open-max-h: 420px;
  --morphed-panel-pad-block: 30px;
  --morphed-panel-pad-inline: 26px;
  --morphed-panel-pad-top-extra: 10px;
  --morphed-nav-size: clamp(1.05rem, 2.2vw, 1.28rem);
}

body.has-morphed-menu .site-header--home-bar {
  grid-template-columns: auto !important;
  grid-template-rows: auto !important;
  height: calc(var(--morphed-chip-inset) * 2 + var(--morphed-chip-h));
  min-height: calc(var(--morphed-chip-inset) * 2 + var(--morphed-chip-h));
  padding: 0;
  overflow: visible;
  pointer-events: none;
  background: transparent;
}

/* ─── Logo em chip glass (quando usa morphed menu) ─── */
body.has-morphed-menu .site-header--home-bar .site-logo--brand {
  position: fixed;
  top: var(--morphed-chip-inset);
  left: var(--morphed-chip-inset);
  z-index: 10002;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: var(--morphed-chip-h);
  min-height: var(--morphed-chip-h);
  max-height: var(--morphed-chip-h);
  padding: 0 var(--morphed-chip-pad-x);
  border-radius: var(--morphed-chip-radius);
  background: var(--morphed-chip-glass-bg);
  -webkit-backdrop-filter: var(--morphed-chip-glass-blur);
  backdrop-filter: var(--morphed-chip-glass-blur);
  border: 0.5px solid var(--morphed-chip-glass-border);
  box-shadow: 0 0 0 1px rgba(250, 247, 242, 0.08);
  color: var(--color-cream, #faf7f2) !important;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: var(--morphed-chip-font) !important;
  font-weight: 600;
  letter-spacing: var(--morphed-chip-tracking) !important;
  line-height: 1;
  overflow: hidden;
  pointer-events: auto;
}

body.has-morphed-menu .site-header--home-bar .site-logo--brand .site-logo__mark:not(.site-logo__mark--official) {
  filter: brightness(0) invert(1);
  width: 1.08em;
  height: 1.08em;
}

body.has-morphed-menu .site-header--home-bar .site-logo--brand .site-logo__mark--official {
  filter: none;
  width: auto;
  height: calc(var(--morphed-chip-h) - 18px);
  aspect-ratio: 1024 / 402;
  object-fit: contain;
}

/* Lockup no header (home): chip inteiro oculto no hero; entra completo após a capa */
.site-logo--lockup {
  gap: 0;
  letter-spacing: 0;
  --logo-lockup-h: calc(var(--morphed-chip-h, 46px) - 18px);
  --logo-name-h: calc(var(--logo-lockup-h) / 1.6995);
  --logo-name-w: calc(var(--logo-name-h) * 3.2865);
  --logo-sym-w: calc(var(--logo-name-h) * 1.8292);
  --logo-sym-h: var(--logo-lockup-h);
  --logo-lockup-gap: calc(var(--logo-name-h) * 0.3546);
}

.site-logo__lockup {
  display: inline-flex;
  align-items: center;
  height: var(--logo-lockup-h);
  gap: var(--logo-lockup-gap);
}

.site-logo__symbol,
.site-logo__name {
  display: block;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-logo__symbol {
  width: var(--logo-sym-w);
  height: var(--logo-sym-h);
  -webkit-mask-image: url("../img/braci-sym-v2.svg");
  mask-image: url("../img/braci-sym-v2.svg");
  -webkit-mask-position: center;
  mask-position: center;
}

.site-logo__name {
  width: var(--logo-name-w);
  height: var(--logo-name-h);
  -webkit-mask-image: url("../img/braci-nome-v2.svg");
  mask-image: url("../img/braci-nome-v2.svg");
  -webkit-mask-position: left center;
  mask-position: left center;
}

body.page--home:not(.header-logo--expanded) .site-header--home-bar .site-logo--brand {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -8px, 0) scale(0.94);
}

body.page--home.header-logo--expanded .site-header--home-bar .site-logo--brand {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.7s;
}

@media (prefers-reduced-motion: reduce) {
  body.page--home:not(.header-logo--expanded) .site-header--home-bar .site-logo--brand {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  body.page--home.header-logo--expanded .site-header--home-bar .site-logo--brand {
    transition: none !important;
  }
}

/* ─── Container fixo ─── */
.morphed-menu {
  position: fixed;
  top: var(--morphed-chip-inset, 16px);
  right: var(--morphed-chip-inset, 16px);
  z-index: 10002;
  pointer-events: none;
}

/* ─── Painel morfável ─── */
.morphed-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: auto;
  min-height: var(--morphed-chip-h, 46px);
  max-height: var(--morphed-chip-h, 46px);
  border-radius: var(--morphed-chip-radius, 25px);
  background-color: var(--morphed-chip-glass-bg, rgba(43, 73, 57, 0.62));
  -webkit-backdrop-filter: var(--morphed-chip-glass-blur, blur(14px) saturate(1.2));
  backdrop-filter: var(--morphed-chip-glass-blur, blur(14px) saturate(1.2));
  border: 0.5px solid var(--morphed-chip-glass-border, rgba(250, 247, 242, 0.18));
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(250, 247, 242, 0.08);
  overflow: hidden;
  pointer-events: auto;
  will-change: width, max-height;
  transition:
    width  0.7s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-radius 0.45s ease;
}

.morphed-menu.is-open .morphed-menu__panel {
  width: var(--morphed-panel-open-w, 360px);
  max-height: var(--morphed-panel-open-max-h, 420px);
  border-radius: 20px;
  background-color: rgba(43, 73, 57, 0.74);
  border-color: rgba(250, 247, 242, 0.22);
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(250, 247, 242, 0.1);
  transition:
    width  0.7s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-radius 0.45s ease;
}

/* Fechar: colapsa altura ao chip e só depois estreita — evita “retângulo” intermediário */
.morphed-menu.is-closing .morphed-menu__content {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.morphed-menu.is-closing .morphed-menu__panel {
  max-height: var(--morphed-chip-h, 46px);
  min-height: var(--morphed-chip-h, 46px);
  border-radius: var(--morphed-chip-radius, 25px);
  transition:
    width  0.55s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.38s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* ─── Conteúdo do painel ─── */
.morphed-menu__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.35rem;
  height: auto;
  padding:
    calc(var(--morphed-chip-h, 46px) + var(--morphed-panel-pad-top-extra, 10px))
    var(--morphed-panel-pad-inline, 32px)
    var(--morphed-panel-pad-block, 36px)
    var(--morphed-panel-pad-inline, 32px);
  pointer-events: none;
}

.morphed-menu.is-open .morphed-menu__content {
  pointer-events: auto;
}

/* ─── Links de navegação ─── */
.morphed-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.morphed-menu__nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 7px 10px;
  margin: 0 -4px;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0s,
    transform 0s,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.morphed-menu__nav-item.is-current {
  background: rgba(250, 247, 242, 0.11);
  box-shadow: inset 3px 0 0 var(--color-accent, #c86d3f);
}

.morphed-menu__nav-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity  0.62s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.62s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Seta animada */
.morphed-menu__arrow {
  flex-shrink: 0;
  width: 0;
  height: 18px;
  color: var(--color-accent, #9e3d18);
  overflow: visible;
  display: block;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.morphed-menu__nav-item:hover .morphed-menu__arrow {
  width: 30px;
}

/* Texto do link */
.morphed-menu__nav-link {
  color: var(--color-cream, #faf7f2);
  text-decoration: none;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: var(--morphed-nav-size, clamp(1.05rem, 2.2vw, 1.28rem));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: normal;
  opacity: 0.52;
  transition: opacity 0.2s ease;
}

.morphed-menu__nav-item.is-current .morphed-menu__nav-link,
.morphed-menu__contact-wrap.is-current .morphed-menu__nav-link {
  opacity: 1;
}

@media (hover: hover) {
  .morphed-menu__nav-item:hover:not(.is-current) .morphed-menu__nav-link,
  .morphed-menu__contact-wrap:hover:not(.is-current) .morphed-menu__nav-link {
    opacity: 0.78;
  }
}

/* Clique/tap não deve deixar o anel azul do navegador nos links */
.morphed-menu__nav-link,
.morphed-menu__contact-opt,
.morphed-menu__social-link {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.morphed-menu__nav-link:focus:not(:focus-visible),
.morphed-menu__contact-opt:focus:not(:focus-visible),
.morphed-menu__social-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.morphed-menu__nav-link:focus-visible,
.morphed-menu__contact-opt:focus-visible,
.morphed-menu__social-link:focus-visible {
  outline: 2px solid rgba(250, 247, 242, 0.55);
  outline-offset: 3px;
}

/* ─── Item Contato (botão + sub-opções) ─── */
.morphed-menu__nav-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

/* Chevron de "Contatos" — dica visual de que expande. Só no touch (no desktop
   o hover já revela os atalhos). Gira 180° quando aberto. */
.morphed-menu__contact-chevron {
  display: none;
  flex-shrink: 0;
  align-items: center;
  color: var(--color-cream, #faf7f2);
  opacity: 0.45;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.morphed-menu__contact-wrap.is-current .morphed-menu__contact-chevron {
  opacity: 0.85;
}

.morphed-menu__contact-wrap {
  margin: 0 -4px;
  border-radius: 10px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.morphed-menu__contact-wrap.is-current {
  background: rgba(250, 247, 242, 0.11);
  box-shadow: inset 3px 0 0 var(--color-accent, #c86d3f);
}

.morphed-menu__nav-item--contact {
  padding: 7px 10px;
  margin: 0;
  border-radius: 10px 10px 0 0;
}

.morphed-menu__contact-wrap.is-current .morphed-menu__nav-item--contact {
  background: transparent;
  box-shadow: none;
}

.morphed-menu__contact-wrap:has(.morphed-menu__contact-sub.is-expanded)
  .morphed-menu__contact-chevron {
  transform: rotate(180deg);
}

.morphed-menu__contact-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.morphed-menu__contact-sub.is-expanded {
  max-height: 56px;
  padding-bottom: 8px;
}

.morphed-menu__contact-opt {
  color: var(--color-cream, #faf7f2);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  line-height: normal;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: clamp(0.68rem, 1.5vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(250, 247, 242, 0.28);
  border-radius: 100px;
  padding: 5px 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  transition:
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.morphed-menu__contact-sub.is-expanded .morphed-menu__contact-opt {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.morphed-menu__contact-sub.is-expanded .morphed-menu__contact-opt:nth-child(1) {
  transition-delay: 0.06s;
}

.morphed-menu__contact-sub.is-expanded .morphed-menu__contact-opt:nth-child(2) {
  transition-delay: 0.14s;
}

.morphed-menu__contact-opt:hover {
  background-color: rgba(250, 247, 242, 0.12);
  border-color: rgba(250, 247, 242, 0.6);
}

/* Reveal por hover só em dispositivos com cursor — no touch o gatilho é o tap
   (classe .is-expanded via JS), evitando o sticky-hover do iOS. */
@media (hover: hover) {
  .morphed-menu__contact-wrap:hover .morphed-menu__arrow {
    width: 30px;
  }

  .morphed-menu__contact-wrap:hover .morphed-menu__contact-sub {
    max-height: 56px;
    padding-bottom: 8px;
  }

  .morphed-menu__contact-wrap:hover .morphed-menu__contact-opt {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .morphed-menu__contact-wrap:hover .morphed-menu__contact-opt:nth-child(1) {
    transition-delay: 0.06s;
  }

  .morphed-menu__contact-wrap:hover .morphed-menu__contact-opt:nth-child(2) {
    transition-delay: 0.14s;
  }
}

/* ─── Links sociais ─── */
.morphed-menu__social {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: clamp(32px, 5vw, 64px);
  row-gap: 8px;
  margin-top: 0;
  padding-left: 6px;
}

.morphed-menu__social-item {
  position: relative;
  width: fit-content;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  justify-self: start;
  transition: opacity 0s, transform 0s;
}

.morphed-menu__social-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity  0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.morphed-menu__social-link {
  color: var(--color-cream, #faf7f2);
  text-decoration: none;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: clamp(0.82rem, 1.8vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  opacity: 0.6;
  display: block;
  transition: opacity 0.2s ease;
}

.morphed-menu__social-item:hover .morphed-menu__social-link {
  opacity: 1;
}

/* Underline animado */
.morphed-menu__underline {
  display: none;
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 0;
  background: var(--color-cream, #faf7f2);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.morphed-menu__social-item:hover .morphed-menu__underline {
  width: 100%;
}

/* ─── Botão MENU / FECHAR ─── */
.morphed-menu__btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: var(--morphed-chip-h, 46px);
  border: none;
  border-radius: var(--morphed-chip-radius, 25px);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: transparent;
  z-index: 2;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.morphed-menu__btn:focus-visible {
  outline: 2px solid rgba(250, 247, 242, 0.55);
  outline-offset: 3px;
}

/* Track: empilha face MENU (topo) e FECHAR (baixo) */
.morphed-menu__btn-track {
  position: relative;
  height: 200%;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.morphed-menu.is-open .morphed-menu__btn-track {
  transform: translateY(-50%);
}

/* Cada face = metade do track = altura do botão */
.morphed-menu__face {
  height: 50%;
  position: relative;
  overflow: hidden;
}

.morphed-menu__face--menu {
  /* Transparente: o verde glass vem do painel por baixo (igual ao chip do logo) */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
}
.morphed-menu__face--close {
  /* Só texto (sem “chip”/cápsula) */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
}

/* Roller: dois spans empilhados — animação de rolo no hover */
.morphed-menu__roller {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.morphed-menu__roller span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Unbounded', sans-serif);
  font-size: var(--morphed-chip-font, 13px);
  font-weight: 600;
  letter-spacing: var(--morphed-chip-tracking, 0.1em);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.morphed-menu__face--menu  .morphed-menu__roller span { color: var(--color-cream, #faf7f2); }
.morphed-menu__face--close .morphed-menu__roller span { color: var(--color-cream, #faf7f2); }

.morphed-menu__face--close .morphed-menu__roller {
  border-radius: 0;
}

.morphed-menu__face--close .morphed-menu__roller span {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.28),
    0 0 1px rgba(0, 0, 0, 0.25);
}

/* Span duplicado fica oculto — sem animação de roller no hover */
.morphed-menu__roller span:first-child { transform: translateY(0); }
.morphed-menu__roller span:last-child  { display: none; }

/* ─── Mobile ─── */
@media (max-width: 768px) {
  body.has-morphed-menu {
    --morphed-chip-h: 40px;
    --morphed-chip-inset: 10px;
    --morphed-chip-pad-x: 0.62rem;
    --morphed-chip-radius: 22px;
    --morphed-chip-font: 12px;
    --morphed-panel-open-w: min(88vw, 292px);
    --morphed-panel-open-max-h: 400px;
    --morphed-panel-pad-block: 28px;
    --morphed-panel-pad-inline: 20px;
    --morphed-panel-pad-top-extra: 6px;
    --morphed-nav-size: 0.98rem;
  }

  .morphed-menu__panel {
    width: 90px;
    min-height: var(--morphed-chip-h);
    max-height: var(--morphed-chip-h);
  }

  .morphed-menu.is-open .morphed-menu__panel {
    width: var(--morphed-panel-open-w, min(88vw, 320px));
    max-height: var(--morphed-panel-open-max-h, 400px);
    border-radius: 18px;
  }

  .morphed-menu__btn {
    width: 90px;
    height: var(--morphed-chip-h);
  }

  .morphed-menu__content {
    gap: 1.15rem;
  }

  /* Seta não faz sentido em touch — evita bug de sticky-hover no iOS */
  .morphed-menu__arrow {
    display: none;
  }

  /* Chevron aparece no touch como dica de que "Contatos" expande. */
  .morphed-menu__contact-chevron {
    display: inline-flex;
  }

  /* No touch os atalhos (WhatsApp / E-mail) ficam escondidos até tocar em
     "Contatos" (.is-expanded via morphed-menu.js), que também navega para
     index.html#contato e mantém o menu aberto. */
}

@media (hover: none) {
  .morphed-menu__nav-item,
  .morphed-menu__nav-item--contact {
    min-height: 38px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  .morphed-menu__nav-item--contact {
    position: relative;
    width: 100%;
    cursor: pointer;
  }
}

/* ─── Prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .morphed-menu.is-closing .morphed-menu__content {
    transition: none;
  }

  .morphed-menu__panel,
  .morphed-menu__btn-track,
  .morphed-menu__roller span,
  .morphed-menu__arrow,
  .morphed-menu__underline,
  .morphed-menu__contact-opt {
    transition: none !important;
  }

  .morphed-menu__nav-item,
  .morphed-menu__social-item {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }

  .morphed-menu__nav-item.is-visible,
  .morphed-menu__social-item.is-visible {
    opacity: 1;
  }

  .morphed-menu__contact-wrap:hover .morphed-menu__contact-opt,
  .morphed-menu__contact-sub.is-expanded .morphed-menu__contact-opt {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════
   Seletor de idioma (PT/EN) — chip glass ao lado do botão MENU
   ══════════════════════════════════════════════════════════ */
.braci-lang {
  position: fixed;
  top: var(--morphed-chip-inset, 16px);
  /* à esquerda do botão MENU (painel fechado = 110px) + respiro */
  right: calc(var(--morphed-chip-inset, 16px) + 110px + 10px);
  z-index: 10002;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--morphed-chip-h, 46px);
  padding: 0 0.5rem;
  border-radius: var(--morphed-chip-radius, 25px);
  background: var(--morphed-chip-glass-bg, rgba(43, 73, 57, 0.62));
  -webkit-backdrop-filter: var(--morphed-chip-glass-blur, blur(14px) saturate(1.2));
  backdrop-filter: var(--morphed-chip-glass-blur, blur(14px) saturate(1.2));
  border: 1px solid var(--morphed-chip-glass-border, rgba(250, 247, 242, 0.18));
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.braci-lang__opt {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0.15rem 0.34rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--morphed-chip-font, 13px);
  font-weight: 600;
  letter-spacing: var(--morphed-chip-tracking, 0.1em);
  line-height: 1;
  color: rgba(250, 247, 242, 0.5);
  transition: color 0.25s ease, opacity 0.25s ease;
}

.braci-lang__opt:hover {
  color: rgba(250, 247, 242, 0.85);
}

.braci-lang__opt.is-active {
  color: #faf7f2;
  cursor: default;
}

.braci-lang__sep {
  width: 1px;
  height: 14px;
  background: rgba(250, 247, 242, 0.28);
}

/* some quando o menu morphado está aberto (o painel expande por cima) */
body.braci-menu-is-open .braci-lang {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

@media (max-width: 480px) {
  .braci-lang {
    padding: 0 0.35rem;
    right: calc(var(--morphed-chip-inset, 16px) + 110px + 6px);
  }
  .braci-lang__opt {
    padding: 0.15rem 0.28rem;
  }
}