/********** Marcas Inicio ******************/

/* Estilos para el contenedor de las marcas */
.bs-brands.grilla {
    display: grid;
    gap: 16px; /* Ajustar el espaciado general */
    place-items: center;
    grid-template-columns: repeat(auto-fit, minmax(100px, 0.2fr));
    justify-content: center;
}

/* Estilos para cada item de marca */
.bs-brands__item.grilla {
    background: var(--element-bg);
    display: block;
    padding: 12px; /* Ajustar el padding interno */
    border-radius: var(--default-border-radius);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Efecto hover para cada item */
.bs-brands__item.grilla:hover {
    transform: scale(1.05);
}

/* Efecto de superposición en hover */
.bs-brands__item.grilla::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.125);
    opacity: 0;
    transition: all 0.25s ease;
}

.bs-brands__item.grilla:hover::after {
    opacity: 1;
}

/* Estilos para la imagen dentro del item */
.bs-img-square.brand {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .bs-brands.grilla {
        gap: 12px; /* Espaciado más pequeño en móviles */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Más adaptativo */
    }

    .bs-brands__item.grilla {
        padding: 8px; /* Reducir padding en pantallas pequeñas */
    }
}
@media screen and (min-width:992px) {
.bs-brands.grilla {
    grid-template-columns: repeat(auto-fit, minmax(100px, 0.2fr));
}
}
@media screen and (min-width:1200px) {
.bs-brands.grilla {
    grid-template-columns: repeat(auto-fit, minmax(100px, 0.15fr));
}
}

/********** Home Marcas (hoja)******************/
.listado {
    color: var(--body-txt-default-color);
}
.listado:hover {
color:var(--primary-color);
}
.accordion>.card>.card-header {
    background-color: white;
}
.btn-outline-primary,
.btn-outline-primary:not(:disabled):not(.disabled):active{
    background: var(--primary-color);
    color: var(--primary-contrast);
    border-color:var(--primary-color);
    border-radius:100px;
    padding: var(--btn-padding , 0.375rem 0.75rem )
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-hover-color);
    color: var(--primary-hover-contrast);
    border-color:var(--primary-hover-color);
}
.bs-img-square.brand-home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
}