/* Ajustes da marca Grupo Almeida sobre o template Solustrid.
   Carregado depois das folhas do template, em todas as páginas.
   As cores não estão aqui: elas foram trocadas direto em style.css,
   responsive.css e news.css por tools/aplicar-cores.js. */

/* O lockup do Grupo Almeida é 4,30:1; o do template era 3,85:1. No mesmo
   limite de 200px de largura a marca ficaria mais baixa que a original,
   então a caixa cresce para a marca voltar à altura de antes. */
.main-header .logo-outer .logo img,
.fixed-header .sticky-header .logo {
  max-width: 230px;
}

/* Assinatura visual do Grupo Almeida: o template Solustrid é todo reto e
   chapado (border-radius de 2-3px em tudo). Pra destoar sem perder a
   identidade, o site ganha cantos bem arredondados e sombra suave -- efeito
   "flutuando" -- em botões, fotos e no banner de título. Só CSS, uma folha
   só, vale pra todas as páginas de uma vez. */

.theme-btn.btn-style-one,
.theme-btn.btn-style-two,
.theme-btn.btn-style-three,
.theme-btn.btn-style-four,
.theme-btn.submit-btn {
  border-radius: 30px;
  box-shadow: 0 8px 20px rgba(5, 34, 70, 0.18);
}

.services-block-two .image,
.services-block-three .image img,
.services-detail .image,
.news-block-two .image,
.images-column .image {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(5, 34, 70, 0.2);
}

/* Foto "sangrada" da seção Sobre a Indústria: encosta nas bordas de cima,
   baixo e esquerda de propósito (efeito fluido do template) -- só o canto
   que dá pra ver (direita, onde encontra o texto) ganha curva. */
.fluid-section-one .image-column {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  overflow: hidden;
  box-shadow: 10px 0 30px rgba(5, 34, 70, 0.15);
}

/* Banner de título das páginas internas: cantos de baixo arredondados em
   vez do retângulo reto do template. O gradiente escuro é o :before do
   próprio elemento -- overflow:hidden garante que ele acompanhe a curva. */
.page-banner {
  border-radius: 0 0 60px 60px;
  overflow: hidden;
}

/* Bloco "Diferenciais" da home (era o vídeo institucional de estoque, que
   era do site de origem -- ver README). Sem vídeo próprio ainda, virou uma
   foto real com o mesmo tratamento arredondado das outras. */
.skill-section .video-column .inner-column {
  padding-top: 0;
}
.skill-photo {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(5, 34, 70, 0.2);
}
.skill-photo img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

/* A lista de diferenciais reais fica sobre fundo escuro nessa seção -- o
   cinza padrão do template (#222) fica ilegível ali, precisa virar claro. */
.skill-section .list-style-one li {
  color: #e7ecf3;
}
.skill-section .list-style-one li:before {
  color: #6fa8dc;
}

/* Marcador de título: hexágono pequeno (a forma da marca) ao lado do
   "kicker" (ex: QUEM SOMOS) -- antes ficava sozinho embaixo do h2, sem
   ligação visual com nada, meio perdido. Junto do texto pequeno funciona
   como selo de fato. O h2:before volta a ser o traço padrão do tema. */
.sec-title:not(.centered) .title {
  padding-left: 20px;
}
.sec-title:not(.centered) .title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  background-color: #1B4E8C;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Depoimentos desligados: as fotos/nomes eram de avaliação de outra empresa,
   não do Grupo Almeida. Volta quando tivermos a página do Google Meu Negócio
   própria e puder puxar avaliação real de lá. */
.clients-section {
  display: none;
}

/* Mapa de cidades atendidas (ES): contorno real do estado (78 municípios,
   fonte IBGE/Wikimedia CC BY-SA), cada cidade é um <a> pra
   /atendimento-<cidade>-es/. Cartão arredondado com sombra, igual ao resto
   do facelift, pra não destoar do template reto original. */
.coverage-map-section {
  padding: 90px 0;
  background: #f5f8fc;
}
.coverage-map-section-split {
  padding: 70px 0;
}
.coverage-map-section-split .map-column {
  margin-bottom: 30px;
}
.mapa-es-wrapper {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(5, 34, 70, 0.2);
}
.coverage-map-section-split .mapa-es-wrapper {
  max-width: 100%;
}
.mapa-es {
  width: 100%;
  height: auto;
  display: block;
}
.mapa-es-cidade {
  fill: #cddcee;
  stroke: #ffffff;
  stroke-width: 1.4;
  transition: fill 0.15s ease;
}
.mapa-es-link:hover .mapa-es-cidade,
.mapa-es-link:focus .mapa-es-cidade {
  fill: #1B4E8C;
  cursor: pointer;
}
.mapa-es-link:focus {
  outline: 2px solid #6fa8dc;
  outline-offset: 2px;
}
.mapa-es-credito {
  text-align: center;
  font-size: 11px;
  color: #9aa5b1;
  margin-top: 10px;
}

/* Mini-contadores ao lado do mapa -- reforça os números já mostrados lá em
   cima e ajuda o card "Onde Atuamos" a não ficar muito mais baixo que o
   mapa (que é alto por causa do formato do ES). */
.coverage-mini-stats {
  display: flex;
  gap: 16px;
  margin-top: 40px;
}
.coverage-mini-stat {
  flex: 1;
  text-align: center;
  padding: 20px 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(5, 34, 70, 0.12);
}
.coverage-mini-stat-number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #1B4E8C;
  line-height: 1.2;
}
.coverage-mini-stat-label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

