diff --git a/home/index.html b/home/index.html
index 03f1b13..6fb50b8 100644
--- a/home/index.html
+++ b/home/index.html
@@ -355,35 +355,44 @@ <h3 class="ui header">🧐 <span class="aquamarina">¿Porqué estudiar con nosot
             </div>
             <!-- Oferta educativa... -->
             <div id="ofertaEducativa">
-                <!-- Vista para computadoras -->
-                <div class="computer only ui two column grid">
-                    <div class="column">
-                        <div id="seccionPrimaria" class="ui inverted segment">
-                            <h1 class="centrado">Primaria</h1>
-                            <div class="ui centrado medium header">Valores, Educación de Calidad, Fe</div>
-                            <div class="ui enlace centrado small header"><a href="#">Más información <i class="ui icon angle right"></i></a></div>
+                <!-- TODO: Ponerle aquí que sea para pc y moviles -->
+                <div class="ui center aligned segment">
+                    <h1 class="header">la mejor educación</h1>
+                    <h1 id="ofertaTitulo" class="ui header">Inspiración para todos</h1>
+                    <h2 class="sub header">
+                        <p id="ofertaTexto">
+                            Todos tenemos nuestra propia manera de aprender y
+                            de expresar nuestra creatividad. La educación y los
+                            valores del Colegio Hernán Cortés ayudan a todo tipo de profesores y
+                            alumnos a aprender, crear y encontrar su propio
+                            camino al éxito. Hagamos que el mundo
+                            siga avanzando.
+                        </p>
+                    </h2>
+                    <div class="ui three column doubling relaxed grid">
+                        <div class="column">
+                            <div id="primariaSegment" class="ui segment">
+                                <img src="./data/img/primaria1.jpg" class="ui image"></img>
+                                <h3 class="ui header">Primaria</h3>
+                                <h2 class="negritas content">Despierta la creatividad en cada alumno.</h2>
+                                <h2><a href="#" class="enlace">Más información<i class="ui angle right icon"></i></a></h2>
+                            </div>
                         </div>
-                    </div>
-                    <div class="column">
-                        <div id="seccionSecundaria" class="ui segment">
-                            <h1 class="centrado">Secundaria</h1>
-                            <div class="ui centrado medium header">Explota la adolescencia al máximo</div>
-                            <div class="ui enlace centrado small header"><a href="#">Más información <i class="ui icon angle right"></i></a></div>
+                        <div class="column">
+                            <div id="secundariaSegment" class="ui segment">
+                                <img src="./data/img/primaria2.jpg" class="ui image"></img>
+                                <h3 class="ui header">Secundaria</h3>
+                                <h2 class="negritas content">Enseña. Innova. Inspira de mil maneras</h2>
+                                <h2><a href="#" class="enlace">Más información<i class="ui angle right icon"></i></a></h2>
+                            </div>
                         </div>
-                    </div>
-                </div>
-                <!-- Vista para telefonos -->
-                <div class="mobile only ui grid">
-                    <div id="seccionPrimaria" class="ui inverted segment">
-                        <h1 class="ui centrado header">Primaria</h1>
-                        <div class="ui medium header">Valores, Educación de Calidad, Fe</div>
-                        <div class="ui enlace small header"><a href="#">Más información <i class="ui icon angle right"></i></a></div>
-                    </div>
-                    <div class="row">
-                        <div id="seccionSecundaria" class="ui segment">
-                            <h1 class="centrado">Secundaria</h1>
-                            <div class="ui centrado medium header">Explota la adolescencia al máximo</div>
-                            <div class="ui enlace centrado small header"><a href="#">Más información <i class="ui icon angle right"></i></a></div>
+                        <div class="column">
+                            <div id="extraSegment" class="ui segment">
+                                <img src="./data/img/primaria1.jpg" class="ui image"></img>
+                                <h3 class="ui header">Extracurriculares</h3>
+                                <h2 class="negritas content">Aprende sin límites.</h2>
+                                <h2><a href="#" class="enlace">Más información<i class="ui angle right icon"></i></a></h2>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/home/src/css/body.css b/home/src/css/body.css
index b09c168..66b4bf4 100644
--- a/home/src/css/body.css
+++ b/home/src/css/body.css
@@ -20,6 +20,7 @@
     background-image: url("../.././data/img/fondochc.jpg");
     background-size: cover;
 }*/
+
 #seccionPrimaria {
     background-image: url("../../data/img/primaria-ban.jpg");
     background-size: cover;
@@ -40,6 +41,32 @@
     text-decoration-color: #4183C4;
 }
 
+#primariaSegment{
+    background-color: #e9bfde;
+}
+
+#secundariaSegment{
+    background-color: #d2e1b4;
+}
+
+#extraSegment{
+    background-color: #d8f1ff;;
+}
+
+#ofertaTitulo {
+    font-size: 60pt;
+    font-weight: bold;
+}
+
+#ofertaTexto {
+    font-size: 25pt;
+    color: #606060;
+    letter-spacing: .004em;
+    line-height: 1.125;
+    margin-left: 20%;
+    margin-right: 20%;
+}
+
 #seccionPrimaria h1 {
     font-size: 40pt;
 }
diff --git a/home/src/css/componentes.css b/home/src/css/componentes.css
index 4242bde..6dced09 100644
--- a/home/src/css/componentes.css
+++ b/home/src/css/componentes.css
@@ -24,7 +24,7 @@
 
 .dorado{
   color:transparent;
-  background: linear-gradient(270deg,#f7ef8a,#d2ac47,#edc967,#dfbd69,#4c0805,#f9f295);
+  background: linear-gradient(270deg,#f7ef8a,#d2ac47,#edc967,#dfbd69,#ccaf20,#f9f295);
   animation:gradiente 64s linear infinite;
   background-size: 60% 100%;
   -webkit-background-clip:text;
diff --git a/home/src/css/sfpro.css b/home/src/css/sfpro.css
index 674369b..01a3363 100644
--- a/home/src/css/sfpro.css
+++ b/home/src/css/sfpro.css
@@ -19,3 +19,14 @@
          url('.././fuentes/sfpro.svg') format('svg');
     font-style: italic;
 }
+
+@font-face {
+    font-family: 'SF Pro Display';
+    src: url('.././fuentes/sfpro.eot');
+    src: url('.././fuentes/sfpro.eot?#iefix') format('embedded-opentype'),
+         url('.././fuentes/sfpro.woff2') format('woff2'),
+         url('.././fuentes/sfpro.ttf') format('truetype'),
+         url('.././fuentes/sfpro.otf') format('opentype'),'
+         url('.././fuentes/sfpro.svg') format('svg');
+    font-style: bold;
+}
diff --git a/home/src/semantic/semantic.css b/home/src/semantic/semantic.css
index 6fc6454..fb55e87 100755
--- a/home/src/semantic/semantic.css
+++ b/home/src/semantic/semantic.css
@@ -10,7 +10,9 @@
  */
 @import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');
 /*Fuente personal*/
-@import url('.././css/sfpro.css');
+/* TODO: Luego quitar esta línea */
+/* @import url('.././css/sfpro.css'); */
+@import url('https://raw.githubusercontent.com/ValorKand/SanFrancisco-Font/main/css/sfpro.css');
 /*!
  * # Semantic UI 2.5.0 - Reset
  * http://github.com/semantic-org/semantic-ui/