:root{
    --rosa:#ff3fa4;
    --dorado:#f2d94e;
}

body{
    margin:0;
    background:#000;
    color:white;
    font-family:'Segoe UI',sans-serif;
}

.header{
    text-align:center;
    padding:25px;
    font-weight:bold;
    font-size:20px;
}

.gold{color:var(--dorado);}

/* TITULOS */
.section-title{
    font-family:'Playfair Display', serif;
    font-size:28px;
    margin:30px 20px;
    position:relative;
    display:inline-block;
}

.section-title::after{
    content:"";
    width:60%;
    height:2px;
    background:linear-gradient(90deg,var(--dorado),var(--rosa));
    position:absolute;
    bottom:-8px;
    left:0;
}

/* CARRUSEL */
.promo-carousel{
    width:100%;
    overflow:hidden;
    margin-top:10px;
}

.promo-slide{display:none;}
.promo-slide img{
    width:100%;
    height:280px;
    object-fit:cover;
}
.promo-slide.active{display:block;}

.carousel-dots{
    text-align:center;
    margin:10px 0;
}
.carousel-dots span{
    display:inline-block;
    width:10px;
    height:10px;
    background:#555;
    margin:0 5px;
    border-radius:50%;
}
.carousel-dots span.active-dot{
    background:linear-gradient(45deg,var(--dorado),var(--rosa));
}

/* SLIDER PRODUCTOS */
.section{padding-bottom:50px; position:relative;}
.products{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:0 20px;
}
.products::-webkit-scrollbar{display:none;}

.arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.7);
    border:none;
    color:white;
    padding:10px;
    cursor:pointer;
    border-radius:50%;
}
.left{left:5px;}
.right{right:5px;}

/* TARJETA */
.product-card{
    background:white;
    color:black;
    min-width:200px;
    border-radius:20px;
    padding:15px;
    position:relative;
    transition:0.3s;
}
.product-card img{
    width:100%;
    height:170px;
    object-fit:cover;
    border-radius:15px;
    cursor:pointer;
}

.favorite{
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
}
.favorite.active{color:red;}

.add-btn{
    margin-top:10px;
    width:100%;
    padding:8px;
    background:black;
    color:white;
    border:none;
    border-radius:10px;
    cursor:pointer;
}

@keyframes pop{
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}
.pop{animation:pop 0.3s ease;}

/* CARRITO */
.cart-icon{
    position:fixed;
    bottom:20px;
    right:20px;
    background:black;
    padding:15px;
    border-radius:50%;
    cursor:pointer;
}

#cartModal,#zoomModal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.95);
}

.cart-box{
    max-width:500px;
    margin:50px auto;
}

.checkout-btn{
    margin-top:15px;
    width:100%;
    padding:12px;
    font-weight:bold;
    border:none;
    border-radius:15px;
    background:linear-gradient(45deg,var(--rosa),var(--dorado));
    color:black;
    cursor:pointer;
}

.clear-btn{
    margin-top:10px;
    width:100%;
    padding:8px;
    background:#444;
    border:none;
    color:white;
    cursor:pointer;
    border-radius:10px;
}

#zoomImg{
    max-width:90%;
    max-height:90%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

#closeZoom{
    position:absolute;
    top:20px;
    right:30px;
    font-size:30px;
    cursor:pointer;
}

@media (max-width: 768px){

    .header{
        font-size:18px;
        padding:15px;
    }

    .section-title{
        font-size:22px;
    }

    .products{
        gap:15px;
    }

    .product-card{
        min-width:160px;
        padding:12px;
    }

    .promo-slide img{
        height:200px;
    }

    .cart-icon{
        bottom:15px;
        right:15px;
    }

}