/* Estilos del contenedor de las tarjetas */
#contenedor-empresas {
  display: grid;
  gap: 20px; /* Espacio entre tarjetas */
  padding: 20px;
  justify-items: center;
  align-items: start;
  grid-template-columns: repeat(6, 1fr); /* 6 tarjetas por fila */
  overflow: hidden; /* Evita que el contenido se desborde */
  width: 100%; /* Asegura que el contenedor ocupe el 100% del ancho disponible */
  box-sizing: border-box; /* Incluye padding y border en el cálculo del tamaño */
  background-color: #Ff8000; /* Amarillo */
  border-radius: 10px; /* Bordes redondeados */
}
 
/* Estilos generales para las tarjetas */
.tarjeta {
  width: 100%; /* La tarjeta ocupa el 100% del ancho disponible dentro de la columna */
  max-width: 150px; /* Limita el ancho máximo de la tarjeta */
  background-color: #FF8000;
  border: 2px solid #7006D;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto; /* Centra la tarjeta en la columna */
}

/* Imagen dentro de la tarjeta */
.tarjeta img {
  width: 100%; /* Hace que la imagen ocupe todo el ancho disponible dentro de la tarjeta */
  height: auto; /* Mantiene la proporción de la imagen */
  max-height: 120px; /* Limita la altura máxima de la imagen para que no sea demasiado grande */
  object-fit: contain; /* Asegura que la imagen se ajuste sin recortarse ni distorsionarse */
}

/* Diseño para pantallas pequeñas */
@media (max-width: 767px) {
  #contenedor-empresas {
    grid-template-columns: repeat(2, 1fr); /* 2 tarjetas por fila en pantallas pequeñas */
  }

  .tarjeta {
    max-width: 160px; /* Limita el ancho máximo de la tarjeta */
  }

  .tarjeta img {
    max-height: 100px; /* Limita la altura máxima de la imagen */
  }

  .tarjeta h3 {
    font-size: 14px; /* Ajusta el tamaño de la fuente */
  }
}

/* Diseño para pantallas medianas (768px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  #contenedor-empresas {
    grid-template-columns: repeat(3, 1fr); /* 3 tarjetas por fila en pantallas medianas */
  }
}

/* Diseño para pantallas grandes */
@media (min-width: 1200px) {
  #contenedor-empresas {
    grid-template-columns: repeat(6, 1fr); /* 6 tarjetas por fila en pantallas grandes */
  }
}