/* ================= RESET GERAL ================= */
/* Remove margens e paddings padrão de todos os elementos */
* {
  margin: 0;          /* Remove margem externa */
  padding: 0;         /* Remove espaçamento interno */
  box-sizing: border-box; /* Inclui borda e padding no cálculo de largura/altura */
}

/* ================= ESTILO GLOBAL ================= */
body {
  font-family: 'Inter', sans-serif; /* Fonte principal usada em todo o site */
  background: #ffffff;              /* Cor de fundo da página */
  color: #333;                      /* Cor padrão do texto */
  line-height: 1.6;                 /* Altura da linha para melhor leitura */
}

img {
  max-width: 100%;   /* Evita que imagens ultrapassem o container */
  display: block;    /* Remove espaços estranhos abaixo das imagens */
}

/* ================= CONTAINER PADRÃO ================= */
.container {
  width: 100%;           /* Ocupa toda a largura disponível */
  max-width: 1200px;     /* Limita largura máxima para não esticar demais */
  margin: 0 auto;        /* Centraliza horizontalmente */
  padding: 0 20px;       /* Espaçamento interno lateral */
}

.center {
  text-align: center; /* Centraliza textos */
}

/* ================= HEADER / TOPO ================= */
html {
  scroll-behavior: smooth;
}
section, footer {
  scroll-margin-top: 90px;
}
.header {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 50%, #1e5f99 100%); /* Gradiente azul */
  height: 80px;              /* Altura fixa do header */
  display: flex;             /* Ativa flexbox */
  align-items: center;       /* Centraliza verticalmente */
}

.header-content {
  display: flex;                 /* Layout em linha */
  justify-content: space-between;/* Espaça logo e menu */
  align-items: center;           /* Alinha verticalmente */
}

.logo img {
  height: 50px;      /* controla o tamanho da logo */
  width: auto;
  display: block;
}


/* ================= MENU DE NAVEGAÇÃO ================= */
.nav a {
  color: #fff;                /* Cor do texto do menu */
  text-decoration: none;      /* Remove sublinhado */
  margin-left: 25px;          /* Espaço entre links */
  font-weight: 500;           /* Peso da fonte */
  padding: 8px 12px;          /* Espaçamento interno */
  border-radius: 6px;         /* Bordas arredondadas */
  transition: all 0.3s ease;  /* Animação suave */
}

.nav a:hover {
  background: rgba(255,255,255,0.2); /* Fundo claro no hover */
  color: #facc15;                    /* Dourado */
}

/* ================= HERO / BANNER ================= */

.hero {
  position: relative;               /* necessário para o overlay funcionar certo */
  min-height: 90vh;                 /* ocupa 70% da tela */
  display: flex;
  align-items: center;
  background: url('img/hero-desktop.jpg') center center / cover no-repeat;
}

@media (max-width: 768px) {
  .hero {
    min-height: 70vh;               /* tela cheia no celular */
    background: url('img/hero-mobile.jpg') center top / cover no-repeat;
  }
}

}

.hero-overlay {
  position: absolute;              /* Sobrepõe a imagem */
  inset: 0;                        /* Ocupa toda a área */
  background: rgba(0,0,0,0.45);    /* Escurece imagem */
}

.hero-content {
  position: relative;              /* Fica acima do overlay */
  color: #fff;                     /* Texto branco */
  max-width: 700px;                /* Limita largura do texto */
}

.hero h1 {
  font-size: 56px;                 /* Tamanho grande para destaque */
  margin-bottom: 20px;             /* Espaço abaixo */
  line-height: 1.1;                /* Aproxima linhas */
}

.hero p {
  font-size: 20px;                 /* Texto de apoio */
  color: #e5e7eb;      		   /* Cinza claro */
  margin-bottom: 30px;		   /* Espaço abaixo */
}

.hero-buttons {
  display: flex;   		/* Alinha botões lado a lado */
  gap: 15px;       		/* Espaço entre botões */
  flex-wrap: wrap; 		/* Quebra linha no mobile */
}

