/* Default styles for the button bar */
.modalidad-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 5px;
}

.bg-body-emphasis {
    background-color: #ffffff !important; /* Color de fondo sólido */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil debajo */
    transition: background-color 0.3s ease-in-out;
}

.sticky-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
}

.carousel-item img {
    width: 100%;
    height: 600px; /* Altura fija en desktop */
    object-fit: cover; /* Recorta la imagen sin deformarla */
}

@media (max-width: 768px) {
    .carousel-item img {
        height: 300px; /* Altura fija en móviles */
    }
}

/* Styles for each button */
.modalidad-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 150px; /* Adjust the width as needed */
}

.thumbnail-container {
    width: 100%;       /* Usa todo el ancho disponible */
    padding-top: 100%; /* Relación de aspecto cuadrada (1:1) */
    position: relative;
    overflow: hidden;  /* Asegura que las imágenes recortadas no se salgan del contenedor */
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    background-color: #f8f9fa; /* Fondo claro para placeholders */
}

.thumbnail-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para ajustarla al contenedor */
}

.object-cover {
    width: 100%;        /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 100%;       /* Asegura que la imagen ocupe todo el alto del contenedor */
    object-fit: cover;  /* Ajusta la imagen al contenedor, recortando si es necesario */
}


@media (min-width: 768px) {
    .margen-4tos-primera {
        margin-bottom: 10rem !important;
        margin-top: 5rem !important;
    }

    .margen-4tos {
        margin-bottom: 10rem !important;
    }

    .margen-semi-arriba {
        margin-top: 15rem !important;
        margin-bottom: 20rem !important;
    }

    .margen-semi-arriba-8 {
        margin-top: 15rem !important;
    }

    .margen-semi-abajo {
        margin-top: 29rem !important;
    }

    .margen-final {
        margin-top: 25rem !important;
    }

    .custom-card {
        height: 65px; /* Define el alto que desees para la tarjeta */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .line-content {
        flex: 1;
        display: flex;
        align-items: center;
    }

}


@media (max-width: 767px) {
    /* Styles for screens up to 767px */
    .modalidad-bar a {
        flex-basis: 50%; /* Display two buttons per row */
    }
}

@media (max-width: 575px) {
    /* Styles for screens up to 575px */
    .modalidad-bar a {
        flex-basis: 100%; /* Display one button per row */
    }
}