/* Carrossel de clientes: cada logo tinha uma altura diferente e ficava
   alinhado pela base (a Telemont, mais fina, sobrava mais baixo que o
   resto) -- centraliza tudo verticalmente no mesmo slot. O template também
   escondia nav e dots (display:none), então não dava nenhuma pista de que
   dava pra arrastar ou clicar -- volta os dois, com a cara da marca, e
   cursor de "arrastar" no carrossel inteiro. */
.factory-section .factory-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
}
.factory-section .factory-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.factory-section .factories-icons-carousel {
  position: relative;
  cursor: grab;
}
.factory-section .factories-icons-carousel:active {
  cursor: grabbing;
}
.factory-section .owl-nav {
  display: block;
}
.factory-section .owl-nav .owl-prev,
.factory-section .owl-nav .owl-next {
  position: absolute;
  top: 35px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #1B4E8C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(5, 34, 70, 0.18);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.factory-section .owl-nav .owl-prev {
  left: -12px;
}
.factory-section .owl-nav .owl-next {
  right: -12px;
}
.factory-section .owl-nav .owl-prev:hover,
.factory-section .owl-nav .owl-next:hover {
  background: #1B4E8C;
  color: #fff;
}
.factory-section .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.factory-section .owl-dots .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cddcee;
  transition: background 0.2s ease;
}
.factory-section .owl-dots .owl-dot.active span {
  background: #1B4E8C;
}

/* Os arquivos de logo têm resolução bem diferente entre si -- alguns bem
   pequenos (ex: Localiza 120x24px) e a Telemont é um ícone quadrado gigante
   (512x512) que tomava o slot inteiro. Trava todo mundo na mesma altura pra
   ficar visualmente do mesmo tamanho na faixa, sem esticar largura. */
.factory-section .factory-icon img {
  height: 48px !important;
  width: auto !important;
  max-width: 170px !important;
  object-fit: contain;
}

/* Selo "5 Áreas de Atuação" sobre a foto em empresa.html -- reto no
   template, arredonda o canto que fica por cima da foto (os outros já
   encostam na borda da própria foto, que é arredondada). */
.year-box.about-year-box {
  border-radius: 16px;
  overflow: hidden;
}

/* Equipe / Responsáveis Técnicos (empresa.html). Card do Rodrigo Almeida é
   de propósito mais apagado e com borda tracejada -- ainda não tem cargo
   nem bio, só reserva o lugar até preencher. */
.team-section {
  padding: 90px 0 100px;
}
.team-block {
  margin-bottom: 30px;
}
.team-inner {
  background: #fff;
  height: 100%;
  padding: 40px 30px;
  border-radius: 20px;
  border: 1px solid #e3ebf6;
  box-shadow: 0 16px 40px rgba(5, 34, 70, 0.12);
  text-align: center;
}
.team-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #1B4E8C;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  overflow: hidden;
}
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-name {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin-bottom: 6px;
}
.team-role {
  font-size: 14px;
  color: #1B4E8C;
  font-weight: 600;
  margin-bottom: 16px;
}
.team-bio {
  font-size: 14px;
  line-height: 1.75em;
  color: #555;
  text-align: left;
}

.team-block-empty .team-inner {
  border: 2px dashed #cddcee;
  box-shadow: none;
  background: #fbfcfe;
}
.team-block-empty .team-avatar {
  background: #e3ebf6;
  color: #9aa9c2;
  font-size: 28px;
}
.team-block-empty .team-role,
.team-block-empty .team-bio-placeholder {
  color: #9aa9c2;
  font-style: italic;
  text-align: center;
}

/* Profissionais e Normas (empresa.html) -- duas listas lado a lado: os
   cargos próprios da empresa e as NRs atendidas por eles em conjunto (não é
   1-pra-1 por card, várias funções cobrem a mesma norma). */
.roles-section {
  padding: 90px 0 100px;
  background: #f5f8fc;
}
.roles-list-box {
  background: #fff;
  height: 100%;
  padding: 40px 35px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(5, 34, 70, 0.1);
}
.roles-list-title {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin-bottom: 20px;
}
.roles-list li {
  color: #444;
}
.role-nr {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.role-nr-cloud {
  align-content: flex-start;
  height: calc(100% - 44px);
}
.nr-badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  background: #1B4E8C;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Mini galeria de fotos da pagina de servico */
.servicos-mini-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.servicos-mini-galeria a {
    display: block;
    border-radius: 8px;
    overflow: hidden;
}
.servicos-mini-galeria img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
}
.servicos-mini-galeria a:hover img {
    transform: scale(1.06);
}

/* Bloco de video da pagina de servico.
 *
 * Os videos sao verticais (9:16, gravados em celular). Sozinho numa coluna de
 * 688px, um player de 280px deixava dois tercos da largura em branco e o video
 * parecia sobra de pagina. Aqui ele vira um painel navy: video a esquerda,
 * texto a direita ocupando o resto — o formato vertical passa a ser proposital
 * em vez de acidente.
 */
