diff --git a/src/App.vue b/src/App.vue
index 358b130..809aadb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,38 +1,38 @@
-<template>
-  <div id="app">
-    <Header />
-    <router-view></router-view>
-    <Footer />
-  </div>
-</template>
-
-<script>
-import Header from "./esteticas/header.vue";
-import Footer from "./esteticas/footer.vue";
-
-export default {
-  name: "App",
-  components: {
-    Header,
-    Footer
-  }
-};
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-
-  padding: 0;
-  margin: 0;
-}
-
-.row {
-  margin: 0 !important;
-}
-</style>
+<template>
+  <div id="app">
+    <Header />
+    <router-view></router-view>
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "./esteticas/header.vue";
+import Footer from "./esteticas/footer.vue";
+
+export default {
+  name: "App",
+  components: {
+    Header,
+    Footer
+  }
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+
+  padding: 0;
+  margin: 0;
+}
+
+.row {
+  margin: 0 !important;
+}
+</style>
diff --git a/src/esteticas/footer.vue b/src/esteticas/footer.vue
index e3312b2..e3499cc 100644
--- a/src/esteticas/footer.vue
+++ b/src/esteticas/footer.vue
@@ -1,76 +1,91 @@
-<template>
-  <div class="divMaster">
-    <div class="footer cl-12 azulUnam">
-      <div class="row d-flex justify-content-center ">
-        <div class="  col-5 col-lg-3 my-3  text-center btn-foo  ">
-          <a
-            href="#"
-            class="btn rounded-pill doradoUnam text-white btn-sm active"
-            role="button"
-            aria-pressed="true"
-            >Comite Editorial</a
-          >
-        </div>
-        <div class="  col-5 col-lg-3 my-3  text-center btn-foo  ">
-          <a
-            href="#"
-            class="btn rounded-pill doradoUnam text-white btn-sm active"
-            role="button"
-            aria-pressed="true"
-            >Politica Editorial y Lineamietos</a
-          >
-        </div>
-        <div class="  col-5 col-lg-3 my-3  text-center btn-foo  ">
-          <a
-            href="#"
-            class="btn rounded-pill doradoUnam text-white btn-sm active"
-            role="button"
-            aria-pressed="true"
-            >Libreria</a
-          >
-        </div>
-        <div class="  col-5 col-lg-3 my-3  text-center btn-foo  ">
-          <a
-            href="#"
-            class="btn rounded-pill doradoUnam text-white btn-sm active"
-            role="button"
-            aria-pressed="true"
-            >contactanos</a
-          >
-        </div>
-      </div>
-      <div class="row">
-        <p class="text-white px-3">
-          Hecho en México, todos los derechos reservados 2020. Esta página puede
-          ser reproducida con fines no lucrativos, siempre y cuando no se
-          mutile, se cite la fuente completa y su dirección electrónica. De otra
-          forma, requiere permiso previo por escrito de la institución
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-* {
-  margin: 0;
-  padding: 0;
-}
-
-.divMaster {
-  max-width: 1280px;
-  height: auto;
-  margin: 0 auto;
-}
-
-.azulUnam {
-  background-color: #1e3c70;
-}
-.doradoUnam {
-  background-color: #bb8800;
-}
-
-/* .footer{
-    height: 100px;
-} */
-</style>
+<template>
+  <footer class="container-fluid Azul-puma footer py-3 ">
+    <container>
+      <div row>
+        <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
+          Comité Editorial
+        </button>
+        <button type="button" class="col-md-6 col-sm-12 btn boton-footer dos">
+          Política Editorial y Lineamentos
+        </button>
+        <button type="button" class="col-md-6 col-sm-12 btn boton-footer tres">
+          Proceso Editorial y Organismos
+        </button>
+        <button
+          type="button"
+          class="col-md-6 col-sm-12 btn boton-footer cuatro"
+        >
+          Puntos de Venta
+        </button>
+      </div>
+    </container>
+    <div row>
+      <p class="mb-0 ">Hecho en México, todos los derechos reservados 2020.</p>
+      <p class="my-0 ">
+        Esta página puede ser reproducida con fines no lucrativos, siempre y
+        cuando no se mutile, se cite la fuente
+      </p>
+      <p>
+        completa y su dirección electrónica. De otra forma, requiere permiso
+        previo por escrito de la institución.
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.boton-footer {
+  background-color: rgb(187, 136, 0);
+  color: white;
+  width: 14rem;
+  font-size: 0.8rem;
+}
+.uno,.dos,  
+.tres {
+  margin-right: 1rem;
+}
+.btn{
+  margin-bottom: 1rem;
+}
+
+.Azul-puma {
+  background-color: #1e3c70;
+}
+
+.footer {
+  text-align: center;
+  color: white;
+}
+
+
+@media (max-width: 768px) {
+  .uno,.tres {
+    margin-right: 4rem;
+  }
+  .dos{
+    margin-right: 0rem;
+  }
+  .footer {
+    font-size: 0.7rem;
+  }
+  
+}
+
+@media (max-width: 970px) {
+  .uno,.dos,  
+.tres {
+  margin-right: .5rem;
+}
+  
+  .footer {
+    font-size: 0.7rem;
+  }
+  
+}
+
+
+</style>
diff --git a/src/esteticas/header.vue b/src/esteticas/header.vue
index 5d487ea..296f4fa 100644
--- a/src/esteticas/header.vue
+++ b/src/esteticas/header.vue
@@ -1,40 +1,42 @@
 <template>
