Merge pull request #1 from enredacoop/feature/consumo-cuidado-implementation

feature/consumo-cuidado-implementation

assets/fonts/Noto_Sans/LICENSE.txt

@@ -1,202 +0,0 @@
-
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.

assets/fonts/Poppins/OFL.txt

@@ -1,93 +0,0 @@
-Copyright 2014-2017 Indian Type Foundry (info@indiantypefoundry.com)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

assets/img/circle-user-round.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="M18 20C18 18.4087 17.3679 16.8826 16.2426 15.7574C15.1174 14.6321 13.5913 14 12 14M12 14C10.4087 14 8.88258 14.6321 7.75736 15.7574C6.63214 16.8826 6 18.4087 6 20M12 14C14.2091 14 16 12.2091 16 10C16 7.79086 14.2091 6 12 6C9.79086 6 8 7.79086 8 10C8 12.2091 9.79086 14 12 14ZM22 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-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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>

assets/img/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.72314 9L9.16752 6.10437H6.38908V4.22531C6.38908 3.43313 6.77721 2.66094 8.02158 2.66094H9.28471V0.195625C9.28471 0.195625 8.13846 0 7.04252 0C4.75439 0 3.25877 1.38688 3.25877 3.8975V6.10437H0.715332V9H3.25877V16H6.38908V9H8.72314Z" fill="white"/>
+</svg>

assets/img/filter.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="M22 3H2L10 12.46V19L14 21V12.46L22 3Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/hand-heart.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.8335 58.3333H54.1668C56.377 58.3333 58.4966 57.4554 60.0594 55.8926C61.6222 54.3298 62.5002 52.2101 62.5002 50C62.5002 47.7899 61.6222 45.6703 60.0594 44.1074C58.4966 42.5446 56.377 41.6667 54.1668 41.6667H41.6668C39.1668 41.6667 37.0835 42.5 35.8335 44.1667L12.5002 66.6667M29.1668 83.3333L35.8335 77.5C37.0835 75.8333 39.1668 75 41.6668 75H58.3335C62.9168 75 67.0835 73.3333 70.0002 70L89.1668 51.6667C90.7747 50.1472 91.7131 48.0512 91.7756 45.8399C91.8381 43.6285 91.0196 41.4829 89.5002 39.875C87.9807 38.2671 85.8847 37.3287 83.6734 37.2662C81.462 37.2037 79.3164 38.0222 77.7085 39.5417L60.2085 55.7917M8.3335 62.5L33.3335 87.5M81.2502 35.4167C84.1668 32.5 87.5002 28.75 87.5002 24.1667C87.7914 21.6205 87.2143 19.0507 85.8624 16.8735C84.5105 14.6963 82.463 13.0395 80.0518 12.1714C77.6405 11.3034 75.0068 11.275 72.5774 12.0909C70.148 12.9068 68.0653 14.5191 66.6668 16.6667C65.1794 14.6858 63.0962 13.2339 60.7229 12.5241C58.3496 11.8143 55.8112 11.8841 53.4805 12.7232C51.1498 13.5622 49.1494 15.1264 47.7731 17.186C46.3968 19.2456 45.717 21.6923 45.8335 24.1667C45.8335 29.1667 49.1668 32.5 52.0835 35.8333L66.6668 50L81.2502 35.4167Z" stroke="#111111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M81.4533 34.7765C84.6064 31.687 87.8017 27.9837 87.8017 23.1378C87.8017 20.051 86.5755 17.0906 84.3928 14.9079C82.2101 12.7252 79.2498 11.499 76.163 11.499C72.4386 11.499 69.8146 12.5571 66.6404 15.7313C63.4662 12.5571 60.8422 11.499 57.1178 11.499C54.031 11.499 51.0706 12.7252 48.8879 14.9079C46.7052 17.0906 45.479 20.051 45.479 23.1378C45.479 28.0049 48.6532 31.7081 51.8274 34.7765L66.6404 49.5895L81.4533 34.7765Z" fill="#F28C8C" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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>

assets/img/instagram.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00186 3.8978C5.73119 3.8978 3.89966 5.72933 3.89966 8C3.89966 10.2707 5.73119 12.1022 8.00186 12.1022C10.2725 12.1022 12.1041 10.2707 12.1041 8C12.1041 5.72933 10.2725 3.8978 8.00186 3.8978ZM8.00186 10.667C6.5345 10.667 5.3349 9.47094 5.3349 8C5.3349 6.52906 6.53093 5.33304 8.00186 5.33304C9.4728 5.33304 10.6688 6.52906 10.6688 8C10.6688 9.47094 9.46923 10.667 8.00186 10.667ZM13.2287 3.73C13.2287 4.26197 12.8003 4.68682 12.2719 4.68682C11.7399 4.68682 11.315 4.2584 11.315 3.73C11.315 3.20161 11.7435 2.77318 12.2719 2.77318C12.8003 2.77318 13.2287 3.20161 13.2287 3.73ZM15.9456 4.70111C15.8849 3.41939 15.5922 2.28406 14.6532 1.34866C13.7178 0.413254 12.5825 0.120495 11.3008 0.0562312C9.97977 -0.0187437 6.02038 -0.0187437 4.6994 0.0562312C3.42125 0.116925 2.28592 0.409684 1.34695 1.34509C0.407975 2.28049 0.118786 3.41582 0.0545222 4.69753C-0.0204527 6.01852 -0.0204527 9.97791 0.0545222 11.2989C0.115216 12.5806 0.407975 13.7159 1.34695 14.6513C2.28592 15.5867 3.41768 15.8795 4.6994 15.9438C6.02038 16.0187 9.97977 16.0187 11.3008 15.9438C12.5825 15.8831 13.7178 15.5903 14.6532 14.6513C15.5886 13.7159 15.8814 12.5806 15.9456 11.2989C16.0206 9.97791 16.0206 6.02209 15.9456 4.70111ZM14.2391 12.7163C13.9606 13.416 13.4215 13.9551 12.7181 14.2372C11.6649 14.6549 9.16576 14.5585 8.00186 14.5585C6.83797 14.5585 4.33523 14.6513 3.28558 14.2372C2.58582 13.9587 2.04671 13.4196 1.76466 12.7163C1.34695 11.6631 1.44334 9.1639 1.44334 8C1.44334 6.8361 1.35052 4.33337 1.76466 3.28372C2.04314 2.58396 2.58225 2.04485 3.28558 1.7628C4.3388 1.34509 6.83797 1.44148 8.00186 1.44148C9.16576 1.44148 11.6685 1.34866 12.7181 1.7628C13.4179 2.04128 13.957 2.58039 14.2391 3.28372C14.6568 4.33694 14.5604 6.8361 14.5604 8C14.5604 9.1639 14.6568 11.6666 14.2391 12.7163Z" fill="white"/>
+</svg>

assets/img/latienda-casa.svg

@@ -1,16 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 23 28" enable-background="new 0 0 23 28" xml:space="preserve">
-<g>
-	<g>
-		<path fill="#374493" d="M19.146,4.192c-2.035-2.057-4.746-3.19-7.634-3.19h-0.012C5.684,0.882,0.582,6.036,0.702,11.887
-			c0.152,4.131,4.101,9.377,7.176,13.408C8.781,26.38,10.097,27,11.511,27c1.463,0,2.822-0.664,3.727-1.82
-			c2.281-2.853,7.207-9.715,7.059-13.293C22.297,8.978,21.178,6.245,19.146,4.192L19.146,4.192z M13.653,23.923
-			c-1.043,1.384-3.237,1.387-4.28,0.002c-4.17-5.343-6.653-9.794-6.653-12.039c0-4.882,3.938-8.853,8.779-8.853h0.012
-			c4.834,0,8.767,3.972,8.767,8.853C20.279,14.156,17.864,18.543,13.653,23.923L13.653,23.923z M11.556,16.184
-			c-2.365,0-4.289-1.936-4.289-4.316c0.236-5.726,8.343-5.724,8.577,0C15.845,14.248,13.921,16.184,11.556,16.184z M11.556,9.583
-			c-1.252,0-2.27,1.025-2.27,2.285c0.125,3.031,4.417,3.03,4.541,0C13.827,10.608,12.808,9.583,11.556,9.583z"/>
-	</g>
-</g>
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 10C20.5 14.993 14.961 20.193 13.101 21.799C12.9277 21.9293 12.7168 21.9998 12.5 21.9998C12.2832 21.9998 12.0723 21.9293 11.899 21.799C10.039 20.193 4.5 14.993 4.5 10C4.5 7.87827 5.34285 5.84344 6.84315 4.34315C8.34344 2.84285 10.3783 2 12.5 2C14.6217 2 16.6566 2.84285 18.1569 4.34315C19.6571 5.84344 20.5 7.87827 20.5 10Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 13C14.1569 13 15.5 11.6569 15.5 10C15.5 8.34315 14.1569 7 12.5 7C10.8431 7 9.5 8.34315 9.5 10C9.5 11.6569 10.8431 13 12.5 13Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

assets/img/latienda-email.svg

@@ -1,11 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 26 20" enable-background="new 0 0 26 20" xml:space="preserve">
-<g>
-	<path fill="#374493" d="M22.413,0.824H3.587c-1.505,0-2.73,1.173-2.73,2.614v13.123c0,1.442,1.225,2.614,2.73,2.614h18.827
-		c1.505,0,2.73-1.173,2.73-2.614V3.439C25.144,1.997,23.919,0.824,22.413,0.824z M21.828,2.91L13,10.385L4.172,2.91H21.828z
-		 M23.059,16.561c0,0.287-0.296,0.529-0.646,0.529H3.587c-0.35,0-0.646-0.242-0.646-0.529V4.743l8.844,7.466
-		c0.139,0.118,0.316,0.182,0.496,0.182h1.439c0.18,0,0.356-0.065,0.495-0.182l8.845-7.466V16.561z"/>
-</g>
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 7L13.53 12.7C13.2213 12.8934 12.8643 12.996 12.5 12.996C12.1357 12.996 11.7787 12.8934 11.47 12.7L2.5 7M4.5 4H20.5C21.6046 4 22.5 4.89543 22.5 6V18C22.5 19.1046 21.6046 20 20.5 20H4.5C3.39543 20 2.5 19.1046 2.5 18V6C2.5 4.89543 3.39543 4 4.5 4Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

assets/img/latienda-telefono.svg

@@ -1,16 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 20 31" enable-background="new 0 0 20 31" xml:space="preserve">
-<g>
-	<g>
-		<path fill="#374493" d="M17.223,1H2.777C1.793,1,0.998,1.797,0.998,2.782v25.436C0.998,29.201,1.793,30,2.777,30h14.446
-			c0.984,0,1.779-0.799,1.779-1.782V2.782C19.002,1.797,18.207,1,17.223,1z M16.969,26.915c0,0.474-0.385,0.859-0.858,0.859H3.89
-			c-0.475,0-0.858-0.384-0.858-0.859V4.085c0-0.472,0.383-0.857,0.858-0.857H16.11c0.473,0,0.858,0.384,0.858,0.857V26.915z"/>
-		<path fill="#374493" d="M11.883,4.805h-3.56c-0.492,0-0.889,0.399-0.889,0.891S7.83,6.587,8.323,6.587h3.56
-			c0.491,0,0.889-0.399,0.889-0.891S12.374,4.805,11.883,4.805z"/>
-		<path fill="#374493" d="M10.103,23.021c-0.984,0-1.78,0.796-1.78,1.781c0,0.983,0.796,1.779,1.78,1.779
-			c0.984,0,1.78-0.796,1.78-1.779C11.883,23.817,11.087,23.021,10.103,23.021z"/>
-	</g>
-</g>
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5004 8.0001V2.0001M22.5004 2.0001H16.5004M22.5004 2.0001L16.5004 8.0001M22.5004 16.9201V19.9201C22.5016 20.1986 22.4445 20.4743 22.3329 20.7294C22.2214 20.9846 22.0577 21.2137 21.8525 21.402C21.6473 21.5902 21.405 21.7336 21.1412 21.8228C20.8773 21.912 20.5978 21.9452 20.3204 21.9201C17.2433 21.5857 14.2874 20.5342 11.6904 18.8501C9.27425 17.3148 7.22576 15.2663 5.69042 12.8501C4.0004 10.2413 2.94866 7.27109 2.62042 4.1801C2.59543 3.90356 2.6283 3.62486 2.71692 3.36172C2.80555 3.09859 2.94799 2.85679 3.13519 2.65172C3.32238 2.44665 3.55023 2.28281 3.80421 2.17062C4.0582 2.05843 4.33276 2.00036 4.61042 2.0001H7.61042C8.09573 1.99532 8.56621 2.16718 8.93418 2.48363C9.30215 2.80008 9.5425 3.23954 9.61042 3.7201C9.73704 4.68016 9.97187 5.62282 10.3104 6.5301C10.445 6.88802 10.4741 7.27701 10.3943 7.65098C10.3146 8.02494 10.1293 8.36821 9.86042 8.6401L8.59042 9.9101C10.014 12.4136 12.0869 14.4865 14.5904 15.9101L15.8604 14.6401C16.1323 14.3712 16.4756 14.1859 16.8495 14.1062C17.2235 14.0264 17.6125 14.0556 17.9704 14.1901C18.8777 14.5286 19.8204 14.7635 20.7804 14.8901C21.2662 14.9586 21.7098 15.2033 22.027 15.5776C22.3441 15.9519 22.5126 16.4297 22.5004 16.9201Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

assets/img/latienda-tienda.svg

@@ -1,23 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 31 27" enable-background="new 0 0 31 27" xml:space="preserve">
-<g>
-	<path fill="#FF666E" d="M19.356,21.186c0-2.121-1.727-3.841-3.858-3.841c-2.131,0-3.859,1.719-3.859,3.84c0,0,0,0,0,0.001v3.85
-		c0,0.533,0.434,0.965,0.969,0.965l0,0h5.788c0.535,0,0.969-0.432,0.969-0.965v-3.85H19.356z M15.498,19.265
-		c1.065,0,1.929,0.86,1.929,1.92v2.894h-3.858v-2.894C13.568,20.125,14.432,19.265,15.498,19.265z"/>
-	<path fill="#FF666E" d="M29.989,10.881l-0.906-4.246v-2.75C29.083,2.292,27.786,1,26.185,1l0,0H4.873
-		C3.273,1,1.975,2.292,1.975,3.885v2.777l-0.969,4.219c-0.008,0.069-0.008,0.138,0,0.207c0.001,0.986,0.343,1.941,0.969,2.705v9.322
-		C1.975,24.708,3.273,26,4.873,26h0h3.867c0.533-0.051,0.923-0.523,0.871-1.053c-0.045-0.459-0.41-0.822-0.871-0.867H4.873
-		c-0.535,0-0.969-0.432-0.969-0.965v-7.934c0.464,0.173,0.954,0.264,1.449,0.27c1.318-0.006,2.562-0.61,3.378-1.641
-		c1.46,1.86,4.158,2.189,6.026,0.736c0.276-0.214,0.524-0.462,0.74-0.736c1.46,1.86,4.158,2.189,6.026,0.736
-		c0.276-0.214,0.524-0.462,0.74-0.736c1.133,1.461,3.091,2.016,4.827,1.37v7.934c0,0.533-0.434,0.965-0.969,0.965h-3.858
-		c-0.533,0.051-0.923,0.523-0.871,1.053c0.045,0.459,0.41,0.822,0.871,0.867h3.867c1.601,0,2.898-1.292,2.898-2.885v0v-9.331
-		c0.626-0.764,0.968-1.719,0.969-2.705C30.002,11.013,29.999,10.947,29.989,10.881z M5.353,13.495
-		c-1.298,0.001-2.365-1.017-2.418-2.308l0.788-3.462h4.049v3.39C7.757,12.434,6.678,13.496,5.353,13.495z M12.119,13.495
-		c-1.325,0-2.403-1.061-2.418-2.38v-3.39h4.827v3.39C14.514,12.431,13.441,13.491,12.119,13.495z M18.885,13.495
-		c-1.325,0-2.403-1.061-2.418-2.38v-3.39h4.827v3.39C21.279,12.431,20.206,13.491,18.885,13.495z M22.263,5.805H3.904v-1.92
-		c0-0.533,0.434-0.965,0.969-0.965h21.248c0.535,0,0.969,0.432,0.969,0.965v1.92H22.263z M25.642,13.495
-		c-1.325,0-2.403-1.061-2.418-2.38v-3.39h4.049l0.77,3.462C27.989,12.471,26.932,13.487,25.642,13.495L25.642,13.495z"/>
-</g>
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 6L6.5 2H18.5L21.5 6M3.5 6V20C3.5 20.5304 3.71071 21.0391 4.08579 21.4142C4.46086 21.7893 4.96957 22 5.5 22H19.5C20.0304 22 20.5391 21.7893 20.9142 21.4142C21.2893 21.0391 21.5 20.5304 21.5 20V6M3.5 6H21.5M16.5 10C16.5 11.0609 16.0786 12.0783 15.3284 12.8284C14.5783 13.5786 13.5609 14 12.5 14C11.4391 14 10.4217 13.5786 9.67157 12.8284C8.92143 12.0783 8.5 11.0609 8.5 10" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

assets/img/latienda-web.svg

