:root {
  --azul: #003366;
  --verde: #28a745;
  --branco: #ffffff;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* ============================================================
   BASE GLOBAL
============================================================ */
* {

  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  background-color: #fff;
  overflow-x: hidden !important;
}

html {
  overflow-x: hidden !important;
}


section {
  scroll-margin-top: 20px;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   NAVBAR
============================================================ */
.navbar {
  background: var(--azul);
}

.navbar .nav-link,
.navbar .navbar-brand {
  color: var(--branco) !important;
  font-weight: 600;
}

.navbar-brand img {
  height: 45px;
  width: auto;
  border-radius: 5px;
  transition: transform .3s ease, filter 0.3s ease;
  transform: none; /* remove escala fixa que causava overflow */
  filter: brightness(1.6) contrast(1.1);
}

.navbar-brand img:hover {
  transform: scale(1.05);
}

/* ============================================================
   NAVBAR COM DOIS LOGOS (ESQUERDA E DIREITA)
============================================================ */
.navbar {
  background: var(--azul);
  padding: 0.6rem 1rem;
}

.navbar-brand img {
  height: 45px;
  width: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: brightness(1.5) contrast(1.1);
  transform: none;
}

.logo-principal:hover,
.logo-secundario:hover {
  transform: scale(1.05);
}

/* Logo secundário (direita) */
.logo-secundario {
  height: 38px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.logo-secundario:hover {
  opacity: 1;
}

/* Garanta que o logo direito fique na frente em desktops */
.logo-secundario {
  z-index: 3;
}

/* Centraliza os links no desktop */
.navbar-nav {
  display: flex;
  gap: 1.5rem;
}

.navbar .nav-link {
  color: var(--branco) !important;
  font-weight: 600;
  transition: color 0.3s ease;
}

.navbar .nav-link:hover {
  color: var(--verde) !important;
}

/* ============================================================
   RESPONSIVO
============================================================ */
/* No mobile, oculta o logo da direita e deixa o menu padrão */
@media (max-width: 992px) {
  .logo-secundario {
    display: none;
  }

  .navbar-nav {
    text-align: center;
    gap: 0.5rem;
  }

  .navbar-collapse {
    justify-content: center;
  }
}

/* Nota: removida centralização do toggler para usar comportamento padrão do Bootstrap */


/* ============================================================
   HERO (Vídeo de fundo)
============================================================ */
 .hero {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

 .hero-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.hero-video-overlay {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

.hero-video-overlay h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.3;
  font-weight: 700;
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   SLOGAN
============================================================ */
/* ============================================================
   SLOGAN (COM FUNDO DE TEXTO)
============================================================ */
#slogan-principal {
  background-color: #f8f9fa;

  /* --- INÍCIO DO NOVO CÓDIGO --- */
  
  /* 1. Aqui criamos um SVG com seu texto */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='300' viewBox='0 0 500 300'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Oswald, sans-serif' font-size='90' font-weight='700' fill='rgba(0,0,0,0.03)'%3EGRUPO VL%3C/text%3E%3C/svg%3E");
  
  /* 2. Definimos que ele deve repetir */
  background-repeat: repeat;
  
  /* 3. (Opcional) Garante que o conteúdo fique por cima */
  position: relative; 
  
  /* --- FIM DO NOVO CÓDIGO --- */
}

.text-green {
  color: var(--verde);
}

.space-text {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#slogan-principal b {
  font-weight: 700;
}
/* ============================================================

/* ============================================================
   SEÇÕES DE SERVIÇOS (COM IMAGENS DE FUNDO)
============================================================ */

/* Estilos de fundo Comuns */
#secao-seguranca,
#secao-controle,
#secao-conectividade,
#secao-tecnologia {
    /* Manter estilos comuns como attachment, etc. */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* Ajustado para cobrir a seção toda */
    background-attachment: fixed;
    position: relative; /* Para o overlay */
    
}

   
/* ============================================================
   SERVIÇOS (FULL WIDTH + COMPATÍVEL COM iOS + EFEITOS RESTAURADOS)
============================================================ */
.servicos-interativos {
  width: 100%;
  margin: 0;
  padding: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden ;
}

.servico-item {
  position: relative;
  display: block;
  width: 100%; /* use 100% (avoid 100vw which causa overflow horizontal) */
  height: 140px;

  border-radius: 1;
  text-decoration: none;
  isolation: isolate;
  background-color: #000;
  transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
  
}

/* Fundo via pseudo-elemento (corrige iOS) */
.servico-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: translateZ(0);
  
}

/* Imagens */
#item-seguranca::before {
  background-image: url('img/bg-monitoramento.jpg');
}
#item-controle::before {
  background-image: url('img/bg-conectividade.jpg');
}
#item-conectividade::before {
  background-image: url('img/bg-energia.jpg');
}
#item-tecnologia::before {
  background-image: url('img/bg-comunicacao.jpg');
}

