@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');


.contenedor {
  width: 100%;
  max-width: 2500px;
  height: 100%;
  margin: auto;
  font-family: "Concert One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.navbar{  
  background: linear-gradient(90deg, #570493,#000710,#0a4d8f);
 
}
.navbar a{ 
  font-size: 20px;
}

.navbar-toggler{
  border: transparent;

}

header {
  background: linear-gradient(90deg, #085abd,#02469f,#053c74);
  padding-bottom: 10px;
  /* position: fixed; */
  z-index: 10;
  width: 100%;
  max-width: 2500px;
  height: min-content;

}
.buscador {
  position: relative;
  top: -5px;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  margin: auto;
  background: linear-gradient(90deg, #570493,#041e41,#0a4d8f);
  
  }

.buscador form{
  width: 80%;
  margin: auto;
  padding-bottom: 20px;
}

.buscador input{
  height: 40px;
  width: 100% !important;
  text-align: center;
}



.g-2,
.gx-2 {
  --bs-gutter-x: 1.5rem;
}
.g-2,
.gy-2 {
  --bs-gutter-y: 1.5rem;
}

.carritoContainer {
  width: 95%;
  max-width: 950px;
  background-color: #fff;
  z-index: 1000;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 10px;
  border-radius: 16px;
}

.close {
  cursor: pointer;
  font-size: 20px;
  color: red;
  font-weight: bold;
  position: absolute;
  right: 20px;
}

.totalCarrito {
  text-align: center;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.carousel{
  width: 80%;
  margin: auto;
  position: relative;
  top: 150px;
}


@media screen and (max-width: 768px) {
  .carousel{
    width: 100%;
    margin: auto;
    position: relative;
    top: 150px;
  }
}

#lista-productos{
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: auto;
  top: 180px;
} 

.pie-pagina{
  width: 100%;
  max-width:1400px !important;
  height: 100px;
  background: linear-gradient(90deg, #570493,#041e41,#0a4d8f);
  color: #fff;
  text-align: center;
  padding: 20px;
  position: relative;
  top: 300px;

}

.pie-pagina a{
  text-decoration: none;
  text-align: 60px;
}


.btn-bd-primary  {
  z-index: 1000 !important;
  background: -webkit-linear-gradient(90deg, #4a98f7,#2564b4,#04080c);
  background: linear-gradient(90deg, #4a98f7,#2564b4,#04080c);
   /* background:  #FFFF00 !important; */
  --bs-btn-padding-x: 0.4rem !important;  
}

.carritoContainer{
  display: none;
}

.carrito{
  position: absolute;
  right: 50px;
  top: 25px;
  padding: 0px !important;
  border-radius: 100% 100% !important;
}
  #img-carrito{
    width: 50px;
  }

  #lista-productos{
  position: relative;
  width: 95%;
  max-width: 95%;
  margin: auto;
} 

@media screen and (max-width: 768px) {
  .carrito{
    position: absolute;
    right: 90px;
    top:25px;
    
  } 
  #img-carrito{
    width: 45px;
  }
  #lista-productos{
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: auto;
} 

.row-cols-2>* {
    flex: 0 0 auto;
    width: 50%;
    height: fit-content;
}


}


.botones-opciones{
  display:grid;
  gap:.3rem;
}
.botones-opciones button{
  width: 40px;
  border-radius: 100%;
  margin: auto;
  text-align: center;
}


.botones{
  display: flex;
  flex-direction: column-reverse;
  gap: 15px;
}
.botones img{
  border-radius: 100px;
}


.carousel-control-next-icon {
    background-image: url('../img/proximo.png');
}

.carousel-control-prev-icon {
   background-image: url('../img/anterior.png');
}

[data-bs-theme=dark] .carousel .carousel-control-next-icon, [data-bs-theme=dark] .carousel .carousel-control-prev-icon, [data-bs-theme=dark].carousel .carousel-control-next-icon, [data-bs-theme=dark].carousel .carousel-control-prev-icon {
 
    filter: invert(0) grayscale(0);
}

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 0.5s; /* Animación suave */
  height: 60px;
  background: -webkit-linear-gradient(90deg, #4a98f7,#2564b4,#04080c);
  background: linear-gradient(90deg, #4a98f7,#2564b4,#04080c);

}

/* Clase para ocultar el menú moviéndolo fuera de la pantalla */
.nav-hidden {
  top: -160px !important; 
}

/* estilos de tarjetas*/

.bytestore-card{
    /* background:#0b1120; */
    border:1px solid rgba(0,195,255,.15);
    border-radius:20px;
    overflow:hidden;
    transition:.35s;
    position:relative;
}

.bytestore-card:hover{
    transform:translateY(-8px);
    box-shadow:
    0 0 15px rgba(0,195,255,.4),
    0 0 35px rgba(124,58,237,.25);
}

.product-image{
    height:300px;
    object-fit:fill;
   
    /*background:#111827;*/
    background: transparent;

}

.discount-badge{
    position:absolute;
    top:12px;
    left:12px;
    z-index:5;

    background:linear-gradient(
      135deg,
      #ff4d4d,
      #ff0066
    );

    color:#fff;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
}

.product-title{
    min-height:20px;
    font-weight:600;
}

.rating{
    color:#ffc107;
}

.old-price{
    display:block;
    color:#9ca3af;
    text-decoration:line-through;
    font-size:14px;
}

.new-price{
    display:block;
    color:#00c3ff;
    font-size:26px;
    font-weight:bold;
}

.product-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    min-width:60px;
    height:42px;

    border-radius:12px;
    border:1px solid rgba(0,195,255,.4);

    background:rgba(8,15,35,.95);
    color:#fff;
    font-size:14px;
    font-weight:600;
    text-decoration:none; 

    transition:.3s ease;

    box-shadow:
        inset 0 0 10px rgba(0,195,255,.08),
        0 0 10px rgba(0,195,255,.15);
}

.product-btn:hover{
    color:#fff;

    transform:translateY(-2px);

    border-color:#00c3ff;

    box-shadow:
        0 0 12px rgba(0,195,255,.5),
        0 0 25px rgba(124,58,237,.25);
}

.buy-btn{
    border:1px solid rgba(168,85,247,.4);    
    box-shadow:
    inset 0 0 10px rgba(168,85,247,.08),
    0 0 10px rgba(168,85,247,.15);
}

.buy-btn:hover{
    border-color:#a855f7;

    box-shadow:
        0 0 12px rgba(168,85,247,.5),
        0 0 25px rgba(168,85,247,.35);
}

.buy-btn{
    background:linear-gradient(
        135deg,
        #111827,
        #35115f
    );
}

.product-btn{
    background:linear-gradient(
        135deg,
        #111827,
        #0b3b63
    );
}

@media screen and (max-width: 768px) {
    .row-cols-2 > * {
        width: 50%;
        height: fit-content;
        flex: 0 0 auto;
        padding: 2px;
    }
}