/* Estilo para el banner */

/* Asegurar que todas las tarjetas tengan el mismo tamaño */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 300px; /* Reducido el ancho máximo de cada tarjeta */
    height: 350px; /* Altura fija más pequeña */
    margin: 5px; /* Reducido el espaciado entre tarjetas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

/* Ajustar el tamaño de las imágenes */
.card-img-top {
    width: 100%;
    height: 150px; /* Altura más pequeña para las imágenes */
    object-fit: cover; /* Recorta la imagen proporcionalmente si es más grande */
    cursor: pointer; /* Indicar que la imagen es clicable */
    transition: all 0.3s ease;
}

.card-img-top:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el mouse */
}



/* Estilo para el cuerpo de la tarjeta */
.card-body {
    padding: 10px; /* Reducido el relleno interno */
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Estilo para el título */
.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 5px; /* Reducido margen inferior */
}

/* Estilo para el texto */
.card-text {
    font-size: 0.9rem;
    margin-bottom: 10px; /* Reducido margen inferior */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2; /* Mostrar máximo 2 líneas */
    -webkit-box-orient: vertical;
}

/* Botón en la tarjeta */
.btn-primary {
    background-color: var(--primary-color);
    border: none;
    padding: 8px 15px; /* Reducido el tamaño del botón */
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
}

/* Ajuste adaptativo para pantallas pequeñas */
@media (max-width: 768px) {
    .card {
        max-width: 100%;
        height: auto; /* Altura adaptable en dispositivos pequeños */
    }

    .card-img-top {
        height: 120px; /* Reducir altura de imágenes en pantallas pequeñas */
    }

    .card-body {
        padding: 8px; /* Ajustar relleno interno */
    }
}

/* Reducir separación entre tarjetas */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Controla el espacio entre tarjetas */
}

.card a:visited {
    color: var(--font-color-claro);
}


.servi{
    margin-top: 10px;
    border-top: 2px solid var(--secondary-color)
}