.servicos-video-bloco {
    display: flex;
    gap: 26px;
    align-items: stretch;
    background: linear-gradient(120deg, #0a1f42 0%, #123566 100%);
    border-radius: 14px;
    padding: 26px;
    margin: 40px 0 0;
}

/* O vídeo roda como GIF: sem barra de player, em laço e sem som. A moldura
 * existe para poder pôr o botão de pausa por cima — <video> não aceita
 * pseudo-elemento. */
.servicos-video-moldura {
    position: relative;
    flex: 0 0 280px;
    width: 280px;
    line-height: 0;
}

.servicos-video-destaque {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Sem barra de controle não haveria como parar a animação, e conteúdo em
 * movimento acima de 5s precisa de uma saída (WCAG 2.2.2). Este botão cobre o
 * vídeo inteiro: clicar ou dar Enter pausa. Fica invisível enquanto toca, para
 * não estragar o efeito de GIF. */
.servicos-video-toque {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.servicos-video-toque:focus-visible {
    outline: 3px solid #7fb0ea;
    outline-offset: 3px;
}

.servicos-video-toque::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: -16px 0 0 -10px;
    border-style: solid;
    border-width: 16px 0 16px 26px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
    opacity: 0;
    transition: opacity 180ms ease;
}

.servicos-video-moldura.pausado .servicos-video-toque {
    background: rgba(4, 14, 45, 0.35);
}

.servicos-video-moldura.pausado .servicos-video-toque::after {
    opacity: 1;
}

.servicos-video-texto {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    color: #fff;
}

.servicos-video-etiqueta {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #7fb0ea;
    margin-bottom: 10px;
}

.servicos-video-texto h4 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
}

.servicos-video-texto p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.servicos-video-texto ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.servicos-video-texto li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.servicos-video-texto li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2e8cd0;
}

/* Abaixo disto o texto ao lado do video ficaria com menos de 230px de linha,
 * onde qualquer frase quebra em duas ou tres palavras por linha. */
@media (max-width: 767px) {
    .servicos-video-bloco {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px;
    }
    .servicos-video-moldura {
        flex: 0 0 auto;
        width: 100%;
        max-width: 280px;
    }
    .servicos-video-texto {
        align-self: stretch;
    }
}

/* Veu do hero.
 *
 * O template chegou com um veu chapado sobre a foto: preto a 50%, mais a
 * textura, mais navy a 44% — perto de 72% de escurecimento em toda a area. Com
 * foto de obra por baixo isso apagava a foto inteira, e o hero virava um bloco
 * azul escuro com texto.
 *
 * Aqui o veu vira diagonal: fecha onde o texto fica (esquerda) e abre pro lado
 * direito, onde esta o equipamento. O texto continua com contraste de sobra e a
 * foto volta a ser visivel — que e o ponto de ter foto no hero.
 *
 * Carrega depois do <style> inline das paginas, entao vale sem !important e sem
 * precisar editar as 84 paginas.
 */
.hero-global-overlay {
  background:
    linear-gradient(
      100deg,
      rgba(4, 14, 45, 0.88) 0%,
      rgba(4, 14, 45, 0.72) 30%,
      rgba(4, 14, 45, 0.40) 58%,
      rgba(4, 14, 45, 0.26) 100%
    ),
    linear-gradient(180deg, rgba(4, 14, 45, 0.10), rgba(4, 14, 45, 0.34)),
    url("/static/images/hero-textura-44-blue.png") center / cover no-repeat;
}

/* No celular o texto ocupa a largura toda, entao o veu volta a ser parelho —
 * uma diagonal deixaria o fim das linhas sobre a parte clara da foto. */
@media (max-width: 767px) {
  .hero-global-overlay {
    background:
      linear-gradient(180deg, rgba(4, 14, 45, 0.72), rgba(4, 14, 45, 0.82)),
      url("/static/images/hero-textura-44-blue.png") center / cover no-repeat;
  }
}

/* Faixa de diferenciais.
 *
 * O template cobre a foto de fundo com navy a 55%. Com a foto de obra tratada
 * por baixo — amarelo forte da moega, concreto claro — isso nao dava contraste
 * pro texto branco: as linhas da lista caiam em cima do equipamento.
 *
 * Aqui o veu fecha a esquerda, onde ficam titulo e lista, e afrouxa a direita,
 * onde entra a foto em card. A foto de fundo continua legivel e o texto passa a
 * ter contraste de sobra.
 */
.skill-section:before {
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    rgba(0, 22, 66, 0.90) 0%,
    rgba(0, 22, 66, 0.84) 42%,
    rgba(0, 22, 66, 0.62) 70%,
    rgba(0, 22, 66, 0.52) 100%
  );
}

@media (max-width: 991px) {
  .skill-section:before {
    background-image: linear-gradient(
      180deg,
      rgba(0, 22, 66, 0.88),
      rgba(0, 22, 66, 0.80)
    );
  }
}

/* Caixas de e-mail no rodapé.
 *
 * São quatro contas, cada uma lida por gente diferente. Sem o rótulo do assunto
 * em cima, o visitante escolhe pelo nome da conta e erra: "contato" e
 * "comercial" parecem a mesma coisa de fora. O rótulo é que faz a triagem
 * acontecer antes do e-mail sair.
 */
.footer-email {
  margin-bottom: 12px;
}
.footer-email__assunto {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 2px;
}
.footer-email a {
  word-break: break-word;
}