@@ -1,61 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 29 29" enable-background="new 0 0 29 29" xml:space="preserve">
-<g>
-	<g>
-		<path fill="#FF666E" d="M25.505,6.707c0-0.009-0.001-0.017-0.003-0.026c-0.034-0.048-0.075-0.09-0.11-0.137
-			c-0.252-0.343-0.519-0.674-0.801-0.992c-0.077-0.087-0.154-0.173-0.233-0.258c-0.29-0.311-0.594-0.607-0.913-0.888
-			c-0.059-0.052-0.114-0.106-0.173-0.157c-0.785-0.672-1.644-1.252-2.56-1.728c-0.037-0.019-0.075-0.036-0.113-0.055
-			c-0.408-0.207-0.827-0.394-1.254-0.559c-0.096-0.035-0.184-0.068-0.276-0.096c-0.38-0.137-0.766-0.257-1.158-0.36
-			c-0.116-0.031-0.232-0.063-0.349-0.09c-0.386-0.09-0.772-0.158-1.166-0.214c-0.12-0.017-0.237-0.041-0.358-0.055
-			c-1.016-0.123-2.044-0.123-3.06,0c-0.121,0.014-0.238,0.038-0.358,0.055c-0.395,0.056-0.784,0.124-1.166,0.214
-			c-0.118,0.027-0.233,0.059-0.349,0.09c-0.394,0.103-0.78,0.223-1.158,0.36C9.851,1.844,9.764,1.877,9.672,1.908
-			C9.245,2.072,8.826,2.259,8.418,2.466C8.38,2.485,8.342,2.502,8.305,2.521C7.385,2.997,6.524,3.577,5.736,4.25
-			C5.677,4.301,5.622,4.355,5.564,4.407C5.242,4.69,4.938,4.986,4.651,5.295C4.572,5.38,4.495,5.466,4.418,5.553
-			C4.135,5.87,3.868,6.2,3.617,6.544c-0.035,0.047-0.076,0.089-0.11,0.137C3.503,6.69,3.499,6.698,3.495,6.707
-			c-3.327,4.662-3.327,10.923,0,15.585c0.003,0.009,0.007,0.018,0.012,0.026c0.034,0.048,0.075,0.09,0.11,0.137
-			c0.251,0.343,0.518,0.674,0.801,0.992c0.077,0.087,0.154,0.173,0.233,0.258c0.291,0.311,0.595,0.607,0.913,0.888
-			c0.059,0.052,0.114,0.106,0.173,0.157c0.785,0.672,1.644,1.252,2.56,1.728c0.037,0.019,0.075,0.036,0.113,0.055
-			c0.408,0.207,0.827,0.394,1.254,0.559c0.096,0.035,0.184,0.068,0.276,0.096c0.38,0.137,0.766,0.257,1.158,0.36
-			c0.116,0.031,0.232,0.063,0.349,0.09c0.386,0.09,0.772,0.158,1.166,0.214c0.12,0.017,0.237,0.041,0.358,0.055
-			c1.016,0.123,2.044,0.123,3.06,0c0.121-0.014,0.238-0.038,0.358-0.055c0.395-0.056,0.784-0.124,1.166-0.214
-			c0.118-0.027,0.233-0.059,0.349-0.09c0.395-0.103,0.781-0.223,1.158-0.36c0.096-0.033,0.184-0.066,0.276-0.096
-			c0.427-0.165,0.846-0.351,1.254-0.559c0.038-0.019,0.076-0.036,0.113-0.055c0.917-0.476,1.776-1.056,2.56-1.728
-			c0.059-0.051,0.114-0.105,0.173-0.157c0.322-0.282,0.626-0.578,0.913-0.888c0.079-0.085,0.156-0.171,0.233-0.258
-			c0.282-0.318,0.549-0.648,0.801-0.992c0.035-0.047,0.076-0.089,0.11-0.137c0.004-0.008,0.008-0.017,0.012-0.026
-			C28.832,17.63,28.832,11.37,25.505,6.707z M24.404,8.532c0.923,1.519,1.48,3.232,1.627,5.003h-5.778
-			c-0.071-1.149-0.252-2.289-0.54-3.404C21.345,9.826,22.925,9.287,24.404,8.532z M16.959,3.192c0.054,0.013,0.106,0.03,0.16,0.042
-			c0.345,0.081,0.688,0.174,1.023,0.289c0.051,0.017,0.101,0.038,0.151,0.056c0.332,0.116,0.659,0.244,0.979,0.386
-			c0.056,0.026,0.111,0.055,0.167,0.081c0.307,0.146,0.606,0.304,0.899,0.474l0.193,0.117c0.278,0.17,0.548,0.351,0.81,0.545
-			c0.068,0.049,0.135,0.096,0.202,0.15c0.257,0.193,0.504,0.4,0.739,0.62c0.062,0.056,0.125,0.111,0.186,0.169
-			c0.247,0.234,0.482,0.482,0.71,0.739c0.029,0.034,0.06,0.065,0.089,0.096c-1.306,0.622-2.69,1.067-4.114,1.321
-			c-0.66-1.814-1.531-3.543-2.597-5.153C16.69,3.149,16.827,3.163,16.959,3.192z M10.681,13.535
-			c0.076-1.044,0.254-2.077,0.531-3.087c1.093,0.13,2.193,0.194,3.293,0.193c1.102,0,2.202-0.066,3.296-0.198
-			c0.276,1.011,0.453,2.046,0.528,3.091H10.681z M18.329,15.465c-0.076,1.044-0.254,2.077-0.531,3.087
-			c-1.093-0.13-2.193-0.194-3.293-0.193c-1.102-0.001-2.202,0.063-3.296,0.193c-0.276-1.009-0.453-2.043-0.528-3.087H18.329z
-			 M14.505,3.554c1.098,1.556,2.001,3.24,2.688,5.016c-0.893,0.095-1.79,0.142-2.688,0.143c-0.897-0.001-1.793-0.049-2.686-0.144
-			C12.508,6.795,13.41,5.111,14.505,3.554z M5.833,6.859C6.06,6.602,6.296,6.354,6.543,6.12c0.061-0.058,0.124-0.113,0.186-0.169
-			c0.238-0.217,0.484-0.423,0.739-0.62C7.534,5.28,7.602,5.234,7.669,5.18c0.262-0.193,0.532-0.375,0.81-0.545l0.193-0.117
-			C8.965,4.348,9.265,4.19,9.572,4.045C9.628,4.019,9.683,3.99,9.739,3.964c0.32-0.145,0.647-0.273,0.979-0.386
-			c0.05-0.018,0.096-0.039,0.151-0.056c0.335-0.112,0.675-0.204,1.023-0.289c0.054-0.013,0.106-0.03,0.161-0.041
-			c0.132-0.029,0.269-0.042,0.403-0.067c-1.066,1.61-1.938,3.34-2.598,5.154C8.434,8.024,7.05,7.58,5.744,6.957
-			C5.773,6.923,5.804,6.893,5.833,6.859z M4.606,8.532c1.479,0.755,3.058,1.294,4.69,1.599c-0.288,1.115-0.469,2.255-0.539,3.404
-			H2.979C3.126,11.764,3.683,10.052,4.606,8.532z M4.606,20.468c-0.923-1.519-1.48-3.232-1.627-5.003h5.778
-			c0.071,1.149,0.252,2.289,0.54,3.404C7.665,19.174,6.085,19.713,4.606,20.468z M12.051,25.809c-0.054-0.013-0.106-0.03-0.16-0.042
-			c-0.345-0.081-0.688-0.174-1.023-0.289c-0.051-0.017-0.101-0.038-0.151-0.056c-0.332-0.116-0.659-0.244-0.979-0.386
-			c-0.056-0.026-0.111-0.055-0.167-0.081c-0.307-0.146-0.606-0.304-0.899-0.474l-0.193-0.117c-0.278-0.17-0.548-0.351-0.81-0.545
-			c-0.068-0.049-0.135-0.096-0.202-0.15c-0.257-0.193-0.504-0.4-0.739-0.62c-0.062-0.056-0.125-0.111-0.186-0.169
-			c-0.247-0.234-0.482-0.482-0.71-0.739c-0.029-0.034-0.06-0.065-0.089-0.096c1.306-0.622,2.69-1.067,4.114-1.321
-			c0.66,1.814,1.531,3.543,2.597,5.153C12.32,25.851,12.183,25.838,12.051,25.809z M14.505,25.446
-			c-1.098-1.556-2.001-3.24-2.688-5.016c1.786-0.192,3.588-0.192,5.375,0l-0.001,0.001C16.502,22.205,15.6,23.889,14.505,25.446z
-			 M23.177,22.141c-0.227,0.257-0.463,0.504-0.71,0.739c-0.061,0.058-0.124,0.113-0.186,0.169c-0.238,0.217-0.484,0.424-0.739,0.62
-			c-0.067,0.051-0.134,0.101-0.202,0.15c-0.262,0.193-0.532,0.375-0.81,0.545l-0.193,0.117c-0.292,0.17-0.592,0.328-0.899,0.474
-			c-0.056,0.026-0.111,0.055-0.167,0.081c-0.32,0.145-0.647,0.273-0.979,0.386c-0.05,0.018-0.096,0.039-0.151,0.056
-			c-0.335,0.112-0.675,0.204-1.023,0.289c-0.054,0.013-0.106,0.03-0.161,0.041c-0.132,0.029-0.269,0.042-0.403,0.067
-			c1.065-1.609,1.937-3.339,2.597-5.153c1.424,0.255,2.808,0.699,4.114,1.321C23.237,22.077,23.206,22.108,23.177,22.141z
-			 M24.404,20.468c-1.479-0.755-3.058-1.294-4.69-1.599c0.288-1.115,0.469-2.255,0.539-3.404h5.778
-			C25.884,17.236,25.326,18.949,24.404,20.468z"/>
-	</g>
-</g>
+<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 11C20.5 16.5228 16.0228 21 10.5 21M20.5 11C20.5 5.47715 16.0228 1 10.5 1M20.5 11H0.5M10.5 21C4.97715 21 0.5 16.5228 0.5 11M10.5 21C7.93223 18.3038 6.5 14.7233 6.5 11C6.5 7.27674 7.93223 3.69615 10.5 1M10.5 21C13.0678 18.3038 14.5 14.7233 14.5 11C14.5 7.27674 13.0678 3.69615 10.5 1M0.5 11C0.5 5.47715 4.97715 1 10.5 1" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

assets/img/linkedin.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.77316 5.55067C8.605 4.70069 9.68812 4.14461 10.9481 4.14461C12.2714 4.14461 13.5404 4.67026 14.4761 5.60593C15.4117 6.54159 15.9374 7.81063 15.9374 9.13386V15.9374H14.1231V9.13386C14.1231 8.2918 13.7886 7.48424 13.1932 6.88881C12.5978 6.29339 11.7902 5.95888 10.9481 5.95888C10.1061 5.95888 9.29851 6.29339 8.70308 6.88881C8.10766 7.48424 7.77316 8.2918 7.77316 9.13386V15.9374H5.95888V4.59818H7.77316V5.55067ZM1.4232 2.78391C1.06232 2.78391 0.716222 2.64055 0.461041 2.38537C0.205859 2.13019 0.0625 1.78408 0.0625 1.4232C0.0625 1.06232 0.205859 0.716222 0.461041 0.461041C0.716222 0.205859 1.06232 0.0625 1.4232 0.0625C1.78408 0.0625 2.13019 0.205859 2.38537 0.461041C2.64055 0.716222 2.78391 1.06232 2.78391 1.4232C2.78391 1.78408 2.64055 2.13019 2.38537 2.38537C2.13019 2.64055 1.78408 2.78391 1.4232 2.78391ZM0.516068 4.59818H2.33034V15.9374H0.516068V4.59818Z" fill="white"/>
+</svg>

assets/img/logo.svg

