/* mobile.css */

/* 1) Remove scroll horizontal global */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  /* Anula qualquer largura fixa do container principal */
  .container-principal,
  .container {
    width: 100% !important;       /* ocupa 100% do viewport */
    max-width: none !important;    /* remove qualquer max-width */
    margin: 0 !important;          /* tira centralização via auto */
    padding: 0 !important;         /* remove espaçamentos internos */
    box-sizing: border-box !important;
  }
}
/* 2) Navbar fixa acima de tudo */
.main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 9999;
}
.main-navbar .container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}

/* 3) Div extra de imagem escondida por padrão */
.mobile-banner-image {
  display: none;
}

@media (max-width: 768px) {
  /* 4) Ícone hambúrguer */
  .mobile-menu-icon {
    display: block !important;
    padding: 16px !important;
    cursor: pointer !important;
    z-index: 10000 !important;
  }
  .burger-menu {
    width: 32px !important;
    height: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  .line-menu {
    width: 100% !important;
    height: 4px !important;
    background-color: #002f49 !important;
    border-radius: 2px !important;
    transition: transform 0.3s ease !important;
    transform-origin: center center !important;
  }

 /* 5) Overlay do menu suspenso */
.nav-itens ul {
  display: flex !important;
  position: fixed !important;
  top: 100px !important;
  left: 0 !important;
  width: 100% !important;
  max-height: 0 !important;          /* fechado por padrão */
  background: #ffffff !important;
  overflow: hidden !important;       /* esconde o conteúdo quando fechado */
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  z-index: 9998 !important;
  flex-direction: column !important;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}
.nav-itens.open ul {
  max-height: 60vh !important;       /* altura máxima ao abrir */
  overflow-y: auto !important;       /* permite scroll interno */
  opacity: 1 !important;
}


  /* 6) Itens do menu */
  .nav-itens ul li {
    margin: 0 !important;
  }
  .nav-itens ul li a {
    display: block !important;
    padding: 14px 20px !important;
    font-size: 1.1em !important;
    color: #002f49 !important;
    text-align: left !important;
    border-bottom: 1px solid #e0e0e0 !important;
    background: none !important;
  }

  /* 7) Transformação para o “X” */
  .nav-itens.open .first-line {
    transform: translateY(10px) rotate(45deg) !important;
  }
  .nav-itens.open .last-line {
    transform: translateY(-10px) rotate(-45deg) !important;
  }

  /* 8) Banner – imagem oculta, texto justificado */
  .logo-banner {
    display: none !important;
  }
  .banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 100px 0 20px !important;
    margin: 0 !important;
    width: 100vw !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .banner-text {
    order: 1 !important;
    width: calc(100% - 30px) !important;
    padding: 0 15px !important;
    text-align: justify !important;
    margin: 0 !important;
  }
  .gradient-text {
    font-size: 2em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.2em !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
  }
  .preto {
    font-size: 2em !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
  }
  .banner-text p {
    font-size: 1em !important;
    margin: 0.5em auto !important;
  }
  .banner button {
    font-size: 1.2em !important;
    padding: 12px 28px !important;
  }

  /* 9) Força o main-banner full-width */
  .main-banner {
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    background-attachment: scroll !important;
    z-index: 0 !important;
  }
  .main-banner .banner {
    margin: 0 !important;
    padding: 80px 15px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 10) Nova div de imagem */
  .mobile-banner-image {
    display: block !important;
    width: 100% !important;
    margin: 60px 0 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .mobile-banner-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 11) Seção serviços alinhada */
  .servicos {
    width: calc(100% - 30px) !important;
    margin: 0 auto 20px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  .servicos .text-servicos {
    text-align: justify !important;
  }
  .servicos .text-servicos h2 {
    margin-bottom: 8px !important;
    line-height: 1em !important;
    text-align: left !important;
  }
  .servicos .text-servicos p {
    margin: 0 0 16px !important;
  }

  /* 12) Cards empilhados */
  .cards-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .card-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .card-web,
  .card-manu,
  .card-mkt {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }
  .card-web h2,
  .card-manu h2,
  .card-mkt h2 {
    text-align: center !important;
    margin-bottom: 12px !important;
  }
  .card-web p,
  .card-manu p,
  .card-mkt p {
    text-align: justify !important;
  }
  .card-web-image,
  .card-manu-image,
  .card-mkt-image {
    margin-top: 20px !important;
  }
  .card-web-image img,
  .card-manu-image img {
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* 13) Marketing Digital em coluna */
  .card-mkt {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .card-mkt .text-card-mkt {
    width: 100% !important;
  }
  .card-mkt .card-mkt-image {
    width: 100% !important;
    margin: 20px 0 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  .card-mkt .card-mkt-image img {
    width: 80% !important;
    max-width: 280px !important;
    height: auto !important;
  }

  /* 14) Centraliza botão do Marketing Digital */
  .card-mkt .cta {
    display: block !important;
    margin: 16px auto 0 !important;
  }

  /* 15) Ajustes para a seção Clientes no mobile */
  .clientes-container h2 {
    font-size: 1.7em !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  .clientes-container p {
    text-align: left !important;
    font-size: 0.8em !important;
    margin-bottom: 12px !important;
  }

  /* 16) Carrossel de exatamente 2 logos visíveis */
  .clientes-container .logos-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 0 !important;      /* tira espaçamento entre itens */
  padding: 0 !important;  /* remove padding lateral */
  margin: 0 !important;
  box-sizing: border-box !important;
}

.clientes-container .logos-grid img {
  flex: 0 0 50% !important;  /* cada logo ocupa metade da largura */
  width: 50% !important;
  scroll-snap-align: start !important;
}

/* opcional: esconder scrollbar */
.clientes-container .logos-grid::-webkit-scrollbar {
  display: none;
}
}


/* ----------------------------------------
   Modal Overlay
----------------------------------------- */
#modal-clientes {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
#modal-clientes.show {
  display: flex;
}

/* ----------------------------------------
   Modal Card
----------------------------------------- */
#modal-clientes .modal-card {
  position: relative;
  width: calc(100% - 40px);   /* margem de 20px em cada lado */
  max-width: 360px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  max-height: 90vh;           /* não ultrapassa 90% da altura da viewport */
}

/* Botão fechar */
#modal-clientes .modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: transparent;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  z-index: 10;
  color: #fff;
}

/* ----------------------------------------
   Conteúdo Interno (empilhado)
----------------------------------------- */
#modal-clientes .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ----------------------------------------
   Área de Imagem (Slider)
----------------------------------------- */
#modal-clientes .image-modal {
  position: relative;
  width: 100%;
  padding-top: 45%;           /* ajustado para sobrar espaço para o texto */
  overflow: hidden;
}
#modal-clientes .image-modal .slides-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
#modal-clientes .image-modal .slides-container img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
#modal-clientes .image-modal .slides-container img.active {
  display: block;
}