/* Foto do bloco "Sobre a Indústria" x faixa dos serviços.
 *
 * A coluna da foto é absoluta e termina 20px depois de a faixa navy dos
 * serviços começar. Como ela tinha z-index 1 e a faixa não tinha nenhum, a foto
 * era pintada por cima do carrossel. Aqui a ordem se inverte: a foto vai pro
 * fundo e a faixa passa a cobrir.
 */
.fluid-section-one {
  z-index: 0;
}
.services-section-two {
  position: relative;
  z-index: 2;
}

/* Faixa "Solicite um Orçamento".
 *
 * No template a faixa azul é o .inner-section, que vive dentro do
 * .auto-container — ou seja, ela para nos 1200px do miolo e ainda sobe 18px
 * por cima da faixa navy dos serviços. O resultado é um retângulo azul solto
 * no meio da tela, com faixa navy aparecendo dos dois lados.
 *
 * Aqui o azul passa para a própria <section>, que é largura total. O conteúdo
 * continua alinhado com o resto da página, porque quem o segura é o
 * .auto-container por dentro.
 */
.quote-section {
  background-color: #1B4E8C;
}
.quote-section .inner-section {
  background-color: transparent;
  margin-top: 0;
  padding: 48px 0;
}

/* Mesmo problema da faixa "Solicite um Orçamento" acima, em outra seção: o
   template dá 30px de margem dos dois lados pro fundo com a foto fixa
   (.skill-section), então ela para antes da borda do menu lateral — sobra
   uma tira branca ali, o card não "continua" até a linha das seções vizinhas
   (que são largura total). Zera a margem lateral pra alinhar com o resto. */
.skill-section {
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
   Hero e "Serviços Para Indústrias": sair da cara do template
   ==========================================================================
   Os dois blocos vinham idênticos ao site que serviu de modelo — mesma faixa
   branca diagonal atravessando a foto, mesma moldura em L no texto, mesma
   engrenagem gigante de fundo, mesmo card. Trocar a foto não resolvia: a
   assinatura visual estava na composição, não na imagem.
   ========================================================================== */

/* A faixa branca diagonal de 250px girada 34° é a marca registrada do
   template. Sai inteira. */
.hero-video-background:before {
  display: none;
}

/* A moldura em L (borda à esquerda + dois traços parciais) vira um filete
   vertical em degradê, na mesma linguagem dos títulos do resto do site. */
.box_banner {
  border-left: 0;
  padding: 6px 20px 6px 30px;
}
.box_banner::after {
  display: none;
}
.box_banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  height: auto;
  border-radius: 4px;
  background: linear-gradient(180deg, #1b4e8c 0%, rgba(27, 78, 140, 0) 100%);
}

/* No lugar dos três ícones genéricos do template (fábrica, robô, capacete),
   três selos com informação que é nossa e dá pra conferir. */
.icons-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: 22px;
}
.hero-selo {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .icons-box {
    margin: 18px 0 0;
  }
  .link-box.d-flex {
    flex-wrap: wrap;
  }
}

/* ---- Serviços Para Indústrias ---- */

/* A engrenagem de 400px atrás do título é do template. Fora. */
.services-section-two .inner-container .big-icon {
  display: none;
}

/* O template deixa 30px de respiro dos dois lados, o que faz a faixa navy
   parecer um bloco solto em cima do branco. Vira faixa de largura total,
   igual à do orçamento logo abaixo. */
.services-section-two {
  margin: 0;
  padding: 95px 0 70px;
}

/* Card de verdade no lugar do conteúdo solto sobre o navy: painel um tom
   acima do fundo, foto encaixada no topo e seta no rodapé. */
.services-section-two .services-block-two .inner-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease;
}
.services-section-two .services-block-two .inner-box:hover {
  transform: translateY(-6px);
  border-color: rgba(127, 176, 234, 0.5);
}
.services-section-two .services-block-two .image {
  border-radius: 0 !important;
  box-shadow: none;
  margin: 0;
}
.services-section-two .services-block-two .lower-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  background: transparent;
}
.services-section-two .services-block-two .lower-content h3 {
  margin-bottom: 10px;
}
.services-section-two .services-block-two .lower-content .text {
  flex: 1 1 auto;
  margin-bottom: 18px;
}

/* "Saiba Mais" sublinhado vira uma seta em pastilha, alinhada no rodapé do
   card — assim os três cards terminam na mesma linha mesmo com textos de
   tamanhos diferentes. */
.services-section-two .services-block-two .read-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  background: #2e8cd0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms ease;
}
.services-section-two .services-block-two .read-more:hover {
  background: #fff;
  color: #0a1f42;
}

/* Botão flutuante do WhatsApp.
 *
 * Vinha com quatro chamarizes empilhados: um badge "1" fingindo mensagem não
 * lida, um pulso infinito na sombra, uma onda infinita atrás do círculo e um
 * emoji no tooltip. O badge falso já saiu do HTML — fingir notificação pra
 * arrancar clique não combina com o resto do site. As duas animações infinitas
 * também vão: além de cansarem, movimento sem parada é problema de
 * acessibilidade (WCAG 2.2.2).
 *
 * Fica o verde do WhatsApp, que é o que faz o botão ser reconhecido de
 * relance, num círculo menor e com sombra parada.
 */
.whatsapp-button {
  width: 56px;
  height: 56px;
  background: #25D366;
  box-shadow: 0 6px 18px rgba(5, 34, 70, 0.28);
  animation: none;
}
.whatsapp-button::before {
  display: none;
}
.whatsapp-button:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(5, 34, 70, 0.34);
}
.whatsapp-button i {
  font-size: 28px;
}

