@charset "UTF-8";
/* Botões de navegação mantêm a aparência dos antigos links. */
header .submenu-toggle,
header .search-icon {
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

/* Um único estado, controlado por menu.js, também esconde do teclado.
   A especificidade impede :hover/:focus-within antigos de reabrirem no Esc. */
header nav#menu-principal > ul > li > .submenu-columns {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    pointer-events: none;
}
header nav#menu-principal > ul > li.is-open > .submenu-columns {
    visibility: visible;
    opacity: 1;
    max-height: none;
    pointer-events: auto;
}
header nav#menu-principal .submenu-columns > li {
    border-top: 0;
}
header .submenu-empty {
    padding: .5rem .75rem;
    color: #fff;
    font-size: .875rem;
}
header #search-form {
    position: absolute;
    right: 0;
    top: 100%;
    padding: .75rem;
    border-radius: 8px;
    background: #141414;
}
header #search-form .search-container {
    margin: 0;
    animation: none;
    opacity: 1;
    transform: none;
}
@media (max-width: 1024px) {
    header nav#menu-principal .submenu-toggle {
        width: 100%;
        text-align: left;
    }
    header nav#menu-principal.search-open > ul > li.right {
        display: block !important;
        padding: 1rem 1.25rem;
    }
    header nav#menu-principal .right > .search-icon {
        display: none;
    }
    header #search-form {
        position: static;
        width: 100%;
        padding: 0;
        background: transparent;
    }
    header #search-form .search-container {
        flex-direction: column;
        align-items: stretch;
    }
    header #search-form input[type="text"],
    header #search-form input[type="submit"] {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
        box-sizing: border-box;
    }
}
/* ===========================================================================
   HEADER — CSS do cabeçalho e do menu
   ---------------------------------------------------------------------------
   Este arquivo saiu de um <style> embutido no header.php. Duas razões:

   1. LIMPEZA. O header.php tinha ~570 linhas de CSS antes do markup, o que
      tornava difícil achar o HTML do menu no meio do arquivo.

   2. UM CONFLITO SILENCIOSO. O global.css contém uma CÓPIA ANTIGA destas
      mesmas regras (87 seletores duplicados, espalhados entre as linhas ~280
      e ~10.080). Como o <link> do global.css vem DEPOIS do <style> inline no
      <head>, era a cópia antiga que vencia todos os empates de
      especificidade — correções feitas no header.php simplesmente não
      surtiam efeito. O caso mais visível: a família do Font Awesome, que
      aqui é a 6 e lá é a 5, deixando as setinhas de submenu invisíveis.

      Este arquivo é carregado DEPOIS do global.css, então agora é ele que
      tem a última palavra.

   DÍVIDA CONHECIDA: as regras duplicadas continuam no global.css, inertes.
   Não foram removidas porque estão intercaladas com CSS de outras áreas
   (.menu-categorias, usado no podcast, por exemplo) e uma remoção às cegas
   nas 10.000 linhas teria risco alto. Vale fazer, com calma e testando
   página por página.
   =========================================================================== */
