diff --git a/clase7.html b/clase7.html
index d7458ff6f..863d7b5e6 100644
--- a/clase7.html
+++ b/clase7.html
@@ -4,9 +4,11 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
+  
   <title>Document</title>
   <style>
     :root {
diff --git a/index.html b/index.html
index 8e91d429a..8441a28d3 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,12 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+  <title>YardSale: Tienda online de cositas chidas</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
-
   <link rel="stylesheet" href="./styles.css">
 
-  <title>YardSale: tienda online de cositas chidas</title>
 </head>
 <body>
   <nav>
@@ -45,81 +43,79 @@
     <div class="navbar-right">
       <ul>
         <li class="navbar-email">platzi@example.com</li>
-        <li class="navbar-shopping-cart">
+        <li class="navbar-shopping-cart" >
           <img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
-          <div>2</div>
+          <div id="idcarritoCant">0</div>
         </li>
       </ul>
     </div>
-
     <div class="desktop-menu inactive">
-      <ul>
-        <li>
-          <a href="/" class="title">My orders</a>
-        </li>
-  
-        <li>
-          <a href="/">My account</a>
-        </li>
-  
-        <li>
-          <a href="/">Sign out</a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="mobile-menu inactive">
-      <ul>
-        <li>
-          <a href="/">CATEGORIES</a>
-        </li>
-        <li>
-          <a href="/">All</a>
-        </li>
-        <li>
-          <a href="/">Clothes</a>
-        </li>
-        <li>
-          <a href="/">Electronics</a>
-        </li>
-        <li>
-          <a href="/">Furnitures</a>
-        </li>
-        <li>
-          <a href="/">Toys</a>
-        </li>
-        <li>
-          <a href="/">Other</a>
-        </li>
-      </ul>
-  
-      <ul>
-        <li>
-          <a href="/">My orders</a>
-        </li>
-        <li>
-          <a href="/">My account</a>
-        </li>
-      </ul>
-  
-      <ul>
-        <li>
-          <a href="/" class="email">platzi@example.com</a>
-        </li>
-        <li>
-          <a href="/" class="sign-out">Sign out</a>
-        </li>
-      </ul>
-    </div>
+        <ul>
+          <li>
+            <a href="/" class="title">My orders</a>
+          </li>
+    
+          <li>
+            <a href="/">My account</a>
+          </li>
+    
+          <li>
+            <a href="/">Sign out</a>
+          </li>
+        </ul>
+      </div>
+      <div class="mobile-menu inactive">
+        <ul>
+          <li>
+            <a href="/">CATEGORIES</a>
+          </li>
+          <li>
+            <a href="/">All</a>
+          </li>
+          <li>
+            <a href="/">Clothes</a>
+          </li>
+          <li>
+            <a href="/">Electronics</a>
+          </li>
+          <li>
+            <a href="/">Furnitures</a>
+          </li>
+          <li>
+            <a href="/">Toys</a>
+          </li>
+          <li>
+            <a href="/">Other</a>
+          </li>
+        </ul>
+    
+        <ul>
+          <li>
+            <a href="/">My orders</a>
+          </li>
+          <li>
+            <a href="/">My account</a>
+          </li>
+        </ul>
+    
+        <ul>
+          <li>
+            <a href="/" class="email">platzi@example.com</a>
+          </li>
+          <li>
+            <a href="/" class="sign-out">Sign out</a>
+          </li>
+        </ul>
+      </div>
   </nav>
-
   <aside id="shoppingCartContainer" class="inactive">
     <div class="title-container">
       <img src="./icons/flechita.svg" alt="arrow">
       <p class="title">My order</p>
     </div>
 
-    <div class="my-order-content">
+    <div class="my-order-content" >
+      <!--
       <div class="shopping-cart">
         <figure>
           <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
@@ -146,41 +142,41 @@
         <p>$30,00</p>
         <img src="./icons/icon_close.png" alt="close">
       </div>
-
-      <div class="order">
-        <p>
-          <span>Total</span>
-        </p>
-        <p>$560.00</p>
-      </div>
-
-      <button class="primary-button">
-        Checkout
-      </button>
+-->
+      
     </div>
+    <div class="order">
+      <p>
+        <span>Total</span>
+      </p>
+      <p id="idvalorTotal">$560.00</p>
+    </div>
+
+    <button class="primary-button">
+      Checkout
+    </button>
   </div>
   </aside>
-
   <aside id="productDetail" class="inactive">
     <div class="product-detail-close">
       <img src="./icons/icon_close.png" alt="close">
     </div>
-    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
+    <img id="idImgpr"src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
     <div class="product-info">
-      <p>$35,00</p>
-      <p>Bike</p>
+      <p id="idprice"></p>
+      <p id="idnomprod"></p>
       <p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
-      <button class="primary-button add-to-cart-button">
+      <button id="idButton"  class="primary-button add-to-cart-button">
         <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
-        Add to cart
+        Agregar al Carrito
       </button>
     </div>
   </aside>
 
   <section class="main-container">
     <div class="cards-container">
-
-      <!-- <div class="product-card">
+<!--
+      <div class="product-card">
         <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
         <div class="product-info">
           <div>
@@ -191,11 +187,11 @@
             <img src="./icons/bt_add_to_cart.svg" alt="">
           </figure>
         </div>
-      </div> -->
+        -->
+      </div>
+
 
-    </div>
-  </section>
 
   <script src="./main.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
index 7ebb1bb3e..8ad23c8ec 100644
--- a/main.js
+++ b/main.js
@@ -1,119 +1,226 @@
+
 const menuEmail = document.querySelector('.navbar-email');
-const menuHamIcon = document.querySelector('.menu');
-const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
-const productDetailCloseIcon = document.querySelector('.product-detail-close')
 const desktopMenu = document.querySelector('.desktop-menu');
+
+const burguerMenu = document.querySelector('.menu');
 const mobileMenu = document.querySelector('.mobile-menu');
+
+//
+const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
 const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
 const productDetailContainer = document.querySelector('#productDetail');
 const cardsContainer = document.querySelector('.cards-container');
+const productDetailCloseIcon= document.querySelector('.product-detail-close');
+const myOrderContent = document.querySelector('.my-order-content');
+myOrderContent.setAttribute("id","idmyOrderContent");
+const ididshopping=document.querySelector('#idshopping');
 
-menuEmail.addEventListener('click', toggleDesktopMenu);
-menuHamIcon.addEventListener('click', toggleMobileMenu);
-menuCarritoIcon.addEventListener('click', toggleCarritoAside);
-productDetailCloseIcon.addEventListener('click', closeProductDetailAside);
+const imagen = document.querySelector("#idImgpr");
+const priceProduct = document.querySelector("#idprice");
+const nombProduct = document.querySelector("#idnomprod");
+const buttonComprar= document.querySelector("#idButton");
+const carritoCant= document.querySelector("#idcarritoCant");
+const shoppingcart= document.querySelector(".shopping-cart");
+const idvalortotal= document.querySelector("#idvalorTotal");
 
-function toggleDesktopMenu() {
-  const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
 
-  if (!isAsideClosed) {
-    shoppingCartContainer.classList.add('inactive');
-  }
-  
-  desktopMenu.classList.toggle('inactive');
-}
+menuEmail.addEventListener('click',toggleDesktopMenu);
+burguerMenu.addEventListener('click',toggleMobileMenu);
+menuCarritoIcon.addEventListener('click',toggleCarritoAside);
+productDetailCloseIcon.addEventListener('click',closeProductDetailAside);
+buttonComprar.addEventListener('click',eventButton);
 
-function toggleMobileMenu() {
-  const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+//arreglos 
+const valorDetallesProductos=[];
+var canTotalDetaProd;
+var costoTotal=0;
 
-  if (!isAsideClosed) {
-    shoppingCartContainer.classList.add('inactive'); 
-  }
 
-  closeProductDetailAside();
+// generador de eventos de botones
+function eventButton(event){
+    
+   var valorDetalle=document.getElementById("idprice").innerHTML;
+ 
+   var imagencompra= imagen.getAttribute("src", event.target.src); 
+   var valorProdDetalle= parseInt(valorDetalle.substring(1,7));
+   var valorDetalleProducto= valorDetalle.substring(15,50);
+   
+   valorDetallesProductos.push({
+      detImag:imagencompra,
+      valorProd: valorProdDetalle,
+      valorDetalleProd:valorDetalleProducto
+   });
+   costoTotal+=valorProdDetalle;
+   // asignamos al icono de carrito la cantidad de productos que comprará
+   var valorCarritoprevio= parseInt(document.getElementById("idcarritoCant").innerHTML);    
+   valorCarritoprevio +=1;
+   carritoCant.innerHTML= valorCarritoprevio;
   
-  mobileMenu.classList.toggle('inactive');
+   
 }
 
-function toggleCarritoAside() {
-  const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
-  
-  if (!isMobileMenuClosed) {
-    mobileMenu.classList.add('inactive');
-  }
+// creamos una funcion para realizar el evento de click
+function toggleDesktopMenu(){
+    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+    if(!isAsideClosed){
+      shoppingCartContainer.classList.add('inactive');
+    } 
+       desktopMenu.classList.toggle('inactive');
+}
+function toggleMobileMenu(){
+    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+    if(!isAsideClosed){
+      shoppingCartContainer.classList.add('inactive');
+    }
+    closeProductDetailAside();
+    mobileMenu.classList.toggle('inactive');
 
-  const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
-  
-  if (!isProductDetailClosed) {
-    productDetailContainer.classList.add('inactive'); 
-  }
-  
-  shoppingCartContainer.classList.toggle('inactive');
 }
 
-function openProductDetailAside() {
-  shoppingCartContainer.classList.add('inactive');
-  productDetailContainer.classList.remove('inactive');
+function toggleCarritoAside(e){
+   myOrderContent.innerHTML="";
+   idvalortotal.innerHTML="$"+costoTotal;
+    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
+    if(!isMobileMenuClosed){
+        mobileMenu.classList.add('inactive');
+     }
+     const isdesktopMenuClosed = desktopMenu.classList.contains('inactive');
+    if(!isdesktopMenuClosed){
+        desktopMenu.classList.add('inactive');
+    }
+    shoppingCartContainer.classList.toggle('inactive');
+     
+    const isproductDetailClose = productDetailContainer.classList.contains('inactive');
+    if(!isproductDetailClose){
+      productDetailContainer.classList.add('inactive');
+     }
+     
+     const isshoppingCartContainerclose= shoppingCartContainer.classList.contains('inactive');
+     if(!isshoppingCartContainerclose){      
+       
+       renderDetallesCompra(valorDetallesProductos);
+       
+     }   
+    
+     
+
+}
+function openProductDetailAside (event){
+   shoppingCartContainer.classList.add('inactive');  
+   productDetailContainer.classList.remove('inactive');
+   desktopMenu.classList.add("inactive");
+   imagen.setAttribute("src", event.target.src);
+   priceProduct.innerText = event.target.nextElementSibling.innerText; 
+  
 }
 
-function closeProductDetailAside() {
-  productDetailContainer.classList.add('inactive');
+function closeProductDetailAside (){
+   productDetailContainer.classList.add('inactive');
 }
 
-const productList = [];
+// arreglo que nos devuelve la informacion luego de una consulta a BD
+const productList=[];
+//agregamos nuevos elementos al arreglo, mediante objetos
 productList.push({
-  name: 'Bike',
-  price: 120,
-  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
-});
+   name:'Zapato para dama',
+   price:'120,00',
+   image:'https://www.paylesscolombia.co/38855-medium_default/women_s_fashion_sneakers.jpg'
+})
+
 productList.push({
-  name: 'Pantalla',
-  price: 220,
-  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
-});
+   name:'Zapato casual Hombre',
+   price:'150,00',
+   image:'https://www.paylesscolombia.co/38645-medium_default/men_s_botero_casual_shoes.jpg'
+})
+
 productList.push({
-  name: 'Compu',
-  price: 620,
-  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
-});
-
-function renderProducts(arr) {
-  for (product of arr) {
-    const productCard = document.createElement('div');
-    productCard.classList.add('product-card');
-  
-    // product= {name, price, image} -> product.image
-    const productImg = document.createElement('img');
-    productImg.setAttribute('src', product.image);
-    productImg.addEventListener('click', openProductDetailAside);
-  
-    const productInfo = document.createElement('div');
-    productInfo.classList.add('product-info');
-  
-    const productInfoDiv = document.createElement('div');
-  
-    const productPrice = document.createElement('p');
-    productPrice.innerText = '$' + product.price;
-    const productName = document.createElement('p');
-    productName.innerText = product.name;
-  
-    productInfoDiv.appendChild(productPrice);
-    productInfoDiv.appendChild(productName);
-  
-    const productInfoFigure = document.createElement('figure');
-    const productImgCart = document.createElement('img');
-    productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');
-  
-    productInfoFigure.appendChild(productImgCart);
-  
-    productInfo.appendChild(productInfoDiv);
-    productInfo.appendChild(productInfoFigure);
-  
-    productCard.appendChild(productImg);
-    productCard.appendChild(productInfo);
-  
-    cardsContainer.appendChild(productCard);
-  }
+   name:'Zapato casual Hombre',
+   price:'112,00',
+   image:'https://www.paylesscolombia.co/38684-medium_default/men_s_chukka_casual_shoes.jpg'
+})
+productList.push({
+   name:'Zapato para Niño',
+   price:'100,00',
+   image:'https://www.paylesscolombia.co/38882-medium_default/boy_s_toddler_lace_court_sport_shoes.jpg'
+})
+
+
+function renderProducts(arreglo){
+   for(product of arreglo){
+      const productCard = document.createElement('div');
+      productCard.classList.add('product-card');
+   
+      //creamos la imagen
+      const productimg= document.createElement('img');
+      productimg.setAttribute('src',product.image);
+      productimg.addEventListener('click',openProductDetailAside);
+   
+      //creamos class product-info
+      const productInfo = document.createElement('div');
+      productInfo.classList.add('product-info');
+   
+      // creamos un div vacio
+     const productInfoDiv= document.createElement('div');
+   
+     const productPrice= document.createElement('p');
+     productPrice.innerText= '$'+ product.price;
+     const productName= document.createElement('p');
+     productName.innerText= product.name;
+   
+     productInfoDiv.appendChild(productPrice);
+     productInfoDiv.appendChild(productName);
+   
+     // creamos etiqueta figure
+     const productInfoFigure= document.createElement('figure');
+    //creamos la imagen
+     const productImgCart= document.createElement('img');
+     productImgCart.setAttribute('src','./icons/bt_add_to_cart.svg');
+   
+    //appendChild()método agrega un nodo (elemento) como último hijo de un elemento
+     productInfoFigure.appendChild(productImgCart);
+   
+     productInfo.appendChild(productInfoDiv);
+     productInfo.appendChild(productInfoFigure);
+   
+     productCard.appendChild(productimg);
+     productCard.appendChild(productInfo);
+   
+     cardsContainer.appendChild(productCard);
+   }
 }
 
 renderProducts(productList);