/* Selo de mensagem no botão do WhatsApp.
 *
 * Vermelho com o número 1, como o badge de mensagem não lida do WhatsApp, a
 * pedido do cliente. Decisão de marketing dele: o número sugere uma mensagem
 * esperando, o que puxa o clique. Fica registrado que não há mensagem nenhuma
 * do outro lado — quem clicar cai numa conversa vazia.
 */
.whatsapp-badge {
  top: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  background: #ff3b30;
  border: 2px solid #fff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.5);
}

/* O "Saiba Mais" dos cards virou pastilha; o sublinhado do template continuava
   aparecendo dentro dela. */
.services-section-two .services-block-two .read-more,
.services-section-two .services-block-two .read-more:hover {
  border-bottom: 0;
  text-decoration: none;
}

/* O sublinhado do "Saiba Mais" vem de uma regra mais específica do template
   (.services-block-two .lower-content .read-more). Dentro da pastilha ele fica
   sobrando, então precisa do mesmo nível de especificidade pra sair. */
.services-section-two .services-block-two .lower-content .read-more,
.services-section-two .services-block-two .lower-content .read-more:hover,
.services-section-two .services-block-two .lower-content .read-more:focus {
  text-decoration: none;
}

/* ==========================================================================
   Ícones próprios no lugar da família do template
   ==========================================================================
   O template desenha os ícones com uma fonte de glifos (Flaticon). São eles
   que davam o ar de "template industrial genérico": engrenagem cheia, troféu,
   operário de desenho. Aqui cada um vira um SVG traçado, no mesmo peso de
   linha, com a mesma leitura em qualquer tamanho.

   A troca é só de CSS: o `content` do glifo é anulado e o desenho entra como
   máscara, pintada por `currentColor`. Assim as 96 páginas continuam com o
   mesmo HTML e os ícones seguem herdando cor e tamanho de onde estão.

   O FontAwesome (setas, redes sociais, telefone) fica como está: seta é seta
   em qualquer família, trocar não muda a cara do site.
   ========================================================================== */

.flaticon-helmet,
.flaticon-worker-1,
.flaticon-manufacturing,
.flaticon-settings-1,
.flaticon-settings-4,
.flaticon-trophy,
.flaticon-next,
.flaticon-right-quotation-sign {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.flaticon-helmet:before,
.flaticon-worker-1:before,
.flaticon-manufacturing:before,
.flaticon-settings-1:before,
.flaticon-settings-4:before,
.flaticon-trophy:before,
.flaticon-next:before,
.flaticon-right-quotation-sign:before {
  content: none !important;
}

/* Capacete — "Compromisso com Segurança" e "Compliance & Segurança". */
.flaticon-helmet {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 17.5h18.4'/%3E%3Cpath d='M5 17.5v-2.3a7 7 0 0 1 14 0v2.3'/%3E%3Cpath d='M10 5.4V3.7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 17.5h18.4'/%3E%3Cpath d='M5 17.5v-2.3a7 7 0 0 1 14 0v2.3'/%3E%3Cpath d='M10 5.4V3.7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.7'/%3E%3C/svg%3E");
}

/* Cliente atendido — "Clientes Recorrentes". Pessoa com visto, em vez do
   operário de desenho do template. */
.flaticon-worker-1 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='7.8' r='3.6'/%3E%3Cpath d='M3.4 19.4a6.1 6.1 0 0 1 12.2 0'/%3E%3Cpath d='M16.2 13.1l2.1 2.1 3.4-3.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='7.8' r='3.6'/%3E%3Cpath d='M3.4 19.4a6.1 6.1 0 0 1 12.2 0'/%3E%3Cpath d='M16.2 13.1l2.1 2.1 3.4-3.4'/%3E%3C/svg%3E");
}

/* Projeto entregue — "Projetos Concluídos". Prancha de projeto com visto. */
.flaticon-manufacturing {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.4h8.6l5 5V20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4.4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M13.4 3.4v5.2h5.2'/%3E%3Cpath d='M8 15.2l2.3 2.3 4.4-4.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.4h8.6l5 5V20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4.4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M13.4 3.4v5.2h5.2'/%3E%3Cpath d='M8 15.2l2.3 2.3 4.4-4.4'/%3E%3C/svg%3E");
}

/* Engrenagem traçada — "Áreas de Atuação" e "Desenvolvimento Contínuo". */
.flaticon-settings-1 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.3'/%3E%3Cpath d='M12 2.6v2.4M12 19v2.4M21.4 12H19M5 12H2.6M18.6 5.4l-1.7 1.7M7.1 16.9l-1.7 1.7M18.6 18.6l-1.7-1.7M7.1 7.1L5.4 5.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.3'/%3E%3Cpath d='M12 2.6v2.4M12 19v2.4M21.4 12H19M5 12H2.6M18.6 5.4l-1.7 1.7M7.1 16.9l-1.7 1.7M18.6 18.6l-1.7-1.7M7.1 7.1L5.4 5.4'/%3E%3C/svg%3E");
}

/* Balão de conversa — o card "Deseja um orçamento para esta solução?" nas
   páginas de serviço. Era uma engrenagem, que não dizia nada sobre falar com
   alguém. */