/* Overlay */
.servico-item-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 1;
  transition: background-color 0.3s ease;
}

/* Conteúdo */
.servico-item-conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 3rem;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Texto “+ Segurança” */
.servico-item-texto {
  font-size: 2.3rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--branco);
  transition: all 0.3s ease;
  text-shadow: 0 0 6px rgba(0,0,0,0.4);
}

/* Ícone */
.servico-item-img {
  width: 120px;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.4s ease;
    border-radius: 10px; /* 👈 novo arredondamento */
  overflow: hidden; /* evita vazamento se tiver fundo transparente */
}

/* ============================================================
   HOVER (DESKTOP)
============================================================ */
@media (hover: hover) {
  .servicos-interativos .servico-item:hover .servico-item-overlay {
    background-color: rgba(0, 0, 0, 0.25);
  }

  .servicos-interativos .servico-item:hover .servico-item-texto {
    color: var(--branco);
    -webkit-text-stroke: 0;
  }

  .servicos-interativos .servico-item:hover .servico-item-img {
    opacity: 1;
    transform: scale(1);
  }

  /* Efeito blur e fade nos outros blocos */
  .servicos-interativos:hover .servico-item {
    filter: blur(3px) brightness(0.8);
    opacity: 0.7;
  }

  .servicos-interativos:hover .servico-item:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.02);
    z-index: 3;
  }
}

/* ============================================================
   CLIENTES, DEPOIMENTOS, VÍDEO
============================================================ */
.clientes img {
  height: 80px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: .3s;
  max-width: 100%;
}

.clientes img:hover {
  filter: grayscale(0%);
}

.clientSwiper {
  padding: 30px 0;
  width: 100%;
  overflow: hidden;
}

.clientSwiper .swiper-wrapper {
  align-items: center;
}

.clientSwiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  width: 100%;
}

.clientSwiper .swiper-slide img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  transition: filter 0.3s ease;
  object-fit: contain;
}

/* Tamanhos maiores para desktop */
@media (min-width: 768px) {
  .clientSwiper .swiper-slide {
    height: 300px;
    max-width: 450px;
  }
  
  .clientSwiper .swiper-slide img {
    filter: grayscale(100%);
  }
  
  .clientSwiper .swiper-slide img:hover {
    filter: grayscale(0%);
  }
}

.video-section iframe {
  width: 100%;
  height: 500px;
  border: none;
}

/* ============================================================
   WHATSAPP FIXO + FOOTER
============================================================ */
.whatsapp-float {
  
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
 
  
}

.whatsapp-float a {
  background: #25d366;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  transition: .3s;
  text-decoration: none;
  
}

/* .fab{  <-- REMOVIDO */
/* overflow: hidden; */
/* } */

.whatsapp-float a:hover {
  transform: scale(1.1);
  
}

footer {
  background: var(--azul);
  color: var(--branco);
  padding: 3rem 0;
  text-align: center;
}

