.product__category{
    color: #0088FF;
    font-family:'Inter';
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
}
.product__name{
    color: #022F6C;
    font-family:'Inter';
    font-size: 32px;
    font-weight: 700;
}

.product__description{
    color: #252525;
    font-family:'Inter';
    font-size: 16px;
    font-weight: 400;
    margin-top: 15px;
    display: block;

}
.product__colorBg{
    height: 34px;
    width: 34px;
    border-radius: 50%;
    margin-right: 10px;
}

.product__btn_ficha{
    background-color: white;
    font-family: 'Inter';
    font-size: 16px;
    color: #0088FF;
    border-radius: 2px;
    font-weight: 500;
    border: 1px solid #0088FF;
    width: 288px;
}
.product__btn_ficha:hover{
    color: white;
    background-color: #0088FF;
    border: 1px solid #0088FF;
}
.product__techField{
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    color: #000000;
}
.product__techData{
    font-family: 'Inter';
    font-weight: 600;
    font-size: 16px;
    color: #000000;
}
.product_products_related{
    font-family: 'Inter';
    font-weight: 700;
    font-size: 24px;
    color: #022F6C;
    margin-top: 50px;
    margin-bottom: 50px;
}
.Category__card__a{
    text-decoration: none;
}

.Category__card__title{
    font-size:16px;
    font-family:'Inter';
    font-weight:700;
    color: #022F6C;
    text-align: center;
    margin-top: 24px;
}
.borde-redondo{
    height: 220px;
    width: 220px;
    border: 2px solid #022F6C;
    border-radius: 50%;
    position: relative;
    margin: auto;
}
.category__card__img{
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: 80px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

}
.borde-redondo:hover{
    border: none;
    /* background: transparent linear-gradient(60deg, #1C79F9 0%, #23A9F0 53%, #28CBEA 100%) 0% 0% no-repeat padding-box; */
    background: transparent linear-gradient(60deg, rgba(2, 47, 108, 1) 0%, rgba(2, 47, 108, 1) 100%);
    color: white;
}
.borde-redondo:hover .category__card__img{
    filter: brightness(100)
}
.filtro__seccion{
    font-size:20px;
    font-family:'Inter';
    font-weight:700;
    color: #022F6C;
}
.filtro__categorias{
    font-size:18px;
    font-family:'Inter';
    font-weight:400;
    color: #252525;
    margin-bottom: 10px;
}
.filtro__categorias a{
    text-decoration: none;
    color: #252525;
}
.filtro__categorias.active{
    font-weight: 700;
}
.filtro__colorBg{
    height: 16px;
    width: 16px;
    border-radius: 50%;
}
.filtro__colorNombre{
    font-family:'Inter';
    font-weight:400;
    color: #252525;
    font-size:18px;
    margin-left: 15px;
}
.filtro__colorLink{
    text-decoration: none;
}

.product__card__a .card-body{
    /* background-color: #F2F2F2; */
}
.product__card__title{
    font-size:20px;
    font-weight:400;
    color: #081517;
    text-align: center;

}
.product__card__category{
    font-size:16px;
    font-weight:700;
    color: #0088FF;
    text-transform: uppercase;
}
.product__card__btn{
    opacity: 0;
    transition: all 0.5s;
    position: absolute;
    margin-top: 20px;
    color: white;
    background-color: #006072;
    border-radius: 0px;
    width: 130px;
    bottom: 0;
    left: 50%; /* Posiciona el centro horizontalmente */
    transform: translateX(-50%); /* Ajusta el desfase del 50% horizontal */
}
.product__card__btn:hover{
    border: 1px solid #0095A8;
    background-color: #0095A8;
    color: white;

}
.product__card__a{
    position: relative;
    text-decoration: none;
    width: 100%;


}
.product__card__container {
    position: relative; /* Necesario para posicionar el overlay */
}

.product__card__container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 360px;
    background-color: transparent; /* Oculto por defecto */
    transition: background-color 0.3s ease; /* Transición suave */
}

.product__card__container:hover .overlay {
    background-color: rgba(0, 96, 114, 0.64); /* Color al pasar el ratón */
}

.product__card__container:hover .product__card__btn{
    bottom: 250px;
    transition: all 0.5s;
    opacity: 1;
}
.product__card__container:hover .product__card__brandsModels{
    color: white;
}
.product__card__container:hover .product__card__img{
    /* transform: scale(1.1);
    transition: all 0.5s; */
}
.product__card__container:hover .product_card__icon{
    opacity: 1;
}
.product_card__icon{
    position: absolute;
    bottom: 250px;
    left: 45%;
    display:block;
    text-align:center;
    color:white;
    opacity:0;
}
.product__menu__item{
    font-size:18px;
    color:#131313;
    border-top: 1px solid #CCCCCC;
    padding: 10px 0;
    text-decoration: none;
}
.Product__table{
    font-family: 'Roboto-Regular';
    color: #000000;
    text-align: center;
    border: 1px solid black;
}
.Product__table tr:first-child th{
    background-color: #53658B;
    color: white;
    text-align: center;
    font-family: 'Roboto-Regular';
    font-size: 20px;
}
.Product__table tr:nth-child(2) th{
    background-color: #E7E7E7;
}
/* Mobile specific styles for product cards (screens smaller than Bootstrap's lg breakpoint) */
@media (max-width: 767px) {
    /* 1. Make button visible by default and positioned over the image */
    .product__card__btn {
        opacity: 1; /* Make button visible by default */
        bottom: 250px; /* Position button on the image. Adjust this value as needed. */
                       /* This overrides the default 'bottom: 0;' and the hover 'bottom: 250px;' */
        z-index: 2;   /* Ensure it's above the image and any potential overlay */
        /* Other properties like position, left, transform, color, background-color, border-radius
           are inherited from the existing .product__card__btn rule and should work fine. */
    }

    /* 2. Disable hover effects on mobile */

    /* Prevent overlay from appearing on hover */
    .product__card__container:hover .overlay {
        background-color: transparent;
    }

    /* Keep button in its mobile default position and state on hover, and disable transition */
    .product__card__container:hover .product__card__btn {
        bottom: 250px;
        opacity: 1;
        transition: none;
    }

    /* If .product_card__icon was used and visible on hover, disable its hover effect too.
       Based on your HTML, this icon is not present, but the rule is here for completeness
       if it were to be added later and followed the same hover logic. */
    /* .product__card__container:hover .product_card__icon {
        opacity: 0; /* Or its default mobile state if different */
    /* } */
}