:root {
  /* ==================== CORES ==================== */
  --color-header-bg: #fff;
  --color-header-link: #007f5e;
  --color-header-link-active: #2f2f2f;
  --color-search-placeholder: #ccc;

  /* ==================== FONTES ==================== */
  --font-header-menu-toggle: 32px;
  --font-search: 16px;

  /* ==================== ESPAÇAMENTOS (GAP/PADDING/MARGIN) ==================== */
  --gap-header: 30px;
  --gap-header-sm: 12px;
  --padding-header: 40px 0;
  --padding-header-sm: 8px 12px;

  /* ==================== RADIUS ==================== */
  --radius-header: 8px;

  /* ==================== TAMANHOS ==================== */
  --max-width-header: 1200px;
  --width-header: 90%;
  --max-height-logo: 100px;
  --max-height-logo-mob: 90px;
  --width-search: 130px;
}

/* =============== HEADER =============== */
#site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-header);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--width-header);
  max-width: var(--max-width-header);
}
.header-logo img{max-height:var(--max-height-logo);}

.header-econsciente {
  display: flex;
  justify-content: center;
  z-index: 99;
  background: var(--color-header-bg) !important;
  position: relative;
  width: 100%;
}

.header-econsciente ul {
  display: flex;
  gap: var(--gap-header);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  background-color: var(--color-header-bg) !important;
}

.header-econsciente li a {
  color: var(--color-header-link);
  font-weight: 600;
  text-decoration: none;
  background-color: transparent !important;
}

.header-econsciente li a:hover {
  color: var(--color-header-link-active);
}

.menu-toggle {
  display: none;
  font-size: var(--font-header-menu-toggle);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-header-link);
  padding: var(--padding-header-sm);
  border-radius: var(--radius-header);
  transition: color 0.3s, background 0.3s;
  outline: none;
  position: relative;
  z-index: 1000;
}

.menu-toggle:focus,
.menu-toggle:active {
  background: none !important;
  box-shadow: none !important;
  color: var(--color-header-link) !important;
}

.menu-toggle:hover {
  background: transparent !important;
}

.menu-toggle.toggled {
  color: var(--color-header-link-active) !important;
  background: transparent !important;
}

/* =============== RESPONSIVO =============== */
@media (max-width: 768px) {
  .header-top {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    gap: 20px;
  }
  .header-econsciente {
    display: none !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    opacity: 1 !important;
    pointer-events: auto;
  }
  .header-logo img {
    max-height: var(--max-height-logo-mob) !important;
    height: auto !important;
    width: auto !important;
  }
  .header-logo { order: -1; }
  .header-econsciente.active { display: flex !important; }
  .header-econsciente ul {
    flex-direction: column;
    gap: var(--gap-header-sm);
    width: 100%;
    align-items: center;
  }
  .menu-toggle {
    display: block !important;
    margin: 0 auto 10px;
  }
}

/* =============== BUSCA (SEARCH) =============== */
.busca-econsciente-form {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.search-field {
  font-size: var(--font-search);
  color: var(--color-header-link-active);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 4px 0;
  width: var(--width-search);
  transition: border-color 0.2s ease;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.search-field::placeholder {
  color: var(--color-search-placeholder);
}

.search-field:focus {
  border-color: var(--color-header-link) !important;
}

.search-submit {
  background: none !important;
  border: none !important;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-header-link);
  padding: 0;
  display: flex;
  align-items: center;
  box-shadow: none !important;
  outline: none !important;
}

.search-submit:hover {
  color: #004d3f;
  background: transparent !important;
}

.search-submit:focus,
.search-submit:active {
  background: transparent !important;
  color: var(--color-header-link-active) !important;
  outline: none !important;
  box-shadow: none !important;
}

.search-submit svg {
  background: transparent !important;
  border: none !important;
  outline: none !important;
}

.busca-econsciente-form *:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}