+function renderDetallesCompra(array){
+   for(detalleCompraProduct of array){
+      const shoppingCart = document.createElement('div');
+      shoppingCart.classList.add('shopping-cart');
+      shoppingCart.setAttribute("id","idshopping");
+      // creamos etiqueta figure
+      const detalleInfoFigure= document.createElement('figure');
+     //creamos la imagen
+      const detalleImg= document.createElement('img');
+      detalleImg.setAttribute('src',detalleCompraProduct.detImag);
+      detalleInfoFigure.appendChild(detalleImg);
+     // creamos los p
+     const detalleProductNombre= document.createElement('p');
+     detalleProductNombre.innerText=  detalleCompraProduct.valorDetalleProd;
+
+     const detalleProductPrice= document.createElement('p');
+     detalleProductPrice.innerText= '$'+ detalleCompraProduct.valorProd;     
+
+     //creamos la imagen de cerrar 
+     const detalletImgCart= document.createElement('img');
+     detalletImgCart.setAttribute('src','./icons/icon_close.png');
+     detalletImgCart.setAttribute('alt','close');
+
+     shoppingCart.appendChild(detalletImgCart);
+     shoppingCart.appendChild(detalleInfoFigure);
+     shoppingCart.appendChild(detalleProductNombre);
+     shoppingCart.appendChild(detalleProductPrice);
+     
+     myOrderContent.appendChild(shoppingCart);
+   }
+   
+};
+
+
diff --git a/styles.css b/styles.css
index 7228eedc8..87c8a2056 100644
--- a/styles.css
+++ b/styles.css
@@ -1,135 +1,138 @@
-/* General */
-:root {
-  --white: #FFFFFF;
-  --black: #000000;
-  --very-light-pink: #C7C7C7;
-  --text-input-field: #F7F7F7;
-  --hospital-green: #ACD9B2;
-  --sm: 14px;
-  --md: 16px;
-  --lg: 18px;
-}
-body {
-  margin: 0;
-  font-family: 'Quicksand', sans-serif;
-}
-.inactive {
-  display: none;
-}
+    /* estilos generales*/
+    
+    :root {
+      --white: #FFFFFF;
+      --black: #000000;
+      --very-light-pink: #C7C7C7;
+      --text-input-field: #F7F7F7;
+      --hospital-green: #ACD9B2;
+      --sm: 14px;
+      --md: 16px;
+      --lg: 18px;
+    }
+    body {
+      margin: 0;
+      font-family: 'Quicksand', sans-serif;
+    }
 
