/*############################# START CARD ##################################*/
/*.web-index-title-carreras h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
    border: 0px solid #4343ff;
  }*/
  .web-index-cta-h2{
    border: 0px solid #4343ff;
    text-align: center;
    font-size: 2rem;
    color:#fff;
    padding: 40px 0px;
    background-color: #f09133;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  
  .web-index-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding: 20px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .web-index-card {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    box-shadow: 1px 1px 5px rgba(82, 82, 82, 0.3);
    border: 0px solid #4343ff;
    min-height: 340px;
    max-width: 100%;
    width: 100%; /* Hace que las tarjetas sean responsivas */
  }
  
  .web-index-card:hover {
    cursor: pointer;
    transform: translateY(-5px); /* Efecto de levantar la tarjeta */
    box-shadow: 0px 5px 15px rgba(58, 58, 58, 0.3);
  }
  
  .web-index-card button {
    border: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: block;
    background: transparent; /* Fondo transparente para el botón */
  }
  
  .web-index-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mejor para imágenes que deben llenar el espacio */
    display: block; /* Evita espacios no deseados debajo de la imagen */
    border: 0px solid red;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .web-index-cards-container {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Tarjetas más pequeñas */
      gap: 15px; /* Menor espacio entre tarjetas */
      padding: 10px; /* Menor padding */
    }
  
    .web-index-card {
      min-height: 250px; /* Altura reducida para móviles */
    }
  }
  
  @media (max-width: 480px) {
    .web-index-cards-container {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Tarjetas aún más pequeñas */
      gap: 10px; /* Espacio mínimo entre tarjetas */
    }
  
    .web-index-card {
      min-height: 200px; /* Altura aún más reducida */
    }
  }