@@ -0,0 +1,38 @@
+<svg width="152" height="60" viewBox="0 0 152 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_50_2499)">
+<path d="M42.8233 14.3323L47.0448 10.112C46.628 9.95626 46.1865 9.876 45.7413 9.875H42.8191L41.4098 11.3464C41.227 11.5357 41.008 11.6869 40.7657 11.7909C40.5233 11.895 40.2625 11.9498 39.9985 11.9522L17.8004 12.251C17.6307 12.681 17.5435 13.1388 17.5435 13.6008V37.9008C17.5432 38.3898 17.6398 38.8741 17.8277 39.326C18.0157 39.7779 18.2913 40.1885 18.6389 40.5345C18.9864 40.8805 19.3991 41.155 19.8533 41.3424C20.3076 41.5298 20.7945 41.6263 21.2863 41.6266H42.357L42.3424 15.4967C42.3415 15.0606 42.5144 14.6419 42.8233 14.3323Z" fill="#CAF03F"/>
+<path d="M42.361 49.824V47.8086L16.1279 47.823C15.8636 47.8239 15.6022 47.8779 15.3593 47.9816C15.1164 48.0854 14.8971 48.2368 14.7145 48.4268L6.76248 56.6944C6.49685 56.9732 6.31972 57.3235 6.25322 57.7018C6.18673 58.08 6.23382 58.4694 6.3886 58.8212C6.54339 59.173 6.79901 59.4716 7.12352 59.6798C7.44804 59.8879 7.82705 59.9964 8.2132 59.9916L43.8988 59.5114C44.1605 59.5083 44.4189 59.453 44.6588 59.349C44.8987 59.2449 45.1152 59.0942 45.2956 58.9056L52.7793 51.1057C53.0423 50.8283 53.218 50.4805 53.2849 50.1051C53.3517 49.7296 53.3067 49.343 53.1554 48.9926C53.0041 48.6423 52.7532 48.3436 52.4334 48.1332C52.1136 47.9228 51.7389 47.81 51.3555 47.8086H48.5141L45.1796 51.011C44.9458 51.2388 44.6494 51.3927 44.3278 51.4534C44.0062 51.514 43.6738 51.4786 43.3724 51.3517C43.0709 51.2248 42.8141 51.012 42.6341 50.7401C42.4541 50.4682 42.3591 50.1495 42.361 49.824Z" fill="#5CAACC"/>
+<path d="M0.48085 18.4036C0.32694 18.5579 0.205226 18.7409 0.122711 18.9421C0.0401952 19.1433 -0.0014941 19.3588 4.08967e-05 19.5761L0.018693 53.8954C0.0179746 54.2196 0.113423 54.5369 0.293097 54.8074C0.47277 55.078 0.728692 55.2899 1.02885 55.4165C1.329 55.5432 1.66006 55.5791 1.98061 55.5197C2.30115 55.4602 2.59696 55.3081 2.83101 55.0824L12.2047 46.0791C12.3664 45.9237 12.4946 45.7373 12.5815 45.5311C12.6685 45.3249 12.7123 45.1033 12.7104 44.8797L12.4679 12.3203L6.47024 12.4007L0.48085 18.4036Z" fill="#C98EEF"/>
+<path d="M55.0528 40.8019L54.7958 6.32811C54.794 6.00199 54.695 5.68372 54.5113 5.41357C54.3276 5.14342 54.0674 4.93352 53.7637 4.81042C53.4599 4.68733 53.1263 4.65657 52.805 4.72204C52.4837 4.78751 52.1892 4.94627 51.9586 5.17823L47.0448 10.1116C47.7595 10.3766 48.3754 10.8532 48.8093 11.477C49.2432 12.1008 49.4744 12.8419 49.4717 13.6004V37.9004C49.4722 38.3894 49.3759 38.8736 49.1881 39.3255C49.0004 39.7773 48.725 40.188 48.3776 40.534C48.0302 40.88 47.6177 41.1545 47.1635 41.3419C46.7094 41.5294 46.2226 41.626 45.7309 41.6262H42.3569V47.8084H48.5101L54.543 42.0136C54.7069 41.8572 54.8368 41.6689 54.9245 41.4605C55.0122 41.252 55.0559 41.0279 55.0528 40.8019Z" fill="#2FB384"/>
+<path d="M49.4715 37.9002V13.6001C49.4743 12.8416 49.2431 12.1005 48.8092 11.4767C48.3752 10.8529 47.7594 10.3764 47.0447 10.1113L42.8231 14.3317C42.5143 14.6413 42.3414 15.0599 42.3423 15.496L42.3568 41.626H45.7308C46.2224 41.6257 46.7093 41.5291 47.1634 41.3417C47.6175 41.1543 48.0301 40.8797 48.3775 40.5337C48.7249 40.1877 49.0003 39.7771 49.188 39.3252C49.3757 38.8733 49.4721 38.3891 49.4715 37.9002Z" fill="#CAF03F"/>
+<path d="M49.4715 37.9002V13.6001C49.4743 12.8416 49.2431 12.1005 48.8092 11.4767C48.3752 10.8529 47.7594 10.3764 47.0447 10.1113L42.8231 14.3317C42.5143 14.6413 42.3414 15.0599 42.3423 15.496L42.3568 41.626H45.7308C46.2224 41.6257 46.7093 41.5291 47.1634 41.3417C47.6175 41.1543 48.0301 40.8797 48.3775 40.5337C48.7249 40.1877 49.0003 39.7771 49.188 39.3252C49.3757 38.8733 49.4721 38.3891 49.4715 37.9002Z" fill="#2EA62D"/>
+<g style="mix-blend-mode:multiply">
+<path d="M42.3611 49.824C42.3592 50.1495 42.4542 50.4682 42.6342 50.7401C42.8142 51.012 43.071 51.2248 43.3725 51.3517C43.6739 51.4786 44.0063 51.514 44.3279 51.4534C44.6495 51.3927 44.9459 51.2388 45.1797 51.011L48.5142 47.8086H42.3611V49.824Z" fill="#558CAB"/>
+</g>
+<path d="M42.3611 49.824C42.3592 50.1495 42.4542 50.4682 42.6342 50.7401C42.8142 51.012 43.071 51.2248 43.3725 51.3517C43.6739 51.4786 44.0063 51.514 44.3279 51.4534C44.6495 51.3927 44.9459 51.2388 45.1797 51.011L48.5142 47.8086H42.3611V49.824Z" fill="#176259"/>
+<path d="M21.2862 9.87509H42.8087L48.8851 3.53837C49.1481 3.26095 49.3239 2.91313 49.3907 2.53769C49.4576 2.16226 49.4126 1.77559 49.2613 1.42524C49.11 1.0749 48.859 0.776174 48.5392 0.565809C48.2194 0.355444 47.8448 0.242617 47.4613 0.241211L12.2275 0.251515C11.9619 0.251274 11.699 0.304874 11.455 0.409041C11.2109 0.513208 10.9907 0.665755 10.8079 0.857367L2.86833 9.12499C2.60369 9.40406 2.42743 9.75435 2.36148 10.1323C2.29553 10.5102 2.3428 10.8991 2.49742 11.2505C2.65204 11.6019 2.90717 11.9003 3.23106 12.1086C3.55496 12.317 3.93331 12.426 4.31905 12.4221L6.47233 12.3933L9.61624 9.25069C9.84679 9.01873 10.1413 8.85997 10.4626 8.7945C10.7839 8.72903 11.1176 8.75979 11.4213 8.88288C11.725 9.00598 11.9852 9.21588 12.1689 9.48603C12.3526 9.75619 12.4517 10.0745 12.4534 10.4006L12.4679 12.3232L17.8004 12.2511C18.0716 11.551 18.5499 10.9491 19.1723 10.5249C19.7946 10.1007 20.5317 9.87413 21.2862 9.87509Z" fill="#F28C8C"/>
+<path d="M41.3993 11.3464L42.8086 9.875H21.2862C20.5316 9.87404 19.7945 10.1006 19.1722 10.5248C18.5499 10.949 18.0715 11.5509 17.8003 12.251L39.9984 11.9522C40.2606 11.9484 40.5194 11.893 40.7599 11.789C41.0004 11.685 41.2178 11.5345 41.3993 11.3464Z" fill="#CAF03F"/>
+<path d="M41.3993 11.3464L42.8086 9.875H21.2862C20.5316 9.87404 19.7945 10.1006 19.1722 10.5248C18.5499 10.949 18.0715 11.5509 17.8003 12.251L39.9984 11.9522C40.2606 11.9484 40.5194 11.893 40.7599 11.789C41.0004 11.685 41.2178 11.5345 41.3993 11.3464Z" fill="#BF832F"/>
+<path d="M9.6162 9.2505L6.47021 12.4034L12.4679 12.323L12.4534 10.4004C12.4516 10.0743 12.3526 9.75599 12.1689 9.48584C11.9851 9.21568 11.725 9.00578 11.4212 8.88269C11.1175 8.75959 10.7839 8.72883 10.4626 8.79431C10.1413 8.85978 9.84675 9.01853 9.6162 9.2505Z" fill="#C98EEF"/>
+<path d="M9.6162 9.2505L6.47021 12.4034L12.4679 12.323L12.4534 10.4004C12.4516 10.0743 12.3526 9.75599 12.1689 9.48584C11.9851 9.21568 11.725 9.00578 11.4212 8.88269C11.1175 8.75959 10.7839 8.72883 10.4626 8.79431C10.1413 8.85978 9.84675 9.01853 9.6162 9.2505Z" fill="#BD5083"/>
+<path d="M65.6968 19.4815C65.6604 19.4427 65.6322 19.3969 65.6141 19.347C65.5959 19.297 65.5881 19.244 65.5911 19.1909V1.52848C65.5878 1.47513 65.5955 1.42166 65.6136 1.37135C65.6318 1.32104 65.6601 1.27494 65.6968 1.23586C65.735 1.19966 65.7803 1.17166 65.8298 1.15358C65.8794 1.1355 65.9322 1.12774 65.9848 1.13076H70.1298C70.1831 1.12716 70.2367 1.13464 70.287 1.15274C70.3373 1.17083 70.3833 1.19914 70.422 1.23586C70.4584 1.2747 70.4865 1.32046 70.5047 1.3704C70.5229 1.42033 70.5307 1.47341 70.5277 1.52642V8.96357C70.5277 9.03364 70.5505 9.07691 70.594 9.09546C70.6375 9.114 70.6769 9.09546 70.7121 9.01509L72.4157 6.14244C72.4623 6.05939 72.5311 5.99079 72.6145 5.94423C72.6979 5.89768 72.7926 5.87498 72.8882 5.87867H77.346C77.574 5.87867 77.688 5.95698 77.688 6.11565C77.683 6.20013 77.6559 6.28184 77.6092 6.35263L74.4881 11.0449C74.4635 11.0726 74.4477 11.1071 74.4429 11.1438C74.4381 11.1806 74.4445 11.2179 74.4612 11.251L77.9844 19.1064L78.0362 19.3125C78.0362 19.4897 77.9222 19.5763 77.6963 19.5763H73.3856C73.29 19.5772 73.1966 19.5483 73.1185 19.4935C73.0405 19.4388 72.9816 19.3611 72.9504 19.2713L71.2717 14.8675C71.2551 14.7975 71.224 14.7624 71.1805 14.7624C71.137 14.7624 71.0976 14.7975 71.0624 14.8675L70.5898 15.7907C70.5671 15.8502 70.5498 15.9116 70.538 15.9741V19.1909C70.541 19.244 70.5332 19.297 70.515 19.347C70.4969 19.3969 70.4687 19.4427 70.4323 19.4815C70.3941 19.5177 70.3488 19.5457 70.2993 19.5638C70.2497 19.5819 70.1969 19.5896 70.1443 19.5866H65.9993C65.9443 19.5917 65.8888 19.5849 65.8366 19.5668C65.7843 19.5487 65.7367 19.5196 65.6968 19.4815Z" fill="white"/>
+<path d="M79.7894 4.25714C79.5596 4.02128 79.3804 3.74152 79.2625 3.43477C79.1446 3.12803 79.0905 2.80069 79.1035 2.47256C79.0939 2.14468 79.1506 1.81822 79.2702 1.51252C79.3898 1.20681 79.5698 0.928066 79.7997 0.692784C80.0295 0.457503 80.3045 0.270467 80.6084 0.142747C80.9122 0.0150265 81.2387 -0.0507812 81.5686 -0.0507812C81.8985 -0.0507812 82.2251 0.0150265 82.5289 0.142747C82.8328 0.270467 83.1077 0.457503 83.3376 0.692784C83.5675 0.928066 83.7475 1.20681 83.8671 1.51252C83.9867 1.81822 84.0434 2.14468 84.0338 2.47256C84.0424 2.79809 83.9853 3.12203 83.8661 3.42532C83.7469 3.72861 83.5678 4.00513 83.3395 4.2386C82.8637 4.69243 82.2305 4.94686 81.5711 4.94916C80.9118 4.95146 80.2768 4.70146 79.7977 4.25096L79.7894 4.25714ZM79.2257 19.4818C79.1896 19.4428 79.1618 19.397 79.1439 19.347C79.1261 19.2971 79.1187 19.2441 79.1221 19.1912V6.27459C79.1187 6.22171 79.1261 6.16869 79.1439 6.11874C79.1618 6.0688 79.1896 6.02297 79.2257 5.98403C79.264 5.94794 79.3093 5.92 79.3589 5.90192C79.4084 5.88385 79.4611 5.87603 79.5138 5.87893H83.6587C83.7114 5.87603 83.7641 5.88385 83.8136 5.90192C83.8632 5.92 83.9085 5.94794 83.9468 5.98403C83.9832 6.02287 84.0113 6.06863 84.0295 6.11857C84.0477 6.1685 84.0555 6.22157 84.0525 6.27459V19.1912C84.0555 19.2442 84.0477 19.2973 84.0295 19.3472C84.0113 19.3972 83.9832 19.4429 83.9468 19.4818C83.9085 19.5179 83.8632 19.5458 83.8136 19.5639C83.7641 19.5819 83.7114 19.5898 83.6587 19.5869H79.5138C79.4625 19.5886 79.4113 19.5803 79.3633 19.5622C79.3153 19.5442 79.2713 19.5168 79.234 19.4818H79.2257Z" fill="white"/>
+<path d="M93.3704 9.46505C93.3321 9.50115 93.2868 9.52909 93.2373 9.54716C93.1877 9.56523 93.135 9.57305 93.0823 9.57015H91.4554C91.4338 9.56695 91.4118 9.56887 91.391 9.57575C91.3703 9.58262 91.3515 9.59426 91.3362 9.60972C91.3208 9.62519 91.3094 9.64403 91.3027 9.66472C91.2961 9.68542 91.2944 9.70738 91.2979 9.72883V14.316C91.2979 15.018 91.595 15.369 92.1891 15.369H92.6885C92.7412 15.3661 92.794 15.3739 92.8435 15.392C92.893 15.4101 92.9383 15.438 92.9766 15.4741C93.0127 15.5132 93.0407 15.559 93.0588 15.6088C93.077 15.6587 93.085 15.7117 93.0823 15.7647V19.1917C93.0863 19.2456 93.0791 19.2997 93.0611 19.3507C93.0431 19.4017 93.0148 19.4484 92.9779 19.4881C92.9409 19.5277 92.8962 19.5593 92.8464 19.581C92.7966 19.6027 92.7429 19.614 92.6885 19.6141L91.0886 19.6409C89.5688 19.6409 88.4407 19.4122 87.7043 18.9547C86.9679 18.4972 86.5921 17.6276 86.5769 16.3458V9.72883C86.5804 9.70738 86.5787 9.68542 86.5721 9.66472C86.5655 9.64403 86.554 9.62519 86.5386 9.60972C86.5233 9.59426 86.5045 9.58262 86.4838 9.57575C86.463 9.56887 86.441 9.56695 86.4194 9.57015H85.3707C85.318 9.57305 85.2653 9.56523 85.2158 9.54716C85.1662 9.52909 85.1209 9.50115 85.0826 9.46505C85.0462 9.42622 85.0181 9.38045 84.9999 9.33052C84.9818 9.28058 84.9739 9.22751 84.9769 9.17449V6.27505C84.9739 6.22204 84.9818 6.16896 84.9999 6.11903C85.0181 6.06909 85.0462 6.02333 85.0826 5.98449C85.1209 5.9484 85.1662 5.92046 85.2158 5.90239C85.2653 5.88432 85.318 5.87649 85.3707 5.8794H86.4214C86.443 5.88215 86.4648 5.87992 86.4854 5.87289C86.5059 5.86585 86.5245 5.85421 86.5397 5.83885C86.555 5.82349 86.5664 5.80484 86.5732 5.78435C86.58 5.76386 86.582 5.74208 86.579 5.72072V2.74092C86.5761 2.68823 86.584 2.63551 86.6022 2.58593C86.6203 2.53636 86.6484 2.49094 86.6846 2.45241C86.7229 2.41632 86.7682 2.38838 86.8178 2.37031C86.8673 2.35224 86.92 2.34441 86.9727 2.34732H90.9104C90.9631 2.34429 91.0158 2.35206 91.0654 2.37014C91.1149 2.38821 91.1602 2.41622 91.1985 2.45241C91.2347 2.49094 91.2628 2.53636 91.2809 2.58593C91.2991 2.63551 91.307 2.68823 91.3041 2.74092V5.72072C91.3011 5.74208 91.3031 5.76386 91.3099 5.78435C91.3167 5.80484 91.3281 5.82349 91.3434 5.83885C91.3586 5.85421 91.3772 5.86585 91.3977 5.87289C91.4183 5.87992 91.4401 5.88215 91.4617 5.8794H93.0885C93.1412 5.87649 93.1939 5.88432 93.2435 5.90239C93.293 5.92046 93.3383 5.9484 93.3766 5.98449C93.4124 6.02369 93.4399 6.06956 93.4577 6.11944C93.4755 6.16932 93.4832 6.22221 93.4802 6.27505V9.17449C93.4823 9.22776 93.4737 9.28091 93.4548 9.33081C93.436 9.38071 93.4073 9.42635 93.3704 9.46505Z" fill="white"/>
+<path d="M94.4707 14.0766C94.4351 14.0378 94.4076 13.9922 94.3898 13.9427C94.372 13.8932 94.3643 13.8407 94.3671 13.7881V10.3612C94.3641 10.3083 94.3718 10.2554 94.3896 10.2055C94.4074 10.1557 94.4349 10.1098 94.4707 10.0706C94.5093 10.0343 94.5549 10.0063 94.6048 9.98824C94.6547 9.97017 94.7078 9.96243 94.7608 9.9655H102.916C102.969 9.96259 103.021 9.97042 103.071 9.98849C103.12 10.0066 103.166 10.0345 103.204 10.0706C103.24 10.1094 103.269 10.1552 103.287 10.2051C103.305 10.2551 103.313 10.3081 103.31 10.3612V13.7881C103.313 13.8408 103.305 13.8935 103.286 13.9431C103.268 13.9927 103.24 14.0381 103.204 14.0766C103.166 14.1134 103.121 14.1419 103.071 14.1604C103.022 14.1788 102.969 14.1868 102.916 14.1838H94.7608C94.7076 14.187 94.6544 14.1791 94.6044 14.1606C94.5544 14.1422 94.5089 14.1136 94.4707 14.0766Z" fill="white"/>
+<path d="M116.472 5.2735C116.434 5.3096 116.388 5.33754 116.339 5.35561C116.289 5.37368 116.236 5.3815 116.184 5.3786H109.786C109.765 5.37548 109.743 5.37738 109.722 5.38415C109.702 5.39092 109.683 5.40237 109.668 5.41758C109.653 5.4328 109.641 5.45135 109.634 5.47178C109.627 5.4922 109.625 5.51393 109.629 5.53521V8.00808C109.626 8.02945 109.628 8.05122 109.634 8.07171C109.641 8.0922 109.653 8.11085 109.668 8.12621C109.683 8.14157 109.702 8.15322 109.722 8.16025C109.743 8.16728 109.765 8.16951 109.786 8.16676H113.485C113.538 8.16385 113.591 8.17168 113.64 8.18975C113.69 8.20782 113.735 8.23576 113.774 8.27185C113.809 8.31105 113.837 8.35692 113.855 8.4068C113.872 8.45668 113.88 8.50957 113.877 8.56242V11.9956C113.88 12.0484 113.872 12.1013 113.855 12.1512C113.837 12.2011 113.809 12.2469 113.774 12.2861C113.735 12.3222 113.69 12.3502 113.64 12.3682C113.591 12.3863 113.538 12.3941 113.485 12.3912H109.786C109.765 12.3881 109.743 12.39 109.722 12.3968C109.702 12.4036 109.683 12.415 109.668 12.4302C109.653 12.4454 109.641 12.464 109.634 12.4844C109.627 12.5048 109.625 12.5266 109.629 12.5479V15.1856C109.625 15.2069 109.627 15.2286 109.634 15.249C109.641 15.2694 109.653 15.288 109.668 15.3032C109.683 15.3184 109.702 15.3299 109.722 15.3366C109.743 15.3434 109.765 15.3453 109.786 15.3422H116.186C116.239 15.3385 116.292 15.3462 116.342 15.3648C116.392 15.3834 116.437 15.4125 116.474 15.4501C116.512 15.4876 116.54 15.5328 116.559 15.5825C116.577 15.6322 116.584 15.6852 116.58 15.7379V19.1916C116.583 19.2446 116.575 19.2977 116.557 19.3476C116.538 19.3976 116.51 19.4433 116.474 19.4822C116.436 19.5183 116.39 19.5462 116.341 19.5643C116.291 19.5824 116.239 19.5902 116.186 19.5873H105.092C105.039 19.5902 104.987 19.5824 104.937 19.5643C104.888 19.5462 104.842 19.5183 104.804 19.4822C104.768 19.4433 104.739 19.3976 104.721 19.3476C104.703 19.2977 104.695 19.2446 104.698 19.1916V1.52917C104.695 1.47581 104.703 1.42235 104.721 1.37204C104.739 1.32173 104.767 1.27563 104.804 1.23655C104.842 1.20045 104.888 1.17251 104.937 1.15444C104.987 1.13637 105.039 1.12855 105.092 1.13145H116.186C116.238 1.12883 116.291 1.13679 116.34 1.15486C116.389 1.17292 116.434 1.20071 116.472 1.23655C116.508 1.27539 116.536 1.32115 116.555 1.37108C116.573 1.42102 116.581 1.47409 116.578 1.52711V4.98294C116.581 5.03596 116.573 5.08903 116.555 5.13897C116.536 5.1889 116.508 5.23466 116.472 5.2735Z" fill="white"/>
+<path d="M120.88 19.0325C119.923 18.5444 119.131 17.7887 118.6 16.8584C118.042 15.855 117.761 14.7221 117.788 13.5757V7.06584C117.763 5.93191 118.043 4.81193 118.6 3.82226C119.132 2.8991 119.925 2.15167 120.88 1.67293C121.946 1.18092 123.106 0.925 124.282 0.922865C125.457 0.92073 126.618 1.17243 127.686 1.66056C128.626 2.12557 129.413 2.84851 129.953 3.74395C130.512 4.69418 130.795 5.77979 130.772 6.88037C130.776 6.99102 130.739 7.09929 130.666 7.1833C130.63 7.22306 130.585 7.25439 130.535 7.27505C130.486 7.29571 130.432 7.30519 130.378 7.30282L126.233 7.48623C125.972 7.48623 125.841 7.36464 125.841 7.11736V6.8268C125.866 6.38475 125.718 5.95032 125.427 5.61509C125.282 5.46441 125.107 5.34634 124.912 5.26884C124.718 5.19135 124.509 5.15623 124.3 5.16585C124.087 5.15736 123.876 5.19417 123.679 5.27379C123.483 5.35342 123.305 5.47401 123.16 5.62745C122.863 5.95548 122.707 6.38606 122.727 6.8268V13.893C122.707 14.3338 122.862 14.7647 123.16 15.0924C123.305 15.2458 123.483 15.3664 123.679 15.446C123.876 15.5256 124.087 15.5624 124.3 15.554C124.509 15.5636 124.718 15.5285 124.912 15.451C125.107 15.3735 125.282 15.2554 125.427 15.1047C125.718 14.7695 125.866 14.3351 125.841 13.893V13.5757C125.841 13.3304 125.972 13.2068 126.233 13.2068L130.378 13.3923C130.431 13.3894 130.483 13.3972 130.533 13.4152C130.582 13.4333 130.628 13.4613 130.666 13.4974C130.702 13.5362 130.731 13.582 130.749 13.6319C130.767 13.6818 130.775 13.7349 130.772 13.7879C130.794 14.8963 130.513 15.9898 129.957 16.9511C129.421 17.8606 128.629 18.5937 127.678 19.0592C126.625 19.5681 125.466 19.8209 124.295 19.797C123.111 19.8242 121.938 19.5617 120.88 19.0325Z" fill="white"/>
+<path d="M135.147 19.0589C134.178 18.555 133.378 17.7808 132.844 16.8313C132.287 15.809 132.007 14.6598 132.032 13.497V7.22215C132.006 6.06326 132.286 4.91786 132.844 3.90026C133.379 2.95891 134.18 2.19385 135.147 1.69941C136.22 1.16413 137.408 0.897437 138.608 0.922517C139.812 0.898645 141.005 1.16521 142.083 1.69941C143.058 2.19 143.865 2.95557 144.404 3.90026C144.963 4.91786 145.243 6.06326 145.217 7.22215V13.497C145.242 14.6618 144.956 15.8122 144.388 16.8313C143.847 17.7804 143.041 18.5539 142.069 19.0589C140.99 19.5796 139.806 19.8502 138.607 19.8502C137.407 19.8502 136.224 19.5796 135.145 19.0589H135.147ZM139.828 15.0797C140.148 14.6847 140.311 14.1869 140.287 13.6805V7.08614C140.312 6.58027 140.149 6.0829 139.828 5.68897C139.678 5.51585 139.49 5.37858 139.278 5.28728C139.067 5.19598 138.838 5.15297 138.608 5.16142C138.382 5.15494 138.157 5.19897 137.951 5.29028C137.744 5.38158 137.561 5.51783 137.414 5.68897C137.094 6.0829 136.931 6.58027 136.956 7.08614V13.6805C136.931 14.1869 137.094 14.6847 137.414 15.0797C137.561 15.2506 137.744 15.3865 137.951 15.4775C138.157 15.5684 138.382 15.6121 138.608 15.6052C138.838 15.614 139.067 15.5714 139.278 15.4805C139.49 15.3895 139.678 15.2525 139.828 15.0797Z" fill="white"/>
+<path d="M77.3627 41.7972C76.4485 41.3854 75.6698 40.7254 75.1162 39.8931C74.5771 39.0504 74.3003 38.0683 74.3204 37.0699V36.4743C74.3176 36.4218 74.3253 36.3693 74.3431 36.3198C74.3609 36.2702 74.3884 36.2247 74.424 36.1858C74.4623 36.1497 74.5076 36.1218 74.5571 36.1037C74.6066 36.0857 74.6594 36.0778 74.7121 36.0807H78.7533C78.8057 36.0779 78.8581 36.0857 78.9073 36.1038C78.9565 36.1219 79.0014 36.1498 79.0393 36.1858C79.0756 36.2244 79.1036 36.2698 79.1218 36.3193C79.14 36.3689 79.1479 36.4216 79.145 36.4743V36.8432C79.1453 37.0348 79.1888 37.2239 79.2724 37.3965C79.356 37.5691 79.4775 37.7209 79.6279 37.8406C79.9927 38.1325 80.4536 38.2794 80.9211 38.2527C81.0961 38.2671 81.2722 38.2454 81.4384 38.189C81.6045 38.1326 81.7572 38.0428 81.8869 37.9251C82.0871 37.7262 82.1997 37.4564 82.1998 37.175C82.2005 37.0131 82.1616 36.8536 82.0865 36.71C82.0114 36.5664 81.9024 36.4431 81.7688 36.3507C81.2543 36.0067 80.7082 35.7121 80.1377 35.4708L79.516 35.1555C78.6406 34.7403 77.7944 34.2667 76.9835 33.7377C76.2414 33.2427 75.607 32.6042 75.1182 31.8604C74.5832 31.024 74.3145 30.0465 74.3473 29.0557C74.3275 28.058 74.6044 27.0766 75.1431 26.2346C75.6827 25.4126 76.443 24.7573 77.3379 24.3429C78.3398 23.8818 79.4339 23.6528 80.5377 23.6731C81.683 23.6538 82.8175 23.8963 83.8536 24.382C84.7868 24.8219 85.5768 25.5138 86.1333 26.3788C86.6907 27.2583 86.9787 28.2801 86.9623 29.3195V29.7316C86.9651 29.7842 86.9574 29.8367 86.9396 29.8862C86.9218 29.9357 86.8943 29.9813 86.8587 30.0201C86.8204 30.0562 86.7751 30.0842 86.7256 30.1023C86.676 30.1203 86.6233 30.1281 86.5706 30.1252H82.5231C82.4704 30.1283 82.4177 30.1205 82.3681 30.1024C82.3186 30.0843 82.2733 30.0563 82.2351 30.0201C82.1988 29.9816 82.1707 29.9362 82.1526 29.8866C82.1344 29.837 82.1265 29.7843 82.1294 29.7316V29.3628C82.1294 29.169 82.0889 28.9773 82.0104 28.7999C81.9319 28.6225 81.8171 28.4633 81.6734 28.3324C81.5114 28.181 81.3203 28.0636 81.1117 27.9871C80.903 27.9107 80.6811 27.8767 80.459 27.8873C80.123 27.8719 79.7929 27.9789 79.5305 28.1882C79.4132 28.2903 79.3206 28.4175 79.2596 28.5603C79.1986 28.703 79.1707 28.8575 79.1782 29.0125C79.1883 29.218 79.2469 29.4183 79.3491 29.5973C79.4513 29.7763 79.5944 29.9289 79.7668 30.0428C80.1578 30.3505 80.928 30.7751 82.0776 31.3163C82.2516 31.4208 82.5128 31.5581 82.8609 31.7285C83.6258 32.1383 84.3675 32.5896 85.0826 33.0803C85.6559 33.4935 86.136 34.0213 86.4919 34.63C86.8947 35.3465 87.0932 36.1588 87.0659 36.9792C87.0659 38.6594 86.487 39.9899 85.3292 40.9708C84.1714 41.9517 82.6433 42.4415 80.745 42.4401C79.5835 42.4781 78.4282 42.2585 77.3627 41.7972Z" fill="white"/>
+<path d="M91.3766 41.7436C90.4087 41.2441 89.6096 40.4731 89.0782 39.5263C88.5215 38.5081 88.2422 37.363 88.2679 36.2044V29.9563C88.2411 28.8015 88.5205 27.6601 89.0782 26.6468C89.6113 25.7074 90.4106 24.9448 91.3766 24.4542C92.4455 23.9205 93.6293 23.6545 94.8251 23.6793C96.0248 23.656 97.2123 23.9218 98.2861 24.4542C99.2568 24.9427 100.061 25.7055 100.597 26.6468C101.154 27.6603 101.433 28.8016 101.407 29.9563V36.2044C101.43 37.3649 101.144 38.5108 100.578 39.5263C100.039 40.4717 99.2353 41.2418 98.2654 41.7436C97.1914 42.2636 96.0124 42.5338 94.8179 42.5338C93.6233 42.5338 92.4444 42.2636 91.3703 41.7436H91.3766ZM96.0396 37.7808C96.358 37.3877 96.5203 36.892 96.4955 36.3878V29.8244C96.5198 29.3209 96.3575 28.826 96.0396 28.4334C95.8896 28.261 95.7026 28.1243 95.4924 28.0334C95.2822 27.9424 95.0542 27.8996 94.8251 27.9079C94.5998 27.9008 94.3758 27.9443 94.1699 28.0353C93.9639 28.1263 93.7812 28.2624 93.6355 28.4334C93.3176 28.826 93.1554 29.3209 93.1796 29.8244V36.3878C93.1548 36.892 93.3171 37.3877 93.6355 37.7808C93.7814 37.9515 93.9642 38.0872 94.1701 38.1778C94.3761 38.2685 94.6 38.3117 94.8251 38.3043C95.0541 38.313 95.282 38.2706 95.4922 38.18C95.7025 38.0894 95.8895 37.953 96.0396 37.7808Z" fill="white"/>
+<path d="M105.795 41.7192C104.839 41.2329 104.047 40.4803 103.515 39.5534C102.96 38.5532 102.681 37.425 102.707 36.283V29.7979C102.682 28.6692 102.961 27.5545 103.515 26.5688C104.048 25.649 104.841 24.9046 105.795 24.4277C106.856 23.9371 108.011 23.6818 109.182 23.6797C110.352 23.6776 111.509 23.9286 112.572 24.4153C113.509 24.878 114.294 25.5982 114.833 26.4905C115.386 27.438 115.666 28.5191 115.641 29.6145C115.645 29.7241 115.608 29.8312 115.537 29.9154C115.501 29.9555 115.457 29.9871 115.407 30.0078C115.357 30.0285 115.303 30.0377 115.249 30.0349L111.123 30.2183C110.862 30.2183 110.731 30.0968 110.731 29.8515V29.561C110.756 29.1202 110.607 28.6871 110.317 28.3534C110.172 28.2038 109.997 28.0866 109.804 28.0099C109.61 27.9331 109.402 27.8984 109.193 27.9083C108.982 27.8996 108.771 27.9361 108.575 28.0154C108.379 28.0947 108.203 28.2148 108.058 28.3678C107.762 28.694 107.608 29.1225 107.627 29.561V36.5983C107.608 37.0375 107.762 37.4666 108.058 37.7935C108.203 37.9465 108.379 38.0667 108.575 38.146C108.771 38.2253 108.982 38.2618 109.193 38.2531C109.402 38.2633 109.61 38.2287 109.804 38.1515C109.998 38.0743 110.173 37.9564 110.317 37.8059C110.608 37.4725 110.757 37.0392 110.731 36.5983V36.283C110.731 36.0378 110.862 35.9162 111.123 35.9162L115.249 36.0996C115.302 36.0967 115.355 36.1046 115.404 36.1226C115.454 36.1407 115.499 36.1686 115.537 36.2047C115.573 36.2436 115.6 36.2891 115.618 36.3387C115.636 36.3882 115.644 36.4407 115.641 36.4932C115.664 37.5969 115.384 38.6861 114.833 39.6441C114.297 40.5515 113.504 41.2818 112.553 41.744C111.504 42.2509 110.349 42.5031 109.183 42.4796C108.008 42.5042 106.845 42.2432 105.795 41.7192Z" fill="white"/>
+<path d="M117.21 42.1638C117.173 42.1254 117.145 42.08 117.127 42.0304C117.109 41.9808 117.101 41.928 117.104 41.8753V24.2829C117.101 24.2303 117.109 24.1775 117.127 24.128C117.145 24.0784 117.173 24.033 117.21 23.9944C117.247 23.9582 117.292 23.9301 117.342 23.9121C117.391 23.894 117.443 23.8862 117.496 23.8893H121.624C121.676 23.8866 121.729 23.8945 121.778 23.9126C121.827 23.9306 121.872 23.9585 121.91 23.9944C121.946 24.033 121.974 24.0784 121.992 24.128C122.011 24.1775 122.018 24.2303 122.016 24.2829V41.8753C122.02 41.9278 122.013 41.9807 121.995 42.0303C121.978 42.0799 121.949 42.125 121.912 42.1624C121.874 42.1999 121.829 42.2288 121.78 42.2472C121.73 42.2656 121.677 42.273 121.624 42.2689H117.496C117.443 42.272 117.391 42.2643 117.342 42.2462C117.292 42.2281 117.247 42.2001 117.21 42.1638Z" fill="white"/>
+<path d="M133.508 41.929L133.064 39.9074C133.029 39.8188 132.977 39.7755 132.907 39.7755H128.99C128.919 39.7755 128.867 39.8188 128.832 39.9074L128.418 41.929C128.4 42.0305 128.344 42.1218 128.262 42.1847C128.18 42.2476 128.077 42.2777 127.974 42.269H123.686C123.63 42.2743 123.574 42.2664 123.522 42.246C123.47 42.2256 123.423 42.1932 123.386 42.1515C123.354 42.1036 123.334 42.0491 123.328 41.9923C123.321 41.9354 123.327 41.8778 123.346 41.8239L127.997 24.2315C128.009 24.1328 128.059 24.0425 128.136 23.9789C128.213 23.9154 128.312 23.8834 128.411 23.8894H133.593C133.692 23.8834 133.791 23.9154 133.868 23.9789C133.945 24.0425 133.995 24.1328 134.007 24.2315L138.627 41.8321C138.645 41.8729 138.654 41.9172 138.653 41.9619C138.653 42.1721 138.531 42.2772 138.287 42.2772H133.951C133.847 42.2857 133.743 42.2545 133.66 42.1899C133.578 42.1253 133.523 42.032 133.508 41.929ZM129.667 35.856C129.667 35.9446 129.719 35.9879 129.825 35.9879H132.044C132.167 35.9879 132.219 35.9261 132.202 35.8045L131.027 30.3436C131.009 30.2735 130.974 30.2385 130.921 30.2385C130.869 30.2385 130.834 30.2735 130.818 30.3436L129.667 35.8045V35.856Z" fill="white"/>
+<path d="M140.098 42.1637C140.062 42.1253 140.033 42.08 140.015 42.0303C139.997 41.9807 139.989 41.9279 139.992 41.8752V24.2828C139.99 24.2302 139.997 24.1774 140.016 24.1279C140.034 24.0783 140.062 24.0329 140.098 23.9943C140.136 23.9583 140.181 23.9304 140.23 23.9123C140.279 23.8942 140.332 23.8864 140.384 23.8892H144.512C144.565 23.8864 144.617 23.8942 144.666 23.9123C144.716 23.9304 144.76 23.9583 144.798 23.9943C144.835 24.0329 144.863 24.0783 144.881 24.1279C144.899 24.1774 144.907 24.2302 144.904 24.2828V37.8836C144.901 37.9049 144.902 37.9266 144.909 37.9471C144.915 37.9676 144.927 37.9864 144.942 38.0018C144.957 38.0172 144.975 38.0289 144.996 38.0359C145.016 38.0429 145.038 38.0451 145.06 38.0423H151.617C151.669 38.0394 151.722 38.0472 151.772 38.0653C151.821 38.0834 151.867 38.1113 151.905 38.1474C151.94 38.1863 151.968 38.2318 151.986 38.2813C152.003 38.3308 152.011 38.3834 152.008 38.4359V41.8752C152.011 41.9278 152.004 41.9803 151.986 42.0299C151.968 42.0794 151.941 42.1249 151.905 42.1637C151.867 42.1998 151.821 42.2278 151.772 42.2458C151.722 42.2639 151.669 42.2717 151.617 42.2688H140.384C140.332 42.2717 140.279 42.2638 140.23 42.2458C140.181 42.2277 140.136 42.1998 140.098 42.1637Z" fill="white"/>
+<path d="M68.6273 42.5334C70.3007 42.5334 71.6573 41.1845 71.6573 39.5206C71.6573 37.8567 70.3007 36.5078 68.6273 36.5078C66.954 36.5078 65.5974 37.8567 65.5974 39.5206C65.5974 41.1845 66.954 42.5334 68.6273 42.5334Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_50_2499">
+<rect width="152" height="60" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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>

