/* General wrapper styling */
.bloques_wrapper {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
}

.bloques {
  margin-top: 20px; /* Espacio superior de 20px */
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se apilen */
  gap: 10px; /* Espaciado entre los bloques */
}

/* Bloques individuales */
.menu_bloque_item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: calc(33.33% - 10px); /* Cada bloque ocupa un tercio del ancho */
  padding: 20px;
  border-radius: 8px;
  height: 100px;
  background-color: #FCAA12; /* Color de fondo inicial */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Efectos de transición */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 600px) {
  .menu_bloque_item {
    width: 100%; /* Los bloques ocupan todo el ancho en pantallas pequeñas */
  }
}


/* Efectos de hover */
.menu_bloque_item:hover {
  background-color: #5633C1; /* Cambia el color de fondo cuando se pasa el mouse */
  transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el ratón */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para resaltar el bloque */
  cursor: pointer; /* Cambia el cursor para indicar interactividad */
}

/* Estilos para los títulos en los bloques */
.menu_bloque_item h2 {
  font-size: clamp(16px, 2.5vw, 24px) !important; /* Tamaño dinámico: mínimo 16px, máximo 24px */
  margin: 0 !important; /* Sin margen extra */
  color: #fff !important; /* Color del texto */
  white-space: normal; /* Permite que el texto se divida en varias líneas */
  overflow: visible; /* Muestra el texto completo sin truncarlo */
  text-overflow: unset; /* Desactiva los "..." */
  text-transform: uppercase; /* Cambia el texto a mayúsculas */
  text-align: center; /* Centra el texto */
  line-height: 1.2; /* Espaciado entre líneas */
  word-wrap: break-word; /* Divide palabras largas si es necesario */
}


/* Eliminar el subrayado de los enlaces al pasar el ratón */
.menu_bloque_item a {
  text-decoration: none; /* Eliminar el subrayado por defecto */
}

.menu_bloque_item a:hover {
  text-decoration: none; /* Asegurarse de que al pasar el ratón no aparezca el subrayado */
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
  .menu_bloque_item {
      flex: 1 1 calc(45% - 10px); /* Aumenta a 45% en pantallas medianas */
      max-width: 100%;
      height: 70px; /* Reduce la altura en pantallas medianas */
  }

  .menu_bloque_item h2 {
      font-size: 18px; /* Ajusta el tamaño del texto para móviles */
  }
}

@media (max-width: 480px) {
  .menu_bloque_item {
      flex: 1 1 100%; /* Apila los bloques verticalmente en pantallas pequeñas */
      height: 60px; /* Reduce aún más la altura */
  }

  .menu_bloque_item h2 {
      font-size: 16px; /* Ajusta el tamaño del texto en pantallas móviles pequeñas */
  }
}