/* Promo componente inicio > promo 
variables especiales para personalizar 

--promo1-bg // color fondo promo 1 
--promo2-bg // color fondo promo 2
--promo2-border // color border promo 2

*/
.colecction-description {
    color: var(--body-txt-default-color);
}
.bs-promo{
    --cols-md:12;
    --gap:3rem;
    padding:3rem 0;
    text-align:center;
}
/* promo 1 */
.bs-promo-1__section{
    grid-row-start: 1;
    grid-column-start:1;
    z-index:10;
    padding:2rem;
    margin:1rem;
    position:relative;
    display:flex;
    align-items:center;
}


@media screen and (max-width:767px) {
 .bs-promo-2__info.bs-promo-2__info{
        grid-column-start:2;
        --span-col:6;
        --span-col-lg:4;
        border: 2px solid var(--promo2-border, white);
        padding:2rem;
        color: var(--body-txt-default-color);
        border-radius: 8px;
    }
}





@media screen and (max-width:768px) {
.bs-promo-1__section::before{
    content:" ";
    display:block;
    width:100%;
    height:100%;
    left:0;
    z-index:-5;
    position:absolute;
    background:var(--promo1-bg,var(--primary-color));
    opacity: .3;
    backdrop-filter: blur(3rem);
}
}
@media screen and (min-width:769px) {
.bs-promo-1__section::before{
    content:" ";
    display:block;
    width:100%;
    height:100%;
    left:0;
    z-index:-5;
    position:absolute;
    background:var(--promo1-bg,var(--primary-color));
    opacity:.8;
    backdrop-filter: blur(3rem);
}
}


.bs-promo-1__img{
    grid-row-start: 1;
    grid-column-start:1;
    background-image: url('https://dojiw2m9tvv09.cloudfront.net/21828/47/promo03.png?12');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* promo 1 */
.bs-promo-2__img{
    display:none
}
.bs-promo-2__info{
    border:2px solid var(--promo2-border, var(--secondary-color));
    padding:2rem;
}
@media screen and (min-width:768px){
    .bs-promo{
        text-align:left
    }
    .bs-promo img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* promo 1 */
    .bs-promo-1__img{
        --span-col:7;
        --span-col-lg:8;
        --span-row: 4;
        box-shadow: 2rem -2rem 0px 0px var(--promo1-bg, var(--primary-color));
        grid-column-start:initial
        background-image: none;
    }
    
    .bs-promo-1__section{
        --span-col:5; 
        --span-col-lg:3;
        --span-row:3;
        z-index:0;
        padding:0;
        margin:0;
        grid-column-start:initial
    }
    .bs-promo-1__section .btn-secondary{
        --secondary-color:var(--primary-color);
        --secondary-contrast:var(--primary-contrast);
        --secondary-border: var(--primary-border);
    }
    .bs-promo-1__section::before{
        opacity:0;
        content:none;
    }
    
    /* promo 2 */
    .bs-promo-2__img{
        --span-col:4;
        --span-row:3;
        z-index:10;
        grid-row-start:4;
        grid-column-start:9;
        margin-bottom:2rem;
        display:block
    }

    .bs-promo-2__section.bs-promo-2__section{
        --span-col:10;
        --span-row:2;
        --cols: var(--span-col);
        grid-column-start:2;
        grid-row-start: 5;
        background:var(--promo2-bg, var(--primary-color));
        padding:2rem;
        
    }
    .bs-promo-2__info.bs-promo-2__info{
        grid-column-start:2;
        --span-col:6;
        --span-col-lg:4;
        border: 2px solid var(--promo2-border, white);
        padding:2rem;
        color: white;
        border-radius: 8px;
    }
}

@media screen and (max-width:768px){
    .bs-promo-1__img img{
        display: none;
    }
}

.bs-title-home {
    color: var(--home-title-color);
}
.promo-texto {
    color: var(--body-txt-default-color);
}

@media screen and (max-width:768px) {
.bs-promo-1__info h3 {
    color: white;
}
.bs-promo-1__info p {
    color: white;
}
}
@media screen and (min-width:769px) {
.bs-promo-1__info h3 {
    color: var(--home-title-color);
}
.bs-promo-1__info p {
    color: var(--body-txt-default-color);
}
}

@media screen and (max-width:768px) {
.bs-promo-2__info.grid__item a.btn.btn-secondary {
    background-color: var(--primary-color);
    color: var(--danger-contrast);
}

.bs-promo-2__info.grid__item a.btn.btn-secondary:hover {
    background-color: white;
    color: var(--danger-contrast);
    opacity:0.6;
}
}

@media screen and (min-width:769px) {
.bs-promo-2__info.grid__item a.btn.btn-secondary {
    background-color: white;
    color: #000000;
}

.bs-promo-2__info.grid__item a.btn.btn-secondary:hover {
    background-color: white;
    color: #000000;
    opacity:0.6;
}
}