assets/img/shopping-bag-white.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 6L6.5 2H18.5L21.5 6M3.5 6V20C3.5 20.5304 3.71071 21.0391 4.08579 21.4142C4.46086 21.7893 4.96957 22 5.5 22H19.5C20.0304 22 20.5391 21.7893 20.9142 21.4142C21.2893 21.0391 21.5 20.5304 21.5 20V6M3.5 6H21.5M16.5 10C16.5 11.0609 16.0786 12.0783 15.3284 12.8284C14.5783 13.5786 13.5609 14 12.5 14C11.4391 14 10.4217 13.5786 9.67157 12.8284C8.92143 12.0783 8.5 11.0609 8.5 10" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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>

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>

assets/img/x.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.52373 6.77569L15.4811 0H14.0699L8.89493 5.88203L4.7648 0H0L6.24693 8.89552L0 16H1.4112L6.87253 9.78704L11.2352 16H16M1.92053 1.04127H4.08853L14.0688 15.0099H11.9003" fill="white"/>
+</svg>

assets/scss/core/variables.scss

@@ -1,4 +1,17 @@
 /* COLORS */
+$color-consumo-base: #F28C8C;
+$color-consumo-base-light: #F6B1B1;
+$color-consumo-base-extra-light:#FAD1D1;
+$color-button: #143E8C;
+
+$color-primary: #111111;
+$color-second: #B8B8B8;
+
+$color-bg-dark: #091B3D;
+$color-bg-dark-2: #0D2758;
+$color-bg-light: #F9F4F2;
+$color-bg-extra-light: #FDFCFB;
+
 $color-navy: #374493;
 $color-lightblue: #eff9ff;
 $color-orange: #ff666e;
@@ -21,20 +34,27 @@ $color-grey-darker: #3b3b3b;
 
 $color-facebook: #3351a3;
 $color-google: #346cf1;
-$color-error: crimson;
+$color-error: #B40502;
+$color-success: #039B65;
 
 /* FONT SIZE */
-$xxl: 1.562rem; //25px
-$xl: 1.25rem; //20px
-$l: 1.125rem; //18px
-$m: 1rem; //16px
-$s: 0.875rem; //14px
-$xs: 0.75rem; //12px
-$xxs: 0.625rem; // 10px
+$hero: 48px;
+$h1: 48px;
+$h2: 36px;
+$h3: 32px;
+$h4: 22px;
+$h5: 16px;
+$xxl: 24px;
+$xl: 20px;
+$l: 18px;
+$m: 16px;
+$s: 14px;
+$xs: 12px;
+$xxs: 10px;
 
 /* FONTS */
-$font-primary: 'Poppins', Arial, sans-serif;
-$font-secondary: 'Noto Sans', Arial, sans-serif;
+$font-primary: 'Barlow', Arial, sans-serif;
+$font-secondary: 'Barlow', Arial, sans-serif;
 
 /* FONT WEIGHT */
 $regular: 400;

assets/scss/main.scss

