/* ═══════════════════════════════════════════════════════════════════════════
   Cabeçalho — barra do topo e menu principal: hover discreto

   A faixa cinza acima do menu (lista 430ae0e do cabeçalho): Trabalhe Conosco,
   Consultar Lote, SAC, Denúncias e o telefone. No site no ar os links não
   reagem ao mouse. Aqui, ao passar o mouse (ou focar pelo teclado):

     1. o texto passa do branco para o amarelo da marca;
     2. um traço fino, no mesmo amarelo, cresce da esquerda para a direita
        por baixo do texto.

   É a mesma linguagem dos atalhos da home (css/vp-atalhos-home.css), em
   escala menor. Nada muda de tamanho: os separadores "|" e os vizinhos não
   se mexem.

   Esta folha é carregada pelo includes/header.php, e não pelo <head> de cada
   página: assim vale para o site inteiro, inclusive as páginas que não são
   refeitas pelo harvest (Trabalhe Conosco, Contato, Política...).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A barra não pode quebrar em duas linhas ──
   No Elementor a lista mora num bloco de 40% da largura (f8779f7), ao lado de
   um bloco VAZIO de 60% (5cc1e59). Com três links cabia; com cinco (SAC e
   Denúncias entraram em 06/10/2026) passou do limite e o telefone caía para
   uma segunda linha em telas de 1280 a 1440px, deixando o cabeçalho 24px mais
   alto. Aqui a lista ocupa o que precisar e o bloco vazio cede o espaço. */
.elementor-element-f8779f7 {
  width: auto !important;
  flex: 0 0 auto !important;
}
.elementor-element-5cc1e59 {
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 0;
}
.elementor-element-430ae0e .elementor-icon-list-items {
  flex-wrap: nowrap !important;
}
.elementor-element-430ae0e .elementor-icon-list-item {
  white-space: nowrap;
}

/* ── Hover ── */
.elementor-element-430ae0e .elementor-icon-list-item > a .elementor-icon-list-text {
  position: relative;
  transition: color .2s ease;
}
.elementor-element-430ae0e .elementor-icon-list-item > a .elementor-icon-list-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: #FEB735;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

@media (hover: hover) {
  .elementor-element-430ae0e .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: #FEB735 !important; }
  .elementor-element-430ae0e .elementor-icon-list-item > a:hover .elementor-icon-list-text::after { transform: scaleX(1); }
}
.elementor-element-430ae0e .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text { color: #FEB735 !important; }
.elementor-element-430ae0e .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .elementor-element-430ae0e .elementor-icon-list-item > a .elementor-icon-list-text,
  .elementor-element-430ae0e .elementor-icon-list-item > a .elementor-icon-list-text::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Menu principal — Produtos · Tecnologias · Mercados · Sobre · Blog

   O menu do cabeçalho (widget 029ada9), só na versão de computador
   (.elementor-nav-menu--main); o menu do celular (hambúrguer) não muda.
   No site no ar o item quase não reage: o "sublinhado" do Elementor está
   com altura zero e a cor muda de um cinza para outro cinza.

     1. o texto vai para o laranja da marca (#E37A36 — o amarelo da barra de
        cima não tem contraste sobre o fundo branco);
     2. um traço de 2px cresce da esquerda para a direita sob o item. É o
        próprio ::after que o Elementor já cria para o sublinhado, só que
        agora com altura, do tamanho do texto e animado por transform;
     3. nos itens com submenu, a setinha gira quando o submenu está aberto
        (o Elementor marca o link com .highlighted);
     4. dentro do submenu (fundo laranja), o item sob o mouse escurece um
        pouco e ganha um filete amarelo à esquerda.

   Nada muda de tamanho: cor, transform e sombra interna. O filete é sombra
   interna, e não borda ou recuo, para o submenu não mudar de largura.
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-element-029ada9 .elementor-nav-menu--main .elementor-item {
  transition: color .2s ease !important;
}
.elementor-element-029ada9 .elementor-nav-menu--main .elementor-item::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;            /* o recuo lateral do item: o traço fica do tamanho do texto */
  right: 20px !important;
  top: auto !important;
  bottom: 6px !important;
  width: auto !important;
  height: 2px !important;
  border-radius: 2px;
  background: #E37A36 !important;
  opacity: 1 !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1) !important;
}
/* gira o DESENHO da seta, não a caixa dela: a caixa tem recuo à esquerda e, girada, a seta encostaria no texto */
.elementor-element-029ada9 .elementor-nav-menu--main .elementor-item .sub-arrow svg {
  transition: transform .25s ease;
}
.elementor-element-029ada9 .elementor-nav-menu--main .elementor-sub-item {
  transition: background-color .2s ease, box-shadow .2s ease !important;
}

@media (hover: hover) {
  .elementor-element-029ada9 .elementor-nav-menu--main .elementor-item:hover { color: #E37A36 !important; fill: #E37A36 !important; }
  .elementor-element-029ada9 .elementor-nav-menu--main .elementor-item:hover::after { transform: scaleX(1); }
  .elementor-element-029ada9 .elementor-nav-menu--main .elementor-sub-item:hover {
    background-color: rgba(0, 0, 0, .10) !important;
    box-shadow: inset 3px 0 0 #FEB735;
  }
}
/* submenu aberto: o item-pai continua marcado enquanto o mouse está nos filhos */
.elementor-element-029ada9 .elementor-nav-menu--main .elementor-item.highlighted { color: #E37A36 !important; fill: #E37A36 !important; }
.elementor-element-029ada9 .elementor-nav-menu--main .elementor-item.highlighted::after { transform: scaleX(1); }
.elementor-element-029ada9 .elementor-nav-menu--main .elementor-item.highlighted .sub-arrow svg { transform: rotate(180deg); }

.elementor-element-029ada9 .elementor-nav-menu--main .elementor-item:focus-visible { color: #E37A36 !important; fill: #E37A36 !important; }
.elementor-element-029ada9 .elementor-nav-menu--main .elementor-item:focus-visible::after { transform: scaleX(1); }
.elementor-element-029ada9 .elementor-nav-menu--main .elementor-sub-item:focus-visible {
  background-color: rgba(0, 0, 0, .10) !important;
  box-shadow: inset 3px 0 0 #FEB735;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-element-029ada9 .elementor-nav-menu--main .elementor-item,
  .elementor-element-029ada9 .elementor-nav-menu--main .elementor-item::after,
  .elementor-element-029ada9 .elementor-nav-menu--main .elementor-item .sub-arrow svg,
  .elementor-element-029ada9 .elementor-nav-menu--main .elementor-sub-item { transition: none !important; }
}