/* =====================================================================
   HEADER — nav fixa
   ===================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}

.header-inner {
  max-width: 100%;            /* header ocupa a largura total — margens laterais reduzidas */
  margin-inline: 0;
  padding: 18px clamp(20px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  flex-shrink: 0;
}
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}
.brand-mark { color: var(--red); display: inline-flex; }

.brand-thin { font-weight: 300; color: var(--gray); margin-left: 2px; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;   /* [TESTE] empurra a nav para a direita */
}
.main-nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--gray);
  border-radius: 100px;
  transition: color .3s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.main-nav a:hover { color: var(--white); }
.main-nav a:hover::after { transform: scaleX(1); }

.header-cta { padding: 11px 22px; }

/* ---------- Ações da nav: idioma + CTA ---------- */
.nav-actions {
  display: none;   /* [TESTE] actions (idioma + CTA) ocultos temporariamente */
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Seletor de idioma */
.lang-switch { position: relative; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: border-color .3s, background .3s;
}
.lang-toggle:hover { border-color: var(--red); background: rgba(255,255,255,0.04); }
.lang-globe { width: 16px; height: 16px; }
.lang-caret { width: 10px; height: 7px; color: var(--gray); transition: transform .3s var(--ease); }
.lang-switch.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: rgba(18,18,20,0.96);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.75);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 120;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }

.lang-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--gray);
  font-size: 0.9rem;
  font-weight: 400;
  text-align: left;
  transition: background .2s, color .2s;
}
.lang-menu button:hover { background: rgba(255,255,255,0.05); color: var(--white); }
.lang-menu button.is-active { color: var(--white); }
/* "check" em vermelho no idioma ativo */
.lang-menu button.is-active::after {
  content: "";
  width: 13px; height: 7px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg) translateY(-2px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;                    /* cobre a tela toda — imune ao containing block do header */
    z-index: 90;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;          /* itens dividem a altura igualmente */
    gap: 0;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(18px);
    padding: 96px var(--gutter) 48px;  /* topo livre p/ logo + botão fechar */
    transform: translateY(-120%);      /* mesma animação: desliza de cima */
    transition: transform .5s var(--ease);
    overflow-y: auto;
  }
  .main-nav.open { transform: none; }
  /* logo e toggle acima do overlay fullscreen (continuam clicáveis) */
  .brand, .nav-toggle { position: relative; z-index: 110; }
  .main-nav a {
    flex: 1 1 0;                 /* cada link ocupa fatia igual da altura */
    display: flex;
    align-items: center;        /* centraliza na vertical */
    justify-content: center;    /* centraliza na horizontal */
    text-align: center;
    min-height: 56px;
    padding: 15px 8px;
    font-size: 1.6rem;
    border-radius: 0;            /* sem cantos arredondados */
    border-bottom: 1px solid var(--line);   /* separador em linha reta */
  }
  .main-nav a:last-child { border-bottom: none; }
  .main-nav a::after { display: none; }
  .header-cta { display: none; }               /* CTA fica dentro do menu / hero no mobile */
  .nav-actions { margin-left: auto; }          /* empurra o seletor de idioma p/ a direita */
  .nav-toggle { display: flex; margin-left: auto; }   /* toggle na extremidade oposta à logo */
}

/* =====================================================================
   HEADER ADAPTATIVO — tema CLARO enquanto a section FAQ está sob o header
   A classe .over-light é alternada em js/header.js; a mudança de cor é
   animada aqui via transition (.4s). Mantém a logo/nav legíveis sobre o
   fundo off-white da section de Dúvidas.
   ===================================================================== */

/* Crossfade entre as duas logos: a preta empilha sobre a branca */
.brand { position: relative; }
.brand-logo { transition: opacity 0.4s var(--ease); }
.brand-logo--dark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;                                /* escondida no tema escuro */
}
.nav-toggle span { transition: transform 0.3s var(--ease), opacity 0.3s, background 0.4s var(--ease); }

/* Estado claro (colocado após .scrolled para vencer no cascade) */
.site-header.over-light {
  background: #f7f6f3;                       /* mesmo off-white do FAQ */
  backdrop-filter: none;
  border-bottom-color: rgba(0, 0, 0, 0.10);
}
/* Troca a logo branca pela preta na section clara */
.site-header.over-light .brand-logo--light { opacity: 0; }
.site-header.over-light .brand-logo--dark { opacity: 1; }
.site-header.over-light .main-nav a { color: #3a3a40; }
.site-header.over-light .main-nav a:hover { color: var(--red); }
.site-header.over-light .nav-toggle span { background: #1a1a1e; }