-  <div class="row divMaster header cl-12 azulUnam">
-    <div
-      class="logo_unam  col-4 offset-1 d-inline-flex my-2 align-items-center"
-    >
-      <a href="https://www.unam.mx/" target="_blank">
-        <img class="sizeImg" src="../assets/Logo-UNAM.png" alt="logo unam" />
-      </a>
-    </div>
+  <container>
+    <div class="row divMaster header cl-12 azulUnam">
+      <div
+        class="logo_unam  col-4 offset-1 d-inline-flex my-2 align-items-center"
+      >
+        <a href="https://www.unam.mx/" target="_blank">
+          <img class="sizeImg" src="../assets/Logo-UNAM.png" alt="logo unam" />
+        </a>
+      </div>
 
-    <div
-      class="logo_acatlan  col-4  offset-2 d-inline-flex justify-content-end my-2 align-items-center"
-    >
-      <a href="https://www.acatlan.unam.mx/" target="_blank">
-        <img
-          class="sizeImg"
-          src="../assets/FES-editoriales.png"
-          alt="logo unam"
-        />
-      </a>
-    </div>
+      <div
+        class="logo_acatlan  col-4  offset-2 d-inline-flex justify-content-end my-2 align-items-center"
+      >
+        <a href="https://www.acatlan.unam.mx/" target="_blank">
+          <img
+            class="sizeImg"
+            src="../assets/FES-editoriales.png"
+            alt="logo unam"
+          />
+        </a>
+      </div>
 
-    <div
-      class="logo_acatlan_resp col-8  offset-2 d-flex justify-content-center my-2 align-items-center"
-    >
-      <a href="https://www.acatlan.unam.mx/" target="_blank">
-        <img
-          class="sizeImg"
-          src="../assets/FES-editoriales.png"
-          alt="logo unam"
-        />
-      </a>
+      <div
+        class="logo_acatlan_resp col-8  offset-2 d-flex justify-content-center my-2 align-items-center"
+      >
+        <a href="https://www.acatlan.unam.mx/" target="_blank">
+          <img
+            class="sizeImg"
+            src="../assets/FES-editoriales.png"
+            alt="logo unam"
+          />
+        </a>
+      </div>
     </div>
-  </div>
+  </container>
 </template>
 
-<style scoped>
+<style >
 .divMaster {
   height: 7em;
   margin: 0 auto;