/* =========================================================
   header.css - Header fixo + navegação + logótipo + seletor de idioma
   Reutilizável em todas as páginas de conteúdo.
   Carregar a seguir a base.css.
   ========================================================= */
.header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease, transform .3s ease, opacity .3s ease;
  color:var(--white);
  border-bottom:1px solid transparent;
}

/* Escondida ao rolar (a nav flutuante assume a navegacao). So visibilidade. */
.header.is-hidden{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
.header .container{display:flex;align-items:center;gap:24px;width:100%}
.header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.header .brand .lockup{display:flex;align-items:center;gap:0;font-weight:800;font-size:22px;letter-spacing:-.01em}
.header .brand .lockup .om{color:var(--grey-green-light)}
.header .brand .lockup .ip{color:var(--green-500)}
.header .brand .lockup .sep{width:1px;height:18px;background:currentColor;opacity:.35;margin:0 10px}
.header .brand .lockup .tag{font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.9}

.nav{display:none;gap:22px;margin-left:auto}
@media (min-width:1100px){.nav{display:flex}}
.nav a{
  color:inherit;text-decoration:none;font-size:14px;font-weight:500;
  opacity:.85;transition:opacity .2s ease;
}
.nav a:hover{opacity:1}

.header .cta-group{display:flex;align-items:center;gap:10px;margin-left:auto}
@media (min-width:1100px){.header .cta-group{margin-left:0}}

/* Variante claro-sobre-escuro (sobre o hero, antes do scroll) */
.header:not(.is-scrolled) .brand .lockup .om{color:rgba(255,255,255,.75)}
.header:not(.is-scrolled) .brand .lockup .ip{color:var(--green-500)}
.header:not(.is-scrolled) .brand .lockup .sep{background:rgba(255,255,255,.5)}

/* Estado "scrolled" (fundo branco translúcido) */
.header.is-scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  color:var(--black);
  border-bottom-color:var(--light-grey-200);
  box-shadow:0 1px 0 rgba(19,16,13,.04);
}
.header.is-scrolled .brand .lockup .om{color:var(--grey-green-dark)}
.header.is-scrolled .brand .lockup .ip{color:var(--green-500)}
.header.is-scrolled .brand .lockup .sep{background:var(--grey-green-dark);opacity:.45}
.header.is-scrolled .brand .lockup .tag{color:var(--grey-green-dark)}

/* Seletor de idioma: pill com bandeira + dropdown PT/ES/EN */
.lang-select{position:relative}
.lang-pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid currentColor;color:inherit;
  padding:7px 12px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:600;background:transparent;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.header:not(.is-scrolled) .lang-pill{border-color:rgba(255,255,255,.5)}
.header.is-scrolled .lang-pill{border-color:var(--light-grey-300);color:var(--black)}
.lang-flag{
  width:18px;height:18px;border-radius:50%;overflow:hidden;
  display:inline-flex;flex:0 0 18px;border:1px solid #00000020;
}
.lang-flag svg{display:block;width:100%;height:100%}
.lang-pill .chev{width:10px;height:10px;opacity:.7;transition:transform .2s ease}
.lang-select.open .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:100;
  min-width:164px;margin:0;padding:5px;list-style:none;
  background:var(--white);border:1px solid var(--light-grey-200);border-radius:14px;
  box-shadow:0 12px 32px rgba(19,16,13,.14);display:none;
}
.lang-select.open .lang-menu{display:block}
.lang-opt{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:9px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--black);
}
.lang-opt:hover{background:var(--green-50)}
.lang-opt.is-active{background:var(--green-50);font-weight:700}
.lang-menu .lang-flag{border-color:#0000001a}

/* Mobile (<=600px): encolher o toggle e o botao Portal GIG para o botao caber
   inteiro (sem seta, so texto, mais compacto). */
@media (max-width:600px){
  .lang-pill{ padding:6px 9px; font-size:12px; gap:6px; }
  .cta-group{ gap:8px; }
  .cta-group .btn--primary{ padding:9px 16px; font-size:13px; }
  .cta-group .btn--primary .arrow{ display:none; }
}