/* ================= BOTÕES ================= */
.btn {
  display: inline-block;   	/* Permite padding */
  padding: 14px 32px;      	/* Tamanho interno */
  border-radius: 8px;      	/* Bordas arredondadas */
  text-decoration: none;   	/* Remove sublinhado */
  font-weight: 600;        	/* Texto em negrito */
  transition: all 0.3s ease; 	/* Animação */
}

.btn.primary {
  background: #facc15; 		/* Fundo dourado */
  color: #000;        		/* Texto preto */
}

.btn.primary:hover {
  background: #eab308; 		/* Dourado mais escuro */
}

.btn.outline {
  border: 2px solid #fff; 	/* Borda branca */
  color: #fff;           	/* Texto branco */
}

.btn.outline:hover {
  background: #fff; 		/* Fundo branco */
  color: #000;      		/* Texto preto */
}

.btn.outline-dark {
  border: 2px solid #1e5f99; 	/* Borda azul */
  color: #1e5f99;            	/* Texto azul */
}

.btn.outline-dark:hover {
  background: #1e5f99; 		/* Fundo azul */
  color: #fff;        		/* Texto branco */
}

/* ================= GRIDS ================= */
.grid-2 {
  display: grid;                       /* Ativa grid */
  grid-template-columns: repeat(2, 1fr); /* Duas colunas iguais */
  gap: 50px;                           /* Espaço entre colunas */
  align-items: center;                 /* Alinha verticalmente */
}

/* ================= EXPERTISE ================= */
.expertise {
  background: #f9fafb; /* Fundo claro */
  padding: 80px 0;     /* Espaçamento vertical */
}

.expertise h2 {
  font-size: 36px;     /* Título grande */
  margin-bottom: 20px;/* Espaço abaixo */
}

.expertise p {
  font-size: 18px; /* Texto */
  color: #555;     /* Cinza */
  margin-bottom: 15px; /* Espaço */
}

.badge {
  margin-top: 25px;      /* Espaço acima */
  background: #e0ecfa;   /* Fundo azul claro */
  padding: 15px 20px;    /* Espaçamento interno */
  border-radius: 12px;   /* Bordas arredondadas */
}

.badge span {
  display: block;       /* Quebra linha */
  font-weight: 700;     /* Negrito */
  color: #1e5f99;       /* Azul */
}

.badge small {
  color: #555; /* Texto secundário */
}

.image-grid {
  display: grid; /* Ativa grid */
  grid-template-columns: repeat(2, 1fr); /* Duas colunas */
  gap: 15px; /* Espaço */
}

.img-box {
  height: 180px;     /* Altura fixa */
  background: #ddd;  /* Cinza placeholder */
  border-radius: 12px; /* Bordas */
}

/* ================= PRODUTOS ================= */
.products {
  padding: 90px 0; /* Espaçamento */
  background: #f9fafb; /* Fundo */
}

.products h2 {
  font-size: 36px; /* Título */
  margin-bottom: 50px; /* Espaço */
}

.product-grid {
  display: grid; /* Grid */
  grid-template-columns: repeat(4, 1fr); /* 4 colunas */
  gap: 25px; /* Espaço */
}

.product-card {
  position: relative; /* Para texto absoluto */
  height: 260px; /* Altura */
  border-radius: 14px; /* Bordas */
  overflow: hidden; /* Corta excesso */
  background: #ccc; /* Placeholder */
  cursor: pointer; /* Mãozinha */
  transition: transform 0.3s ease; /* Animação */
}

.product-card span {
  position: absolute; /* Sobre a imagem */
  bottom: 0; /* Embaixo */
  width: 100%; /* Largura total */
  text-align: center; /* Centraliza texto */
  padding: 15px; /* Espaço */
  background: rgba(0,0,0,0.6); /* Fundo escuro */
  color: #fff; /* Branco */
  font-size: 20px; /* Tamanho */
  font-weight: 600; /* Negrito */
}

.product-card:hover {
  transform: scale(1.05); /* Zoom */
}

