/* =========================
   HEADER FIX (escopo do header)
   - Evita conflito de variáveis CSS (--text) entre páginas
   - Evita conflito de .container definido em páginas (ex.: obras)
   - Normaliza <button> vs <a> para não "pesar" diferente
   ========================= */
#siteHeader{
  --text: #0f172a;          /* força cor do header igual em todas as páginas */
  --muted: #475569;
}

/* protege o container do header contra redefinições globais de ".container" */
#siteHeader .container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

/* normaliza os botões do menu (principalmente <button>) */
#siteHeader button.nav-btn{
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  appearance: none;
  -webkit-appearance: none;
}

/* garante alinhamento vertical consistente */
#siteHeader .header-inner{
  min-height: 88px;
}

.header{
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  padding: 18px 0;

  transition: transform 420ms ease, opacity 420ms ease, filter 420ms ease;
  will-change: transform, opacity, filter;
}

.header.is-hidden{
  opacity: 0;
  transform: translateY(-110%);
  filter: blur(2px);
  pointer-events: none;
}

.header-inner{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 16px;
}

.brand-logo{ width: 230px; height:auto; display:block; }

.nav{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

/* Seus botões */
.nav-btn{
  position: relative;
  text-decoration:none;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, color 220ms ease;
  cursor: pointer;
}

.nav-btn--drop{
  display:flex;
  align-items:center;
  gap: 8px;
}

.nav-btn:hover{
  color:#fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--relevo-green), #0b6b55);
  transform: translateY(-2px);
  box-shadow: 0 16px 35px rgba(2, 6, 23, 0.18);
}

.chev{ font-size: 0.85rem; opacity: 0.9; }

/* ===== Mega menu ===== */
.nav-item{ position: relative; }

.mega{
  position: absolute;
  top: calc(100% + 12px);

  width: min(980px, calc(100vw - 32px));
  max-width: 980px;

  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.14);
  backdrop-filter: blur(10px);

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
}


.nav-item.is-open .mega{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-item.align-center .mega{
  left: 50%;
  transform: translateX(-50%) translateY(10px);
}
.nav-item.align-center.is-open .mega{
  transform: translateX(-50%) translateY(0);
}


.nav-item.align-right .mega{
  right: -100px;
  left: auto;
}
.nav-item.align-right.is-open .mega{
  transform: translateY(0);
}

.nav-item.align-access .mega{
  right: -220px;
  left: auto;
}
.nav-item.align-access.is-open .mega{
  transform: translateY(0);
}

.nav-item.align-left .mega{
  left: 0;
}
.nav-item.align-left.is-open .mega{
  transform: translateY(0);
}

/* Destacar o botão quando o mega-menu estiver aberto */
.nav-item.is-open > .nav-btn--drop{
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--relevo-green), #0b6b55);
  box-shadow: 0 16px 35px rgba(2, 6, 23, 0.18);
  transform: translateY(-2px);
}

/* Setinha mais clara quando aberto */
.nav-item.is-open > .nav-btn--drop .chev{
  opacity: 0.95;
}

/* Opcional: manter o hover coerente */
.nav-btn--drop:hover{
  color:#fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--relevo-green), #0b6b55);
}




.mega-inner{
  display:grid;
  grid-template-columns: 1.1fr 1.4fr 0.9fr;
  gap: 18px;
  padding: 18px;
}

.mega-inner--simple{
  grid-template-columns: 1.3fr 0.9fr;
}

.mega-title{
  font-weight: 800;
  color: var(--text);
  font-size: 0.95rem;
  margin: 8px 0 12px;
  letter-spacing: 0.2px;
}

.mega-link{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r16);
  text-decoration:none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.8);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  margin-bottom: 10px;
}

.mega-link:hover{
  transform: translateY(-2px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 14px 30px rgba(2,6,23,0.10);
}

.mega-ico{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11, 107, 85, 0.10);
  color: var(--relevo-green);
  font-size: 1.1rem;
}

