/********** 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);
}

/* Barra de índice de letras */
.brand-index-wrapper {
    text-align: left;
    margin-bottom: 10px;
}
.brand-index {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}
.brand-index-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--body-txt-default-color);
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.brand-index-link:hover {
    background: var(--primary-color);
    color: var(--primary-contrast);
}

/* Ajuste de scroll para sticky header */

.brand-letter {
    scroll-margin-top: 140px; /* Ajusta según el alto de tu menú sticky */
}

.accordion > .card > .card-header {
    background-color: white;
}
.btn-outline-primary.toggle-icon {
    width: 32px!important;
    height: 32px!important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
    position: relative;
}
.toggle-icon::before {
    content: "+";
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.toggle-icon[aria-expanded="true"]::before {
    content: "-";
    transform: rotate(180deg);
}
.btn-outline-primary,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-color);
    color: var(--primary-contrast);
    border-color: var(--primary-color);
}
.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;
}