+    .inactive{
+      display: none;
+    }
+/* navbar generales */
+    nav {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 24px;
+      border-bottom: 1px solid var(--very-light-pink);
+    }
+    .menu {
+      display: none;
+    }
+    .logo {
+      width: 100px;
+    }
+    .navbar-left ul,
+    .navbar-right ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      height: 60px;
+    }
+    .navbar-left {
+      display: flex;
+    }
+    .navbar-left ul {
+      margin-left: 12px;
+    }
+    .navbar-left ul li a,
+    .navbar-right ul li a {
+      text-decoration: none;
+      color: var(--very-light-pink);
+      border: 1px solid var(--white);
+      padding: 8px;
+      border-radius: 8px;
+    }
+    .navbar-left ul li a:hover,
+    .navbar-right ul li a:hover {
+      border: 1px solid var(--hospital-green);
+      color: var(--hospital-green);
+    }
+    .navbar-email {
+      color: var(--very-light-pink);
+      cursor: pointer;
+      font-size: var(--sm);
+      margin-right: 12px;
+    }
+    .navbar-shopping-cart {
+      position: relative;
+    }
+    .navbar-shopping-cart div {
+      width: 16px;
+      height: 16px;
+      background-color: var(--hospital-green);
+      border-radius: 50%;
+      font-size: var(--sm);
+      font-weight: bold;
+      position: absolute;
+      top: -6px;
+      right: -3px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-/* Navbar (general) */
-nav {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 24px;
-  border-bottom: 1px solid var(--very-light-pink);
-}
-.menu {
-  display: none;
-}
-.logo {
-  width: 100px;
-}
-.navbar-left ul,
-.navbar-right ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  height: 60px;
-}
-.navbar-left {
-  display: flex;
-}
-.navbar-left ul {
-  margin-left: 12px;
-}
-.navbar-left ul li a,
-.navbar-right ul li a {
-  text-decoration: none;
-  color: var(--very-light-pink);
-  border: 1px solid var(--white);
-  padding: 8px;
-  border-radius: 8px;
-}
-.navbar-left ul li a:hover,
-.navbar-right ul li a:hover {
-  border: 1px solid var(--hospital-green);
-  color: var(--hospital-green);
-}
-.navbar-email {
-  color: var(--very-light-pink);
-  cursor: pointer;
-  font-size: var(--sm);
-  margin-right: 12px;
-}
-.navbar-shopping-cart {
-  position: relative;
-}
-.navbar-shopping-cart div {
-  width: 16px;
-  height: 16px;
-  background-color: var(--hospital-green);
-  border-radius: 50%;
-  font-size: var(--sm);
-  font-weight: bold;
-  position: absolute;
-  top: -6px;
-  right: -3px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+    /* menu generales*/
+    .desktop-menu {
+        position: absolute;
+        background: var(--white);        
+        top: 60px;
+        right: 60px;
+        width: 100px;
+        height: auto;
+        border: 1px solid var(--very-light-pink);
+        border-radius: 6px;
+        padding: 20px 20px 0 20px;
+      }
+      .desktop-menu ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      .desktop-menu ul li {
+        text-align: end;
+      }
+      .desktop-menu ul li:nth-child(1),
+      .desktop-menu ul li:nth-child(2) {
+        font-weight: bold;
+      }
+      .desktop-menu ul li:last-child {
+        padding-top: 20px;
+        border-top: 1px solid var(--very-light-pink);
+      }
+      .desktop-menu ul li:last-child a {
+        color: var(--hospital-green);
+        font-size: var(--sm);
+      }
+      .desktop-menu ul li a {
+        color: var(--back);
+        text-decoration: none;
+        margin-bottom: 20px;
+        display: inline-block;
+      }
 
-/* Menu en desktop */
-.desktop-menu {
-  position: absolute;
-  top: 60px;
-  right: 60px;
-  background: var(--white);
-  width: 100px;
-  height: auto;
-  border: 1px solid var(--very-light-pink);
-  border-radius: 6px;
-  padding: 20px 20px 0 20px;
-}
-.desktop-menu ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.desktop-menu ul li {
-  text-align: end;
-}
-.desktop-menu ul li:nth-child(1),
-.desktop-menu ul li:nth-child(2) {
-  font-weight: bold;
-}
-.desktop-menu ul li:last-child {
-  padding-top: 20px;
-  border-top: 1px solid var(--very-light-pink);
-}
-.desktop-menu ul li:last-child a {
-  color: var(--hospital-green);
-  font-size: var(--sm);
-}
-.desktop-menu ul li a {
-  color: var(--back);
-  text-decoration: none;
-  margin-bottom: 20px;
-  display: inline-block;
-}
+/* Menu en Mobile*/
 
-/* Menu en mobile */
 .mobile-menu {
-  background-color: var(--white);
+  padding: 24px;
   position: absolute;
   top: 60px;
+  padding: 24px;
+  background-color: white;
   left: 0;
   width: 100%;
-  padding: 24px;
+  height: 100%;
 }
 .mobile-menu a {
   text-decoration: none;
@@ -157,19 +160,19 @@ nav {
   color: var(--hospital-green) !important;
 }
 
+/* aside product datail*/
 
-/* Aside (product detail y carrito) */
 aside {
-  background-color: var(--white);
-  width: 360px;
+  width: 360px;  
   box-sizing: border-box;
   position: absolute;
   right: 0;
+  background-color: var(--white);
 }
+/** ShoppingCart**/
 
-/* ShoppingCart */
 #shoppingCartContainer {
-  padding: 0 24px;
+  padding: 0 24px;  
 }
 .title-container {
   display: flex;
@@ -238,8 +241,7 @@ aside {
   font-weight: bold;
   height: 50px;
 }
-
-/* ProductDetail */
+/* Product Detail */
 .product-detail-close {
   background: var(--white);
   width: 14px;
@@ -297,9 +299,13 @@ aside {
   align-items: center;
   justify-content: center;
 }
+@media (max-width: 640px) {
+  .product-detail {
+    width: 100%;
+  }
+}
 
-
-/* Product List */
+/* PRODUCT LIST*/
 .cards-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, 240px);
@@ -335,7 +341,7 @@ aside {
   margin-top: 0;
   margin-bottom: 4px;
 }
-.product-card .product-info div p:nth-child(2) {
+.product-info div p:nth-child(2) {
   font-size: var(--sm);
   margin-top: 0;
   margin-bottom: 0;
@@ -343,38 +349,38 @@ aside {
 }
 
 
-@media (max-width: 640px) {
-  .menu {
-    display: block;
-  }
-  .navbar-left ul {
-    display: none;
-  }
-  .navbar-email {
-    display: none;
-  }
-  .desktop-menu {
-    display: none;
-  }
-
-  aside {
-    width: 100%;
-  }
+    @media (max-width: 640px) {
+      .menu {
+        display: block;
+      }
+      .navbar-left ul {
+        display: none;
+      }
+      .navbar-email {
+        display: none;
+      }
+      .desktop-menu{
+        display: none;
+      }
+      aside {
+        width: 100%;
+      }
+      .cards-container {
+        grid-template-columns: repeat(auto-fill, 140px);
+      }
+      .product-card {
+        width: 140px;
+      }
+      .product-card img {
+        width: 140px;
+        height: 140px;
+      }
 
-  .cards-container {
-    grid-template-columns: repeat(auto-fill, 140px);
-  }
-  .product-card {
-    width: 140px;
-  }
-  .product-card img {
-    width: 140px;
-    height: 140px;
-  }
-}
+    }
 
-@media (min-width: 641px) {
-  .mobile-menu {
-    display: none;
-  }
-}
+    @media (min-width: 641px) {
+     .mobile-menu{
+      display: none;
+     }
+    }
+ 
\ No newline at end of file
