.heading-title-linea {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #008243ff;
  }
  
  /* Contenedor personalizado */
  .container-custom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* Tarjeta con imagen de fondo */
  .overlay-card {
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
    position: relative;
  }
  
  .overlay-card:hover {
    transform: scale(1.02);
  }
  
  /* Imagen de la tarjeta */
  .overlay-card .card-img {
    height: 250px; /* Puedes ajustar la altura */
    object-fit: cover;
    object-fit: contain;
  }
  
  /* Capa de contenido sobre la imagen (ya viene posicionado por Bootstrap) */
  .card-img-overlay {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Ubica el contenido en la parte inferior */
    padding-bottom: 10px;  /* Ajusta el espacio inferior según tu preferencia */
  }
  
  
  /* Rótulo estilizado (simil botón) */
  .overlay-label {
    background-color: #008243ff;  /* Fondo verde */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  /* Efecto hover para el rótulo */
  .overlay-label:hover {
    background-color: #27ae60;
    transform: scale(1.05);
  }
  
  /* Responsive: ajustar la altura en pantallas pequeñas */
  @media (max-width: 576px) {
    .overlay-card .card-img {
      height: 150px;
    }
  }