/* ============================================================
   MENU NOVO (padrao CFH) — SOMENTE O MENU.
   Aplicado na home sem alterar o HTML nem o layout da pagina.
   Carregar por ULTIMO, depois de nav.css.
   Nao contem nada fora de <header>. Nao toca no footer.
   ============================================================ */
:root {
  --azul: #0E2A47;
  --azul-base: #0A2038;
  --azul-topo: #123152;
  --azul2: #1E446B;
  --branco: #FFFFFF;
  --g-borda: #dadce0;
  --g-cinza: #f8f9fa;
  --gold-claro: #E7D3A2;
  --gold1: #C89B3C;
  --gold2: #A67F2B;
  --texto: #202124;
  --wpp: #128C3E;
  --wpp-escuro: #0C6B2E;
}


body>header .navbar>.container{max-width:1200px!important;padding:0 24px!important}


/* ======================= HEADER / MENU, padrao CFH =======================
   ATENCAO: nav.css usa "body > header ..." com !important em quase tudo.
   Para vencer, este bloco repete os MESMOS seletores e a mesma forca.
   ======================================================================== */
body>header{
  background:linear-gradient(180deg,var(--azul-topo) 0%,var(--azul) 52%,var(--azul-base) 100%)!important;
  border-bottom:1px solid rgba(200,155,60,.22)!important;
  backdrop-filter:none!important;
  box-shadow:0 2px 14px rgba(14,42,71,.18)!important;
}

body>header .navbar{padding:0!important}

body>header .navbar>.container{
  display:flex!important;align-items:stretch!important;justify-content:space-between!important;
  gap:10px!important;min-height:62px!important;
}

body>header .navbar-brand{display:flex!important;align-items:center!important}

body>header .navbar-brand img{height:40px!important}


body>header .nav-menu{
  display:flex!important;align-items:stretch!important;gap:0!important;
}

body>header .nav-menu>li{position:relative!important;display:flex!important}


/* SEM separador vertical entre os itens. As barrinhas em pe foram removidas. */
body>header .nav-menu>li::before,
body>header .nav-menu>li::after{content:none!important}


/* item de nivel 1: uppercase, compacto */
/* medidas exatas do CFH: 9.5px, padding 0 11px, letter-spacing .3px */
body>header .nav-menu>li>a{
  position:relative!important;display:flex!important;align-items:center!important;
  gap:4px!important;padding:0 11px!important;border-radius:0!important;
  color:rgba(255,255,255,.88)!important;font-size:9.5px!important;font-weight:600!important;
  text-transform:uppercase!important;letter-spacing:.3px!important;
  background:transparent!important;transition:color .22s!important;
  isolation:isolate!important;
}

/* O PARALELOGRAMO: e isto que da o desenho inclinado do menu */
body>header .nav-menu>li>a::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;
  background:transparent!important;transform:skewX(-13deg)!important;
  transition:background .22s!important;
}

body>header .nav-menu>li>a:hover{
  color:var(--gold-claro)!important;background:transparent!important;
}

body>header .nav-menu>li>a:hover::before{
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 60%,
    rgba(0,0,0,.10) 100%)!important;
}

/* item ativo: paralelogramo dourado inteiro, texto azul */
body>header .nav-menu>li>a.ativo{color:var(--azul)!important}

