/* =========================================================
   PALETA
   ========================================================= */
:root{
  --cor-principal:#031C76;   /* azul escuro */
  --cor-branco:#FFFFFF;
  --cor-preto:#000000;
  --cor-cinza:#9CA3AF;
}

/* =========================================================
   BASE
   ========================================================= */
html, body{ background: var(--cor-branco) !important; color:#111 !important; }

/* =========================================================
   CABEÇALHO (desktop + mobile)
   ========================================================= */
header, header.topo, .topo, .topo .conteiner,
.cabecalho, .cabecalho .conteiner,
.header, .header .conteiner,
#cabecalho, #cabecalho .conteiner,
.header-topo, .top-bar, .barra-superior{
  background: var(--cor-principal) !important;
  color: var(--cor-branco) !important;
}

/* Ícones do topo */
.topo .atalhos a, #cabecalho .atalhos a, .icones-topo a{ color:var(--cor-branco) !important; }
.topo .atalhos svg, #cabecalho .atalhos svg, .icones-topo svg{
  fill:var(--cor-branco) !important; stroke:var(--cor-branco) !important; color:var(--cor-branco) !important;
}

/* Busca do topo */
#cabecalho .busca input{ background:var(--cor-branco) !important; color:#111 !important; border:1px solid transparent !important; }
#cabecalho .busca input::placeholder{ color:var(--cor-cinza) !important; }
#cabecalho .busca .botao-busca{ background:transparent !important; border:none !important; color:var(--cor-principal) !important; }
#cabecalho .busca .botao-busca svg{ fill:var(--cor-principal) !important; stroke:var(--cor-principal) !important; }

/* =========================================================
   MENU DE CATEGORIAS (barra logo abaixo do topo)
   ========================================================= */
.full.menu, .menu.superior, .full.menu .conteiner, .menu.superior .conteiner{
  background: var(--cor-principal) !important;
  max-width:100% !important; width:100% !important;
}
.menu.superior .nivel-um, .full.menu .nivel-um{
  display:flex !important; flex-wrap:wrap !important; gap:14px 22px !important;
  align-items:center; justify-content:center;
}
.menu.superior .nivel-um > li > a, .full.menu .nivel-um > li > a{
  color:var(--cor-branco) !important; font-weight:600 !important; text-transform:uppercase !important;
  white-space:nowrap; padding:8px 10px !important; line-height:1.1;
}
.menu.superior .nivel-um > li > a:hover, .full.menu .nivel-um > li > a:hover{ color:var(--cor-branco) !important; opacity:.85 !important; }

/* =========================================================
   RODAPÉ
   ========================================================= */
footer, .footer, #rodape, #rodape .conteiner,
#rodape .conteiner > div, #rodape .conteiner section,
#rodape .conteiner .row, #rodape .conteiner .col{
  background: var(--cor-principal) !important; color: var(--cor-branco) !important; border:none !important;
}
#rodape p, #rodape span, #rodape strong, #rodape h1, #rodape h2, #rodape h3, #rodape h4, #rodape h5, #rodape h6,
#rodape a{ color: var(--cor-branco) !important; }
#rodape a:hover{ opacity:.8 !important; text-decoration:underline; }
#rodape .btn{ background:var(--cor-branco) !important; color:var(--cor-principal) !important; border:1px solid var(--cor-branco) !important; }
#rodape .btn:hover{ background:transparent !important; color:var(--cor-branco) !important; border:1px solid var(--cor-branco) !important; }
#rodape svg{ fill:var(--cor-branco) !important; stroke:var(--cor-branco) !important; color:var(--cor-branco) !important; }
#rodape hr, #rodape .faixa, #rodape .separador, #rodape .linha{ background:var(--cor-branco) !important; border:none !important; height:2px !important; }

/* =========================================================
   BOTÕES GERAIS / PRODUTOS
   ========================================================= */
