/* GENERAL */
body {
  background:#0b0b0b;
  color:white;
  font-family: 'Segoe UI', sans-serif;
}

/* HEADER */
h1 {
  font-weight:bold;
}

/* CARDS */
.card {
  background:#313030;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 4px 12px rgba(114, 107, 107, 0.877);
  transition:.3s;
}
.card:hover {
  transform: translateY(-5px);
}

/* IMÁGENES */
.card img {
  width:100%;
  height:180px;
  object-fit:cover;
}

/* PRECIO */
.precio {
  color:#c06060;
  font-weight:bold;
}

/* BOTÓN CARRITO */
.btn-carrito {
  position: fixed;
  top:20px;
  right:20px;
  z-index:1000;
}

.btn-carrito button {
  background:#d4002e;
  border:none;
  padding:10px 15px;
  border-radius:10px;
  font-weight:bold;
}

/* MODAL */
.modal-carrito {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.8);
  display:none;
  justify-content:center;
  align-items:center;
}

/* CONTENIDO */
.contenido-carrito {
  background:#1a1a1a;
  padding:20px;
  border-radius:15px;
  width:90%;
  max-width:400px;
}

/* FOOTER */
footer {
  text-align:center;
  margin-top:50px;
  color:gray;
}
/* BOTONES DEL MENÚ */
.btn-menu {
  background: #cc4d4d;
  border: none;
  padding: 15px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
  transition: .3s;
}

.btn-menu:hover {
  background: #00b893;
  transform: scale(1.05);
}
.redes {
  text-align: center;
  margin-top: 40px;
}

.redes p {
  color: #ccc;
  margin-bottom: 15px;
  font-size: 16px;
}

/* BOTONES GENERALES */
.btn-red {
  display: inline-block;
  margin: 5px;
  padding: 10px 18px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: .3s;
}

/* COLORES POR RED */
.instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}

.tiktok {
  background: #000;
  border: 1px solid #fff;
}

.facebook {
  background: #1877f2;
}

/* EFECTO */
.btn-red:hover {
  transform: scale(1.08);
  opacity: 0.9;
}
/* RESPONSIVE */
@media(max-width:768px){
  .card img{
    height:150px;
  }
}