/* VARIABLES */
:root {
  --verde-claro: #c0db2f;
  --verde-medio: #0abf35;
  --verde-oscuro: #006837;
  --verde-header: #22a62a;
  --gris-fondo: #f7f7f7;
  --blanco: #ffffff;
  --negro: #000000;
  --font-main: 'Montserrat', sans-serif;
}

/* ESTILOS GENERALES */
body {
  font-family: var(--font-main);
  color: var(--negro);
  background-color: var(--blanco);
}

/* NAVBAR */
.navbar {
  background-color: #26B14B !important;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.5rem;
}

.navbar-brand span {
  color: var(--blanco);
}

.nav-link {
  font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
  text-decoration: underline;
}

/* HERO */
.hero {
  position: relative;
  background-image: url('../images/hero.jpg'); /* Cambia la imagen si lo deseas */
  background-size: cover;
  background-position: center;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  text-align: center;
}

.hero h1 {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 10px;
  font-weight: 700;
}

/* BENEFICIOS */
.beneficios .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.beneficios .card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 15px rgba(0,0,0,0.2);
}

/* IMPACTO */
.impacto {
  background-color: var(--gris-fondo);
  padding: 2rem 1rem;
}

.impacto .text-success {
  font-weight: 700;
}

/* FOOTER */
.footer {
  background-color: #111;
  color: var(--blanco);
  padding: 1rem;
  font-size: 0.9rem;
}

/* Mostrar dropdown en hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* Personaliza el fondo del menú desplegable */
.dropdown-menu {
  background-color: #006837; /* Verde oscuro institucional */
  border: none;
  border-radius: 0;
}

.dropdown-menu .dropdown-item {
  color: white;
  font-weight: 400;
  padding: 10px 20px;
}

.dropdown-menu .dropdown-item {
  transition: all 0.3s ease;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #0abf35;
  color: #fff;
}
.imagen-clientes {
  width: 100%;              /* que llene su columna */
  height: 100%;             /* que llene la altura también si es necesario */
  object-fit: cover;        /* que no se deforme */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.gear-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.gear {
  transition: transform 0.5s ease-in-out;
}

.stuck {
  animation: stuckShake 0.3s infinite;
}

@keyframes stuckShake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

.spin {
  animation: spinGear 3s linear infinite !important;
}

@keyframes spinGear {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.gear.spin {
  animation: spin 2s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.gear-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

/* Botones verdes oscuros */
.btn-success {
  background-color: #06522B !important;
  border-color: #06522B !important;
}

/* Fondo suave para secciones */
.section-light {
  background-color: #E9F6E9 !important;
}

/* Íconos amarillos destacados */
.icon-highlight {
  color: #FFD700 !important;
}

/* Mostrar dropdown al pasar el mouse */
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Mejora el efecto hover para los elementos del dropdown */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: #0abf35 !important;
  color: #ffffff !important;
  transform: translateX(5px);
}

.navbar .dropdown-menu .dropdown-item {
  transition: all 0.3s ease;
}