From 5c83090685c01f1f015676d29e66e0db4f297215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Wed, 10 Sep 2025 10:59:45 +0200
Subject: [PATCH] productora page

---
 assets/img/eye.svg           |   4 +
 assets/img/info.svg          |   3 +
 assets/img/rotate-ccw.svg    |   3 +
 assets/img/shopping-cart.svg |   3 +
 assets/img/truck.svg         |   3 +
 components/ItemsRow.vue      | 183 ++++++++++----
 components/ProductCard.vue   | 470 +++++++++++------------------------
 pages/productoras/[id].vue   | 228 ++++++++++++-----
 pages/productoras/index.vue  |   6 +-
 9 files changed, 467 insertions(+), 436 deletions(-)
 create mode 100644 assets/img/eye.svg
 create mode 100644 assets/img/info.svg
 create mode 100644 assets/img/rotate-ccw.svg
 create mode 100644 assets/img/shopping-cart.svg
 create mode 100644 assets/img/truck.svg

diff --git a/assets/img/eye.svg b/assets/img/eye.svg
new file mode 100644
index 0000000..1e58749
--- /dev/null
+++ b/assets/img/eye.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.87468 8.732C1.81912 8.58232 1.81912 8.41767 1.87468 8.268C2.41581 6.9559 3.33435 5.83402 4.51386 5.0446C5.69336 4.25517 7.08071 3.83374 8.50001 3.83374C9.91932 3.83374 11.3067 4.25517 12.4862 5.0446C13.6657 5.83402 14.5842 6.9559 15.1253 8.268C15.1809 8.41767 15.1809 8.58232 15.1253 8.732C14.5842 10.0441 13.6657 11.166 12.4862 11.9554C11.3067 12.7448 9.91932 13.1663 8.50001 13.1663C7.08071 13.1663 5.69336 12.7448 4.51386 11.9554C3.33435 11.166 2.41581 10.0441 1.87468 8.732Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.50001 10.5C9.60458 10.5 10.5 9.60457 10.5 8.5C10.5 7.39543 9.60458 6.5 8.50001 6.5C7.39544 6.5 6.50001 7.39543 6.50001 8.5C6.50001 9.60457 7.39544 10.5 8.50001 10.5Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/img/info.svg b/assets/img/info.svg
new file mode 100644
index 0000000..20620df
--- /dev/null
+++ b/assets/img/info.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/img/rotate-ccw.svg b/assets/img/rotate-ccw.svg
new file mode 100644
index 0000000..c8342e0
--- /dev/null
+++ b/assets/img/rotate-ccw.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12C3 13.78 3.52784 15.5201 4.51677 17.0001C5.50571 18.4802 6.91131 19.6337 8.55585 20.3149C10.2004 20.9961 12.01 21.1743 13.7558 20.8271C15.5016 20.4798 17.1053 19.6226 18.364 18.364C19.6226 17.1053 20.4798 15.5016 20.8271 13.7558C21.1743 12.01 20.9961 10.2004 20.3149 8.55585C19.6337 6.91131 18.4802 5.50571 17.0001 4.51677C15.5201 3.52784 13.78 3 12 3C9.48395 3.00947 7.06897 3.99122 5.26 5.74L3 8M3 8V3M3 8H8" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/img/shopping-cart.svg b/assets/img/shopping-cart.svg
new file mode 100644
index 0000000..f3d1b07
--- /dev/null
+++ b/assets/img/shopping-cart.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.8667 1.8667H3.20003L4.97337 10.1467C5.03842 10.4499 5.20715 10.721 5.45051 10.9133C5.69387 11.1055 5.99664 11.2069 6.3067 11.2H12.8267C13.1301 11.1995 13.4244 11.0956 13.6607 10.9053C13.8971 10.715 14.0615 10.4497 14.1267 10.1534L15.2267 5.20003H3.91337M6.50003 14.5C6.50003 14.8682 6.20156 15.1667 5.83337 15.1667C5.46518 15.1667 5.1667 14.8682 5.1667 14.5C5.1667 14.1318 5.46518 13.8334 5.83337 13.8334C6.20156 13.8334 6.50003 14.1318 6.50003 14.5ZM13.8334 14.5C13.8334 14.8682 13.5349 15.1667 13.1667 15.1667C12.7985 15.1667 12.5 14.8682 12.5 14.5C12.5 14.1318 12.7985 13.8334 13.1667 13.8334C13.5349 13.8334 13.8334 14.1318 13.8334 14.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/img/truck.svg b/assets/img/truck.svg
new file mode 100644
index 0000000..7f4c74a
--- /dev/null
+++ b/assets/img/truck.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1641 18.5V6.5C14.1641 5.96957 13.9533 5.46086 13.5783 5.08579C13.2032 4.71071 12.6945 4.5 12.1641 4.5H4.16406C3.63363 4.5 3.12492 4.71071 2.74985 5.08579C2.37478 5.46086 2.16406 5.96957 2.16406 6.5V17.5C2.16406 17.7652 2.26942 18.0196 2.45696 18.2071C2.64449 18.3946 2.89885 18.5 3.16406 18.5H5.16406M5.16406 18.5C5.16406 19.6046 6.05949 20.5 7.16406 20.5C8.26863 20.5 9.16406 19.6046 9.16406 18.5M5.16406 18.5C5.16406 17.3954 6.05949 16.5 7.16406 16.5C8.26863 16.5 9.16406 17.3954 9.16406 18.5M15.1641 18.5H9.16406M15.1641 18.5C15.1641 19.6046 16.0595 20.5 17.1641 20.5C18.2686 20.5 19.1641 19.6046 19.1641 18.5M15.1641 18.5C15.1641 17.3954 16.0595 16.5 17.1641 16.5C18.2686 16.5 19.1641 17.3954 19.1641 18.5M19.1641 18.5H21.1641C21.4293 18.5 21.6836 18.3946 21.8712 18.2071C22.0587 18.0196 22.1641 17.7652 22.1641 17.5V13.85C22.1637 13.6231 22.0861 13.403 21.9441 13.226L18.4641 8.876C18.3705 8.75888 18.2519 8.66428 18.1169 8.5992C17.9819 8.53412 17.8339 8.50021 17.6841 8.5H14.1641" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/components/ItemsRow.vue b/components/ItemsRow.vue
index ac44677..05d6c1a 100644
--- a/components/ItemsRow.vue
+++ b/components/ItemsRow.vue
@@ -20,14 +20,26 @@
         :breakpoints-enabled="true"
       >
         <Slide v-for="item in items" :key="item.id" class="slide-container">
