From 30c7c0870bfa75b4a238d0a0842eea21fb1c7c95 Mon Sep 17 00:00:00 2001
From: Sergio Otero <sergotero@gmail.com>
Date: Mon, 13 Oct 2025 19:57:58 +0200
Subject: [PATCH 1/4] feat: interaction 01 completed

---
 starter_code/index.html            |  18 +-
 starter_code/stylesheets/style.css | 290 +++++++++++++++++++++++++++++
 2 files changed, 299 insertions(+), 9 deletions(-)

diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..c72b4a3ef 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -64,7 +64,7 @@
     <div>
       <h1>Great teamwork starts with a digital HQ</h1>
 
-      <p>Slack is free to try for as long as you'd like.</p>
+      <p><span>Slack is free to try</span> for as long as you'd like.</p>
 
       <div>
         <button>Sign up with email</button>
@@ -106,7 +106,7 @@ <h3>Teams large and small rely on Slack</h3>
         <li>
           <p><span>85%</span></p>
           <p>
-            of users say Slack has improved communication
+            of users say Slack has<br>improved<br>communication
             <sup>*</sup>
           </p>
         </li>
@@ -114,7 +114,7 @@ <h3>Teams large and small rely on Slack</h3>
         <li>
           <p><span>86%</span></p>
           <p>
-            feel their ability to work remotely has improved has improved
+            feel their ability to work<br>remotely has improved
             <sup>*</sup>
           </p>
         </li>
@@ -122,7 +122,7 @@ <h3>Teams large and small rely on Slack</h3>
         <li>
           <p><span>88%</span></p>
           <p>
-            feel more connected to their teams*
+            feel more connected to<br>their teams*
             <sup>*</sup>
           </p>
         </li>
@@ -138,6 +138,7 @@ <h3>Welcome to your new digital HQ</h3>
 
   </main>
 
+  <hr>
   <footer>
     <ul>
       <li>Status</li>
@@ -149,20 +150,19 @@ <h3>Welcome to your new digital HQ</h3>
       <li>Download Slack</li>
     </ul>
 
-    <hr>
 
     <ul>
       <li>
-        <i class="fab fa-twitter"></i>
+        <i class="fab fa-twitter fa-2x"></i>
       </li>
       <li>
-        <i class="fab fa-facebook"></i>
+        <i class="fab fa-facebook fa-2x"></i>
       </li>
       <li>
-        <i class="fab fa-youtube"></i>
+        <i class="fab fa-youtube fa-2x"></i>
       </li>
       <li>