/* ---------- rótulo só para leitor de tela ----------
           Esconde visualmente sem esconder da acessibilidade. Não usei a
           .screen-reader-text do tema porque ela está definida como
           display:none, que remove o elemento da árvore de acessibilidade
           também — o leitor de tela não lê nada. Esta fica escopada no header
           para não mexer na global, que é usada em outras páginas. */
        header .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            white-space: nowrap;
            border: 0;
        }

        /* Configuração Base do Header */
        /* position:fixed, não absolute.
           Com absolute o header rolava junto com a página e desaparecia nos
           primeiros 100px — numa home de 7.000px o visitante perdia o menu
           quase imediatamente e tinha que voltar ao topo para navegar.
           Havia até um "header.scrolled" no global.css (fundo translúcido,
           blur, altura menor) que nunca aparecia, porque foi escrito supondo
           um header fixo que aqui não existia.
           Fixed não altera o layout inicial: a posição de partida é a mesma,
           o header só passa a acompanhar a rolagem. */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99;
            /* 1rem, a mesma altura do estado rolado (.scrolled): com o fundo
               escuro desde o topo, o 1.875rem de antes deixava a barra alta
               demais na abertura da página (pedido de 24/09/2026). */
            padding: 1rem 0;
            /* inclui backdrop-filter e box-shadow: são eles que o .scrolled
               muda ao rolar, e sem estarem na transition a barra apareceria
               de uma vez em vez de surgir. Valor herdado do global.css. */
            transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
        }
        /* Sem isto, o salto de uma âncora (#hm-cases, #qs-historia) para o
           alvo embaixo do header fixo e o título fica escondido. */
        :target {
            scroll-margin-top: 7rem;
        }
        @media (prefers-reduced-motion: reduce) {
            header { transition: none; }
        }
        /* Fundo escuro desde o topo (pedido de 24/09/2026).
           Antes o header nascia transparente e só ganhava fundo quando o
           visitante rolava a página e o menu.js aplicava o .scrolled. Na
           abertura, o menu branco ficava solto sobre o hero e a barra
           "aparecia" de repente na primeira rolagem.
           Agora o header já nasce com o mesmo fundo e o mesmo desfoque do
           .scrolled (global.css). Ao rolar, o .scrolled continua fazendo o
           resto: encolhe o padding e acrescenta a sombra.
           Seletor "header" simples: o header.scrolled (mais específico)
           segue vencendo onde precisa. A regra de páginas de hero claro
           (body:has(main.hero-claro) header, no global.css) fica redundante
           no fundo, mas é mantida pelo padding assimétrico. */
        /* body:has(main.hero-claro): a Quem Somos tinha um padding próprio,
           mais alto (global.css). Entra aqui para ficar igual às outras. */
        body:has(main.hero-claro) header {
            padding: 1rem 0;
        }
        header {
            background: rgba(20, 20, 20, 0.55);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        /* Logo */
        header .container .logo {
            width: 166px;
            height: 46px;
        }
        header .container .logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        /* Menu Principal */
        header .container ul {
            display: flex;
            align-items: stretch;
            gap: 1.5625rem;
        }
        header .container ul li {
            display: flex;
            align-items: center;
            position: relative;
        }
        header .container ul li.right {
            display: flex;
            align-items: center;
            flex-direction: row;
            gap: 1.0625rem;
        }
        header .container ul li.right .separator {
            width: 1px;
            height: 35px;
            background: #ffffff;
            opacity: 0.2;
        }
        /* ---------- "Vamos conversar" no topo ----------
           Pílula no mesmo gradiente dos botões primários da Home 2026
           (--hm-grad), ao lado da lupa. A tipografia segue a dos itens do
           menu (12px, 600, caixa alta) para o botão parecer parte da barra,
           e não um elemento colado nela.
           Seletor com li.right e a.header-cta: precisa vencer a regra
           "header .container ul li a", que pinta todos os links do menu. */
        header .container ul li.right a.header-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            padding: 0 1.25rem;
            border-radius: 100px;
            background: linear-gradient(90deg, #e84a1f 0%, #e6223d 100%);
            color: #fff;
            font-size: 0.75rem;
            line-height: 1;
            font-weight: 600;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            text-decoration: none;
            white-space: nowrap;
        }
        header .container ul li.right a.header-cta:hover,
        header .container ul li.right a.header-cta:focus-visible {
            filter: brightness(1.1);
            color: #fff;
        }
        header .container ul li.right a.header-cta:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
        }
        @media (prefers-reduced-motion: no-preference) {
            header .container ul li.right a.header-cta { transition: filter .2s ease; }
        }
        /* entre 1025px e 1280px a barra fica apertada com o botão novo:
           encurta o respiro dele e o espaço entre os itens do menu */
        @media (min-width: 1025px) and (max-width: 1280px) {
            header .container ul { gap: 1.125rem; }
            header .container ul li.right { gap: .75rem; }
            header .container ul li.right a.header-cta { padding: 0 1rem; }
        }
        @media screen and (max-width: 1024px) {
            header .container ul li.right .separator {
                display: none;
            }
            header div.separator {
                display: none;
            }
        }
        header .container ul li a,
        header .container ul li .submenu-toggle {
            letter-spacing: 0.6px;
            color: #fff;
            text-transform: uppercase;
            font-size: 0.75rem;
            line-height: 1.125rem;
            font-weight: 600;
        }
        /* #fff, não black: estes são os links DENTRO dos submenus, que têm
           fundo escuro translúcido. O "black" vinha do <style> antigo do
           header.php e nunca aparecia, porque o global.css (carregado depois)
           já trazia #fff e vencia. Ao mover este CSS para um arquivo que
           carrega por último, o black passou a valer e os subitens ficaram
           invisíveis. */
        header .container ul li a.nav-link1 {
            color: #fff;
            line-height: 25px;
        }
        /* Submenus - Base (GLASSMORPHISM) */
        header .container ul li:has(.submenu) {
            position: relative;
        }
        header .container ul li .submenu {
            position: absolute;
            transform: translateX(-50%);
            left: 50%;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
            background: rgba(20, 20, 20, 0.7);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            display: block;
            padding: 1.75rem;
            opacity: 0;
            max-height: 0;
            pointer-events: none;
            top: 42px;
            z-index: 9;
        }
        header .container ul li .submenu li {
            padding: 0;
            width: 100%;
            white-space: nowrap;
            text-align: center;
        }
        header .container ul li .submenu li:not(:first-child) {
            margin-top: 23px;
        }
        header .container ul li .submenu li a {
            letter-spacing: 0.6px;
            color: rgba(255, 255, 255, 0.85);
            text-transform: uppercase;
            text-align: center;
            font-size: 0.6875rem;
            transition: color 0.2s ease;
        }
        header .container ul li .submenu li a:hover {
            color: #fff;
        }
        /* Submenu em Colunas (GLASSMORPHISM) */
        header .container ul li .submenu-columns,
        .menu-categorias ul li .submenu-columns {
            position: absolute;
            right: 0;
            left: auto;
            top: 100%;
            transform: translateX(0);

            /* ---------- tamanho do card ----------
               Era "width:300px" com "padding:2rem" e "justify-content:
               space-around". Os três somados faziam uma caixa de 300x250px
               para quatro linhas de texto: o espaço vazio dominava e o card
               chamava mais atenção que os links dentro dele.

               Agora a largura acompanha o conteúdo (max-content, com um piso
               e um teto para o card não ficar estreito demais num item de
               nome curto nem largo demais num longo), o padding é o de um
               menu e não o de um cartão, e o space-around saiu: ele
               distribuía a sobra vertical entre os itens, que é de onde vinha
               o espaçamento exagerado do print. O respiro agora é o gap, que
               é previsível. */
            width: max-content;
            min-width: 190px;
            max-width: 280px;
            padding: .625rem;
            gap: .125rem;

            box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
            background: rgba(20, 20, 20, .85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 2px solid #e6223d;
            border-radius: 0 0 14px 14px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            opacity: 0;
            pointer-events: none;
            z-index: 9;
        }

        /* ---------- os subitens ----------
           Duas estruturas convivem no menu: "A Unisoma" e "Conteúdos" usam
           li.solution-columns > div.solution-item > a, enquanto "Segmentos"
           põe o <a> direto dentro de um <li>. As duas precisam do mesmo
           tratamento, daí os dois seletores.

           O <a> vira bloco de largura inteira: assim a área clicável cobre a
           linha toda do card, não só o texto. Antes, com o <a> em
           display:flex e largura de conteúdo, sobrava metade da linha morta
           ao lado do link. */
        header .container ul li .submenu-columns > .solution-columns,
        header .container ul li .submenu-columns > li {
            width: 100%;
            max-width: none;
        }
        /* Os seletores miram "a", não "a.nav-link1": o link de Carreiras, no
           submenu de "A Unisoma", é o único escrito sem essa classe no
           header.php. Com o seletor preso à classe, ele era o único subitem
           que ficava alinhado à esquerda — e como está no meio da lista, a
           coluna inteira parecia desalinhada. */
        header .container ul li .submenu-columns .solution-item a,
        header .container ul li .submenu-columns > li > :is(a, .submenu-toggle) {
            display: block;
            width: 100%;
            box-sizing: border-box;
            padding: .5rem .75rem;
            border-radius: 8px;
            /* à direita: o cursor chega ao card vindo do item de menu acima,
               que está encostado na borda direita da tela. Alinhar os links
               do mesmo lado deixa o percurso do mouse curto e reto. */
            text-align: right;
            line-height: 1.35;
        }
        /* o realce do hover acompanha a linha inteira, não só as letras */
        header .container ul li .submenu-columns .solution-item a:hover,
        header .container ul li .submenu-columns > li > :is(a, .submenu-toggle):hover {
            background: rgba(255, 255, 255, .07);
        }
        header .container ul li .submenu-columns.categorias,
        .menu-categorias ul li .submenu-columns.categorias {
            background: rgba(20, 20, 20, 0.7);
            top: 75%;
            left: 67%;
        }
        /* max-width saiu: os 194px cortavam a linha antes da borda do card e
           deixavam um vão morto à direita, justo do lado para onde os links
           agora estão alinhados. */
        header .container ul li .submenu-columns li {
            width: 100%;
            display: block;
        }
        header .container ul li .submenu-columns li button {
            font-size: 12px;
            line-height: 18px;
            text-align: left;
            letter-spacing: 1.2px;
            color: rgba(255, 255, 255, 0.9);
            text-transform: uppercase;
            font-weight: 700;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        header .container ul li .submenu-columns li button:hover {
            color: #fff;
        }
        header .container ul li .submenu-columns li ul {
            display: block;
            margin-top: 29px;
        }
        header .container ul li .submenu-columns li ul li {
            width: 100%;
        }
        header .container ul li .submenu-columns li ul li:not(:first-child) {
            margin-top: 11px;
        }
        header .container ul li .submenu-columns li ul li a {
            font-family: "Poppins", sans-serif;
            font-size: 12px;
            line-height: 18px;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 0.75);
            font-weight: 400;
            text-transform: none;
            transition: color 0.2s ease;
        }
        header .container ul li .submenu-columns li ul li a:hover {
            color: #fff;
        }
        /* Só o .menu-categorias mantém o arranjo antigo (flex centrado). O
           seletor do header saiu daqui: ele agora é tratado no bloco "os
           subitens", acima, como bloco de largura inteira alinhado à direita.
           Deixar os dois faria o display:flex desta regra vencer o
           display:block de lá, por vir depois no arquivo. */
        .menu-categorias ul li .submenu-columns .solution-item a.nav-link1 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: left;
        }
        /* Hover Effects - Mostra os menus
           :focus-within junto do :hover — sem ele os submenus abriam só no
           passar do mouse, e quem navega por teclado (Tab) chegava nos itens
           de topo sem nunca conseguir alcançar Quem Somos, Carreiras, Blog e
           os demais links de dentro: eles existiam no DOM mas ficavam com
           pointer-events:none e opacity:0 para sempre. */
        header .container ul li:hover .submenu,
        header .container ul li:hover .submenu-columns,
        header .container ul li:focus-within .submenu,
        header .container ul li:focus-within .submenu-columns,
        .menu-categorias ul li:hover .submenu-columns,
        .menu-categorias ul li:focus-within .submenu-columns,
        .menu-categorias ul li .submenu-columns:hover {
            max-height: 999px;
            opacity: 1;
            pointer-events: all;
            transition: opacity 0.3s ease-in-out;
        }
        /* ---------- foco de teclado ----------
           O menu não tinha nenhum estilo de :focus. Quem navega por Tab via o
           foco andar sem qualquer indicação de onde estava — o navegador
           chega a desenhar um contorno padrão, mas ele fica invisível sobre
           o hero escuro. */
        header a:focus-visible,
        header button:focus-visible,
        header select:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
            border-radius: 4px;
        }
        /* no submenu o fundo já é escuro translúcido: contorno vermelho lê
           melhor ali do que branco sobre branco-transparente */
        header .submenu a:focus-visible,
        header .submenu-columns a:focus-visible {
            outline-color: #e6223d;
        }
        /* Elementos Mobile (Ocultos por padrão no Desktop) */
        header .container .mobile-menu {
            display: none !important;
        }
        header .container .mobile-options {
            display: none !important;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.25rem;
            margin-right: 1.875rem;
        }
        header .container .mobile-options a {
            color: #fff;
        }
        header .close-menu {
            display: none !important;
        }
        /* Seletor de Idioma */
        header .container .lng {
            position: relative;
        }
        header .container .lng::after {
            content: "\f078";
            font-weight: 900;
            /* "Font Awesome 6 Free": o header.php carrega a 6.5.1, e o nome da
               família mudou da 5 para a 6. Pedindo a 5, a fonte não existe, o
               glifo não resolve e a setinha simplesmente não aparecia. O peso
               também: na 6 o estilo solid é 900, não 700.
               A cor vem do global.css — #e6223d é o vermelho da marca; o
               #e50c2c daqui era de uma paleta anterior. */
            font-family: "Font Awesome 6 Free";
            color: #e6223d;
            position: absolute;
            right: 0;
            top: 6px;
            font-size: 12px;
            pointer-events: none;
        }
        header .container .lng select {
            background: transparent;
            border: none;
            color: #fff;
            cursor: pointer;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding-right: 20px;
        }
        header .container .language option {
            color: #fff;
        }
        /* MEDIA QUERIES - MOBILE (max-width: 1024px) */

        /* =================================================================
           PAINEL MOBILE — redesenho
           O que havia antes e por que mudou:
           - 140px de padding no topo e um "x" solto: o painel começava com
             uma faixa vazia e nada indicava de onde ele saiu. Agora há um
             cabeçalho com a marca e o botão de fechar.
           - itens centrados, 18px de line-height e 45px de gap: o alvo de
             toque era só a altura do texto, com vão morto entre um item e
             outro. Agora cada item é uma LINHA inteira de 56px — o dedo
             acerta em qualquer ponto dela.
           - tudo em caixa-alta e no mesmo peso: sem hierarquia, difícil de
             varrer. Agora o item de topo é caixa normal e os subitens vêm
             menores e recuados.
           - o painel entrava por "right:-999px" e saía sem transição. Agora
             é translateX, que anima nos dois sentidos e roda na GPU.
           ================================================================= */
        @media (max-width: 1024px) {
            header .container nav {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: auto;
                /* px e nao rem: o tema reduz o font-size da raiz para ~11,9px,
                   entao 25rem daria 298px — mais estreito do que o pretendido.
                   Em px o limite e' o limite. */
                width: min(88vw, 400px);
                max-width: none;
                padding: 0;
                background: #0d0d0d;
                border-left: 1px solid rgba(255, 255, 255, .08);
                box-shadow: -18px 0 45px rgba(0, 0, 0, .45);
                /* fechado: fora da tela, à direita */
                transform: translateX(100%);
                /* coluna: cabeçalho fixo, lista rolável, rodapé fixo */
                display: flex;
                flex-direction: column;
                overflow: hidden;
                visibility: hidden;
            }
            @media (prefers-reduced-motion: no-preference) {
                header .container nav { transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s; }
            }
            header .container nav.active {
                transform: translateX(0);
                visibility: visible;
                right: 0;
                padding-bottom: 0;
                overflow: hidden;
            }

            /* ---------- cabeçalho do painel ---------- */
            header .container nav .menu-topo {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                flex: 0 0 auto;
                padding: 1rem 1.25rem;
                padding-top: calc(1rem + env(safe-area-inset-top, 0px));
                border-bottom: 1px solid rgba(255, 255, 255, .08);
            }
            header .container nav .menu-topo__logo { display: flex; }
            header .container nav .menu-topo__logo img { display: block; height: 28px; width: auto; }
            /* 44x44: o mínimo confortável para o polegar. O ícone continua
               com 18px — quem cresceu foi a área clicável, não o desenho. */
            header .container nav .close-menu {
                display: flex !important;
                align-items: center;
                justify-content: center;
                position: static;
                width: 44px;
                height: 44px;
                margin-right: -10px;
                padding: 0;
                background: transparent;
                border: none;
                border-radius: 50%;
                color: #fff;
                font-size: 18px;
                cursor: pointer;
            }
            header .container nav .close-menu:hover,
            header .container nav .close-menu:focus-visible { background: rgba(255, 255, 255, .08); }

            /* ---------- lista ---------- */
            header .container nav ul {
                flex: 1 1 auto;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                flex-direction: column;
                gap: 0;
                margin: 0;
                padding: .5rem 0;
                width: 100%;
            }
            header .container ul li {
                display: block;
                width: 100%;
                text-align: left;
            }
            header .container ul li:not(.right) + li:not(.right) {
                border-top: 1px solid rgba(255, 255, 255, .06);
            }
            /* a linha inteira é o alvo: 56px de altura e padding lateral no
               próprio <a>, não no <li> */
            header .container nav > ul > li > :is(a, .submenu-toggle) {
                display: flex;
                flex-direction: row;
                align-items: center;
                min-height: 56px;
                padding: .5rem 1.25rem;
                font-size: 1rem;
                line-height: 1.35;
                font-weight: 500;
                letter-spacing: .2px;
                text-transform: none;
                color: #fff;
                position: relative;
            }
            header .container nav > ul > li > :is(a, .submenu-toggle):active { background: rgba(255, 255, 255, .06); }
            header .container ul li a:hover { color: #fff; }

            /* seta do acordeão: encostada na borda direita da linha, e não
               em "right:-25px", que a jogava para fora do painel */
            header .container ul li:has(.submenu) > :is(a, .submenu-toggle)::after,
            header .container ul li:has(.submenu-columns) > :is(a, .submenu-toggle)::after {
                content: "\f078";
                font-weight: 900;
                font-family: "Font Awesome 6 Free";
                position: absolute;
                right: 1.25rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: .7rem;
                color: rgba(255, 255, 255, .45);
                transition: transform .25s ease, color .25s ease;
            }
            header .container ul li.active > :is(a, .submenu-toggle)::after {
                transform: translateY(-50%) rotate(180deg);
                color: #e6223d;
            }
            header .container ul li.active > :is(a, .submenu-toggle) {
                color: #e6223d !important;
                background: rgba(230, 34, 61, .07);
            }

            /* ---------- submenu (acordeão) ---------- */
            header .container ul li .submenu,
            header .container ul li .submenu-columns {
                /* display:block: no desktop o .submenu-columns e' uma GRADE de
                   colunas lado a lado. Aqui vira lista vertical, e deixar o
                   flex em linha empurrava cada coluna para uma faixa propria,
                   com sobras de espaco entre elas. */
                display: block;
                width: 100%;
                max-width: none;
                margin: 0;
                padding: 0;
                background: rgba(255, 255, 255, .03);
                border: none;
                border-radius: 0;
                box-shadow: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                position: static;
                transform: none;
                opacity: 0;
                max-height: 0;
                overflow: hidden;
                pointer-events: none;
            }
            header .container ul li:hover .submenu,
            header .container ul li:hover .submenu-columns {
                opacity: 0;
                max-height: 0;
                pointer-events: none;
            }
            header .container ul li.active .submenu,
            header .container ul li.active .submenu-columns {
                opacity: 1;
                max-height: 40rem;
                overflow: visible;
                pointer-events: all;
                padding: .25rem 0 .5rem;
                margin: 0;
                background: rgba(255, 255, 255, .03);
                transition: opacity .25s ease;
            }
            /* subitem: menor, mais claro e recuado — a indentação é o que diz
               "isto está dentro daquilo" sem precisar de moldura */
            header .container ul li .submenu li,
            header .container ul li .submenu-columns li,
            header .container ul li .submenu-columns .solution-item {
                display: block;
                width: 100%;
                text-align: left;
                margin: 0;
            }
            header .container ul li.active .submenu li a,
            header .container ul li.active .submenu-columns li a,
            header .container ul li .submenu-columns .solution-item a,
            header .container ul li .submenu-columns .solution-item a.nav-link1,
            .menu-categorias ul li .submenu-columns .solution-item a.nav-link1 {
                display: flex;
                align-items: center;
                min-height: 48px;
                padding: .375rem 1.25rem .375rem 2.25rem;
                font-size: .9375rem;
                font-weight: 400;
                line-height: 1.4;
                letter-spacing: 0;
                text-transform: none;
                text-align: left;
                /* flex-direction:row E justify-content:flex-start, os dois.
                   O <a> herdava "column" de outra regra, e em coluna o eixo
                   CRUZADO e' o horizontal: quem centralizava o texto no meio
                   do painel era o align-items:center, nao o justify-content.
                   So mexer no justify nao resolvia — foi o que aconteceu na
                   primeira tentativa. */
                flex-direction: row;
                justify-content: flex-start;
                color: rgba(255, 255, 255, .72);
            }
            header .container ul li .submenu-columns .solution-item a:active,
            header .container ul li.active .submenu li a:active { background: rgba(255, 255, 255, .06); }
            header .container ul li .submenu-columns > .solution-columns,
            .menu-categorias ul li .submenu-columns > .solution-columns { width: 100%; }
            header .container ul li .submenu-columns li button { text-align: left; color: #fff; }

            /* a linha da busca/idioma do desktop não faz sentido no painel */
            header .container ul li.right { display: none !important; }

            /* ---------- rodapé do painel ---------- */
            header .container nav .menu-rodape {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                gap: .75rem;
                padding: 1rem 1.25rem;
                padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
                border-top: 1px solid rgba(255, 255, 255, .08);
                background: #0d0d0d;
            }
            header .container nav .menu-rodape__cta {
                flex: 1 1 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 48px;
                padding: 0 1.25rem;
                border-radius: 100px;
                background: linear-gradient(90deg, #e84a1f 0%, #e6223d 100%);
                color: #fff !important;
                font-size: .9375rem;
                font-weight: 600;
                letter-spacing: .2px;
                text-transform: none;
            }
            header .container nav .menu-rodape__lng { position: relative; flex: 0 0 auto; }
            header .container nav .menu-rodape__lng select {
                min-height: 48px;
                padding: 0 .875rem;
                border: 1px solid rgba(255, 255, 255, .18);
                border-radius: 100px;
                background: transparent;
                color: #fff;
                font-family: inherit;
                font-size: .875rem;
                cursor: pointer;
                -webkit-appearance: none;
                -moz-appearance: none;
                     appearance: none;
            }
            header .container nav .menu-rodape__lng select option { color: #111; }

            /* ---------- barra de cima ---------- */
            header .container .mobile-menu {
                display: flex !important;
                align-items: center;
                justify-content: center;
                width: 44px;
                height: 44px;
                background: transparent;
                border: none;
                border-radius: 50%;
                color: #fff;
                cursor: pointer;
            }
            header .container .mobile-options { display: flex !important; align-items: center; gap: .25rem; }
            header .container .mobile-options .search-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 44px;
                height: 44px;
                color: #fff;
            }
            header .container .lng::after { top: 3px; }
        }

        /* o painel nunca aparece no desktop, nem por engano */
        @media (min-width: 1025px) {
            header .container nav .menu-topo,
            header .container nav .menu-rodape { display: none; }
        }
        /* MEDIA QUERIES - TABLET/PHONE (max-width: 768px) */
        @media (max-width: 768px) {
            header {
                padding: 1rem 0;
            }
            header .container .logo {
                max-width: 120px;
                height: 35px;
            }
            header .container .logo img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            header .container .mobile-options {
                margin-right: 0;
            }
        }
        /* ---------- página atual ----------
           A classe "current" estava escrita à mão no <li> do Home, então o
           Home aparecia como página atual em todas as páginas do site — e,
           como nunca houve estilo para .current, na prática não aparecia
           nada em nenhuma. Agora o PHP marca o item certo (ver o markup) e
           esta regra o desenha: cor cheia e um traço vermelho embaixo.
           aria-current="page" no markup dá a mesma informação a quem usa
           leitor de tela. */
        header .container nav > ul > li.current > :is(a, .submenu-toggle) {
            color: #fff;
        }
        header .container nav > ul > li.current > :is(a, .submenu-toggle)::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            height: 2px;
            background: #e6223d;
        }
        header .container nav > ul > li > :is(a, .submenu-toggle) {
            position: relative;
        }

        /* Cor dos links e controles ao passar o mouse. */
        header .container ul li .submenu-toggle:hover,
        /* :not(.header-cta): este hover pinta de vermelho TODO link do menu,
           com !important. No botão "Vamos conversar", que tem fundo vermelho,
           o texto sumia no hover. O botão tem hover próprio (brilho). */
        header .container ul li a:not(.header-cta):hover,
        header .container ul li a.nav-link1:hover {
            color: #e6223e !important;
            transition: color 0.3s ease;
        }
        header .container ul li a:not(.header-cta):hover::after {
            color: #e6223e !important;
        }
        /* Menu mobile aberto: desativa backdrop-filter do header */
        @media (max-width: 1024px) {
          header:has(nav.active) {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
          }

          /* ---------- véu atrás do painel ----------
             O painel cobre 80% da largura e sobravam 20% de página visível ao
             lado, sem nada indicando que estavam inertes: dava para ver o
             conteúdo, mas tocar ali não fechava o menu. O véu escurece o que
             ficou de fora e é o alvo de "toquei fora, fecha". */
          .menu-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .5);
            z-index: 98;            /* abaixo do header (99), acima da página */
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s ease;
          }
          body.menu-aberto .menu-overlay {
            opacity: 1;
            pointer-events: auto;
          }
          /* trava a rolagem do fundo: sem isto a página continuava rolando
             atrás do painel, e ao fechar o menu o visitante estava num ponto
             diferente de onde parou */
          body.menu-aberto {
            overflow: hidden;
          }

          /* alvo de toque dos botões do menu: 24px de ícone não dá os 44px
             mínimos, e são justamente os dois controles mais usados no
             celular (abrir e fechar) */
          header .container .mobile-menu,
          header .container nav .close-menu {
            min-width: 44px;
            min-height: 44px;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
          }
        }
        @media (prefers-reduced-motion: reduce) {
          .menu-overlay { transition: none; }
        }