.flaticon-settings-4 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 11.9a7.6 7.6 0 0 1-11 6.8l-5.2 1.5 1.5-5.1A7.6 7.6 0 1 1 20.6 11.9z'/%3E%3Cpath d='M8.8 11.9h.01M12 11.9h.01M15.2 11.9h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 11.9a7.6 7.6 0 0 1-11 6.8l-5.2 1.5 1.5-5.1A7.6 7.6 0 1 1 20.6 11.9z'/%3E%3Cpath d='M8.8 11.9h.01M12 11.9h.01M15.2 11.9h.01'/%3E%3C/svg%3E");
}

/* Selo — "Garantia de Padrão". Troféu vira selo de conformidade, que é o que
   uma política de qualidade promete de fato. */
.flaticon-trophy {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.2' r='5.6'/%3E%3Cpath d='M9.6 13.8L8.4 21.4 12 19.4l3.6 2-1.2-7.6'/%3E%3Cpath d='M9.9 9.2l1.5 1.5 2.7-2.7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.2' r='5.6'/%3E%3Cpath d='M9.6 13.8L8.4 21.4 12 19.4l3.6 2-1.2-7.6'/%3E%3Cpath d='M9.9 9.2l1.5 1.5 2.7-2.7'/%3E%3C/svg%3E");
}

/* Seta do "Saiba Mais". */
.flaticon-next {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5l7.5 7.5L9 19.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5l7.5 7.5L9 19.5'/%3E%3C/svg%3E");
}

/* Aspas dos depoimentos (seção hoje desligada, fica pronta pra quando voltar). */
.flaticon-right-quotation-sign {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9.6 5.6C6.3 6.9 4.6 9.4 4.6 13v5.4h6.1v-6.1H7.4c0-1.9.8-3.2 2.2-4.1zM21.2 5.6c-3.3 1.3-5 3.8-5 7.4v5.4h6.1v-6.1H19c0-1.9.8-3.2 2.2-4.1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9.6 5.6C6.3 6.9 4.6 9.4 4.6 13v5.4h6.1v-6.1H7.4c0-1.9.8-3.2 2.2-4.1zM21.2 5.6c-3.3 1.3-5 3.8-5 7.4v5.4h6.1v-6.1H19c0-1.9.8-3.2 2.2-4.1z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Ficha técnica no lugar dos contadores
   ==========================================================================
   Substitui "5+ Áreas de Atuação / 280+ Clientes Atendidos / 1086+ Projetos
   Realizados" (home) e "85% Clientes Recorrentes / 100% Compromisso com
   Segurança" (empresa) — números do site que serviu de modelo, sem fonte e,
   nos dois percentuais, sem denominador possível de existir. No lugar: quem
   assina tecnicamente e o que acompanha cada obra — informação real e
   conferível, que é o que decide uma compra industrial.
   ========================================================================== */

/* ---- versão compacta, dentro do bloco "Quem Somos" da home ---- */
.trust-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #e5ebf3;
}
.trust-mini__group {
  flex: 1 1 220px;
  min-width: 200px;
}
.trust-mini__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8092a8;
  margin-bottom: 10px;
}
.trust-mini__team,
.trust-mini__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-mini__team li {
  font-size: 14px;
  line-height: 1.5;
  color: #444;
  margin-bottom: 7px;
}
.trust-mini__team strong {
  color: #0a1f42;
}
.trust-mini__checklist li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: #444;
  margin-bottom: 7px;
}
.trust-mini__checklist li .icon {
  position: absolute;
  left: 0;
  top: 3px;
  color: #2e8cd0;
  font-size: 13px;
}

