/* ================================================================
   TARJETA DE PRODUCTO — componente único y compartido
   ================================================================
   Fuente de verdad: la tarjeta de "Los que todos repiten" (Más
   vendidos) del home. Este archivo lo cargan el home, la ficha de
   producto y cualquier página nueva que muestre productos — nunca
   se copia ni se recrea, solo se incluye este archivo.

   Requiere las variables de color del :root del sitio (--azul,
   --morado, --durazno, --resalte, --cta, --cta-hover, --cta-txt,
   --azul-hondo, --durazno-hondo, --resalte-hondo, --borde,
   --tinta-suave) ya definidas por la página que lo incluya.
   ================================================================ */

.mv-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.mv-prod {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: 24px;
  padding: 150px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .25s, box-shadow .25s;
  flex: 0 0 calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);
  /* Es un <a>, no un <div>: lleva a la ficha del producto. Sin esto
     se ve como un link normal (azul, subrayado). */
  color: inherit;
  text-decoration: none;
}

.mv-prod:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(30, 43, 39, .12);
}

.mv-foto {
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 220px;
  max-width: none;
  z-index: 2;
  filter: drop-shadow(0 18px 26px rgba(30, 43, 39, .2));
  pointer-events: none;
  transition: transform .3s;
}

/* Blindaje: tarjeta-producto.js SIEMPRE pone la clase mv-foto en el
   <img> (incluso con la imagen de repuesto), así que en teoría esta
   regla nunca hace falta — pero si algún día algo la pierde, esta
   segunda regla (misma posición/tamaño, por selector de descendiente
   en vez de por clase) contiene la foto de todos modos en lugar de
   dejarla salir a su tamaño natural y tapar la tarjeta. */
.mv-prod picture img {
  width: auto;
  height: 220px;
  max-width: none;
}

.mv-prod:hover .mv-foto {
  transform: translateX(-50%) rotate(-4deg) scale(1.05);
}

.mv-aura {
  position: absolute;
  top: -85px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 190px;
  border-radius: 50%;
  filter: blur(22px);
  opacity: .22;
}

.mv-a-azul {
  background: var(--azul);
}

.mv-a-morado {
  background: #6B4FA8;
}

.mv-a-durazno {
  background: var(--durazno);
}

.mv-a-verde {
  background: var(--resalte);
}

.mv-a-cafe {
  background: var(--cafe);
}

.mv-a-rojo {
  background: var(--rojo);
}

.mv-badge-fuego {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: 'Poppins';
  font-size: 10px;
  font-weight: 800;
  background: var(--cta);
  color: var(--cta-txt);
  border-radius: 999px;
  padding: 5px 11px;
  z-index: 3;
}

.mv-linea-tag {
  font-family: 'Poppins';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.mv-t-azul {
  color: var(--azul-hondo);
}

.mv-t-morado {
  color: var(--morado);
}

.mv-t-durazno {
  color: var(--durazno-hondo);
}

.mv-t-verde {
  color: var(--resalte-hondo);
}

.mv-t-cafe {
  color: var(--cafe-hondo);
}

.mv-t-rojo {
  color: var(--rojo);
}

.mv-prod b {
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
}

.mv-estrellas {
  color: var(--cta);
  font-size: 13px;
  letter-spacing: 1px;
}

.mv-estrellas small {
  color: var(--tinta-suave);
  font-size: 11px;
  letter-spacing: 0;
  margin-left: 5px;
}

.mv-precio-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
}

.mv-precio {
  font-family: 'Poppins';
  font-weight: 800;
  font-size: 17px;
}

.mv-precio small {
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-suave);
}

.mv-btn-cart {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--cta);
  color: var(--cta-txt);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 17px;
  transition: transform .18s, background .2s;
  flex-shrink: 0;
}

.mv-btn-cart:hover {
  transform: translateY(-2px) scale(1.06);
  background: var(--cta-hover);
}

@media(max-width:980px) {
  .mv-grid {
    row-gap: 140px;
    column-gap: 28px;
  }
  .mv-prod {
    flex-basis: calc((100% - 28px) / 2);
    max-width: calc((100% - 28px) / 2);
  }
}

@media(max-width:520px) {
  .mv-grid {
    row-gap: 140px;
  }
  .mv-prod {
    flex-basis: 100%;
    max-width: 100%;
  }
}