/* ============================================================
   RESPONSIVIDADE MOBILE (HORIZONTAL EM TODOS)
============================================================ */
@media (max-width: 768px) {
  .hero {
    height: 100vh;
    align-items: center;
  }

  .hero-video-overlay h1 {
    font-size: 1.8rem;
  }

  .navbar-brand img {
    transform: scale(1);
    height: 38px;
    filter: brightness(1.4) contrast(1.1);
  }

  .servico-item {
    height: 140px;
  }

  .servico-item-conteudo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 1rem 2rem;
  }

  .servico-item-texto {
    font-size: 1.8rem;
    color: var(--branco);
    -webkit-text-stroke: 0;
  }

  .servico-item-img {
    opacity: 1;
    width: 80px;
    margin-top: 0;
    transform: scale(1);
  }

  /* desativa blur no toque */
  .servicos-interativos:hover .servico-item {
    filter: none !important;
    opacity: 1 !important;
  }

  .video-section iframe {
    height: 300px;
  }
}

/* ============================================================
   AJUSTES EXTRAS PARA SAFARI / iOS
============================================================ */
@supports (-webkit-touch-callout: none) {
  .servico-item {
    background-attachment: scroll;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .servico-item-texto {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  }

  .servico-item-conteudo {
    display: -webkit-box !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-pack: justify !important;
    -webkit-box-align: center !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  @media (max-width: 768px) {
    .servico-item-conteudo {
      display: -webkit-box !important;
      -webkit-box-orient: horizontal !important;
      -webkit-box-pack: justify !important;
      -webkit-box-align: center !important;
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: center !important;
      text-align: left !important;
    }

    .servico-item-img {
      margin-top: 0 !important;
    }
  }
}

/* ============================================================
   MOSAICO DE SERVIÇOS (NOVO)
============================================================ */
.mosaico-container {
  margin-top: 3rem; /* Espaço após o texto da seção */
  
}

.mosaico-item img {
  width: 100%;
  height: 250px; /* Altura fixa para alinhamento */
  object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
}


/* .col-md-6 {  <-- REMOVIDO (quebrava o zoom) */
/* overflow: hidden; */
/* } */


/* .col-md-4 {  <-- REMOVIDO (quebrava o zoom) */
/* overflow: hidden; */
/* } */

.mosaico-item img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  
}

/* Ajuste de altura para mobile */
@media (max-width: 768px) {
  .mosaico-item img {
    height: 180px;
    
  }

  .mosaico-item {
    /* Garante que o AOS funcione em colunas mobile */
    width: 100%; 
  }
}

/* ============================================================
   WATERMARK PARA SEÇÕES DE SERVIÇO
============================================================ */

#secao-seguranca {
  /* 1. Cor de fundo (que removemos do HTML) */
  background-color: #fff;

  /* 2. Marca d'água com o texto "+ SEGURANÇA" e rotação */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Oswald, sans-serif' font-size='50' font-weight='700' fill='rgba(0,0,0,0.03)' transform='rotate(0)'%3E+SEGURANÇA%3C/text%3E%3C/svg%3E");
  
  /* 3. Definimos que ele deve repetir */
  background-repeat: repeat;
  
  /* 4. Garante que o conteúdo fique por cima */
  position: relative; 

  
}

#secao-controle {
  background-color: #f8f9fa; /* Cor de fundo original */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Oswald, sans-serif' font-size='50' font-weight='700' fill='rgba(0,0,0,0.03)' transform='rotate(0)'%3E+CONTROLE%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  position: relative; 
}

#secao-conectividade {
  background-color: #fff; /* Cor de fundo original */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Oswald, sans-serif' font-size='50' font-weight='700' fill='rgba(0,0,0,0.03)' transform='rotate(0)'%3E+CONECTIVIDADE%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  position: relative; 
}

#secao-tecnologia {
  background-color: #f8f9fa; /* Cor de fundo original */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Oswald, sans-serif' font-size='50' font-weight='700' fill='rgba(0,0,0,0.03)' transform='rotate(0)'%3E+TECNOLOGIA%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  position: relative; 
}

