/* ==== AÑADIDO SOLO PARA ORGANIZAR LAS TARJETAS ==== */
.contenedor-productos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-items: center;
  padding: 40px;
}

@media (max-width: 1000px) {
  .contenedor-productos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .contenedor-productos {
    grid-template-columns: 1fr;
  }
}
body{background: linear-gradient(135deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 50%,rgba(209,209,209,1) 50%,rgba(254,254,254,1) 100%) center/cover no-repeat;min-height:100vh}
.card{width:360px;background:#fff;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:.3s;font-family:'Segoe UI',sans-serif;margin:20px auto;overflow:hidden;position:relative;cursor:pointer}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.15)}
.badge{position:absolute;top:10px;right:10px;background: linear-gradient(to right,  rgba(169,3,41,1) 0%,rgba(196,72,72,1) 44%,rgba(170,34,56,1) 100%);color:#fff;padding:5px 10px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.2);z-index:10}
.tilt{overflow:hidden}
.img{height:200px;overflow:hidden}
.img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .img img{transform:scale(1.05)}
.info{padding:20px}
.cat{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#71717A;margin-bottom:5px}
.title{font-size:18px;font-weight:700;color:#18181B;margin:0 0 10px;letter-spacing:-.5px}
.desc{font-size:13px;color:#52525B;line-height:1.4;margin-bottom:12px}
.feats{display:flex;gap:6px;margin-bottom:15px}
.feat{font-size:10px;background:#F4F4F5;color:#71717A;padding:3px 8px;border-radius:10px;font-weight:500}
.bottom{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.price{display:flex;flex-direction:column}
.old{font-size:13px;text-decoration:line-through;color:#A1A1AA;margin-bottom:2px}
.new{font-size:20px;font-weight:700;color:#18181B}
.btn{background:linear-gradient(45deg,#18181B,#27272A);color:#fff;border:none;border-radius:10px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.3s;box-shadow:0 3px 10px rgba(0,0,0,.1)}
.btn:hover{background:linear-gradient(45deg,#27272A,#3F3F46);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.15)}
.btn:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:.5s}
.btn:hover:before{left:100%}
.icon{transition:transform .3s}
.btn:hover .icon{transform:rotate(-10deg) scale(1.1)}
.meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #F4F4F5;padding-top:12px}
.rating{display:flex;align-items:center;gap:2px}
.rcount{margin-left:6px;font-size:11px;color:#71717A}
.stock{font-size:11px;font-weight:600;color:#22C55E}
@media (max-width:400px){.card{width:90%}.title{font-size:16px}.img{height:180px}.bottom{flex-direction:column;align-items:flex-start;gap:10px}.price{margin-bottom:5px}.btn{width:100%;justify-content:center}}

/* ==== Ajuste para adaptar correctamente las imágenes ==== */
.img {
  width: 100%;
  height: 250px; /* ajusta la altura general */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid #eee;
  background: #f9f9f9;
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* cambia de cover → contain para mostrar la imagen completa */
  transition: transform 0.5s ease;
}

.card:hover .img img {
  transform: scale(1.05);
}

/* ======== CORRECCIÓN PARA EL MODAL ======== */
#divModalIMG {
  width: 100%;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#modal-imagen {
  width: auto !important;
  height: auto !important;
  max-width: 90vw !important;
  max-height: 80vh !important;
  object-fit: contain !important;
}

/* ===== Asegurar que el modal quede SIEMPRE encima del header ===== */
#producto-modal {
    position: fixed !important;
    z-index: 999999 !important;
}

header, 
header *, 
#header, 
.navbar, 
nav {
    z-index: 1 !important;
}