/* Reset e Estilização Global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  overflow-x: hidden;
}

/* Seção Hero */
.hero {
  width: 100%;
  height: 60vh;
  background-image: url('/imghome/soluciones/soja/FONDO-PANTALLA-PRODUCTOS-opcion-2.png');
  background-size: cover;
  background-position: center top; /* Alinha a imagem para que a parte superior fique mais visível */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
}
.hero-content h1 {
  font-size: 3rem;
  font-weight: bold;
}
.hero-content h1 span {
  color: #ffffff;
}
.hero-content .divider {
  width: 100px;
  height: 4px;
  background-color: #ffffff;
  margin: 20px auto 0;
}

/* Seção Principal */
.main-section {
  text-align: center;
  padding: 40px 20px;
}
.main-section h2 {
  font-size: 3rem;
  margin-bottom: 10px;
  color: #2e7d32;
}
.main-section p {
  font-size: 1.5rem;
  margin-bottom: 0px;
  color: #666666;
}

/* Container dos Drones – altura reduzida para aproximar os drones do título */
.drone-container {
  position: relative;
  width: 100%;
  height: 350px;
  margin-bottom: 20px;
}

/* Drones – mantendo os valores de posicionamento originais */
.drone {
  width: 120px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  animation: flyDrone 1s infinite ease-in-out, switchDrone 4s steps(4) infinite;
  cursor: pointer;
}

/* Animação de Flutuação */
@keyframes flyDrone {
  0%, 100% { transform: translateY(-5px); }
  50% { transform: translateY(5px); }
}
/* Animação de Troca de Imagem dos Drones */
@keyframes switchDrone {
  0%, 25% { background-image: url('/imghome/soluciones/soja/drone1.png'); }
  26%, 50% { background-image: url('/imghome/soluciones/soja/drone2.png'); }
  51%, 75% { background-image: url('/imghome/soluciones/soja/drone3.png'); }
  76%, 100% { background-image: url('/imghome/soluciones/soja/drone4.png'); }
}

/* Gráfico de Crescimento */
.growth-chart {
  margin-top: 10px;
}
.growth-chart img {
  width: 100%;
  max-width: 1920px;
  height: auto;
  margin: 20px auto;
  display: block;
}

/* Popup Modal para exibir os produtos */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.popup.active {
  display: flex;
}
.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  position: relative;
}
.popup-content .popup-body {
  margin-top: 10px;
}
.product-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 15px;
  margin-top: 10px;
}
.product-logo-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background-color: #f9f9f9;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}
.product-logo-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.product-logo-item img {
  max-width: 80px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.popup-category {
  margin-bottom: 20px;
}
.popup-category h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #2e7d32;
  text-align: left;
}
.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}