/* Hear Clean: base do site. Faz o papel do que o tema Mist e o Bootstrap davam por baixo do CSS das páginas novas. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #333; font: 400 16px/1.5 "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: #007a93; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
figure { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }

.container { width: 100%; margin-inline: auto; padding-inline: 15px; }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1200px; max-width: 1200px; } }

/* ===== Cabeçalho ===== */
#header { position: relative; z-index: 1001; background: #fff; }
#header-main { position: relative; height: 76px; background: #fff; }
#header-main > .container { height: 100%; position: relative; }
#header .nav, #header .navbar-nav { list-style: none; margin: 0; padding: 0; }
/* padding-top de 2px: o tema centraliza o logo pela linha de base do texto, 1px abaixo do centro exato */
#header .navbar-brand { display: flex; align-items: center; height: 76px; margin-left: -15px; padding: 2px 15px 0; box-sizing: border-box; }
#header .zozo-sticky-logo, #header .zozo-mobile-logo { display: none; }
#header .zozo-standard-logo { height: 46px; width: auto; max-height: 46px; }
#header .navbar-toggle { display: none; }
#header .visible-xs { display: none; }

/* Linha fina entre o cabeçalho e o conteúdo (tema: .main-section) */
.main-section { border-top: 1px solid #e1e1e1; }

/* Cabeçalho fixo ao rolar a página */
#header.tem-fixo { height: var(--hc-cab, 76px); }
#header-main.is-fixo { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: 60px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); animation: hc-desce 260ms ease-out; }
#header-main.is-fixo .navbar-brand { height: 60px; }
#header-main.is-fixo .zozo-standard-logo { display: none; }
#header-main.is-fixo .zozo-sticky-logo { display: inline-block; height: 30px; width: auto; }
@keyframes hc-desce { from { transform: translateY(-100%); } to { transform: none; } }

/* Tablet: logo numa linha e o menu embaixo */
@media (min-width: 768px) and (max-width: 991px) {
  #header-main { height: auto; }
  #header .navbar-brand { justify-content: center; margin: 0; }
  #header .zozo-standard-logo { height: 42px; }
  /* No tablet o tema solta o cabeçalho na largura toda e o menu fica numa linha, a partir da esquerda */
  #header-main > .container { width: auto; }
  #header .zozo-mainnavbar-collapse { display: block; padding: 0 15px; }
  #header-main.is-fixo { height: auto; }
}

/* Celular: logo pequeno, botão Menu e o menu abre embaixo do cabeçalho */
@media (max-width: 767px) {
  #header .hidden-xs { display: none; }
  #header .visible-xs { display: block; }
  #header .zozo-standard-logo { display: none; }
  #header .zozo-mobile-logo { display: inline-block; height: 30px; width: auto; }
  #header-main.is-fixo .zozo-mobile-logo { display: none; }
  #header .navbar-toggle { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
  #header .zozo-mainnavbar-collapse { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 0 15px; }
  #header .zozo-mainnavbar-collapse.in { display: block; }
  #header .zozo-main-bar { margin: 7.5px -15px; }
}
@media (prefers-reduced-motion: reduce) { #header-main.is-fixo { animation: none; } }