.bannerIntro{
    background: url(/images/resources/bgIntro.png) no-repeat;
    background-size: cover;
    background-position: 75% 15%;
    min-height: 60svh;
    padding:1.7rem;
    border-bottom: 1px solid #333;
}
.bannerIntro .contIntro{
    margin-top: 3.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.bannerIntro .contIntro .leftCont{
    width: 80%;
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    flex: 1 1 35rem;
}

.bannerIntro .contIntro .leftCont .textIntro001{
    color: #fcd5b6;
    font-size: clamp(.6rem, 2vw, .8rem);
}
.bannerIntro .contIntro .leftCont .textIntro002{
    font-size: clamp(1.5rem, 4vw, 4rem);
    font-weight: 900;
    font-family: var(--textTimes);
    color: #fff;
}
.bannerIntro .contIntro .leftCont .textIntro003{
    font-weight: 900;
    color: #ff7500;
    font-size: clamp(1.5rem, 4vw, 4rem);
}
.bannerIntro .contIntro .leftCont .textIntro004,
.bannerIntro .contIntro .leftCont .textIntro005{
    color: #fff6ee;
    font-size: clamp(.6rem, 2vw, .9rem);
}

.bannerIntro .contIntro .leftCont .call{
    padding:1rem 2rem;
    border-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    gap: .5rem;
    color: #fff;
    font-weight: 500;
    background: linear-gradient(90deg, #ff9900, #ff4500);
}
.bannerIntro .contIntro .leftCont .call img{
    width: 1.3rem;
}

.bannerIntro .contIntro .leftCont .gridIntro{
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: .5rem; */
}

.bannerIntro .contIntro .leftCont .gridIntro .cajaIntro{
    padding:.5rem 1rem .5rem .7rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    background:#111;
    border-radius: .8rem;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    /* flex: 1 1 22rem; */
}
.bannerIntro .contIntro .leftCont .gridIntro .cajaIntro i{
    font-size: clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(90deg, #ff9900, #ff4500);
    background-clip: text;
    color: transparent;
}
.bannerIntro .contIntro .leftCont .gridIntro .cajaIntro i:nth-child(3){
    margin-left: auto;
}

.bannerIntro .contIntro .leftCont .cajaIntro .boxFrame{
    display: flex;
    row-gap: .5rem;
    justify-content: center;
    flex-direction: column;
}

.bannerIntro .contIntro .leftCont .cajaIntro .boxFrame p{
    color: #fff;
    font-size: clamp(.6rem, 2vw, .7rem);
}
.bannerIntro .contIntro .leftCont .cajaIntro .boxFrame i{
    font-size: .5rem;
    margin-left: auto;
}




/*Status Active Empieza*/
.storeStatus{
    box-shadow: 0 5px 8px rgba(0,0,0, .150);
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.storeStatus .online{
    display:none;
    align-items: center;
    gap: .5rem;
    font-size: clamp(.5rem, 2vw, .7rem);
    text-align: center;
    color: green;
}
.storeStatus .offline{
    display:none;
    align-items: center;
    gap: .5rem;
    font-size: clamp(.5rem, 2vw, .7rem);
    text-align: center;
    color: #504444;
    border-radius: 7px;
}



.storeStatus .online strong{
    font-size: clamp(.6rem, 2vw, .8rem);
    font-weight: 500;
    color: #10a729;
}
.storeStatus .offline strong{
    font-size: clamp(.6rem, 2vw, .8rem);
    font-weight: 500;
    color: #ff4500;
}

.storeStatus p .greenOnline{
    width: 15px;
    height: 15px;
    display: block;
    border-radius:50%;
    position: relative;
    background: #10a729;
}
.storeStatus .online.active,
.storeStatus .offline.active{
    display: flex;
}



.storeStatus p .greenOnline::before{
    content: '';
    position: absolute;
    left: -5px;
    top: -5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    animation: pulse 1.5s infinite ease-in;
    background: #10a729;
}


.storeStatus p .redOffline{
    width: 15px;
    height: 15px;
    display: block;
    border-radius:50%;
    position: relative;
    background: #ff1900;
}
.storeStatus p .redOffline::before{
    content: '';
    position: absolute;
    left: -5px;
    top: -5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    animation: pulse 1.5s infinite ease-in;
    background: #ff1900;
}

@keyframes pulse{
    from{
        transform: scale(0.5);
        opacity: 1;
    }to{
        scale: (1.5);
        opacity: 0;
    }
}








.bannerIntro .contIntro .rightCont{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20%;
    background:rgba(0,0,0, .5);
    backdrop-filter: var(--blurCristal);
    border-radius: .5rem;
    padding: 1rem;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

.bannerIntro .contIntro .rightCont .textIntro013{
    font-size: clamp(.8rem, 2vw, 1.2rem);
    transform: rotate(-5deg);
    font-family: var(--textDancing);
    color: #ffe3cb;
    font-weight: 600;
}
.bannerIntro .contIntro .rightCont .textIntro014{
    font-family: var(--TextHand);
    color: #ffea8d;
    font-size: clamp(.8rem, 2vw, 1.2rem);
}



.bannerIntro .contIntro .rightCont img{
    width:clamp(7rem, 15vw, 18rem);
}







.footIntro{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    padding: 1rem;
    background: var(--bgRadial);
    gap: .5rem;
    width: 100%;
    /* border-bottom: 1px solid var(--border); */
    border-bottom: var(--softBorder);
}
.footIntro div{
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: .7rem;
    row-gap: .2rem;
}
.footIntro a{
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: var(--softBorder);
    background: var(--mainBg);
}

.footIntro a p:nth-child(2){
    color:var(--textBn);
    font-family: var(--TextHand);
    font-size: clamp(1.1rem, 2vw, 2rem);
}


.footIntro a p{
    padding:0 .5rem;
    font-size: clamp(.6rem, 2vw, .7rem);
    color: var(--secondText);
}


.footIntro a .priceIntro{
    padding: .5rem;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: #ff6000;
    display: flex;
    width: 100%;
    gap: .2rem;
    font-weight: 700;
    margin-top: auto;
}
.footIntro a .priceIntro span{
    font-size: .9rem;
    font-weight: 300;
    color: var(--mainText);
}
.footIntro a .priceIntro strong{
    margin-left: auto;
    color: var(--secondText);
    height: 1.8rem;
    width: 1.8rem;
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #5f513b;
}


.footIntro .square img{
    object-fit: cover;
    width: 30rem;
    height: 7rem;
    object-position:50% 15%;
    background: linear-gradient(45deg, #000000, #d10808);
}


.footIntro .square .textIntro015{
    color: #ff9900;
    font-size: clamp(.6rem, 2vw, .8rem);
}
.footIntro .square .textIntro016{
    font-size: clamp(1.2rem, 2vw, 2rem);
    font-weight: 700;
    color: var(--textBn);
    font-family: var(--textTimes);
}

.footIntro .square .textIntro017{
    color: var(--textBn);
    font-size: clamp(.6rem, 2vw, .9rem);
}

.footIntro .square .marker{
    width: 70%;
    height: 2px;
    position: relative;
}
.footIntro .square .marker::after{
    content: '';
    background:linear-gradient(90deg, #ff9900, #ff4500, transparent 75%);
    position: absolute;
    border-radius: 2rem;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.footIntro .square:nth-child(5){
    display: flex;
    width: 100%;
    flex-direction: column;
    row-gap: .5rem;
    border-left: var(--softBorder);
    border-radius: unset;
}
.footIntro .square:nth-child(5) i{
    color: #ff9000;
    font-size: 1.5rem;
    
}
.footIntro .square:nth-child(5) p{
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--textBn);
}

.footIntro .square:nth-child(5) .textIntro023{
    color: #ff9900;
    font-family: var(--TextHand);
}

















@media(max-width:990px){

    .bannerIntro{
        background-position: 45% 15%;
        min-height: 50svh;
    }


    .bannerIntro .contIntro .rightCont{
        flex-direction: row;
        width: 100%;
    }



}