diff --git a/src/index.html b/src/index.html
index ee8731f..68c9b91 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,17 +10,167 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <nav class="w-100 sticky top-0 bg-blanco px-16 py-8">asdf</nav>
+    <nav class="sticky top-0 w-full bg-blanco px-16 py-4">asdf</nav>
     <section class="h-screen">
       <div class="flex h-full">
         <div class="h-full flex-1 bg-naranja">asdf</div>
         <div class="h-full flex-1 bg-celeste">asd</div>
       </div>
     </section>
-    <section class="bg-blanco p-8">
-      <h2 class="text-center text-5xl font-bold">Nuevos saberes</h2>
-      <div class="flex">
-        <div class="border-l-black flex-1 border-l"></div>
+    <section class="min-h-screen bg-blanco p-32">
+      <div class="mb-4 flex justify-center gap-4">
+        <img class="aspect-[1.3] w-1/3" src="tmp_imagen_roja.png" />
+        <img class="aspect-[1.3] w-1/3" src="tmp_imagen_violeta.png" />
+      </div>
+      <img
+        class="mx-auto aspect-[1.94] w-5/12 object-contain"
+        src="tmp_imagen_azul.png"
+      />
+    </section>
+    <section class="min-h-screen bg-blanco p-8">
+      <h2 class="pb-8 text-center text-5xl font-bold">Nuevos saberes</h2>
+      <div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
+        <div class="border-current flex-1 border-l px-6 py-6">
+          <h3 class="pb-4 font-mono text-2xl italic">01_</h3>
+          <h3 class="pb-4 text-2xl font-bold">Alfabetizaciones fusionadas</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, eos
+            ducimus. Expedita, illo labore veniam fugit laborum obcaecati magnam
+            sapiente corporis delectus excepturi aspernatur reiciendis est
+            eveniet atque aut dignissimos?
+          </p>
+        </div>
+        <div class="border-current flex-1 border-l px-6 py-6">
+          <h3 class="pb-4 font-mono text-2xl italic">02_</h3>
+          <h3 class="pb-4 text-2xl font-bold">Aprendizajes híbridos</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ad
+            optio mollitia, odit eum blanditiis vitae ab explicabo nobis
+            deserunt sunt, assumenda, repellat nostrum culpa delectus excepturi
+            ratione voluptatibus molestiae.
+          </p>
+        </div>
+        <div class="border-current flex-1 border-l px-6 py-6">
+          <h3 class="pb-4 font-mono text-2xl italic">03_</h3>
+          <h3 class="pb-4 text-2xl font-bold">Orientaciones computacionales</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
+            modi consectetur repellendus a sed explicabo, voluptates alias
+            maiores tenetur non atque et sequi! Velit obcaecati sapiente earum
+            fugiat ipsa sint.
+          </p>
+        </div>
+        <div class="border-current flex-1 border-l px-6 py-6">
+          <h3 class="pb-4 font-mono text-2xl italic">04_</h3>
+          <h3 class="pb-4 text-2xl font-bold">Tecnopedagogía</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+            iste modi iusto temporibus fugit aliquid alias eos, ullam officia
+            optio voluptatem praesentium sed omnis, et quia. Saepe voluptatibus
+            qui repudiandae.
+          </p>
+        </div>
+      </div>
+    </section>
+    <section class="flex min-h-screen place-content-center bg-blanco">
+      <div class="grid grid-cols-1 place-content-center xl:grid-cols-2">
+        <div class="grid lg:grid-cols-2">
+          <div
+            class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll bg-celeste"
+          ></div>
+          <div
+            class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8"
+          >
+            <h2 class="mb-4 text-4xl">Datos</h2>
+            <p>
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+              Temporibus, molestiae provident eum nam labore quam, magnam illo
+              ex doloribus amet nisi praesentium aperiam aliquid. Atque nostrum
+              iste iusto tempore quae.
+            </p>
+          </div>
+        </div>
+        <div class="grid lg:grid-cols-2">
+          <div
+            class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll bg-amarillo lg:order-last xl:order-none"
+          ></div>
+          <div
+            class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8"
+          >
+            <h2 class="mb-4 text-4xl">Datos</h2>
+            <p>
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+              Temporibus, molestiae provident eum nam labore quam, magnam illo
+              ex doloribus amet nisi praesentium aperiam aliquid. Atque nostrum
+              iste iusto tempore quae.
+            </p>
+          </div>
+        </div>
+        <div class="grid lg:grid-cols-2">
+          <div
+            class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll bg-naranja xl:order-last"
+          ></div>
+          <div
+            class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8"
+          >
+            <h2 class="mb-4 text-4xl">Datos</h2>
+            <p>
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+              Temporibus, molestiae provident eum nam labore quam, magnam illo
+              ex doloribus amet nisi praesentium aperiam aliquid. Atque nostrum
+              iste iusto tempore quae.
+            </p>
+          </div>
+        </div>
+        <div class="grid lg:grid-cols-2">
+          <div
+            class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll bg-violeta lg:order-last"
+          ></div>
+          <div
+            class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8"
+          >
+            <h2 class="mb-4 text-4xl">Datos</h2>
+            <p>
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+              Temporibus, molestiae provident eum nam labore quam, magnam illo
+              ex doloribus amet nisi praesentium aperiam aliquid. Atque nostrum
+              iste iusto tempore quae.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section
+      class="grid min-h-screen grid-rows-1 items-end bg-[black] text-[white] lg:grid-cols-4"
+    >
+      <div class="col-span-3 flex h-full flex-col justify-end p-4">
+        <h2 class="mb-4 mt-16 font-mono text-3xl">
+          <strong>Caso:</strong><br />
+          Nuestra Señora del Rosario
+        </h2>
+        <iframe
+          class="aspect-video w-full"
+          src="https://www.youtube-nocookie.com/embed/NsT30qGayP4"
+          title="YouTube video player"
+          frameborder="0"
+          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowfullscreen
+        ></iframe>
+      </div>
+      <div class="flex flex-col items-start gap-4 p-4">
+        <p class="text-xl">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
+          labore repellat delectus aliquam soluta dolore officia consectetur ab
+          quos quaerat, maiores earum molestiae assumenda, praesentium nemo
+          commodi repellendus iusto dolorum!
+        </p>
+        <a
+          class="border border-[white] bg-[black] p-3 font-mono text-xl font-bold uppercase"
+          target="_blank"
+          rel="noreferrer"
+          href="https://www.youtube.com/watch?v=NsT30qGayP4"
+          >VER +</a
+        >
       </div>
     </section>
   </body>
diff --git a/tailwind.config.js b/tailwind.config.js
index a9e59cd..7116ebe 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,8 @@ module.exports = {
       blanco: "#fff5e8",
       naranja: "#ff4e1f",
       celeste: "#b9d7ea",
+      amarillo: "#f9af39",
+      violeta: "#dda7dd",
     },
   },
   plugins: [],