.btn, button, input[type="submit"]{ background:var(--cor-principal) !important; color:var(--cor-branco) !important; border:none !important; font-weight:600; }
.btn:hover, button:hover, input[type="submit"]:hover{ background:var(--cor-branco) !important; color:var(--cor-principal) !important; border:1px solid var(--cor-principal) !important; }
.produto, .card-produto{ background:var(--cor-branco) !important; color:#111 !important; }
.produto .preco, .card-produto .preco{ color:var(--cor-principal) !important; font-weight:700; }

/* =========================================================
   *** AJUSTES ESPECÍFICOS PARA O MOBILE DO SEU HTML ***
   (classes reais: .atalhos-mobile, .fundo-secundario, .open-menu, .menu.superior.visible-phone)
   ========================================================= */
@media (max-width: 991px){

  /* Header mobile inteiro */
  #cabecalho .atalhos-mobile{ background:var(--cor-principal) !important; color:var(--cor-branco) !important; }

  /* Essa classe fazia o header ficar preto – sobrescreve tudo das variações */
  #cabecalho .atalhos-mobile .fundo-secundario,
  #cabecalho .fundo-secundario,
  #cabecalho .borda-principal{ 
    background-color: var(--cor-principal) !important; 
    border-color: rgba(255,255,255,.18) !important;
    color: var(--cor-branco) !important;
  }

  /* Botões do topo mobile (menu, busca) */
  #cabecalho .atalhos-mobile .botao,
  #cabecalho .atalhos-mobile .botao-busca,
  #cabecalho .open-menu,
  #cabecalho .menu-close{
    background: var(--cor-principal) !important; 
    color: var(--cor-branco) !important; 
    border:none !important;
  }
  #cabecalho .open-menu .line{ background:var(--cor-branco) !important; }
  #cabecalho .atalhos-mobile svg{ fill:var(--cor-branco) !important; stroke:var(--cor-branco) !important; color:var(--cor-branco) !important; }

  /* Busca mobile do header */
  #cabecalho .atalhos-mobile .busca input{ background:var(--cor-branco) !important; color:#111 !important; }
  #cabecalho .atalhos-mobile .busca .botao-busca{ background:transparent !important; color:var(--cor-principal) !important; }
  #cabecalho .atalhos-mobile .busca .botao-busca svg{ fill:var(--cor-principal) !important; stroke:var(--cor-principal) !important; }

  /* MENU LATERAL (gaveta) – .menu.superior.visible-phone */
  #cabecalho .menu.superior.visible-phone,
  #cabecalho .menu.superior.visible-phone .wrap,
  #cabecalho .menu.superior.visible-phone .nivel-um,
  #cabecalho .menu.superior.visible-phone .action-links{
    background: var(--cor-principal) !important; 
    color: var(--cor-branco) !important;
  }

  #cabecalho .menu.superior.visible-phone .nivel-um > li > a,
  #cabecalho .menu.superior.visible-phone .nivel-um > li > a .titulo,
  #cabecalho .menu.superior.visible-phone .action-links a{
    color: var(--cor-branco) !important;
  }

  /* separadores da lista na gaveta */
  #cabecalho .menu.superior.visible-phone .nivel-um > li{
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }

  /* remove “miolos” brancos que venham de dentro */
  #cabecalho .menu.superior.visible-phone *{
    background-color: transparent !important;
    color: inherit !important;
  }

  /* barra de categorias no topo quando em mobile */
  .full.menu, .menu.superior, .full.menu .conteiner, .menu.superior .conteiner{
    background: var(--cor-principal) !important;
  }
}

/* =========================================================
   FAILSAFE – QUALQUER PRETO INLINE NO MOBILE → AZUL
   ========================================================= */
@media (max-width: 991px){
  #cabecalho [style*="background:#000"], #cabecalho [style*="background: #000"],
  #cabecalho [style*="background-color:#000"], #cabecalho [style*="background-color: #000"],
  #cabecalho [style*="background:rgb(0,0,0)"], #cabecalho [style*="background-color:rgb(0,0,0)"]{
    background-color: var(--cor-principal) !important;
    color: var(--cor-branco) !important;
  }
}

/* =========================================================
   NEWSLETTER | CRÉDITOS FINAIS
   ========================================================= */
.newsletter{ background:var(--cor-principal) !important; color:var(--cor-branco) !important; }
.newsletter input[type="email"]{ background:var(--cor-branco) !important; color:#111 !important; }
.newsletter input[type="submit"]{ background:var(--cor-branco) !important; color:var(--cor-principal) !important; border:1px solid var(--cor-branco) !important; }
.newsletter input[type="submit"]:hover{ background:transparent !important; color:var(--cor-branco) !important; }
.rodape-final, .pos-rodape, .credits, .copyright, .copy, .rodape__creditos{
  background:var(--cor-principal) !important; color:var(--cor-branco) !important;
}