body>header .nav-menu>li>a.ativo::before{
  background:linear-gradient(180deg,#D9AE55 0%,var(--gold1) 45%,var(--gold2) 100%)!important;
}


/* o ::after do nav.css era a linha dourada animada.
   vira o chevron de submenu, desenhado em borda como no CFH */
body>header .nav-menu>li>a::after{
  content:none!important;
}

body>header .nav-menu>li.has-sub>a::after{
  content:""!important;position:static!important;display:inline-block!important;
  width:4px!important;height:4px!important;
  border-right:1.3px solid var(--gold1)!important;
  border-bottom:1.3px solid var(--gold1)!important;
  background:none!important;left:auto!important;right:auto!important;bottom:auto!important;
  transform:translateY(-2px) rotate(45deg)!important;transform-origin:center!important;
  transition:transform .22s!important;font-size:0!important;
}

body>header .nav-menu>li>a.ativo::after{
  border-right-color:var(--azul)!important;border-bottom-color:var(--azul)!important;
}

body>header .nav-menu>li.has-sub:hover>a::after{
  transform:translateY(1px) rotate(-135deg)!important;
}


/* submenu branco, borda dourada de 3px no topo */
body>header .nav-menu .dropdown{
  left:-6px!important;min-width:310px!important;background:var(--branco)!important;
  border:0!important;border-top:3px solid var(--gold1)!important;
  border-radius:0 0 8px 8px!important;padding:6px 0!important;
  box-shadow:0 14px 34px rgba(14,42,71,.18)!important;backdrop-filter:none!important;
}

body>header .nav-menu .dropdown a{
  color:var(--texto)!important;font-size:13.5px!important;padding:10px 22px!important;
  border-bottom:1px solid var(--g-borda)!important;border-radius:0!important;
  background:transparent!important;
  transition:background .2s,color .2s,padding-left .2s!important;
}

body>header .nav-menu .dropdown a:last-child{border-bottom:0!important}

body>header .nav-menu .dropdown a::before{
  content:"\203A"!important;color:var(--gold1)!important;font-weight:700!important;
  font-size:15px!important;margin-right:9px!important;
}

body>header .nav-menu .dropdown a:hover{
  background:var(--g-cinza)!important;color:var(--azul2)!important;padding-left:28px!important;
}

body>header .nav-menu .dropdown a:hover::before{color:var(--azul2)!important}


/* CTA Contato, verde WhatsApp.
   O skew vai no ::before (o fundo), NUNCA no <a>: inclinar o proprio link
   inclina o texto junto e o "CONTATO" sai torto, parecendo italico. */
body>header .nav-menu>li>a.nav-cta{
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:transparent!important;color:#fff!important;font-weight:700!important;
  padding:0 24px!important;border-radius:0!important;box-shadow:none!important;
  transform:none!important;font-style:normal!important;margin-left:14px!important;
  isolation:isolate!important;
}

body>header .nav-menu>li>a.nav-cta::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;
  background:var(--wpp)!important;transform:skewX(-13deg)!important;
  transition:background .2s!important;
}