-          <NuxtLink :to="formattedItem(item).url" class="slide">
+          <div class="slide">
             <div class="image-container">
               <img class="image" :src="formattedItem(item).image" alt="" />
             </div>
             <div class="details-container">
               <p>{{ formattedItem(item).name }}</p>
+              <p class="company">{{ item.company.company_name }}</p>
+              <p v-if="item.price"  class="price">{{ item.price }}€</p>
             </div>
-          </NuxtLink>
+            <div class="links-btns">
+              <NuxtLink :to="`/productos/${item.id}`" class="div-action show-link">
+                <img class="div-action-img" src="@/assets/img/eye.svg" />
+                VER
+              </NuxtLink>
+              <NuxtLink v-if="item.url" :to="item.url" class="div-action buy-link">
+                <img class="div-action-img" src="@/assets/img/shopping-cart.svg" />
+                COMPRAR
+              </NuxtLink>
+            </div>
+          </div>
         </Slide>
         <template #addons>
           <Navigation />
@@ -129,40 +141,6 @@ export default {
   justify-content: center
 }
 
-.slide-container {
-  padding: 0.5rem;
-}
-
-a {
-  text-decoration: none;
-  color: $color-primary;
-}
-
-.slide {
-  width: 237px;
-  height: 316px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: stretch;
-  padding: 0.5rem;
-  background-color: #FDFCFB;
-  border: 5px solid white;
-  border-radius: 24px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
-  text-decoration: none;
-  p {
-    text-align: center;
-    display: -webkit-box;
-    --webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    width: 100%;
-    font-weight: $medium;
-    font-size: $m;
-  }
-}
-
 .image-container {
   width: 100%;
   height: 11rem;
@@ -181,12 +159,133 @@ a {
   }
 }
 