.mega-label{ display:block; font-weight: 800; color: var(--text); }
.mega-desc{ display:block; color: var(--muted); font-size: 0.86rem; margin-top: 2px; }

.mega-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mega-card{
  display:block;
  padding: 14px;
  border-radius: var(--r16);
  text-decoration:none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.8);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mega-card:hover{
  transform: translateY(-2px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 14px 30px rgba(2,6,23,0.10);
}

.mega-card-ico{
  display:inline-flex;
  width: 40px;
  height: 40px;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(11, 107, 85, 0.10);
  margin-bottom: 10px;
}

.mega-card-label{ display:block; font-weight: 900; color: var(--text); }
.mega-card-desc{ display:block; color: var(--muted); font-size: 0.86rem; margin-top: 3px; }

/* Aside */
.mega-aside{
  border-radius: var(--r16);
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, rgba(11,107,85,0.10), rgba(11,107,85,0.04));
}

.mega-badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.75rem;
  color: #fff;
  background: linear-gradient(135deg, var(--relevo-green), #0b6b55);
  margin-bottom: 10px;
}

.mega-aside-title{ font-weight: 900; color: var(--text); margin-bottom: 6px; }
.mega-aside-desc{ color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; }

.mega-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--relevo-green), #0b6b55);
  box-shadow: 0 16px 35px rgba(2, 6, 23, 0.18);
  transition: transform 180ms ease;
}
.mega-cta:hover{ transform: translateY(-2px); }

/* Mobile */
.nav-toggle{
  display:none;
  border:1px solid rgba(15, 23, 42, 0.12);
  background:#fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 1.1rem;
}

.mobile-nav{
  display:none;
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  background:#fff;
}
.mobile-nav a{
  display:block;
  padding: 10px 0;
  color: var(--text);
  text-decoration:none;
  font-weight: 700;
}

@media (max-width: 980px){
  .mega{ display:none; }         /* mega menu some no mobile */
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .mobile-nav{ display:block; }
}

/* ===========================
   FIX CORES NAV + MEGA MENU
   (coloque no FINAL do header.css)
=========================== */

/* 1) Topo: botões do menu (pílulas) */
.header .nav-btn,
.header .nav-btn--drop { color: #111; }

/* Hover / aberto / ativo -> branco */
.header .nav-item.is-open > .nav-btn--drop,
.header .nav-btn:hover,
.header .nav-btn--drop:hover {
  color: #fff;
}

/* Se seu botão "ativo" usa classe/estado diferente, isso garante */
.header .nav-item.is-open .chev,
.header .nav-btn:hover .chev,
.header .nav-btn--drop:hover .chev {
  color: #fff;
}

/* 2) Mega menu: texto NÃO pode herdar branco do body */
.header .mega,
.header .mega * {
  color: #111;
}

/* Títulos/descrições do mega */
.header .mega-title { color: rgba(0,0,0,.72); }
.header .mega-desc  { color: rgba(0,0,0,.62); }

/* Links/cards do mega */
.header .mega-link,
.header .mega-card,
.header .mega-label {
  color: #111;
}

/* Hover do mega */
.header .mega-link:hover,
.header .mega-card:hover {
  color: #111;
}

/* 3) Botão do topo: só o hover/aberto fica branco
   (evita você precisar de !important no preto) */
.header .nav-btn,
.header .nav-btn--drop {
  text-shadow: none;
}

/* 4) Se ainda existir algum !important antigo forçando preto,
   remova aquele bloco anterior:
   .header, .header a, .header button { color:#111 !important; }
*/
/* topo: cor normal */
.header .nav-btn,
.header .nav-btn--drop { color: #111; }

/* hover e aberto: branco */
.header .nav-btn:hover,
.header .nav-btn--drop:hover,
.header .nav-item.is-open > .nav-btn--drop { color: #fff; }

/* seta no hover/aberto */
.header .nav-btn:hover .chev,
.header .nav-btn--drop:hover .chev,
.header .nav-item.is-open .chev { color: #fff; }