/* Setas */
#modal-clientes .image-modal .slide-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 50%;
  font-size: 1.2em;
  cursor: pointer;
  z-index: 10;
}
#modal-clientes .image-modal .prev-slide { left: 12px; }
#modal-clientes .image-modal .next-slide { right: 12px; }

/* Bullets */
#modal-clientes .image-modal .dots-container {
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  z-index: 10;
}
#modal-clientes .image-modal .dots-container span {
  display: inline-block;
  width: 8px; height: 8px;
  margin: 0 4px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
}
#modal-clientes .image-modal .dots-container span.active {
  opacity: 1;
}

/* ----------------------------------------
   Área de Comentários (Info)
----------------------------------------- */
#modal-clientes .coments-modal {
  padding: 16px;
  background: #fff;
  flex-grow: 1;             /* ocupa o que sobra abaixo da imagem */
  overflow-y: auto;         /* scroll interno, se necessário */
}
#modal-clientes .coments-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
#modal-clientes .coments-modal .modal-title img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
#modal-clientes .coments-modal .modal-title h3 {
  margin: 0;
  font-size: 1.1em;
  line-height: 1.2;
}
#modal-clientes .coments-modal .modal-texto,
#modal-clientes .coments-modal .modal-btn {
  display: block;           /* mostra descrição e botão */
  margin-top: 8px;
}
#modal-clientes .coments-modal .modal-btn {
  padding: 10px 16px;
  background: #002f49;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* ----------------------------------------
   Ajustes Mobile (≤768px)
