/* =====================================================================
   lumikit-ajustes.css — camada `ajustes` (ver lumikit.css)

   Regras que precisam vencer o CSS antigo. Antes viviam em blocos <style>
   dentro do index.php e do menu.php; agora que estão numa camada
   posterior, os !important que carregavam deixaram de ser necessários —
   foram mantidos por ora para a migração mudar UMA coisa de cada vez,
   e podem ser removidos aos poucos (testando visualmente a cada remoção).
   ===================================================================== */

/* ---------- vinha do <style> inline do index.php ---------- */
        /* ============================================
           LUMIKIT — OVERRIDES GLOBAIS (topo + rodapé)
           ============================================ */

        /* ---------- TOP BAR ---------- */
        .top-bar {
            background: #0a120c !important;
            border-bottom: 1px solid rgba(81,212,102,.18) !important;
            font-size: 12px !important;
            padding: 7px 0 !important;
        }
        .top-bar a {
            color: rgba(255,255,255,.65) !important;
            -webkit-transition: color .18s;
            transition: color .18s;
        }
        .top-bar a:hover { color: #51d466 !important; }
        /* O verde claro vale para os links de texto sobre a barra escura (9,3:1).
           Mas o ícone do carrinho fica sobre o botão BRANCO e o painel branco do
           dropdown, onde o mesmo tom rende 1,9:1 — ali entra o verde escuro. */
        .top-bar .color { color: var(--lk-verde) !important; }
        .top-bar .btn-white .color,
        .top-bar .b-dropdown-block .color,
        .top-bar .tb-shopping-cart .btn .color { color: var(--lk-verde-forte) !important; }
        .tb-contact { color: rgba(255,255,255,.45) !important; line-height: 26px; }
        .tb-contact b { color: rgba(255,255,255,.8); }

        .top-bar .b-dropdown-block a {
            color: #333 !important;
        }
        .top-bar .b-dropdown-block a:hover {
            color: var(--lk-verde-forte) !important;
        }

         /* Idioma dropdown */
        .tb-language > a { color: rgba(255,255,255,.6) !important; }
        .tb-language > a:hover { color: #51d466 !important; }
        .tb-language .dropdown-menu {
            background: #0e1a10;
            border-color: rgba(81,212,102,.2);
        }
        .tb-language .dropdown-menu li a {
            color: rgba(255,255,255,.65) !important;
            font-size: 12px;
        }
        .tb-language .dropdown-menu li a:hover {
            background: rgba(81,212,102,.1) !important;
            color: #51d466 !important;
        }

        /* Ícones sociais no topo */
        .tb-social .brand-bg a i {
            background: rgba(255,255,255,.08) !important;
            color: rgba(255,255,255,.6) !important;
            width: 26px;
            height: 26px;
            line-height: 26px;
            font-size: 13px;
            text-align: center;
            display: inline-block;
            -webkit-transition: background .18s, color .18s;
            transition: background .18s, color .18s;
        }
        .tb-social .brand-bg a:hover i {
            background: #51d466 !important;
            color: #fff !important;
        }

        /* ---------- HEADER ---------- */
        .header-2 {
            border-bottom: 1px solid #e4e8e4;
            box-shadow: 0 2px 8px rgba(0,0,0,.06);
        }

        /* ---------- RODAPÉ (.foot) ---------- */
        .foot {
            background: #0b140d !important;
            border-top: 3px solid #51d466 !important;
            padding: 44px 0 36px !important;
        }

        /* Títulos das colunas */
        .foot .foot-item > h2,
        .foot .foot-item > h2 > a {
            color: #fff !important;
            font-size: 13px !important;
            letter-spacing: .04em;
            text-transform: uppercase;
            margin-bottom: 14px !important;
        }
        .foot .foot-item > h2 > a:hover { color: #51d466 !important; }
        .foot .foot-item > h2 .fa { color: #51d466 !important; }

        /* Subtítulo endereço */
        .foot .foot-item h3 {
            color: rgba(255,255,255,.75) !important;
            font-size: 12.5px !important;
            margin-bottom: 8px !important;
        }
        .foot .foot-item h3 .fa { color: #51d466 !important; }

        /* Parágrafos e texto geral */
        .foot .foot-item p,
        .foot .foot-item .add {
            color: rgba(255,255,255,.5) !important;
            font-size: 12.5px;
            line-height: 1.7;
        }
        .foot .foot-item .tel a,
        .foot .foot-item a {
            color: rgba(255,255,255,.55) !important;
            -webkit-transition: color .18s;
            transition: color .18s;
        }
        .foot .foot-item .tel a:hover,
        .foot .foot-item a:hover { color: #51d466 !important; }
        .foot .foot-item .fa { color: #51d466 !important; }

        /* Lista de links (coluna 3) */
        .foot .foot-item-content .list-unstyled { margin-top: 4px; }
        .foot .foot-item-content .list-unstyled li {
            border-bottom: 1px solid rgba(255,255,255,.07);
            padding: 5px 0;
        }
        .foot .foot-item-content .list-unstyled li:last-child { border-bottom: none; }
        .foot .foot-item-content .list-unstyled li a {
            color: rgba(255,255,255,.55) !important;
            font-size: 12.5px;
        }
        .foot .foot-item-content .list-unstyled li a:hover {
            color: #51d466 !important;
            padding-left: 4px;
            -webkit-transition: padding .15s, color .15s;
            transition: padding .15s, color .15s;
        }

        /* Ícones sociais no rodapé */
        .foot .brand-bg a i {
            background: rgba(255,255,255,.08) !important;
            color: rgba(255,255,255,.65) !important;
            -webkit-transition: background .18s, color .18s;
            transition: background .18s, color .18s;
        }
        .foot .brand-bg a.youtube:hover i { background: #ff0000 !important; color: #fff !important; }
        .foot .brand-bg a.instagram:hover i { background: #c13584 !important; color: #fff !important; }
        .foot .brand-bg a.github:hover i { background: #51d466 !important; color: #fff !important; }

        /* Os títulos do rodapé eram h5 e h6 e viraram h2 e h3, para que a
           página não pulasse de h3 (conteúdo) direto para h5. Como h2 e h3
           têm tamanho padrão bem maior, o tamanho fica fixado aqui e acima —
           o rodapé continua exatamente igual. */
        .foot .foot-item > h2 { font-size: 13px !important; line-height: 1.3; }
        .foot .foot-item h3   { font-size: 12.5px !important; line-height: 1.4; }

        /* ---------- FOOTER BAR (copyright) ---------- */
        /* Duas correções apontadas pela auditoria de acessibilidade.

           CONTRASTE. Sobre o fundo #060d07, o texto em rgba(255,255,255,.30)
           dava 2,62:1 e o link em .40 dava 3,79:1 — a WCAG pede 4,5:1 para
           texto normal. Subindo para .55 e usando o verde da marca, ficam
           6,25:1 e 10,26:1.

           "LINKS RELY ON COLOR". O link se distinguia do texto ao redor
           apenas por ser um cinza um pouco mais claro (.40 contra .30) —
           quem não enxerga bem a diferença de cor não percebe que ali há um
           link. O sublinhado resolve sem depender de cor nenhuma.

           O rodapé de cima (.foot) foi medido junto e está bem: a menor
           relação lá é 5,34:1, então não precisou de ajuste. */
        footer {
            background: #060d07 !important;
            border-top: 1px solid rgba(81,212,102,.1) !important;
            padding: 12px 0 !important;
        }
        footer p {
            color: rgba(255,255,255,.55) !important;
            font-size: 11.5px !important;
            margin: 0 !important;
        }
        footer a {
            color: #51d466 !important;
            text-decoration: underline !important;
            text-underline-offset: 2px;
        }
        footer a:hover { color: #7ee08c !important; }

        /* ---------- BARRA "MENU" DO CELULAR ---------- */
/* O tema de 2013 põe texto branco (style.css) sobre o verde claro do
   skin-less (#70c42f). A relação de contraste é de 2,18:1 — bem abaixo dos
   4,5:1 que a WCAG pede para texto normal, e visível a olho nu: o "MENU"
   quase some no fundo.

   Escurecer o TEXTO em vez de escurecer o fundo mantém a barra verde clara
   que dá destaque ao menu, e leva o contraste a 8,15:1. O ícone das três
   linhas (o ::after) acompanha por herança. */
.header-2 .navy #menu-button,
.header-2 .navy #menu-button:hover {
	color: var(--lk-preto);
}

/* ---------- LUPA DA BUSCA DO TOPO, NO CELULAR ---------- */
/* A .lk-busca-icone é `position: absolute; left: 8px` SEM `top`. No monitor
   isso funciona por acidente: o .lk-busca-wrap é `inline-flex` com
   `align-items: center`, e é o flex que centraliza o ícone.

   No celular a regra responsiva troca o wrap para `display: block`. Sem o
   flex, o ícone absoluto sem `top` cai na posição estática — o canto de
   cima — e fica desalinhado do campo, que agora tem 34px de altura.

   Ancorar o ícone pelo meio resolve nos dois casos e não depende mais do
   display do elemento em volta. */
.lk-busca-icone {
	top: 50%;
	transform: translateY(-50%);
}

        /* ---------- GATILHOS QUE VIRARAM <button> ---------- */
/* Alguns <a href="#"> eram gatilhos: abrem uma gaveta do menu ou um
   dropdown, não levam a lugar nenhum. Para o Google eles são links
   quebrados ("Links are crawlable" reprovava), e para quem usa teclado ou
   leitor de tela eles se anunciavam como link mas se comportavam como
   botão. Viraram <button type="button">, que é o elemento correto.

   O CSS e o JavaScript do menu selecionam pela classe, não pela tag, então
   o comportamento não mudou. Falta só apagar os estilos que o navegador dá
   de brinde a todo <button> — fundo cinza, borda, fonte menor, largura
   pelo conteúdo — para que continuem idênticos aos links que eram. */
.mobile-mega-trigger,
.tb-lang-trigger,
.cc-dropdown-trigger,
.cc-link-acao,
.pc-link-acao {
	background: none;
	border: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.mobile-mega-trigger {
	display: block;
	width: 100%;
}

/* Estes eram <a> e continuam parecendo link: são ações no meio do texto
   (alterar a metragem do cabo, gerar outro número de verificação). */
.cc-link-acao, .pc-link-acao {
	color: var(--lk-verde-forte);
	padding: 0;
}
.cc-link-acao:hover, .pc-link-acao:hover { text-decoration: underline; }

/* ---------- SCROLL TO TOP ---------- */
        .totop a i {
            background: #51d466 !important;
        }
        .totop a i:hover { background: #30c247 !important; }


/* ---------- vinha do <style> inline do menu.php (busca do menu mobile) ---------- */
/* campo de busca no topo do menu mobile */
.mega-nav--mobile .mobile-busca { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mega-nav--mobile .mobile-busca form { display: flex; align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(81,212,102,.25); }
.mega-nav--mobile .mobile-busca i { color: rgba(81,212,102,.8); font-size: 13px; padding: 0 10px; }
.mega-nav--mobile .mobile-busca input {
	flex: 1; background: transparent; border: 0 !important; outline: 0 !important; box-shadow: none !important;
	color: var(--lk-branco); font-size: 14px; height: 40px; padding: 0 4px !important;
}
.mega-nav--mobile .mobile-busca input::placeholder { color: rgba(255,255,255,.35); }
.mega-nav--mobile .mobile-busca button { background: var(--lk-verde-medio); border: 0; color: var(--lk-branco); height: 40px; padding: 0 14px; cursor: pointer; }
.mega-nav--mobile .mobile-busca button i { color: var(--lk-branco); padding: 0; }