/* ==================================================
   CARD PRODUCTO PREMIUM 2.0
   Scope: SOLO .card-producto
================================================== */

.card-producto {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(0,0,0,.04);

  transition:
    transform .4s cubic-bezier(.22,.61,.36,1),
    box-shadow .4s ease,
    border-color .3s ease;

  box-shadow:
    0 4px 12px rgba(0,0,0,.04),
    0 12px 28px rgba(0,0,0,.06);
}

/* ================== HOVER ================== */

.card-producto:hover {
  transform: translateY(-8px);
  box-shadow:
    0 14px 30px rgba(0,0,0,.08),
    0 28px 60px rgba(0,0,0,.12);
  border-color: rgba(22,163,74,.25);
}

/* ================== IMAGEN ================== */

.card-producto__img-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
}

.card-producto__img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  padding: 16px;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

.card-producto:hover .card-producto__img {
  transform: scale(1.08);
}

/* Overlay suave */
.card-producto__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.04), transparent 40%);
  opacity: 0;
  transition: opacity .3s ease;
}

.card-producto:hover .card-producto__img-wrap::after {
  opacity: 1;
}

/* ================== CONTENIDO ================== */

.card-producto__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ================== NOMBRE ================== */

.card-producto__nombre {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.25;
  color: #1f2937;
  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* Standard moderno */
  line-clamp: 2;
}

/* ================== PRECIO ================== */

.card-producto__precio {
  font-size: 1.15rem;
  font-weight: 800;
  color: #16a34a;
  letter-spacing: -.3px;
}

.card-producto__precio-anterior {
  font-size: .8rem;
  color: #9ca3af;
  text-decoration: line-through;
}

/* ================== BADGE PREMIUM ================== */

.card-producto__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(220,38,38,.35);
  backdrop-filter: blur(6px);
}

/* ================== VARIANTES ================== */

.card-producto__variantes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card-producto__variante {
  border: 1px solid #e5e7eb;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  transition: all .2s ease;
  background: #f9fafb;
}

.card-producto__variante:hover {
  border-color: #16a34a;
  background: #ecfdf5;
}

.card-producto__variante--agotado {
  opacity: .4;
  cursor: not-allowed;
}

/* ================== BOTÓN ================== */

.card-producto__btn {
  margin-top: auto;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
  font-size: 13px;
  padding: 9px;
  border-radius: 14px;
  font-weight: 600;
  letter-spacing: .3px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  transition:
    transform .2s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.card-producto__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(22,163,74,.35);
}

.card-producto__btn:active {
  transform: scale(.96);
}

/* ================== ANIMACIÓN APARECER ================== */

@keyframes productoFadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-producto--visible {
  animation: productoFadeUp .5s cubic-bezier(.22,.61,.36,1) forwards;
}

/* ================== SKELETON PREMIUM ================== */

.card-producto__skeleton {
  background: linear-gradient(
    90deg,
    #f1f5f9 25%,
    #e2e8f0 37%,
    #f1f5f9 63%
  );
  background-size: 400% 100%;
  animation: skeletonLoading 1.4s ease infinite;
  border-radius: 14px;
}

@keyframes skeletonLoading {
  0% { background-position: 100% 0 }
  100% { background-position: 0 0 }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carrito-anim {
  transform: scale(1.1);
  transition: transform .2s ease;
}

.producto-appear {
  opacity: 0;
  transform: translateY(15px);
}

.producto-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s ease;
}
#zona-superior {
  position: relative;
  z-index: 1;
}


/* Ocultar scrollbar carrusel */
.carrusel-peek::-webkit-scrollbar {
  display: none;
}