----------------------------------------- */
@media (max-width: 768px) {
  /* mantém proporção da imagem */
  #modal-clientes .image-modal {
    padding-top: 45%;
  }
  /* aumenta logo e nome */
  #modal-clientes .coments-modal .modal-title img {
    width: 48px;
    height: 48px;
  }
  #modal-clientes .coments-modal .modal-title h3 {
    font-size: 1.3em;
  }
}


/* ==============================
   Full-bleed da imagem na seção “Sobre”
   ============================== */
.sobre .superior {
  overflow-x: hidden;        /* evita scroll lateral */
  padding: 0;                /* remove qualquer padding que atrapalhe */
}

/* Ajuste da div de imagem da seção “Sobre” */
.sobre .superior .imagens {
    position: relative;
    width: 100% !important;                     /* ocupa toda a viewport */
    margin-left: calc(50% - 50vw) !important;      /* centraliza o full-bleed */
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    margin-top: 50px;
  }

.sobre .superior .imagens img {
  max-width: 80%;               /* diminui a largura para 80% da tela */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;               /* garante centralização */
  object-fit: contain;          /* mantém proporção sem cortar */
}





/* ==========================
   Onda de transição
   ========================== */
.onda-divisoria {
  position: relative;
  width: 100vw;          /* força full width */
  left: 50%;
  margin-left: -50vw;    /* centraliza horizontalmente */
  overflow: hidden;
  line-height: 0;        /* remove gaps em alguns browsers */
}

.onda-divisoria svg {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(1px);
}

/* se estiver usando .inferior após a onda */
.inferior {
  position: relative;
  z-index: 1;            /* para aparecer acima da onda */
  padding-top: 0;        /* tira espaçamento extra */
  margin-top: -1px;
}


.triangulo-transicao2 {
    clip-path: polygon(100% 100%, 100% 0, 0 100%) !important;
}

.inferior .conteudo-inferior {
  padding-left: 5px ;    /* espaçamento interno */
  padding-right: 5px ;    /* espaçamento interno */
  box-sizing: border-box; /* inclui padding no cálculo de largura */
}

.inferior .conteudo-inferior .text-bloco p {
  text-align: justify;
}

.inferior .conteudo-inferior .text-bloco img {
  max-width: 30%;
}

/* Diminui espaço entre ícone e texto nas cards de Missão/Visão/Valores */
.inferior .conteudo-inferior .bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;           /* ajusta a distância vertical para 8px */
}

.inferior .conteudo-inferior .bloco .text-bloco h3 {
  margin-top: 0;      /* remove margem extra acima do título */
}


@media (max-width: 768px) {
  /* Torna todos os campos de formulário (incluindo textarea) 100% do container pai */
  #contato-form .form-control,
  #contato-form textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Opcional: garanta que a altura seja suficiente mas não ultrapasse */
  #contato-form textarea {
    min-height: 100px;   /* ajuste conforme necessário */
    resize: vertical;    /* permite só redimensionamento vertical, se quiser */
  }
}

@media (max-width: 768px) {
  /* Diminui a fonte de todos os inputs e textareas */
  #contato-form .form-control,
  #contato-form textarea {
    font-size: 0.9em !important;   /* ajuste para o tamanho que preferir */
  }
}