Reto Estilización de componentes

Crea un componente Vue que muestre una tarjeta de producto con estilización dinámica. La tarjeta debe cambiar su apariencia según el estado del producto (disponible, agotado, en oferta).

Requisitos específicos:

1. Estructura del componente: Define un componente con una tarjeta que contenga el nombre del producto, precio y estado.
2. Datos reactivos: Incluye las siguientes propiedades en data():
   • productName: nombre del producto
   • price: precio del producto
   • isAvailable: booleano que indica si está disponible
   • isOnSale: booleano que indica si está en oferta
   • stockLevel: número que representa el nivel de stock
3. Clases CSS dinámicas: Utiliza la directiva :class para aplicar:
   • Clase available cuando isAvailable sea true
   • Clase out-of-stock cuando isAvailable sea false
   • Clase on-sale cuando isOnSale sea true
4. Estilos en línea dinámicos: Utiliza la directiva :style para:
   • Cambiar el color del precio según el nivel de stock (verde si > 10, naranja si entre 1-10, rojo si 0)
   • Ajustar la opacidad de la tarjeta según disponibilidad (1.0 si disponible, 0.6 si no disponible)

Los estilos ya vienen definidos en <style scoped> y no es necesario modificarlos.