/* ==========================================
   ESTILO GENERAL TIENDA
========================================== */

body{

    background:#ececec;

    font-family:'Segoe UI', Arial, sans-serif;

    color:#222;

}

/* ==========================================
   CONTENEDOR
========================================== */

main.container{

    padding-top:20px;

    padding-bottom:60px;

}

/* ==========================================
   TITULOS
========================================== */

h1{

    font-size:2.3rem;

    font-weight:800;

    color:#222;

    margin-bottom:35px;

}

h2{

    margin-top:50px;

    margin-bottom:25px;

    font-size:1.7rem;

    font-weight:800;

    color:#222;

    border-left:6px solid #c9a227;

    padding-left:15px;

}

/* ==========================================
   TARJETAS PRODUCTOS
========================================== */

.producto-card{

    background:#fff;

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.producto-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

/* ==========================================
   IMAGENES
========================================== */

.imagen-producto{

    width:100%;

    height:170px;

    object-fit:cover;

    transition:.4s;

}

.producto-card:hover .imagen-producto{

    transform:scale(1.07);

}

/* ==========================================
   ETIQUETAS
========================================== */

.etiqueta-nuevo{

    position:absolute;

    top:10px;

    left:10px;

    z-index:10;

    background:#198754;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:.75rem;

}

.etiqueta-oferta{

    position:absolute;

    top:10px;

    right:10px;

    z-index:10;

    background:#dc3545;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:.75rem;

}

/* ==========================================
   INFORMACION
========================================== */

.card-body{

    padding:15px;

}

.producto-categoria{

    font-size:.75rem;

    color:#777;

    text-transform:uppercase;

    margin-bottom:5px;

}

.card-title{

    font-size:1rem;

    font-weight:700;

    height:48px;

    overflow:hidden;

    margin-bottom:8px;

}

.producto-marca{

    color:#777;

    font-size:.85rem;

    margin-bottom:10px;

}

/* ==========================================
   PRECIOS
========================================== */

.precio{

    font-size:1.30rem;

    font-weight:800;

    color:#111;

}

.precio-oferta{

    font-size:1.45rem;

    font-weight:900;

    color:#d62828;

}

.precio-anterior{

    font-size:.85rem;

    color:#999;

    text-decoration:line-through;

    margin-bottom:0;

}

/* ==========================================
   BOTONES
========================================== */

.btn{

    transition:.3s;

}

.btn:hover{

    transform:translateY(-2px);

}

.btn-comprar{

    width:100%;

    background:#111;

    color:#fff;

    border:none;

    border-radius:30px;

    padding:10px;

    font-weight:700;

}

.btn-comprar:hover{

    background:#c9a227;

    color:#111;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

/* ==========================================
   NAVBAR
========================================== */

.navbar{

    background:#111 !important;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

}

.navbar-brand{

    font-weight:700;

    letter-spacing:1px;

}

.nav-link{

    transition:.3s;

}

.nav-link:hover{

    color:#c9a227 !important;

}

/* ==========================================
   DROPDOWNS
========================================== */

.dropdown-menu{

    border:none;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

}

.dropdown-item{

    transition:.25s;

}

.dropdown-item:hover{

    background:#111;

    color:#fff;

}

/* ==========================================
   PAGINA PRODUCTO
========================================== */

.carousel{

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.carousel-item img{

    transition:.4s;

}

.carousel-item img:hover{

    transform:scale(1.05);

}

.img-thumbnail{

    border-radius:12px;

    border:2px solid transparent;

    transition:.3s;

    cursor:pointer;

}

.img-thumbnail:hover{

    border-color:#c9a227;

    transform:scale(1.08);

}

.alert{

    border:none;

    border-radius:15px;

}

/* Caja de compra */

.card.shadow-lg{

    border-radius:20px !important;

}

/* ==========================================
   FOOTER
========================================== */

footer{

    background:#111 !important;

    margin-top:70px;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1200px){

    .imagen-producto{

        height:160px;

    }

}

@media(max-width:768px){

    h1{

        font-size:1.9rem;

    }

    h2{

        font-size:1.5rem;

    }

    .imagen-producto{

        height:150px;

    }

}

@media(max-width:576px){

    .producto-card{

        border-radius:14px;

    }

    .card-title{

        font-size:.9rem;

        height:auto;

    }

    .btn-comprar{

        font-size:.85rem;

    }

    .imagen-producto{

        height:140px;

    }


}
.imagen-detalle-producto{

    width:100%;

    height:500px;

    object-fit:contain;

    background:#f8f8f8;

}
.slider-lateral{

position:fixed;

right:20px;

top:150px;

width:280px;

background:white;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.35);

overflow:hidden;

z-index:9999;

}


.imagen-slider-lateral{

width:100%;

height:380px;

object-fit:cover;

}



.cerrar-slider{

position:absolute;

right:10px;

top:10px;

width:35px;

height:35px;

border:none;

border-radius:50%;

background:#000;

color:white;

font-size:22px;

cursor:pointer;

z-index:2;

}



.texto-slider{

padding:10px;

text-align:center;

font-weight:bold;

}




@media(max-width:992px){

.slider-lateral{

display:none;

}

}
.imagen-slider-item{

display:none;

text-decoration:none;

color:black;

}



.imagen-slider-item.activo{

display:block;

animation: aparecer .6s;

}




@keyframes aparecer{


from{

opacity:0;

transform:translateX(30px);

}


to{

opacity:1;

transform:translateX(0);

}


}