body>header .nav-menu>li>a.nav-cta:hover{background:transparent!important;color:#fff!important;filter:none!important}

body>header .nav-menu>li>a.nav-cta:hover::before{background:var(--wpp-escuro)!important}

body>header .nav-menu>li>a.nav-cta::after{content:none!important}


body>header .menu-toggle{color:#fff!important}

/* ============================================================
   MOBILE — estas regras estavam em style-claro.css dentro de
   @media e ficaram de fora na primeira extracao. Sem elas o menu
   nao colapsa no celular: fica aberto e com os itens espremidos.
   ============================================================ */

@media (max-width:900px) {

  body>header .navbar>.container{align-items:center!important;min-height:56px!important}


  /* O MENU FICA FECHADO ate o botao abrir.
     Sem estas duas linhas a regra de desktop "display:flex!important" (que
     esta fora do media) vence o "display:none!important" do nav.css, porque
     tem a mesma especificidade e este arquivo carrega depois. Resultado: o
     menu abria sozinho e nao fechava mais. */
  body>header .nav-menu{
    display:none!important;
    background:var(--azul)!important;backdrop-filter:none!important;
    padding:8px 12px 14px!important;
    border-top:1px solid rgba(200,155,60,.22)!important;
  }

  body>header .nav-menu.is-open{display:flex!important;flex-direction:column!important}

  /* menu longo rola dentro dele mesmo, como no CFH */
  body>header .nav-menu{max-height:78vh!important;overflow-y:auto!important}

  /* separador so ENTRE itens, como no CFH (li + li) */
  body>header .nav-menu>li{
    width:100%!important;display:block!important;border-bottom:0!important;
  }

  body>header .nav-menu>li+li{border-top:1px solid rgba(255,255,255,.09)!important}


  body>header .nav-menu>li>a{
    display:flex!important;align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;padding:13px 24px!important;
    font-size:12.5px!important;letter-spacing:.5px!important;
    color:rgba(255,255,255,.9)!important;transform:none!important;
    background:transparent!important;
  }

  /* sem paralelogramo no mobile */
  body>header .nav-menu>li>a::before{
    transform:none!important;background:transparent!important;
  }

  /* item ativo no celular: SO a cor do texto muda, como no CFH.
     Sem bloco dourado, que no mobile virava uma faixa desalinhada. */
  body>header .nav-menu>li>a.ativo{
    color:var(--gold1)!important;background:transparent!important;
  }

  body>header .nav-menu>li>a.ativo::after{border-color:var(--gold1)!important}

  /* SEM icones. O menu mobile do CFH e so texto, e e isso que o deixa limpo.
     O ::before do paralelogramo e simplesmente desligado aqui. */
  body>header .nav-menu>li>a::before{display:none!important;content:none!important}


  /* chevron do submenu vai para a direita da linha */
  body>header .nav-menu>li.has-sub>a::after{
    margin-left:auto!important;transform:translateY(-2px) rotate(45deg)!important;
  }

  body>header .nav-menu>li.has-sub.is-expanded>a::after{
    transform:translateY(1px) rotate(-135deg)!important;
  }


  /* submenu recuado, com fundo levemente mais escuro (padrao CFH) */
  body>header .nav-menu .dropdown{
    position:static!important;background:rgba(0,0,0,.18)!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;
    margin:0!important;padding:0!important;min-width:0!important;
  }

  body>header .nav-menu .dropdown a{
    color:rgba(255,255,255,.8)!important;font-size:12.5px!important;
    padding:11px 24px 11px 38px!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;border-radius:0!important;
    transition:background .2s,color .2s,padding-left .2s!important;
  }

  body>header .nav-menu .dropdown a::before{
    content:"\203A"!important;color:var(--gold1)!important;font-weight:700!important;
    font-size:15px!important;margin-right:9px!important;
  }

  body>header .nav-menu .dropdown a:hover{
    background:rgba(0,0,0,.2)!important;color:var(--gold1)!important;padding-left:42px!important;
  }


  /* CTA: botao com rotulo, sem angulo (o CFH faz igual no mobile) */
  body>header .nav-menu>li>a.nav-cta{
    /* o item de menu tem width:100%; sem estas duas linhas a margem de 24px
       soma a largura cheia e o botao vaza para fora da tela */
    width:auto!important;box-sizing:border-box!important;
    justify-content:center!important;margin:12px 24px 4px!important;
    border-radius:var(--raio-btn)!important;padding:12px 20px!important;
    background:var(--wpp)!important;transform:none!important;
    font-size:11px!important;font-weight:700!important;letter-spacing:.6px!important;
  }

  body>header .nav-menu>li:has(.nav-cta){border-top:0!important}

  body>header .nav-menu>li>a.nav-cta::before{
    display:none!important;content:none!important;
  }

  body>header .navbar-brand img{height:36px!important}
}

/* ============================================================
   BOTAO DE CONTATO NO MENU — so o icone no desktop.
   O rotulo continua no HTML (leitores de tela leem normalmente)
   e reaparece no menu mobile, que e uma lista vertical.
   ============================================================ */
@media (min-width:901px){
  body>header .nav-menu>li>a.nav-cta{
    font-size:0!important;
    padding:0 18px!important;
    min-width:64px!important;
    gap:0!important;
  }
  body>header .nav-menu>li>a.nav-cta::after{
    content:""!important;
    display:block!important;
    width:22px!important;
    height:22px!important;
    background-color:#fff!important;
    -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.05 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.36-.214-3.742.982.999-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.886 9.884z'/%3E%3C/svg%3E") center / contain no-repeat!important;
    mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.05 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.36-.214-3.742.982.999-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.886 9.884z'/%3E%3C/svg%3E") center / contain no-repeat!important;
  }
}

/* icone do WhatsApp como imagem de fundo: o mask nao renderizava */
@media (min-width:901px){
  body>header .nav-menu>li>a.nav-cta::after{
    content:""!important;
    display:block!important;
    width:22px!important;
    height:22px!important;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.4790%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.05%2021.785h-.004a9.87%209.87%200%2001-5.031-1.378l-.36-.214-3.742.982.999-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.8842.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.886%209.884z%27%2F%3E%3C%2Fsvg%3E") center center / 22px 22px no-repeat!important;
    -webkit-mask:none!important;
    mask:none!important;
  }
}

/* o ::after herdava position:absolute da setinha de submenu e ficava
   fora do fluxo, invisivel dentro do botao */
@media (min-width:901px){
  body>header .nav-menu>li>a.nav-cta::after{
    position:relative!important;
    top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
    transform:none!important;
    z-index:2!important;
    margin:0!important;
    opacity:1!important;
    visibility:visible!important;
  }
}

/* icone do WhatsApp: o MESMO path dos botoes de contato do site */
@media (min-width:901px){
  body>header .nav-menu>li>a.nav-cta::after{
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413z%27%2F%3E%3C%2Fsvg%3E") center center / 20px 20px no-repeat!important;
  }
}

/* CTA do menu sem o bloco verde: fica so o icone sobre o azul do menu */
@media (min-width:901px){
  body>header .nav-menu>li>a.nav-cta::before{
    display:none!important;
    content:none!important;
    background:none!important;
  }
  body>header .nav-menu>li>a.nav-cta{
    background:transparent!important;
    min-width:auto!important;
    padding:0 6px!important;
    margin-left:10px!important;
  }
  body>header .nav-menu>li>a.nav-cta:hover::after,
  body>header .nav-menu>li>a.nav-cta:focus-visible::after{
    opacity:.72!important;
    transition:opacity .18s!important;
  }
}