/* ============================================================
   OMIP SA - Header
   Cabeçalho fixo (sticky). Dois modos:
   - HOME (index.html): transparente sobre o hero, fica claro ao
     fazer scroll (classe .is-scrolled adicionada por js/main.js).
   - SUBPÁGINA (atividade.html): sempre claro, via classe
     .is-sub no <header> (não precisa de JS).
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease, color .25s ease, transform .3s ease, opacity .3s ease;
  color:#fff;
  border-bottom: 1px solid transparent;
}

/* Escondida ao rolar (a nav flutuante assume a navegacao). So visibilidade. */
.site-header.is-hidden{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Estado claro: scroll na home, ou permanente nas subpáginas */
.site-header.is-scrolled,
.site-header.is-sub{
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(14px);
  color: var(--black);
  border-bottom-color: #0000000f;
}
.site-header.is-scrolled .logo.is-light .om{ color: var(--grey-green-light); }
.site-header.is-scrolled .logo.is-light .ip{ color: var(--green-500); }
.site-header.is-scrolled .nav a{ color: var(--black); }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 32px;
  padding-top: 18px; padding-bottom: 18px;
  /* o padding horizontal vem de .container (32px / 64px ≥960) */
}
.site-header.is-sub .header-inner{ padding-top: 12px; padding-bottom: 12px; }

/* --- Navegação --- */
.nav{
  display:flex; align-items:center; gap: 28px;
  font: 500 14px/1 'Abadi','Inter',sans-serif;
  letter-spacing:.01em;
}
.nav a{ color:#fff; opacity:.92; transition: opacity .2s ease; }
.nav a:hover{ opacity:1; }

.header-actions{
  display:flex; align-items:center; gap: 12px;
}

/* --- Seletor de idioma: pill com bandeira + dropdown PT/ES/EN --- */
.sub-actions{ display:inline-flex; align-items:center; gap:12px; }
.lang-select{ position:relative; }
.lang-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #ffffff3d; color:#fff;
  padding: 7px 12px; border-radius: var(--radius-pill);
  font: 600 13px/1 'Abadi','Inter',sans-serif;
  cursor:pointer; background:transparent;
  transition: border-color .2s ease, color .2s ease;
}
.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{ 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:#fff; border:1px solid #0000001a; 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: 500 13px/1 'Abadi','Inter',sans-serif; color: var(--black);
}
.lang-opt:hover{ background: var(--green-50, #f4f9ec); }
.lang-opt.is-active{ background: var(--green-50, #f4f9ec); font-weight:700; }
.lang-menu .lang-flag{ border-color:#0000001a; }
/* Cabecalho claro (subpagina is-sub) ou scrolled: pill a escuro. */
.site-header.is-scrolled .lang-pill,
.site-header.is-sub .lang-pill{ border-color:#0000001f; color: var(--black); }

/* --- Botão "Voltar" (subpáginas) --- */
.back{
  display:inline-flex; align-items:center; gap:10px;
  font: 600 14px/1 'Abadi','Inter',sans-serif;
  color: var(--black);
  padding: 6px 14px 6px 10px; border-radius: var(--radius-pill);
  border: 1px solid #0000001f; background:#fff;
  transition: background .2s ease, border-color .2s ease;
}
.back:hover{ border-color: var(--black); }
.back svg{ width:14px; height:14px; }

@media (max-width: 960px){
  .nav{display:none}
  .header-actions .btn-secondary, .header-actions .btn-ghost-light{display:none}
}

/* --- Botoes GIG e Marketplace do cabecalho: cores do "Portal GIG"
       (.btn--primary do GIG: verde 500, texto branco, seta verde 700).
       Recolorem-se por seletor, sem trocar a classe, para preservar o
       display:none em mobile e nao afetar o .btn-primary do hero. --- */
.header-actions .btn-ghost-light{
  background: var(--green-500);
  color: #fff;
  border-color: transparent;
}
.header-actions .btn-ghost-light .arrow{ background: var(--green-700); color:#fff; }
.header-actions .btn-ghost-light:hover,
.header-actions .btn-ghost-light:focus-visible{
  background: var(--green-600);
  border-color: transparent;
}
/* Manter o verde tambem com o header em estado "scrolled". */
.site-header.is-scrolled .btn-ghost-light{
  background: var(--green-500);
  color: #fff;
  border-color: transparent;
}
.site-header.is-scrolled .btn-ghost-light .arrow{ background: var(--green-700); color:#fff; }