/* ================= CLIENTES ================= */
.clients {
  padding: 80px 0; /* Espaço */
}

.clients h2 {
  font-size: 34px; /* Título */
  margin-bottom: 40px; /* Espaço */
}

.client-grid {
  display: grid; /* Grid */
  grid-template-columns: repeat(4, 1fr); /* 4 colunas */
  gap: 30px; /* Espaço */
  align-items: center; /* Centraliza */
}

.client-logo {
  height: 60px; /* Altura */
  background: #e5e7eb; /* Cinza */
  border-radius: 10px; /* Bordas */
}

/* ================= VÍDEO ================= */
.video-section {
  padding: 90px 0; /* Espaço */
}

.video-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Proporção 16:9 */
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

.video-local {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.video-section h2 {
  font-size: 34px; /* Título */
  margin-bottom: 20px; /* Espaço */
}

.video-section p {
  font-size: 18px; /* Texto */
  color: #555; /* Cinza */
  margin-bottom: 15px; /* Espaço */
}


/* ================= CONTATO + LOCALIZAÇÃO ================= */
.contact-location {
  padding: 90px 0;
  background: #f9fafb;
}

.contact-info h2 {
  font-size: 36px;
  margin-bottom: 15px;
}

.contact-info p {
  font-size: 18px;
  color: #555;
  margin-bottom: 25px;
}

.contact-list {
  list-style: none;
  margin-bottom: 30px;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  margin-bottom: 15px;
  color: #333;
}

.contact-list svg {
  width: 22px;
  height: 22px;
  fill: #1e5f99;
  flex-shrink: 0;
}

.contact-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* ===== LADO DIREITO ===== */
.contact-right {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* ===== FORMULÁRIO ===== */
.contact-form {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.contact-form h3 {
  margin-bottom: 15px;
  color: #1e5f99;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #1e5f99;
}

/* ===== MAPA ===== */
.map-box {
  width: 100%;
  height: 260px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


/* ================= FOOTER ================= */
.footer {
  background: #1f2933; /* Fundo escuro */
  color: #fff; /* Texto branco */
  padding: 70px 0 40px; /* Espaço */
}

.footer-grid {
  display: grid; /* Grid */
  grid-template-columns: repeat(3, 1fr); /* 3 colunas */
  gap: 40px; /* Espaço */
}

.footer h3, .footer h4 {
  margin-bottom: 15px; /* Espaço */
}

.footer p, .footer a {
  color: #d1d5db; /* Cinza */
  font-size: 15px; /* Tamanho */
  text-decoration: none; /* Sem sublinhado */
}

.footer ul {
  list-style: none; /* Remove bolinhas */
}

.footer li {
  margin-bottom: 8px; /* Espaço */
}

.footer a:hover {
  color: #facc15; /* Dourado */
}

/* ================= RESPONSIVO ================= */
@media (max-width: 900px) {
  .grid-2 {
    grid-template-columns: 1fr; /* Uma coluna */
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
  }

  .client-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
  }

  .footer-grid {
    grid-template-columns: 1fr; /* 1 coluna */
  }

  .hero h1 {
    font-size: 40px; /* Menor */
  }
}

@media (max-width: 500px) {
  .product-grid {
    grid-template-columns: 1fr; /* 1 coluna */
  }

  .hero h1 {
    font-size: 32px; /* Menor ainda */
  }
}

/* ================= MENU MOBILE (HAMBÚRGUER) ================= */
.menu-toggle {
  display: none; /* Escondido no desktop */
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.menu-toggle span {
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Menu mobile aberto */
.nav.open {
  display: flex;
}

@media (max-width: 900px) {
  .nav {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background: #1e5f99;
    flex-direction: column;
    display: none; /* Esconde por padrão */
  }

  .nav a {
    margin: 0;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }

  .menu-toggle {
    display: flex; /* Mostra o botão no mobile */
  }
}

/* ================= BOTÃO WHATSAPP FLUTUANTE ================= */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  z-index: 999;
  transition: transform 0.3s ease;
}

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