/* Navbar fixa com fundo inicial transparente */
#mainNavbar {
  background: transparent !important;
  transition: all 0.3s ease;
  padding: 1rem 0;
}

/* Garante que a navbar fique acima de vídeos/overlays em mobile/desktop */
#mainNavbar {
  z-index: 2000;
}

/* Garantias para o toggler: se o ícone SVG do Bootstrap não estiver visível,
   desenhamos um fallback simples (três barras brancas) */
.navbar-toggler {
  z-index: 2100;
  border: none;
}

.navbar-toggler .navbar-toggler-icon {
  background-image: none !important; /* remove possível ícone quebrado */
  width: 34px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after,
.navbar-toggler .navbar-toggler-icon span {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}
.navbar-toggler .navbar-toggler-icon::before { top: 0; }
.navbar-toggler .navbar-toggler-icon span { top: 50%; transform: translateY(-50%); }
.navbar-toggler .navbar-toggler-icon::after { bottom: 0; }

/* A barra do collapse deve aparecer sobre o conteúdo quando aberta */
.navbar-collapse {
  z-index: 2050;
}

#mainNavbar.navbar-scrolled {
  background: var(--azul) !important;
  padding: 0.5rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Logo principal */
.logo-principal {
  height: 50px;
  transition: height 0.3s ease;
}

#mainNavbar.navbar-scrolled .logo-principal {
  height: 40px;
}

/* Logo secundário */
.logo-secundario {
  height: 40px;
}

/* Ajuste no collapse mobile */
@media (max-width: 991px) {
  .navbar-collapse {
    background: var(--azul);
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0 0 10px 10px;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
  }
}

/* Evita overflow horizontal por AOS */
/* * {  <-- REMOVIDO (muito agressivo e desnecessário)
 * overflow-x: hidden;
 * }
 */

/* * .mosaico-container { <-- REMOVIDO (quebrava o zoom)
 * overflow: hidden;
 * }
 */

/* ============================================= */
/* SWIPER CAROUSEL - CORRIGIDO E FUNCIONAL */
/* ============================================= */

.swiper {
  width: 100% !important;
  padding: 20px 0;
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
}

.swiper-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 10px;
  transition: all 0.3s ease;
}

.swiper-slide img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.swiper-slide img:hover {
  filter: grayscale(0%);
}

/* PAGINAÇÃO (bolinhas) */
.swiper-pagination {
  position: relative !important;
  margin-top: 20px;
  bottom: auto !important;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
  opacity: 1;
  border-radius: 50%;
  margin: 0 6px;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: var(--verde);
  transform: scale(1.3);
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .swiper-slide img {
    max-height: 80px;
  }
}

/* ============================================= */
/* DEPOIMENTOS - CORRIGIR LAYOUT NO SWIPER */
/* ============================================= */

.mySwiper .swiper-slide {
  display: block !important; /* SOBRESCREVE o flex do Swiper */
  text-align: center;
  padding: 2rem 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  height: auto !important;
  margin: 0 auto;
  max-width: 90%;
}

.mySwiper .swiper-slide p {
  margin-bottom: 1rem !important;
  font-style: italic;
  color: #555;
  line-height: 1.6;
}

.mySwiper .swiper-slide strong {
  display: block;
  margin: 0.5rem 0;
  color: #003366;
  font-weight: 600;
}

.mySwiper .swiper-slide .text-warning {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 0.5rem;
}

.mySwiper .swiper-slide .text-warning i {
  font-size: 1.1rem;
  color: #ffc107;
}

/* Trabalhe Conosco - ajustes de formulário */
#trabalhe-conosco .form-control,
#trabalhe-conosco .form-select,
#trabalhe-conosco textarea {
  border-radius: 6px;
}

#trabalhe-conosco input[type="file"] {
  width: 100%;
}

#trabalhe-conosco .lead {
  color: #444;
}