diff --git a/curso-frontend-developer/vista-principal/styles.css b/curso-frontend-developer/vista-principal/styles.css
index 47ab9e8..6f201c2 100644
--- a/curso-frontend-developer/vista-principal/styles.css
+++ b/curso-frontend-developer/vista-principal/styles.css
@@ -1,17 +1,23 @@
-body {
-  margin: 0;
-  font-family: 'Muli', sans-serif;
-  background: #8f57fd;
+:root {
+  --primary-color: #8f57fd;
+  --secondary-color: white;
+  --background-color:  rgba(255,255,255,0.1);
 }
 
 * {
   box-sizing: border-box;
 }
 
+body {
+  margin: 0;
+  font-family: 'Muli', sans-serif;
+  background: var(--primary-color);
+}
+
 .header {
   align-items: center;
-  background: #8f57fd;
-  color: white;
+  background: var(--primary-color);
+  color: var(--secondary-color);
   display: flex;
   height: 100px;
   justify-content: space-between;
@@ -47,7 +53,7 @@ body {
 }
 
 .header__menu li a {
-  color: white;
+  color: var(--secondary-color);
   text-decoration: none;
 }
 
@@ -76,13 +82,13 @@ body {
 }
 
 .main__title {
-  color: white;
+  color: var(--secondary-color);
   font-size: 25px;
 }
 
 .categories__title {
-  background: #8f57fd;
-  color: white;
+  background: var(--primary-color);
+  color: var(--secondary-color);
   font-size: 16px;
   margin-top: -16px;
   position: absolute;
@@ -170,26 +176,26 @@ body {
 }
 
 .carousel-item__details--title {
-  color: white;
+  color: var(--secondary-color);
   margin: 5px 0px 0px 0px;
 }
 
 .carousel-item__details--subtitle {
-  color: white;
+  color: var(--secondary-color);
   font-size: 8px;
   margin: 3px 0px;
 }
 
 .footer {
   align-items: center;
-  background-color: #8f57fd;
+  background-color: var(--primary-color);
   display: flex;
   height: 100px;
   width: 100%;
 }
 
 .footer a {
-  color: white;
+  color: var(--secondary-color);
   cursor: pointer;
   font-size: 14px;
   padding-left: 30px;
@@ -201,10 +207,10 @@ body {
 }
 
 .input {
-  background-color: rgba(255,255,255,0.1);
-  border: 2px solid white;
+  background-color: var(--background-color);
+  border: 2px solid var(--secondary-color);
   border-radius: 25px;
-  color: white;
+  color: var(--secondary-color);
   font-family: 'Muli', sans-serif;
   font-size: 16px;
   height: 50px;
@@ -215,7 +221,7 @@ body {
 }
 
 ::placeholder {
-  color: white;
+  color: var(--secondary-color);
 }
 
 @media only screen and (max-width: 600px) {