/* --- O site inteiro em azul -------------------------------------------- */
/* A página em si (o elemento raiz) não passa por token nenhum: se ficar
   branca, aparece uma faixa branca em qualquer lugar onde a seção não
   cobre a largura toda. */
html, body { background-color: #082A4D !important; }

/* Blocos pintados com o azul-bebê pedem texto escuro em cima. É o caso do
   selo "Profissionais em regime CLT", que herdava o branco do resto. */
[style*="background-color:var(--token-0086fd9f"] .framer-text,
[style*="background-color: var(--token-0086fd9f"] .framer-text,
.framer-1p8ykvm .framer-text {
  color: #082A4D !important;
}

/* o mesmo bloco pinta ícones por variável */
.framer-1p8ykvm { --xcxo6y: #082A4D !important; --43q7um: #082A4D !important; }

/* --- Seções invertidas: fundo escuro, cards claros --------------------- */
/* Três seções vinham com fundo azul muito claro e cards escuros por cima.
   O cliente pediu o contrário: a seção no azul escuro do site e os cards
   no azul-bebê. Como o fundo dessas seções vem de um token só delas, ele
   muda na tabela de cores; o que precisa de regra aqui é o resto -- o
   texto, que era escuro e agora fica sobre o escuro, e os cards, que eram
   escuros e agora ficam sobre o escuro também.

   As classes são as do próprio Framer e não mudam enquanto o build sair do
   mesmo zip:
     .framer-ch7aj3   "Nossos serviços"
     .framer-1lpmvq1  "Depoimentos"
     .framer-18xlgae  "Dúvidas"
     .framer-1uehwme  "Nossa trajetória", na página Quem Somos -- esta não
                      tem cards, só texto solto sobre o fundo */
.framer-ch7aj3 .framer-text,
.framer-1lpmvq1 .framer-text,
.framer-18xlgae .framer-text,
.framer-1uehwme .framer-text { color: #FFFFFF !important; }

.framer-ch7aj3, .framer-1lpmvq1, .framer-18xlgae, .framer-1uehwme {
  --xcxo6y: #FFFFFF;
  --43q7um: #FFFFFF;
}

/* o rótulo pequeno de cada seção fica no azul-bebê, como antes ficava no
   azul médio sobre o claro */
.framer-ch7aj3 .framer-styles-preset-104kkls,
.framer-1lpmvq1 .framer-styles-preset-104kkls,
.framer-18xlgae .framer-styles-preset-104kkls,
.framer-1uehwme .framer-styles-preset-104kkls { color: #7CC4F5 !important; }

/* Os cards. `.framer-7o3gZ` é o card de serviço (aberto ou fechado) e
   `.framer-1604iqy` é a moldura do depoimento. O seletor por `style`
   pega os blocos que pintam o fundo pelo token escuro -- o miolo do card
   aberto e o botão "ver todos os serviços" -- sem pegar os ícones, que
   usam o mesmo token por outra propriedade. */
.framer-ch7aj3 .framer-7o3gZ,
.framer-1lpmvq1 .framer-1v2h380,
.framer-ch7aj3 [style*="background-color:#082a4d"],
.framer-ch7aj3 [style*="background-color: #082a4d"],
.framer-ch7aj3 [style*="background-color: rgb(8, 42, 77)"],
.framer-ch7aj3 [style*="background-color:rgb(8,42,77)"] {
  background-color: #7CC4F5 !important;
  --xcxo6y: #082A4D !important;
  --43q7um: #082A4D !important;
}

.framer-ch7aj3 .framer-7o3gZ .framer-text,
.framer-1lpmvq1 .framer-1v2h380 .framer-text,
.framer-ch7aj3 [style*="background-color:#082a4d"] .framer-text,
.framer-ch7aj3 [style*="background-color: #082a4d"] .framer-text,
.framer-ch7aj3 [style*="background-color: rgb(8, 42, 77)"] .framer-text,
.framer-ch7aj3 [style*="background-color:rgb(8,42,77)"] .framer-text {
  color: #082A4D !important;
}

/* A moldura do depoimento fica num azul intermediário e o depoimento em
   si no azul-bebê: três tons de azul, um dentro do outro, sem recorrer ao
   branco -- que o cliente tirou do site. */
.framer-1lpmvq1 .framer-1604iqy { background-color: #0E3B6B !important; }
.framer-1lpmvq1 .framer-IKR32 { background-color: #7CC4F5 !important; }
.framer-1lpmvq1 .framer-IKR32 .framer-text { color: #082A4D !important; }
.framer-1lpmvq1 .framer-IKR32 { --xcxo6y: #082A4D !important; }

/* --- O azul forte como cor principal ----------------------------------- */
/* O mesmo token pinta duas coisas muito diferentes: o FUNDO dos botões e o
   TEXTO de rótulos que ficam sobre as seções escuras. Como texto sobre
   escuro ele precisa ser claro; como botão, o claro fazia a ação principal
   parecer secundária -- foi a queixa do cliente.
   Então o token continua claro, e aqui trocamos só onde ele é fundo: o
   botão fica azul forte, e o que está dentro dele (texto e seta) fica
   branco, senão a legenda escura sumiria por cima do azul.
   Os dois seletores são o mesmo caso: o HTML servido escreve
   `background-color:var(…)` sem espaço, e o React reescreve com espaço. */
[style*="background-color:var(--token-823755eb"],
[style*="background-color: var(--token-823755eb"] {
  background-color: #0C71C3 !important;
  /* as duas variáveis que pintam ícone e seta dentro do botão */
  --xcxo6y: #FFFFFF !important;
  --43q7um: #FFFFFF !important;
}

/* O seletor é repetido de propósito. Dentro das seções invertidas há uma
   regra que pinta de escuro o texto dos cards, e ela é mais específica do
   que esta -- o "LEIA MAIS" saía escuro sobre o azul forte do botão.
   Repetindo o atributo, esta regra empata em especificidade e, por vir
   depois, ganha. */
[style*="background-color:var(--token-823755eb"][style*="var(--token-823755eb"] .framer-text,
[style*="background-color: var(--token-823755eb"][style*="var(--token-823755eb"] .framer-text {
  color: #FFFFFF !important;
}

/* A setinha do botão é uma máscara pintada por uma variável escrita no
   próprio elemento -- e valor escrito no elemento ganha de valor herdado.
   Por isso ela é pintada aqui diretamente, e não pela variável. */
[style*="background-color:var(--token-823755eb"][style*="var(--token-823755eb"] [style*="--43q7um"],
[style*="background-color: var(--token-823755eb"][style*="var(--token-823755eb"] [style*="--43q7um"],
[style*="background-color:var(--token-823755eb"][style*="var(--token-823755eb"] [style*="--xcxo6y"],
[style*="background-color: var(--token-823755eb"][style*="var(--token-823755eb"] [style*="--xcxo6y"] {
  background-color: #FFFFFF !important;
}

/* Squad: seções do template sem correspondente no site da Squad */
section[data-framer-name="Blog section"],
section[data-framer-name="Jobs Section"] { display: none !important; }

/* A seção de equipe volta a aparecer, mas sem os nomes inventados do
   template ("William J.", "Floor Care Specialist"): no lugar deles entram
   as funções da operação da Squad. Foto de banco de imagens com rótulo de
   função é ilustração; foto com nome de funcionário seria invenção. */

/* Crédito do autor do template no rodapé. O texto vem partido entre nós
   ("Made by <a>Tempbix</a>, Built with <a>Framer</a>."), então esconder só
   os links deixaria a pontuação solta: some com o parágrafo inteiro. */
.framer-1pomsnq { display: none !important; }

/* Segunda coluna "Páginas" do rodapé: era a lista das páginas extras do
   template (equipe, vagas, avaliações, 404). Sem elas, a coluna só repetia
   o título e levava a lugar nenhum. */
.framer-16i9l2 { display: none !important; }

/* Faixa de "Happy sponsors" com logotipos "Logoipsum" -- marcas inventadas
   que o template usa de enfeite. Numa página de serviços elas passariam por
   clientes da Squad, o que não é verdade. Volta quando houver logotipo de
   cliente real, com autorização de uso. */
section[data-framer-name="Brand Section"] { display: none !important; }
a[href*="tempbix.com"],
a[href*="framer.com/"] { display: none !important; }

/* Logotipo. A caixa do template é 170x48 (proporção 3,54) e o logo da Squad
   é 2254x722 (proporção 3,12); com o "object-fit: cover" que vem do Framer
   ele saía cortado em cima e embaixo. "contain" mostra a marca inteira. */

/* Menu do celular e gaveta do desktop.
   O menu do template lista as 17 paginas internas dele (About, Service
   Details, Jobs details, Our Team, Pricing, Ratings, 404...). No celular
   isso vira uma lista aberta e o visitante encara um menu enorme cheio de
   pagina que nao existe.

   Cada item tem uma classe propria no bundle, entao escondemos um a um.
   Uma regra por item, de proposito: quando os 14 seletores ficavam na
   mesma lista separada por virgula, bastava o navegador torcer o nariz
   para um deles e a regra inteira era descartada -- foi o que aconteceu
   na primeira tentativa, e o menu continuou igual.
   Ficam de pe so Inicio, Quem Somos e Servicos, como no desktop. */
.framer-1lj754h-container { display: none !important; }
.framer-qlh2x3-container { display: none !important; }
.framer-icptwd-container { display: none !important; }
.framer-rub2qx-container { display: none !important; }
.framer-1akm9aj-container { display: none !important; }
.framer-14r5mzt-container { display: none !important; }
.framer-2hyj2l-container { display: none !important; }
.framer-1ggg2z6-container { display: none !important; }
.framer-10ezjtp-container { display: none !important; }
.framer-eawoyr-container { display: none !important; }
.framer-ulh4nb-container { display: none !important; }
.framer-cfx972-container { display: none !important; }
.framer-wkxne-container { display: none !important; }
.framer-z65vz3-container { display: none !important; }

img[src*="AE1CUqnQaLlAHJVj9gEJMQxl5nw"] {
  object-fit: contain !important;
  object-position: left center !important;
}

/* Widget flutuante do template no canto inferior direito (um "expand" com
   ícones sociais). Não faz parte do que a Squad pediu. */
.framer-1fakeh4-container { display: none !important; }

/* Gaveta que abria ao passar o mouse em "SERVIÇOS". Ela listava as páginas
   internas do template -- SERVICE DETAILS, JOBS DETAILS, TEAM DETAILS,
   RATINGS, 404 -- e os links eram resolvidos por ID interno de página do
   Framer, não por URL: metade apontava para páginas que removemos. Como
   remapear esses IDs é arriscado, a gaveta sai e "SERVIÇOS" leva direto
   para /servicos/, que já lista os serviços com os textos certos. */
.framer-5mo4jn-container { display: none !important; }

/* ...e com a gaveta fora, o item "SERVIÇOS" do menu (que só servia para
   abri-la) ficaria clicável sem destino. Sai junto: quem quer serviços usa
   o item ao lado, que leva para /servicos/. */
.framer-1drnn72-container { display: none !important; }

/* --- Os botões sólidos, brancos ---------------------------------------- */
/* Estes botões ("Saiba mais", "Fazer orçamento", "Fale conosco" com o menu
   já rolado) eram azul-escuro com texto branco. Num site inteiro azul eles
   sumiam no fundo, e o cliente pediu que ficassem brancos.
   Fundo branco pede texto e seta escuros -- foi justamente o que faltava
   quando eles apareceram brancos e vazios.
   O seletor é `a`/`button` de propósito: a mesma cor de fundo, no mesmo
   formato, também pinta faixas inteiras da página, que devem continuar
   azuis. Vem depois das regras de seção para ganhar delas nos botões.

   E é repetido em hexadecimal e em `rgb()` porque o HTML servido traz
   `#082a4d` e o React, ao montar, reescreve o mesmo valor como
   `rgb(8, 42, 77)`. Cobrir só uma das formas funciona até a página
   hidratar -- e aí o botão volta a ficar sem texto legível. */
a[style*="background-color:#082a4d"],
a[style*="background-color: #082a4d"],
a[style*="background-color: rgb(8, 42, 77)"],
a[style*="background-color:rgb(8,42,77)"],
button[style*="background-color:#082a4d"],
button[style*="background-color: #082a4d"],
button[style*="background-color: rgb(8, 42, 77)"],
button[style*="background-color:rgb(8,42,77)"] {
  background-color: #FFFFFF !important;
  --xcxo6y: #082A4D !important;
  --43q7um: #082A4D !important;
}

a[style*="background-color:#082a4d"] .framer-text,
a[style*="background-color: #082a4d"] .framer-text,
a[style*="background-color: rgb(8, 42, 77)"] .framer-text,
a[style*="background-color:rgb(8,42,77)"] .framer-text,
button[style*="background-color:#082a4d"] .framer-text,
button[style*="background-color: #082a4d"] .framer-text,
button[style*="background-color: rgb(8, 42, 77)"] .framer-text,
button[style*="background-color:rgb(8,42,77)"] .framer-text {
  color: #082A4D !important;
}

a[style*="background-color:#082a4d"] [style*="--43q7um"],
a[style*="background-color: #082a4d"] [style*="--43q7um"],
a[style*="background-color: rgb(8, 42, 77)"] [style*="--43q7um"],
a[style*="background-color:#082a4d"] [style*="--xcxo6y"],
a[style*="background-color: #082a4d"] [style*="--xcxo6y"],
a[style*="background-color: rgb(8, 42, 77)"] [style*="--xcxo6y"] {
  background-color: #082A4D !important;
}

/* --- Sem o atalho do LinkedIn nos cards da equipe ---------------------- */
/* Cada card da seção de equipe trazia um ícone de LinkedIn apontando para
   linkedin.com -- a home da rede, não um perfil. O cliente pediu para
   tirar. O rodapé continua com os ícones de redes sociais; este container
   só existe nos cards da equipe (nove ocorrências, três cards em três
   tamanhos de tela). */
.framer-1xsrxs8-container { display: none !important; }

/* --- Os contadores ----------------------------------------------------- */
/* "25% anos de mercado" não quer dizer nada: o símbolo de porcentagem
   estava colado num número que conta anos. Ele sai, e fica "25". */
.framer-kamy1d { display: none !important; }

/* No cartão "100% profissionais em regime CLT" o símbolo fica branco, para
   se separar do número. */
.framer-12jb6f3 .framer-text { color: #FFFFFF !important; }