-.details-container {
-  width: 100%;
-  height: 100%;
+.slide-container {
   padding: 0.5rem;
-  text-align: center;
-  border-radius: 0 0 24px 24px;
-  
 }
+
+.slide {
+  width: 237px;
+  height: 316px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: stretch;
+  background-color: #FDFCFB;
+  border: 5px solid white;
+  border-radius: 24px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
+  text-decoration: none;
+  position: relative; // necesario para controlar hijos absolutos
+  overflow: hidden;
+
+  p {
+    text-align: center;
+    display: -webkit-box;
+    --webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    width: 100%;
+    font-weight: $medium;
+    font-size: $m;
+  }
+
+  // detalles visibles por defecto
+  .details-container {
+    opacity: 1;
+    visibility: visible;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    height: 100%;
+    p {
+      margin: 0;
+    }
+    .company {
+      font-weight: $regular;
+      font-size: $s;
+      margin: 0;
+    }
+    .price {
+      font-weight: $bold;
+      font-size: $m;
+      margin-top: auto;
+      margin-bottom: 2px;
+    }
+  }
+
+  // botones ocultos por defecto
+  .links-btns {
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    bottom: 1rem;
+    left: 0;
+    width: 100%;
+    display: flex;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+  }
+
+  // en hover se intercambian
+  &:hover {
+    .details-container {
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(10px); // opcional efecto
+    }
+
+    .links-btns {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+  }
+}
+
+.links-btns {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.5rem;
+  .div-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-weight: $bold;
+    font-size: $s;
+    text-decoration: none;
+
+    &.show-link {
+      border: 1px solid $color-button;
+      padding: 0.25rem 0.5rem;
+      border-radius: 12px;
+      background-color: white;
+      &:hover {
+        background-color: $color-button;
+        color: white;
+      }
+    }
+
+    &.buy-link {
+      color: white;
+      border: 1px solid $color-button;
+      padding: 0.25rem 0.5rem;
+      border-radius: 12px;
+      background-color: $color-button;
+      &:hover {
+        background-color: white;
+        color: $color-button;
+      }
+    }
+
+    .div-action-img {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}
+
 </style>
diff --git a/components/ProductCard.vue b/components/ProductCard.vue
index 60bc8c1..bb8c0fb 100644
--- a/components/ProductCard.vue
+++ b/components/ProductCard.vue
@@ -1,152 +1,24 @@
 <template>
-  <div class="productcard_container">
-    <div class="row productcard_container-basic">
-      <div class="image_container" :class="expanded ? 'col-md-5' : 'col-md-2'">
-        <img
-          v-if="product.image"
-          class="image"
-          :src="product.image"
-          :alt="product.name"
-        />
-        <img
-          v-else
-          class="image"
-          src="@/assets/img/consumo-default.png"
-          :alt="product.name"
-        />
-      </div>
-      <div class="info_container" :class="expanded ? 'col-md-5' : 'col-md-6'">
-        <h2 v-b-toggle="'collapse-' + product.id" variant="primary">
-          {{ product.name }}
-        </h2>
-        <span v-if="product.price" class="price">{{
-          `${product.price}€`
-        }}</span>
-        <span v-else class="price">Precio a consultar</span>
-        <span v-if="Number(product.shipping_cost)"
-          >| {{ `Gastos de envío ${product.shipping_cost}€` }}</span
-        >
-        <span v-else>| Sin gastos de envío</span>
-
-        <span v-if="product.stock">| {{ `Stock ${product.stock}` }} </span>
-
-        <div
-          class="description"
-          :class="{ 'not-expanded-description': !expanded }"
-        >
-          <p 
-            v-if="product.description"
-            v-html="sanitizedDescription"
-          ></p>
-            <span v-if="product.shipping_terms">{{
-              product.shipping_terms
-            }}</span>
-        </div>
-        <b-collapse :id="'collapse-' + product.id" accordion="my-accordion" @show="onOpen" @hide="onClose">
-          <div class="tags_container">
-            <NuxtLink
-              :to="tagRoute(n)"
-              class="tag_container"
-              v-for="n in product.tags"
-              :key="n"
-            >
-              <img
-                alt="tag image"
-                class="tag_img"
-                src="@/assets/img/latienda-tag.svg"
-              />
-              <span>{{ n }}</span>
-            </NuxtLink>
-          </div>
-          <div class="smlogos_container">
-            <p class="share-text">Comparte:</p>
-            <div class="smlogo_container">
-              <a class="smlogo_link" @click="shareFacebook">
-                <img
-                  class="smlogo_img"
-                  alt="facebook logo"
-                  src="@/assets/img/latienda-smlogo-facebook.svg"
-                />
-              </a>
-            </div>
-            <!-- <a @click="shareTwitter"> -->
-            <a :href="shareTwitter()">
-              <div class="smlogo_container">
-                <img
-                  class="smlogo_img"
-                  alt="twitter logo"
-                  src="@/assets/img/latienda-smlogo-twitter.svg"
-                />
-              </div>
-            </a>
-            <a
-              :href="shareWhatsApp()"
-              data-action="share/whatsapp/share"
-              target="_blank"
-              title="latiendacoop"
-            >
-              <div class="smlogo_container">
-                <img
-                  alt="whatsapp logo"
-                  class="smlogo_img"
-                  src="@/assets/img/latienda-smlogo-whatsapp.svg"
-                />
-              </div>
-            </a>
-          </div>
-          <div v-if="product.company" class="coop_info">
-            <NuxtLink :to="`c/${product.company.id}`">
-              <h2>{{ product.company.company_name }}</h2>
-            </NuxtLink>
-            <p>{{ product.company.description }}</p>
-            <a :href="product.company.web_link">{{
-              product.company.web_link
-            }}</a>
-          </div>
-        </b-collapse>
-      </div>
-      <div
-        :class="
-          expanded
-            ? 'col-md-2 button_container-detail'
-            : 'col-md-4 button_container'
-        "
-        align="center"
-      >
-        <button
-          @click="buyIntent"
-          :class="expanded ? 'button_buy-simple' : 'button_buy'"
-        >
-          <img
-            class="button_cart_img"
-            alt="cart"
-            src="@/assets/img/latienda-carrito.svg"
-          />
-          <span v-show="!expanded">Comprar</span>
-        </button>
-        <div
-          v-if="product.discount && product.discount > 0"
-          class="discount-tag"
-        >
-          {{ `Descuento ${product.discount}%` }}
-        </div>
-        <span v-if="product.company" v-show="!expanded">{{
-          product.company.company_name
-        }}</span>
-      </div>
+  <div class="c-card">
+    <div class="image-container">
+      <img v-if="product.image" class="image" :src="product.image" alt="" />
+      <img v-else class="image" :src="`@/assets/img/consumo-default.svg`" alt="" />
     </div>
-    <div v-if="expanded && relatedProducts" class="related_products">
-      <h2>Productos relacionados</h2>
-      <ProductsRelated :related-products="relatedProducts" />
+    <div class="details-container">
+      <p>{{ product.name }}</p>
+      <p class="company">{{ product.company.company_name }}</p>
+      <p v-if="product.price"  class="price">{{ product.price }}€</p>
+    </div>
+    <div class="links-btns">
+      <NuxtLink :to="`/productos/${product.id}`" class="div-action show-link">
+        <img class="div-action-img" src="@/assets/img/eye.svg" />
+        VER
+      </NuxtLink>
+      <NuxtLink v-if="product.url" :to="product.url" class="div-action buy-link">
+        <img class="div-action-img" src="@/assets/img/shopping-cart.svg" />
+        COMPRAR
+      </NuxtLink>
     </div>
-    <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
-    <BModal 
-        id="modal-center" 
-        v-model="active" 
-        centered 
-        title="latienda.coop" 
-        :ok-variant="modalColor"> {{ modalText }}
-    </BModal>
   </div>
 </template>
 
@@ -312,200 +184,146 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.productcard_container {
-  border: 3px $color-grey-nav solid;
-  border-radius: 5px;
-  margin-bottom: 12px;
-}
-.productcard_container-basic {
-  padding: 25px 20px;
-}
-
-.image_container {
-  height: 100%;
-  overflow: hidden;
-  margin: auto;
-}
-
-.image {
+.image-container {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.info_container {
-  h2 {
-    outline: none;
-    font-weight: $regular;
-    color: $color-navy;
-    font-size: $m;
-  }
-  .price {
-    font-weight: $bold;
-    color: $color-navy;
-    font-size: $m;
-  }
-  span {
-    color: $color-greytext;
-  }
-  .description {
-    margin-top: 8px;
-    font-family: $font-secondary;
-    font-size: $s;
-    color: $color-greytext;
-  }
-}
-
-.not-expanded-description {
-  display: -webkit-box;
-  -webkit-line-clamp: 5;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  height: 11rem;
+  flex-shrink: 0;
+  align-self: stretch;
+  border-radius: 24px 24px 0 0;
   @include mobile {
-    -webkit-line-clamp: 3;
+    max-height: 10rem;
+    max-width: 10rem;
+  }
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 24px 24px 0 0;
   }
 }
-
-.button_container {
+.c-card {
+  width: 237px;
+  height: 316px;
   display: flex;
   flex-direction: column;
-  font-size: $m;
+  align-items: center;
+  justify-content: stretch;
+  background-color: #FDFCFB;
+  border: 5px solid white;
+  border-radius: 24px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
+  text-decoration: none;
+  position: relative; // necesario para controlar hijos absolutos
+  overflow: hidden;
 
-  span {
-    margin-top: 15px;
-    text-align: center;
-    font-weight: medium;
-    font-size: $m;
-    color: $color-navy;
-  }
-
-  .button_buy {
-    border: 3px solid $color-orange;
-    border-radius: 5px;
-    background-color: $color-light;
-
-    &:hover {
-      box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
-      transition: all 0.2s ease;
-    }
-
-    span {
-      color: $color-orange;
-      font-weight: $bold;
-      display: inline-block;
-      margin-bottom: 15px;
-    }
-  }
-}
-
-.button_buy-simple {
-  border: 3px solid $color-orange;
-  border-radius: 8px;
-  background-color: $color-light;
-  padding: 10px 20px;
-
-  &:hover {
-    box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
-    transition: all 0.2s ease;
-  }
-
-  .button_cart_img {
-    margin-right: 0;
-  }
-}
-
-.tag_container {
-  margin: 25px 6px 0 0;
-  border: 2px solid $color-greylayout;
-  border-radius: 5px;
-  padding: 6px 10px;
-  display: inline-block;
-  font-family: $font-secondary;
-  font-size: $xs;
-  color: $color-greytext;
-
-  .tag_img {
-    width: 18px;
-  }
-}
-
-.discount-tag {
-  margin: 5px;
-  border: none;
-  background-color: $color-green;
-  border-radius: 5px;
-  padding: 6px 10px;
-  display: inline-block;
-  font-family: $font-secondary;
-  font-size: $xs;
-  color: $color-greytext;
-}
-
-.share-text {
-  color: $color-navy;
-  font-size: $m;
-  margin-top: 2rem;
-  padding-bottom: 0.2em;
-}
-
-.smlogo_container {
-  cursor: pointer;
-  display: inline-block;
-  margin-bottom: 0.5rem;
-
-  .smlogo_img {
-    width: 40px;
-    fill: $color-greytext;
-  }
-
-  img:hover {
-    transform: scale(1.1);
-    transition: all 0.2s ease;
-  }
-}
-
-.button_cart_img {
-  width: 20px;
-  margin-right: 10px;
-}
-
-.coop_info {
-  margin-top: 25px;
-  p,
-  a {
-    margin-top: 8px;
-    font-family: $font-secondary;
-    font-size: $s;
-    color: $color-greytext;
-  }
-  a {
-    text-decoration: underline;
-  }
   p {
+    text-align: center;
     display: -webkit-box;
-    -webkit-line-clamp: 3;
+    --webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
-  }
-}
-
-.related_products {
-  background-color: $color-lighter-green;
-  text-align: center;
-  padding: 0 15px;
-
-  h2 {
-    margin: 35px auto;
-    font-weight: $regular;
-    color: $color-navy;
+    width: 100%;
+    font-weight: $medium;
     font-size: $m;
-    display: inline-block;
+  }
+
+  // detalles visibles por defecto
+  .details-container {
+    opacity: 1;
+    visibility: visible;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    height: 100%;
+    p {
+      margin: 0;
+    }
+    .company {
+      font-weight: $regular;
+      font-size: $s;
+      margin: 0;
+    }
+    .price {
+      font-weight: $bold;
+      font-size: $m;
+      margin-top: auto;
+      margin-bottom: 2px;
+    }
+  }
+
+  // botones ocultos por defecto
+  .links-btns {
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    bottom: 1rem;
+    left: 0;
+    width: 100%;
+    display: flex;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+  }
+
+  // en hover se intercambian
+  &:hover {
+    .details-container {
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(10px); // opcional efecto
+    }
+
+    .links-btns {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
   }
 }
 
-.content > h2,
-h3,
-p {
-  margin: 0;
+.links-btns {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.5rem;
+  .div-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-weight: $bold;
+    font-size: $s;
+    text-decoration: none;
+
+    &.show-link {
+      border: 1px solid $color-button;
+      padding: 0.25rem 0.5rem;
+      border-radius: 12px;
+      background-color: white;
+      &:hover {
+        background-color: $color-button;
+        color: white;
+      }
+    }
+
+    &.buy-link {
+      color: white;
+      border: 1px solid $color-button;
+      padding: 0.25rem 0.5rem;
+      border-radius: 12px;
+      background-color: $color-button;
+      &:hover {
+        background-color: white;
+        color: $color-button;
+      }
+    }
+
+    .div-action-img {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
 }
+
 </style>
diff --git a/pages/productoras/[id].vue b/pages/productoras/[id].vue
index 8f5149f..6ae4c77 100644
--- a/pages/productoras/[id].vue
+++ b/pages/productoras/[id].vue
@@ -73,23 +73,41 @@
       
       </div>
     </div>
-    <div class="row">
-      <div class="col-12 c-tabs">
+    <div class="c-tabs-container">
+      <div class="c-tabs">
         <div>
-          <BCard no-body>
-            <BTabs card>
-              <BTab title="Devoluciones, garantías y reembolsos" active>
+          <BCard no-body class="b-card">
+            <BTabs v-model:index="tabIndex"  class="b-tabs">
+              <BTab
+                active
+                :title-link-class="tabIndex === 0 ? ['#F28C8C', '#FFFF'] : ['#FAD1D1', '#000']"
+                :class="{
+                  'b-tab-active': tabIndex === 0,
+                }"
+              >
+                <template #title>
+                  <img class="div-action-img" src="@/assets/img/truck.svg" />
+                  Envío
+                </template>
                 <BCardText>
                   {{
-                    coop?.sale_terms ||
+                    coop?.shipping_terms ||
                     'Consultar con la cooperativa para más información'
                   }}
                 </BCardText>
               </BTab>
-              <BTab title="Envío">
+              <BTab
+                :class="{
+                  'b-tab-active': tabIndex === 1,
+                }"
+              >
+                <template #title>
+                  <img class="div-action-img" src="@/assets/img/info.svg" />
+                  Devoluciones, garantías y reembolsos
+                </template>
                 <BCardText>
                   {{
-                    coop?.shipping_terms ||
+                    coop?.sale_terms ||
                     'Consultar con la cooperativa para más información'
                   }}
                 </BCardText>
@@ -99,18 +117,29 @@
         </div>
       </div>
     </div>
-    <div v-if="slicedProducts.length !== 0">
-      {{ slicedProducts }} productos encontrados
-      <div v-for="product in slicedProducts" :key="product.id">
-        <ProductCard :key="product.key" :product="product" />
+    <div class="c-catalogo">
+      <div class="title-container">
+        <div class="title-lines"></div>
+        <h5 class="items-title">Nuestro catálogo</h5>
+        <div class="title-lines"></div>
       </div>
-      <BPagination
-        v-model="currentPage"
-        :v-if="products"
-        class="pagination"
-        :total-rows="rows"
-        :per-page="perPage"
-      />
+      <div class="cards-grid">
+        <div v-for="product in slicedProducts" :key="product.id">
+          <ProductCard :key="product.key" :product="product" />
+        </div>
+        </div>
+        <div class="c-pagination">
+          <BPagination 
+            v-if="products"
+            v-model="currentPage"
+            :v-if="products"
+            :total-rows="rows"
+            :per-page="perPage"
+          />
+          <div v-if="!products">
+            No se encontraron productos para esta productora
+          </div>
+        </div>
     </div>
   </div>
 </template>
@@ -146,7 +175,8 @@ export default {
       coop: null,
       products: null,
       currentPage: 1,
-      perPage: 10,
+      perPage: 8,
+      tabIndex: 0,
     }
   },
   computed: {
@@ -159,7 +189,7 @@ export default {
       const final = this.currentPage * this.perPage
       const items = this.products ? this.products?.slice(initial, final) : []
       return items
-    },
+    }
   },
 
   async created() {
@@ -170,16 +200,21 @@ export default {
         {
           baseURL: config.public.baseURL,
           method: 'GET',
+          headers: {
+            Authorization: '/',
+          },
         }
       )
-      this.products = await $fetch(
-        `/products?company=${route.params.id}`,
+     this.products = await $fetch(
+        `/products?company=${$route.params.id}`,
         {
           baseURL: config.public.baseURL,
           method: 'GET',
+          headers: {
+            Authorization: '/',
+          },
         }
       )
-
     } catch (error) {
       console.error(error)
     }
@@ -259,20 +294,6 @@ export default {
 }
 </script>
 
-<!-- <style lang="scss" scoped>
-//global classes for Bootstrap styling
-ul.nav > li.nav-item {
-  font-weight: bolder;
-  :hover {
-    color: $color-consumo-base;
-  }
-  .active {
-    border-top: 4px solid $color-navy;
-    color: $color-navy;
-  }
-}
-</style> -->
-
 <style lang="scss" scoped>
 .content {
   // margin-top: 80px;
@@ -281,6 +302,7 @@ ul.nav > li.nav-item {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 2rem;
 }
 
 .c-description {
@@ -298,8 +320,11 @@ ul.nav > li.nav-item {
       $color-bg-light 100%
     );
 
-  @include tablet {
-    gap: 1rem;
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    gap: 2rem;
+    margin-top: 4rem;
+    padding: 3rem 2rem;
   }
   @include mobile {
     flex-direction: column;
@@ -441,34 +466,107 @@ ul.nav > li.nav-item {
   }
 }
 
-.c-tabs {
-  margin-bottom: 40px;
-
-  .b-tabs {
-    font-weight: $bold;
-    color: $color-navy;
-    font-size: $m;
-  }
-
-  h2 {
-    font-weight: 700;
-    color: $color-navy;
-    font-size: $l;
-    margin: 20px auto;
-  }
-
-  p {
-    margin-top: 8px;
-    font-family: Noto Sans, sans-serif;
-    font-size: $s;
-    color: $color-greytext;
-  }
-}
-
-.pagination {
+.c-tabs-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  width: 100%;
+
+  .c-tabs {
+    margin-bottom: 40px;
+    width: 100%;
+    .b-card {
+      border: none;
+      box-shadow: none;
+      background-color: transparent;
+    }
+    .b-tabs {
+      font-weight: $bold;
+      background-color: $color-consumo-base-light;
+      border-radius: 24px;
+      font-size: $m;
+    }
+    .b-tab {
+      color: white;
+      &:hover {
+        color: $color-consumo-base-light;
+      }
+    }
+    .b-tab-active {
+      background-color: $color-consumo-base-extra-light;
+      border-radius: 0 0 24px 24px;
+      background: linear-gradient(
+            180deg,
+            $color-consumo-base-extra-light 0%,
+            $color-bg-light 100%
+          );
+    }
+
+    h2 {
+      font-size: $h5;
+      margin: 20px auto;
+      text-transform: uppercase;
+
+      &:hover {
+        color: $color-bg-light;
+      }
+    }
+
+    p {
+      padding: 3rem 4rem;
+      font-size: $m;
+    }
+  }
 }
+
+.c-catalogo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 24px;
+  padding: 4rem 4rem;
+  background: $color-bg-light;
+  width: 100%;
+  &-title {
+    text-align: center;
+  }
+  .title-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    .title-lines {
+      width: 34px;
+      height: 2px;
+      background: $color-consumo-base;
+      margin: 0 8px;
+    }
+    .items-title {
+      font-size: $h5;
+      text-transform: uppercase;
+      padding-top: 10px;
+    }
+  }
+  .cards-grid {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    align-content: flex-start;
+    gap: 32px var(--spacing-p-8, 32px);
+    align-self: stretch;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+  }
+  .c-pagination {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: 4rem;
+  }
+}
+
+
 </style>
diff --git a/pages/productoras/index.vue b/pages/productoras/index.vue
index 1cab79c..621722a 100644
--- a/pages/productoras/index.vue
+++ b/pages/productoras/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="">
     <div class="content">
       <HeroWithSearch 
         title="Encuentra tu entidad aliada"
@@ -81,13 +81,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
+.content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
-  gap: 4rem;
+  gap: 1rem;
   margin-top: 2rem;
 
   .cards-section {