@@ -4,57 +4,69 @@
 
 // Fonts
 @font-face {
-  font-family: 'Poppins';
+  font-family: "BarlowSemiCondensed";
   font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('~/assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
+  font-weight: 700;
+  src: local("Barlow SemiCondensed Bold"), local("BarlowBarlowSemiCondensed-Bold"),
+    url(../fonts/BarlowSemiCondensed/BarlowSemiCondensed-Bold.ttf) format("opentype");
 }
 
 @font-face {
-  font-family: 'Poppins';
+  font-family: "Barlow";
   font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('~/assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
+  font-weight: 700;
+  src: local("Barlow Bold"), local("Barlow-Bold"),
+    url(../fonts/Barlow/Barlow-Bold.ttf) format("opentype");
 }
 
 @font-face {
-  font-family: 'Poppins';
+  font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
-  font-display: swap;
-  src: url('~/assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
+  src: local("Barlow Semibold"), local("Barlow-Semibold"),
+    url(../fonts/Barlow/Barlow-Semibold.ttf) format("opentype");
 }
 
 @font-face {
-  font-family: 'Poppins';
+  font-family: "Barlow";
   font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('~/assets/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
+  font-weight: 500;
+  src: local("Barlow Medium"), local("Barlow-Medium"),
+    url(../fonts/Barlow/Barlow-Medium.ttf) format("opentype");
 }
 
 @font-face {
-  font-family: 'Noto Sans';
+  font-family: "Barlow";
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
-  src: url('~/assets/fonts/Noto_Sans/NotoSans-Regular.ttf') format('truetype');
+  src: local("Barlow Regular"), local("Barlow-Regular"),
+    url(../fonts/Barlow/Barlow-Regular.ttf) format("opentype");
 }
 
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('~/assets/fonts/Noto_Sans/NotoSans-Bold.ttf') format('truetype');
-}
-
-$font-family-sans-serif: 'Poppins';
+$font-family-sans-serif: 'Barlow';
 $blue: #374493;
 
 
 html {
   font-size: min(max(1rem, 4vw), 16px);
+  color: $color-primary;
+}
+
+body {
+  padding: 0 2rem;
+
+  header,
+  footer {
+    margin-left: -2rem;
+    margin-right: -2rem;
+
+    @include mobile {
+      margin-left: -1rem;
+      margin-right: -1rem;
+    }
+  }
+
+  @include mobile {
+    padding: 0 1rem;
+  }
 }

components/BannerCoop.vue

@@ -23,7 +23,7 @@
         />
         <span>Saber más</span>
       </NuxtLink>
-      <NuxtLink class="col-2 link fill-div" to="/registro/cooperativa">
+      <NuxtLink class="col-2 link fill-div" to="/registro/productora">
         <img
           class="img-form"
           src="@/assets/img/latienda-formulario.svg"

components/ButtonCTA.vue

@@ -0,0 +1,53 @@
+<template>
+  <button type="button" class="flex items-center justify-center cursor-pointer"
+    :disabled="disabled" :class="buttonClasses" @click="handleClick">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: "transparent",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    buttonClasses() {
+      return {
+        "transparent": this.color === "transparent",
+      };
+    }
+  },
+  methods: {
+    handleClick($ev) {
+      if (this.disabled) {
+        $ev.stopPropagation();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.transparent {
+  background: transparent;
+  padding: 1rem;
+  border: 1px solid $color-button;
+  border-radius: 12px;
+  color: $color-button;
+  width: fit-content;
+  text-transform: uppercase;
+  &:hover {
+    background: $color-button;
+    color: white;
+  }
+}
+
+</style>

components/CompanyForm.vue

@@ -3,15 +3,15 @@
       id="modal-center" 
       v-model="activeModal" 
       centered 
-      title="latienda.coop" 
+      title="consumo-cuidado" 
       :ok-variant="modalColor"> {{ modalText }}
   </BModal>
   <form class="form" @submit.prevent="submitCompany">
-    <FormHeader title="general" />
-    <p class="help-text">
-      Estos son los datos básicos de la cooperativa. Procura completar el mayor
-      número de campos posible.
-    </p>
+    <FormHeader 
+      class="f-header"
+      title="General" 
+      subtitle="Estos son los datos básicos de la cooperativa. Procura completar el mayor
+      número de campos posible." />
     <fieldset class="fieldset fieldset-general">
       <div class="cont">
         <FormInput 
@@ -81,13 +81,13 @@
         />
       </div>
       <div class="cont-col">
-        <label for="imagen">Logo</label>
+        <label for="imagen" class="label">Logo</label>
         <ClientOnly>
           <FormInputImage :image-url="form.logo" @change="handleImage($event)" />
         </ClientOnly>
       </div>
       <div class="cont-col">
-        <label for="tags-basic">Palabras clave</label>
+        <label for="tags-basic" class="label">Palabras clave</label>
         <BFormTags
           v-model="form.tags"
           placeholder="Añade palabras clave"
@@ -95,19 +95,20 @@
         />
       </div>
       <div class="cont-col">
-        <label for="">Descripción</label>
+        <label for="" class="label">Descripción</label>
         <textarea v-model="form.description" class="textarea" type="text" />
       </div>
     </fieldset>
 
-    <FormHeader title="tienda online" />
-    <p class="help-text">
-      Indica si la cooperativa dispone de tienda online. En caso afirmativo,
+    <FormHeader 
+      class="f-header"
+      title="Tienda Online"
+      subtitle="Indica si la cooperativa dispone de tienda online. En caso afirmativo,
       indica su url y la plataforma utilizada en el seleccionable. Si utilizas
       WooCommerce, puedes indicar su API para sincronizar automáticamente todos
       los productos.
-      <a href="#">Sigue estos pasos para obtener la API.</a>
-    </p>
+      <a href='#'>Sigue estos pasos para obtener la API.</a>"
+      />
     <fieldset class="fieldset">
       <div class="cont">
         <div>
@@ -130,7 +131,7 @@
         >
       </div>
       <div class="cont-col">
-        <label for="select-shop">Plataforma</label>
+        <label for="select-shop" class="label">Plataforma</label>
         <BFormSelect id="select-shop" v-model="form.platform"  name="" >
           <option selected disabled value="">Plataforma</option>
           <option
@@ -163,11 +164,11 @@
       </div>
     </fieldset>
 
-    <FormHeader title="localización" />
-    <p class="help-text">
-      La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
-      que estén cerca de tu posición.
-    </p>
+    <FormHeader 
+      class="f-header"
+      title="Localización"
+      subtitle="La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
+      que estén cerca de tu posición." />
     <fieldset class="fieldset">
     <!-- TODO: Arreglar este componente: -->
       <!-- <GoogleAddress :value="form.address" @added-data="getPlace" /> -->
@@ -183,20 +184,20 @@
       </div>
     </fieldset>
 
-    <FormHeader title="términos y condiciones" />
-    <p class="help-text help-text-terms">
-      En estos textos podrás indicar las condiciones de venta o condiciones de
+    <FormHeader 
+      class="f-header"
+      title="Términos y Condiciones" 
+      subtitle="En estos textos podrás indicar las condiciones de venta o condiciones de
       envío de la cooperativa. Si no tienes claro qué texto añadir, puedes hacer
-      <a @click="loadText">click aquí para cargar un texto predefinido</a>
+      <a @click='loadText'>click aquí para cargar un texto predefinido</a>
       que podrás editar. Ten en cuenta que al clicar se borrará el contenido de
-      ambos campos.
-    </p>
+      ambos campos.."/>
 
     <fieldset class="fieldset">
       <div class="cont-col">
-        <label for="">Condiciones de venta</label>
+        <label for="" class="label">Condiciones de venta</label>
         <textarea v-model="form.sale_terms" class="textarea" type="text" />
-        <label for="">Condiciones de envío</label>
+        <label for="" class="label">Condiciones de envío</label>
         <textarea v-model="form.shipping_terms" class="textarea" type="text" />
         <FormInput
           v-model="form.shipping_cost"
@@ -359,6 +360,9 @@ export default {
 
 <style lang="scss" scoped>
 .form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   @include desktop {
     width: 40%;
   }
@@ -368,16 +372,18 @@ export default {
   @include mobile {
     width: 90%;
   }
-
+  .f-header {
+    margin-bottom: 1rem;
+  }
   .imagenInput {
     font-size: $s;
   }
 
   label, .label {
-    text-align: left;
-    color: $color-navy;
-    font-weight: $bold;
-    font-size: $xs;
+    color: $color-primary;
+    font-weight: $medium;
+    font-size: $s;
+    display: block;
   }
 
   .textarea {
@@ -391,6 +397,7 @@ export default {
   }
 }
 .fieldset {
+  width: 100%;
   margin-bottom: 70px;
   align-items: left;
 }

components/CoopCard.vue

@@ -1,89 +1,40 @@
 <template>
-  <div class="productcard_container">
-    <div class="row productcard_container-basic">
-      <div class="image_container col-md-2">
-        <img
-          v-if="coop.logo"
-          class="image"
+  <div class="card">
+    <div class="card-image">
+      <img
+        v-if="coop.logo"
+        class="image"
           :src="coop.logo"
           :alt="coop.company_name"
         />
         <img
           v-else
           class="image"
-          src="@/assets/img/latienda-product-default.svg"
+          src="@/assets/img/consumo-default.png"
           :alt="coop.company_name"
         />
+    </div>
+    <div class="card-body" align="left">
+      <h2>{{ coop.company_name }}</h2>
+      <p class="description">{{ coop.description }}</p>
+      <div class="tags">
+        <p
+          v-for="n in coop.tags"
+          :key="n"
+          :to="tagRoute(n)"
+          class="tags"
+        >
+          <span>{{ n }}</span>
+        </p>
       </div>
-      <div class="info_container col-md-6" align="left">
-        <NuxtLink :to="`/c/${this.coop.id}`">
-          <h2>{{ coop.company_name }}</h2>
-        </NuxtLink>
-        <p class="description">{{ coop.description }}</p>
-        <div class="tags_container">
-          <NuxtLink
-            :to="tagRoute(n)"
-            class="tag_container"
-            v-for="n in coop.tags"
-            :key="n"
-          >
-            <img class="tag_img" src="@/assets/img/latienda-tag.svg" />
-            <span>{{ n }}</span>
-          </NuxtLink>
-        </div>
-      </div>
-      <div class="col-md-4 button_container" align="center">
-        <a v-if="coop.shop_link" :href="coop.shop_link" class="button_buy">
-          <img
-            alt="tienda"
-            class="button_cart_img"
-            src="@/assets/img/latienda-tienda.svg"
-          />
-          <span>Tienda online</span>
-        </a>
-        <a v-if="coop.web_link" :href="coop.web_link" class="button_buy">
-          <img
-            alt="web"
-            class="button_cart_img"
-            src="@/assets/img/latienda-web.svg"
-          />
-          <span>Página web</span>
-        </a>
-        <div class="smlogos_container">
-          <div class="smlogo_container">
-            <a @click="shareFacebook">
-              <img
-                class="smlogo_img"
-                alt="facebook logo"
-                src="@/assets/img/latienda-smlogo-facebook.svg"
-              />
-            </a>
-          </div>
-          <a @click="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>
+    </div>
+    <div class="card-actions">
+      <NuxtLink :to="`/productoras/${this.coop.id}`" class="btn-outline">
+        <button >VER FICHA</button>
+      </NuxtLink>
+      <NuxtLink v-if="coop.web_link" :to="coop.web_link" class="btn-outline">
+        <button>WEB</button>
+      </NuxtLink>
     </div>
   </div>
 </template>
@@ -91,12 +42,15 @@
 <script>
 import socialShare from '~/utils/socialShare'
 export default {
-  name: 'CoopCard',
-  props: ['coop'],
-
+  props: {
+    coop: {
+      type: Object,
+      required: true,
+    },
+  },
   computed: {
     coopUrl() {
-      return `${window.location.origin}/c/${this.coop.id}`
+      return `${window.location.origin}/productoras/${this.coop.id}`
     },
   },
   methods: {
@@ -120,118 +74,88 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.productcard_container {
-  border: 3px #e9e9e9 solid;
-  border-radius: 5px;
-  margin-bottom: 25px;
-}
-.productcard_container-basic {
-  padding: 25px 20px;
-}
 
-.image_container {
-  height: 100%;
-  overflow: hidden;
-  margin: auto;
-}
-
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.info_container {
-  h2 {
-    outline: none;
-    font-weight: $medium;
-    color: $color-navy;
-    font-size: $m;
-  }
-  .price {
-    font-weight: $bold;
-    color: $color-navy;
-    font-size: $m;
-  }
-  span {
-    color: #808080;
-  }
-  .description {
-    margin-top: 8px;
-    font-family: $font-secondary;
-    font-size: $s;
-    color: $color-greytext;
-    display: -webkit-box;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
+.card {
+    display: flex;
+    flex-direction: column;
+    border-radius: 1rem;
+    border: 2px solid white;
+    background: #fff;
     overflow: hidden;
-  }
-}
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
+    height: 100%;
+    max-height: 546px;
+    max-width: 288px;
 
-.button_container {
-  display: flex;
-  flex-direction: column;
-  font-size: $s;
+    .card-image {
+      width: 100%;
+      height: 288px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-  .button_buy {
-    width: 100%;
-    color: $color-orange;
-    font-weight: $bold;
-    padding: 10px 0;
-    margin-bottom: 5px;
-    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;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: cover;
+      }
     }
 
-    span {
-      display: inline-block;
+    .card-body {
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+
+      h2 {
+        font-size: $m;
+        font-weight: $medium;
+      }
+
+      p {
+        font-size: $s;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+
+        span {
+          font-size: 0.75rem;
+          padding: 0.25rem 0.5rem;
+          border-radius: 1rem;
+          border: 1px solid #787878;
+          color: #787878;
+          text-transform: uppercase;
+          
+        }
+      }
     }
+    .card-actions {
+        display: flex;
+        gap: 0.5rem;
+        padding: 1rem;
+
+        .btn-outline {
+          flex: 1;
+          text-align: center;
+          padding: 0.5rem;
+          font-size: $s;
+          color: $color-button;
+          border: 1px solid $color-button;
+          border-radius: 0.75rem;
+          cursor: pointer;
+          transition: all 0.2s ease;
+
+          &:hover {
+            background: $color-button;
+            color: white;
+          }
+        }
+      }
   }
-}
-
-.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;
-  }
-}
-
-.smlogo_container {
-  display: inline-block;
-  margin-top: 15px;
-
-  .smlogo_img {
-    width: 35px;
-    fill: $color-greytext;
-    margin: 2px;
-  }
-  img:hover {
-    transform: scale(1.1);
-    transition: all 0.2s ease;
-  }
-}
-
-.button_cart_img {
-  width: 20px;
-  margin-right: 10px;
-}
-
-.content > h2,
-h3,
-p {
-  margin: 0;
-}
 </style>

components/Footer.vue

@@ -1,212 +1,297 @@
 <template>
-  <div>
-    <hr />
-    <div>
-      <img class="bolsa" src="@/assets/img/footer-bolsa.svg" alt="" />
-    </div>
-    <hr />
-    <div class="social">
-      <a href="https://www.facebook.com/coceta" target="_blank">
-        <img
-          class="social-logo"
-          src="@/assets/img/footer-facebook.svg"
-          alt=""
-        />
-      </a>
-      <a href="https://twitter.com/Coopsdetrabajo" target="_blank">
-        <img class="social-logo" src="@/assets/img/footer-twitter.svg" alt="" />
-      </a>
-    </div>
-    <hr />
-    <div class="organization">
-      <div class="organization-image-container">
-        <img
-          class="organization-image"
-          src="@/assets/img/footer-coceta.svg"
-          alt=""
-        />
+  <footer>
+    <div class="footer-container">
+      <div class="media-container">
+        <img src="/assets/img/logo.svg" alt="Kit-ECO.SOCIAL Logo" class="logo-kit">
+
+        <p>Síguenos y entérate de los próximos eventos, novedades y recursos.</p>
+        <ul class="social-list">
+          <li class="social-item">
+            <NuxtLink to="#" class="social-link">
+              <img src="/assets/img/instagram.svg" alt="Instagram" />
+            </NuxtLink>
+          </li>
+          <li class="social-item">
+            <NuxtLink to="#" class="social-link">
+              <img src="/assets/img/facebook.svg" alt="Facebook" />
+            </NuxtLink>
+          </li>
+          <li class="social-item">
+            <NuxtLink to="#" class="social-link">
+              <img src="/assets/img/linkedin.svg" alt="LinkedIn" />
+            </NuxtLink>
+          </li>
+          <li class="social-item">
+            <NuxtLink to="#" class="social-link">
+              <img src="/assets/img/x.svg" alt="X-Twitter" />
+            </NuxtLink>
+          </li>
+        </ul>
+
       </div>
-      <div>
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
+
+      <div class="footer-links">
+        <div class="footer-column">
+          <h3>Herramientas</h3>
+          <ul>
+            <li><NuxtLink to="https://www.kit-eco.social/es/consumo-cuidado">Consumo Cuidado</NuxtLink></li>
+            <li><NuxtLink to="https://www.kit-eco.social/es/aula-virtual">Aula Virtual</NuxtLink></li>
+            <li><NuxtLink to="https://www.kit-eco.social/es/iguales">Iguales</NuxtLink></li>
+            <li><NuxtLink to="https://www.kit-eco.social/es/objetivo2030">Objetivo 2030</NuxtLink></li>
+            <li><NuxtLink to="https://www.kit-eco.social/es/certifica-t">Certifica-T</NuxtLink></li>
+            <li><NuxtLink to="https://www.kit-eco.social/es/enlazados">Enlazados</NuxtLink></li>
+          </ul>
+        </div>
+
+        <div class="footer-column">
+          <h3>Enlaces rápidos</h3>
+          <ul>
+            <li><a href="#">Nosotras</a></li>
+            <li><a href="#">Contactanos</a></li>
+            <li><a href="#">Términos y condiciones</a></li>
+            <li><a href="#">Política de privacidad</a></li>
+            <li><a href="#">Aviso legal</a></li>
+          </ul>
+        </div>
       </div>
-      <div class="organization-image-container">
-        <img
-          class="organization-image"
-          src="@/assets/img/footer-ministerio.svg"
-          alt=""
-        />
+
+      <div class="footer-logos">
+        <h3>Proyecto financiado por:</h3>
+        <div class="logos-grid">
+          <img src="/assets/img/uelogo 1.png" alt="Unión Europea">
+          <img src="/assets/img/logotipo_ministerio.png" alt="Gobierno de España">
+          <img src="/assets/img/logotipo_PRTR.png" alt="Plan de Recuperación">
+        </div>
       </div>
+
     </div>
-    <ul class="link-list">
-      <li>
-        <small>2021 La Tienda.Coop</small>
-      </li>
 
-      <li>
-        <a href="https://coceta.coop/" class="footer-link" target="_blank">
-          <small>Coceta</small>
-        </a>
-      </li>
-
-      <li>
-        <NuxtLink to="/page/terminos">
-          <small>Términos y condiciones</small>
-        </NuxtLink>
-      </li>
-
-      <li>
-        <NuxtLink to="/page/legal">
-          <small>Política de privacidad</small>
-        </NuxtLink>
-      </li>
-
-      <li>
-        <NuxtLink to="/page/cookies">
-          <small>Cookies</small>
-        </NuxtLink>
-      </li>
-
-      <li>
-        <a
-          href="http://enreda.coop/"
-          class="footer-link enreda"
-          target="_blank"
-        >
-          <small
-            ><mark class="highlight">Sitio desarrollado por Enreda</mark></small
-          >
-        </a>
-      </li>
-    </ul>
-  </div>
+    <div class="made-by">
+      <p><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por Enreda Coop</p>
+    </div> 
+  </footer>
 </template>
 
 <script>
+import { getCurrentYear } from "@/utils/dates.js";
 export default {
-  name: 'Footer',
-}
+  computed: {
+    year() {
+      return getCurrentYear();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-hr {
-  margin-top: 0;
-}
-
-.bolsa {
-  width: 50px;
-  height: auto;
-  margin: 4.375rem auto;
-  display: block;
-  @include mobile {
-    width: 35px;
-    margin: 3rem auto;
-  }
-}
-.social {
+footer {
+  background: linear-gradient($color-button, $color-bg-dark-2);
   display: flex; 
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin: 3.125rem auto;
-  &-logo {
-    height: 1.25rem;
-    margin: auto 1.875rem;
+  padding-left: 1rem;
+  padding-right: 1rem; 
+  padding-top: 3rem;
+  padding-bottom: 3rem; 
+  flex-direction: column; 
+  gap: 2rem; 
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+  color: white;
+  @media (min-width: 768px) { 
+    padding-left: 2rem;
+    padding-right: 2rem; 
   }
 }
 
-.organization {
+.footer-container {
   display: flex; 
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  &-image {
-    width: 18rem;
-    margin: 3.125rem;
-    @include mobile {
-      width: 6rem;
-      margin: 0.8rem;
-    }
+  flex-direction: column;
+  gap: 4rem;
+  justify-content: space-between;
+  @media (min-width: 768px) { 
+    gap: 3rem; 
   }
-}
-
-.dot {
-  height: 3px;
-  width: 3px;
-  background-color: #bbb;
-  border-radius: 50%;
-  display: block;
-  margin: 7px;
-
-  @include mobile {
-    height: 2px;
-    width: 2px;
-    margin: 5px;
-  }
-}
-
-.link-list {
-  font-family: 'Noto Sans';
-  font-size: $xs;
-  color: $color-grey-darker;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  margin-top: 1rem;
-  margin-bottom: 3.125rem;
-  text-decoration: none;
-  list-style-type: none;
-
-  @include mobile {
-    display: none;
-  }
-
-  @include tablet {
+  @media (min-width: 1024px) { 
     flex-direction: row; 
-    font-size: $xxs;
+  gap: 4rem; 
+ }
+}
+
+.media-container {
+  display: flex; 
+  flex-direction: column; 
+  gap: 1.5rem; 
+  align-items: center; 
+  width: 100%; 
+  @media (min-width: 768px) { 
+    align-items: flex-start; 
+  width: 33.333333%; 
+  }
+  @media (min-width: 1024px) { 
+    width: 16.666667%; 
   }
 
-  & small {
-    margin: auto 1.25rem;
+  logo-kit {
+    height: 15px;
+    width: auto;
+  }
+
+  p {
+    margin-bottom: 1rem; 
     text-align: center; 
-    color: $color-grey-darker;
-    :hover {
-      cursor: pointer;
+    @media (min-width: 768px) { 
+      text-align: left; 
     }
   }
 
-  @include tablet {
-    li:nth-child(1):after,
-    li:nth-child(2):after,
-    li:nth-child(3):after,
-    li:nth-child(4):after,
-    li:nth-child(5):after {
-      color: $color-grey-darker;
-      content: '|';
-      margin: 0.5rem;
-    }
+}
+
+.made-by {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid white;
+  padding: 1rem;
+}
+
+.social-list {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  padding-left: 0;
+}
+
+.social-item {
+  height: 3rem;
+  width: 3rem;
+  border-radius: 9999px;
+  border: 1px solid white;
+
+  @media (min-width: 1024px) {
+    height: 2rem;
+    width: 2rem;
   }
 
-  .footer-link {
-    .enreda {
-      padding: 1.25em;
-    }
+  &:hover {
+    background-color: white;
+    color: var(--background-dark);
+  }
+}
 
-    .highlight {
-      background: $color-greylighter;
-      border-radius: 5px;
-      padding: 5px;
+.social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+
+  img {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.footer-links {
+  display: flex;
+  flex-direction: row;
+  
+  @media (min-width: 768px) {
+    width: 66.6667%;
+  }
+
+  @media (min-width: 1024px) {
+    width: 50%;
+  }
+}
+
+.footer-column {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+
+  h3 {
+    font-weight: 600; // font-semibold
+    font-size: 1.125rem; // text-lg
+    margin-bottom: 1.5rem; // mb-6
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    text-align: left;
+
+    li {
+      margin-bottom: 0.75rem; // space-y-3
+
+      a,
+      .nuxt-link {
+        text-decoration: none;
+
+        &:hover {
+          font-weight: 600; // hover:font-semibold
+          text-decoration: underline; // para "Enlaces rápidos"
+        }
+      }
     }
   }
 }
+
+.footer-logos {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media (min-width: 768px) {
+    align-items: flex-end;
+    width: 33.3333%; // md:w-1/3
+  }
+
+  @media (min-width: 1024px) {
+    width: 50%; // lg:w-1/2
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: 1.125rem;
+    margin-bottom: 1rem; // mb-4
+  }
+
+  .logos-grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 0.75rem 0; // gap-y-3
+    width: 100%;
+
+    img {
+      height: 3rem; // h-12
+      grid-column: span 12;
+      margin-left: auto;
+      margin-right: auto;
+
+      @media (min-width: 768px) {
+        margin-left: auto;
+        margin-right: 0;
+      }
+
+      @media (min-width: 1024px) {
+        height: 3.5rem; // h-14
+      }
+
+      &:nth-child(1),
+      &:nth-child(2) {
+        grid-column: span 6;
+
+        @media (min-width: 768px) {
+          grid-column: span 12;
+        }
+      }
+    }
+  }
+}
+
+a {
+  text-decoration: none;
+  cursor: pointer;
+  color: $color-light;
+}
 </style>

components/FormHeader.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="header">
-    <h1 class="title">{{ title }}</h1>
-    <img src="@/assets/img/latienda-lineapuntos-2.svg" alt="" class="" />
+    <h2 class="title">{{ title }}</h2>
+    <p v-if="subtitle" v-html="subtitle" class="subtitle"></p>
+    <div class="title-lines"></div>
   </div>
 </template>
 
@@ -9,6 +10,7 @@
 export default {
   props: {
     title: { type: String, default: '' },
+    subtitle: { type: String, default: '' },
   },
 }
 </script>
@@ -18,16 +20,27 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 40px;
+  gap: 1rem;
+  color: $color-primary;
 
   .title {
-    font-size: $xl;
-    color: $color-navy;
+    font-size: $h2;
+    color: $color-primary;
     margin-bottom: 10px;
   }
 
-  img {
-    width: 40px;
+  .subtitle {
+    font-size: $l;
+    color: $color-primary;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .title-lines {
+    width: 34px;
+    height: 2px;
+    background: $color-consumo-base;
+    margin: 0 8px;
   }
 }
 </style>

components/FormInput.vue

@@ -62,7 +62,7 @@ export default {
   // width: 100%; //Utilizar este width para controlar el ancho desde el elemento padre
   width: 45%;
   @include mobile {
-    width: 80%;
+    width: 100%;
   }
   // @include desktop {
   //   width: 25%;
@@ -75,16 +75,16 @@ input {
   border-radius: 4px;
   padding: 10px 5px;
   display: block;
-  margin-bottom: 10px;
+  margin: 8px 0 16px 0;
   font-weight: $regular;
   outline: none;
 }
 
 label {
   text-align: left;
-  color: $color-navy;
-  font-weight: $bold;
-  font-size: $xs;
+  color: $color-primary;
+  font-weight: $medium;
+  font-size: $s;
   display: block;
 }
 </style>

components/HeroWithSearch.vue

@@ -0,0 +1,84 @@
+<template>
+  <section class="hero-section">
+    <div class="gradient">
+      <div class="content">
+        <h1>{{ title }}</h1>
+        <p>{{ subtitle }}</p>
+        <SearchHeader />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    subtitle: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hero-section {
+  width: 100%;
+}
+.gradient {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  min-height: 45dvh;
+  overflow: hidden;
+
+  // Imagen de fondo
+  background-image: url('../assets/img/voluntarios.jpg');
+  background-size: cover;
+  background-position: center;
+
+  // Overlay de gradiente
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 24px;
+    background: linear-gradient(
+      180deg,
+      $color-consumo-base 0%,
+      $color-consumo-base-light 100%
+    );
+    z-index: 1;
+    opacity: 0.8;
+  }
+
+  .content {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+    padding: 2rem;
+
+    h1 { 
+      text-align: center;
+      font-size: $hero;
+      font-weight: $bold;
+      @include mobile { max-width: 100%;
+        margin: 1.5rem 1rem 0.5rem 1rem;
+      } 
+    } 
+    p { 
+      font-size: $xl;
+    }
+  }
+
+  @include mobile {
+    margin-top: 8dvh;
+  }
+}
+</style>

components/HighlightsCard.vue

@@ -128,7 +128,7 @@ export default {
   methods: {
     getProductImg(product) {
       if (product && product.image) return product.image
-      return `@/assets/img/latienda-product-default.svg`
+      return `@/assets/img/consumo-default.png`
     },
   },
 }

components/ItemsRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row">
+  <div class="row container">
     <ClientOnly placerholder="Loading...">
       <!-- <div class="arrow-left-wrapper col-2 col-sm-1">
         <img
@@ -9,24 +9,37 @@
           @click="slideCarousel('prev')"
         />
       </div> -->
-
       <Carousel
         ref="productDetails"
-        class="col-8 col-sm-10"
-        :items-to-show="3"
-        :gap="5"
+        class="carousel"
+        :items-to-show="itemsToShow"
+        :gap="1"
         :pagination-enabled="false"
         :wrap-around="false"
         :mouse-wheel="true"
         :breakpoints-enabled="true"
       >
-        <Slide v-for="item in items" :key="item.id">
-          <NuxtLink :to="formattedItem(item).url" class="slide">
+        <Slide v-for="item in items" :key="item.id" class="slide-container">
+          <div class="slide">
             <div class="image-container">
               <img class="image" :src="formattedItem(item).image" alt="" />
             </div>
-            <span>{{ formattedItem(item).name }}</span>
-          </NuxtLink>
+            <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>
+            <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 />
@@ -65,6 +78,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    itemsToShow: {
+      type: Number,
+      default: 4,
+    },
   },
   data() {
     return {
@@ -104,7 +121,7 @@ export default {
           name: item.company_name,
           image:
             item.logo || this.defaultImage,
-          url: `/c/${item.id}`,
+          url: `/productoras/${item.id}`,
         }
       }
       if (this.type === 'category') {
@@ -121,29 +138,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.slide {
+.row {
+  padding: 0 4rem;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: stretch;
-  padding: 0.3rem;
-  span {
-    text-align: center;
-    display: -webkit-box;
-    --webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    width: 25vw;
-    max-width: 110px;
-    font-weight: $regular;
-    font-size: $s;
-  }
+  justify-content: center
 }
 
 .image-container {
   width: 100%;
-  height: 5rem;
-  margin-bottom: 0.7rem;
+  height: 11rem;
+  flex-shrink: 0;
+  align-self: stretch;
+  border-radius: 24px 24px 0 0;
   @include mobile {
     max-height: 10rem;
     max-width: 10rem;
@@ -151,7 +158,138 @@ export default {
   .image {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
+    border-radius: 24px 24px 0 0;
   }
 }
+
+.slide-container {
+  padding: 0.5rem;
+}
+
+.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>

components/LogosWithText.vue

@@ -0,0 +1,91 @@
+<template>
+  <section :id="id" class="iniciativa-section">
+    <div class="iniciativa-header">
+      <h3>Una iniciativa colectiva</h3>
+      <p>
+        kit-ECO.social es posible gracias al trabajo conjunto de organizaciones
+        que apuestan por una economía social transformadora.
+      </p>
+    </div>
+
+    <ul class="iniciativa-logos">
+      <li>
+        <img 
+          src="/assets/img/logo-enreda.png"
+          alt="Logo de Enreda"
+        />
+      </li>
+      <li>
+        <img 
+          src="/assets/img/logo-nortes.png"
+          alt="Logo de Nortes"
+        />
+      </li>
+      <li>
+        <img 
+          src="/assets/img/logo-ecored.png"
+          alt="Logo de Ecored"
+        />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.iniciativa-section {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem; // gap-12
+  margin-bottom: 2rem; // mb-8
+  padding: 2rem 1rem 4rem; // pt-8 px-4 pb-16
+  max-width: 48rem; // max-w-3xl
+  margin-left: auto;
+  margin-right: auto;
+
+  .iniciativa-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+
+    h3 {
+      font-size: $h3;
+      font-weight: $bold;
+      margin-bottom: 1.5rem; // mb-6
+    }
+
+    p {
+      font-size: 1.125rem; // text-lg
+      text-align: center;
+    }
+  }
+
+  .iniciativa-logos {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 2rem; // gap-8
+    list-style: none;
+    padding: 0;
+
+    li {
+      grid-column: span 12;
+      height: 5rem; // h-20
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @media (min-width: 768px) {
+        grid-column: span 4;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        filter: grayscale(100%);
+      }
+    }
+  }
+}
+</style>

components/NavBar.vue

@@ -4,32 +4,44 @@
       <div class="navmenu-container">
         <NavMenu @handle-logout="handleLogout" />
       </div>
-      <!-- isAdmin: {{ isAdmin }} <br>
-      isAuthenticated: {{ isAuthenticated }} <br> -->
       <nav>
         <NuxtLink to="/">
           <img
             class="logo"
-            src="@/assets/img/latienda-logo.png"
-            alt="latienda.coop"
+            src="@/assets/img/logo-consumo-cuidado.png"
+            alt="consumo-cuidado"
           />
         </NuxtLink>
-        <SearchInput v-if="$route.name == 'index'" class="search-input"/>
         <div class="nav-buttons">
-          <NuxtLink to="/page/info">
+          <!-- <NuxtLink to="/page/info">
             <img
               class="nav-buttons-info nav-icon"
               src="@/assets/img/latienda-info.svg"
-              alt="latienda.coop"
+              alt="consumo-cuidado"
             />
+          </NuxtLink> -->
+          <NuxtLink to="/" class="nuxt-link">
+            <p class="nav-text">Inicio</p>
           </NuxtLink>
-          <div class="nav-buttons-dots"></div>
+          <NuxtLink to="/busqueda" class="nuxt-link">
+            <p class="nav-text">Catálogo</p>
+          </NuxtLink>
+          <NuxtLink to="/productoras" class="nuxt-link">
+            <p class="nav-text">Productoras</p>
+          </NuxtLink>
+          <NuxtLink to="/registro/cooperativa" class="nuxt-link">
+            <p class="nav-text">Únete</p>
+          </NuxtLink>
+          <NuxtLink to="https://www.kit-eco.social/es" class="nuxt-link">
+            <p class="nav-text">kit-eco.social</p>
+          </NuxtLink>
+          <div class="nav-buttons-line"></div>
           <NuxtLink v-if="isAuthenticated & !isAdmin" to="/editar/perfil">
             <div class="nav-buttons-acceso">
               <img
                 class="nav-icon"
-                src="@/assets/img/latienda-acceder.svg"
-                alt="latienda.coop"
+                src="@/assets/img/circle-user-round.svg"
+                alt="consumo-cuidado"
               />
               <div class="nav-text">{{ name }}</div>
             </div>
@@ -38,8 +50,8 @@
             <div class="nav-buttons-acceso">
               <img
                 class="nav-icon"
-                src="@/assets/img/latienda-acceder.svg"
-                alt="latienda.coop"
+                src="@/assets/img/circle-user-round.svg"
+                alt="consumo-cuidado"
               />
               <div class="nav-text">{{ name }}</div>
             </div>
@@ -48,20 +60,13 @@
             <div class="nav-buttons-acceso">
               <img
                 class="nav-icon"
-                src="@/assets/img/latienda-acceder.svg"
-                alt="latienda.coop"
+                src="@/assets/img/circle-user-round.svg"
+                alt="consumo-cuidado"
               />
-              <div class="nav-text">Acceder</div>
+              <p class="nav-access">Acceso entidades</p>
             </div>
           </NuxtLink>
         </div>
-
-        <!-- <nuxt-link to="/">Búsqueda</nuxt-link>
-      <nuxt-link to="/auth/registro">Registrarse</nuxt-link>
-      <nuxt-link to="/auth/login">Login</nuxt-link>
-      <nuxt-link to="/editar">{{ $store.state.auth.email }}</nuxt-link>
-      <nuxt-link to="/admin" v-if="isAdmin">Panel de administración</nuxt-link> -->
-        <!-- <button @click="logout">Logout</button> -->
       </nav>
     </div>
   </header>
@@ -103,7 +108,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .header {
-  background-color: $color-green;
+  background-color: white;
   padding: 10px;
 
   @include mobile {
@@ -167,11 +172,11 @@ nav {
     display: none;
   }
 
-  &-info {
+  &-line {
     cursor: pointer;
   }
-  &-dots:after {
-    color: $color-navy;
+  &-line:after {
+    color: $color-consumo-base;
     content: '\22EE';
     margin: 0.5rem;
     @include mobile {
@@ -183,6 +188,7 @@ nav {
     flex-direction: row;
     align-items: center;
     cursor: pointer;
+    margin-left: 1rem;
   }
   .nav-buttons-info {
     @include mobile {
@@ -191,10 +197,42 @@ nav {
   }
 }
 
+.nuxt-link {
+  text-decoration: none;
+  :hover {
+    color: $color-consumo-base;
+  }
+  @include desktop {
+    padding: 12px;
+    margin: 0 1rem;
+  }
+  @include tablet {
+    padding: 8px;
+  }
+}
+
 .nav-text {
   font-size: $xs;
-  color: $color-navy;
-  margin: 0.5rem;
+  color: $color-primary;
+  text-transform: uppercase;
+  margin: 0 0.1rem;
+  font-weight: $medium;
+
+  @include mobile {
+    display: none;
+  }
+}
+
+.nav-access {
+  font-size: $s;
+  margin: 0 0.1rem;
+  font-weight: $medium;
+  text-decoration: none;
+  color: $color-primary;
+  cursor: pointer;
+  :hover {
+    color: $color-consumo-base;
+  }
   @include mobile {
     display: none;
   }

components/NavBarEditar.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="navsearch_container container-fluid">
+  <div class="navsearch_container">
     <NuxtLink to="/editar/perfil">Mi perfil</NuxtLink>
     <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/cooperativa"
-      >Cooperativa</NuxtLink
+      >Productora</NuxtLink
     >
-    <!-- <NuxtLink to="/editar/cooperativa/crear">Crear cooperativa</NuxtLink> -->
+    <!-- <NuxtLink to="/editar/productora/crear">Crear productora</NuxtLink> -->
     <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/productos"
       >Productos</NuxtLink
     >
@@ -63,24 +63,23 @@ export default {
 
 <style lang="scss" scoped>
 .navsearch_container {
-  border-bottom: 3px solid $color-grey-nav;
+  border-bottom: 1px solid $color-consumo-base;
   text-align: center;
   padding: 20px 20px;
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
 
   a {
     font-size: $m;
-    font-weight: $bold;
-    color: $color-navy;
+    color: $color-primary;
     text-decoration: none;
+    text-transform: uppercase;
   }
-  a:nth-child(1):after,
-  a:nth-child(2):after,
-  a:nth-child(3):after,
-  a:nth-child(4):after {
-    color: $color-navy;
-    content: '\22EE';
-    margin: 0.5rem;
+  a:focus {
+    font-weight: $bold;
   }
+  
   @include mobile {
     display: none;
   }

components/NavMenu.vue

@@ -19,35 +19,32 @@
             <ul class="section-list">
               <NuxtLink to="/">
                 <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-ubicacion.svg"
-                    alt=""
-                  />
+
                   <span class="section-text">Inicio</span>
                 </li>
               </NuxtLink>
-              <NuxtLink to="/c">
+              <NuxtLink to="/busqueda">
                 <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-tienda-nav.svg"
-                    alt=""
-                  />
-                  <span class="section-text">Cooperativas</span>
+                  <span class="section-text">Catálogo</span>
                 </li>
               </NuxtLink>
-              <NuxtLink to="/page/info">
+              <NuxtLink to="/productoras">
                 <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-bag.svg"
-                    alt=""
-                  />
-                  <span class="section-text">Sobre nosotros</span>
+                  <span class="section-text">Productoras</span>
                 </li>
               </NuxtLink>
-              <li class="section" @click="isMenuOpen = !isMenuOpen">
+              <!-- TODO: cambiar link -->
+              <NuxtLink to="/registro/cooperativa">
+                <li class="section" @click="isMenuOpen = !isMenuOpen">
+                  <span class="section-text">Únete</span>
+                </li>
+              </NuxtLink>
+              <NuxtLink to="https://www.kit-eco.social/es/">
+                <li class="section" @click="isMenuOpen = !isMenuOpen">
+                  <span class="section-text">kit-eco.social</span>
+                </li>
+              </NuxtLink>
+              <!-- <li class="section" @click="isMenuOpen = !isMenuOpen">
                 <a href="mailto:info@latienda.coop">
                   <img
                     class="section-img"
@@ -56,7 +53,7 @@
                   />
                   <span class="section-text">Contacto</span>
                 </a>
-              </li>
+              </li> -->
             </ul>
           </nav>
           <ul class="login-list">
@@ -64,10 +61,10 @@
               <li class="section" @click="isMenuOpen = !isMenuOpen">
                 <img
                   class="section-img"
-                  src="@/assets/img/latienda-lock.svg"
+                  src="@/assets/img/circle-user-round.svg"
                   alt=""
                 />
-                <span class="section-text">Acceder</span>
+                <span class="section-text">Acceso entidades</span>
               </li>
             </NuxtLink>
             <NuxtLink v-if="isManager" to="/editar/perfil">
@@ -80,7 +77,7 @@
                 <span class="section-text">Perfil</span>
               </li>
             </NuxtLink>
-            <NuxtLink v-if="isManager" to="/editar/cooperativa">
+            <NuxtLink v-if="isManager" to="/editar/productora">
               <li class="section" @click="isMenuOpen = !isMenuOpen">
                 <span class="section-text login">Cooperativa</span>
               </li>
@@ -129,7 +126,7 @@
             </NuxtLink>
           </ul>
           <div class="credits">
-            <span>2021 La Tienda.Coop</span>
+            <span>2025 Consumo Cuidado</span>
             <a href="http://enreda.coop/" target="_blank"
               >Sitio desarrollado por Enreda</a
             >
@@ -195,7 +192,7 @@ export default {
 .nav-menu {
   font-family: $font-primary;
   padding: 30px 0 0 20px;
-  background-color: $color-green;
+  background-color: $color-consumo-base;
   height: 100vh;
   top: 0;
   left: 0;
@@ -237,7 +234,7 @@ export default {
 
 .section-list {
   padding-bottom: 1rem;
-  border-bottom: 1px solid $color-navy;
+  border-bottom: 1px solid $color-primary;
 }
 
 .section-text {
@@ -257,7 +254,7 @@ ul {
 a {
   text-decoration: none;
   cursor: pointer;
-  color: $color-navy;
+  color: $color-primary;
 }
 
 .link-list,
@@ -275,7 +272,7 @@ a {
   span,
   a {
     display: block;
-    color: $color-navy;
+    color: $color-primary;
     font-size: $xs;
     padding: 0.3em 0;
   }

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/latienda-product-default.svg"
-          :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.png`" 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>

components/ProductCardDetails.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="productcard_container">
-    <div class="row productcard_container-basic">
-      <div class="image_container col-md-5">
+    <div class="productcard_container-basic">
+      <div class="image_container">
         <img :src="getProductImg(product)" class="image" alt="" />
       </div>
-      <div class="info_container col-md-5">
+      <div class="info_container">
         <h2 variant="primary">
           {{ product?.name }}
         </h2>
@@ -15,7 +15,7 @@
         <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-else>| Sin gastos de envío</span> -->
 
         <span v-if="product?.stock">| {{ `Stock ${product?.stock}€` }} </span>
         <p
@@ -32,14 +32,19 @@
               :to="tagRoute(n)"
               class="tag_container"
             >
-              <img
-                class="tag_img"
-                alt="tag image"
-                src="@/assets/img/latienda-tag.svg"
-              />
               <span>{{ n }}</span>
             </NuxtLink>
           </div>
+          <BButton
+            v-if="company?.shop_link"
+            class="div-link"
+            align="center"
+            target="_blank"
+            @click="buyIntent"
+            >
+            <img class="div-link-img" src="@/assets/img/shopping-bag-white.svg" />
+            COMPRA EN SU TIENDA
+          </BButton>
           <div class="smlogos_container">
             <p class="share-text">Comparte:</p>
             <div class="smlogo_container">
@@ -76,44 +81,34 @@
             </a>
           </div>
           <div class="coop_info">
-            <NuxtLink :to="`/c/${company?.id}`">
-              <h2>{{ company?.company_name }}</h2>
-            </NuxtLink>
+            <p class="share-text">Vendido por:</p>
+            <h4>{{ company?.company_name }}</h4>
             <p class="description">{{ company?.description }}</p>
-            <a href="#">{{ company?.web_link }}</a>
+            <NuxtLink :to="`/productoras/${company?.id}`" class="link-saber">
+              <p>Saber más</p>
+            </NuxtLink>
           </div>
         </BCollapse>
       </div>
-      <div class="col-md-2 button_container-detail" align="center">
-        <button class="button_buy-simple" @click="buyIntent">
-          <img
-            class="button_cart_img"
-            alt="cart"
-            src="@/assets/img/latienda-carrito.svg"
-          />
-        </button>
-        <div
-          v-if="product?.discount && product?.discount > 0"
-          class="discount-tag"
-        >
-          {{ `Descuento ${product?.discount}%` }}
-        </div>
-      </div>
     </div>
-    <div class="related_products">
-      <h2 v-if="related">Productos relacionados</h2>
-      <h2 v-else>Otros productos</h2>
-      <ProductsRelated :related-products="relatedProducts" />
-    </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 }}
+    id="modal-center" 
+    v-model="active" 
+    centered 
+    title="consumo-cuidado" 
+    :ok-variant="modalColor"> {{ modalText }}
   </BModal>
+</div>
+<div class="related_products">
+  <div class="title-container">
+    <div class="title-lines"></div>
+    <h2 v-if="related" class="items-title">Productos relacionados</h2>
+    <h2 v-else class="items-title">Otros productos</h2>
+    <div class="title-lines"></div>
   </div>
+  <ProductsRelated :related-products="relatedProducts" :products-per-page="productsPerPage" />
+</div>
 </template>
 
 <script>
@@ -138,6 +133,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    productsPerPage: {
+      type: Number,
+      default: 8,
+    },
   },
   data() {
     return {
@@ -161,7 +160,7 @@ export default {
     getProductImg(product) {
       if (product && product.image) 
         return product.image
-      return `@/assets/img/latienda-product-default.svg`
+      return `@/assets/img/consumo-default.png`
     },
     tagRoute(tag) {
       return `/busqueda?tags=${tag}`
@@ -285,18 +284,65 @@ export default {
 
 <style lang="scss" scoped>
 .productcard_container {
-  border: 3px solid $color-grey-nav;
-  border-radius: 5px;
-  margin-bottom: 12px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 4rem;
+  margin-bottom: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
 }
+
 .productcard_container-basic {
-  padding: 25px 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: start;
+  gap: 4rem;
+  width: 100%;
+
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    gap: 2rem;
+    margin-top: 4rem;
+    padding: 3rem 2rem;
+  }
+  @include mobile {
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 5rem;
+    padding: 2rem 1rem;
+  }
 }
 
 .image_container {
-  height: 100%;
-  overflow: hidden;
-  margin: auto;
+  height: 400px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  border-radius: 16px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  @include mobile {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+  }
 }
 
 .image {
@@ -306,96 +352,97 @@ export default {
 }
 
 .info_container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  
+  @include mobile {
+    margin-top: 2rem;
+  }
   h2 {
-    outline: none;
-    font-weight: medium;
-    color: $color-navy;
-    font-size: $m;
+    font-size: $h2;
+    font-weight: $bold;
+    text-transform: capitalize;
   }
   .price {
-    font-weight: bold;
-    color: $color-navy;
-    font-size: $m;
+    font-weight: $medium;
+    color: $color-primary;
+    font-size: $h5;
   }
   span {
     color: $color-greytext;
   }
   .description {
     margin-top: 8px;
-    font-family: $font-secondary;
-    font-size: $s;
-    color: $color-greytext;
-  }
-}
-
-.button_container {
-  display: flex;
-  flex-direction: column;
-  font-size: $m;
-
-  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;
+    width: 80%;
+    @include tablet {
+      width: 100%;
     }
-
-    span {
-      color: $color-orange;
-      font-weight: $bold;
-      display: inline-block;
-      margin-bottom: 15px;
+    @include mobile {
+      width: 100%;
     }
   }
 }
 
-.button_buy-simple {
-  border: 3px solid $color-orange;
-  border-radius: 8px;
-  background-color: $color-light;
-  padding: 10px 20px;
+.div-link:hover {
+  background-color: white;
+  transition: all 0.2s ease;
+  color: $color-button;
+}
+
+.div-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.7rem;
+  width: auto;
+  border: 1px solid $color-button;
+  border-radius: 5px;
+  background-color: $color-button;
+  font-weight: $bold;
+  padding: 15px 20px;
+  color: white;
+  margin-top: 2rem;
 
   &:hover {
-    box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
-    transition: all 0.2s ease;
+    cursor: pointer;
   }
-
-  .button_cart_img {
-    margin-right: 0;
+  .div-link-img {
+    width: 20px;
   }
 }
 
-.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;
+.tags_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  gap: 8px;
+  margin-top: 1rem;
 
-  .tag_img {
-    width: 18px;
+  .tag_container {
+    margin: 5px 6px 0 0;
+    border-radius: 1rem;
+    padding: 8px;
+    display: inline-block;
+    font-size: $xs;
+    background-color: white;
+    color: $color-primary;
+    text-align: center;
+    text-transform: uppercase;
+    text-decoration: none;
   }
 }
 
 .share-text {
-  color: $color-navy;
-  font-size: $m;
+  color: $color-primary;
+  font-size: $h5;
+  font-weight: $medium;
   margin-top: 2rem;
-  padding-bottom: 0.2em;
+  padding-bottom: 0.5em;
 }
 
 .smlogo_container {
@@ -406,7 +453,7 @@ export default {
   .smlogo_img {
     cursor: pointer;
     width: 40px;
-    fill: $color-greylayout;
+    fill: $color-button;
   }
   img:hover {
     transform: scale(1.1);
@@ -421,29 +468,63 @@ export default {
 
 .coop_info {
   margin-top: 25px;
-  p,
-  a {
-    margin-top: 8px;
-    font-family: $font-secondary;
-    font-size: $s;
-    color: $color-greytext;
+  h4 {
+    font-size: $h4;
+    font-weight: $medium;
+    color: $color-navy;
+    margin-top: 5px;
+    text-transform: uppercase;
+    text-decoration: none;
   }
-  a {
-    text-decoration: underline;
+
+  .description {
+    font-size: $m;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .link-saber {
+    font-weight: $bold;
+    color: $color-button;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
   }
 }
 
 .related_products {
-  background-color: $color-lighter-green;
-  text-align: center;
-  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 24px;
+  padding: 4rem 4rem;
+  background: $color-bg-light;
+  width: 100%;
+  &-title {
+    text-align: center;
+  }
 
-  h2 {
-    margin: 35px auto;
-    font-weight: medium;
-    color: $color-navy;
-    font-size: $m;
-    display: inline-block;
+  .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;
+    }
   }
 }
 

components/ProductFilter.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
+  <div class="c-filter">
+    <div class="c-filter-content">
+      <div class="">
         <div v-b-toggle.collapse-all class="filters-header">
           <img
             class="image"
-            src="@/assets/img/product-filter-filtrar.svg"
+            src="@/assets/img/filter.svg"
             alt=""
           />
-          <h2 class="text">FILTRAR POR</h2>
+          <h2 class="text">FILTRAR PROPUESTAS</h2>
         </div>
         <BCollapse id="collapse-all" visible>
           <!-- Location -->
@@ -47,7 +47,7 @@
                       :max="500"
                       step="10"
                       thumb-label="always"
-                      color="#8cead8"
+                      color="#143E8C"
                       track-color="#d6d5d5"
                     >
                       <template #prepend>
@@ -117,7 +117,7 @@
               </div>
               <div>
                 <button class="filter-button" @click="applyFilters">
-                  Aplicar
+                  APLICAR FILTROS
                 </button>
               </div>
             </BCollapse>
@@ -160,27 +160,20 @@ export default {
       visible: true,
       checkedCategories: [],
       categories: [
-        'Alimentación, bebida y tabaco',
-        'Arte y ocio',
-        'Bebés y niños pequeños',
-        'Bricolaje',
-        'Cámaras y ópticas',
-        'Casa y jardín',
-        'Economía e industria',
-        'Electrónica',
-        'Elementos religiosos y ceremoniales',
-        'Equipamiento deportivo',
-        'Juegos y juguetes',
-        'Maletas y bolsos de viaje',
-        'Material de oficina',
-        'Mobiliario',
-        'Multimedia',
-        'Productos para adultos',
-        'Productos para mascotas y animales',
-        'Ropa y accesorios',
-        'Salud y belleza',
-        'Software',
-        'Vehículos y recambios',
+        'Alimentación',
+        'Agricultura ',
+        'Energía',
+        'Hogar y jardín',
+        'Moda y Textil',
+        'Salud y Cuidados',
+        'Movilidad y Mensajería',
+        'Ocio y Deporte',
+        'Turismo y Gastronomía',
+        'Cultura, Educación y Medios',
+        'Tecnología y Servicios Digitales',
+        'Economía Circular y Reparación',
+        'Finanzas Éticas y Seguros',
+        'Servicios Profesionales',
       ],
       priceRange: [0, 500],
       priceRangeFilter: {},
@@ -241,6 +234,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.c-filter {
+  width: 100%;
+  min-height: 100dvh;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 2rem;
+  margin-top: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  // @include mobile {
+  //   margin-top: 7rem;
+  // }
+}
+
 .filter-button {
   margin-top: 30px;
   background-color: $color-navy;
@@ -263,11 +275,11 @@ export default {
     margin-top: 2rem;
   }
   .text {
-    font-size: $s;
+    font-size: $m;
     margin: 0;
     margin-left: 10px;
-    color: $color-navy;
-    font-weight: $bold;
+    color: $color-primary;
+    font-weight: $medium;
   }
   .image {
     height: 20px;
@@ -277,7 +289,7 @@ export default {
 .location {
   label {
     font-size: $s;
-    color: $color-navy;
+    color: $color-primary;
     font-weight: $bold;
     position: relative;
   }
@@ -311,8 +323,9 @@ export default {
 
     h2 {
       font-size: $s;
-      color: $color-navy;
-      font-weight: $bold;
+      color: $color-primary;
+      font-weight: $medium;
+      text-transform: uppercase;
     }
     img {
       width: 12px;
@@ -322,7 +335,7 @@ export default {
     display: inline-block;
     font-family: Noto Sans Regular, sans-serif;
     font-size: $s;
-    color: $color-greytext;
+    color: $color-primary;
   }
 }
 

components/ProductForm.vue

@@ -13,13 +13,13 @@
       </BFormCheckbox>
     </div>
     <br />
-    <FormHeader title="General" />
-    <p class="help-text">
-      Estos son los datos básicos de un producto. Procura completar el mayor
+    <FormHeader 
+      title="General" 
+      subtitle="Estos son los datos básicos de un producto. Procura completar el mayor
       número de campos posible. Los campos señalados con asterisco (*) son
       obligatorios, los demás son opcionales. Si el producto o servicio no tiene
-      precio asignado, aparecerá "Consultar precio".
-    </p>
+      precio asignado, aparecerá 'Consultar precio'."
+    />
     <fieldset class="fieldset">
       <div class="cont">
         <FormInput
@@ -109,12 +109,11 @@
       </div>
     </fieldset>
     <fieldset class="fieldset">
-      <FormHeader title="Categorías" />
-      <p class="help-text">
-        Estos datos ayudan a que tu producto sea encontrado por los clientes.
+      <FormHeader 
+        title="Categorías" 
+        subtitle="Estos datos ayudan a que tu producto sea encontrado por los clientes.
         Procura completar el mayor número de campos posibles. Los campos
-        señalados con asterisco (*) son obligatorios, los demás son opcionales.
-      </p>
+        señalados con asterisco (*) son obligatorios, los demás son opcionales."/>
 
       <div class="cont-col">
         <label for="category">Categoría*</label>
@@ -221,27 +220,20 @@ export default {
       },
       // tagsArray: ['tag1', 'tag2', 'tag3', 'tag33'],
       categories: [
-        'Alimentación, bebida y tabaco',
-        'Arte y ocio',
-        'Bebés y niños pequeños',
-        'Bricolaje',
-        'Cámaras y ópticas',
-        'Casa y jardín',
-        'Economía e industria',
-        'Electrónica',
-        'Elementos religiosos y ceremoniales',
-        'Equipamiento deportivo',
-        'Juegos y juguetes',
-        'Maletas y bolsos de viaje',
-        'Material de oficina',
-        'Mobiliario',
-        'Multimedia',
-        'Productos para adultos',
-        'Productos para mascotas y animales',
-        'Ropa y accesorios',
-        'Salud y belleza',
-        'Software',
-        'Vehículos y recambios',
+        'Alimentación',
+        'Agricultura ',
+        'Energía',
+        'Hogar y jardín',
+        'Moda y Textil',
+        'Salud y Cuidados',
+        'Movilidad y Mensajería',
+        'Ocio y Deporte',
+        'Turismo y Gastronomía',
+        'Cultura, Educación y Medios',
+        'Tecnología y Servicios Digitales',
+        'Economía Circular y Reparación',
+        'Finanzas Éticas y Seguros',
+        'Servicios Profesionales',
       ],
     }
   },
@@ -312,10 +304,10 @@ export default {
   }
 
   label, .label {
-    text-align: left;
-    color: $color-navy;
-    font-weight: $bold;
-    font-size: $xs;
+    color: $color-primary;
+    font-weight: $medium;
+    font-size: $s;
+    display: block;
   }
 
   .textarea {
@@ -356,12 +348,11 @@ export default {
 }
 .help-text {
   text-align: left;
-  font-size: $xs;
+  font-size: $s;
   text-align: justify;
   font-weight: $regular;
-  color: $color-greylayout;
+  color: $color-primary;
   font-family: $font-secondary;
-  background-color: $color-light;
   margin-bottom: 20px;
   margin-top: 6px;
 

components/ProductModal.vue

@@ -174,7 +174,7 @@ export default {
     },
     getImgUrl(image) {
       if (image) return image
-      return `@/assets/img/latienda-product-default.svg`
+      return `@/assets/img/consumo-default.png`
     },
     redirectToLogin() {
       this.$router.push({

components/ProductsRelated.vue

@@ -1,26 +1,16 @@
 <template>
-  <div class="row related_products-cards">
-    <NuxtLink
-      v-for="(product, key) in relatedProducts"
-      :key="`related-${key}`"
-      :to="`/productos/${product.id}`"
-      class="col mx-2 related_product-card"
-    >
-      <img
-        v-if="product.image"
-        :src="product.image"
-        alt=""
-        class="related_product-image"
+  <div class="cards-grid">
+    <div v-for="(product, key) in products" :key="product.id">
+      <ProductCard :key="key" :product="product" />
+    </div>
+    <div class="c-pagination">
+      <BPagination 
+        v-model="currentPage"
+        :v-if="relatedProducts"
+        :total-rows="rows"
+        :per-page="perPage"
       />
-      <img
-        v-else
-        class="image-default"
-        src="@/assets/img/latienda-product-default.svg"
-        alt=""
-      />
-      <h3>{{ product.name }}</h3>
-      <span v-if="product.price" class="price">{{ `${product.price}€` }}</span>
-    </NuxtLink>
+    </div>
   </div>
 </template>
 
@@ -31,56 +21,49 @@ export default {
       type: Array,
       default: () => [],
     },
+    productsPerPage: {
+      type: Number,
+      default: 8,
+    },
+  },
+  data() {
+    return {
+      currentPage: 1,
+      perPage: this.productsPerPage ? this.productsPerPage : 8,
+      //rows: this.relatedProducts ? this.relatedProducts.length : 0,
+    }
+  },
+  computed: {
+    rows() {
+      return Array.isArray(this.relatedProducts) ? this.relatedProducts.length : 0
+    },
+    products() {
+      const initial = (this.currentPage - 1) * this.perPage
+      const final = this.currentPage * this.perPage
+      const items = this.relatedProducts ? this.relatedProducts.slice(initial, final) : []
+      return items
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.related_products {
-  background-color: $color-lighter-green;
-  text-align: center;
-  padding: 0 15px;
-
-  img {
-    margin-top: 12px;
+.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;
   }
-
-  .image-default {
-    object-fit: cover;
+  .c-pagination {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: 4rem;
   }
-
-  .star {
-    width: 12px;
-    margin-right: 1px;
-  }
-
-  .related_product-card {
-    border: 3px solid $color-grey-nav;
-    border-radius: 5px;
-    margin-bottom: 35px;
-
-    .related_product-image {
-      width: 100px;
-      height: 100px;
-      object-fit: cover;
-    }
-
-    h3 {
-      font-weight: $regular;
-      color: $color-navy;
-      font-size: $m;
-      display: inline-block;
-      margin-bottom: 0;
-    }
-
-    span {
-      font-weight: $regular;
-      color: $color-navy;
-      font-size: $m;
-      display: block;
-      font-weight: bolder;
-      margin-bottom: 5px;
-    }
-  }
-}
 </style>

components/SearchHeader.vue

@@ -1,18 +1,6 @@
 <template>
   <div class="container wrapper">
     <form class="search-container" @submit.prevent="search" >
-      <div class="categorias-wrapper">
-        <select v-model="selectedCategory" class="categorias">
-          <option selected value="">Todas las categorías</option>
-          <option
-            v-for="(category, key) in categories"
-            :key="key"
-            :value="category"
-          >
-            {{ category }}
-          </option>
-        </select>
-      </div>
       <input
         id="searchbox"
         v-model="searchText"
@@ -27,7 +15,7 @@
         <img
           class="search-icon"
           src="@/assets/img/latienda-search.svg"
-          alt="latienda.coop-search"
+          alt="consumo-cuidado-search"
           @click="search"
         />
       </div>
@@ -45,29 +33,22 @@ export default {
       typing: null,
 
       selectedCategory: '',
-
+      //TODO: change categories
       categories: [
-        'Alimentación, bebida y tabaco',
-        'Arte y ocio',
-        'Bebés y niños pequeños',
-        'Bricolaje',
-        'Cámaras y ópticas',
-        'Casa y jardín',
-        'Economía e industria',
-        'Electrónica',
-        'Elementos religiosos y ceremoniales',
-        'Equipamiento deportivo',
-        'Juegos y juguetes',
-        'Maletas y bolsos de viaje',
-        'Material de oficina',
-        'Mobiliario',
-        'Multimedia',
-        'Productos para adultos',
-        'Productos para mascotas y animales',
-        'Ropa y accesorios',
-        'Salud y belleza',
-        'Software',
-        'Vehículos y recambios',
+        'Alimentación',
+        'Agricultura ',
+        'Energía',
+        'Hogar y jardín',
+        'Moda y Textil',
+        'Salud y Cuidados',
+        'Movilidad y Mensajería',
+        'Ocio y Deporte',
+        'Turismo y Gastronomía',
+        'Cultura, Educación y Medios',
+        'Tecnología y Servicios Digitales',
+        'Economía Circular y Reparación',
+        'Finanzas Éticas y Seguros',
+        'Servicios Profesionales',
       ],
     }
   },
@@ -153,7 +134,6 @@ export default {
 
 <style lang="scss" scoped>
 .wrapper {
-  width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -165,13 +145,13 @@ export default {
 .search-container {
   background-color: $color-light;
   height: 60px;
-  border-radius: 40px;
-  overflow: hidden;
+  max-width: 490px;
+  border-radius: 12px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin: 15px 0 50px;
+  margin-top: 48px;
   -webkit-box-shadow: 0px 0px 20px 0px #d1d1d1; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
   box-shadow: 0px 0px 20px 0px #d1d1d1;
   @include mobile {
@@ -201,36 +181,37 @@ export default {
   }
 }
 
-.categorias-wrapper {
-  height: 100%;
-  background: linear-gradient(90deg, #1aceb8, #0bbfba);
-  padding: 0.4em 0.5em 0.4em 1.2em;
+// .categorias-wrapper {
+//   height: 100%;
+//   background: linear-gradient(90deg, #1aceb8, #0bbfba);
+//   padding: 0.4em 0.5em 0.4em 1.2em;
 
-  @include mobile {
-    display: none;
-  }
-}
+//   @include mobile {
+//     display: none;
+//   }
+// }
 
-.categorias {
-  cursor: pointer;
-  outline: none;
-  background: transparent;
-  color: $color-light;
-  height: 100%;
-  width: 18rem;
-  -moz-appearance: none;
-  text-align: center;
+// .categorias {
+//   cursor: pointer;
+//   outline: none;
+//   background: transparent;
+//   color: $color-light;
+//   height: 100%;
+//   width: 18rem;
+//   -moz-appearance: none;
+//   text-align: center;
 
-  @include mobile {
-    display: none;
-  }
-  @include tablet {
-    width: 14rem;
-  }
-}
+//   @include mobile {
+//     display: none;
+//   }
+//   @include tablet {
+//     width: 14rem;
+//   }
+// }
 
 .search-icon {
   cursor: pointer;
+  width: 1.8rem;
   @include mobile {
     margin-left: 0;
     width: 100%;

components/SearchInput.vue

@@ -23,7 +23,7 @@
       <img
         class="search-icon"
         src="@/assets/img/latienda-search-blue.svg"
-        alt="latienda.coop-search"
+        alt="consumo-cuidado-search"
         @click="search"
       />
     </div>
@@ -39,27 +39,20 @@ export default {
       searchCategory: '',
 
       categories: [
-        'Alimentación, bebida y tabaco',
-        'Arte y ocio',
-        'Bebés y niños pequeños',
-        'Bricolaje',
-        'Cámaras y ópticas',
-        'Casa y jardín',
-        'Economía e industria',
-        'Electrónica',
-        'Elementos religiosos y ceremoniales',
-        'Equipamiento deportivo',
-        'Juegos y juguetes',
-        'Maletas y bolsos de viaje',
-        'Material de oficina',
-        'Mobiliario',
-        'Multimedia',
-        'Productos para adultos',
-        'Productos para mascotas y animales',
-        'Ropa y accesorios',
-        'Salud y belleza',
-        'Software',
-        'Vehículos y recambios',
+        'Alimentación',
+        'Agricultura ',
+        'Energía',
+        'Hogar y jardín',
+        'Moda y Textil',
+        'Salud y Cuidados',
+        'Movilidad y Mensajería',
+        'Ocio y Deporte',
+        'Turismo y Gastronomía',
+        'Cultura, Educación y Medios',
+        'Tecnología y Servicios Digitales',
+        'Economía Circular y Reparación',
+        'Finanzas Éticas y Seguros',
+        'Servicios Profesionales',
       ],
     }
   },

components/SubmitButton.vue

@@ -22,12 +22,18 @@ export default {
 
 <style lang="scss" scoped>
 .submit-btn {
-  background-color: $color-orange;
-  color: $color-light;
-  border: none;
-  border-radius: 5px;
+  background: $color-button;
+  color: #fff;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
   text-transform: uppercase;
-  padding: 15px 20px;
-  margin-top: 15px;
+  &:hover {
+    background: white;
+    color: $color-button;
+    border: 1px solid $color-button;
+  }
 }
 </style>

components/TextWithImageAndButton.vue

@@ -0,0 +1,119 @@
+<template>
+  <section class="proyecto-section">
+    <div class="content">
+      <h2>
+        ¿Tienes un proyecto con valores?<br />
+        <span> Súmate a nuestra red.</span>
+      </h2>
+
+      <div class="text-block">
+        <p>
+          Si elaboras productos o servicios desde una perspectiva social,
+          cooperativa o sostenible, este espacio es para ti.
+          <br />
+          Publica tus productos, conecta con personas conscientes y crece con
+          nosotras.
+        </p>
+
+        <NuxtLink to="/busqueda" class="link">
+            <ButtonCTA class="btn-primary">QUIERO REGISTRARME</ButtonCTA>
+          </NuxtLink>
+
+        <small>
+          Solo para entidades o personas con propuestas alineadas con la economía
+          social y solidaria.
+        </small>
+      </div>
+    </div>
+
+    <div class="image-wrapper">
+      <img
+        src="/assets/img/joven-vendedor.png"
+        alt="Personas intercambiando productos"
+      />
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.proyecto-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 2rem;
+  gap: 3rem;
+  margin: 2rem 0 4rem;
+
+  @media (min-width: $desktop) {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 3rem;
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    h2 {
+      font-size: $h2;
+      font-weight: $bold;
+      line-height: 1.3;
+
+      span {
+        display: block;
+        font-weight: 700;
+      }
+    }
+
+    .text-block {
+      display: flex;
+      flex-direction: column;
+      gap: 3rem;
+      margin-top: 1rem;
+    
+      p {
+        font-size: $l;
+        color: #333;
+      }
+
+      .btn-primary {
+        background: $color-button;
+        color: #fff;
+        padding: 0.75rem 1.5rem;
+        border: 1px solid transparent;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: background 0.2s ease;
+
+        &:hover {
+          background: white;
+          color: $color-button;
+          border: 1px solid $color-button;
+        }
+      }
+
+      small {
+        font-size: $m;
+      }
+    }
+  }
+
+  .image-wrapper {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+
+    img {
+      width: 100%;
+      max-width: 500px;
+      border-radius: 1rem;
+      object-fit: cover;
+      transform: rotate(-2deg); // para el toque inclinado que se ve en tu captura
+    }
+  }
+}
+</style>

layouts/default.vue

@@ -3,7 +3,7 @@
     <NavBar />
     <NuxtPage />
     <CookieUsageNotification />
-    <BannerCoop /> 
+    <!-- <BannerCoop />  -->
     <Footer />
   </div>
 </template>

layouts/editar.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <NavBar />
-    <NavBarEditar v-if="isManager" />
-    <NavBarEditarUser v-else/>
-    <NuxtPage />
-    <CookieUsageNotification />
+    <div class="container-fluid">
+      <NavBarEditar v-if="isManager" />
+      <NavBarEditarUser v-else/>
+      <NuxtPage />
+      <CookieUsageNotification />
+    </div>
     <Footer />
   </div>
 </template>
@@ -25,4 +27,22 @@ export default {
   }
 }
 </script>
-<style></style>
+
+<style lang="scss" scoped>
+.container-fluid {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
+}
+</style>

layouts/mainbanner.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <NavBar />
-    <NavBarSearch />
+    <!-- <NavBarSearch /> -->
     <NuxtPage />
     <CookieUsageNotification />
-    <BannerCoop />
+    <!-- <BannerCoop /> -->
     <Footer />
   </div>
 </template>

nuxt.config.ts

@@ -58,7 +58,7 @@ export default defineNuxtConfig({
 
       try {
         const companies = await $fetch(`${baseURL}companies/`)
-        routes.push(...companies.map((c: any) => `/c/${c.id}`))
+        routes.push(...companies.map((c: any) => `/productoras/${c.id}`))
       } catch (error) {
         console.error('Error fetching companies for sitemap:', error)
       }

package-lock.json

@@ -6996,9 +6996,9 @@
       }
     },
     "node_modules/devalue": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.1.1.tgz",
-      "integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.3.2.tgz",
+      "integrity": "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==",
       "license": "MIT"
     },
     "node_modules/diff": {

pages/admin/cooperativas.vue

@@ -4,7 +4,7 @@
         id="modal-center" 
         v-model="activeModal" 
         centered 
-        title="latienda.coop" 
+        title="consumo-cuidado" 
         :ok-variant="modalColor"> {{ modalText }}
       </BModal>
     <div class="row">
@@ -37,7 +37,7 @@
           </v-toolbar>
         </template>
         <template #[`item.company_name`]="item">
-          <a :href="`/c/${item.item.id}`" target="_blank" class="mr-2">
+          <a :href="`/productoras/${item.item.id}`" target="_blank" class="mr-2">
             {{ item.item.company_name }}
           </a>
         </template>

pages/admin/importar.vue

@@ -4,7 +4,7 @@
         id="modal-center" 
         v-model="activeModal" 
         centered 
-        title="latienda.coop" 
+        title="consumo-cuidado" 
         :ok-variant="modalColor"> {{ modalText }}
     </BModal>
     <div class="row">

pages/busqueda.vue

@@ -1,6 +1,37 @@
 <template>
-  <div class="container mt-5">
-    <div class="row">
+  <div class="">
+    <!-- <HeroWithSearch 
+        title="Productos y servicios"
+        subtitle="Catálogo colectivo de consumo transformador"
+      /> -->
+    <section class="hero-section">
+      <div class="gradient">
+        <div class="content">
+          <h1>Productos y servicios</h1>
+          <p>Catálogo colectivo de consumo transformador</p>
+          <div class="container wrapper">
+            <form class="search-container" @submit.prevent="search">
+              <input
+                v-model="searchText"
+                class="search-text"
+                type="text"
+                autocomplete="off"
+                placeholder="Encuentra productos o servicios"
+              />
+              <div class="search-link">
+                <img
+                  class="search-icon"
+                  src="@/assets/img/latienda-search.svg"
+                  alt="consumo-cuidado-search"
+                  @click="search"
+                />
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="c-container row">
       <div class="col-md-3">
         <ProductFilter
         :filters="filters"
@@ -14,12 +45,28 @@
         <BSpinner />
         <span>Cargando productos...</span>
       </div>
-      <div v-if="!loadingProducts" class="col-md-9">
-        <div class="carousel">
-          <h2 class="title">Últimos productos</h2>
-          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" />
+      <!-- <div class="items">
+        <div class="title-container">
+          <div class="title-lines"></div>
+          <h5 class="items-title">Últimos productos</h5>
+          <div class="title-lines"></div>
         </div>
-        <div v-if="hasFilterTags" class="applied-filters">
+        <div class="items-container">
+          <ItemsRow :type="`product`" :items="carouselProducts" />
+          <NuxtLink to="/busqueda" class="link">
+            <ButtonCTA class="button">Ver todos los servicios</ButtonCTA>
+          </NuxtLink>
+        </div>
+      </div> -->
+      <div v-if="!loadingProducts" class="col-md-9 container-fluid">
+        <div v-if="count > 0" class="carousel">
+          <div class="title-container">
+            <h5 class="items-title">Últimos productos y servicios</h5>
+            <div class="title-lines"></div>
+          </div>
+          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" :items-to-show="3" />
+        </div>
+        <!-- <div v-if="hasFilterTags" class="applied-filters">
           <h2 class="title">FILTROS APLICADOS</h2>
           <div class="filter-buttons">
             <button
@@ -53,31 +100,37 @@
               </button>
             </div>
           </div>
-        </div>
+        </div> -->
         <div class="results">
-          <h2 class="title"></h2>
-          <p class="count">Hay {{ count }} productos</p>
-        </div>
-        
-        <div v-if="products.length !== 0">
-          <div v-for="product in products" :key="product.id">
-            <ProductCard :key="product.key" :product="product" />
+          <div class="title-container">
+            <h5 class="items-title">Catálogo</h5>
+            <div class="title-lines"></div>
           </div>
-          <BPagination
-            v-model="currentPage"
-            class="pagination"
-            :total-rows="count"
-            :per-page="perPage"
-            @change="handlePageChange"
-          />
-        </div>
-        <div v-else class="no-results">
-          <p>
-            No hemos encontrado resultados para su búsqueda... pero puede buscar
-            otro o consultar estos productos.
-          </p>
-          <div v-for="product in defaultProducts" :key="product.id">
-            <ProductCard :key="product.key" :product="product" />
+          <p class="count">Resultados de búsqueda: {{ count }} resultados</p>
+          <div v-if="products.length !== 0">
+            <ProductsRelated :related-products="products" :products-per-page="12" />
+            <!-- <div v-for="product in products" :key="product.id">
+              <ProductCard :key="product.key" :product="product" />
+            </div> -->
+            <!-- <BPagination
+              v-model="currentPage"
+              class="pagination"
+              :total-rows="count"
+              :per-page="perPage"
+              @change="handlePageChange"
+            /> -->
+          </div>
+          <div v-else class="no-results">
+            <p class="query-text">
+              No encontramos <span v-if="queryText">"{{ queryText }}"</span> en Consumo Cuidado.
+            </p>
+            <p>
+              Prueba un término más general, revisa la ortografía o 
+              <span class="link" @click="clearFilters">limpia los filtros</span>.
+            </p>
+            <!-- <div v-for="product in defaultProducts" :key="product.id">
+              <ProductCard :key="product.key" :product="product" />
+            </div> -->
           </div>
         </div>
       </div>
@@ -112,6 +165,7 @@ export default {
   data() {
     return {
       searchText: '',
+      queryText: '',
       currentPage: 1,
       perPage: 10,
       filterTags: {
@@ -146,12 +200,13 @@ export default {
 
   watch: {
     '$route.query'(newValue) {
-      //console.log('New Value:', newValue)
+      console.log('New Value:', newValue)
       //console.log('Route changed:', this.$route.fullPath)
       //console.log('Current params:', this.$route.query)
+      this.queryText = newValue.q
+      console.log('Updated queryText:', this.queryText)
       this.updateData(newValue)
-      Object.assign(this.$data, this.$options.data())
-      
+      //Object.assign(this.$data, this.$options.data())
     }
   },
 
@@ -220,6 +275,7 @@ export default {
     }
 
     this.appliedFilters = params.q
+    console.log('Initial appliedFilters:', this.appliedFilters)
     this.filters = data.filters
     this.prices = prices
     this.coordinates = coordinates
@@ -320,19 +376,160 @@ export default {
     },
 
 
-    search() {
+    async search() {
+      this.currentFilters = { ...this.appliedFilters }
+      console.log('Searching for:', this.searchText)
       if (this.searchText) {
-        return this.$router.push({
-          name: 'busqueda',
-          query: { q: this.searchText },
-        })
+        this.appliedFilters = this.searchText
+        this.products = await this.updateData({ q: this.searchText })
       }
     },
+
+    clearFilters() {
+      this.currentFilters = null
+      this.appliedFilters = null
+      this.queryText = ''
+      this.$router.push({ 
+        name: 'busqueda'
+      })
+
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
+.c-container {
+  contain: content;
+  width: 100%;
+  min-height: 100dvh;
+  margin-bottom: 2rem;
+}
+
+.hero-section {
+  width: 100%;
+  @include mobile {
+    margin-top: 12dvh;
+  }
+}
+.gradient {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  min-height: 45dvh;
+  overflow: hidden;
+
+  // Imagen de fondo
+  background-image: url('@/assets/img/voluntarios.jpg');
+  background-size: cover;
+  background-position: center;
+
+  // Overlay de gradiente
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 24px;
+    background: linear-gradient(
+      180deg,
+      $color-consumo-base 0%,
+      $color-consumo-base-light 100%
+    );
+    z-index: 1;
+    opacity: 0.8;
+  }
+
+  .content {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+    padding: 2rem;
+
+    h1 { 
+      text-align: center;
+      font-size: $hero;
+      font-weight: $bold;
+      @include mobile { max-width: 100%;
+        margin: 1.5rem 1rem 0.5rem 1rem;
+      } 
+    } 
+    p { 
+      font-size: $xl;
+    }
+  }
+
+  @include mobile {
+    margin-top: 8dvh;
+  }
+}
+
+.wrapper {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.search-container {
+  background-color: $color-light;
+  height: 60px;
+  max-width: 100%;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 48px;
+  -webkit-box-shadow: 0px 0px 20px 0px #d1d1d1; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
+  box-shadow: 0px 0px 20px 0px #d1d1d1;
+  @include mobile {
+    height: 40px;
+    margin: 1rem auto;
+  }
+  @include tablet {
+    width: 100%;
+  }
+}
+
+.search-link {
+  @include mobile {
+    width: 40px;
+    height: 40px;
+    padding: 0.6rem;
+    float: right;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    transition: 0.4s;
+  }
+  @include tablet {
+    width: 4rem;
+    margin-right: 1.5rem;
+  }
+}
+.search-text {
+  outline: none;
+  width: 100%;
+  padding: 0 1.5rem;
+}
+.search-icon {
+  cursor: pointer;
+  width: 1.8rem;
+  @include mobile {
+    margin-left: 0;
+    width: 100%;
+  }
+  @include tablet {
+    float: right;
+    height: 70%;
+  }
+}
+
 .ad {
   margin: 40px auto;
   width: 100%;
@@ -376,10 +573,44 @@ export default {
   }
 }
 
+.container-fluid {
+  background-color: $color-bg-light;
+  margin-top: 2rem;
+  border-radius: 24px;
+}
+
 .carousel {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2rem;
+  padding: 8rem 8rem 8rem 8rem;
+  border-radius: 24px;
+  padding: 2rem 0;
+  margin-top: 2rem;
+  &-title {
+    text-align: center;
+  }
   @include mobile {
     display: none;
   }
+}
+.title-container {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding: 0 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;
+  }
   .title {
     font-size: $xl;
     color: $color-navy;
@@ -392,13 +623,18 @@ export default {
   }
 }
 .results {
-  .title {
-    font-size: $xl;
-    color: $color-navy;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+  padding: 8rem8rem;
+  border-radius: 24px;
+  padding: 2rem 0;
+  margin-top: 2rem;
   .count {
-    font-size: $xs;
-    color: $color-greytext;
+    padding: 0 1rem;
+    font-size: $s;
+    font-weight: $medium;
   }
 }
 .pagination {
@@ -410,12 +646,26 @@ export default {
 }
 
 .no-results {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  .query-text {
+    font-size: $xxl;
+    color: $color-primary;
+    font-weight: $medium;
+  }
   p {
     text-align: center;
     font-size: $xl;
-    color: $color-navy;
-    margin-top: 100px;
-    margin-bottom: 100px;
+    color: $color-primary;
+    font-weight: $medium;
+  }
+  .link {
+    color: $color-button;
+    text-decoration: none;
+    cursor: pointer;
   }
 }
 
@@ -426,5 +676,16 @@ export default {
   align-items: center;
   justify-content: center;
   height: 100%;
+  min-height: 100dvh;
+ background-color: $color-bg-light;
+  border-radius: 1rem;
+  padding: 2rem;
+  margin-top: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
 }
 </style>

pages/c/[id].vue

@@ -1,426 +0,0 @@
-<template>
-  <div class="container">
-    <div class="row c-description">
-      <div class="col-md-4">
-        <div class="c-image-container">
-          <img v-if="coop?.logo" :src="coop?.logo" alt="" />
-          <img v-else src="@/assets/img/latienda-product-default.svg" alt="" />
-        </div>
-      </div>
-      <div class="col-md-6">
-        <h1 class="coop-name">{{ coop?.company_name }}</h1>
-        <p class="coop-text">
-          {{ coop?.description }}
-        </p>
-        <div class="tags_container">
-          <NuxtLink
-            v-for="n in coop?.tags"
-            :key="n"
-            :to="tagRoute(n)"
-            class="tag_container"
-          >
-            <img class="tag_img" src="@/assets/img/latienda-tag.svg" />
-            <span>{{ n }}</span>
-          </NuxtLink>
-        </div>
-      </div>
-    </div>
-    <div class="row coop-links">
-      <div class="col-md-4">
-        <BButton
-          v-if="coop?.shop_link"
-          class="div-link"
-          align="center"
-          :href="coop?.shop_link"
-          target="_blank"
-        >
-          <img class="div-link-img" src="@/assets/img/latienda-tienda.svg" />
-          <span>Tienda online</span>
-        </BButton>
-        <BButton
-          v-if="coop?.web_link"
-          class="div-link"
-          align="center"
-          :href="coop?.web_link"
-          target="_blank"
-        >
-          <img class="div-link-img" src="@/assets/img/latienda-web.svg" />
-          <span>Página web</span>
-        </BButton>
-      </div>
-      <div class="col-md-4">
-        <div v-if="coop?.mobile || coop?.phone" class="div-action tel">
-          <img
-            class="div-action-img"
-            src="@/assets/img/latienda-telefono.svg"
-          />
-          <span
-            >{{ coop?.phone }} <br />
-            {{ coop?.mobile }}</span
-          >
-        </div>
-        <div v-if="coop?.email" class="div-action mail">
-          <img class="div-action-img" src="@/assets/img/latienda-email.svg" />
-          <span>{{ coop?.email }}</span>
-        </div>
-      </div>
-      <div class="col-md-4">
-        <div v-if="coop?.address" class="div-action address">
-          <img class="div-action-img" src="@/assets/img/latienda-casa.svg" />
-          <span>{{ coop?.address }}</span>
-        </div>
-        <div v-if="coop?.city" class="div-action location">
-          <img
-            class="div-action-img"
-            src="@/assets/img/latienda-ubicacion.svg"
-          />
-          <span>{{ coop?.city }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-12 c-tabs">
-        <div>
-          <BCard no-body>
-            <BTabs card>
-              <BTab title="Devoluciones, garantías y reembolsos" active>
-                <BCardText>
-                  {{
-                    coop?.sale_terms ||
-                    'Consultar con la cooperativa para más información'
-                  }}
-                </BCardText>
-              </BTab>
-              <BTab title="Envío">
-                <BCardText>
-                  {{
-                    coop?.shipping_terms ||
-                    'Consultar con la cooperativa para más información'
-                  }}
-                </BCardText>
-              </BTab>
-            </BTabs>
-          </BCard>
-        </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>
-      <BPagination
-        v-model="currentPage"
-        :v-if="products"
-        class="pagination"
-        :total-rows="rows"
-        :per-page="perPage"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'pinia'
-export default {
-  setup(){
-    definePageMeta({
-      layout: 'main',
-    })
-  },
-  //TODO: implement head() method
-  // head() {
-  //   return {
-  //     title: `latienda.coop | ${this.coop?.company_name}`,
-  //     meta: [
-  //       {
-  //         hid: 'description',
-  //         name: 'description',
-  //         content: this.coop?.description,
-  //       },
-  //       { property: 'og:title', content: this.coop?.company_name },
-  //       { property: 'og:description', content: this.coop?.description },
-  //       { property: 'og:image', content: this.coop?.logo },
-  //       { property: 'og:url', content: this.coop?.web_link },
-  //       { name: 'twitter:card', content: 'summary_large_image' },
-  //     ],
-  //   }
-  // },
-  data() {
-    return {
-      coop: null,
-      products: null,
-      currentPage: 1,
-      perPage: 10,
-    }
-  },
-  computed: {
-    ...mapState(useAuthStore, ['id', 'access']),
-    rows() {
-      return this.products?.length
-    },
-    slicedProducts() {
-      const initial = (this.currentPage - 1) * this.perPage
-      const final = this.currentPage * this.perPage
-      const items = this.products ? this.products?.slice(initial, final) : []
-      return items
-    },
-  },
-
-  async created() {
-    try {
-      const config = useRuntimeConfig()
-      const $route = useRoute()
-      this.coop  = await $fetch(`/companies/${$route.params.id}/`,
-        {
-          baseURL: config.public.baseURL,
-          method: 'GET',
-        }
-      )
-      this.products = await $fetch(
-        `/products?company=${route.params.id}`,
-        {
-          baseURL: config.public.baseURL,
-          method: 'GET',
-        }
-      )
-
-    } catch (error) {
-      console.error(error)
-    }
-  },
-
-  mounted() {
-    this.sendLog('view')
-  },
-
-  methods: {
-    tagRoute(tag) {
-      return `/busqueda?tags=${tag}`
-    },
-    async getPosition() {
-      const geoLocation = () =>
-        new Promise((resolve, reject) =>
-          navigator.geolocation.getCurrentPosition(
-            (posData) => {
-              resolve(posData)
-            },
-            (error) => {
-              reject(error)
-            }
-          )
-        )
-      try {
-        const position = await geoLocation()
-        const geo = {
-          latitude: position.coords.latitude,
-          longitude: position.coords.longitude,
-        }
-        return geo
-      } catch {
-        const geo = null
-        return geo
-      }
-    },
-
-    async sendLog(action) {
-      const geo = await this.getPosition()
-      try {
-        const config = useRuntimeConfig()
-        const accessToken = this.access
-        const data = await $fetch('https://api.ipify.org?format=json', {
-          baseURL: config.public.baseURL,
-          method: 'GET'
-        })
-        const ip = data.ip
-        const object = {
-          action: action,
-          action_object: {
-            model: 'company',
-            id: this.coop?.id,
-          },
-        }
-        //console.log('Sending log OBJECT:', object)
-        if (ip) object.ip = ip
-        if (geo) object.geo = geo
-        try {
-          //TODO: review problems with 406 error backend
-          await $fetch(`/stats/me/`, {
-            baseURL: config.public.baseURL,
-            method: 'POST',
-            body: object,
-            headers: {
-              Authorization: `Bearer ${accessToken}`
-            }
-          })
-        } catch (error) {
-          console.error('Error /stats:', error)
-        }
-      } catch (error) {
-        console.error('Error sending log:', error)
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-//global classes for Bootstrap styling
-ul.nav > li.nav-item {
-  font-weight: bolder;
-  :hover {
-    color: $color-navy;
-  }
-  .active {
-    border-top: 4px solid $color-navy;
-    color: $color-navy;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.container {
-  margin-top: 80px;
-  margin-bottom: 80px;
-
-  @include mobile {
-    padding: 0.4em 2em;
-  }
-}
-
-.c-description {
-  margin-top: 40px;
-  margin-bottom: 40px;
-  @include mobile {
-    margin-bottom: 0;
-  }
-}
-
-.coop-links {
-  margin-bottom: 40px;
-
-  .div-action {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding-left: 8px;
-    overflow: hidden;
-
-    .img-tel {
-      width: 16px;
-    }
-  }
-
-  .div-link-img,
-  .div-action-img {
-    width: 20px;
-    margin-right: 8px;
-  }
-
-  .div-action-img {
-    margin-left: 5px;
-  }
-}
-
-.c-image-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  img {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-  }
-}
-
-.coop-name {
-  font-size: $xl;
-  color: $color-navy;
-  text-transform: capitalize;
-}
-.coop-text {
-  margin-top: 8px;
-  font-family: $font-secondary;
-  font-size: $s;
-  color: $color-greytext;
-}
-
-.div-link:hover {
-  box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
-  transition: all 0.2s ease;
-}
-
-.div-link {
-  width: 100%;
-  border: 3px solid $color-orange;
-  border-radius: 5px;
-  background-color: $color-light;
-  font-weight: $bold;
-  padding: 15px 0;
-  margin-bottom: 5px;
-
-  span {
-    color: $color-orange;
-  }
-}
-
-.div-action {
-  width: 100%;
-  background-color: $color-grey-nav;
-  border: none;
-  color: $color-greytext;
-  font-family: $font-secondary;
-  font-size: $s;
-  padding: 20px 0;
-  margin-bottom: 5px;
-}
-
-.tag_container {
-  margin: 5px 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;
-  }
-}
-
-.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 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-</style>

pages/c/index.vue

@@ -1,192 +0,0 @@
-<template>
-  <div class="container mt-5">
-    <div class="row justify-content-center">
-      <div class="col-10 coopcard-list">
-        <h1 class="title">Últimas cooperativas añadidas</h1>
-        <p class="help">
-          Si quieres que tu cooperativa forme parte de este gran proyecto
-          registrate en el siguiente
-          <NuxtLink to="/registro/cooperativa"><b>formulario</b></NuxtLink
-          >.
-        </p>
-        <div class="form-container">
-          <form class="search-container" @submit.prevent="search">
-            <input
-              v-model="searchText"
-              class="search-text"
-              type="text"
-              autocomplete="off"
-              placeholder="Buscar cooperativas"
-            />
-            <img
-              class="search-icon"
-              src="@/assets/img/latienda-search-blue.svg"
-              alt="latienda.coop-search"
-              @click="search"
-            />
-          </form>
-        </div>
-        <div v-for="coop in companyList" :key="coop.id">
-          <CoopCard :coop="coop" />
-        </div>
-      </div>
-    </div>
-    <!-- <BPagination
-      v-model="currentPage"
-      class="pagination"
-      :total-rows="rows"
-      :per-page="perPage"
-    /> -->
-  </div>
-</template>
-
-<script>
-export default {
-  setup(){
-    definePageMeta({
-      layout: 'mainbanner',
-    })
-  },
-
-  data() {
-    return {
-      currentPage: 1,
-      perPage: 10,
-      searchText: '',
-      companyList: null
-    }
-  },
-  // computed: {
-  //   rows() {
-  //     return this.companyList?.length
-  //   },
-  //   slicedCompanies() {
-  //     const initial = (this.currentPage - 1) * this.perPage
-  //     const final = this.currentPage * this.perPage
-  //     const items = this.companyList ? this.companyList.slice(initial, final) : []
-  //     return items
-  //   },
-  // },
-  mounted() {
-    this.getCompanies()
-  },
-  methods: {
-    async getCompanies() {
-      const config = useRuntimeConfig()
-      try {
-        const response = await $fetch(`/companies/sample/`, {
-          baseURL: config.public.baseURL,
-          method: 'GET'
-        })
-        this.companyList = response
-      } catch (error) {
-        console.error('Error fetching companies:', error)
-      }
-    },
-    async search() {
-      const config = useRuntimeConfig()
-      if (this.searchText) {
-        const response = await $fetch(`/search/companies/?search=${this.searchText}`, {
-          baseURL: config.public.baseURL,
-          method: 'GET'
-        })
-        this.companyList = response
-      } else {
-        const response = await $fetch(`/companies/sample/`, {
-          baseURL: config.public.baseURL,
-          method: 'GET'
-        })
-        this.companyList = response
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.container {
-  margin-top: 80px;
-  margin-bottom: 80px;
-}
-
-.title {
-  margin-top: 60px;
-  margin-bottom: 40px;
-  font-size: $xxl;
-  color: $color-navy;
-}
-
-.form-container {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.coopcard-list {
-  margin-bottom: 40px;
-}
-
-.pagination {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.help {
-  color: $color-navy;
-  margin-bottom: 0px;
-  font-size: $s;
-}
-
-.search-container {
-  border: none;
-  border-radius: 5px;
-  background: $color-light-green;
-  width: 50%;
-  height: 32px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 50px;
-  margin-bottom: 50px;
-
-  @include mobile {
-    width: 100%;
-  }
-}
-
-.search-container img,
-input,
-select {
-  padding: 6px 10px;
-  margin-right: 16px;
-  background: transparent;
-  font-size: $xl;
-  border: none;
-}
-
-.search-icon {
-  float: right;
-  height: 90%;
-}
-
-.search-text {
-  outline: none;
-  width: 100%;
-  text-align: center;
-  color: $color-navy;
-  font-size: $s;
-  font-weight: $regular;
-}
-
-::placeholder {
-  color: $color-navy;
-  font-size: $s;
-}
-
-select {
-  --webkit-appearance: auto;
-}
-</style>

pages/editar/cooperativa/index.vue

@@ -24,30 +24,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-  margin-top: 40px;
-  margin-bottom: 80px;
-}
 .edit-coop {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .title {
-  color: $color-navy;
-  font-size: $xxl;
-  margin-bottom: 50px;
-  text-align: left;
+  color: $color-primary;
+  font-size: $h2;
+  margin-bottom: 40px;
+  text-align: center;
+  width: 100%;
+  @include mobile {
+    width: 80%;
+    margin-top: 70px;
+  }
   @include desktop {
     width: 40%;
   }
-  @include tablet {
-    width: 60%;
-  }
-  @include mobile {
-    width: 90%;
-    margin-top: 70px;
-  }
 }
 
 .form-container {

pages/editar/perfil/contrasena.vue

@@ -1,6 +1,6 @@
 <template>
   <BContainer class="container">
-    <BRow align-h="center">
+    <BRow align-h="center" class="change-password">
       <BCol class="change-password">
         <form class="form"  autocomplete="off" @submit.prevent="submitUser">
           <h1 class="title">Cambiar contraseña</h1>
@@ -92,29 +92,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
 
 .change-password {
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
 }
 
 .title {
-  color: $color-navy;
-  font-size: $xxl;
+  color: $color-primary;
+  font-size: $h2;
   margin-bottom: 40px;
-  text-align: left;
-  width: 45%;
+  text-align: center;
+  width: 100%;
   @include mobile {
     width: 80%;
     margin-top: 70px;
   }
   @include desktop {
-    width: 25%;
+    width: 40%;
   }
 }
 .form {
@@ -125,10 +122,13 @@ export default {
   margin-bottom: 40px;
   label {
     text-align: left;
-    color: $color-navy;
+    color: $color-primary;
     font-weight: $bold;
     font-size: $xs;
   }
+  .submit-btn {
+    margin-top: 1rem;
+  }
 }
 .error {
   color: crimson;

pages/editar/perfil/index.vue

@@ -1,6 +1,6 @@
 <template>
   <BContainer class="container">
-    <BRow align-h="start">
+    <BRow align-h="start" class="edit-profile">
       <BCol class="edit-profile">
         <form class="form" @submit.prevent="submitUser">
           <h1 class="title">Editar perfil</h1>
@@ -108,22 +108,18 @@ export default {
 </script>
 
 <style lang="scss" scoped> 
-.container {
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
 .edit-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
 }
 
 .title {
-  color: $color-navy;
-  font-size: $xxl;
+  color: $color-primary;
+  font-size: $h2;
   margin-bottom: 40px;
-  text-align: left;
+  text-align: center;
   width: 45%;
 
   @include mobile {
@@ -136,14 +132,14 @@ export default {
 }
 
 .form {
-  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 40px;
+  width: 100%;
   label {
     text-align: left;
-    color: $color-navy;
+    color: $color-primary;
     font-weight: $bold;
     font-size: $xs;
   }
@@ -159,7 +155,7 @@ export default {
 .checkbox-group {
   display: flex;
   align-items: center;
-  border: 1px solid $color-navy;
+  border: 1px solid $color-primary;
   padding: 10px;
   border-radius: 5px;
 }