/* bloco header: fixo, transparente sobre o hero e solido ao rolar */
.cabecalho {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background-color .5s var(--suave), backdrop-filter .5s var(--suave),
              box-shadow .5s var(--suave);
}
.cabecalho.solido {
  background: rgba(37, 42, 46, .74);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 -1px 0 var(--dark-line);
}

/* barra de progresso da leitura, no fio de baixo do cabecalho */
.cabecalho__progresso {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--teal-fundo), var(--teal));
  transform: scaleX(var(--p, 0)); transform-origin: left;
  opacity: 0; transition: opacity .5s var(--suave);
}
.cabecalho.solido .cabecalho__progresso { opacity: 1; }

.cabecalho__interno {
  height: var(--h-cabecalho);
  display: flex; align-items: center; gap: clamp(24px, 3vw, 56px);
  transition: height .5s var(--mola);
}
.cabecalho.solido .cabecalho__interno { height: var(--h-cabecalho-solido); }

.cabecalho .logo { width: clamp(104px, 8.4vw, 128px); margin-right: auto; transition: width .5s var(--mola); }
.cabecalho.solido .logo { width: 100px; }

/* ---------- menu ---------- */
.menu { display: flex; gap: clamp(18px, 2.2vw, 36px); font-size: calc(14.5px * var(--escala-texto, 1)); font-weight: 500; }
.menu a { color: #d5d8dc; position: relative; padding-block: 6px; transition: color .4s var(--suave); }
.menu a span { position: relative; display: block; }
.menu a span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--teal); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--mola);
}
.menu a:hover { color: #fff; }
.menu a:hover span::after, .menu a.atual span::after { transform: scaleX(1); transform-origin: left; }
.menu a.atual { color: var(--teal); }

.cabecalho__cta { min-height: 46px; padding-inline: 22px; }

/* ---------- menu mobile ---------- */
.menu-mobile { display: none; position: relative; }
.menu-mobile summary { list-style: none; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); display: grid; place-content: center; gap: 6px; cursor: pointer; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary span { display: block; width: 17px; height: 1px; background: #fff; transition: transform .4s var(--mola); }
.menu-mobile[open] summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-mobile[open] summary span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-mobile nav { position: absolute; right: 0; top: 58px; width: 232px; background: rgba(11, 24, 26, .96); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--dark-line), 0 24px 60px rgba(0, 0, 0, .5); border-radius: 20px; padding: 10px; display: flex; flex-direction: column; }
.menu-mobile nav a { padding: 13px 14px; color: #cbced2; font-size: calc(13px * var(--escala-texto, 1)); border-radius: 12px; transition: background-color .3s var(--suave), color .3s var(--suave); }
.menu-mobile nav a:hover { background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal); }

@media (max-width: 1080px) {
  .menu, .cabecalho__cta { display: none; }
  .menu-mobile { display: block; }
}

/* ---------- seletor de idiomas ---------- */
.idiomas { display: flex; align-items: center; gap: 4px; }
.idioma {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding-inline: 10px;
  border-radius: 999px;
  color: #a9acb0; font-size: calc(12px * var(--escala-texto, 1)); font-weight: 700; letter-spacing: .1em;
  transition: background-color .35s var(--suave), color .35s var(--suave);
}
.idioma svg { opacity: .55; transition: opacity .35s var(--suave); }
.idioma:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.idioma:hover svg { opacity: 1; }
.idioma[aria-current] { color: var(--teal); background: color-mix(in srgb, var(--teal) 13%, transparent); }
.idioma[aria-current] svg { opacity: 1; }

@media (max-width: 1080px) { .idiomas { display: none; } }

/* idiomas ainda nao liberados: aparecem, mas nao levam a lugar nenhum */
.idioma--inativo { opacity: .42; cursor: default; }
.idioma--inativo:hover { background: none; color: #a9acb0; }
.idioma--inativo:hover svg { opacity: .55; }