-        <i class="fab fa-linkedin"></i>
+        <i class="fab fa-linkedin fa-2x"></i>
       </li>
     </ul>
 
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..4bb015ed4 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,293 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+*{
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0px;
+    padding: 0px;
+}
+
+@media only screen and (max-width: 768px) {
+    
+    /* Elemento NAV */
+    nav{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        background-color: #540B51;
+    }
+    
+    /* DIV contenedor del NAV*/
+    nav > div:first-of-type{
+        display: flex;
+        padding: 1rem;
+    }
+
+    /* Listado del NAV */
+    nav ul:first-of-type{
+        display: none;
+    }
+
+    /* Logotipo */
+    nav > div:first-of-type > img:first-of-type{
+        max-width: 15rem;
+    }
+
+    /* Botones buscar y menú hamburguesa */
+    nav > div:nth-of-type(2) button{
+        padding: 1rem 1rem;
+        margin-right: 1rem;
+        background-color: #540B51;
+        border: none;
+    }
+
+    /* Header */
+    header{
+        background-color: #540B51;
+        color: #FFFFFF;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Título */
+    header h1{
+        text-align: center;
+        padding: 2rem;
+        font-size: 4rem;
+    }
+
+    /* Subtítulo */
+    header h1 + p{
+        text-align: center;
+        font-size: 1.5rem;
+        margin-bottom: 2rem;
+    }
+
+    /* Resaltado en el subtítulo */
+    header h1 + p > span {
+        color: #ECB12F;
+        font-weight: 600;
+    }
+
+    /* DIV botones de registro */
+    header div:first-of-type > div{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Registro por email */
+    header div:first-of-type > div > button{
+        width: 90%;
+        padding: 1rem;
+        border-radius: 5px;
+        border: none;
+        font-size: 1.25rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        margin: 1rem;
+    }
+
+    header div:first-of-type > div > button:first-of-type{
+        color: #540B51;
+    }
+
+    /* Registro por Google */
+    header div:first-of-type > div > button:nth-of-type(2){
+        display: flex;
+        color: #FFFFFF;
+        background-color: #4285F4;
+        gap: 10rem;
+    }
+
+    header div:first-of-type > div > button:nth-of-type(2) img{
+        background-color: #FFFFFF;
+        border-radius: 5px;
+        max-width: 2rem;
+    }
+
+    header div:first-of-type > div > button:nth-of-type(2) span{
+        align-self: center;
+    }
+
+    /* Imagen HEADER */
+    header > div:nth-of-type(2) img{
+        max-width: 100%;
+        padding-top: 3rem;
+        object-fit: cover;
+    }
+
+    /* SECTION logos patrocinadores */
+    main > section:first-of-type{
+        background-color: #F3EAE2;
+    }
+
+    /* Título sección */
+    main > section:first-of-type > p{
+        text-align: center;
+        padding: 3rem;
+        text-transform: uppercase;
+        font-weight: 700;
+        font-size: 1.5rem;
+    }
+
+    /* Contenedor imágenes sección */
+    main > section:first-of-type div{
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-around;
+    }
+
+    /* Imágenes sección (patrocinadores) */
+    main > section:first-of-type img{
+        max-height: 5rem;
+        padding: 0.5rem;
+        margin-bottom: 4rem;
+    }
+
+    /* Sección 02 */
+    section:nth-of-type(2){
+        display: flex;
+        flex-direction: column;
+        background-color: #FFFFFF;
+        padding: 2rem;
+    }
+
+    /* Título sección 02 */
+    section:nth-of-type(2) h3{
+        text-align: center;
+        padding: 2rem;
+        font-size: 3rem;
+        color: #540B51;
+    }
+
+    /* Intro sección 02 */
+    section:nth-of-type(2) h3+p{
+        text-align: center;
+        font-size: 1.5rem;
+        margin-bottom: 5rem;
+    }
+
+    /* Elementos lista sección 02 */
+    section:nth-of-type(2) li{
+        list-style-type: none;
+        font-weight: 600;
+        text-align: center;
+        margin-bottom: 3rem;
+    }
+
+    section:nth-of-type(2) li span{
+        color: #540B51;
+        font-size: 4rem;
+    }
+
+    /* Seccion 03 */
+    section:nth-of-type(3){
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+        background-color: #540B51;
+    }
+
+    /* Título seccion 03 */
+    section:nth-of-type(3) h3{
+        text-align: center;
+        padding: 2rem;
+        font-size: 3rem;
+        color: #FFFFFF;
+    }
+
+    /* Botones sección 03 */
+    section:nth-of-type(3) button{
+        width: 90%;
+        height: 3rem;
+        margin: 1rem;
+        font-size: 1.25rem;
+        text-transform: uppercase;
+        border: none;
+        border-radius: 5px;
+    }
+
+    section:nth-of-type(3) button:nth-of-type(1){
+        color: #540B51;
+        background-color: #FFFFFF;
+    }
+
+    section:nth-of-type(3) button:nth-of-type(2){
+        color: #FFFFFF;
+        background-color: #540B51;
+        border: 1px solid #FFFFFF;
+        margin-bottom: 3rem;
+    }
+
+    /* Footer */
+
+    footer{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-color: #FFFFFF;
+    }
+
+    hr{
+        border-top: 2px solid #e0e0e0;
+        margin: 4rem 2rem 2rem 2rem;
+    }
+
+    footer ul:first-of-type{
+        display: flex;
+        flex-direction: column;
+        padding: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    footer ul:first-of-type li{
+        list-style-type: none;
+        font-weight: 600;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    footer ul:first-of-type li:nth-last-child(2)::before{
+        content: url(/starter_code/images/icon-region.png);
+        margin-right: 0.5rem;
+    }
+
+    footer ul:first-of-type li:last-of-type::before{
+        content: url(/starter_code/images/icon-download.png);
+        color: #4285F4;
+        margin-right: 0.5rem;
+    }
+
+    footer ul:first-of-type li:last-of-type{
+        color: #4285F4;
+    }
+
+    footer ul:nth-of-type(2){
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    footer ul:nth-of-type(2) li{
+        list-style-type: none;
+        margin: 2rem;
+    }
+
+    footer div:first-of-type{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+}
\ No newline at end of file

From 8c04cdf4b64b979444bb1e05059f32470d8c4e12 Mon Sep 17 00:00:00 2001
From: Sergio Otero <sergotero@gmail.com>
Date: Mon, 13 Oct 2025 20:13:26 +0200
Subject: [PATCH 2/4] feat: iteration 02 completed

---
 starter_code/stylesheets/style.css | 295 +++++++++++++++++++++++++++++
 1 file changed, 295 insertions(+)

diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 4bb015ed4..d6b85b90c 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -297,4 +297,299 @@ footer links grey: #454245
         text-align: center;
     }
 
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+    
+    /* Elemento NAV */
+    nav{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        background-color: #540B51;
+    }
+    
+    /* DIV contenedor del NAV*/
+    nav > div:first-of-type{
+        display: flex;
+        padding: 1rem;
+    }
+
+    /* Listado del NAV */
+    nav ul:first-of-type{
+        display: none;
+    }
+
+    /* Logotipo */
+    nav > div:first-of-type > img:first-of-type{
+        max-width: 15rem;
+    }
+
+    /* Botones buscar y menú hamburguesa */
+    nav > div:nth-of-type(2) button{
+        padding: 1rem 1rem;
+        margin-right: 1rem;
+        background-color: #540B51;
+        border: none;
+    }
+
+    /* Header */
+    header{
+        background-color: #540B51;
+        color: #FFFFFF;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    header div:first-of-type{
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    /* Título */
+    header h1{
+        text-align: left;
+        padding-bottom: 2rem;
+        font-size: 4rem;
+    }
+
+    /* Subtítulo */
+    header h1 + p{
+        text-align: left;
+        font-size: 1rem;
+        margin-bottom: 2rem;
+    }
+
+    /* Resaltado en el subtítulo */
+    header h1 + p > span {
+        color: #ECB12F;
+        font-weight: 600;
+    }
+
+    /* DIV botones de registro */
+    header div:first-of-type > div{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Registro por email */
+    header div:first-of-type > div > button{
+        width: 90%;
+        padding: 1rem;
+        border-radius: 5px;
+        border: none;
+        font-size: 1.25rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        margin: 1rem;
+    }
+
+    header div:first-of-type > div > button:first-of-type{
+        color: #540B51;
+    }
+
+    /* Registro por Google */
+    header div:first-of-type > div > button:nth-of-type(2){
+        display: flex;
+        color: #FFFFFF;
+        background-color: #4285F4;
+        gap: 1rem;
+    }
+
+    header div:first-of-type > div > button:nth-of-type(2) img{
+        background-color: #FFFFFF;
+        border-radius: 5px;
+        max-width: 2rem;
+    }
+
+    header div:first-of-type > div > button:nth-of-type(2) span{
+        align-self: center;
+    }
+
+    /* Imagen HEADER */
+    header > div:nth-of-type(2) img{
+        max-width: 100%;
+        padding-top: 3rem;
+        object-fit: cover;
+    }
+
+    /* SECTION logos patrocinadores */
+    main > section:first-of-type{
+        background-color: #F3EAE2;
+    }
+
+    /* Título sección */
+    main > section:first-of-type > p{
+        text-align: center;
+        padding: 3rem;
+        text-transform: uppercase;
+        font-weight: 700;
+        font-size: 1.5rem;
+    }
+
+    /* Contenedor imágenes sección */
+    main > section:first-of-type div{
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+    }
+
+    /* Imágenes sección (patrocinadores) */
+    main > section:first-of-type img{
+        max-height: 3.5rem;
+        padding: 0.5rem;
+        margin-bottom: 4rem;
+    }
+
+    /* Sección 02 */
+    section:nth-of-type(2){
+        display: flex;
+        flex-direction: column;
+        background-color: #FFFFFF;
+        padding: 2rem;
+    }
+
+    /* Título sección 02 */
+    section:nth-of-type(2) h3{
+        text-align: center;
+        padding: 2rem;
+        font-size: 3rem;
+        color: #540B51;
+    }
+
+    /* Intro sección 02 */
+    section:nth-of-type(2) h3+p{
+        text-align: center;
+        font-size: 1.5rem;
+        margin-bottom: 5rem;
+    }
+
+    section:nth-of-type(2) ul:first-of-type{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    /* Elementos lista sección 02 */
+    section:nth-of-type(2) li{
+        list-style-type: none;
+        font-weight: 600;
+        text-align: left;
+        margin-bottom: 3rem;
+    }
+
+    section:nth-of-type(2) li span{
+        color: #540B51;
+        font-size: 4rem;
+    }
+
+    /* Seccion 03 */
+    section:nth-of-type(3){
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+        background-color: #540B51;
+    }
+
+    /* Título seccion 03 */
+    section:nth-of-type(3) h3{
+        text-align: center;
+        padding: 2rem;
+        font-size: 3rem;
+        color: #FFFFFF;
+    }
+
+    /* Botones sección 03 */
+    section:nth-of-type(3) button{
+        width: 90%;
+        height: 3rem;
+        margin: 1rem;
+        font-size: 1.25rem;
+        text-transform: uppercase;
+        border: none;
+        border-radius: 5px;
+    }
+
+    section:nth-of-type(3) button:nth-of-type(1){
+        color: #540B51;
+        background-color: #FFFFFF;
+    }
+
+    section:nth-of-type(3) button:nth-of-type(2){
+        color: #FFFFFF;
+        background-color: #540B51;
+        border: 1px solid #FFFFFF;
+        margin-bottom: 3rem;
+    }
+
+    /* Footer */
+
+    footer{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-color: #FFFFFF;
+    }
+
+    hr{
+        border-top: 2px solid #e0e0e0;
+        margin: 4rem 2rem 2rem 2rem;
+    }
+
+    footer ul:first-of-type{
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 2rem;
+    }
+
+    footer ul:first-of-type li{
+        list-style-type: none;
+        font-weight: 600;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        padding: 1rem;
+    }
+
+    footer ul:first-of-type li:nth-last-child(2)::before{
+        content: url(/starter_code/images/icon-region.png);
+        margin-right: 0.5rem;
+    }
+
+    footer ul:first-of-type li:last-of-type::before{
+        content: url(/starter_code/images/icon-download.png);
+        color: #4285F4;
+        margin-right: 0.5rem;
+    }
+
+    footer ul:first-of-type li:last-of-type{
+        color: #4285F4;
+    }
+
+    footer ul:nth-of-type(2){
+        display: flex;
+        align-items: center;
+        justify-content: start;
+    }
+
+    footer ul:nth-of-type(2) li{
+        list-style-type: none;
+        margin: 2rem;
+    }
+
+    footer div:first-of-type{
+        display: flex;
+        align-items: center;
+        justify-content: left;
+        text-align: center;
+        padding: 1rem;
+    }
+
 }
\ No newline at end of file

From 09ddaf9c7e6aae3936a8842d5f0fbe033f49f21f Mon Sep 17 00:00:00 2001
From: Sergio Otero <sergotero@gmail.com>
Date: Mon, 13 Oct 2025 20:34:39 +0200
Subject: [PATCH 3/4] feat: iteration 03 completed

---
 starter_code/stylesheets/style.css | 340 ++++++++++++++++++++++++++++-
 1 file changed, 339 insertions(+), 1 deletion(-)

diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index d6b85b90c..99ad1fc8e 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -299,7 +299,7 @@ footer links grey: #454245
 
 }
 
-@media only screen and (min-width: 768px) and (max-width: 1024px) {
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
     
     /* Elemento NAV */
     nav{
@@ -592,4 +592,342 @@ footer links grey: #454245
         padding: 1rem;
     }
 
+}
+
+@media only screen and (min-width: 1025px) and (max-width: 1440px) {
+    
+    /* Elemento NAV */
+    nav{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        background-color: #540B51;
+    }
+    
+    /* DIV contenedor del NAV*/
+    nav > div:first-of-type{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 70%;
+        padding: 1rem;
+    }
+
+    /* Listado del NAV */
+    nav ul:first-of-type{
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        width: 80%;
+    }
+
+    nav ul:first-of-type > li{
+        list-style-type: none;
+        margin: 0rem 2rem;
+    }
+
+    nav ul:first-of-type > li a{
+        text-decoration: none;
+        color: #FFFFFF;
+    }
+
+    nav > div:first-of-type{
+        display: flex;
+    }
+
+    /* Logotipo */
+    nav > div:first-of-type > img:first-of-type{
+        max-width: 10rem;
+    }
+
+    nav > div:nth-of-type(2){
+        display: flex;
+        width: 30%;
+    }
+
+    nav > div:nth-of-type(2) li:nth-of-type(2){
+        background-color: #FFFFFF;
+        border-radius: 5px;
+        padding: 1rem;
+    }
+
+    nav > div:nth-of-type(2) li:nth-of-type(2) > a{
+        color: #540B51;
+        text-transform: uppercase;
+        font-weight: 600;
+    }
+
+    /* Botones buscar y menú hamburguesa */
+    nav > div:nth-of-type(2) button{
+        padding: 1rem 1rem;
+        margin-right: 1rem;
+        background-color: #540B51;
+        border: none;
+    }
+
+    nav > div:nth-of-type(2) button:last-of-type{
+        display: none;
+    }
+
+    /* Header */
+    header{
+        background-color: #540B51;
+        color: #FFFFFF;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    header div:first-of-type{
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    /* Título */
+    header h1{
+        text-align: left;
+        padding-bottom: 2rem;
+        font-size: 4rem;
+    }
+
+    /* Subtítulo */
+    header h1 + p{
+        text-align: left;
+        font-size: 1rem;
+        margin-bottom: 2rem;
+    }
+
+    /* Resaltado en el subtítulo */
+    header h1 + p > span {
+        color: #ECB12F;
+        font-weight: 600;
+    }
+
+    /* DIV botones de registro */
+    header div:first-of-type > div{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Registro por email */
+    header div:first-of-type > div > button{
+        width: 90%;
+        padding: 1rem;
+        border-radius: 5px;
+        border: none;
+        font-size: 1.25rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        margin: 1rem;
+    }
+
+    header div:first-of-type > div > button:first-of-type{
+        color: #540B51;
+    }
+
+    /* Registro por Google */
+    header div:first-of-type > div > button:nth-of-type(2){
+        display: flex;
+        color: #FFFFFF;
+        background-color: #4285F4;
+        gap: 1rem;
+    }
+
+    header div:first-of-type > div > button:nth-of-type(2) img{
+        background-color: #FFFFFF;
+        border-radius: 5px;
+        max-width: 2rem;
+    }
+
+    header div:first-of-type > div > button:nth-of-type(2) span{
+        align-self: center;
+    }
+
+    /* Imagen HEADER */
+    header > div:nth-of-type(2) img{
+        max-width: 100%;
+        padding-top: 3rem;
+        object-fit: cover;
+    }
+
+    /* SECTION logos patrocinadores */
+    main > section:first-of-type{
+        background-color: #F3EAE2;
+    }
+
+    /* Título sección */
+    main > section:first-of-type > p{
+        text-align: center;
+        padding: 3rem;
+        text-transform: uppercase;
+        font-weight: 700;
+        font-size: 1.5rem;
+    }
+
+    /* Contenedor imágenes sección */
+    main > section:first-of-type div{
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+    }
+
+    /* Imágenes sección (patrocinadores) */
+    main > section:first-of-type img{
+        max-height: 3.5rem;
+        padding: 0.5rem;
+        margin-bottom: 4rem;
+    }
+
+    /* Sección 02 */
+    section:nth-of-type(2){
+        display: flex;
+        flex-direction: column;
+        background-color: #FFFFFF;
+        padding: 2rem;
+    }
+
+    /* Título sección 02 */
+    section:nth-of-type(2) h3{
+        text-align: center;
+        padding: 2rem;
+        font-size: 3rem;
+        color: #540B51;
+    }
+
+    /* Intro sección 02 */
+    section:nth-of-type(2) h3+p{
+        text-align: center;
+        font-size: 1.5rem;
+        margin-bottom: 5rem;
+    }
+
+    section:nth-of-type(2) ul:first-of-type{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    /* Elementos lista sección 02 */
+    section:nth-of-type(2) li{
+        list-style-type: none;
+        font-weight: 600;
+        text-align: left;
+        margin-bottom: 3rem;
+    }
+
+    section:nth-of-type(2) li span{
+        color: #540B51;
+        font-size: 4rem;
+    }
+
+    /* Seccion 03 */
+    section:nth-of-type(3){
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        padding: 1rem;
+        background-color: #540B51;
+    }
+
+    /* Título seccion 03 */
+    section:nth-of-type(3) h3{
+        text-align: center;
+        width: 100%;
+        padding: 2rem;
+        font-size: 3rem;
+        color: #FFFFFF;
+    }
+
+    /* Botones sección 03 */
+    section:nth-of-type(3) button{
+        width: 20%;
+        height: 3rem;
+        margin: 1rem;
+        font-size: 1.25rem;
+        text-transform: uppercase;
+        border: none;
+        border-radius: 5px;
+    }
+
+    section:nth-of-type(3) button:nth-of-type(1){
+        color: #540B51;
+        background-color: #FFFFFF;
+    }
+
+    section:nth-of-type(3) button:nth-of-type(2){
+        color: #FFFFFF;
+        background-color: #540B51;
+        border: 1px solid #FFFFFF;
+
+    }
+
+    /* Footer */
+
+    footer{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-color: #FFFFFF;
+    }
+
+    hr{
+        border-top: 2px solid #e0e0e0;
+        margin: 4rem 2rem 2rem 2rem;
+    }
+
+    footer ul:first-of-type{
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 2rem;
+    }
+
+    footer ul:first-of-type li{
+        list-style-type: none;
+        font-weight: 600;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        padding: 1rem;
+    }
+
+    footer ul:first-of-type li:nth-last-child(2)::before{
+        content: url(/starter_code/images/icon-region.png);
+        margin-right: 0.5rem;
+    }
+
+    footer ul:first-of-type li:last-of-type::before{
+        content: url(/starter_code/images/icon-download.png);
+        color: #4285F4;
+        margin-right: 0.5rem;
+    }
+
+    footer ul:first-of-type li:last-of-type{
+        color: #4285F4;
+    }
+
+    footer ul:nth-of-type(2){
+        display: flex;
+        align-items: center;
+        justify-content: start;
+    }
+
+    footer ul:nth-of-type(2) li{
+        list-style-type: none;
+        margin: 2rem;
+    }
+
+    footer div:first-of-type{
+        display: flex;
+        align-items: center;
+        justify-content: left;
+        text-align: center;
+        padding: 1rem;
+    }
+
 }
\ No newline at end of file

From 174c496f0e45d398b994d3ba5639b11dff4388ef Mon Sep 17 00:00:00 2001
From: Sergio Otero <sergotero@gmail.com>
Date: Mon, 13 Oct 2025 20:38:51 +0200
Subject: [PATCH 4/4] feat: iteration 04 completed

---
 starter_code/stylesheets/style.css | 338 +++++++++++++++++++++++++++++
 1 file changed, 338 insertions(+)

diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 99ad1fc8e..2323529fd 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -930,4 +930,342 @@ footer links grey: #454245
         padding: 1rem;
     }
 
+}
+
+@media only screen and (min-width: 1441px) {
+    
+    /* Elemento NAV */
+    nav{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        background-color: #540B51;
+    }
+    
+    /* DIV contenedor del NAV*/
+    nav > div:first-of-type{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 70%;
+        padding: 1rem;
+    }
+
+    /* Listado del NAV */
+    nav ul:first-of-type{
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        width: 80%;
+    }
+
+    nav ul:first-of-type > li{
+        list-style-type: none;
+        margin: 0rem 2rem;
+    }
+
+    nav ul:first-of-type > li a{
+        text-decoration: none;
+        color: #FFFFFF;
+    }
+
+    nav > div:first-of-type{
+        display: flex;
+    }
+
+    /* Logotipo */
+    nav > div:first-of-type > img:first-of-type{
+        max-width: 10rem;
+    }
+
+    nav > div:nth-of-type(2){
+        display: flex;
+        width: 30%;
+    }
+
+    nav > div:nth-of-type(2) li:nth-of-type(2){
+        background-color: #FFFFFF;
+        border-radius: 5px;
+        padding: 1rem;
+    }
+
+    nav > div:nth-of-type(2) li:nth-of-type(2) > a{
+        color: #540B51;
+        text-transform: uppercase;
+        font-weight: 600;
+    }
+
+    /* Botones buscar y menú hamburguesa */
+    nav > div:nth-of-type(2) button{
+        padding: 1rem 1rem;
+        margin-right: 1rem;
+        background-color: #540B51;
+        border: none;
+    }
+
+    nav > div:nth-of-type(2) button:last-of-type{
+        display: none;
+    }
+
+    /* Header */
+    header{
+        background-color: #540B51;
+        color: #FFFFFF;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    header div:first-of-type{
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    /* Título */
+    header h1{
+        text-align: left;
+        padding-bottom: 2rem;
+        font-size: 4rem;
+    }
+
+    /* Subtítulo */
+    header h1 + p{
+        text-align: left;
+        font-size: 1rem;
+        margin-bottom: 2rem;
+    }
+
+    /* Resaltado en el subtítulo */
+    header h1 + p > span {
+        color: #ECB12F;
+        font-weight: 600;
+    }
+
+    /* DIV botones de registro */
+    header div:first-of-type > div{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Registro por email */
+    header div:first-of-type > div > button{
+        width: 90%;
+        padding: 1rem;
+        border-radius: 5px;
+        border: none;
+        font-size: 1.25rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        margin: 1rem;
+    }
+
+    header div:first-of-type > div > button:first-of-type{
+        color: #540B51;
+    }
+
+    /* Registro por Google */
+    header div:first-of-type > div > button:nth-of-type(2){
+        display: flex;
+        color: #FFFFFF;
+        background-color: #4285F4;
+        gap: 1rem;
+    }
+
+    header div:first-of-type > div > button:nth-of-type(2) img{
+        background-color: #FFFFFF;
+        border-radius: 5px;
+        max-width: 2rem;
+    }
+
+    header div:first-of-type > div > button:nth-of-type(2) span{
+        align-self: center;
+    }
+
+    /* Imagen HEADER */
+    header > div:nth-of-type(2) img{
+        max-width: 100%;
+        padding: 5rem;
+        object-fit: cover;
+    }
+
+    /* SECTION logos patrocinadores */
+    main > section:first-of-type{
+        background-color: #F3EAE2;
+    }
+
+    /* Título sección */
+    main > section:first-of-type > p{
+        text-align: center;
+        padding: 3rem;
+        text-transform: uppercase;
+        font-weight: 700;
+        font-size: 1.5rem;
+    }
+
+    /* Contenedor imágenes sección */
+    main > section:first-of-type div{
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+    }
+
+    /* Imágenes sección (patrocinadores) */
+    main > section:first-of-type img{
+        max-height: 3.5rem;
+        padding: 0.5rem;
+        margin-bottom: 4rem;
+    }
+
+    /* Sección 02 */
+    section:nth-of-type(2){
+        display: flex;
+        flex-direction: column;
+        background-color: #FFFFFF;
+        padding: 2rem;
+    }
+
+    /* Título sección 02 */
+    section:nth-of-type(2) h3{
+        text-align: center;
+        padding: 2rem;
+        font-size: 3rem;
+        color: #540B51;
+    }
+
+    /* Intro sección 02 */
+    section:nth-of-type(2) h3+p{
+        text-align: center;
+        font-size: 1.5rem;
+        margin-bottom: 5rem;
+    }
+
+    section:nth-of-type(2) ul:first-of-type{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    /* Elementos lista sección 02 */
+    section:nth-of-type(2) li{
+        list-style-type: none;
+        font-weight: 600;
+        text-align: left;
+        margin-bottom: 3rem;
+    }
+
+    section:nth-of-type(2) li span{
+        color: #540B51;
+        font-size: 4rem;
+    }
+
+    /* Seccion 03 */
+    section:nth-of-type(3){
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        padding: 1rem;
+        background-color: #540B51;
+    }
+
+    /* Título seccion 03 */
+    section:nth-of-type(3) h3{
+        text-align: center;
+        width: 100%;
+        padding: 2rem;
+        font-size: 3rem;
+        color: #FFFFFF;
+    }
+
+    /* Botones sección 03 */
+    section:nth-of-type(3) button{
+        width: 20%;
+        height: 3rem;
+        margin: 1rem;
+        font-size: 1.25rem;
+        text-transform: uppercase;
+        border: none;
+        border-radius: 5px;
+    }
+
+    section:nth-of-type(3) button:nth-of-type(1){
+        color: #540B51;
+        background-color: #FFFFFF;
+    }
+
+    section:nth-of-type(3) button:nth-of-type(2){
+        color: #FFFFFF;
+        background-color: #540B51;
+        border: 1px solid #FFFFFF;
+
+    }
+
+    /* Footer */
+
+    footer{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-color: #FFFFFF;
+    }
+
+    hr{
+        border-top: 2px solid #e0e0e0;
+        margin: 4rem 2rem 2rem 2rem;
+    }
+
+    footer ul:first-of-type{
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 2rem;
+    }
+
+    footer ul:first-of-type li{
+        list-style-type: none;
+        font-weight: 600;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        padding: 1rem;
+    }
+
+    footer ul:first-of-type li:nth-last-child(2)::before{
+        content: url(/starter_code/images/icon-region.png);
+        margin-right: 0.5rem;
+    }
+
+    footer ul:first-of-type li:last-of-type::before{
+        content: url(/starter_code/images/icon-download.png);
+        color: #4285F4;
+        margin-right: 0.5rem;
+    }
+
+    footer ul:first-of-type li:last-of-type{
+        color: #4285F4;
+    }
+
+    footer ul:nth-of-type(2){
+        display: flex;
+        align-items: center;
+        justify-content: start;
+    }
+
+    footer ul:nth-of-type(2) li{
+        list-style-type: none;
+        margin: 2rem;
+    }
+
+    footer div:first-of-type{
+        display: flex;
+        align-items: center;
+        justify-content: left;
+        text-align: center;
+        padding: 1rem;
+    }
+
 }
\ No newline at end of file