/* Animacion del carrito */
  @keyframes heartbeat {
    0%, 100% { stroke-width: 1.5; }
    50% { stroke-width: 2.2; }
  }
  .heartbeat {
    animation: heartbeat 1s infinite ease-in-out;
  }

  #productos {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* espacio vertical entre productos */
  }

.modelo_producto {
  display: grid;
  grid-template-columns: 25% 55% 20%;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%; /* asegurar que no se desborde */
  box-sizing: border-box; /* incluye padding en el ancho */
}

/* Elementos internos ocupando todo su bloque */
.modelo_producto > div {
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* padding incluido dentro del ancho/alto */
}

/* Para imágenes y contenido dentro de B, C y D */
.modelo_producto img,
.modelo_producto > div > div {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}


/* Responsive: a partir de 768px */
@media (max-width: 768px) {

    /* Imagen dentro de B */
  .modelo_producto > div:first-child img {
    display: block;
    min-width: 200px;
    min-height: 200px;
    max-width: 100%;
    height: auto;
    object-fit: contain; /* evita deformación */
    margin: 0 auto; /* centra horizontalmente */
  }


  #productos {
    gap: 3rem;
  }

  .modelo_producto {
    grid-template-columns: 1fr;   /* 1 sola columna */
    grid-template-rows: auto auto auto; /* 3 filas */
    gap: 1rem;
  }

  /* B (imagen) fila 1 */
  .modelo_producto > div:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  /* C (detalles) fila 2 */
  .modelo_producto > div:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  /* D (precio, cantidad, botones) fila 3 */
  .modelo_producto > div:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
}


@media (max-width: 543px) {
    #productos {
    gap: 5rem;
  }
}

@media (max-width: 400px) {
    #productos {
    gap: 7rem;
  }

}