diff --git a/_sass/accessibility.scss b/_sass/accessibility.scss
new file mode 100644
index 0000000..b9ed09a
--- /dev/null
+++ b/_sass/accessibility.scss
@@ -0,0 +1,13 @@
+* {
+  scroll-behavior: smooth;
+}
+
+/*
+ * Deshabilita animaciones si la usuaria las tiene deshabilitadas
+ */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    scroll-behavior: auto;
+    animation: none !important;
+  }
+}
diff --git a/_sass/helpers.scss b/_sass/helpers.scss
new file mode 100644
index 0000000..a7510bb
--- /dev/null
+++ b/_sass/helpers.scss
@@ -0,0 +1,53 @@
+
+/*
+ * Crea una propiedad con prefijos de navegador
+ */
+$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+@mixin vendor-prefix($property, $definition...) {
+  @each $prefix in $vendor-prefixes {
+    #{$prefix}$property: $definition;
+  }
+}
+
+/*
+ * Crea clases para asignar colores según la lista de colores.
+ */
+@each $color, $_ in $colors {
+  .background-#{$color} {
+    background-color: var(--#{$color});
+  }
+
+  .#{$color} {
+    color: var(--#{$color});
+
+    ::-moz-selection,
+    ::selection {
+      background: var(--#{$color});
+      color: white;
+    }
+
+    svg {
+      * {
+        fill: var(--#{$color});
+      }
+    }
+
+    .form-control {
+      border-color: var(--#{$color});
+    }
+
+    .btn {
+      background-color: var(--#{$color});
+      color: white;
+      border-color: var(--#{$color});
+    }
+
+    hr {
+      border-color: var(--#{$color});
+    }
+
+    a {
+      color: var(--#{$color});
+    }
+  }
+}
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 33b1dcf..de8acb4 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -10,3 +10,5 @@
  * Los archivos se encuentran en node_modules/bootstrap/scss
  */
 @import "bootstrap/scss/bootstrap";
+@import "accessibility";
+@import "helpers";