/* ---- versão de seção inteira, no fim de empresa.html ---- */
.trust-section {
  padding: 90px 0;
  background: linear-gradient(120deg, #0a1f42 0%, #123566 100%);
}
.trust-section .sec-title .title {
  color: #7fb0ea;
}
.trust-section .sec-title h2 {
  color: #fff;
}
.trust-panel {
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 34px 32px;
}
.trust-panel__title {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 22px;
}
.trust-panel__team {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-panel__team li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.trust-panel__team li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.trust-panel__name {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.trust-panel__role {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  margin-top: 3px;
}
.trust-panel__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-panel__checklist li {
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.trust-panel__checklist li:last-child {
  margin-bottom: 0;
}
.trust-panel__checklist li .icon {
  position: absolute;
  left: 0;
  top: 2px;
  color: #2e8cd0;
  font-size: 15px;
}

@media (max-width: 767px) {
  .trust-mini {
    gap: 22px;
  }
  .trust-panel {
    margin-bottom: 26px;
  }
}

/* Entrada do hero mais rápida.
 *
 * O template revela o título, o texto e os botões em sequência, cada um só
 * começando a animar depois de um atraso próprio: h2 a partir de 0,35s, o
 * texto a partir de 0,55s, o botão a partir de 0,75s, os selos a partir de
 * 0,95s — cada animação levando quase 1s pra terminar. Resultado: quase 2
 * segundos entre a página abrir e o título ficar legível, o que lê como
 * lentidão de carregamento mesmo sem nenhum arquivo pendente.
 *
 * Aqui os atrasos e durações encolhem mantendo o mesmo escalonamento (cada
 * elemento ainda entra ~0,1s depois do anterior) — a sequência continua
 * existindo, só não demora pra terminar.
 */
.main-slider-owl .hero-slide.is-active h2 {
  animation: heroInDown 0.6s ease-out 0.05s forwards;
}
.main-slider-owl .hero-slide.is-active .text {
  animation: heroInDown 0.6s ease-out 0.15s forwards;
}
.main-slider-owl .hero-slide.is-active .link-box {
  animation: heroInUp 0.6s ease-out 0.25s forwards;
}
.main-slider-owl .hero-slide.is-active .icons-box {
  animation: heroInUp 0.6s ease-out 0.35s forwards;
}

/* ==========================================================================
   Cabeçalho: tudo numa linha só + navegação sempre visível
   ==========================================================================
   Terceira rodada nesta área, e a mais estrutural: tagline, logo e contato
   (telefone com ícone, e-mail, bandeiras) viram UMA linha só — não duas
   empilhadas — com a logo no centro e o contato encostado na borda direita.
   Os ícones do telefone e das bandeiras voltam (imagem de bandeira mesmo,
   não sigla em texto): decisão do cliente, mantém.

   A mudança maior é a navegação. Ela deixa de ser painel-que-abre-com-clique
   e vira coluna permanente à esquerda de toda página — em telas largas. O
   `.mobile-nav-sidebar`, que era 100% off-canvas (fora da tela até alguém
   clicar), agora tem dois estados bem separados por `@media`:

     ≥ 992px  — sempre aberto (`left: 0` fixo, sem depender de
                `body.mobile-nav-open`), ocupa uma faixa permanente à
                esquerda. Não tem hamburguer porque não tem o que abrir. O
                resto da página (cabeçalho, hero, cada seção, rodapé) precisa
                abrir espaço pra essa faixa — ver o bloco "conteúdo desloca"
                mais abaixo.

     < 992px  — continua off-canvas, com hamburguer, overlay escuro e botão
                de fechar, exatamente como antes desta rodada. Não é escolha
                estética: uma coluna de 300px fixa não cabe ao lado de
                conteúdo legível numa tela de celular — sobraria menos de
                100px pra tudo mais. Sem um jeito de abrir o menu ali, a
                navegação simplesmente não existiria no celular. Se a ideia
                for repensar como isso aparece no celular também, é conversa
                separada — aqui ficou provisoriamente como estava.
   ========================================================================== */

/* Sinal navy no topo do cabeçalho inteiro. */
.main-header {
  border-top: 3px solid #052246;
}

.main-header .header-upper {
  background: #ffffff;
  border-bottom: 1px solid #eef1f6;
}

/* Grid de uma linha só: tagline | logo | contato. `grid-row: 1` em todo
 * mundo não é enfeite — sem ele o auto-posicionamento do CSS Grid pode jogar
 * um item pra uma segunda linha implícita dependendo da ordem de
 * processamento (já aconteceu aqui antes, com o hamburguer). Forçar a linha
 * resolve de vez. */
.header-upper .auto-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
}
.header-top-left,
.logo-outer,
.header-top-right {
  grid-row: 1;
}
.header-top-left {
  grid-column: 1;
  justify-self: start;
}
.logo-outer {
  grid-column: 2;
  justify-self: center;
  float: none;
  text-align: center;
}
.header-top-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-top-left .text {
  color: #64748b;
  font-size: 12.5px;
  font-weight: 400;
}

.header-top-right .info-list {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-top-right .info-list li a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: #0a1f42;
  font-weight: 700;
  font-size: 13.5px;
}
.header-top-right .info-list li:last-child a {
  color: #64748b;
  font-weight: 400;
}
.header-top-right .info-list li a:hover .txt {
  color: #2e8cd0;
}
.header-top-right .info-list li .icon {
  margin-right: 7px;
  color: inherit;
  font-size: 12px;
}

/* O template dá 25px de bandeira com 30px de margem à esquerda — pensado
   pra uma faixa alta e isolada, não pra uma linha compacta ao lado da logo.
   Encolhe pra caber sem desequilibrar a altura da linha. */
.header-top-right .language-selector {
  margin-left: 0;
  padding: 0;
  gap: 8px;
}
.header-top-right .flag-icon {
  width: 20px;
}

/* Sticky header (aparece ao rolar a página): só a logo, sem o resto — a
   faixa de contato já foi vista lá em cima, não precisa rolar junto. */
.sticky-header .auto-container {
  display: flex;
  justify-content: center;
}
.sticky-header .logo-outer {
  float: none;
}

/* ---- Painel de navegação ---- */

.mobile-nav-sidebar {
  background: #fff;
  overflow-y: auto;
}
.mobile-nav-sidebar .navigation {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-nav-sidebar .navigation li {
  margin-bottom: 5px;
  border-bottom: 1px solid #f9f9f9;
}
.mobile-nav-sidebar .navigation li a {
  display: block;
  padding: 12px 10px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  transition: all 0.3s;
}
.mobile-nav-sidebar .navigation li a:hover {
  color: #1b4e8c;
  padding-left: 15px;
}
.mobile-nav-sidebar .navigation li.dropdown > a::after {
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  float: right;
}
.mobile-nav-sidebar .dropdown ul {
  display: none;
  padding-left: 15px;
  background: #fdfdfd;
  list-style: none;
}
.mobile-nav-sidebar .dropdown.active ul {
  display: block;
}
.mobile-nav-sidebar .dropdown ul li a {
  font-size: 14px;
  font-weight: 400;
  color: #666;
}

/* Desktop: painel permanente + conteúdo deslocado. */
/* Fora do desktop o botão não tem função — o celular já tem seu próprio
   jeito de abrir/fechar o painel (o hambúrguer). Precisa vir ANTES do media
   query de desktop: mesma especificidade, quem decide é a ordem no
   arquivo — se viesse depois, ganharia dos dois e o botão sumiria também
   no desktop. */
.sidebar-toggle {
  display: none;
}

@media (min-width: 992px) {
  .navbar-toggler.mobile-nav-toggler,
  .mobile-nav-overlay,
  .mobile-nav-header {
    display: none !important;
  }
  .mobile-nav-sidebar {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    z-index: 500;
    box-shadow: 3px 0 16px rgba(5, 34, 70, 0.08);
    padding: 30px 20px 90px;
    transition: left 0.3s ease;
  }
  .mobile-nav-sidebar .mobile-nav-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .mobile-nav-sidebar .navigation {
    margin-top: 6px;
  }

  /* Redes sociais no topo do painel — onde antes ficava a logo (escondida
     no desktop, ver `.mobile-nav-header` acima). Sem isso o painel abria
     direto em "Home", sem nenhum respiro antes da navegação. */
  .mobile-nav-social-top {
    padding-bottom: 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eef1f6;
  }
  .mobile-nav-social-top .social-links {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mobile-nav-social-top .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f2f6fb;
    color: #1b4e8c;
    font-size: 13px;
    transition: background 0.25s, color 0.25s;
  }
  .mobile-nav-social-top .social-links a:hover {
    background: #1b4e8c;
    color: #fff;
  }

  /* O resto da página abre espaço pra faixa: elementos de posição normal
     (hero, seções, rodapé, e o próprio `.main-header` — que é
     `position: absolute` mas dentro de um `.page-wrapper` em fluxo normal,
     então a margem do body já o empurra junto) respondem à margem do body.
     Só o `.sticky-header` (cabeçalho fixo de rolagem, `position: fixed`
     direto na viewport, fora do fluxo) não é alcançado pela margem e
     precisa do ajuste manual — senão fica atrás da faixa lateral. */
  body {
    margin-left: 300px;
  }
  .sticky-header {
    left: 300px;
    width: calc(100% - 300px);
  }

  /* Botão de recolher: fica grudado na borda direita do painel, alinhado
     com a linha onde o cabeçalho termina e o banner começa — flutuando no
     meio da tela ele não se referenciava a nada e ficava esquisito.
     `html.sidebar-collapsed` (aplicada pelo clique, ver script logo após o
     painel no HTML, e lida de volta do localStorage por um script inline no
     <head> — antes do CSS pintar, pra não piscar o painel aberto e fechar
     em seguida) desliza tudo pra fora e devolve o espaço ao conteúdo. */
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 95px;
    left: 300px;
    width: 22px;
    height: 46px;
    border: none;
    border-radius: 0 6px 6px 0;
    background: #1b4e8c;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    z-index: 600;
    box-shadow: 2px 0 8px rgba(5, 34, 70, 0.15);
    transition: left 0.3s ease, background 0.25s;
  }
  .sidebar-toggle:hover {
    background: #2e8cd0;
  }
  .sidebar-toggle .fas {
    transition: transform 0.3s ease;
  }

  html.sidebar-collapsed .mobile-nav-sidebar {
    left: -300px;
  }
  html.sidebar-collapsed body {
    margin-left: 0;
  }
  html.sidebar-collapsed .sticky-header {
    left: 0;
    width: 100%;
  }
  html.sidebar-collapsed .sidebar-toggle {
    left: 0;
  }
  html.sidebar-collapsed .sidebar-toggle .fas {
    transform: rotate(180deg);
  }
}

/* Celular/tablet: painel continua off-canvas, com hamburguer. Mesmas regras
   de sempre, só que sem depender mais do `@media (max-width: 991px)` de
   news.css (essa folha carrega antes desta e perde no empate de
   especificidade onde os seletores batem). */
@media (max-width: 991px) {
  .navbar-toggler.mobile-nav-toggler {
    display: block !important;
    background: transparent !important;
    color: #1b4e8c !important;
    padding: 5px 10px !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 28px !important;
    outline: none !important;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  .navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
  }
  .header-upper {
    position: relative;
  }

  .mobile-nav-overlay,
  .mobile-nav-sidebar {
    display: block !important;
  }
  .mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
  }
  body.mobile-nav-open .mobile-nav-overlay {
    opacity: 1;
    visibility: visible;
  }
  .mobile-nav-sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    z-index: 10000;
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
    padding: 30px 20px;
  }
  body.mobile-nav-open .mobile-nav-sidebar {
    left: 0;
  }
  .mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
  }
  .mobile-nav-close {
    font-size: 24px;
    color: #333;
    cursor: pointer;
  }

  /* Nessa largura a linha do topo já não cabe tagline + logo + contato
     inteiro — a tagline sai primeiro (menos essencial), o e-mail depois; o
     telefone é o último a sumir, é o que mais importa num site cujo
     objetivo é gerar contato. */
  .header-top-left .text {
    display: none;
  }
  .header-top-right {
    gap: 10px;
  }
}
@media (max-width: 480px) {
  .header-top-right .info-list li:last-child {
    display: none;
  }
}